Skip to content

Commit b807e03

Browse files
wesleycolewesleycole
committed
building out the tabs JS plugin and default styles
1 parent 71f141e commit b807e03

24 files changed

+274
-10
lines changed

‎_component/accordion/component-wp.html renamed to ‎_component/accordion/component.php

File renamed without changes.

‎_component/accordion/component-twig.html renamed to ‎_component/accordion/component.twig

File renamed without changes.

‎_component/tabs/component.html

Whitespace-only changes.

‎_component/tabs/component.php

Whitespace-only changes.

‎_component/tabs/component.twig

Whitespace-only changes.

‎_component/tabs/css/component.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.Tabs-link {
2+
background: #f9f9f9;
3+
color: #ccc;
4+
display: inline-block;
5+
padding: 10px 15px;
6+
text-decoration: none;
7+
transition: all 0.3s ease-in-out;
8+
}
9+
10+
.Tabs-link:hover,
11+
.Tabs-link.is-active {
12+
background: #eee;
13+
color: #222;
14+
}
15+
16+
.Tab {
17+
border: 2px solid #eee;
18+
display: none;
19+
padding: 30px 15px;
20+
}
21+
22+
.Tab.is-active {
23+
display: block;
24+
}

‎_component/tabs/css/component.scss

Whitespace-only changes.

‎_component/tabs/example.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US" class="no-js">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Accordion</title>
6+
<link rel="stylesheet" href="css/component.css" />
7+
</head>
8+
<body>
9+
10+
<div class="Tabs">
11+
<nav class="Tabs-nav">
12+
<a href="#" class="Tabs-link is-active">Tab 1</a>
13+
<a href="#" class="Tabs-link">Tab 2</a>
14+
</nav>
15+
<div class="Tab is-active">
16+
Tab 1 Content
17+
</div>
18+
<div class="Tab">
19+
Tab 2 Content
20+
</div>
21+
</div><!-- //.Tabs -->
22+
23+
<script src="js/component.js"></script>
24+
<script src="js/component-usage.js"></script>
25+
</body>
26+
</html>

‎_component/tabs/index.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,6 @@ layout: component
55
path_slug: tabs
66
category: ui
77
iframe_height: medium
8-
---
8+
---
9+
10+
<iframe {% if page.iframe_height %}class="h-{{ page.iframe_height }}"{% endif %} src="{{ site.baseurl }}/component/{{ page.path_slug }}/example.html"></iframe>

‎_component/tabs/js/component-usage.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
Objectiv.tabs({
2+
target: '.Tabs', // ID (or class) of accordion container
3+
});

‎_component/tabs/js/component.js

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
/**
2+
* Objectiv Tabs
3+
*
4+
*/
5+
6+
( function() {
7+
'use strict';
8+
9+
// Let's make sure that we have an Objectiv object
10+
if ( 'object' !== typeof window.Objectiv) {
11+
window.Objectiv = {};
12+
}
13+
14+
window.Objectiv.tabs = function(options) {
15+
// Make sure that a target is passed into the options object
16+
if ('undefined' === typeof options.target)
17+
return false;
18+
19+
// Set up the variables
20+
var tabs = document.querySelector(options.target),
21+
tabLinks = tabs.getElementsByClassName('Tabs-link'),
22+
tabContainers = tabs.getElementsByClassName('Tab'),
23+
activeIndex = 0;
24+
25+
// If we don't have tabs, jump out
26+
if (!tabs) return;
27+
28+
function tabClickHandler(link, index) {
29+
link.addEventListener('click', function(e) {
30+
e.preventDefault();
31+
goToTab(index);
32+
});
33+
}
34+
35+
function goToTab(index) {
36+
if (index !== activeIndex && index >= 0 && index <= tabLinks.length) {
37+
tabLinks[activeIndex].classList.remove('is-active');
38+
tabLinks[index].classList.add('is-active');
39+
tabContainers[activeIndex].classList.remove('is-active');
40+
tabContainers[index].classList.add('is-active');
41+
42+
tabLinks[activeIndex].setAttribute( 'aria-selected', 'false' );
43+
tabLinks[activeIndex].setAttribute( 'aria-expanded', 'false' );
44+
tabContainers[activeIndex].setAttribute( 'aria-hidden', 'true' );
45+
46+
tabLinks[index].setAttribute( 'aria-selected', 'true' );
47+
tabLinks[index].setAttribute( 'aria-expanded', 'true' );
48+
tabContainers[index].setAttribute( 'aria-hidden', 'false' );
49+
50+
51+
activeIndex = index;
52+
}
53+
54+
55+
}
56+
57+
Array.prototype.map.call(tabLinks, function(value, index) {
58+
var link = value;
59+
tabClickHandler(link, index);
60+
61+
if (link.classList.contains('is-active')) {
62+
link.setAttribute( 'aria-selected', 'true' );
63+
link.setAttribute( 'aria-expanded', 'true' );
64+
}
65+
});
66+
67+
Array.prototype.map.call(tabContainers, function(value, index) {
68+
var content = value;
69+
70+
content.setAttribute( 'role', 'tabpanel' );
71+
if (content.classList.contains('is-active')) {
72+
content.setAttribute( 'aria-hidden', 'false' );
73+
} else {
74+
content.setAttribute( 'aria-hidden', 'true' );
75+
}
76+
});
77+
}
78+
})();

