Skip to content

Commit 0cbaaf6

Browse files
devowhippitdevowhippit
committed
1.0.0-9
1 parent b38c00e commit 0cbaaf6

7 files changed

Lines changed: 66 additions & 25 deletions

File tree

‎dist/demo/demo.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111

1212
<body>
1313
<main class="container mx-auto">
14-
<h1>1.0.0-8</h1>
14+
<h1>1.0.0-9</h1>
1515
<h2>Layouts</h2>
1616
<div>Layout Demo</div>
1717
</main>

‎dist/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@
1111

1212
<body>
1313
<main class="container mx-auto">
14-
<h1>1.0.0-8</h1>
14+
<h1>1.0.0-9</h1>
1515
<h2>Home</h2>
1616
<h1 id="nyco-patterns-framework">NYCO Patterns Framework</h1>
1717
<p>Front-end stack, CLI, and cross-utility library for design systems. Created by NYC Opportunity for <a href="https://nycopatterns.cityofnewyork.us">NYCO Patterns</a>, <a href="https://accesspatterns.cityofnewyork.us">ACCESS NYC Patterns</a>, and Growing Up/Generation NYC Patterns.</p>
1818
<ul>
1919
<li>📦 Creates and organizes pattern source code using a <a href="#design-system-methodology">design system methodology</a>.</li>
20-
<li>⚪ Manages <a href="#design-tokens">Design Tokens</a> through JavaScript configuration and shares them with Sass files.</li>
20+
<li>⚫ Manages <a href="#design-tokens">Design Tokens</a> through JavaScript configuration and shares them with Sass files.</li>
2121
<li>💅 Compiles <a href="https://sass-lang.com/">Sass</a> using <a href="https://github.com/sass/node-sass">node-sass</a> and <a href="https://postcss.org/">PostCSS</a>.</li>
2222
<li>🗞 Bundles JavaScript ES using <a href="https://rollupjs.org/guide/en/">rollup.js</a>.</li>
2323
<li>🗜️ SVG icon optimizer and sprite generator using <a href="https://github.com/svg/svgo">svgo</a> and <a href="https://github.com/svgstore/svgstore-cli">svgstore-cli</a>.</li>

‎dist/toggle.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111

1212
<body>
1313
<main class="container mx-auto">
14-
<h1>1.0.0-8</h1>
14+
<h1>1.0.0-9</h1>
1515
<h2>Toggle</h2>
1616
<h1 id="toggle">Toggle</h1>
1717
<p>The Toggle utility uses JavaScript to expand and collapse elements based on user interaction. This will toggle dynamic aria attributes as well as dynamic classes on both the toggling element and target of the toggle. The class “hidden” will be toggled on the target element and the class “active” will be toggled on the toggling element and target element. The target is selected using the static <code>aria-controls</code> attribute by its <code>id</code>.</p>
@@ -297,7 +297,6 @@ <h2 id="demo">Demo</h2>
297297
<div aria-hidden="false" class="bg-color-blue-light p-4 text-center active" id="toggle-target">Targeted toggle element</div>
298298
</p> &lt;button aria-controls=&quot;toggle-target&quot; aria-expanded=&quot;true&quot; class=&quot;btn btn-primary mb-3&quot; data-js=&quot;toggle&quot; type=&quot;button&quot;&gt;Toggle&lt;/button&gt; &lt;div aria-hidden=&quot;false&quot; class=&quot;bg-color-blue-light p-4 text-center active&quot; id=&quot;toggle-target&quot;&gt;Targeted toggle element&lt;/div&gt;
299299
</main>
300-
<script src="/reload/reload.js"></script>
301300
</body>
302301

303302
</html>

‎dist/utilities/toggle/toggle.iffe.js‎

Lines changed: 59 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ var Toggle = (function () {
2929
activeClass: s.activeClass ? s.activeClass : Toggle.activeClass,
3030
before: s.before ? s.before : false,
3131
after: s.after ? s.after : false
32-
};
32+
}; // Store the element for potential use in callbacks
33+
3334
this.element = s.element ? s.element : false;
3435

