Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@nrk/core-toggle

Package Overview
Dependencies
Maintainers
122
Versions
37
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nrk/core-toggle - npm Package Compare versions

Comparing version 2.2.0 to 2.2.1

7

core-toggle.cjs.js
'use strict';
var name = "@nrk/core-toggle";
var version = "2.1.0";
var version = "2.2.0";

@@ -100,10 +100,11 @@ var IS_BROWSER = typeof window !== 'undefined';

var popup = String((options.hasOwnProperty('popup') ? options.popup : toggle.getAttribute(UUID)) || false);
var popupAttr = popup.replace(/^true|false$/, '') ? 'setAttribute' : 'removeAttribute';
var content = getContentElement(toggle);
if (options.value) { toggle.innerHTML = options.value; } // Set innerHTML before updating aria-label
toggle.setAttribute(UUID, popup); // aria-haspopup triggers forms mode in JAWS, therefore store in uuid
toggle.setAttribute('aria-label', ((toggle.textContent) + ", " + (popup.replace(/^true|false$/, ''))));
toggle.setAttribute('aria-controls', content.id = content.id || getUUID());
content.setAttribute((ARIA + "-labelledby"), toggle.id = toggle.id || getUUID());
toggle[popupAttr]('aria-label', ((toggle.textContent) + ", " + popup));
setOpen(toggle, open);
if (options.value) { toggle.innerHTML = options.value; }
return toggle

@@ -110,0 +111,0 @@ })

5

core-toggle.js

@@ -17,10 +17,11 @@ import { name, version } from './package.json'

const popup = String((options.hasOwnProperty('popup') ? options.popup : toggle.getAttribute(UUID)) || false)
const popupAttr = popup.replace(/^true|false$/, '') ? 'setAttribute' : 'removeAttribute'
const content = getContentElement(toggle)
if (options.value) toggle.innerHTML = options.value // Set innerHTML before updating aria-label
toggle.setAttribute(UUID, popup) // aria-haspopup triggers forms mode in JAWS, therefore store in uuid
toggle.setAttribute('aria-label', `${toggle.textContent}, ${popup.replace(/^true|false$/, '')}`)
toggle.setAttribute('aria-controls', content.id = content.id || getUUID())
content.setAttribute(`${ARIA}-labelledby`, toggle.id = toggle.id || getUUID())
toggle[popupAttr]('aria-label', `${toggle.textContent}, ${popup}`)
setOpen(toggle, open)
if (options.value) toggle.innerHTML = options.value
return toggle

@@ -27,0 +28,0 @@ })

4

core-toggle.jsx.js

@@ -1,3 +0,3 @@

