@borngroup/born-utilities - npm Package Compare versions

Comparing version 2.4.6 to 2.5.0

dist/born-utilities.amd.js

@@ -13,9 +13,10 @@ define(['exports'], function (exports) {
     exports.hasURLParameter = hasURLParameter;
+    exports.getTotalRect = getTotalRect;
+    exports.scrollToPosition = scrollToPosition;
+    exports.objectAssign = objectAssign;
     exports.createCookie = createCookie;
     exports.readCookie = readCookie;
     exports.eraseCookie = eraseCookie;
-    exports.getTotalRect = getTotalRect;
-    exports.scrollToPosition = scrollToPosition;
-    exports.objectAssign = objectAssign;
     exports.forceFocus = forceFocus;
+    exports.focusTrap = focusTrap;
 
@@ -197,2 +198,53 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
     /**
+     * Adds the specified getBoundingClientRect()[`property`] from each node found in `elements`.
+     * @return {Integer}          [description]
+     */
+    function getTotalRect(elements, property) {
+        var totalOffsetHeight = 0;
+
+        callbackOnElements(elements, function (currentEl) {
+            totalOffsetHeight += currentEl.getBoundingClientRect()[property || 'height'];
+        });
+
+        return totalOffsetHeight;
+    }
+
+    /**
+     * Returns the target relative to the current window scroll position.
+     * @param  {HTMLElement | HTML Selector | Number} target [Target element(s) or position value to scroll to]
+     * @param  {HTMLElement | NodeList | HTML Selector | Number} offset [Offset element to calculate the height from, or offset value to substract]
+     */
+    function scrollToPosition(target) {
+        var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+
+        var documentHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight),
+            documentScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
+            windowHeight = document.documentElement.clientHeight,
+            totalOffset = typeof offset === 'number' ? offset : getTotalRect(offset),
+            targetOffset = typeof target === 'number' ? target : getTotalRect(target, 'top') + documentScrollTop,
+            targetOffsetToScroll = Math.round(documentHeight - targetOffset < windowHeight ? documentHeight - windowHeight : targetOffset);
+
+        //Remove manual offset from target position.
+        targetOffsetToScroll -= totalOffset;
+
+        return targetOffsetToScroll;
+    }
+
+    //Polyfill for the Object.assign method, which is not supported in IE11.
+    // inspired by https://github.com/Raynos/xtend/blob/master/mutable.js
+    function objectAssign(target) {
+        for (var i = 1; i < arguments.length; i++) {
+            var source = arguments[i];
+
+            for (var key in source) {
+                if (source.hasOwnProperty(key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+
+        return target;
+    }
+
+    /**
      * [createCookie creates a cookie]
@@ -252,71 +304,68 @@ * @param  {[string]} name  [cookie name]
 
+    var focusInterval = void 0;
+
     /**
-     * Adds the specified getBoundingClientRect()[`property`] from each node found in `elements`.
-     * @return {Integer}          [description]
+     * Attemps to add focus to a `focusTarget` until it is able to.
      */
-    function getTotalRect(elements, property) {
-        var totalOffsetHeight = 0;
+    function forceFocus(focusTarget) {
+        focusTarget.focus();
 
-        callbackOnElements(elements, function (currentEl) {
-            totalOffsetHeight += currentEl.getBoundingClientRect()[property || 'height'];
-        });
+        window.clearInterval(focusInterval);
 
-        return totalOffsetHeight;
+        focusInterval = window.setInterval(function () {
+            if (focusTarget.matches(':focus')) {
+                window.clearInterval(focusInterval);
+            } else {
+                focusTarget.focus();
+            }
+        }, 25);
     }
 
     /**
-     * Returns the target relative to the current window scroll position.
-     * @param  {HTMLElement | HTML Selector | Number} target [Target element(s) or position value to scroll to]
-     * @param  {HTMLElement | NodeList | HTML Selector | Number} offset [Offset element to calculate the height from, or offset value to substract]
+     * Traps keyboard focus in a designated `containerEl`.
      */
-    function scrollToPosition(target) {
-        var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    function focusTrap(containerEl) {
+        var focusableEls = {};
 
-        var documentHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight),
-            documentScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
-            windowHeight = document.documentElement.clientHeight,
-            totalOffset = typeof offset === 'number' ? offset : getTotalRect(offset),
-            targetOffset = typeof target === 'number' ? target : getTotalRect(target, 'top') + documentScrollTop,
-            targetOffsetToScroll = Math.round(documentHeight - targetOffset < windowHeight ? documentHeight - windowHeight : targetOffset);
+        if (!containerEl.dataset.focustrapEnabled) {
+            containerEl.dataset.focustrapEnabled = true;
+            containerEl.addEventListener('focusin', _focusinHandler);
+            containerEl.addEventListener('keydown', _tabbingHandler);
+        }
 
-        //Remove manual offset from target position.
-        targetOffsetToScroll -= totalOffset;
+        /**
+         * Updates the "focusable" element values whenever a child of `containerEl` recives focus.
+         */
+        function _focusinHandler(evt) {
+            //Refresh the focusable elements list whenever something gains focus.
+            //This ensures the list is up to date in case the contents of the `containerEl` change.
+            focusableEls.list = this.querySelectorAll('button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])');
 
-        return targetOffsetToScroll;
-    }
+            focusableEls.first = focusableEls.list[0];
+            focusableEls.last = focusableEls.list[focusableEls.list.length - 1];
 
-    //Polyfill for the Object.assign method, which is not supported in IE11.
-    // inspired by https://github.com/Raynos/xtend/blob/master/mutable.js
-    function objectAssign(target) {
-        for (var i = 1; i < arguments.length; i++) {
-            var source = arguments[i];
+            focusableEls.loopTo = null;
 
-            for (var key in source) {
-                if (source.hasOwnProperty(key)) {
-                    target[key] = source[key];
-                }
+            //Set the `focusableEls.loopTo` value depending on the currently focused element.
+            //`focusableEls.loopTo` will be equal to the `focusableEls.first` whenever the `focusableEls.last` receives focus, and viceversa.
+            if (evt.target === focusableEls.last) {
+                focusableEls.loopTo = focusableEls.first;
+            } else if (evt.target === focusableEls.first) {
+                focusableEls.loopTo = focusableEls.last;
             }
         }
 
-        return target;
-    }
+        /**
+         * Listens to the keyboard Tab press and shifts focus to the first/last focusable element.
+         */
+        function _tabbingHandler(evt) {
+            var loopToFirstEl = focusableEls.loopTo === focusableEls.first && !evt.shiftKey,
+                loopToLastEl = focusableEls.loopTo === focusableEls.last && evt.shiftKey;
 
-    var focusInterval = void 0;
-
-    /**
-     * Attemps to add focus to a `focusTarget` until it is able to.
-     */
-    function forceFocus(focusTarget) {
-        focusTarget.focus();
-
-        window.clearInterval(focusInterval);
-
-        focusInterval = window.setInterval(function () {
-            if (focusTarget.matches(':focus')) {
-                window.clearInterval(focusInterval);
-            } else {
-                focusTarget.focus();
+            if (evt.keyCode === 9 && focusableEls.loopTo && (loopToFirstEl || loopToLastEl)) {
+                evt.preventDefault();
+                focusableEls.loopTo.focus();
             }
-        }, 25);
+        }
     }
 });

dist/born-utilities.amd.min.js

@@ -1,1 +0,1 @@
-define(["exports"],function(exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.isRTL=isRTL;exports.whichTransition=whichTransition;exports.createElWithAttrs=createElWithAttrs;exports.callbackOnElements=callbackOnElements;exports.getUrlParameter=getUrlParameter;exports.hasURLParameter=hasURLParameter;exports.createCookie=createCookie;exports.readCookie=readCookie;exports.eraseCookie=eraseCookie;exports.getTotalRect=getTotalRect;exports.scrollToPosition=scrollToPosition;exports.objectAssign=objectAssign;exports.forceFocus=forceFocus;var _typeof=typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"?function(obj){return typeof obj}:function(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj};(function(){if(!Element.prototype.matches){Element.prototype.matches=Element.prototype.msMatchesSelector}if(!Element.prototype.closest){Element.prototype.closest=_getClosest}})();function _getClosest(selector){var currentEl=this;while(currentEl.constructor!==HTMLHtmlElement){if(currentEl.parentNode.matches(selector)){return currentEl.parentNode}else if(currentEl.matches(selector)){return currentEl}currentEl=currentEl.parentNode}return false}var isMobile=exports.isMobile={Android:function Android(){return navigator.userAgent.match(/Android/i)},BlackBerry:function BlackBerry(){return navigator.userAgent.match(/BlackBerry/i)},iOS:function iOS(){return navigator.userAgent.match(/iPhone|iPad|iPod/i)},Opera:function Opera(){return navigator.userAgent.match(/Opera Mini/i)},Windows:function Windows(){return navigator.userAgent.match(/IEMobile/i)||navigator.userAgent.match(/WPDesktop/i)},any:function any(){return isMobile.Android()||isMobile.BlackBerry()||isMobile.iOS()||isMobile.Opera()||isMobile.Windows()}};function isRTL(){return document.documentElement.getAttribute("dir")==="rtl"?true:false}function whichTransition(){var dummyEl=document.createElement("dummy"),transitions={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(var key in transitions){if(dummyEl.style[key]!==undefined){return transitions[key]}}}function createElWithAttrs(appendTarget,attributes,type,textContent){var el=void 0;if((typeof type==="undefined"?"undefined":_typeof(type))==="object"){var fullNameSpace=type.nameSpace==="svg"?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml";el=document.createElementNS(fullNameSpace,type.tagName||"div")}else{el=document.createElement(type||"div")}for(var key in attributes){el.setAttribute(key,attributes[key])}if(textContent){el.textContent=textContent}if(appendTarget){appendTarget.appendChild(el)}return el}function callbackOnElements(elementSelector,callback){var elementList=void 0;if(elementSelector.length){if(typeof elementSelector==="string"){elementList=document.querySelectorAll(elementSelector)}else{elementList=elementSelector}[].forEach.call(elementList,callback.bind(this))}else{callback.call(this,elementSelector)}}function getUrlParameter(name){name=name.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");var regex=new RegExp("[\\?&]"+name+"=([^&#]*)"),results=regex.exec(location.search);return results===null?"":decodeURIComponent(results[1].replace(/\+/g," "))}function hasURLParameter(name){var regex=new RegExp("[?&]"+name);return"#"+name===window.location.hash||regex.test(window.location.search)}function createCookie(name,value,days,domain){var expires=void 0;domain=domain?";domain="+domain:"";if(days){var date=new Date;date.setTime(date.getTime()+days*24*60*60*1e3);expires="; expires="+date.toGMTString()}else{expires=""}document.cookie=name+"="+value+expires+domain+"; path=/"}function readCookie(name){var nameEQ=name+"=",cookieList=document.cookie.split(";");for(var i=0;i<cookieList.length;i++){var currentCookie=cookieList[i];while(currentCookie.charAt(0)==" "){currentCookie=currentCookie.substring(1,currentCookie.length)}if(currentCookie.indexOf(nameEQ)===0){return currentCookie.substring(nameEQ.length,currentCookie.length)}}return null}function eraseCookie(name){createCookie(name,"",-1)}function getTotalRect(elements,property){var totalOffsetHeight=0;callbackOnElements(elements,function(currentEl){totalOffsetHeight+=currentEl.getBoundingClientRect()[property||"height"]});return totalOffsetHeight}function scrollToPosition(target){var offset=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;var documentHeight=Math.max(document.body.scrollHeight,document.body.offsetHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight,document.documentElement.offsetHeight),documentScrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop,windowHeight=document.documentElement.clientHeight,totalOffset=typeof offset==="number"?offset:getTotalRect(offset),targetOffset=typeof target==="number"?target:getTotalRect(target,"top")+documentScrollTop,targetOffsetToScroll=Math.round(documentHeight-targetOffset<windowHeight?documentHeight-windowHeight:targetOffset);targetOffsetToScroll-=totalOffset;return targetOffsetToScroll}function objectAssign(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(source.hasOwnProperty(key)){target[key]=source[key]}}}return target}var focusInterval=void 0;function forceFocus(focusTarget){focusTarget.focus();window.clearInterval(focusInterval);focusInterval=window.setInterval(function(){if(focusTarget.matches(":focus")){window.clearInterval(focusInterval)}else{focusTarget.focus()}},25)}});
+define(["exports"],function(exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.isRTL=isRTL;exports.whichTransition=whichTransition;exports.createElWithAttrs=createElWithAttrs;exports.callbackOnElements=callbackOnElements;exports.getUrlParameter=getUrlParameter;exports.hasURLParameter=hasURLParameter;exports.getTotalRect=getTotalRect;exports.scrollToPosition=scrollToPosition;exports.objectAssign=objectAssign;exports.createCookie=createCookie;exports.readCookie=readCookie;exports.eraseCookie=eraseCookie;exports.forceFocus=forceFocus;exports.focusTrap=focusTrap;var _typeof=typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"?function(obj){return typeof obj}:function(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj};(function(){if(!Element.prototype.matches){Element.prototype.matches=Element.prototype.msMatchesSelector}if(!Element.prototype.closest){Element.prototype.closest=_getClosest}})();function _getClosest(selector){var currentEl=this;while(currentEl.constructor!==HTMLHtmlElement){if(currentEl.parentNode.matches(selector)){return currentEl.parentNode}else if(currentEl.matches(selector)){return currentEl}currentEl=currentEl.parentNode}return false}var isMobile=exports.isMobile={Android:function Android(){return navigator.userAgent.match(/Android/i)},BlackBerry:function BlackBerry(){return navigator.userAgent.match(/BlackBerry/i)},iOS:function iOS(){return navigator.userAgent.match(/iPhone|iPad|iPod/i)},Opera:function Opera(){return navigator.userAgent.match(/Opera Mini/i)},Windows:function Windows(){return navigator.userAgent.match(/IEMobile/i)||navigator.userAgent.match(/WPDesktop/i)},any:function any(){return isMobile.Android()||isMobile.BlackBerry()||isMobile.iOS()||isMobile.Opera()||isMobile.Windows()}};function isRTL(){return document.documentElement.getAttribute("dir")==="rtl"?true:false}function whichTransition(){var dummyEl=document.createElement("dummy"),transitions={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(var key in transitions){if(dummyEl.style[key]!==undefined){return transitions[key]}}}function createElWithAttrs(appendTarget,attributes,type,textContent){var el=void 0;if((typeof type==="undefined"?"undefined":_typeof(type))==="object"){var fullNameSpace=type.nameSpace==="svg"?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml";el=document.createElementNS(fullNameSpace,type.tagName||"div")}else{el=document.createElement(type||"div")}for(var key in attributes){el.setAttribute(key,attributes[key])}if(textContent){el.textContent=textContent}if(appendTarget){appendTarget.appendChild(el)}return el}function callbackOnElements(elementSelector,callback){var elementList=void 0;if(elementSelector.length){if(typeof elementSelector==="string"){elementList=document.querySelectorAll(elementSelector)}else{elementList=elementSelector}[].forEach.call(elementList,callback.bind(this))}else{callback.call(this,elementSelector)}}function getUrlParameter(name){name=name.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");var regex=new RegExp("[\\?&]"+name+"=([^&#]*)"),results=regex.exec(location.search);return results===null?"":decodeURIComponent(results[1].replace(/\+/g," "))}function hasURLParameter(name){var regex=new RegExp("[?&]"+name);return"#"+name===window.location.hash||regex.test(window.location.search)}function getTotalRect(elements,property){var totalOffsetHeight=0;callbackOnElements(elements,function(currentEl){totalOffsetHeight+=currentEl.getBoundingClientRect()[property||"height"]});return totalOffsetHeight}function scrollToPosition(target){var offset=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;var documentHeight=Math.max(document.body.scrollHeight,document.body.offsetHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight,document.documentElement.offsetHeight),documentScrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop,windowHeight=document.documentElement.clientHeight,totalOffset=typeof offset==="number"?offset:getTotalRect(offset),targetOffset=typeof target==="number"?target:getTotalRect(target,"top")+documentScrollTop,targetOffsetToScroll=Math.round(documentHeight-targetOffset<windowHeight?documentHeight-windowHeight:targetOffset);targetOffsetToScroll-=totalOffset;return targetOffsetToScroll}function objectAssign(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(source.hasOwnProperty(key)){target[key]=source[key]}}}return target}function createCookie(name,value,days,domain){var expires=void 0;domain=domain?";domain="+domain:"";if(days){var date=new Date;date.setTime(date.getTime()+days*24*60*60*1e3);expires="; expires="+date.toGMTString()}else{expires=""}document.cookie=name+"="+value+expires+domain+"; path=/"}function readCookie(name){var nameEQ=name+"=",cookieList=document.cookie.split(";");for(var i=0;i<cookieList.length;i++){var currentCookie=cookieList[i];while(currentCookie.charAt(0)==" "){currentCookie=currentCookie.substring(1,currentCookie.length)}if(currentCookie.indexOf(nameEQ)===0){return currentCookie.substring(nameEQ.length,currentCookie.length)}}return null}function eraseCookie(name){createCookie(name,"",-1)}var focusInterval=void 0;function forceFocus(focusTarget){focusTarget.focus();window.clearInterval(focusInterval);focusInterval=window.setInterval(function(){if(focusTarget.matches(":focus")){window.clearInterval(focusInterval)}else{focusTarget.focus()}},25)}function focusTrap(containerEl){var focusableEls={};if(!containerEl.dataset.focustrapEnabled){containerEl.dataset.focustrapEnabled=true;containerEl.addEventListener("focusin",_focusinHandler);containerEl.addEventListener("keydown",_tabbingHandler)}function _focusinHandler(evt){focusableEls.list=this.querySelectorAll('button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])');focusableEls.first=focusableEls.list[0];focusableEls.last=focusableEls.list[focusableEls.list.length-1];focusableEls.loopTo=null;if(evt.target===focusableEls.last){focusableEls.loopTo=focusableEls.first}else if(evt.target===focusableEls.first){focusableEls.loopTo=focusableEls.last}}function _tabbingHandler(evt){var loopToFirstEl=focusableEls.loopTo===focusableEls.first&&!evt.shiftKey,loopToLastEl=focusableEls.loopTo===focusableEls.last&&evt.shiftKey;if(evt.keyCode===9&&focusableEls.loopTo&&(loopToFirstEl||loopToLastEl)){evt.preventDefault();focusableEls.loopTo.focus()}}}});

dist/born-utilities.js

@@ -15,9 +15,10 @@ 'use strict';
 exports.hasURLParameter = hasURLParameter;
+exports.getTotalRect = getTotalRect;
+exports.scrollToPosition = scrollToPosition;
+exports.objectAssign = objectAssign;
 exports.createCookie = createCookie;
 exports.readCookie = readCookie;
 exports.eraseCookie = eraseCookie;
-exports.getTotalRect = getTotalRect;
-exports.scrollToPosition = scrollToPosition;
-exports.objectAssign = objectAssign;
 exports.forceFocus = forceFocus;
+exports.focusTrap = focusTrap;
 /**
@@ -192,2 +193,53 @@ * [Utilities]: methods and objects that contain reusable functionality and can be called on demand.
 /**
+ * Adds the specified getBoundingClientRect()[`property`] from each node found in `elements`.
+ * @return {Integer}          [description]
+ */
+function getTotalRect(elements, property) {
+    var totalOffsetHeight = 0;
+
+    callbackOnElements(elements, function (currentEl) {
+        totalOffsetHeight += currentEl.getBoundingClientRect()[property || 'height'];
+    });
+
+    return totalOffsetHeight;
+}
+
+/**
+ * Returns the target relative to the current window scroll position.
+ * @param  {HTMLElement | HTML Selector | Number} target [Target element(s) or position value to scroll to]
+ * @param  {HTMLElement | NodeList | HTML Selector | Number} offset [Offset element to calculate the height from, or offset value to substract]
+ */
+function scrollToPosition(target) {
+    var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+
+    var documentHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight),
+        documentScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
+        windowHeight = document.documentElement.clientHeight,
+        totalOffset = typeof offset === 'number' ? offset : getTotalRect(offset),
+        targetOffset = typeof target === 'number' ? target : getTotalRect(target, 'top') + documentScrollTop,
+        targetOffsetToScroll = Math.round(documentHeight - targetOffset < windowHeight ? documentHeight - windowHeight : targetOffset);
+
+    //Remove manual offset from target position.
+    targetOffsetToScroll -= totalOffset;
+
+    return targetOffsetToScroll;
+}
+
+//Polyfill for the Object.assign method, which is not supported in IE11.
+// inspired by https://github.com/Raynos/xtend/blob/master/mutable.js
+function objectAssign(target) {
+    for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+            if (source.hasOwnProperty(key)) {
+                target[key] = source[key];
+            }
+        }
+    }
+
+    return target;
+}
+
+/**
  * [createCookie creates a cookie]
@@ -247,70 +299,67 @@ * @param  {[string]} name  [cookie name]
 
+var focusInterval = void 0;
+
 /**
- * Adds the specified getBoundingClientRect()[`property`] from each node found in `elements`.
- * @return {Integer}          [description]
+ * Attemps to add focus to a `focusTarget` until it is able to.
  */
-function getTotalRect(elements, property) {
-    var totalOffsetHeight = 0;
+function forceFocus(focusTarget) {
+    focusTarget.focus();
 
-    callbackOnElements(elements, function (currentEl) {
-        totalOffsetHeight += currentEl.getBoundingClientRect()[property || 'height'];
-    });
+    window.clearInterval(focusInterval);
 
-    return totalOffsetHeight;
+    focusInterval = window.setInterval(function () {
+        if (focusTarget.matches(':focus')) {
+            window.clearInterval(focusInterval);
+        } else {
+            focusTarget.focus();
+        }
+    }, 25);
 }
 
 /**
- * Returns the target relative to the current window scroll position.
- * @param  {HTMLElement | HTML Selector | Number} target [Target element(s) or position value to scroll to]
- * @param  {HTMLElement | NodeList | HTML Selector | Number} offset [Offset element to calculate the height from, or offset value to substract]
+ * Traps keyboard focus in a designated `containerEl`.
  */
-function scrollToPosition(target) {
-    var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+function focusTrap(containerEl) {
+    var focusableEls = {};
 
-    var documentHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight),
-        documentScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
-        windowHeight = document.documentElement.clientHeight,
-        totalOffset = typeof offset === 'number' ? offset : getTotalRect(offset),
-        targetOffset = typeof target === 'number' ? target : getTotalRect(target, 'top') + documentScrollTop,
-        targetOffsetToScroll = Math.round(documentHeight - targetOffset < windowHeight ? documentHeight - windowHeight : targetOffset);
+    if (!containerEl.dataset.focustrapEnabled) {
+        containerEl.dataset.focustrapEnabled = true;
+        containerEl.addEventListener('focusin', _focusinHandler);
+        containerEl.addEventListener('keydown', _tabbingHandler);
+    }
 
-    //Remove manual offset from target position.
-    targetOffsetToScroll -= totalOffset;
+    /**
+     * Updates the "focusable" element values whenever a child of `containerEl` recives focus.
+     */
+    function _focusinHandler(evt) {
+        //Refresh the focusable elements list whenever something gains focus.
+        //This ensures the list is up to date in case the contents of the `containerEl` change.
+        focusableEls.list = this.querySelectorAll('button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])');
 
-    return targetOffsetToScroll;
-}
+        focusableEls.first = focusableEls.list[0];
+        focusableEls.last = focusableEls.list[focusableEls.list.length - 1];
 
-//Polyfill for the Object.assign method, which is not supported in IE11.
-// inspired by https://github.com/Raynos/xtend/blob/master/mutable.js
-function objectAssign(target) {
-    for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
+        focusableEls.loopTo = null;
 
-        for (var key in source) {
-            if (source.hasOwnProperty(key)) {
-                target[key] = source[key];
-            }
+        //Set the `focusableEls.loopTo` value depending on the currently focused element.
+        //`focusableEls.loopTo` will be equal to the `focusableEls.first` whenever the `focusableEls.last` receives focus, and viceversa.
+        if (evt.target === focusableEls.last) {
+            focusableEls.loopTo = focusableEls.first;
+        } else if (evt.target === focusableEls.first) {
+            focusableEls.loopTo = focusableEls.last;
         }
     }
 
-    return target;
-}
+    /**
+     * Listens to the keyboard Tab press and shifts focus to the first/last focusable element.
+     */
+    function _tabbingHandler(evt) {
+        var loopToFirstEl = focusableEls.loopTo === focusableEls.first && !evt.shiftKey,
+            loopToLastEl = focusableEls.loopTo === focusableEls.last && evt.shiftKey;
 
-var focusInterval = void 0;
-
-/**
- * Attemps to add focus to a `focusTarget` until it is able to.
- */
-function forceFocus(focusTarget) {
-    focusTarget.focus();
-
-    window.clearInterval(focusInterval);
-
-    focusInterval = window.setInterval(function () {
-        if (focusTarget.matches(':focus')) {
-            window.clearInterval(focusInterval);
-        } else {
-            focusTarget.focus();
+        if (evt.keyCode === 9 && focusableEls.loopTo && (loopToFirstEl || loopToLastEl)) {
+            evt.preventDefault();
+            focusableEls.loopTo.focus();
         }
-    }, 25);
+    }
 }

dist/born-utilities.min.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _typeof=typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"?function(obj){return typeof obj}:function(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj};exports.isRTL=isRTL;exports.whichTransition=whichTransition;exports.createElWithAttrs=createElWithAttrs;exports.callbackOnElements=callbackOnElements;exports.getUrlParameter=getUrlParameter;exports.hasURLParameter=hasURLParameter;exports.createCookie=createCookie;exports.readCookie=readCookie;exports.eraseCookie=eraseCookie;exports.getTotalRect=getTotalRect;exports.scrollToPosition=scrollToPosition;exports.objectAssign=objectAssign;exports.forceFocus=forceFocus;(function(){if(!Element.prototype.matches){Element.prototype.matches=Element.prototype.msMatchesSelector}if(!Element.prototype.closest){Element.prototype.closest=_getClosest}})();function _getClosest(selector){var currentEl=this;while(currentEl.constructor!==HTMLHtmlElement){if(currentEl.parentNode.matches(selector)){return currentEl.parentNode}else if(currentEl.matches(selector)){return currentEl}currentEl=currentEl.parentNode}return false}var isMobile=exports.isMobile={Android:function Android(){return navigator.userAgent.match(/Android/i)},BlackBerry:function BlackBerry(){return navigator.userAgent.match(/BlackBerry/i)},iOS:function iOS(){return navigator.userAgent.match(/iPhone|iPad|iPod/i)},Opera:function Opera(){return navigator.userAgent.match(/Opera Mini/i)},Windows:function Windows(){return navigator.userAgent.match(/IEMobile/i)||navigator.userAgent.match(/WPDesktop/i)},any:function any(){return isMobile.Android()||isMobile.BlackBerry()||isMobile.iOS()||isMobile.Opera()||isMobile.Windows()}};function isRTL(){return document.documentElement.getAttribute("dir")==="rtl"?true:false}function whichTransition(){var dummyEl=document.createElement("dummy"),transitions={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(var key in transitions){if(dummyEl.style[key]!==undefined){return transitions[key]}}}function createElWithAttrs(appendTarget,attributes,type,textContent){var el=void 0;if((typeof type==="undefined"?"undefined":_typeof(type))==="object"){var fullNameSpace=type.nameSpace==="svg"?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml";el=document.createElementNS(fullNameSpace,type.tagName||"div")}else{el=document.createElement(type||"div")}for(var key in attributes){el.setAttribute(key,attributes[key])}if(textContent){el.textContent=textContent}if(appendTarget){appendTarget.appendChild(el)}return el}function callbackOnElements(elementSelector,callback){var elementList=void 0;if(elementSelector.length){if(typeof elementSelector==="string"){elementList=document.querySelectorAll(elementSelector)}else{elementList=elementSelector}[].forEach.call(elementList,callback.bind(this))}else{callback.call(this,elementSelector)}}function getUrlParameter(name){name=name.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");var regex=new RegExp("[\\?&]"+name+"=([^&#]*)"),results=regex.exec(location.search);return results===null?"":decodeURIComponent(results[1].replace(/\+/g," "))}function hasURLParameter(name){var regex=new RegExp("[?&]"+name);return"#"+name===window.location.hash||regex.test(window.location.search)}function createCookie(name,value,days,domain){var expires=void 0;domain=domain?";domain="+domain:"";if(days){var date=new Date;date.setTime(date.getTime()+days*24*60*60*1e3);expires="; expires="+date.toGMTString()}else{expires=""}document.cookie=name+"="+value+expires+domain+"; path=/"}function readCookie(name){var nameEQ=name+"=",cookieList=document.cookie.split(";");for(var i=0;i<cookieList.length;i++){var currentCookie=cookieList[i];while(currentCookie.charAt(0)==" "){currentCookie=currentCookie.substring(1,currentCookie.length)}if(currentCookie.indexOf(nameEQ)===0){return currentCookie.substring(nameEQ.length,currentCookie.length)}}return null}function eraseCookie(name){createCookie(name,"",-1)}function getTotalRect(elements,property){var totalOffsetHeight=0;callbackOnElements(elements,function(currentEl){totalOffsetHeight+=currentEl.getBoundingClientRect()[property||"height"]});return totalOffsetHeight}function scrollToPosition(target){var offset=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;var documentHeight=Math.max(document.body.scrollHeight,document.body.offsetHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight,document.documentElement.offsetHeight),documentScrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop,windowHeight=document.documentElement.clientHeight,totalOffset=typeof offset==="number"?offset:getTotalRect(offset),targetOffset=typeof target==="number"?target:getTotalRect(target,"top")+documentScrollTop,targetOffsetToScroll=Math.round(documentHeight-targetOffset<windowHeight?documentHeight-windowHeight:targetOffset);targetOffsetToScroll-=totalOffset;return targetOffsetToScroll}function objectAssign(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(source.hasOwnProperty(key)){target[key]=source[key]}}}return target}var focusInterval=void 0;function forceFocus(focusTarget){focusTarget.focus();window.clearInterval(focusInterval);focusInterval=window.setInterval(function(){if(focusTarget.matches(":focus")){window.clearInterval(focusInterval)}else{focusTarget.focus()}},25)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _typeof=typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"?function(obj){return typeof obj}:function(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj};exports.isRTL=isRTL;exports.whichTransition=whichTransition;exports.createElWithAttrs=createElWithAttrs;exports.callbackOnElements=callbackOnElements;exports.getUrlParameter=getUrlParameter;exports.hasURLParameter=hasURLParameter;exports.getTotalRect=getTotalRect;exports.scrollToPosition=scrollToPosition;exports.objectAssign=objectAssign;exports.createCookie=createCookie;exports.readCookie=readCookie;exports.eraseCookie=eraseCookie;exports.forceFocus=forceFocus;exports.focusTrap=focusTrap;(function(){if(!Element.prototype.matches){Element.prototype.matches=Element.prototype.msMatchesSelector}if(!Element.prototype.closest){Element.prototype.closest=_getClosest}})();function _getClosest(selector){var currentEl=this;while(currentEl.constructor!==HTMLHtmlElement){if(currentEl.parentNode.matches(selector)){return currentEl.parentNode}else if(currentEl.matches(selector)){return currentEl}currentEl=currentEl.parentNode}return false}var isMobile=exports.isMobile={Android:function Android(){return navigator.userAgent.match(/Android/i)},BlackBerry:function BlackBerry(){return navigator.userAgent.match(/BlackBerry/i)},iOS:function iOS(){return navigator.userAgent.match(/iPhone|iPad|iPod/i)},Opera:function Opera(){return navigator.userAgent.match(/Opera Mini/i)},Windows:function Windows(){return navigator.userAgent.match(/IEMobile/i)||navigator.userAgent.match(/WPDesktop/i)},any:function any(){return isMobile.Android()||isMobile.BlackBerry()||isMobile.iOS()||isMobile.Opera()||isMobile.Windows()}};function isRTL(){return document.documentElement.getAttribute("dir")==="rtl"?true:false}function whichTransition(){var dummyEl=document.createElement("dummy"),transitions={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(var key in transitions){if(dummyEl.style[key]!==undefined){return transitions[key]}}}function createElWithAttrs(appendTarget,attributes,type,textContent){var el=void 0;if((typeof type==="undefined"?"undefined":_typeof(type))==="object"){var fullNameSpace=type.nameSpace==="svg"?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml";el=document.createElementNS(fullNameSpace,type.tagName||"div")}else{el=document.createElement(type||"div")}for(var key in attributes){el.setAttribute(key,attributes[key])}if(textContent){el.textContent=textContent}if(appendTarget){appendTarget.appendChild(el)}return el}function callbackOnElements(elementSelector,callback){var elementList=void 0;if(elementSelector.length){if(typeof elementSelector==="string"){elementList=document.querySelectorAll(elementSelector)}else{elementList=elementSelector}[].forEach.call(elementList,callback.bind(this))}else{callback.call(this,elementSelector)}}function getUrlParameter(name){name=name.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");var regex=new RegExp("[\\?&]"+name+"=([^&#]*)"),results=regex.exec(location.search);return results===null?"":decodeURIComponent(results[1].replace(/\+/g," "))}function hasURLParameter(name){var regex=new RegExp("[?&]"+name);return"#"+name===window.location.hash||regex.test(window.location.search)}function getTotalRect(elements,property){var totalOffsetHeight=0;callbackOnElements(elements,function(currentEl){totalOffsetHeight+=currentEl.getBoundingClientRect()[property||"height"]});return totalOffsetHeight}function scrollToPosition(target){var offset=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;var documentHeight=Math.max(document.body.scrollHeight,document.body.offsetHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight,document.documentElement.offsetHeight),documentScrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop,windowHeight=document.documentElement.clientHeight,totalOffset=typeof offset==="number"?offset:getTotalRect(offset),targetOffset=typeof target==="number"?target:getTotalRect(target,"top")+documentScrollTop,targetOffsetToScroll=Math.round(documentHeight-targetOffset<windowHeight?documentHeight-windowHeight:targetOffset);targetOffsetToScroll-=totalOffset;return targetOffsetToScroll}function objectAssign(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(source.hasOwnProperty(key)){target[key]=source[key]}}}return target}function createCookie(name,value,days,domain){var expires=void 0;domain=domain?";domain="+domain:"";if(days){var date=new Date;date.setTime(date.getTime()+days*24*60*60*1e3);expires="; expires="+date.toGMTString()}else{expires=""}document.cookie=name+"="+value+expires+domain+"; path=/"}function readCookie(name){var nameEQ=name+"=",cookieList=document.cookie.split(";");for(var i=0;i<cookieList.length;i++){var currentCookie=cookieList[i];while(currentCookie.charAt(0)==" "){currentCookie=currentCookie.substring(1,currentCookie.length)}if(currentCookie.indexOf(nameEQ)===0){return currentCookie.substring(nameEQ.length,currentCookie.length)}}return null}function eraseCookie(name){createCookie(name,"",-1)}var focusInterval=void 0;function forceFocus(focusTarget){focusTarget.focus();window.clearInterval(focusInterval);focusInterval=window.setInterval(function(){if(focusTarget.matches(":focus")){window.clearInterval(focusInterval)}else{focusTarget.focus()}},25)}function focusTrap(containerEl){var focusableEls={};if(!containerEl.dataset.focustrapEnabled){containerEl.dataset.focustrapEnabled=true;containerEl.addEventListener("focusin",_focusinHandler);containerEl.addEventListener("keydown",_tabbingHandler)}function _focusinHandler(evt){focusableEls.list=this.querySelectorAll('button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])');focusableEls.first=focusableEls.list[0];focusableEls.last=focusableEls.list[focusableEls.list.length-1];focusableEls.loopTo=null;if(evt.target===focusableEls.last){focusableEls.loopTo=focusableEls.first}else if(evt.target===focusableEls.first){focusableEls.loopTo=focusableEls.last}}function _tabbingHandler(evt){var loopToFirstEl=focusableEls.loopTo===focusableEls.first&&!evt.shiftKey,loopToLastEl=focusableEls.loopTo===focusableEls.last&&evt.shiftKey;if(evt.keyCode===9&&focusableEls.loopTo&&(loopToFirstEl||loopToLastEl)){evt.preventDefault();focusableEls.loopTo.focus()}}}

package.json

 {
   "name": "@borngroup/born-utilities",
-  "version": "2.4.6",
+  "version": "2.5.0",
   "description": "Set of useful utilities for BORN projects.",
@@ -5,0 +5,0 @@ "main": "dist/born-utilities.min.js",

src/born-utilities.js

@@ -176,2 +176,51 @@ /**
 /**
+ * Adds the specified getBoundingClientRect()[`property`] from each node found in `elements`.
+ * @return {Integer}          [description]
+ */
+export function getTotalRect (elements, property) {
+    let totalOffsetHeight = 0;
+
+    callbackOnElements(elements, function(currentEl) {
+        totalOffsetHeight += currentEl.getBoundingClientRect()[property || 'height'];
+    });
+
+    return totalOffsetHeight;
+}
+
+/**
+ * Returns the target relative to the current window scroll position.
+ * @param  {HTMLElement | HTML Selector | Number} target [Target element(s) or position value to scroll to]
+ * @param  {HTMLElement | NodeList | HTML Selector | Number} offset [Offset element to calculate the height from, or offset value to substract]
+ */
+export function scrollToPosition (target, offset = 0) {
+    let documentHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight),
+        documentScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
+        windowHeight = document.documentElement.clientHeight,
+        totalOffset = typeof offset === 'number' ? offset : getTotalRect(offset),
+        targetOffset = typeof target === 'number' ? target : getTotalRect(target, 'top') + documentScrollTop,
+        targetOffsetToScroll = Math.round(documentHeight - targetOffset < windowHeight ? documentHeight - windowHeight : targetOffset);
+
+    //Remove manual offset from target position.
+    targetOffsetToScroll -= totalOffset;
+
+    return targetOffsetToScroll;
+}
+
+//Polyfill for the Object.assign method, which is not supported in IE11.
+// inspired by https://github.com/Raynos/xtend/blob/master/mutable.js
+export function objectAssign(target) {
+    for (let i = 1; i < arguments.length; i++) {
+        let source = arguments[i];
+
+        for (let key in source) {
+            if (source.hasOwnProperty(key)) {
+                target[key] = source[key];
+            }
+        }
+    }
+
+    return target;
+}
+
+/**
  * [createCookie creates a cookie]
@@ -231,51 +280,2 @@ * @param  {[string]} name  [cookie name]
 
-/**
- * Adds the specified getBoundingClientRect()[`property`] from each node found in `elements`.
- * @return {Integer}          [description]
- */
-export function getTotalRect (elements, property) {
-    let totalOffsetHeight = 0;
-
-    callbackOnElements(elements, function(currentEl) {
-        totalOffsetHeight += currentEl.getBoundingClientRect()[property || 'height'];
-    });
-
-    return totalOffsetHeight;
-}
-
-/**
- * Returns the target relative to the current window scroll position.
- * @param  {HTMLElement | HTML Selector | Number} target [Target element(s) or position value to scroll to]
- * @param  {HTMLElement | NodeList | HTML Selector | Number} offset [Offset element to calculate the height from, or offset value to substract]
- */
-export function scrollToPosition (target, offset = 0) {
-    let documentHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight),
-        documentScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
-        windowHeight = document.documentElement.clientHeight,
-        totalOffset = typeof offset === 'number' ? offset : getTotalRect(offset),
-        targetOffset = typeof target === 'number' ? target : getTotalRect(target, 'top') + documentScrollTop,
-        targetOffsetToScroll = Math.round(documentHeight - targetOffset < windowHeight ? documentHeight - windowHeight : targetOffset);
-
-    //Remove manual offset from target position.
-    targetOffsetToScroll -= totalOffset;
-
-    return targetOffsetToScroll;
-}
-
-//Polyfill for the Object.assign method, which is not supported in IE11.
-// inspired by https://github.com/Raynos/xtend/blob/master/mutable.js
-export function objectAssign(target) {
-    for (let i = 1; i < arguments.length; i++) {
-        let source = arguments[i];
-
-        for (let key in source) {
-            if (source.hasOwnProperty(key)) {
-                target[key] = source[key];
-            }
-        }
-    }
-
-    return target;
-}
-
 let focusInterval;
@@ -299,1 +299,49 @@
 }
+
+/**
+ * Traps keyboard focus in a designated `containerEl`.
+ */
+export function focusTrap(containerEl) {
+    let focusableEls = {};
+
+    if (!containerEl.dataset.focustrapEnabled) {
+        containerEl.dataset.focustrapEnabled = true;
+        containerEl.addEventListener('focusin', _focusinHandler);
+        containerEl.addEventListener('keydown', _tabbingHandler);
+    }
+
+    /**
+     * Updates the "focusable" element values whenever a child of `containerEl` recives focus.
+     */
+    function _focusinHandler(evt) {
+        //Refresh the focusable elements list whenever something gains focus.
+        //This ensures the list is up to date in case the contents of the `containerEl` change.
+        focusableEls.list = this.querySelectorAll('button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])');
+
+        focusableEls.first = focusableEls.list[0];
+        focusableEls.last = focusableEls.list[focusableEls.list.length - 1];
+
+        focusableEls.loopTo = null;
+
+        //Set the `focusableEls.loopTo` value depending on the currently focused element.
+        //`focusableEls.loopTo` will be equal to the `focusableEls.first` whenever the `focusableEls.last` receives focus, and viceversa.
+        if (evt.target === focusableEls.last) {
+            focusableEls.loopTo = focusableEls.first;
+        } else if (evt.target === focusableEls.first) {
+            focusableEls.loopTo = focusableEls.last;
+        }
+    }
+
+    /**
+     * Listens to the keyboard Tab press and shifts focus to the first/last focusable element.
+     */
+    function _tabbingHandler(evt) {
+        let loopToFirstEl = focusableEls.loopTo === focusableEls.first && !evt.shiftKey,
+            loopToLastEl = focusableEls.loopTo === focusableEls.last && evt.shiftKey;
+
+        if (evt.keyCode === 9 && focusableEls.loopTo && (loopToFirstEl || loopToLastEl)) {
+            evt.preventDefault();
+            focusableEls.loopTo.focus();
+        }
+    }
+}

No alert changes

Improved metrics

Total package byte prevSize

53934

increased by28.86%

Number of package files

10

increased by25%

Lines of code

983

increased by29.34%

No dependency changes