Skip to content

Commit

Permalink
chore: Run fix for Prettier JS formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@nschonni
nschonni committed Oct 1, 2020
1 parent ef240a4 commit ab999d4
Show file tree
Hide file tree
Showing 141 changed files with 26,309 additions and 18,302 deletions.
245 changes: 127 additions & 118 deletions examples/accordion/js/accordion.js
View file
Original file line number Diff line number Diff line change
@@ -1,134 +1,143 @@
/*
* This content is licensed according to the W3C Software License at
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
*
* Simple accordion pattern example
*/
* This content is licensed according to the W3C Software License at
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
*
* Simple accordion pattern example
*/

'use strict';

Array.prototype.slice.call(document.querySelectorAll('.Accordion')).forEach(function (accordion) {

// Allow for multiple accordion sections to be expanded at the same time
var allowMultiple = accordion.hasAttribute('data-allow-multiple');
// Allow for each toggle to both open and close individually
var allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');

// Create the array of toggle elements for the accordion group
var triggers = Array.prototype.slice.call(accordion.querySelectorAll('.Accordion-trigger'));
var panels = Array.prototype.slice.call(accordion.querySelectorAll('.Accordion-panel'));


accordion.addEventListener('click', function (event) {
var target = event.target;

if (target.classList.contains('Accordion-trigger')) {
// Check if the current toggle is expanded.
var isExpanded = target.getAttribute('aria-expanded') == 'true';
var active = accordion.querySelector('[aria-expanded="true"]');

// without allowMultiple, close the open accordion
if (!allowMultiple && active && active !== target) {
// Set the expanded state on the triggering element
active.setAttribute('aria-expanded', 'false');
// Hide the accordion sections, using aria-controls to specify the desired section
document.getElementById(active.getAttribute('aria-controls')).setAttribute('hidden', '');

// When toggling is not allowed, clean up disabled state
if (!allowToggle) {
active.removeAttribute('aria-disabled');
Array.prototype.slice
.call(document.querySelectorAll('.Accordion'))
.forEach(function (accordion) {
// Allow for multiple accordion sections to be expanded at the same time
var allowMultiple = accordion.hasAttribute('data-allow-multiple');
// Allow for each toggle to both open and close individually
var allowToggle = allowMultiple
? allowMultiple
: accordion.hasAttribute('data-allow-toggle');

// Create the array of toggle elements for the accordion group
var triggers = Array.prototype.slice.call(
accordion.querySelectorAll('.Accordion-trigger')
);
var panels = Array.prototype.slice.call(
accordion.querySelectorAll('.Accordion-panel')
);

accordion.addEventListener('click', function (event) {
var target = event.target;

if (target.classList.contains('Accordion-trigger')) {
// Check if the current toggle is expanded.
var isExpanded = target.getAttribute('aria-expanded') == 'true';
var active = accordion.querySelector('[aria-expanded="true"]');

// without allowMultiple, close the open accordion
if (!allowMultiple && active && active !== target) {
// Set the expanded state on the triggering element
active.setAttribute('aria-expanded', 'false');
// Hide the accordion sections, using aria-controls to specify the desired section
document
.getElementById(active.getAttribute('aria-controls'))
.setAttribute('hidden', '');

// When toggling is not allowed, clean up disabled state
if (!allowToggle) {
active.removeAttribute('aria-disabled');
}
}
}

if (!isExpanded) {
// Set the expanded state on the triggering element
target.setAttribute('aria-expanded', 'true');
// Hide the accordion sections, using aria-controls to specify the desired section
document.getElementById(target.getAttribute('aria-controls')).removeAttribute('hidden');

// If toggling is not allowed, set disabled state on trigger
if (!allowToggle) {
target.setAttribute('aria-disabled', 'true');
if (!isExpanded) {
// Set the expanded state on the triggering element
target.setAttribute('aria-expanded', 'true');
// Hide the accordion sections, using aria-controls to specify the desired section
document
.getElementById(target.getAttribute('aria-controls'))
.removeAttribute('hidden');

// If toggling is not allowed, set disabled state on trigger
if (!allowToggle) {
target.setAttribute('aria-disabled', 'true');
}
} else if (allowToggle && isExpanded) {
// Set the expanded state on the triggering element
target.setAttribute('aria-expanded', 'false');
// Hide the accordion sections, using aria-controls to specify the desired section
document
.getElementById(target.getAttribute('aria-controls'))
.setAttribute('hidden', '');
}
}
else if (allowToggle && isExpanded) {
// Set the expanded state on the triggering element
target.setAttribute('aria-expanded', 'false');
// Hide the accordion sections, using aria-controls to specify the desired section
document.getElementById(target.getAttribute('aria-controls')).setAttribute('hidden', '');
}

event.preventDefault();
}
});

// Bind keyboard behaviors on the main accordion container
accordion.addEventListener('keydown', function (event) {
var target = event.target;
var key = event.which.toString();

var isExpanded = target.getAttribute('aria-expanded') == 'true';
var allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');

// 33 = Page Up, 34 = Page Down
var ctrlModifier = (event.ctrlKey && key.match(/33|34/));

// Is this coming from an accordion header?
if (target.classList.contains('Accordion-trigger')) {
// Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
// 38 = Up, 40 = Down
if (key.match(/38|40/) || ctrlModifier) {
var index = triggers.indexOf(target);
var direction = (key.match(/34|40/)) ? 1 : -1;
var length = triggers.length;
var newIndex = (index + length + direction) % length;

triggers[newIndex].focus();

event.preventDefault();
}
else if (key.match(/35|36/)) {
// 35 = End, 36 = Home keyboard operations
switch (key) {
// Go to first accordion
case '36':
triggers[0].focus();
break;
});

// Bind keyboard behaviors on the main accordion container
accordion.addEventListener('keydown', function (event) {
var target = event.target;
var key = event.which.toString();

var isExpanded = target.getAttribute('aria-expanded') == 'true';
var allowToggle = allowMultiple
? allowMultiple
: accordion.hasAttribute('data-allow-toggle');

// 33 = Page Up, 34 = Page Down
var ctrlModifier = event.ctrlKey && key.match(/33|34/);

// Is this coming from an accordion header?
if (target.classList.contains('Accordion-trigger')) {
// Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
// 38 = Up, 40 = Down
if (key.match(/38|40/) || ctrlModifier) {
var index = triggers.indexOf(target);
var direction = key.match(/34|40/) ? 1 : -1;
var length = triggers.length;
var newIndex = (index + length + direction) % length;

triggers[newIndex].focus();

event.preventDefault();
} else if (key.match(/35|36/)) {
// 35 = End, 36 = Home keyboard operations
switch (key) {
// Go to first accordion
case '36':
triggers[0].focus();
break;
// Go to last accordion
case '35':
triggers[triggers.length - 1].focus();
break;
case '35':
triggers[triggers.length - 1].focus();
break;
}
event.preventDefault();
}
event.preventDefault();

}

}
});

// These are used to style the accordion when one of the buttons has focus
accordion.querySelectorAll('.Accordion-trigger').forEach(function (trigger) {

trigger.addEventListener('focus', function (event) {
accordion.classList.add('focus');
});

trigger.addEventListener('blur', function (event) {
accordion.classList.remove('focus');
});

});

// Minor setup: will set disabled state, via aria-disabled, to an
// expanded/ active accordion which is not allowed to be toggled close
if (!allowToggle) {
// Get the first expanded/ active accordion
var expanded = accordion.querySelector('[aria-expanded="true"]');

// If an expanded/ active accordion is found, disable
if (expanded) {
expanded.setAttribute('aria-disabled', 'true');
// These are used to style the accordion when one of the buttons has focus
accordion
.querySelectorAll('.Accordion-trigger')
.forEach(function (trigger) {
trigger.addEventListener('focus', function (event) {
accordion.classList.add('focus');
});

trigger.addEventListener('blur', function (event) {
accordion.classList.remove('focus');
});
});

// Minor setup: will set disabled state, via aria-disabled, to an
// expanded/ active accordion which is not allowed to be toggled close
if (!allowToggle) {
// Get the first expanded/ active accordion
var expanded = accordion.querySelector('[aria-expanded="true"]');

// If an expanded/ active accordion is found, disable
if (expanded) {
expanded.setAttribute('aria-disabled', 'true');
}
}
}

});
});
30 changes: 13 additions & 17 deletions examples/alert/js/alert.js
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,29 @@
/*
* This content is licensed according to the W3C Software License at
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
*
*/
* This content is licensed according to the W3C Software License at
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
*
*/

'use strict';

window.addEventListener('load', function () {

var button = document.getElementById('alert-trigger');

button.addEventListener('click', addAlert);

});

/*
* @function addAlert
*
* @desc Adds an alert to the page
*
* @param {Object} event - Standard W3C event object
*
*/

function addAlert (event) {

* @function addAlert
*
* @desc Adds an alert to the page
*
* @param {Object} event - Standard W3C event object
*
*/

function addAlert(event) {
var example = document.getElementById('example');
var template = document.getElementById('alert-template').innerHTML;

example.innerHTML = template;

}
Loading

0 comments on commit ab999d4

Please sign in to comment.