/*! @nrk/core-toggle v2.1.0 - Copyright (c) 2017-2019 NRK */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):(e=e||self).CoreToggle=t(e.React,e.PropTypes)}(this,function(u,e){"use strict";u=u&&u.hasOwnProperty("default")?u.default:u,e=e&&e.hasOwnProperty("default")?e.default:e;var t="undefined"!=typeof window,o=t&&/(android)/i.test(navigator.userAgent),n=t&&/iPad|iPhone|iPod/.test(String(navigator.platform)),r=function(e){void 0===e&&(e=!1);try{window.addEventListener("test",null,{get passive(){e=!0}})}catch(e){}return e}();function i(e,t,o,n){(void 0===n&&(n=!1),"undefined"==typeof window||window[e=e+"-"+t])||(r||"object"!=typeof n||(n=Boolean(n.capture)),("resize"===t||"load"===t?window:document).addEventListener(window[e]=t,o,n))}var l="prevent_recursive_dispatch_maximum_callstack";function p(e,t,o){void 0===o&&(o={});var n,r=""+l+t;if(e[r])return!0;e[r]=!0,"function"==typeof window.CustomEvent?n=new window.CustomEvent(t,{bubbles:!0,cancelable:!0,detail:o}):(n=document.createEvent("CustomEvent")).initCustomEvent(t,!0,!0,o);var i=e.dispatchEvent(n);return e[r]=null,i}function a(e){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}function s(e,t){if(void 0===t&&(t=document),e){if(e.nodeType)return[e];if("string"==typeof e)return[].slice.call(t.querySelectorAll(e));if(e.length)return[].slice.call(e)}return[]}var c="data-@nrk/core-toggle-2.1.0".replace(/\W+/g,"-"),d=o?"data":"aria",g="aria-expanded",f=27;function v(e){return document.getElementById(e.getAttribute("aria-controls"))||e.nextElementSibling}function h(e,t){var o=v(e),n="true"===e.getAttribute(g),r="boolean"==typeof t?t:"toggle"===t?!n:n,i=n===r||p(e,"toggle",{relatedTarget:o,isOpen:n,willOpen:r})?r:"true"===e.getAttribute(g),u=!n&&i&&o.querySelector("[autofocus]");u&&setTimeout(function(){return u&&u.focus()}),e.setAttribute(g,i),o[i?"removeAttribute":"setAttribute"]("hidden","")}i(c,"keydown",function(e){if(e.keyCode===f)for(var t=e.target;t;t=t.parentElement){var o=t.id&&document.querySelector('[aria-controls="'+t.id+'"]')||t;if("false"!==o.getAttribute(c)&&"true"===o.getAttribute(g))return e.preventDefault(),o.focus(),h(o,!1)}},!0),i(c,"click",function(e){var r=e.target;if(e.defaultPrevented)return!1;for(var t=r,o=void 0;t;t=t.parentElement){var n=o&&t.id&&document.querySelector("["+c+'][aria-controls="'+t.id+'"]');if("BUTTON"!==t.nodeName&&"A"!==t.nodeName||t.hasAttribute(c)||(o=t),n){p(n,"toggle.select",{relatedTarget:v(n),currentTarget:o,value:o.textContent.trim()});break}}s("["+c+"]").forEach(function(e){var t="true"===e.getAttribute(g),o="false"!==e.getAttribute(c),n=v(e);e.contains(r)?h(e,!t):o&&t&&h(e,n.contains(r))})});var m=function(t){function i(e){t.call(this,e),this.onToggle=this.onToggle.bind(this),this.onToggleSelect=this.onToggleSelect.bind(this)}t&&(i.__proto__=t),(i.prototype=Object.create(t&&t.prototype)).constructor=i;var e={defaultProps:{configurable:!0}};return e.defaultProps.get=function(){return{open:null,popup:null,onToggle:null,onToggleSelect:null}},i.prototype.update=function(){var e,t,i;e=this.el.firstElementChild,t={popup:this.props.popup,open:this.props.open},i="object"==typeof t?t:{open:t},n&&(document.documentElement.style.cursor="pointer"),s(e).map(function(e){var t="true"===e.getAttribute(g),o="boolean"==typeof i.open?i.open:"toggle"===i.open?!t:t,n=String((i.hasOwnProperty("popup")?i.popup:e.getAttribute(c))||!1),r=v(e);return e.setAttribute(c,n),e.setAttribute("aria-label",e.textContent+", "+n.replace(/^true|false$/,"")),e.setAttribute("aria-controls",r.id=r.id||a()),r.setAttribute(d+"-labelledby",e.id=e.id||a()),h(e,o),i.value&&(e.innerHTML=i.value),e})},i.prototype.componentDidMount=function(){this.update(),this.el.addEventListener("toggle",this.onToggle),this.el.addEventListener("toggle.select",this.onToggleSelect)},i.prototype.componentDidUpdate=function(){this.update()},i.prototype.componentWillUnmount=function(){this.el.removeEventListener("toggle",this.onToggle),this.el.removeEventListener("toggle.select",this.onToggleSelect)},i.prototype.onToggle=function(e){this.props.onToggle&&this.props.onToggle(e)},i.prototype.onToggleSelect=function(e){this.props.onToggleSelect&&this.props.onToggleSelect(e)},i.prototype.render=function(){var o,n,e,r=this;return u.createElement("div",(o=this.props,n=i.defaultProps,void 0===(e={ref:function(e){return r.el=e}})&&(e={}),Object.keys(o).reduce(function(e,t){return n.hasOwnProperty(t)||(e[t]=o[t]),e},e)),u.Children.map(this.props.children,function(e,t){return 0===t?u.cloneElement(e,{"aria-expanded":String(Boolean(r.props.open))}):1===t?u.cloneElement(e,{hidden:!r.props.open}):e}))},Object.defineProperties(i,e),i}(u.Component);return m.propTypes={open:e.bool,popup:e.oneOfType([e.bool,e.string]),onToggle:e.func},m});
/*! @nrk/core-toggle v2.2.0 - Copyright (c) 2017-2019 NRK */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):(e=e||self).CoreToggle=t(e.React,e.PropTypes)}(this,function(u,e){"use strict";u=u&&u.hasOwnProperty("default")?u.default:u,e=e&&e.hasOwnProperty("default")?e.default:e;var t="undefined"!=typeof window,o=t&&/(android)/i.test(navigator.userAgent),n=t&&/iPad|iPhone|iPod/.test(String(navigator.platform)),r=function(e){void 0===e&&(e=!1);try{window.addEventListener("test",null,{get passive(){e=!0}})}catch(e){}return e}();function i(e,t,o,n){(void 0===n&&(n=!1),"undefined"==typeof window||window[e=e+"-"+t])||(r||"object"!=typeof n||(n=Boolean(n.capture)),("resize"===t||"load"===t?window:document).addEventListener(window[e]=t,o,n))}var l="prevent_recursive_dispatch_maximum_callstack";function p(e,t,o){void 0===o&&(o={});var n,r=""+l+t;if(e[r])return!0;e[r]=!0,"function"==typeof window.CustomEvent?n=new window.CustomEvent(t,{bubbles:!0,cancelable:!0,detail:o}):(n=document.createEvent("CustomEvent")).initCustomEvent(t,!0,!0,o);var i=e.dispatchEvent(n);return e[r]=null,i}function a(e){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}function s(e,t){if(void 0===t&&(t=document),e){if(e.nodeType)return[e];if("string"==typeof e)return[].slice.call(t.querySelectorAll(e));if(e.length)return[].slice.call(e)}return[]}var c="data-@nrk/core-toggle-2.2.0".replace(/\W+/g,"-"),d=o?"data":"aria",g="aria-expanded",f=27;function v(e){return document.getElementById(e.getAttribute("aria-controls"))||e.nextElementSibling}function h(e,t){var o=v(e),n="true"===e.getAttribute(g),r="boolean"==typeof t?t:"toggle"===t?!n:n,i=n===r||p(e,"toggle",{relatedTarget:o,isOpen:n,willOpen:r})?r:"true"===e.getAttribute(g),u=!n&&i&&o.querySelector("[autofocus]");u&&setTimeout(function(){return u&&u.focus()}),e.setAttribute(g,i),o[i?"removeAttribute":"setAttribute"]("hidden","")}i(c,"keydown",function(e){if(e.keyCode===f)for(var t=e.target;t;t=t.parentElement){var o=t.id&&document.querySelector('[aria-controls="'+t.id+'"]')||t;if("false"!==o.getAttribute(c)&&"true"===o.getAttribute(g))return e.preventDefault(),o.focus(),h(o,!1)}},!0),i(c,"click",function(e){var r=e.target;if(e.defaultPrevented)return!1;for(var t=r,o=void 0;t;t=t.parentElement){var n=o&&t.id&&document.querySelector("["+c+'][aria-controls="'+t.id+'"]');if("BUTTON"!==t.nodeName&&"A"!==t.nodeName||t.hasAttribute(c)||(o=t),n){p(n,"toggle.select",{relatedTarget:v(n),currentTarget:o,value:o.textContent.trim()});break}}s("["+c+"]").forEach(function(e){var t="true"===e.getAttribute(g),o="false"!==e.getAttribute(c),n=v(e);e.contains(r)?h(e,!t):o&&t&&h(e,n.contains(r))})});var m=function(t){function i(e){t.call(this,e),this.onToggle=this.onToggle.bind(this),this.onToggleSelect=this.onToggleSelect.bind(this)}t&&(i.__proto__=t),(i.prototype=Object.create(t&&t.prototype)).constructor=i;var e={defaultProps:{configurable:!0}};return e.defaultProps.get=function(){return{open:null,popup:null,onToggle:null,onToggleSelect:null}},i.prototype.update=function(){var e,t,u;e=this.el.firstElementChild,t={popup:this.props.popup,open:this.props.open},u="object"==typeof t?t:{open:t},n&&(document.documentElement.style.cursor="pointer"),s(e).map(function(e){var t="true"===e.getAttribute(g),o="boolean"==typeof u.open?u.open:"toggle"===u.open?!t:t,n=String((u.hasOwnProperty("popup")?u.popup:e.getAttribute(c))||!1),r=n.replace(/^true|false$/,"")?"setAttribute":"removeAttribute",i=v(e);return u.value&&(e.innerHTML=u.value),e.setAttribute(c,n),e.setAttribute("aria-controls",i.id=i.id||a()),i.setAttribute(d+"-labelledby",e.id=e.id||a()),e[r]("aria-label",e.textContent+", "+n),h(e,o),e})},i.prototype.componentDidMount=function(){this.update(),this.el.addEventListener("toggle",this.onToggle),this.el.addEventListener("toggle.select",this.onToggleSelect)},i.prototype.componentDidUpdate=function(){this.update()},i.prototype.componentWillUnmount=function(){this.el.removeEventListener("toggle",this.onToggle),this.el.removeEventListener("toggle.select",this.onToggleSelect)},i.prototype.onToggle=function(e){this.props.onToggle&&this.props.onToggle(e)},i.prototype.onToggleSelect=function(e){this.props.onToggleSelect&&this.props.onToggleSelect(e)},i.prototype.render=function(){var o,n,e,r=this;return u.createElement("div",(o=this.props,n=i.defaultProps,void 0===(e={ref:function(e){return r.el=e}})&&(e={}),Object.keys(o).reduce(function(e,t){return n.hasOwnProperty(t)||(e[t]=o[t]),e},e)),u.Children.map(this.props.children,function(e,t){return 0===t?u.cloneElement(e,{"aria-expanded":String(Boolean(r.props.open))}):1===t?u.cloneElement(e,{hidden:!r.props.open}):e}))},Object.defineProperties(i,e),i}(u.Component);return m.propTypes={open:e.bool,popup:e.oneOfType([e.bool,e.string]),onToggle:e.func},m});
//# sourceMappingURL=core-toggle.jsx.js.map

