From 39790af40ba95c7d5b28b9f7a52dbb4e52f2221b Mon Sep 17 00:00:00 2001 From: Paul Pederson Date: Wed, 23 Jan 2019 12:23:18 -0800 Subject: [PATCH] Hidden dropdowns (#1051) * #1050 - fix dropdown lists with hidden elements * :package: v1.2.3 --- CHANGELOG.md | 6 ++++++ dist/css/calcite-web-dark.css | 2 +- dist/css/calcite-web-dark.min.css | 2 +- dist/css/calcite-web-e-commerce.css | 2 +- dist/css/calcite-web-e-commerce.min.css | 2 +- dist/css/calcite-web-marketing.css | 2 +- dist/css/calcite-web-marketing.min.css | 2 +- dist/css/calcite-web-no-fonts.css | 2 +- dist/css/calcite-web-no-fonts.min.css | 2 +- dist/css/calcite-web.css | 2 +- dist/css/calcite-web.min.css | 2 +- dist/js/calcite-web-marketing.js | 2 +- dist/js/calcite-web-marketing.min.js | 2 +- dist/js/calcite-web.js | 10 ++++++---- dist/js/calcite-web.min.js | 4 ++-- es6.js | 2 +- lib/js/patterns/dropdown.js | 6 ++++-- package.json | 2 +- 18 files changed, 32 insertions(+), 22 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 94eed6470..b10a96cd6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## [1.2.3] + +### Fixes +- fix dropdown arrow keys with hidden elements (#1050) + ## [1.2.2] ### Fixes @@ -1413,6 +1418,7 @@ Begin foundational sass for the framework. - CSS Reset - Grunt Workflows +[1.2.3]: https://github.com/esri/calcite-web/compare/v1.2.2...v1.2.3 [1.2.2]: https://github.com/esri/calcite-web/compare/v1.2.1...v1.2.2 [1.2.1]: https://github.com/esri/calcite-web/compare/v1.2.0...v1.2.1 [1.2.0]: https://github.com/esri/calcite-web/compare/v1.1.0...v1.2.0 diff --git a/dist/css/calcite-web-dark.css b/dist/css/calcite-web-dark.css index 28f74dde5..368911d0e 100644 --- a/dist/css/calcite-web-dark.css +++ b/dist/css/calcite-web-dark.css @@ -1,6 +1,6 @@ /*! * Calcite Web - Calcite Design Components in CSS, JS and HTML - * @version v1.2.1 + * @version v1.2.3 * @license Apache-2.0 * @copyright 2018 Esri * @link https://github.com/Esri/calcite-web diff --git a/dist/css/calcite-web-dark.min.css b/dist/css/calcite-web-dark.min.css index 2ac13dbe6..65b57bb99 100644 --- a/dist/css/calcite-web-dark.min.css +++ b/dist/css/calcite-web-dark.min.css @@ -1,6 +1,6 @@ /*! * Calcite Web - Calcite Design Components in CSS, JS and HTML - * @version v1.2.1 + * @version v1.2.3 * @license Apache-2.0 * @copyright 2018 Esri * @link https://github.com/Esri/calcite-web diff --git a/dist/css/calcite-web-e-commerce.css b/dist/css/calcite-web-e-commerce.css index aeba585b9..de632718d 100644 --- a/dist/css/calcite-web-e-commerce.css +++ b/dist/css/calcite-web-e-commerce.css @@ -1,6 +1,6 @@ /*! * Calcite Web - Calcite Design Components in CSS, JS and HTML - * @version v1.2.1 + * @version v1.2.3 * @license Apache-2.0 * @copyright 2018 Esri * @link https://github.com/Esri/calcite-web diff --git a/dist/css/calcite-web-e-commerce.min.css b/dist/css/calcite-web-e-commerce.min.css index 0a94acf24..0273c61df 100644 --- a/dist/css/calcite-web-e-commerce.min.css +++ b/dist/css/calcite-web-e-commerce.min.css @@ -1,6 +1,6 @@ /*! * Calcite Web - Calcite Design Components in CSS, JS and HTML - * @version v1.2.1 + * @version v1.2.3 * @license Apache-2.0 * @copyright 2018 Esri * @link https://github.com/Esri/calcite-web diff --git a/dist/css/calcite-web-marketing.css b/dist/css/calcite-web-marketing.css index ad38b2e7a..eb1cfc6df 100644 --- a/dist/css/calcite-web-marketing.css +++ b/dist/css/calcite-web-marketing.css @@ -1,6 +1,6 @@ /*! * Calcite Web - Calcite Design Components in CSS, JS and HTML - * @version v1.2.1 + * @version v1.2.3 * @license Apache-2.0 * @copyright 2018 Esri * @link https://github.com/Esri/calcite-web diff --git a/dist/css/calcite-web-marketing.min.css b/dist/css/calcite-web-marketing.min.css index 288108534..5878b0d3f 100644 --- a/dist/css/calcite-web-marketing.min.css +++ b/dist/css/calcite-web-marketing.min.css @@ -1,6 +1,6 @@ /*! * Calcite Web - Calcite Design Components in CSS, JS and HTML - * @version v1.2.1 + * @version v1.2.3 * @license Apache-2.0 * @copyright 2018 Esri * @link https://github.com/Esri/calcite-web diff --git a/dist/css/calcite-web-no-fonts.css b/dist/css/calcite-web-no-fonts.css index 79592ab3a..5925674a6 100644 --- a/dist/css/calcite-web-no-fonts.css +++ b/dist/css/calcite-web-no-fonts.css @@ -1,6 +1,6 @@ /*! * Calcite Web - Calcite Design Components in CSS, JS and HTML - * @version v1.2.1 + * @version v1.2.3 * @license Apache-2.0 * @copyright 2018 Esri * @link https://github.com/Esri/calcite-web diff --git a/dist/css/calcite-web-no-fonts.min.css b/dist/css/calcite-web-no-fonts.min.css index 8a91d921d..9aa81adef 100644 --- a/dist/css/calcite-web-no-fonts.min.css +++ b/dist/css/calcite-web-no-fonts.min.css @@ -1,6 +1,6 @@ /*! * Calcite Web - Calcite Design Components in CSS, JS and HTML - * @version v1.2.1 + * @version v1.2.3 * @license Apache-2.0 * @copyright 2018 Esri * @link https://github.com/Esri/calcite-web diff --git a/dist/css/calcite-web.css b/dist/css/calcite-web.css index 4ecf167e2..f97839d2c 100644 --- a/dist/css/calcite-web.css +++ b/dist/css/calcite-web.css @@ -1,6 +1,6 @@ /*! * Calcite Web - Calcite Design Components in CSS, JS and HTML - * @version v1.2.1 + * @version v1.2.3 * @license Apache-2.0 * @copyright 2018 Esri * @link https://github.com/Esri/calcite-web diff --git a/dist/css/calcite-web.min.css b/dist/css/calcite-web.min.css index 83ffd689d..bae12db51 100644 --- a/dist/css/calcite-web.min.css +++ b/dist/css/calcite-web.min.css @@ -1,6 +1,6 @@ /*! * Calcite Web - Calcite Design Components in CSS, JS and HTML - * @version v1.2.1 + * @version v1.2.3 * @license Apache-2.0 * @copyright 2018 Esri * @link https://github.com/Esri/calcite-web diff --git a/dist/js/calcite-web-marketing.js b/dist/js/calcite-web-marketing.js index d104f5db7..20b5264d6 100644 --- a/dist/js/calcite-web-marketing.js +++ b/dist/js/calcite-web-marketing.js @@ -1,6 +1,6 @@ /*! * Calcite Web - Calcite Design Components in CSS, JS and HTML - * @version v1.2.1 + * @version v1.2.3 * @license Apache-2.0 * @copyright 2018 Esri * @link https://github.com/Esri/calcite-web diff --git a/dist/js/calcite-web-marketing.min.js b/dist/js/calcite-web-marketing.min.js index de2d7a494..a11bc65aa 100644 --- a/dist/js/calcite-web-marketing.min.js +++ b/dist/js/calcite-web-marketing.min.js @@ -1,6 +1,6 @@ /*! * Calcite Web - Calcite Design Components in CSS, JS and HTML - * @version v1.2.1 + * @version v1.2.3 * @license Apache-2.0 * @copyright 2018 Esri * @link https://github.com/Esri/calcite-web diff --git a/dist/js/calcite-web.js b/dist/js/calcite-web.js index 447f1d089..22a4de125 100644 --- a/dist/js/calcite-web.js +++ b/dist/js/calcite-web.js @@ -1,6 +1,6 @@ /*! * Calcite Web - Calcite Design Components in CSS, JS and HTML - * @version v1.2.1 + * @version v1.2.3 * @license Apache-2.0 * @copyright 2018 Esri * @link https://github.com/Esri/calcite-web @@ -580,7 +580,8 @@ function dropownFocusOn (options) { function arrowDown () { var dropdown = dropdownIsOpen(); if (dropdown) { - var links = findElements('.dropdown-link', dropdown); + var links = findElements('.dropdown-link', dropdown) + .filter(function (link) { return link.offsetParent !== null; }); bus.emit('dropdown:focus', {links: links, forward: true}); } } @@ -588,7 +589,8 @@ function arrowDown () { function arrowUp () { var dropdown = dropdownIsOpen(); if (dropdown) { - var links = findElements('.dropdown-link', dropdown); + var links = findElements('.dropdown-link', dropdown) + .filter(function (link) { return link.offsetParent !== null; }); bus.emit('dropdown:focus', {links: links, forward: false}); } } @@ -1404,7 +1406,7 @@ function extend (plugin) { // │ Public API │ // └────────────┘ // define all public api methods -var version = '1.2.0'; +var version = '1.2.3'; var click$1 = click; var addEvent = add$1; var removeEvent = remove$1; diff --git a/dist/js/calcite-web.min.js b/dist/js/calcite-web.min.js index 12df72d19..dfb51d9cb 100644 --- a/dist/js/calcite-web.min.js +++ b/dist/js/calcite-web.min.js @@ -1,7 +1,7 @@ /*! * Calcite Web - Calcite Design Components in CSS, JS and HTML - * @version v1.2.1 + * @version v1.2.3 * @license Apache-2.0 * @copyright 2018 Esri * @link https://github.com/Esri/calcite-web - */(function(a,b){'object'==typeof exports&&'undefined'!=typeof module?module.exports=b():'function'==typeof define&&define.amd?define(b):a.calcite=b()})(this,function(){'use strict';function a(a,b){var c;for(c=b;c;c=c.parentNode){var d=c&&c.getAttribute&&c.getAttribute('class')||'',e=new RegExp('(\\s|^)'+a+'(\\s|$)').test(d);if(1===c.nodeType&&e)break}return c}function b(a){return Array.isArray(a)?a:Array.prototype.slice.call(a)}function c(a,c){var d=c||document,e=d.querySelectorAll(a);return b(e)}function d(a,b){var c=b.filter(function(b){var c=a.toLowerCase(),d=b.innerHTML.toLowerCase();return-1!==d.indexOf(c)});return c}function f(a,b){return new RegExp('(\\s|^)'+b+'(\\s|$)').test(a.getAttribute('class'))}function e(a,b){b.split(' ').forEach(function(b){if(!f(a,b)){var c=a.getAttribute('class')||'';a.setAttribute('class',c+' '+b)}})}function g(a,b){b.split(' ').forEach(function(b){var c=(a.getAttribute('class')||'').replace(new RegExp('(\\s|^)'+b+'(\\s|$)','g'),'$2');f(a,b)&&a.setAttribute('class',c)})}function h(a,b){f(a,b)?g(a,b):e(a,b)}function i(a){a=b(a),a.forEach(function(a){g(a,'is-active')})}function j(a,b){i(a),e(b,'is-active')}function k(a){a.forEach(function(a){a&&a.setAttribute('aria-hidden',!0)})}function l(a){a.forEach(function(a){a&&a.removeAttribute('aria-hidden')})}function m(a){if(a){var b=a.getAttribute('aria-expanded');b?a.removeAttribute('aria-expanded'):a.setAttribute('aria-expanded','true')}}function n(){return'click'}function o(a,b,c){if(a.addEventListener)return a.addEventListener(b,c,!1);return a.attachEvent?a.attachEvent('on'+b,c):void 0}function p(a,b,c){if(a.removeEventListener)return a.removeEventListener(b,c,!1);return a.detachEvent?a.detachEvent('on'+b,c):void 0}function q(a){return a.target||a.srcElement}function r(a){return a.preventDefault?a.preventDefault():void(a.returnValue&&(a.returnValue=!1))}function s(a){return a=a||window.event,a.stopPropagation?a.stopPropagation():void(a.cancelBubble&&(a.cancelBubble=!0))}function t(a,b,c){var d,e,f,g;return g=function(){d=!1,e&&(f.apply(c,e),e=!1)},f=function(){d?e=arguments:(a.apply(c,arguments),setTimeout(g,b),d=!0)},f}function u(){}function v(a){for(var b='',c=0;cj.clientHeight&&e(m,'overflow-scroll'),k([q,s]),o(b,n(),h),o(document,'focusin',d)}),Z.on('keyboard:escape',b),Z.on('drawer:close',b),Z.on('drawer:bind',function(a){a?o(a.node,n(),i):t.forEach(function(a){o(a,n(),i)})}),Z.emit('drawer:bind')}function R(){function j(b){var c=a('js-filter-dropdown',b.target);return{parent:c,id:c.getAttribute('data-filter-dropdown'),item:b.target}}function k(a){s(a);var b=j(a);Z.emit('filterDropdown:input:focus',b)}function l(a){r(a),s(a);var b=j(a);Z.emit('filterDropdown:select',b)}function m(a){a.preventDefault();var b=j(a);h(a.target,'is-active'),Z.emit('filterDropdown:toggle',b)}function p(){var a=document.querySelectorAll('.filter-dropdown-list');i(a);var b=c('.js-filter-dropdown-open'),d=c('.js-filter-dropdown-close');b.forEach(function(a){return e(a,'is-active')}),d.forEach(function(a){return g(a,'is-active')})}function q(a){a.preventDefault();var b=j(a);b.i=a.target.getAttribute('data-item-id'),Z.emit('filterDropdown:select:remove',b)}Z.on('filterDropdown:bind',function(){var a=c('.js-filter-dropdown');a.forEach(function(a){var c=a.getAttribute('data-filter-dropdown'),f=a.querySelector('.filter-dropdown-input');o(f,'focus',k);for(var h,j=a.querySelectorAll('.js-filter-dropdown-open'),p=0;p\n '+d.innerHTML+'\n \n \n \n ';a.parent.insertAdjacentHTML('beforeend',f);var h=a.parent.querySelector('.filter-dropdown-remove[data-item-id="'+c+'"]');o(h,n(),q)}}),Z.on('filterDropdown:active:clear',function(a){for(var b=a.parent.querySelectorAll('.filter-dropdown-active'),c=0;cm.clientHeight&&e(q,'overflow-scroll'),k(a());var g=c('button, [href], input, select, textarea, [tabindex]',d).filter(function(a){return!a.disabled&&-1!==a.tabIndex&&0j.clientHeight&&e(m,'overflow-scroll'),k([q,s]),o(b,n(),h),o(document,'focusin',d)}),Z.on('keyboard:escape',b),Z.on('drawer:close',b),Z.on('drawer:bind',function(a){a?o(a.node,n(),i):t.forEach(function(a){o(a,n(),i)})}),Z.emit('drawer:bind')}function R(){function j(b){var c=a('js-filter-dropdown',b.target);return{parent:c,id:c.getAttribute('data-filter-dropdown'),item:b.target}}function k(a){s(a);var b=j(a);Z.emit('filterDropdown:input:focus',b)}function l(a){r(a),s(a);var b=j(a);Z.emit('filterDropdown:select',b)}function m(a){a.preventDefault();var b=j(a);h(a.target,'is-active'),Z.emit('filterDropdown:toggle',b)}function p(){var a=document.querySelectorAll('.filter-dropdown-list');i(a);var b=c('.js-filter-dropdown-open'),d=c('.js-filter-dropdown-close');b.forEach(function(a){return e(a,'is-active')}),d.forEach(function(a){return g(a,'is-active')})}function q(a){a.preventDefault();var b=j(a);b.i=a.target.getAttribute('data-item-id'),Z.emit('filterDropdown:select:remove',b)}Z.on('filterDropdown:bind',function(){var a=c('.js-filter-dropdown');a.forEach(function(a){var c=a.getAttribute('data-filter-dropdown'),f=a.querySelector('.filter-dropdown-input');o(f,'focus',k);for(var h,j=a.querySelectorAll('.js-filter-dropdown-open'),p=0;p\n '+d.innerHTML+'\n \n \n \n ';a.parent.insertAdjacentHTML('beforeend',f);var h=a.parent.querySelector('.filter-dropdown-remove[data-item-id="'+c+'"]');o(h,n(),q)}}),Z.on('filterDropdown:active:clear',function(a){for(var b=a.parent.querySelectorAll('.filter-dropdown-active'),c=0;cm.clientHeight&&e(q,'overflow-scroll'),k(a());var g=c('button, [href], input, select, textarea, [tabindex]',d).filter(function(a){return!a.disabled&&-1!==a.tabIndex&&0 link.offsetParent !== null); bus.emit('dropdown:focus', {links: links, forward: true}); } } @@ -113,7 +114,8 @@ function arrowDown () { function arrowUp () { var dropdown = dropdownIsOpen(); if (dropdown) { - var links = dom.findElements('.dropdown-link', dropdown); + var links = dom.findElements('.dropdown-link', dropdown) + .filter(link => link.offsetParent !== null); bus.emit('dropdown:focus', {links: links, forward: false}); } } diff --git a/package.json b/package.json index 690ad6847..a6e27eff3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "calcite-web", - "version": "1.2.2", + "version": "1.2.3", "description": "SASS & CSS Framework for Esri websites", "private": true, "homepage": "https://github.com/esri/calcite-web",