@nrk/core-toggle - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

core-toggle.js

 import {name, version} from './package.json'
-import {IS_ANDROID, addEvent, dispatchEvent, queryAll} from '../utils'
+import {IS_ANDROID, addEvent, dispatchEvent, getUUID, queryAll} from '../utils'
 
@@ -21,4 +21,3 @@ const UUID = `data-${name}-${version}`.replace(/\W+/g, '-') // Strip invalid attribute characters
     next.setAttribute(`${ARIA}-labelledby`, button.id = button.id || getUUID())
-
-    toggleExpand(button, open)
+    setOpen(button, open)
     return button
@@ -34,24 +33,16 @@ })
 
-    if (el.contains(target)) toggleExpand(el, !open) // Click on toggle
-    else if (pops) toggleExpand(el, next.contains(target)) // Click in target or outside
+    if (el.contains(target)) setOpen(el, !open) // Click on toggle
+    else if (pops) setOpen(el, next.contains(target)) // Click in target or outside
   })
 })
 
-function toggleExpand (button, open) {
+function setOpen (button, open) {
+  const relatedTarget = button.nextElementSibling
   const isOpen = button.getAttribute(OPEN) === 'true'
   const willOpen = typeof open === 'boolean' ? open : (open === 'toggle' ? !isOpen : isOpen)
-  const relatedTarget = button.nextElementSibling
+  const isUpdate = isOpen === willOpen || dispatchEvent(button, 'toggle', {relatedTarget, isOpen, willOpen})
+  const nextOpen = isUpdate ? willOpen : button.getAttribute(OPEN) === 'true' // dispatchEvent can change attributes
 
-  if (isOpen === willOpen) setExpand(button, isOpen)
-  else if (dispatchEvent(button, 'toggle', {relatedTarget, isOpen, willOpen})) setExpand(button, willOpen)
-  return willOpen
+  button.setAttribute(OPEN, nextOpen)
+  button.nextElementSibling[nextOpen ? 'removeAttribute' : 'setAttribute']('hidden', '')
 }
-
-function getUUID () {
-  return Date.now().toString(36) + Math.random().toString(36).slice(2, 5)
-}
-
-function setExpand (button, open) {
-  button.setAttribute(OPEN, open)
-  button.nextElementSibling[open ? 'removeAttribute' :  'setAttribute']('hidden', '')
-}

core-toggle.jsx

 import React from 'react'
-import coreToggle from '../core-toggle/core-toggle'
+import coreToggle from './core-toggle'
 import {exclude} from '../utils'
@@ -4,0 +4,0 @@

core-toggle.md

@@ -13,3 +13,3 @@ ---
 ```toggle.html
-<button class="my-toggle nrk-button">Toggle VanillaJS</button>  <!-- must be <button> -->
+<button class="my-toggle">Toggle VanillaJS</button>  <!-- must be <button> -->
 <div hidden>Content</div>                                       <!-- hidden prevents flash of unstyled content -->
@@ -22,3 +22,3 @@ ```
 <Toggle popup={false} open={false} onToggle={function(){}}>
-  <button className='nrk-button'>Toggle JSX</button>
+  <button>Toggle JSX</button>
   <div>Content</div>
@@ -32,9 +32,9 @@ </Toggle>
 ```popup.html
-<button class="my-popup nrk-button">Popup VanillaJS</button>
+<button class="my-popup">Popup VanillaJS</button>
 <ul class="my-dropdown" hidden>
-  <li><a class="nrk-unset" href="#">Link</a></li>
+  <li><a href="#">Link</a></li>
   <li>
-    <button class="my-popup nrk-unset">Can also be nested</button>
+    <button class="my-popup">Can also be nested</button>
     <ul class="my-dropdown" hidden>
-      <li><a class="nrk-unset" href="#">Sub-link</a></li>
+      <li><a href="#">Sub-link</a></li>
     </ul>
@@ -49,10 +49,10 @@ </li>
 <Toggle popup>
-  <button className='nrk-button'>Popup JSX</button>
+  <button>Popup JSX</button>
   <ul className='my-dropdown'>
-    <li><a className='nrk-unset' href='#'>Link</a></li>
+    <li><a href='#'>Link</a></li>
     <li>
       <Toggle popup>
-        <button className='nrk-unset'>Can also be nested</button>
+        <button>Can also be nested</button>
         <ul className='my-dropdown'>
-          <li><a className='nrk-unset' href='#'>Sub-link</a></li>
+          <li><a href='#'>Sub-link</a></li>
         </ul>
@@ -100,2 +100,3 @@ </Toggle>
   event.detail.isOpen                       // The current toggle state (before toggle event has run)
+  event.detail.willOpen                     // The wanted toggle state
 })
@@ -102,0 +103,0 @@ ```

core-toggle.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.coreToggle=e()}(this,function(){"use strict";var t="undefined"!=typeof window,e=t&&/(android)/i.test(navigator.userAgent);t&&/iPad|iPhone|iPod/.test(String(navigator.platform));function n(t,e){if(void 0===e&&(e=document),t){if(t.nodeType)return[t];if("string"==typeof t)return[].slice.call(e.querySelectorAll(t));if(t.length)return[].slice.call(t)}return[]}var i,o,r,u,a="data-@nrk/core-toggle-1.0.2".replace(/\W+/g,"-"),d=e?"data":"aria",l="aria-expanded",c="aria-haspopup";function f(t,e){var n,i,o,r,u="true"===t.getAttribute(l),a="boolean"==typeof e?e:"toggle"===e?!u:u,d=t.nextElementSibling;return u===a?s(t,u):(n=t,i="toggle",void 0===(o={relatedTarget:d,isOpen:u,willOpen:a})&&(o={}),"function"==typeof window.CustomEvent?r=new window.CustomEvent(i,{bubbles:!0,cancelable:!0,detail:o}):(r=document.createEvent("CustomEvent")).initCustomEvent(i,!0,!0,o),n.dispatchEvent(r)&&s(t,a)),a}function p(){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}function s(t,e){t.setAttribute(l,e),t.nextElementSibling[e?"removeAttribute":"setAttribute"]("hidden","")}return o=function(t){var e=t.target;n("["+a+"]").forEach(function(t){var n="true"===t.getAttribute(l),i="true"===t.getAttribute(c),o=t.nextElementSibling;t.contains(e)?f(t,!n):i&&f(t,o.contains(e))})},r="blur"===(i="click")||"focus"===i,u=a+"-"+i,"undefined"==typeof window||window[u]||document.addEventListener(window[u]=i,o,r),function(t,e){var i="object"==typeof e?e:{open:e};return n(t).forEach(function(t){var e="boolean"==typeof i.open?i.open:"true"===t.getAttribute(l),n="boolean"==typeof i.popup?i.popup:"true"===t.getAttribute(c),o=t.nextElementSibling;return t.setAttribute(a,""),t.setAttribute(c,n),t.setAttribute("aria-controls",o.id=o.id||p()),o.setAttribute(d+"-labelledby",t.id=t.id||p()),f(t,e),t})}});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.coreToggle=e()}(this,function(){"use strict";var t="undefined"!=typeof window,e=t&&/(android)/i.test(navigator.userAgent);t&&/iPad|iPhone|iPod/.test(String(navigator.platform));var n="prevent_recursive_dispatch_maximum_callstack";function i(t){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}function r(t,e){if(void 0===e&&(e=document),t){if(t.nodeType)return[t];if("string"==typeof t)return[].slice.call(e.querySelectorAll(t));if(t.length)return[].slice.call(t)}return[]}var o,u,a,d,l="data-@nrk/core-toggle-1.1.0".replace(/\W+/g,"-"),c=e?"data":"aria",f="aria-expanded",p="aria-haspopup";function s(t,e){var i=t.nextElementSibling,r="true"===t.getAttribute(f),o="boolean"==typeof e?e:"toggle"===e?!r:r,u=r===o||function(t,e,i){void 0===i&&(i={});var r,o=""+n+e;return!!t[o]||(t[o]=!0,"function"==typeof window.CustomEvent?r=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:i}):(r=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,i),t.dispatchEvent(r),t[o]=null,!r.defaultPrevented)}(t,"toggle",{relatedTarget:i,isOpen:r,willOpen:o})?o:"true"===t.getAttribute(f);t.setAttribute(f,u),t.nextElementSibling[u?"removeAttribute":"setAttribute"]("hidden","")}return u=function(t){var e=t.target;r("["+l+"]").forEach(function(t){var n="true"===t.getAttribute(f),i="true"===t.getAttribute(p),r=t.nextElementSibling;t.contains(e)?s(t,!n):i&&s(t,r.contains(e))})},a="blur"===(o="click")||"focus"===o,d=l+"-"+o,"undefined"==typeof window||window[d]||document.addEventListener(window[d]=o,u,a),function(t,e){var n="object"==typeof e?e:{open:e};return r(t).forEach(function(t){var e="boolean"==typeof n.open?n.open:"true"===t.getAttribute(f),r="boolean"==typeof n.popup?n.popup:"true"===t.getAttribute(p),o=t.nextElementSibling;return t.setAttribute(l,""),t.setAttribute(p,r),t.setAttribute("aria-controls",o.id=o.id||i()),o.setAttribute(c+"-labelledby",t.id=t.id||i()),s(t,e),t})}});
 //# sourceMappingURL=core-toggle.min.js.map