4

core-toggle.min.js

@@ -1,3 +0,3 @@

/*! @nrk/core-toggle v2.1.0 - Copyright (c) 2017-2019 NRK */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).coreToggle=t()}(this,function(){"use strict";var e="undefined"!=typeof window,t=e&&/(android)/i.test(navigator.userAgent),n=e&&/iPad|iPhone|iPod/.test(String(navigator.platform)),o=function(e){void 0===e&&(e=!1);try{window.addEventListener("test",null,{get passive(){e=!0}})}catch(e){}return e}();function r(e,t,n,r){(void 0===r&&(r=!1),"undefined"==typeof window||window[e=e+"-"+t])||(o||"object"!=typeof r||(r=Boolean(r.capture)),("resize"===t||"load"===t?window:document).addEventListener(window[e]=t,n,r))}var u="prevent_recursive_dispatch_maximum_callstack";function a(e,t,n){void 0===n&&(n={});var r,o=""+u+t;if(e[o])return!0;e[o]=!0,"function"==typeof window.CustomEvent?r=new window.CustomEvent(t,{bubbles:!0,cancelable:!0,detail:n}):(r=document.createEvent("CustomEvent")).initCustomEvent(t,!0,!0,n);var i=e.dispatchEvent(r);return e[o]=null,i}function d(e){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}function l(e,t){if(void 0===t&&(t=document),e){if(e.nodeType)return[e];if("string"==typeof e)return[].slice.call(t.querySelectorAll(e));if(e.length)return[].slice.call(e)}return[]}var c="data-@nrk/core-toggle-2.1.0".replace(/\W+/g,"-"),f=t?"data":"aria",s="aria-expanded",i=27;function p(e){return document.getElementById(e.getAttribute("aria-controls"))||e.nextElementSibling}function g(e,t){var n=p(e),r="true"===e.getAttribute(s),o="boolean"==typeof t?t:"toggle"===t?!r:r,i=r===o||a(e,"toggle",{relatedTarget:n,isOpen:r,willOpen:o})?o:"true"===e.getAttribute(s),u=!r&&i&&n.querySelector("[autofocus]");u&&setTimeout(function(){return u&&u.focus()}),e.setAttribute(s,i),n[i?"removeAttribute":"setAttribute"]("hidden","")}return r(c,"keydown",function(e){if(e.keyCode===i)for(var t=e.target;t;t=t.parentElement){var n=t.id&&document.querySelector('[aria-controls="'+t.id+'"]')||t;if("false"!==n.getAttribute(c)&&"true"===n.getAttribute(s))return e.preventDefault(),n.focus(),g(n,!1)}},!0),r(c,"click",function(e){var o=e.target;if(e.defaultPrevented)return!1;for(var t=o,n=void 0;t;t=t.parentElement){var r=n&&t.id&&document.querySelector("["+c+'][aria-controls="'+t.id+'"]');if("BUTTON"!==t.nodeName&&"A"!==t.nodeName||t.hasAttribute(c)||(n=t),r){a(r,"toggle.select",{relatedTarget:p(r),currentTarget:n,value:n.textContent.trim()});break}}l("["+c+"]").forEach(function(e){var t="true"===e.getAttribute(s),n="false"!==e.getAttribute(c),r=p(e);e.contains(o)?g(e,!t):n&&t&&g(e,r.contains(o))})}),function(e,t){var i="object"==typeof t?t:{open:t};return n&&(document.documentElement.style.cursor="pointer"),l(e).map(function(e){var t="true"===e.getAttribute(s),n="boolean"==typeof i.open?i.open:"toggle"===i.open?!t:t,r=String((i.hasOwnProperty("popup")?i.popup:e.getAttribute(c))||!1),o=p(e);return e.setAttribute(c,r),e.setAttribute("aria-label",e.textContent+", "+r.replace(/^true|false$/,"")),e.setAttribute("aria-controls",o.id=o.id||d()),o.setAttribute(f+"-labelledby",e.id=e.id||d()),g(e,n),i.value&&(e.innerHTML=i.value),e})}});
/*! @nrk/core-toggle v2.2.0 - Copyright (c) 2017-2019 NRK */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).coreToggle=t()}(this,function(){"use strict";var e="undefined"!=typeof window,t=e&&/(android)/i.test(navigator.userAgent),n=e&&/iPad|iPhone|iPod/.test(String(navigator.platform)),o=function(e){void 0===e&&(e=!1);try{window.addEventListener("test",null,{get passive(){e=!0}})}catch(e){}return e}();function r(e,t,n,r){(void 0===r&&(r=!1),"undefined"==typeof window||window[e=e+"-"+t])||(o||"object"!=typeof r||(r=Boolean(r.capture)),("resize"===t||"load"===t?window:document).addEventListener(window[e]=t,n,r))}var u="prevent_recursive_dispatch_maximum_callstack";function a(e,t,n){void 0===n&&(n={});var r,o=""+u+t;if(e[o])return!0;e[o]=!0,"function"==typeof window.CustomEvent?r=new window.CustomEvent(t,{bubbles:!0,cancelable:!0,detail:n}):(r=document.createEvent("CustomEvent")).initCustomEvent(t,!0,!0,n);var i=e.dispatchEvent(r);return e[o]=null,i}function d(e){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}function i(e,t){if(void 0===t&&(t=document),e){if(e.nodeType)return[e];if("string"==typeof e)return[].slice.call(t.querySelectorAll(e));if(e.length)return[].slice.call(e)}return[]}var l="data-@nrk/core-toggle-2.2.0".replace(/\W+/g,"-"),c=t?"data":"aria",f="aria-expanded",s=27;function p(e){return document.getElementById(e.getAttribute("aria-controls"))||e.nextElementSibling}function g(e,t){var n=p(e),r="true"===e.getAttribute(f),o="boolean"==typeof t?t:"toggle"===t?!r:r,i=r===o||a(e,"toggle",{relatedTarget:n,isOpen:r,willOpen:o})?o:"true"===e.getAttribute(f),u=!r&&i&&n.querySelector("[autofocus]");u&&setTimeout(function(){return u&&u.focus()}),e.setAttribute(f,i),n[i?"removeAttribute":"setAttribute"]("hidden","")}return r(l,"keydown",function(e){if(e.keyCode===s)for(var t=e.target;t;t=t.parentElement){var n=t.id&&document.querySelector('[aria-controls="'+t.id+'"]')||t;if("false"!==n.getAttribute(l)&&"true"===n.getAttribute(f))return e.preventDefault(),n.focus(),g(n,!1)}},!0),r(l,"click",function(e){var o=e.target;if(e.defaultPrevented)return!1;for(var t=o,n=void 0;t;t=t.parentElement){var r=n&&t.id&&document.querySelector("["+l+'][aria-controls="'+t.id+'"]');if("BUTTON"!==t.nodeName&&"A"!==t.nodeName||t.hasAttribute(l)||(n=t),r){a(r,"toggle.select",{relatedTarget:p(r),currentTarget:n,value:n.textContent.trim()});break}}i("["+l+"]").forEach(function(e){var t="true"===e.getAttribute(f),n="false"!==e.getAttribute(l),r=p(e);e.contains(o)?g(e,!t):n&&t&&g(e,r.contains(o))})}),function(e,t){var u="object"==typeof t?t:{open:t};return n&&(document.documentElement.style.cursor="pointer"),i(e).map(function(e){var t="true"===e.getAttribute(f),n="boolean"==typeof u.open?u.open:"toggle"===u.open?!t:t,r=String((u.hasOwnProperty("popup")?u.popup:e.getAttribute(l))||!1),o=r.replace(/^true|false$/,"")?"setAttribute":"removeAttribute",i=p(e);return u.value&&(e.innerHTML=u.value),e.setAttribute(l,r),e.setAttribute("aria-controls",i.id=i.id||d()),i.setAttribute(c+"-labelledby",e.id=e.id||d()),e[o]("aria-label",e.textContent+", "+r),g(e,n),e})}});
//# sourceMappingURL=core-toggle.min.js.map