3536
if (this.element) {
@@ -41,8 +42,10 @@ var Toggle = (function () {
4142
document.querySelector('body').addEventListener('click', function (event) {
4243
if (!event.target.matches(this$1.settings.selector)) {
4344
return;
44-
}
45+
} // Store the event for potential use in callbacks
46+
4547

48+
this$1.event = event;
4649
this$1.toggle(event);
4750
});
4851
} // Record that a toggle using this selector has been instantiated. This
@@ -54,29 +57,35 @@ var Toggle = (function () {
5457
};
5558
/**
5659
* Logs constants to the debugger
57-
* @param{object} eventThe main click event
58-
* @return {object} The class
60+
*
61+
* @param{Object}eventThe main click event
62+
*
63+
* @return {Object} The class
5964
*/
6065

6166

6267
Toggle.prototype.toggle = function toggle(event) {
6368
var this$1 = this;
6469
var el = event.target;
6570
var target = false;
71+
var focusable = [];
6672
event.preventDefault();
6773
/** Anchor Links */
6874

6975
target = el.hasAttribute('href') ? document.querySelector(el.getAttribute('href')) : target;
7076
/** Toggle Controls */
7177

7278
target = el.hasAttribute('aria-controls') ? document.querySelector("#" + el.getAttribute('aria-controls')) : target;
79+
/** Focusable Children */
80+
81+
focusable = target ? target.querySelectorAll(Toggle.elFocusable.join(', ')) : focusable;
7382
/** Main Functionality */
7483

7584
if (!target) {
7685
return this;
7786
}
7887

79-
this.elementToggle(el, target);
88+
this.elementToggle(el, target, focusable);
8089
/** Undo */
8190

8291
if (el.dataset[this.settings.namespace + "Undo"]) {
@@ -92,21 +101,30 @@ var Toggle = (function () {
92101
};
93102
/**
94103
* The main toggling method
95-
* @param{object} el The current element to toggle active
96-
* @param{object} target The target element to toggle active/hidden
97-
* @return {object} The class
104+
*
105+
* @param{Object} el The current element to toggle active
106+
* @param{Object} target The target element to toggle active/hidden
107+
* @param{NodeList}focusableAny focusable children in the target
108+
*
109+
* @return {Object} The class
98110
*/
99111

100112

101-
Toggle.prototype.elementToggle = function elementToggle(el, target) {
113+
Toggle.prototype.elementToggle = function elementToggle(el, target, focusable) {
102114
var this$1 = this;
115+
if (focusable === void 0) focusable = [];
103116
var i = 0;
104117
var attr = '';
105118
var value = ''; // Get other toggles that might control the same element
106119

107-
var others = document.querySelectorAll("[aria-controls=\"" + el.getAttribute('aria-controls') + "\"]");
120+
var others = document.querySelectorAll("[aria-controls=\"" + el.getAttribute('aria-controls') + "\"]"); // Store elements for potential use in callbacks
121+
122+
this.element = el;
123+
this.target = target;
124+
this.others = others;
125+
this.focusable = focusable;
108126
/**
109-
* Toggling before hook.
127+
* Toggling before hook
110128
*/
111129

112130
if (this.settings.before) {
@@ -147,10 +165,31 @@ var Toggle = (function () {
147165
}
148166
}
149167
/**
150-
* Jump Links
168+
* Hide the Toggle Target's focusable children from focus.
169+
* If an element has the data-attribute 'data-toggle-tabindex', use that
170+
* as the default tab index of the element.
151171
*/
152172

153173

174+
focusable.forEach(function (el) {
175+
var tabindex = el.getAttribute('tabindex');
176+
177+
if (tabindex === '-1') {
178+
var dataDefault = el.getAttribute("data-" + Toggle.namespace + "-tabindex");
179+
180+
if (dataDefault) {
181+
el.setAttribute('tabindex', dataDefault);
182+
} else {
183+
el.removeAttribute('tabindex');
184+
}
185+
} else {
186+
el.setAttribute('tabindex', '-1');
187+
}
188+
});
189+
/**
190+
* Jump to Target Element (if Toggle Element is an anchor link).
191+
*/
192+
154193
if (el.hasAttribute('href')) {
155194
// Reset the history state, this will clear out
156195
// the hash when the jump item is toggled closed.
@@ -203,21 +242,24 @@ var Toggle = (function () {
203242

204243

205244
Toggle.selector = '[data-js*="toggle"]';
206-
/** @type {String} The namespace for our data attribute settings */
245+
/** @type {String} The namespace for our data attribute settings */
207246

208247
Toggle.namespace = 'toggle';
209-
/** @type {String} The hide class */
248+
/** @type {String} The hide class */
210249

211250
Toggle.inactiveClass = 'hidden';
212-
/** @type {String} The active class */
251+
/** @type {String} The active class */
213252

214253
Toggle.activeClass = 'active';
215-
/** @type {Array} Aria roles to toggle true/false on the toggling element */
254+
/** @type {Array} Aria roles to toggle true/false on the toggling element */
216255

217256
Toggle.elAriaRoles = ['aria-pressed', 'aria-expanded'];
218-
/** @type {Array} Aria roles to toggle true/false on the target element */
257+
/** @type {Array} Aria roles to toggle true/false on the target element */
219258

220259
Toggle.targetAriaRoles = ['aria-hidden'];
260+
/** @type {Array} Focusable elements to hide within the hidden target element */
261+
262+
Toggle.elFocusable = ['a', 'button', 'input', 'select', 'textarea', 'object', 'embed', 'form', 'fieldset', 'legend', 'label', 'area', 'audio', 'video', 'iframe', 'svg', 'details', 'table', '[tabindex]', '[contenteditable]', '[usemap]'];
221263

222264
return Toggle;
223265

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@nycopportunity/patterns-framework",
33
"nice": "NYCO Patterns Framework",
4-
"version": "1.0.0-8",
4+
"version": "1.0.0-9",
55
"description": "Front-end utilities from the Mayor's Office for Economic Opportunity",
66
"author": "NYC Opportunity<products@nycopportunity.nyc.gov>",
77
"license": "GPL-3.0+",

‎src/config/_tokens.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,5 @@ $tokens:(
66
speed: 0.75s,
77
timing-function: cubic-bezier(0.23, 1, 0.32, 1)
88
),
9-
version: "1.0.0-8"
9+
version: "1.0.0-9"
1010
);

0 commit comments

Comments
 (0)