Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add codepen button to examples - part 1! #1532

Merged
merged 10 commits into from
Oct 30, 2020
Merged

Add codepen button to examples - part 1! #1532

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c1a63fc
Add margin below example header withcodepen button
Sep 24, 2020
cc1917b
Normalize id format
Sep 24, 2020
0aa70d9
Add codepen button to carousel examples
Sep 24, 2020
b9b4940
Add codepen button to combobox select only
Sep 24, 2020
b4fbe57
Add codepen button to menubar-navigation.html
Sep 24, 2020
21a39ce
Add listbox grouped codepen button
Sep 24, 2020
363bf26
Add codepen button to combobox datepicker
Sep 24, 2020
0797e9e
Include other styles used in example pages
Oct 8, 2020
da93530
Merge branch 'master' into codepen-implementation-part1
Oct 22, 2020
affcdd9
Merge branch 'master' into codepen-implementation-part1
mcking65 Oct 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions examples/carousel/carousel-1-prev-next.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,9 @@ <h2>Example Options</h2>
</section>

<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">
<section id="myCarousel" class="carousel" aria-roledescription="carousel" aria-label="Highlighted television shows">
Expand Down Expand Up @@ -533,7 +535,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/carousel-prev-next.css" type="text/css">carousel-prev-next.css</a></li>
<li>Javascript: <a href="js/carousel-prev-next.js" type="text/javascript">carousel-prev-next.js</a></li>
</ul>
Expand All @@ -545,7 +547,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>
Expand Down
8 changes: 5 additions & 3 deletions examples/carousel/carousel-2-tablist.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,9 @@ <h2>Example Options</h2>
</section>

<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">
<section id="myCarousel" class="carousel-tablist" aria-roledescription="carousel" aria-label="Highlighted television shows">
Expand Down Expand Up @@ -770,7 +772,7 @@ <h3 id="rps_label_2">Tabs</h3>

<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
<ul id="css_js_files">
<li>CSS: <a href="css/carousel-tablist.css" type="text/css">carousel-tablist.css</a></li>
<li>Javascript: <a href="js/carousel-tablist.js" type="text/javascript">carousel-tablist.js</a></li>
</ul>
Expand All @@ -782,7 +784,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>
Expand Down
1 change: 1 addition & 0 deletions examples/carousel/css/carousel-prev-next.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ img.reload {

.carousel {
background-color: #eee;
max-width: 900px;
}

.carousel .carousel-inner {
Expand Down
1 change: 1 addition & 0 deletions examples/carousel/css/carousel-tablist.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ img.reload {

.carousel-tablist {
background-color: #eee;
max-width: 900px;
}

.carousel-tablist .carousel-inner {
Expand Down
4 changes: 2 additions & 2 deletions examples/coding-template/Example-Template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<section>
<h2>Javascript and CSS Source Code</h2>
<!-- After the js and css files are named with the name of this example, change the href and text of the following 2 links to refer to the appropriate js and css files. -->
<ul id="cssJsFiles">
<ul id="css_js_files">
<li>
CSS:
<a href="css/example_name.css" type="tex/css">example_name.css</a>
Expand All @@ -214,7 +214,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
If you change the ID of either the 'ex1' div or the 'sc1' pre, be sure to update the sourceCode.add function parameters.
-->
<script>
sourceCode.add('sc1', 'ex1', 'ex_label', 'cssJsFiles');
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
sourceCode.make();
</script>
</section>
Expand Down
8 changes: 5 additions & 3 deletions examples/combobox/combobox-datepicker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,9 @@ <h1>Date Picker Combobox 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">
Expand Down Expand Up @@ -716,7 +718,7 @@ <h3 id="rps_label_5">Date Picker Dialog: Date Grid</h3>

<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
<ul id="css_js_files">
<li>
CSS:
<a href="css/combobox-datepicker.css" type="text/css">combobox-datepicker.css</a>
Expand All @@ -734,7 +736,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
<pre><code id="source1"></code></pre>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
<script>
sourceCode.add('source1', 'ex1');
sourceCode.add('source1', 'ex1', 'ex_label', 'css_js_files');
sourceCode.make();
</script>
</section>
Expand Down
8 changes: 5 additions & 3 deletions examples/combobox/combobox-select-only.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,9 @@ <h1>Select-Only Combobox 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 id="combo1-label" class="combo-label">Favorite Fruit</label>
Expand Down Expand Up @@ -405,7 +407,7 @@ <h3 id="rps_label_listbox">Listbox Popup</h3>

<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
<ul id="css_js_files">
<li>
CSS:
<a href="css/select-only.css" type="text/css">select-only.css</a>
Expand All @@ -423,7 +425,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>
Expand Down
1 change: 1 addition & 0 deletions examples/css/core.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ table.data.attributes tbody td {
display: flex;
align-items: center;
margin-top: 3rem;
margin-bottom: 1rem;
page-break-after: avoid;
page-break-inside: avoid;
font: 100% sans-serif;
Expand Down
4 changes: 4 additions & 0 deletions examples/js/examples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -401,6 +401,10 @@ function addOpenInCodePenForm(
css: '',
js: '',
head: '<base href="' + location.href + '">',
css_external:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Woohoo!

location.origin +
'/examples/css/core.css;' +
'https://www.w3.org/StyleSheets/TR/2016/base.css',
};

var totalFetchedFiles = 0;
Expand Down
8 changes: 5 additions & 3 deletions examples/listbox/listbox-grouped.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,9 @@ <h1>Listbox Example with Grouped Options</h1>
<li><a href="listbox-collapsible.html">Collapsible Dropdown Listbox Example</a>: Single-select collapsible listbox that expands when activated, similar to HTML <code>select</code> with the attribute <code>size=&quot;1&quot;</code>.</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="ex">
<div class="listbox-area">
Expand Down Expand Up @@ -211,7 +213,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/listbox.css" type="tex/css">listbox.css</a>
Expand All @@ -228,7 +230,7 @@ <h2 id="sc_label">HTML Source Code</h2>
<div id="sc_start_sep" role="separator" aria-labelledby="sc_start_sep sc_label" aria-label="Start of "></div>
<pre><code id="sc"></code></pre>
<div id="sc_end_sep" role="separator" aria-labelledby="sc_end_sep sc_label" aria-label="End of"></div>
<script>sourceCode.add('sc', 'ex')</script>
<script>sourceCode.add('sc', 'ex', 'ex_label', 'css_js_files')</script>
<script> sourceCode.make() </script>
</section>
</main>
Expand Down
8 changes: 5 additions & 3 deletions examples/menubar/menubar-navigation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,9 @@ <h1>Navigation Menubar Example</h1>
</ul>

<section id="code-ex-1">
<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="Mythical University">
Expand Down Expand Up @@ -654,7 +656,7 @@ <h3 id="rps2_label">Submenu</h3>

<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
<ul id="css_js_files">
<li>CSS: <a href="css/menubar-navigation.css" type="tex/css">menubar-navigation.css</a></li>
<li>Javascript: <a href="js/menubar-navigation.js" type="text/javascript">menubar-navigation.js</a></li>
</ul>
Expand All @@ -666,7 +668,7 @@ <h2 id="sc_label">HTML Source Code</h2>
<pre><code id="sc1"></code></pre>
<div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc_label" aria-label="End of "></div>
<script>
sourceCode.add('sc1', 'ex1')
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files')
</script>

<!-- After all source has been added, run make to do the insert. -->
Expand Down