advanced-menus - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

dist/menu.js

@@ -1,1 +0,1 @@
-!function(n){function e(t){if(r[t])return r[t].exports;var o=r[t]={i:t,l:!1,exports:{}};return n[t].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var r={};e.m=n,e.c=r,e.i=function(n){return n},e.d=function(n,r,t){e.o(n,r)||Object.defineProperty(n,r,{configurable:!1,enumerable:!0,get:t})},e.n=function(n){var r=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(r,"a",r),r},e.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},e.p="",e(e.s=0)}([function(n,e){throw new Error("Module build failed: SyntaxError: Unexpected token (9:14)\n\n   7 | }\n   8 | \n>  9 | export require('./module/Menu.js')\n     |               ^\n  10 | \n")}]);
+!function(e){function t(n){if(s[n])return s[n].exports;var i=s[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var s={};t.m=e,t.c=s,t.i=function(e){return e},t.d=function(e,s,n){t.o(e,s)||Object.defineProperty(e,s,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var s=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(s,"a",s),s},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1)}([function(e,t,s){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o=function(){function e(e,t){for(var s=0;s<t.length;s++){var n=t[s];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,s,n){return s&&e(t.prototype,s),n&&e(t,n),t}}(),u=function(){function e(t){n(this,e),this.config(t);var s=this.settings.selectors;if(this.menu=document.getElementById(s.menu_id),!this.menu)return void console.error("unable to find the menu with selector: "+s.menu_id);if(this.menuitems=this.menu.querySelectorAll(s.menuitem+" a"),this.submenus=this.menu.querySelectorAll(s.submenu),this.submenus.length)for(var i=0;i<this.submenus.length;i++)this.submenus[i].parentNode.classList.add("am-has-children");var o;if(this.settings.options.use_handles?(this.initHandles(),o=this.menu.querySelectorAll(s.menuitem+" .handle")):o=this.menu.querySelectorAll(s.menuitem+" a"),this.registerEventAll(o,"click",this.onMenuItemClick),this.submenus.length)for(var i=0;i<this.submenus.length;i++)this.initSubmenu(this.submenus[i]);this.toggleButtons=document.querySelectorAll(s.toggle_button),this.registerEventAll(this.toggleButtons,"click",this.toggle),this.openButtons=document.querySelectorAll(s.open_button),this.registerEventAll(this.openButtons,"click",this.open),this.closeButtons=document.querySelectorAll(s.close_button),this.registerEventAll(this.closeButtons,"click",this.close),document.addEventListener("touchstart",this.onTouchStart.bind(this),!1),document.addEventListener("touchmove",this.onTouchMove.bind(this),!1),this.settings.options.autoclose&&document.addEventListener("mousedown",this.documentClick.bind(this))}return o(e,[{key:"config",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=this.settings||{options:{disable_scroll:!1,autoclose:!0,use_handles:!0},events:{swipeLeft:function(){},swipeRight:function(){},swipeUp:function(){},swipeDown:function(){}},selectors:{menu_id:"main-menu",menuitem:"li",submenu:"li > ul",toggle_button:!1,open_button:!1,close_button:!1}};for(var s in t)if("object"==i(t[s])&&e[s])for(var n in t[s])void 0!==e[s][n]&&(t[s][n]=e[s][n]);return this.settings=t,console.log("Config::",this.settings),this}},{key:"onMenuItemClick",value:function(e){for(var t=e.target.parentNode.classList.contains("active"),s=e.target.parentNode.parentNode.querySelectorAll(".am-has-children"),n=0;n<s.length;n++)s[n].classList.remove("active");t||e.target.parentNode.classList.add("active");var i=e.target.parentNode.querySelector(this.settings.selectors.submenu);if(!i)return void this.close();e.preventDefault(),e.target.parentNode.removeAttribute("style"),this.toggleSubmenu(i)}},{key:"toggle",value:function(){if(this.menu.classList.toggle("active"),document.body.classList.toggle("am-menu-active"),document.body.classList.toggle("menu-"+this.settings.selectors.menu_id+"-active"),this.settings.options.disable_scroll&&document.body.classList.toggle("scroll-disabled"),!this.menu.classList.contains("active"))for(var e=0;e<this.submenus.length;e++)this.closeSubmenu(this.submenus[e])}},{key:"open",value:function(){this.menu.classList.add("active"),document.body.classList.add("am-menu-active"),document.body.classList.add("menu-"+this.settings.selectors.menu_id+"-active"),this.settings.options.disable_scroll&&document.body.classList.add("scroll-disabled")}},{key:"close",value:function(){for(var e=this.menu.querySelectorAll(".am-has-children"),t=0;t<e.length;t++)e[t].classList.remove("active");for(var t=0;t<this.submenus.length;t++)this.closeSubmenu(this.submenus[t]);this.menu.classList.contains("active")&&(this.menu.classList.remove("active"),document.body.classList.remove("am-menu-active"),document.body.classList.remove("menu-"+this.settings.selectors.menu_id+"-active"),this.settings.options.disable_scroll&&document.body.classList.remove("scroll-disabled"))}},{key:"toggleSubmenu",value:function(e){e.classList.contains("active")||this.can_open_multiple(this.closest(e,e.className)),e.classList.toggle("active")}},{key:"openSubmenu",value:function(e){this.can_open_multiple(),e.classList.add("active")}},{key:"closeSubmenu",value:function(e){e.classList.remove("active")}},{key:"onTouchStart",value:function(e){this.xDown=e.touches[0].clientX,this.yDown=e.touches[0].clientY}},{key:"onTouchMove",value:function(e){if(this.xDown&&this.yDown){var t=e.touches[0].clientX,s=e.touches[0].clientY,n=this.xDown-t,i=this.yDown-s;Math.abs(n)>Math.abs(i)?n>0?this.settings.events.swipeLeft():this.settings.events.swipeRight():i>0?this.settings.events.swipeUp():this.settings.events.swipeDown(),this.xDown=null,this.yDown=null}}},{key:"can_open_multiple",value:function(e){for(var t=0;t<this.submenus.length;t++)e!=this.submenus[t]&&this.closeSubmenu(this.submenus[t])}},{key:"initSubmenu",value:function(e){e.classList.add("active");for(var t=0;t<this.menuitems.length;t++){if(this.closest(this.menuitems[t],"sub-menu"))var s=this.menuitems[t].offsetHeight;s+=parseInt(window.getComputedStyle(this.menuitems[t]).getPropertyValue("margin-top")),s+=parseInt(window.getComputedStyle(this.menuitems[t]).getPropertyValue("margin-bottom")),this.menuitems[t].parentNode.style.maxHeight=s+"px"}e.classList.remove("active")}},{key:"closest",value:function(e,t){return!(!e.parentNode||!e.parentNode.className)&&(-1!=e.parentNode.className.indexOf(t)?e.parentNode:this.closest(e.parentNode,t))}},{key:"documentClick",value:function(e){for(var t=!0,s=0;s<e.path.length;s++)(e.path[s].id==this.settings.selectors.menu_id||e.path[s].classList&&e.path[s].classList.contains("menu-toggle-button"))&&(t=!1);t&&this.close()}},{key:"registerEventAll",value:function(e,t,s){if(e.length)for(var n=0;n<e.length;n++)e[n].addEventListener(t,s.bind(this))}},{key:"initHandles",value:function(){for(var e=this.menu.querySelectorAll(".am-has-children"),t=0;t<e.length;t++){var s=document.createElement("span");s.classList.add("handle"),e[t].insertBefore(s,e[t].children[1])}}}]),e}();t.default=u},function(e,t,s){"use strict";var n=s(0),i=function(e){return e&&e.__esModule?e:{default:e}}(n);e.exports=i.default}]);

module/Menu.js

@@ -9,16 +9,29 @@ export default class Menu {
     if(!this.menu) {
-      console.error("unable to find the menu with selector: " + selectors.menu);
+      console.error("unable to find the menu with selector: " + selectors.menu_id);
       return;
     };
-    this.menuitems = this.menu.querySelectorAll(selectors.menuitem + ' a');
+
+    this.menuitems = this.menu.querySelectorAll(selectors.menuitem + ' a')
+
+    //init submenus
     this.submenus = this.menu.querySelectorAll(selectors.submenu);
+    if(this.submenus.length)
+    for(var i=0; i < this.submenus.length; i++){
+      this.submenus[i].parentNode.classList.add('am-has-children')
+    }
 
-    if(this.menuitems.length)
-    for(var i=0; i < this.menuitems.length; i++){
-      this.menuitems[i].addEventListener("click", this.onMenuItemClick.bind(this));
+    //init menuitems
+    var handles;
+    if(this.settings.options.use_handles){
+      this.initHandles();
+      handles = this.menu.querySelectorAll(selectors.menuitem + ' .handle');
+    }else{
+      handles = this.menu.querySelectorAll(selectors.menuitem + ' a');
     }
 
+    this.registerEventAll(handles, 'click', this.onMenuItemClick);
+
     if(this.submenus.length)
     for(var i=0; i < this.submenus.length; i++){
-      this.calculateMaxHeight(this.submenus[i]);
+      this.initSubmenu(this.submenus[i]);
     }
@@ -28,20 +41,11 @@
     this.toggleButtons = document.querySelectorAll(selectors.toggle_button);
-    if(this.toggleButtons.length)
-    for(var i=0; i < this.toggleButtons.length; i++){
-      this.toggleButtons[i].addEventListener("click", this.toggle.bind(this));
-    }
+    this.registerEventAll(this.toggleButtons, 'click', this.toggle);
 
     // init openButtons
     this.openButtons = document.querySelectorAll(selectors.open_button);
-    if(this.openButtons.length)
-    for(var i=0; i < this.openButtons.length; i++){
-      this.openButtons[i].addEventListener("click", this.open.bind(this));
-    }
+    this.registerEventAll(this.openButtons, 'click', this.open);
 
     // init closeButtons
     this.closeButtons = document.querySelectorAll(selectors.close_button);
-    if(this.closeButtons.length)
-    for(var i=0; i < this.closeButtons.length; i++){
-      this.closeButtons[i].addEventListener("click", this.close.bind(this));
-    }
+    this.registerEventAll(this.closeButtons, 'click', this.close);
 
@@ -52,16 +56,5 @@ //init swiping
 
-    document.addEventListener('mousedown', function(e){
-      var hide = true; //this.menu.classList.contains('active');
-      //if(!hide) return;
-
-      for(var i = 0; i < e.path.length; i++ ){
-        if(
-          e.path[i].id == this.settings.selectors.menu_id ||
-          e.path[i].classList && e.path[i].classList.contains('menu-toggle-button')
-        )
-        hide = false;
-      }
-
-      if(hide) this.close();
-    }.bind(this))
+    //document click
+    if(this.settings.options.autoclose)
+    document.addEventListener('mousedown', this.documentClick.bind(this))
   }
@@ -71,17 +64,30 @@
     var defaultConfig = this.settings || {
-      submenu:{
-        can_open_multiple: false,
+      options:{
+        disable_scroll: false,
+        autoclose: true,
+        use_handles: true,
       },
+      events: {
+        swipeLeft: function(){},
+        swipeRight: function(){},
+        swipeUp: function(){},
+        swipeDown: function(){}
+      },
       selectors:{
         menu_id: 'main-menu',
         menuitem: 'li',
-        submenu: '.menu-item > ul',
-        toggle_button: '.menu-toggle-button',
-        open_button: '.menu-open-button',
-        close_button: '.menu-close-button',
+        submenu: 'li > ul',
+        toggle_button: false,
+        open_button: false,
+        close_button: false,
       }
     }
 
-    for (var setting in defaultConfig){
-      if(args[setting]) defaultConfig[setting] = args[setting];
+    for (var config in defaultConfig){
+      if(typeof defaultConfig[config] == "object" && args[config])
+      for (var opt in defaultConfig[config]){
+        if(typeof args[config][opt] != "undefined") {
+          defaultConfig[config][opt] = args[config][opt];
+        }
+      }
     }
@@ -95,2 +101,8 @@
   onMenuItemClick (e){
+    var is_active = e.target.parentNode.classList.contains("active");
+    var submenuitems = e.target.parentNode.parentNode.querySelectorAll('.am-has-children')
+    for(var i = 0; i < submenuitems.length; i++){
+      submenuitems[i].classList.remove('active')
+    }
+    if(!is_active) e.target.parentNode.classList.add("active");
     var submenu = e.target.parentNode.querySelector(this.settings.selectors.submenu);
@@ -103,2 +115,3 @@ if(!submenu) {
     e.preventDefault();
+    e.target.parentNode.removeAttribute("style")
     this.toggleSubmenu(submenu);
@@ -109,4 +122,8 @@ }
     this.menu.classList.toggle('active')
+    document.body.classList.toggle('am-menu-active');
+    document.body.classList.toggle('menu-'+ this.settings.selectors.menu_id + '-active');
+
+    if(this.settings.options.disable_scroll)
     document.body.classList.toggle('scroll-disabled');
-    document.body.classList.toggle('menu-open');
+
     if(!this.menu.classList.contains('active')){
@@ -121,13 +138,27 @@ for(var i = 0; i < this.submenus.length; i++){
     this.menu.classList.add('active')
+    document.body.classList.add('am-menu-active');
+    document.body.classList.add('menu-'+ this.settings.selectors.menu_id + '-active');
+
+    if(this.settings.options.disable_scroll)
     document.body.classList.add('scroll-disabled');
-    document.body.classList.add('menu-open');
   }
 
   close(){
+    var submenuitems = this.menu.querySelectorAll('.am-has-children')
+    for(var i = 0; i < submenuitems.length; i++){
+      submenuitems[i].classList.remove('active')
+    }
+
     for(var i = 0; i < this.submenus.length; i++){
       this.closeSubmenu(this.submenus[i]);
     }
-    this.menu.classList.remove('active')
-    document.body.classList.remove('scroll-disabled');
-    document.body.classList.remove('menu-open');
+
+    if(this.menu.classList.contains('active')){
+      this.menu.classList.remove('active')
+      document.body.classList.remove('am-menu-active');
+      document.body.classList.remove('menu-'+ this.settings.selectors.menu_id + '-active');
+
+      if(this.settings.options.disable_scroll)
+      document.body.classList.remove('scroll-disabled');
+    }
   }
@@ -168,11 +199,11 @@
       if ( xDiff > 0 ) {
-        this.onSwipeLeft();
+        this.settings.events.swipeLeft();
       } else {
-        this.onSwipeRight();
+        this.settings.events.swipeRight();
       }
     } else {
       if ( yDiff > 0 ) {
-        this.onSwipeUp();
+        this.settings.events.swipeUp();
       } else {
-        this.onSwipeDown();
+        this.settings.events.swipeDown();
       }
@@ -186,32 +217,22 @@ }
 
-  onSwipeLeft(){
-    this.close();
-  }
-
-  onSwipeRight(){
-    this.open();
-  }
-
-  onSwipeUp(){}
-
-  onSwipeDown(){}
-
   can_open_multiple(parentMenu){
-    if(!this.settings.submenu.can_open_multiple){
-      for(var i = 0; i < this.submenus.length; i++){
-        if(parentMenu != this.submenus[i])
-          this.closeSubmenu(this.submenus[i]);
-      }
+    for(var i = 0; i < this.submenus.length; i++){
+      if(parentMenu != this.submenus[i])
+      this.closeSubmenu(this.submenus[i]);
     }
   }
 
-  calculateMaxHeight(submenu) {
+  initSubmenu(submenu) {
     submenu.classList.add('active');
-    var menuitems = submenu.children;
+
     for (var i = 0; i< this.menuitems.length; i++){
       if(this.closest(this.menuitems[i], 'sub-menu'))
-      this.menuitems[i].parentNode.style.maxHeight = this.menuitems[i].clientHeight + "px"
+      var elHeight = this.menuitems[i].offsetHeight;
+      elHeight += parseInt(window.getComputedStyle(this.menuitems[i]).getPropertyValue('margin-top'));
+      elHeight += parseInt(window.getComputedStyle(this.menuitems[i]).getPropertyValue('margin-bottom'));
+
+      this.menuitems[i].parentNode.style.maxHeight = elHeight + "px"
     }
+
     submenu.classList.remove('active');
-    //submenu.style.maxHeight = menuitems.length*menuitems[0].clientHeight + "px";
   }
@@ -232,2 +253,33 @@
   }
+
+  documentClick (e){
+    var hide = true;
+
+    for(var i = 0; i < e.path.length; i++ ){
+      if(
+        e.path[i].id == this.settings.selectors.menu_id ||
+        e.path[i].classList && e.path[i].classList.contains('menu-toggle-button')
+      )
+      hide = false;
+    }
+
+    if(hide) this.close();
+  }
+
+  registerEventAll (elements, eventname, callback){
+    if(elements.length)
+    for(var i=0; i < elements.length; i++){
+      elements[i].addEventListener(eventname, callback.bind(this));
+    }
+  }
+
+  initHandles(){
+    var menuitems = this.menu.querySelectorAll('.am-has-children');
+    for (var i=0; i < menuitems.length; i++){
+      var handle = document.createElement('span');
+      handle.classList.add('handle');
+      menuitems[i].insertBefore(handle, menuitems[i].children[1]);
+    }
+  }
+
 }

package.json

 {
   "name": "advanced-menus",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Easy to use and configurable HTML5 Menus",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # Menu Package for Webpack.
 
-** NOTE: Package is in development.**
+**NOTE: Package is in development.**
 
@@ -8,17 +8,21 @@ ### Why this package
 
-** goals **
+**DONE**
+
++ Change menu based on resolution SASS only
++ Create your own menu themes
++ Customizable selectors
++ Basic swipe handling
+
+**TODO**
++ Optimize package
 + Create up to 5 (or more) menu themes (SCSS)
-+ Swich themes based on screen resolution (SCSS)
-+ Configurable selectors for menu, menu-item, sub-menu, toggle-button etc.
-+ Create your own menu themes
 + Optimize Swipe event usage
++ Optimize Demo page
++ Optimize documentation
++ Create ready to use prebuild package files.
 
-** TODO **
-+ Optimize package and more..
+**EXAMPLE: [menudemo.rehabproject.nl](http://menudemo.rehabproject.nl)**
 
-** EXAMPLE: [menudemo.rehabproject.nl](http://menudemo.rehabproject.nl) **
+ps. Like to join the fun? contact us at [e-mail];
 
-ps. This is my first NPM Package.
-Please let me know if you've got some tips!
-
 ## How to use
@@ -39,14 +43,49 @@
 
+/*
+DEFAULT CONFIG
+
+{
+	options:{
+		disable_scroll: false,
+		autoclose: true,
+		use_handles: true,
+	},
+	events: {
+		swipeLeft: function(){},
+		swipeRight: function(){},
+		swipeUp: function(){},
+		swipeDown: function(){}
+	},
+	selectors:{
+		menu_id: 'main-menu',
+		menuitem: 'li',
+		submenu: 'li > ul',
+		toggle_button: false,
+		open_button: false,
+		close_button: false,
+	}
+}
+
+*/
+
 	const Menu = require('advanced-menus');
 
-    //defaultconfig
-    var  config = {
-      selectors:{
-        menu_id: 'main-menu',
-        menuitem: 'li',
-        submenu: '.menu-item > ul',
-        toggle_button: '.menu-toggle-button',
-        open_button: '.menu-open-button',
-        close_button: '.menu-close-button',
-    }
+    //menu config;
+    var config = {
+		  selectors:{
+		    toggle_button: ".menu-toggle-button",
+		  },
+		  options:{
+		    disable_scroll: true,
+		    use_handles:true,
+		  },
+		  events:{
+		    swipeLeft: function(){
+		      menu.close();
+		    },
+		    swipeRight: function(){
+		      menu.open();
+		    }
+		  }
+		}
 
@@ -61,3 +100,2 @@ //config not required
 ```cs
-@import "node_modules/advanced-menus/scss/menu";
 
@@ -69,20 +107,27 @@ /*
     - plain-horizontal
+	- dropdown
 */
 
-$menu-config: (
-  aside-left: (
-    min:0px,
-    max:750px,
-    autohide: 750px
-  ),
-  aside-right: (
-    min:750px,
-    max:1024px,
-  ),
-  plain-horizontal: (
-    min:1024px
-  )
-)
+$registered-menus: (
+	main-menu: (
+		selector:"#main-menu",
+		themes:(
+			aside-left: (
+				min:0px,
+				max:750px,
+				autohide: 750px
+			),
+			aside-right: (
+				min:750px,
+				max:1024px,
+			),
+			plain-horizontal: (min:1024px)
+		)
+	)
+	//, another menu
+	//, another menu
+);
 
-@include menu( "#main-menu", $menu-config);
+@import "node_modules/advanced-menus/scss/menu";
+@include generate-menus();
 
@@ -97,3 +142,3 @@ /*
 
-@include menu-breakpoint($theme){
+@include menu-breakpoint($menu, $theme){
   //styles
@@ -109,11 +154,11 @@ }
 
-$theme: "theme-name";
-$config: map-get($menu-config, $theme);
-
-%menu-theme-#{$theme}{
-  @include menu-breakpoint($theme){
+@include register_menu_theme($some-theme-name)
 	// your styles here.
-  }
 }
 
+//probably needs some more work..
+//hides menu at certain resolution;
+@include menu-autohide($theme-name){
+	// initial styles to hide menu.
+}
 
@@ -120,0 +165,0 @@ ```

webpack.config.js

@@ -8,3 +8,3 @@ var path = require('path');
   entry: './index.js',
-  watch: false,
+  watch: true,
   output: {
@@ -39,10 +39,2 @@ filename: 'menu.js',
   plugins: [
-    new BrowserSyncPlugin ({
-      // browse to http://localhost:3000/ during development,
-      // ./public directory is being served
-      open: 'external',
-      host: 'localhost',
-      proxy: 'menus.mod',
-      files: ['resources/js/*.js', 'resources/images/**']
-    }),
     new ExtractTextPlugin({ filename: 'menu.css', disable: false, allChunks: true }),
@@ -49,0 +41,0 @@ new webpack.optimize.UglifyJsPlugin({

No alert changes

Improved metrics

Total package byte prevSize

64696

increased by15.58%

Number of package files

24

increased by14.29%

Number of lines in readme file

200

increased by29.03%

Worsened metrics

Lines of code

284

decreased by-19.55%

No dependency changes