7

jsx.js

@@ -9,3 +9,3 @@ 'use strict';

var name = "@nrk/core-toggle";
var version = "2.1.0";
var version = "2.2.0";

@@ -121,10 +121,11 @@ var IS_BROWSER = typeof window !== 'undefined';

var popup = String((options.hasOwnProperty('popup') ? options.popup : toggle.getAttribute(UUID)) || false);
var popupAttr = popup.replace(/^true|false$/, '') ? 'setAttribute' : 'removeAttribute';
var content = getContentElement(toggle);
if (options.value) { toggle.innerHTML = options.value; } // Set innerHTML before updating aria-label
toggle.setAttribute(UUID, popup); // aria-haspopup triggers forms mode in JAWS, therefore store in uuid
toggle.setAttribute('aria-label', ((toggle.textContent) + ", " + (popup.replace(/^true|false$/, ''))));
toggle.setAttribute('aria-controls', content.id = content.id || getUUID());
content.setAttribute((ARIA + "-labelledby"), toggle.id = toggle.id || getUUID());
toggle[popupAttr]('aria-label', ((toggle.textContent) + ", " + popup));
setOpen(toggle, open);
if (options.value) { toggle.innerHTML = options.value; }
return toggle

@@ -131,0 +132,0 @@ })

4

package.json

