diff --git a/dist/js/calcite-web.js b/dist/js/calcite-web.js index 2026f1aa1..fcc43d9eb 100644 --- a/dist/js/calcite-web.js +++ b/dist/js/calcite-web.js @@ -162,7 +162,8 @@ function toggleExpanded(domNode) { // └──────────────────────┘ var boundEvents = { - dropdowns: [] + dropdowns: [], + accordions: [] }; // returns standard interaction event, later will add touch support @@ -343,51 +344,73 @@ function clipboard() { // Emitting a modal id toggle that modals state. // Emitting false or null closes all modals. -function accordion() { - var accordions = findElements('.js-accordion'); - bus.on('accordion:bind', bindAccordions); - bus.on('accordion:toggle', handleToggle); +function toggleClick(e) { + stopPropagation(e); + var parent = closest('accordion-section', target(e)); + bus.emit('accordion:toggle', { node: parent }); +} - function bindAccordions(options) { - if (!options) { - accordions.forEach(function (accordion) { - setUpAccordion(accordion); - }); - } else { - setUpAccordion(options.node); - } +function handleToggle(options) { + toggle(options.node, 'is-active'); + toggleExpanded(options.node); +} + +function checkKeyCode(e) { + if (e.keyCode === 13) { + toggleClick(e); } +} - function setUpAccordion(accordion) { - accordion.setAttribute('aria-live', 'polite'); - accordion.setAttribute('role', 'tablist'); - nodeListToArray(accordion.children).forEach(function (section) { - var sectionTitle = section.querySelector('.accordion-title'); - sectionTitle.setAttribute('role', 'tab'); - sectionTitle.setAttribute('tabindex', '0'); - if (has(section, 'is-active')) { - section.setAttribute('aria-expanded', 'true'); - } - add$1(sectionTitle, click(), toggleClick); - add$1(section, 'keyup', function (e) { - if (e.keyCode === 13) { - toggleClick(e); - } - }); +function bindAccordions(options) { + var accordions = findElements('.js-accordion'); + if (!options) { + accordions.forEach(function (accordion) { + setUpAccordion(accordion); }); + } else { + setUpAccordion(options.node); } +} - function toggleClick(e) { - stopPropagation(e); - var parent = closest('accordion-section', target(e)); - bus.emit('accordion:toggle', { node: parent }); - } +function setUpAccordion(accordion) { + accordion.setAttribute('aria-live', 'polite'); + accordion.setAttribute('role', 'tablist'); + nodeListToArray(accordion.children).forEach(function (section) { + var sectionTitle = section.querySelector('.accordion-title'); + sectionTitle.setAttribute('role', 'tab'); + sectionTitle.setAttribute('tabindex', '0'); + if (has(section, 'is-active')) { + section.setAttribute('aria-expanded', 'true'); + } + // check if the event was already added + var eventExists = false; + boundEvents.accordions.forEach(function (e) { + if (e.target === sectionTitle && e.event === click() && e.fn === toggleClick) { + eventExists = true; + } + }); + if (!eventExists) { + boundEvents.accordions.push({ target: sectionTitle, event: click(), fn: toggleClick }); + boundEvents.accordions.push({ target: section, event: 'keyup', fn: checkKeyCode }); + add$1(sectionTitle, click(), toggleClick); + add$1(section, 'keyup', checkKeyCode); + } + }); +} - function handleToggle(options) { - toggle(options.node, 'is-active'); - toggleExpanded(options.node); - } +function addListeners() { + bus.on('accordion:bind', bindAccordions); + bus.on('accordion:toggle', handleToggle); + listenersAdded = true; +} + +var listenersAdded = false; +function accordion() { + // only add the listeners if they haven't been added already + if (!listenersAdded) { + addListeners(); + } bus.emit('accordion:bind'); } @@ -436,13 +459,13 @@ function bindDropdowns(options) { // check if the event was already added var eventExists = false; boundEvents.dropdowns.forEach(function (e) { - if (e.target === toggle && e.event === click() && e.fn === toggleClick) { + if (e.target === toggle && e.event === click() && e.fn === toggleClick$1) { eventExists = true; } }); if (!eventExists) { - boundEvents.dropdowns.push({ target: toggle, event: click(), fn: toggleClick }); - add$1(toggle, click(), toggleClick); + boundEvents.dropdowns.push({ target: toggle, event: click(), fn: toggleClick$1 }); + add$1(toggle, click(), toggleClick$1); } }); } @@ -497,29 +520,29 @@ function arrowUp() { } } -function toggleClick(e) { +function toggleClick$1(e) { preventDefault(e); stopPropagation(e); var dropdown = closest('js-dropdown', e.target); bus.emit('dropdown:toggle', { node: dropdown, target: e.target }); } -function addListeners() { +function addListeners$1() { bus.on('dropdown:toggle', toggleDropdown); bus.on('dropdown:close', closeAllDropdowns); bus.on('keyboard:escape', closeAllDropdowns); bus.on('keyboard:arrow:down', arrowDown); bus.on('keyboard:arrow:up', arrowUp); bus.on('dropdown:focus', dropownFocusOn); - listenersAdded = true; + listenersAdded$1 = true; } -var listenersAdded = false; +var listenersAdded$1 = false; function dropdown() { // only add the listeners if they haven't been added already - if (!listenersAdded) { - addListeners(); + if (!listenersAdded$1) { + addListeners$1(); } bindDropdowns(); } @@ -1338,9 +1361,9 @@ function isScrolling() { var patterns = [accordion, clipboard, dropdown, drawer, expander, filterDropdown, modal, search, selectNav, sticky, tabs, thirdNav]; function init() { - while (patterns.length) { - patterns.shift().call(); - } + patterns.forEach(function (pattern) { + pattern(); + }); } function extend(plugin) { diff --git a/dist/js/calcite-web.min.js b/dist/js/calcite-web.min.js index 4363b681e..d631b4d38 100644 --- a/dist/js/calcite-web.min.js +++ b/dist/js/calcite-web.min.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.calcite=e()}(this,function(){"use strict";function t(t,e){var n=" "+t.className+" ";return n.indexOf(" "+e+" ")!==-1}function e(e,n){n.split(" ").forEach(function(n){t(e,n)||(e.className+=" "+n)})}function n(t,e){var n=" "+t.className+" ";e.split(" ").forEach(function(t){n=n.replace(" "+t+" "," ")}),t.className=n.trim()}function r(r,o){t(r,o)?n(r,o):e(r,o)}function o(t){t=d(t),t.forEach(function(t){n(t,"is-active")})}function i(t){t=d(t),t.forEach(function(t){e(t,"is-active")})}function a(t,n){o(t),e(n,"is-active")}function c(e,n){var r;for(r=n;r&&(1!==r.nodeType||!t(r,e));r=r.parentNode);return r}function d(t){return Array.isArray(t)?t:Array.prototype.slice.call(t)}function u(t,e){var n=e||document,r=n.querySelectorAll(t);return d(r)}function s(t,e){var n=e.filter(function(e){var n=t.toLowerCase(),r=e.innerHTML.toLowerCase();return r.indexOf(n)!==-1});return n}function f(t){t.forEach(function(t){if(t){var e=t.getAttribute("aria-hidden");"true"!==e?t.setAttribute("aria-hidden",!0):t.removeAttribute("aria-hidden")}})}function l(t){t.forEach(function(t){t&&t.setAttribute("aria-hidden",!0)})}function v(t){t.forEach(function(t){t&&t.removeAttribute("aria-hidden")})}function p(t){if(t){var e=t.getAttribute("aria-expanded");e?t.removeAttribute("aria-expanded"):t.setAttribute("aria-expanded","true")}}function m(){return"click"}function h(t,e,n){return t.addEventListener?t.addEventListener(e,n,!1):t.attachEvent?t.attachEvent("on"+e,n):void 0}function b(t,e,n){return t.removeEventListener?t.removeEventListener(e,n,!1):t.detachEvent?t.detachEvent("on"+e,n):void 0}function w(t){return t.target||t.srcElement}function y(t){return t.preventDefault?t.preventDefault():void(t.returnValue&&(t.returnValue=!1))}function g(t){return t=t||window.event,t.stopPropagation?t.stopPropagation():void(t.cancelBubble&&(t.cancelBubble=!0))}function A(t,e,n){var r,o,i,a;return a=function(){r=!1,o&&(i.apply(n,o),o=!1)},i=function(){r?o=arguments:(t.apply(n,arguments),setTimeout(a,e),r=!0)}}function k(){}function j(){function t(t){t?h(t.node,"click",e):n.forEach(function(t){h(t,"click",e)})}function e(t){t.preventDefault();var e=t.target.getAttribute("data-clipboard-target");document.querySelector(e).select(),document.execCommand("copy")}var n=u(".js-copy-to-clipboard");X.on("clipboard:bind",t),X.emit("clipboard:bind")}function E(){function e(t){t?n(t.node):a.forEach(function(t){n(t)})}function n(e){e.setAttribute("aria-live","polite"),e.setAttribute("role","tablist"),d(e.children).forEach(function(e){var n=e.querySelector(".accordion-title");n.setAttribute("role","tab"),n.setAttribute("tabindex","0"),t(e,"is-active")&&e.setAttribute("aria-expanded","true"),h(n,m(),o),h(e,"keyup",function(t){13===t.keyCode&&o(t)})})}function o(t){g(t);var e=c("accordion-section",w(t));X.emit("accordion:toggle",{node:e})}function i(t){r(t.node,"is-active"),p(t.node)}var a=u(".js-accordion");X.on("accordion:bind",e),X.on("accordion:toggle",i),X.emit("accordion:bind")}function S(t){b(document.body,m(),S),u(".js-dropdown").forEach(function(t){n(t,"is-active")}),u(".js-dropdown-toggle").forEach(function(t){t.setAttribute("aria-expanded","false")}),b(document,"keydown",q)}function x(n){if(n){var r=t(n.node,"is-active");X.emit("dropdown:close"),r||(e(n.node,"is-active"),n.target&&n.target.setAttribute("aria-expanded","true"),h(document,"keydown",q)),t(n.node,"is-active")&&h(document.body,m(),S)}}function q(t){40===t.keyCode|38===t.keyCode&&t.preventDefault()}function D(t){var e=u(".js-dropdown-toggle");e.forEach(function(t){var e=!1;U.dropdowns.forEach(function(n){n.target===t&&n.event===m()&&n.fn===N&&(e=!0)}),e||(U.dropdowns.push({target:t,event:m(),fn:N}),h(t,m(),N))})}function C(){var t=document.querySelector(".js-dropdown.is-active");return!!t&&t}function T(t){var e=document.activeElement,n=t.links.indexOf(e);n===-1?n=t.forward?0:t.links.length-1:t.forward?(n+=1,n===t.links.length&&(n=0)):(n-=1,n===-1&&(n=t.links.length-1)),t.links[n].focus()}function L(){var t=C();if(t){var e=u(".dropdown-link",t);X.emit("dropdown:focus",{links:e,forward:!0})}}function O(){var t=C();if(t){var e=u(".dropdown-link",t);X.emit("dropdown:focus",{links:e,forward:!1})}}function N(t){y(t),g(t);var e=c("js-dropdown",t.target);X.emit("dropdown:toggle",{node:e,target:t.target})}function M(){X.on("dropdown:toggle",x),X.on("dropdown:close",S),X.on("keyboard:escape",S),X.on("keyboard:arrow:down",L),X.on("keyboard:arrow:up",O),X.on("dropdown:focus",T),Z=!0}function P(){Z||M(),D()}function z(){function r(n){X.emit("drawer:close");var r=document.querySelector('.js-drawer[data-drawer="'+n.id+'"]'),o=t(r,"drawer-right"),a=t(r,"drawer-left");r.setAttribute("tabindex",0),e(r,"is-active"),o?e(p,"drawer-right-is-active"):a&&e(p,"drawer-left-is-active"),l([p,w]),h(r,m(),d),h(document,"focusin",i)}function o(t){if(t){var e=document.querySelector('.js-drawer[data-drawer="'+t.id+'"]');e.removeAttribute("tabindex"),n(e,"is-active")}else A.forEach(function(t){t.removeAttribute("tabindex"),n(t,"is-active")});n(p,"drawer-left-is-active"),n(p,"drawer-right-is-active"),v([p,w]),b(document,"focusin",i),f&&f.focus()}function i(e){c("js-drawer",e.target)||A.forEach(function(e){t(e,"is-active")&&e.focus()})}function a(t){t?h(t.node,m(),s):g.forEach(function(t){h(t,m(),s)})}function d(e){t(e.target,"js-drawer")&&X.emit("drawer:close")}function s(t){y(t);var e=t.target.getAttribute("data-drawer");X.emit("drawer:open",{id:e})}var f,p=document.querySelector(".wrapper"),w=document.querySelector(".footer"),g=u(".js-drawer-toggle"),A=u(".js-drawer");X.on("drawer:open",r),X.on("keyboard:escape",o),X.on("drawer:close",o),X.on("drawer:bind",a),X.emit("drawer:bind")}function H(){var r=u(".js-expand-toggle"),o=document.querySelectorAll(".js-expand");r.forEach(function(r){h(r,m(),function(i){y(i);var c=r.getAttribute("data-expand"),d=document.querySelector('.js-expand[data-expand="'+c+'"]'),u=t(d,"is-active"),s=t(d,"is-active");a(o,d),u&&s?n(d,"is-active"):e(d,"is-active")})})}function Y(){function i(){var t=u(".js-filter-dropdown");t.forEach(function(t){var r=t.getAttribute("data-filter-dropdown"),o=t.querySelector(".filter-dropdown-input");h(o,"focus",f);for(var i=t.querySelectorAll(".js-filter-dropdown-open"),a=0;a0?e(r,"hide"):n(r,"hide");for(var o=0;o'+i.innerHTML+'";t.parent.insertAdjacentHTML("beforeend",a);var c=t.parent.querySelector('.filter-dropdown-remove[data-item-id="'+o+'"]');h(c,m(),S)}}function S(t){t.preventDefault();var e=a(t);e.i=t.target.getAttribute("data-item-id"),X.emit("filterDropdown:select:remove",e)}function x(t){for(var e=t.parent.querySelectorAll(".filter-dropdown-active"),n=0;n0&&e(i,"is-active"),o.scrollLeft+o.clientWidth+50?e(r,"hide"):n(r,"hide");for(var o=0;o'+i.innerHTML+'";t.parent.insertAdjacentHTML("beforeend",a);var c=t.parent.querySelector('.filter-dropdown-remove[data-item-id="'+o+'"]');h(c,m(),S)}}function S(t){t.preventDefault();var e=a(t);e.i=t.target.getAttribute("data-item-id"),ot.emit("filterDropdown:select:remove",e)}function x(t){for(var e=t.parent.querySelectorAll(".filter-dropdown-active"),n=0;n0&&e(i,"is-active"),o.scrollLeft+o.clientWidth+5