@financial-times/o-toggle - npm Package Compare versions

Comparing version 1.2.1 to 2.0.0-beta.1

browser.js

@@ -12,3 +12,3 @@ "use strict";
 
-const constructAll = () => {
+var constructAll = () => {
   _toggle.default.init();
@@ -15,0 +15,0 @@

dist/js/target.js

@@ -19,3 +19,3 @@ "use strict";
   removeToggle(toggle) {
-    const togglePosition = this.toggles.indexOf(toggle);
+    var togglePosition = this.toggles.indexOf(toggle);
     this.toggles = this.toggles.slice(0, togglePosition).concat(this.toggles.slice(togglePosition + 1));
@@ -22,0 +22,0 @@

dist/js/toggle.js

@@ -34,3 +34,3 @@ "use strict";
           // Remove the prefix part of the data attribute name
-          const key = attr.name.replace('data-o-toggle-', '');
+          var key = attr.name.replace('data-o-toggle-', '');
 
@@ -46,10 +46,25 @@ try {
       });
-    }
+    } // Set the toggle callback if its a string.
 
-    this.callback = config.callback;
 
-    if (typeof this.callback === 'string') {
-      this.callback = new Function(this.callback); // eslint-disable-line no-new-func
-    }
+    if (config.callback && typeof config.callback === 'string') {
+      // Error if the callback is a string and a global function of that name does not exist.
+      if (typeof window[config.callback] !== 'function') {
+        throw new Error("Could not find o-toggle callback \"".concat(config.callback, "\"."));
+      }
 
+      this.callback = window[config.callback];
+    } // Set the toggle callback if its a funciton.
+
+
+    if (config.callback && typeof config.callback === 'function') {
+      this.callback = config.callback;
+    } // Error if some callback value has been given but has not been set.
+
+
+    if (config.callback && !this.callback) {
+      throw new Error("The o-toggle callback must be a string or function.");
+    } // Set the toggle element.
+
+
     this.toggleEl = toggleEl;
@@ -99,3 +114,3 @@
     if (this.callback) {
-      let stateName = this.target.isOpen() ? 'open' : 'close';
+      var stateName = this.target.isOpen() ? 'open' : 'close';
       this.callback(stateName, e);
@@ -123,6 +138,6 @@ }
 
-    const toggleEls = el.querySelectorAll('[data-o-component="o-toggle"]');
-    const toggles = [];
+    var toggleEls = el.querySelectorAll('[data-o-component="o-toggle"]');
+    var toggles = [];
 