@@ -5,3 +5,3 @@ {

"author": "NRK <opensource@nrk.no> (https://www.nrk.no/)",
"version": "2.2.0",
"version": "2.2.1",
"license": "MIT",

@@ -14,4 +14,4 @@ "main": "core-toggle.cjs.js",

"dependencies": {
"prop-types": "15.6.2"
"prop-types": "15.7.2"
}
}

187

readme.md

@@ -6,2 +6,6 @@ # Core Toggle

<!--demo
<script src="core-toggle/core-toggle.min.js"></script>
<script src="core-toggle/core-toggle.jsx.js"></script>
demo-->

@@ -15,41 +19,10 @@ ## Installation

import coreToggle from '@nrk/core-toggle' // Vanilla JS
import CoreToggle from '@nrk/core-toggle/jsx' // ...or React/Preact compatible JSX
import CoreToggle from '@nrk/core-toggle/jsx' // React/Preact JSX
```
## Demo
## Demo: Default
<!--demo
<script src="core-toggle/core-toggle.min.js"></script>
<script src="core-toggle/core-toggle.jsx.js"></script>
demo-->
Content is only toggled when clicking `button`. Great for accordions and expand/collapse panels.
```html
<!--demo-->
<button class="my-toggle">Toggle VanillaJS</button> <!-- must be <button> -->
<div hidden>Content</div> <!-- hidden prevents flash of unstyled content -->
<script>
coreToggle('.my-toggle') // Optionally pass {open: true|false} as second argument to open/close
</script>
```
```html
<!--demo-->
<div id="jsx-toggle-default"></div>
<script type="text/jsx">
ReactDOM.render(<CoreToggle popup={false} open={false} onToggle={function(){}}>
<button>Toggle JSX</button>
<div>Content</div>
</CoreToggle>, document.getElementById('jsx-toggle-default'))
</script>
```
## Demo: Popup
Content is toggled when clicking `button`, and closed when clicking outside content. Great for dropdowns and tooltips.
```html
<!--demo-->
<button class="my-popup">Popup VanillaJS</button>

