Skip to content

Ability to disable on small screens #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Ability to disable on small screens #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
405a58d
Ability to disable on small screens
kamiljw Mar 28, 2018
7007b4d
Update README.md
kamiljw Mar 28, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ navDropdownToggleClassName: "nav__dropdown-toggle", // class used for the dropdo
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
turnOffPoint: 0, //amount of pixels when plugin should be disabled (all menu items should be outside the dropdown)
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.
Expand Down
45 changes: 25 additions & 20 deletions src/priority-nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
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.

turnOffPoint: 500, //amount of pixels when plugin should be disabled (all menu items should be outside dropdown)
//Callbacks
moved: function () {
},
Expand Down Expand Up @@ -305,25 +305,30 @@
/**
* Keep executing until all menu items that are overflowing are moved
*/
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);
}
if(viewportWidth > settings.turnOffPoint) {
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] && viewportWidth > settings.breakPoint) {
//move item to menu
priorityNav.toMenu(_this, identifier);
//update dropdownToggle label
if(viewportWidth > settings.breakPoint) updateLabel(_this, identifier, settings.navDropdownLabel);
/**
* Keep executing until all menu items that are able to move back are moved
*/
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);
}
} else {
while(breaks[identifier].length > 0) {
priorityNav.toMenu(_this, identifier);
}
}

/**
* If there are no items in dropdown hide dropdown
*/
Expand Down Expand Up @@ -523,7 +528,7 @@
* Remove when clicked outside dropdown
*/
document.addEventListener("click", function (event) {
if (!getClosest(event.target, "."+settings.navDropdownClassName) && event.target !== _this.querySelector(navDropdownToggle)) {
if (!getClosest(event.target, "."+settings.navDropdownClassName) && event.target !== _this.querySelector(navDropdownToggle) && event.target.parentNode !== _this.querySelector(navDropdownToggle)) {
_this.querySelector(navDropdown).classList.remove("show");
_this.querySelector(navDropdownToggle).classList.remove("is-open");
_this.classList.remove("is-open");
Expand Down Expand Up @@ -715,4 +720,4 @@
*/
return priorityNav;

});
});