jsx/index.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):t.CoreToggle=e(t.React)}(this,function(t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;var e="undefined"!=typeof window,n=e&&/(android)/i.test(navigator.userAgent);e&&/iPad|iPhone|iPod/.test(String(navigator.platform));function o(t,e){if(void 0===e&&(e=document),t){if(t.nodeType)return[t];if("string"==typeof t)return[].slice.call(e.querySelectorAll(t));if(t.length)return[].slice.call(t)}return[]}var r,i,u,p,l="data-@nrk/core-toggle-1.0.2".replace(/\W+/g,"-"),a=n?"data":"aria",c="aria-expanded",d="aria-haspopup";function s(t,e){var n="object"==typeof e?e:{open:e};return o(t).forEach(function(t){var e="boolean"==typeof n.open?n.open:"true"===t.getAttribute(c),o="boolean"==typeof n.popup?n.popup:"true"===t.getAttribute(d),r=t.nextElementSibling;return t.setAttribute(l,""),t.setAttribute(d,o),t.setAttribute("aria-controls",r.id=r.id||g()),r.setAttribute(a+"-labelledby",t.id=t.id||g()),f(t,e),t})}function f(t,e){var n,o,r,i,u="true"===t.getAttribute(c),p="boolean"==typeof e?e:"toggle"===e?!u:u,l=t.nextElementSibling;return u===p?b(t,u):(n=t,o="toggle",void 0===(r={relatedTarget:l,isOpen:u,willOpen:p})&&(r={}),"function"==typeof window.CustomEvent?i=new window.CustomEvent(o,{bubbles:!0,cancelable:!0,detail:r}):(i=document.createEvent("CustomEvent")).initCustomEvent(o,!0,!0,r),n.dispatchEvent(i)&&b(t,p)),p}function g(){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}function b(t,e){t.setAttribute(c,e),t.nextElementSibling[e?"removeAttribute":"setAttribute"]("hidden","")}i=function(t){var e=t.target;o("["+l+"]").forEach(function(t){var n="true"===t.getAttribute(c),o="true"===t.getAttribute(d),r=t.nextElementSibling;t.contains(e)?f(t,!n):o&&f(t,r.contains(e))})},u="blur"===(r="click")||"focus"===r,p=l+"-"+r,"undefined"==typeof window||window[p]||document.addEventListener(window[p]=r,i,u);var m={open:null,popup:null,onToggle:null};return function(e){function n(){e.apply(this,arguments)}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.componentDidMount=function(){s(this.el.firstElementChild),this.el.addEventListener("toggle",this.props.onToggle)},n.prototype.componentDidUpdate=function(){s(this.el.firstElementChild)},n.prototype.componentWillUnmount=function(){this.el.removeEventListener("toggle",this.props.onToggle)},n.prototype.render=function(){var e=this;return t.createElement("div",function(t,e,n){return void 0===n&&(n={}),Object.keys(t).reduce(function(n,o){return e.hasOwnProperty(o)||(n[o]=t[o]),n},n)}(this.props,m,{ref:function(t){return e.el=t}}),t.Children.map(this.props.children,function(n,o){return o?t.cloneElement(n,{hidden:!e.props.open}):t.cloneElement(n,{"aria-expanded":String(Boolean(e.props.open)),"aria-haspopup":String(Boolean(e.props.popup))})}))},n}(t.Component)});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):t.CoreToggle=e(t.React)}(this,function(t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;var e="undefined"!=typeof window,n=e&&/(android)/i.test(navigator.userAgent);e&&/iPad|iPhone|iPod/.test(String(navigator.platform));var o="prevent_recursive_dispatch_maximum_callstack";function r(t){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}function i(t,e){if(void 0===e&&(e=document),t){if(t.nodeType)return[t];if("string"==typeof t)return[].slice.call(e.querySelectorAll(t));if(t.length)return[].slice.call(t)}return[]}var u,p,a,l,c="data-@nrk/core-toggle-1.1.0".replace(/\W+/g,"-"),d=n?"data":"aria",s="aria-expanded",f="aria-haspopup";function g(t,e){var n="object"==typeof e?e:{open:e};return i(t).forEach(function(t){var e="boolean"==typeof n.open?n.open:"true"===t.getAttribute(s),o="boolean"==typeof n.popup?n.popup:"true"===t.getAttribute(f),i=t.nextElementSibling;return t.setAttribute(c,""),t.setAttribute(f,o),t.setAttribute("aria-controls",i.id=i.id||r()),i.setAttribute(d+"-labelledby",t.id=t.id||r()),m(t,e),t})}function m(t,e){var n=t.nextElementSibling,r="true"===t.getAttribute(s),i="boolean"==typeof e?e:"toggle"===e?!r:r,u=r===i||function(t,e,n){void 0===n&&(n={});var r,i=""+o+e;return!!t[i]||(t[i]=!0,"function"==typeof window.CustomEvent?r=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:n}):(r=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,n),t.dispatchEvent(r),t[i]=null,!r.defaultPrevented)}(t,"toggle",{relatedTarget:n,isOpen:r,willOpen:i})?i:"true"===t.getAttribute(s);t.setAttribute(s,u),t.nextElementSibling[u?"removeAttribute":"setAttribute"]("hidden","")}p=function(t){var e=t.target;i("["+c+"]").forEach(function(t){var n="true"===t.getAttribute(s),o="true"===t.getAttribute(f),r=t.nextElementSibling;t.contains(e)?m(t,!n):o&&m(t,r.contains(e))})},a="blur"===(u="click")||"focus"===u,l=c+"-"+u,"undefined"==typeof window||window[l]||document.addEventListener(window[l]=u,p,a);var b={open:null,popup:null,onToggle:null};return function(e){function n(){e.apply(this,arguments)}return e&&(n.__proto__=e),n.prototype=Object.create(e&&e.prototype),n.prototype.constructor=n,n.prototype.componentDidMount=function(){g(this.el.firstElementChild),this.el.addEventListener("toggle",this.props.onToggle)},n.prototype.componentDidUpdate=function(){g(this.el.firstElementChild)},n.prototype.componentWillUnmount=function(){this.el.removeEventListener("toggle",this.props.onToggle)},n.prototype.render=function(){var e=this;return t.createElement("div",function(t,e,n){return void 0===n&&(n={}),Object.keys(t).reduce(function(n,o){return e.hasOwnProperty(o)||(n[o]=t[o]),n},n)}(this.props,b,{ref:function(t){return e.el=t}}),t.Children.map(this.props.children,function(n,o){return o?t.cloneElement(n,{hidden:!e.props.open}):t.cloneElement(n,{"aria-expanded":String(Boolean(e.props.open)),"aria-haspopup":String(Boolean(e.props.popup))})}))},n}(t.Component)});
 //# sourceMappingURL=index.js.map

package.json

@@ -5,3 +5,3 @@ {
   "author": "NRK <[e-mail]> (https://www.nrk.no/)",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "license": "MIT",
@@ -8,0 +8,0 @@ "main": "core-toggle.min.js",

No alert changes

Improved metrics

Total package byte prevSize

34229

increased by3.94%

Worsened metrics

Lines of code

89

decreased by-6.32%

No dependency changes