@@ -92,53 +65,2 @@ <ul class="my-dropdown" hidden>

## Demo: Select
Listen to the `toggle.select` event and update the button's value from the selected item
to create a component that behaves like a `<select>`:
```html
<!--demo-->
<button class="my-popup-value">Select number</button>
<ul class="my-dropdown" hidden>
<li><button>One</button></li>
<li><button>Two</button></li>
<li><button>Three</button></li>
</ul>
<script>
document.addEventListener('toggle.select', (event) => {
if (event.target.className !== 'my-popup-value') return
coreToggle(event.target, { value: event.detail.value, open: false })
})
coreToggle('.my-popup-value', { popup: 'Number picker'})
</script>
```
```html
<!--demo-->
<div id="jsx-toggle-select"></div>
<script type="text/jsx">
class MyToggleSelect extends React.Component {
constructor (props) {
super(props)
this.state = { value: 'Select number' }
this.onSelect = this.onSelect.bind(this)
}
onSelect (event) {
this.setState({ value: event.detail.value })
}
render () {
return <CoreToggle popup='Example picker' open={false} onToggleSelect={this.onSelect}>
<button>{this.state.value}</button>
<ul className='my-dropdown'>
<li><button>One</button></li>
<li><button>Two</button></li>
<li><button>Three</button></li>
</ul>
</CoreToggle>
}
}
ReactDOM.render(<MyToggleSelect/>, document.getElementById('jsx-toggle-select'))
</script>
```
## Usage