‎_includes/partials/tabs.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
```
55
<h3>PHP</h3>
66
```php
7-
{% include_relative component-wp.html %}
7+
{% include_relative component.php %}
88
```
99
<h3>Twig</h3>
1010
```twig
11-
{% include_relative component-twig.html %}
11+
{% include_relative component.twig %}
1212
```

‎_site/component/accordion/component-wp.html renamed to ‎_site/component/accordion/component.php

File renamed without changes.

‎_site/component/accordion/component-twig.html renamed to ‎_site/component/accordion/component.twig

File renamed without changes.

‎_site/component/accordion/index.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ <h1>Accordion</h1>
125125

126126
<iframe class="h-medium" src="/component-library/component/accordion/example.html"></iframe>
127127

128-
<h2>Advanced Custom Fields</h2>
128+
<h2 id="advanced-custom-fields">Advanced Custom Fields</h2>
129129
<p>If working with ACF, you will want to utilize the following fields:</p>
130130

131131
<p><strong>Repeater Field: accordion</strong></p>
@@ -137,7 +137,7 @@ <h2>Advanced Custom Fields</h2>
137137
<li>WYSIWYG: accordion_content</li>
138138
</ul>
139139

140-
<h2>Markup</h2>
140+
<h2 id="markup">Markup</h2>
141141

142142
<h3>HTML</h3>
143143
<div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"Accordion"</span><span class="nt">&gt;</span>
@@ -206,7 +206,7 @@ <h3>Twig</h3>
206206
</code></pre>
207207
</div>
208208

209-
<h2>Styles</h2>
209+
<h2 id="styles">Styles</h2>
210210

211211
<h3 id="css">CSS</h3>
212212
<div class="language-css highlighter-rouge"><pre class="highlight"><code><span class="nc">.Accordion-header</span> <span class="p">{</span>
@@ -302,8 +302,8 @@ <h3 id="sass">Sass</h3>
302302
</code></pre>
303303
</div>
304304

305-
<h2>Javascript</h2>
306-
<h3>Plugin</h3>
305+
<h2 id="javascript">Javascript</h2>
306+
<h3 id="plugin">Plugin</h3>
307307
<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="cm">/**
308308
* Objectiv Accessible Accordion
309309
*
@@ -374,7 +374,7 @@ <h3>Plugin</h3>
374374
<span class="p">})();</span>
375375
</code></pre>
376376
</div>
377-
<h3>Usage</h3>
377+
<h3 id="usage">Usage</h3>
378378
<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="nx">Objectiv</span><span class="p">.</span><span class="nx">accordion</span><span class="p">({</span>
379379
<span class="na">target</span><span class="p">:</span> <span class="s1">'.Accordion'</span><span class="p">,</span> <span class="c1">// ID (or class) of accordion container</span>
380380
<span class="p">});</span>

‎_site/component/tabs/component.html

Whitespace-only changes.

‎_site/component/tabs/component.php

Whitespace-only changes.

‎_site/component/tabs/component.twig

Whitespace-only changes.

‎_site/component/tabs/css/component.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.Tabs-link {
2+
background: #f9f9f9;
3+
color: #ccc;
4+
display: inline-block;
5+
padding: 10px 15px;
6+
text-decoration: none;
7+
transition: all 0.3s ease-in-out;
8+
}
9+
10+
.Tabs-link:hover,
11+
.Tabs-link.is-active {
12+
background: #eee;
13+
color: #222;
14+
}
15+
16+
.Tab {
17+
border: 2px solid #eee;
18+
display: none;
19+
padding: 30px 15px;
20+
}
21+
22+
.Tab.is-active {
23+
display: block;
24+
}

‎_site/component/tabs/css/component.scss

Whitespace-only changes.

‎_site/component/tabs/example.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US" class="no-js">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Accordion</title>
6+
<link rel="stylesheet" href="css/component.css" />
7+
</head>
8+
<body>
9+
10+
<div class="Tabs">
11+
<nav class="Tabs-nav">
12+
<a href="#" class="Tabs-link is-active">Tab 1</a>
13+
<a href="#" class="Tabs-link">Tab 2</a>
14+
</nav>
15+
<div class="Tab is-active">
16+
Tab 1 Content
17+
</div>
18+
<div class="Tab">
19+
Tab 2 Content
20+
</div>
21+
</div><!-- //.Tabs -->
22+
23+
<script src="js/component.js"></script>
24+
<script src="js/component-usage.js"></script>
25+
</body>
26+
</html>

‎_site/component/tabs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ <h4>Content</h4>
121121
<h1>Tabs</h1>
122122

123123

124-
124+
<iframe class="h-medium" src="/component-library/component/tabs/example.html"></iframe>
125125

126126
</div>
127127

‎_site/component/tabs/js/component-usage.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
Objectiv.tabs({
2+
target: '.Tabs', // ID (or class) of accordion container
3+
});

‎_site/component/tabs/js/component.js

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
/**
2+
* Objectiv Tabs
3+
*
4+
*/
5+
6+
( function() {
7+
'use strict';
8+
9+
// Let's make sure that we have an Objectiv object
10+
if ( 'object' !== typeof window.Objectiv) {
11+
window.Objectiv = {};
12+
}
13+
14+
window.Objectiv.tabs = function(options) {
15+
// Make sure that a target is passed into the options object
16+
if ('undefined' === typeof options.target)
17+
return false;
18+
19+
// Set up the variables
20+
var tabs = document.querySelector(options.target),
21+
tabLinks = tabs.getElementsByClassName('Tabs-link'),
22+
tabContainers = tabs.getElementsByClassName('Tab'),
23+
activeIndex = 0;
24+
25+
// If we don't have tabs, jump out
26+
if (!tabs) return;
27+
28+
function tabClickHandler(link, index) {
29+
link.addEventListener('click', function(e) {
30+
e.preventDefault();
31+
goToTab(index);
32+
});
33+
}
34+
35+
function goToTab(index) {
36+
if (index !== activeIndex && index >= 0 && index <= tabLinks.length) {
37+
tabLinks[activeIndex].classList.remove('is-active');
38+
tabLinks[index].classList.add('is-active');
39+
tabContainers[activeIndex].classList.remove('is-active');
40+
tabContainers[index].classList.add('is-active');
41+
42+
tabLinks[activeIndex].setAttribute( 'aria-selected', 'false' );
43+
tabLinks[activeIndex].setAttribute( 'aria-expanded', 'false' );
44+
tabContainers[activeIndex].setAttribute( 'aria-hidden', 'true' );
45+
46+
tabLinks[index].setAttribute( 'aria-selected', 'true' );
47+
tabLinks[index].setAttribute( 'aria-expanded', 'true' );
48+
tabContainers[index].setAttribute( 'aria-hidden', 'false' );
49+
50+
51+
activeIndex = index;
52+
}
53+
54+
55+
}
56+
57+
Array.prototype.map.call(tabLinks, function(value, index) {
58+
var link = value;
59+
tabClickHandler(link, index);
60+
61+
if (link.classList.contains('is-active')) {
62+
link.setAttribute( 'aria-selected', 'true' );
63+
link.setAttribute( 'aria-expanded', 'true' );
64+
}
65+
});
66+
67+
Array.prototype.map.call(tabContainers, function(value, index) {
68+
var content = value;
69+
70+
content.setAttribute( 'role', 'tabpanel' );
71+
if (content.classList.contains('is-active')) {
72+
content.setAttribute( 'aria-hidden', 'false' );
73+
} else {
74+
content.setAttribute( 'aria-hidden', 'true' );
75+
}
76+
});
77+
}
78+
})();

0 commit comments

Comments
 (0)