mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

update nav drawer edge swipe

Browse source
This commit is contained in:
Luke Pulverenti 2016-06-21 13:26:32 -04:00
parent 2d822ccb6f
commit f64a03b3f4
3 changed files with 92 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

100
dashboard-ui/components/navdrawer/navdrawer.js
View file

@ -1,9 +1,9 @@
define(['hammer', 'css!./navdrawer'], function (Hammer) {
return function (options) {
var self,
defaults,
menuClassName = '',
mask,
maskHammer,
menuHammer,
@ -34,14 +34,6 @@
this.initialize();
};
TouchMenuLA.prototype.setDefaultsOptions = function () {
for (var key in defaults) {
if (!options[key]) {
options[key] = defaults[key];
}
}
};
TouchMenuLA.prototype.initElements = function () {
options.target.classList.add('touch-menu-la');
options.target.style.width = options.width + 'px';
@ -63,19 +55,13 @@
}
};
function disableEvent(e) {
e.preventDefault();
e.stopPropagation();
}
TouchMenuLA.prototype.touchStartMenu = function () {
menuHammer.on('panstart', function (ev) {
function onPanStart(ev) {
options.target.classList.remove('transition');
options.target.classList.add('open');
velocity = Math.abs(ev.velocity);
});
menuHammer.on('panmove', function (ev) {
}
function onPanMove(ev) {
velocity = Math.abs(ev.velocity);
// Depending on the deltas, choose X or Y
@ -89,7 +75,6 @@
if (!draggingX && !draggingY && (!isOpen || Math.abs(ev.deltaX) >= 10)) {
draggingX = true;
scrollContainer.addEventListener('scroll', disableEvent);
options.target.classList.add('draggingX');
self.showMask();
} else if (!draggingY) {
@ -100,6 +85,59 @@
newPos = currentPos + ev.deltaX;
self.changeMenuPos();
}
}
function onPanEnd(ev) {
options.target.classList.add('transition');
scrollContainer.removeEventListener('scroll', disableEvent);
draggingX = false;
draggingY = false;
currentPos = ev.deltaX;
self.checkMenuState(ev.deltaX, ev.deltaY);
}
function initEdgeSwipe() {
if (options.disableEdgeSwipe) {
return;
}
var edgeHammer = new Hammer(options.edgeSwipeElement, null);
var isPeeking = false;
edgeHammer.on('panstart', function (ev) {
if (ev.srcEvent.clientX <= options.handleSize && ev.deltaX > 0) {
isPeeking = true;
onPanStart(ev);
}
});
edgeHammer.on('panmove', function (ev) {
if (isPeeking) {
onPanMove(ev);
}
});
edgeHammer.on('panend pancancel', function (ev) {
if (isPeeking) {
isPeeking = false;
onPanEnd(ev);
}
});
}
function disableEvent(e) {
e.preventDefault();
e.stopPropagation();
}
TouchMenuLA.prototype.touchStartMenu = function () {
menuHammer.on('panstart', function (ev) {
onPanStart(ev);
});
menuHammer.on('panmove', function (ev) {
onPanMove(ev);
});
};
@ -125,14 +163,7 @@
};
TouchMenuLA.prototype.touchEndMenu = function () {
menuHammer.on('panend pancancel', function (ev) {
options.target.classList.add('transition');
scrollContainer.removeEventListener('scroll', disableEvent);
draggingX = false;
draggingY = false;
currentPos = ev.deltaX;
self.checkMenuState(ev.deltaX, ev.deltaY);
});
menuHammer.on('panend pancancel', onPanEnd);
};
TouchMenuLA.prototype.clickMaskClose = function () {
@ -222,10 +253,6 @@
mask.classList.remove('backdrop');
};
TouchMenuLA.prototype.setMenuClassName = function () {
menuClassName = options.target.className;
};
TouchMenuLA.prototype.invoke = function (fn) {
if (fn) {
fn.apply(self);
@ -233,11 +260,11 @@
};
TouchMenuLA.prototype.initialize = function () {
if (options.target) {
options = Object.assign(defaults, options || {});
menuHammer = Hammer(options.target, null);
self.setDefaultsOptions();
self.setMenuClassName();
self.initElements();
self.touchStartMenu();
@ -248,9 +275,8 @@
if (!options.disableMask) {
self.clickMaskClose();
}
} else {
console.error('TouchMenuLA: The option \'target\' is required.');
}
initEdgeSwipe();
};
return new TouchMenuLA();

3
dashboard-ui/scripts/librarymenu.js
View file

@ -1118,7 +1118,8 @@
target: navDrawerElement,
onChange: onMainDrawerSelect,
width: drawerWidth,
disableEdgeSwipe: disableEdgeSwipe
disableEdgeSwipe: disableEdgeSwipe,
edgeSwipeElement: document.querySelector('.mainDrawerPanelContent')
};
}

1
dashboard-ui/scripts/site.js
View file

@ -1879,7 +1879,6 @@ var AppInfo = {};
define("paper-tabs", ['webcomponentsjs', "html!" + bowerPath + "/paper-tabs/paper-tabs.html"]);
define("paper-button", ["html!" + bowerPath + "/paper-button/paper-button.html"]);
define("paper-icon-button", ["html!" + bowerPath + "/paper-icon-button/paper-icon-button.html"]);
define("paper-drawer-panel", ['webcomponentsjs', "html!" + bowerPath + "/paper-drawer-panel/paper-drawer-panel.html"]);
define("paper-radio-group", ["html!" + bowerPath + "/paper-radio-group/paper-radio-group.html"]);
define("paper-radio-button", ['webcomponentsjs', "html!" + bowerPath + "/paper-radio-button/paper-radio-button.html"]);
define("paper-toggle-button", ['webcomponentsjs', "html!" + bowerPath + "/paper-toggle-button/paper-toggle-button.html"]);