@@ -149,4 +71,4 @@

```html
<button class="my-toggle">Toggle VanillaJS</button>
<div hidden>Content</div>
<button class="my-toggle">Toggle VanillaJS</button> <!-- must be <button> -->
<div hidden>Content</div> <!-- use hidden to prevent flash of unstyled content -->
```

@@ -157,15 +79,9 @@

coreToggle(
selector, // Accepts a selector string, NodeList, Element or array of Elements
options // An object. See table below for possible properties
coreToggle(String|Element|Elements, { // Accepts a selector string, NodeList, Element or array of Elements
open: Boolean // Optional. Defaults to aria-expanded or false. Set to force open state.
popup: Boolean|String // Optional. Defaults to false. Enable or disable if clicking outside toggle should close it. Provide a string to control the aria-label text on the toggle.
value: String // Optional. Defaults to button.innerHTML. Sets innerHTML of the button and safely updates aria-label for screen readers.
})
```
Property | Default | Type | Description
:-- | :-- | :-- | :--
open | `aria-expanded` or `false` | `null` or `String` | Use `true` or `false` to force open state.
popup | `false` | `Boolean` or `String` | Enable or disable if clicking outside toggle should close it. Provide a string to control the `aria-label` text on the toggle.
### React / Preact

@@ -178,3 +94,3 @@

// Props like className, style, etc. will be applied as actual attributes
// <Toggle> will handle state itself unless you call event.preventDefault() in onToggle
// <CoreToggle> will handle state itself unless you call event.preventDefault() in onToggle

@@ -187,4 +103,2 @@ <CoreToggle open={false} popup={false} onToggle={(event) => {}}>

## Markup

@@ -209,2 +123,3 @@

## Events

@@ -256,4 +171,78 @@

## Demo: Expand
Content is only toggled when clicking the button. Great for accordions and expand/collapse panels.
```html
<!--demo-->
<button class="my-toggle">Toggle VanillaJS</button> <!-- must be <button> -->
<div hidden>Content</div> <!-- hidden prevents flash of unstyled content -->
<script>
coreToggle('.my-toggle') // Optionally pass {open: true|false} as second argument to open/close
</script>
```
```html
<!--demo-->
<div id="jsx-toggle-default"></div>
<script type="text/jsx">
ReactDOM.render(<CoreToggle popup={false} open={false} onToggle={function(){}}>
<button>Toggle JSX</button>
<div>Content</div>
</CoreToggle>, document.getElementById('jsx-toggle-default'))
</script>
```
## Demo: Select
Listen to the `toggle.select` event and update the button's value from the selected item
to create a component that behaves like a `<select>`:
```html
<!--demo-->
<button class="my-popup-value">Select number</button>
<ul class="my-dropdown" hidden>
<li><button>One</button></li>
<li><button>Two</button></li>
<li><button>Three</button></li>
</ul>
<script>
document.addEventListener('toggle.select', (event) => {
if (event.target.className !== 'my-popup-value') return
coreToggle(event.target, { value: event.detail.value, open: false })
})
coreToggle('.my-popup-value', { popup: 'Number picker'})
</script>
```
```html
<!--demo-->
<div id="jsx-toggle-select"></div>
<script type="text/jsx">
class MyToggleSelect extends React.Component {
constructor (props) {
super(props)
this.state = { value: 'Select number' }
this.onSelect = this.onSelect.bind(this)
}
onSelect (event) {
this.setState({ value: event.detail.value })
}
render () {
return <CoreToggle popup='Example picker' open={false} onToggleSelect={this.onSelect}>
<button>{this.state.value}</button>
<ul className='my-dropdown'>
<li><button>One</button></li>
<li><button>Two</button></li>
<li><button>Three</button></li>
</ul>
</CoreToggle>
}
}
ReactDOM.render(<MyToggleSelect/>, document.getElementById('jsx-toggle-select'))
</script>
```
## FAQ

@@ -260,0 +249,0 @@ 

jsx/index.js.map
core-toggle.jsx.js.map

Sorry, the diff of this file is not supported yet

core-toggle.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc