7 example pages: Add Open in Codepen buttons (pull w3c#1627)

Adds an open in codepen button to the following example pages: * slider/multithumb-slider.html * breadcrumb/index.html * meter/meter.html * slider/slider-1.html * combobox/combobox-autocomplete-none.html * combobox/combobox-autocomplete-list.html * combobox/combobox-autocomplete-both.html
nschonni · Dec 1, 2020 · 0ddaf82 · 0ddaf82
1 parent d012c92
commit 0ddaf82
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 21 deletions.
diff --git a/examples/breadcrumb/index.html b/examples/breadcrumb/index.html
@@ -26,7 +26,9 @@
     <h1>Breadcrumb Example</h1>
     <p>The following example demonstrates the <a href="../../#breadcrumb">breadcrumb design pattern</a>.</p>
     <section>
-      <h2 id="ex_label">Example</h2>
+      <div class="example-header">
+        <h2 id="ex_label">Example</h2>
+      </div>
       <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
       <div id="ex1">
         <nav aria-label="Breadcrumb" class="breadcrumb">
@@ -113,7 +115,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
 
     <section>
       <h2>Javascript and CSS Source Code</h2>
-      <ul>
+      <ul id="css_js_files">
         <li>
           CSS:
           <a href="css/breadcrumb.css" type="tex/css">breadcrumb.css</a>
@@ -127,7 +129,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
       <pre><code id="sc1"></code></pre>
       <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
       <script>
-        sourceCode.add('sc1', 'ex1');
+        sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
         sourceCode.make();
       </script>
     </section>

diff --git a/examples/combobox/combobox-autocomplete-both.html b/examples/combobox/combobox-autocomplete-both.html
@@ -46,7 +46,9 @@ <h1>Editable Combobox With Both List and Inline Autocomplete Example</h1>
       <li><a href="combobox-datepicker.html">Date Picker Combobox</a>: An editable date input combobox that opens a dialog containing a calendar grid and buttons for navigating by month and year.</li>
     </ul>
     <section>
-      <h2 id="ex_label">Example</h2>
+      <div class="example-header">
+        <h2 id="ex_label">Example</h2>
+      </div>
       <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
       <div id="ex1">
         <label for="cb1-input">State</label>
@@ -492,7 +494,7 @@ <h3 id="rps_label_button">Button</h3>
 
     <section>
       <h2>Javascript and CSS Source Code</h2>
-      <ul>
+      <ul id="css_js_files">
         <li>
           CSS:
           <a href="css/combobox-autocomplete.css" type="text/css">combobox-autocomplete.css</a>
@@ -516,7 +518,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
         It renders the HTML in the preceding pre element with ID 'sc1'.
         -->
       <script>
-        sourceCode.add('sc1', 'ex1');
+        sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
         sourceCode.make();
       </script>
     </section>

diff --git a/examples/combobox/combobox-autocomplete-list.html b/examples/combobox/combobox-autocomplete-list.html
@@ -47,7 +47,9 @@ <h1>Editable Combobox With List Autocomplete Example</h1>
     </ul>
 
     <section>
-      <h2 id="ex_label">Example</h2>
+      <div class="example-header">
+        <h2 id="ex_label">Example</h2>
+      </div>
       <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
       <div id="ex1">
         <label for="cb1-input">State</label>
@@ -487,7 +489,7 @@ <h3 id="rps_label_button">Button</h3>
 
     <section>
       <h2>Javascript and CSS Source Code</h2>
-      <ul>
+      <ul id="css_js_files">
         <li>
           CSS:
           <a href="css/combobox-autocomplete.css" type="text/css">combobox-autocomplete.css</a>
@@ -507,7 +509,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
       </pre>
       <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
       <script>
-        sourceCode.add('sc1', 'ex1');
+        sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
         sourceCode.make();
       </script>
     </section>

diff --git a/examples/combobox/combobox-autocomplete-none.html b/examples/combobox/combobox-autocomplete-none.html
@@ -44,7 +44,9 @@ <h1>Editable Combobox without Autocomplete Example</h1>
     </ul>
 
     <section>
-      <h2 id="ex_label">Example</h2>
+      <div class="example-header">
+        <h2 id="ex_label">Example</h2>
+      </div>
       <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
       <div id="ex1">
         <label for="cb1-input">Search</label>
@@ -435,7 +437,7 @@ <h3 id="rps_label_button">Button</h3>
 
     <section>
       <h2>Javascript and CSS Source Code</h2>
-      <ul>
+      <ul id="css_js_files">
         <li>
           CSS:
           <a href="css/combobox-autocomplete.css" type="text/css">combobox-autocomplete.css</a>
@@ -453,7 +455,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
       <pre><code id="sc1"></code></pre>
       <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
       <script>
-        sourceCode.add('sc1', 'ex1');
+        sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
         sourceCode.make();
       </script>
     </section>

diff --git a/examples/meter/meter.html b/examples/meter/meter.html
@@ -31,7 +31,9 @@ <h1> Meter Example</h1>
   <p>The following example of a CPU meter demonstrates the <a href="../../#meter">meter design pattern</a>.</p>
 
   <section>
-    <h2 id="ex_label">Example</h2>
+    <div class="example-header">
+      <h2 id="ex_label">Example</h2>
+    </div>
     <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
 
     <div id="example">
@@ -108,7 +110,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
   <section>
     <h2>Javascript and CSS Source Code</h2>
 
-    <ul>
+    <ul id="css_js_files">
       <li>
         CSS:
         <a href="css/meter.css" type="text/css">meter.css</a>
@@ -130,7 +132,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
 
     <script>
-      sourceCode.add('source1', 'example');
+      sourceCode.add('source1', 'example', 'ex_label', 'css_js_files');
       sourceCode.make();
     </script>
   </section>

diff --git a/examples/slider/multithumb-slider.html b/examples/slider/multithumb-slider.html
@@ -45,7 +45,9 @@ <h1>Horizontal Multi-Thumb Slider Example</h1>
       </li>
     </ul>
     <section>
-       <h2 id="ex_label">Example</h2>
+      <div class="example-header">
+        <h2 id="ex_label">Example</h2>
+      </div>
           <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
           <div id="ex1">
               <h3>Hotel Price Range</h3>
@@ -250,7 +252,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
 
   <section>
         <h2>Javascript and CSS Source Code</h2>
-        <ul>
+        <ul id="css_js_files">
           <li>CSS: <a href="css/multithumb-slider.css" type="tex/css">multithumb-slider.css</a></li>
           <li>Javascript: <a href="js/multithumb-slider.js" type="text/javascript">multithumb-slider.js</a></li>
         </ul>
@@ -262,7 +264,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
           sourceCode.make();
         </script>
     </section>

diff --git a/examples/slider/slider-1.html b/examples/slider/slider-1.html
@@ -40,7 +40,9 @@ <h1>Horizontal Slider Example</h1>
       </li>
     </ul>
     <section>
-       <h2 id="ex_label">Example</h2>
+      <div class="example-header">
+        <h2 id="ex_label">Example</h2>
+      </div>
           <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>        
           <div id="ex1">
             <div id="idSliders">
@@ -229,7 +231,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
 
   <section>
         <h2>Javascript and CSS Source Code</h2>
-        <ul>
+        <ul id="css_js_files">
           <li>CSS: <a href="css/slider.css" type="tex/css">slider.css</a></li>
           <li>Javascript: <a href="js/slider.js" type="text/javascript">slider.js</a></li>
         </ul>
@@ -241,7 +243,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
         <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
-          sourceCode.add('sc1', 'ex1');
+          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
           sourceCode.make();
         </script>
     </section>