Merge remote-tracking branch 'origin/master'

README.md

@@ -8,6 +8,7 @@ PriorityNav is a lightweight pure javascript plugin that will move your menu ite
 
 ### Features
 - **No dependencies**<br>The plugin is written in pure javascript making it fast and lean.
+- **Breakpoint**<br>When the breakpoint has been reached the plugin will automaticly move all items to the dropdown & change the toggle label to navDropdownBreakpointLabel.
 - **Smart calculation of available space**<br>It automatically looks for the main navigation's siblings and calculates remaining space.
 - **Flexible**<br>Because of the point above you can have multiple inline-block/flexbox items on the same level.
 - **Non obstructive menu dropdown**<br>The dropdown menu can be closed by clicking outside and pressing escape.
@@ -45,15 +46,17 @@ Ideal html structure
 
 ### Options
 ```js
-initClass:          "js-priorityNav", // Class that will be printed on html element to allow conditional css styling.
-mainNavWrapper:     "nav", // mainnav wrapper selector (must be direct parent from mainNav)
-mainNav:            "ul", // mainnav selector. (must be inline-block)
-navDropdown:        ".nav__dropdown", // class used for the dropdown.
-navDropdownToggle:  ".nav__dropdown-toggle", // class used for the dropdown toggle.
-navDropdownLabel:   "more", // Text that is used for the dropdown toggle.
-throttleDelay:      50, // this will throttle the calculating logic on resize because i'm a responsible dev.
-offsetPixels:       0, // increase to decrease the time it takes to move an item.
-count:              true, // prints the amount of items are moved to the attribute data-count.
+initClass:                  "js-priorityNav", // Class that will be printed on html element to allow conditional css styling.
+mainNavWrapper:             "nav", // mainnav wrapper selector (must be direct parent from mainNav)
+mainNav:                    "ul", // mainnav selector. (must be inline-block)
+navDropdown:                ".nav__dropdown", // class used for the dropdown.
+navDropdownToggle:          ".nav__dropdown-toggle", // class used for the dropdown toggle.
+navDropdownLabel:           "more", // Text that is used for the dropdown toggle.
+navDropdownBreakpointLabel: "menu", //button label for navDropdownToggle when the breakPoint is reached.
+breakPoint:                 500, //amount of pixels when all menu items should be moved to dropdown to simulate a mobile menu
+throttleDelay:              50, // this will throttle the calculating logic on resize because i'm a responsible dev.
+offsetPixels:               0, // increase to decrease the time it takes to move an item.
+count:                      true, // prints the amount of items are moved to the attribute data-count to style with css counter.
 
 //Callbacks
 moved: function () {}, // executed when item is moved to dropdown

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "priority-nav",
   "title": "priority-nav",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "main": [
     "dist/priority-nav.js",
     "dist/priority-nav-core.css"

dist/priority-nav.js

@@ -1,5 +1,5 @@
 /*
- * priority-nav - v1.0.4 | (c) 2015 @gijsroge | MIT license
+ * priority-nav - v1.0.7 | (c) 2015 @gijsroge | MIT license
  * Repository: https://github.com/gijsroge/priority-navigation.git
  * Description: Priority+ pattern navigation that hides menu items if they don't fit on screen.
  * Demo: http://gijsroge.github.io/priority-nav.js/
@@ -26,21 +26,24 @@
     var instance = 0;
     var count = 0;
     var mainNavWrapper, totalWidth, restWidth, mainNav, navDropdown, navDropdownToggle, dropDownWidth, toggleWrapper;
+    var viewportWidth = 0;
 
     /**
      * Default settings
      * @type {{initClass: string, navDropdown: string, navDropdownToggle: string, mainNavWrapper: string, moved: Function, movedBack: Function}}
      */
     var defaults = {
-        initClass: "js-priorityNav",
-        mainNavWrapper: "nav",
-        mainNav: "ul",
-        navDropdown: ".nav__dropdown",
-        navDropdownToggle: ".nav__dropdown-toggle",
-        navDropdownLabel: "more",
-        throttleDelay: 50,
-        offsetPixels: 0,
-        count: true,
+        initClass:                  "js-priorityNav", // Class that will be printed on html element to allow conditional css styling.
+        mainNavWrapper:             "nav", // mainnav wrapper selector (must be direct parent from mainNav)
+        mainNav:                    "ul", // mainnav selector. (must be inline-block)
+        navDropdown:                "nav__dropdown", // class used for the dropdown.
+        navDropdownToggle:          "nav__dropdown-toggle", // class used for the dropdown toggle.
+        navDropdownLabel:           "more", // Text that is used for the dropdown toggle.
+        navDropdownBreakpointLabel: "menu", //button label for navDropdownToggle when the breakPoint is reached.
+        breakPoint:                 500, //amount of pixels when all menu items should be moved to dropdown to simulate a mobile menu
+        throttleDelay:              50, // this will throttle the calculating logic on resize because i'm a responsible dev.
+        offsetPixels:               0, // increase to decrease the time it takes to move an item.
+        count:                      true, // prints the amount of items are moved to the attribute data-count to style with css counter.
 
         //Callbacks
         moved: function () {
@@ -192,13 +195,13 @@
         /**
          * Add classes so we can target elements
          */
-        navDropdown.classList.add(settings.navDropdown.substr(1));
+        navDropdown.classList.add(settings.navDropdown);
         navDropdown.classList.add("priority-nav__dropdown");
 
-        navDropdownToggle.classList.add(settings.navDropdownToggle.substr(1));
+        navDropdownToggle.classList.add(settings.navDropdownToggle);
         navDropdownToggle.classList.add("priority-nav__dropdown-toggle");
 
-        toggleWrapper.classList.add(settings.navDropdown.substr(1)+"-wrapper");
+        toggleWrapper.classList.add(settings.navDropdown+"-wrapper");
         toggleWrapper.classList.add("priority-nav__wrapper");
 
         _this.classList.add("priority-nav");
@@ -219,6 +222,28 @@
     };
 
 
+    /**
+     * Get viewport size
+     * @returns {{width: number, height: number}}
+     */
+    var viewportSize = function() {
+        var doc = document, w = window;
+        var docEl = (doc.compatMode && doc.compatMode === "CSS1Compat")?
+            doc.documentElement: doc.body;
+
+        var width = docEl.clientWidth;
+        var height = docEl.clientHeight;
+
+        // mobile zoomed in?
+        if ( w.innerWidth && width > w.innerWidth ) {
+            width = w.innerWidth;
+            height = w.innerHeight;
+        }
+
+        return {width: width, height: height};
+    };
+
+
     /**
      * Get width
      * @param elem
@@ -233,6 +258,7 @@
             dropDownWidth = 0;
         }
         restWidth = getChildrenWidth(_this) + settings.offsetPixels;
+        viewportWidth = viewportSize().width;
     };
 
 
@@ -271,19 +297,23 @@
             /**
              * Keep executing until all menu items that are overflowing are moved
              */
-            while (totalWidth < restWidth && _this.querySelector(mainNav).children.length > 0) {
+            while (totalWidth < restWidth  && _this.querySelector(mainNav).children.length > 0 || viewportWidth < settings.breakPoint && _this.querySelector(mainNav).children.length > 0) {
                 //move item to dropdown
                 priorityNav.toDropdown(_this, identifier);
                 //recalculate widths
                 calculateWidths(_this, identifier);
+                //update dropdownToggle label
+                if(viewportWidth < settings.breakPoint) updateLabel(_this, identifier, settings.navDropdownBreakpointLabel);
             }
 
             /**
              * Keep executing until all menu items that are able to move back are moved
              */
-            while (totalWidth > breaks[identifier][breaks[identifier].length - 1]) {
+            while (totalWidth > breaks[identifier][breaks[identifier].length - 1] && viewportWidth > settings.breakPoint) {
                 //move item to menu
                 priorityNav.toMenu(_this, identifier);
+                //update dropdownToggle label
+                if(viewportWidth > settings.breakPoint) updateLabel(_this, identifier, settings.navDropdownLabel);
             }
 
             /**
@@ -322,7 +352,11 @@
      * Update count on dropdown toggle button
      */
     var updateCount = function (_this, identifier) {
-        _this.querySelector(navDropdownToggle).dataset.count = breaks[identifier].length;
+        _this.querySelector(navDropdownToggle).setAttribute("priorityNav-count", breaks[identifier].length);
+    };
+
+    var updateLabel = function(_this, identifier, label){
+        _this.querySelector(navDropdownToggle).innerHTML = label;
     };
 
 
@@ -437,7 +471,7 @@
 
         // Toggle dropdown
         _this.querySelector(navDropdownToggle).addEventListener("click", function () {
-            toggleClass(_this.querySelector(settings.navDropdown), "show");
+            toggleClass(_this.querySelector(navDropdown), "show");
             toggleClass(this, "is-open");
             toggleClass(_this, "is-open");
         });
@@ -577,7 +611,7 @@
             /**
              * Store the dropdown element
              */
-            navDropdown = settings.navDropdown;
+            navDropdown = "."+settings.navDropdown;
             if (!_this.querySelector(navDropdown)) {
                 console.warn("couldn't find the specified navDropdown element");
                 return;
@@ -586,7 +620,7 @@
             /**
              * Store the dropdown toggle element
              */
-            navDropdownToggle = settings.navDropdownToggle;
+            navDropdownToggle = "."+settings.navDropdownToggle;
             if (!_this.querySelector(navDropdownToggle)) {
                 console.warn("couldn't find the specified navDropdownToggle element");
                 return;