-    for (let toggleEl of toggleEls) {
+    for (var toggleEl of toggleEls) {
       if (!toggleEl.hasAttribute('data-o-toggle--js')) {
@@ -129,0 +144,0 @@ toggles.push(new Toggle(toggleEl, config));

origami.json

@@ -17,14 +17,31 @@ {
   "demosDefaults": {
-    "js": "demos/src/demo.js"
+    "js": "demos/src/demo.js",
+    "sass": "demos/src/demo.scss",
+    "dependencies": [
+      "o-spacing@^2.0.0",
+      "o-fonts@^3.0.0",
+      "o-normalise@^1.0.0",
+      "o-buttons@^5.16.2"
+    ]
   },
   "demos": [
     {
-      "title": "Toggles",
-      "name": "toggles",
+      "title": "Toggle display on/off.",
+      "name": "display-toggle",
       "template": "demos/src/demo.mustache",
-      "sass": "demos/src/demo.scss",
-      "hidden": false,
-      "description": "The toggle button updates aria attributes on the targets and adds a class."
+      "data": {
+        "type": "display"
+      },
+      "description": "This toggle target has a class \"o-toggle-display\" which hides it until clicking the toggle updates its aria attributes and adds the \"o-toggle--active\" class."
+    },
+    {
+      "title": "Toggle visibility.",
+      "name": "visibility-toggle",
+      "template": "demos/src/demo.mustache",
+      "data": {
+        "type": "visibility"
+      },
+      "description": "This toggle target has a class \"o-toggle-visibility\" which visually hides it, whilst still occupying space, until clicking the toggle updates its aria attributes and adds the \"o-toggle--active\" class."
     }
   ]
 }

package.json

@@ -12,2 +12,4 @@ {
 		"*.json",
+		"*.js",
+		"!main.js",
 		"scss",
@@ -27,3 +29,3 @@ "!bower.json",
 	"name": "@financial-times/o-toggle",
-	"version": "1.2.1",
+	"version": "2.0.0-beta.1",
 	"dependencies": {},
@@ -30,0 +32,0 @@ "component": "o-toggle",

README.md

@@ -5,43 +5,76 @@ # o-toggle [![CircleCI](https://circleci.com/gh/Financial-Times/o-toggle.png?style=shield)](https://circleci.com/gh/Financial-Times/o-toggle) [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](#licence)
 
-- [Quick start](#quick-start)
-- [Usage](#usage)
-	- [Markup](#markup)
-	- [JavaScript](#javascript)
+- [Markup](#markup)
+- [JavaScript](#javascript)
+- [Sass](#sass)
 - [Contact](#contact)
 - [Licence](#licence)
 
+## Markup
 
-## Quick start
+Add the `data-o-component="o-toggle"` and `data-o-toggle-target` to your toggle element (e.g. `<button>`). Where the value of `data-o-toggle-target` is the CSS selector for the element you want to show/hide.
 
-Install the module:
+When the toggle is clicked a class `o-toggle--active` is toggled on the target as well as its `aria-hidden` attribute. Use these in your project to style the target according to if the toggle is on or off. Alternatively, add the class `o-toggle-display` (to totally hide the target) or `o-toggle-visibility` (to layout but visually hide the target) when the toggle is not active.
 
+```html
+<button data-o-component="o-toggle" data-o-toggle-target="#my-target">My button</button>
+<div id='my-target' class="o-toggle o-toggle-display">Some toggleable content</div>
 ```
-bower install --S o-toggle
+
+The data attribute `data-o-toggle-callback` may also be set to the name of a function as a _string_ that will be executed every time a toggle happens. E.g:
+
+```html
+<script>
+    window.myToggleCallback = function(state, event) {
+        if (state === 'open') {
+            console.log('Target opened');
+        } else if (state === 'close') {
+            console.log('Target closed');
+        }
+    };
+</script>
+<button data-o-component="o-toggle" data-o-toggle-target="#my-target" data-o-toggle-callback="myToggleCallback">My button</button>
+<div id='my-target' class="o-toggle o-toggle-display">Some toggleable content</div>
 ```
 
-Load the JavaScript:
+## Sass
 
-```js
-const oToggle = require('o-toggle');
+Projects may choose to style active targets themselves using the `o-toggle--active` class or `aria-hidden` attribute. However to use the `o-toggle` helper classes `o-toggle-display` and `o-toggle-visibility` classes (see [Markup](#markup) call the mixin `@include oToggle()`:
 
-oToggle.init();
+```scss
+@include oToggle();
 ```
 
-Add some markup:
+Alternatively the classes may be included granularly with an `$opts` map:
 
-```html
-<button data-o-component="o-toggle" data-o-toggle-target=".my-toggle-target">My button</button>
-<div class='my-toggle-target'>Some toggleable content</div>
+```scss
+@include oToggle($opts: ('display': true));
 ```
+or
+```scss
+@include oToggle($opts: ('visibility': true));
+```
 
-## Usage
+## JavaScript
 
-### JavaScript
+As with other Origami components, all `o-toggle` instances on the page with the data attribute `data-o-component="o-toggle"` may be constructed with the `o.DOMContentLoaded` event.
 
-An o-toggle object must be constructed for every element you have on your page that uses this module. You can do this for explicitly classed elements like so:
+```js
+import 'o-toggle';
+document.addEventListener("DOMContentLoaded", function() {
+    document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));
+});
+```
 
+Or by calling the `init` method:
 ```js
-const OToggle = require('o-toggle');
+import Toggle from 'o-toggle';
+Toggle.init();
+```
+
+Toggles may also be constructed individually without `data-o-component="o-toggle"`:
+
+```js
+import Toggle from 'o-toggle';
 const toggleEl = document.querySelector('.o-toggle');
-const toggle = new OToggle(toggleEl, {
+const toggle = new Toggle(toggleEl, {
         target: '.my-target',
@@ -58,26 +91,16 @@ callback: function(state, event) {
 
-Alternatively, an `o.DOMContentLoaded` event can be dispatched on the document to auto-construct an o-toggle object for each element with a `data-o-component="o-toggle"` attribute:
-
-```js
-require('o-toggle');
-document.addEventListener("DOMContentLoaded", function() {
-    document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));
-});
-```
-
 A second parameter can be passed to the oToggle constructor or to the `.init()` function with a config object that has the following options:
 
-* *target*: HTMLElement or selector of the element that will be toggled
-* *callback*: Function or content of a function as _string_ that will be executed every time a toggle happens. It has the following parameters:
+- *target*: HTMLElement or selector of the element that will be toggled
+- *callback*: Function or content of a function as _string_ that will be executed every time a toggle happens. It has the following parameters:
     - State. 'open' or 'close'
     - Click event object if it comes from the event handler on the toggle
 
-### Markup
+## Migration
 
-All config options can also be passed as data attributes. These are:
+State | Major Version | Last Minor Release | Migration guide |
+:---: | :---: | :---: | :---:
+✨ active | 2 | N/A | [migrate to v2](MIGRATION.md#migrating-from-v1-to-v2) |
+╳ deprecated | 1 | 1.2 | N/A |
 
-* data-o-toggle-target: Selector of the element that will be toggled
-* data-o-toggle-callback: Content of a function as _string_ that will be executed every time a toggle happens
-
-
 ## Contact
@@ -84,0 +107,0 @@

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18843

increased by91.09%

Number of package files

11

increased by83.33%

Lines of code

381

increased by93.4%

Number of lines in readme file

113

increased by25.56%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes