dotsunited-off-canvas-navigation - npm Package Compare versions

Comparing version 2.1.1 to 2.2.0

lib/setup.js

@@ -12,2 +12,4 @@ (function(window, factory) {
 }(typeof window !== 'undefined' ? window : this, function(window, $) {
+    var $document = $(window.document);
+
     return function(namespace) {
@@ -19,14 +21,79 @@ var toggleSelector = '[data-' + namespace + '-toggle]';
 
-        $(window.document)
+        function open(toggle, panel) {
+            root.addClass(openClass);
+
+            toggle
+                .attr('aria-expanded', 'true')
+                .trigger(namespace + ':' + 'open', [toggle, panel])
+            ;
+
+            panel
+                .attr('aria-hidden', 'false')
+                .removeAttr('hidden')
+                .attr('tabindex', -1)
+                .scrollTop(0)
+                .focus()
+            ;
+
+            $document
+                .on('keydown.' + namespace + '-internal', function(e) {
+                    if (e.keyCode !== 27) {
+                        return;
+                    }
+
+                    close(toggle, panel);
+                })
+                .on('click.' + namespace + '-internal', function(e) {
+                    if (panel.index(e.target) >= 0 || $.contains(panel.get(0), e.target)) {
+                        return;
+                    }
+
+                    close(toggle, panel);
+                })
+            ;
+        }
+
+        function close(toggle, panel) {
+            $document
+                .off('.' + namespace + '-internal')
+            ;
+
+            root.removeClass(openClass);
+
+            panel
+                .attr('aria-hidden', 'true')
+                .attr('hidden', 'true')
+                .removeAttr('tabindex')
+                .blur()
+            ;
+
+            toggle
+                .attr('aria-expanded', 'false')
+                .focus()
+                .trigger(namespace + ':' + 'open', [toggle, panel])
+            ;
+        }
+
+        $document
             .on('click.' + namespace, toggleSelector, function(e) {
+                var toggle = $(this);
+                var target = toggle.attr('href');
+
+                if (!target) {
+                    target = '#' + toggle.attr('aria-controls');
+                }
+
+                var panel = $(target);
+
+                if (!panel.length) {
+                    return;
+                }
+
                 e.preventDefault();
 
-                var expanded = root
-                    .toggleClass(openClass)
-                    .hasClass(openClass)
-                ;
-
-                $(toggleSelector)
-                    .attr('aria-expanded', (expanded ? 'true' : 'false'))
-                    .trigger(namespace + ':' + (expanded ? 'open' : 'close'), [this]);
+                if (root.hasClass(openClass)) {
+                    close(toggle, panel);
+                } else {
+                    open(toggle, panel);
+                }
             })
@@ -33,0 +100,0 @@ ;

package.json

@@ -8,5 +8,5 @@ {
     "email": "[e-mail]",
-    "url" : "https://dotsunited.de"
+    "url": "https://dotsunited.de"
   },
-  "version": "2.1.1",
+  "version": "2.2.0",
   "repository": {
@@ -19,3 +19,16 @@ "type": "git",
     "jquery": ">=1.7"
+  },
+  "devDependencies": {
+    "css-loader": "^0.23.1",
+    "file-loader": "^0.9.0",
+    "jquery": "^1.12.4",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.13.1"
+  },
+  "scripts": {
+    "build-demo": "webpack --config demo/_src/webpack.config.js --progress --profile --colors"
   }
 }

README.md

@@ -40,29 +40,21 @@ Off-Canvas Navigation
 
-If it's the only primary navigation menu on the page:
-
 ```html
-<a aria-controls="off-canvas-navigation-menu" aria-expanded="false" href="#off-canvas-navigation-menu" role="button" class="off-canvas-navigation-button" data-off-canvas-navigation-toggle>
+<button
+    aria-label="Open navigation"
+    aria-controls="off-canvas-navigation-menu"
+    aria-expanded="false"
+    class="off-canvas-navigation-button"
+    data-off-canvas-navigation-toggle
+>
     <span><span></span></span>
-</a>
-
-<div aria-hidden="true" class="off-canvas-navigation-backdrop" data-off-canvas-navigation-toggle></div>
-
-<nav id="off-canvas-navigation-menu" class="off-canvas-navigation-menu">
-    <ul>
-        <li>...</li>
-    </ul>
-</nav>
-```
-
-If there are more than one primary navigation menus, hiding the off-canvas menu
-completely for screen readers:
-
-```html
-<button aria-hidden="true" class="off-canvas-navigation-button" data-off-canvas-navigation-toggle>
-    <span></span>
 </button>
 
-<div aria-hidden="true" class="off-canvas-navigation-backdrop" data-off-canvas-navigation-toggle></div>
+<div aria-hidden="true" class="off-canvas-navigation-backdrop"></div>
 
-<nav aria-hidden="true" id="off-canvas-navigation-menu" class="off-canvas-navigation-menu">
+<div
+    id="off-canvas-navigation-menu"
+    aria-hidden="true"
+    hidden
+    class="off-canvas-navigation-menu"
+>
     <ul>
@@ -98,3 +90,3 @@ <li>...</li>
 
-Copyright (c) 2015 Dots United GmbH.
+Copyright (c) 2015-2016 Dots United GmbH.
 Released under the [MIT](LICENSE?raw=1) license.

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

336442

increased by3415.22%

Number of package files

12

increased by71.43%

Lines of code

9491

increased by23627.5%

Worsened metrics

Dev dependency count

8

increased byInfinity%

Number of lines in readme file

91

decreased by-8.08%

Number of low supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes