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

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

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

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

@ -1118,7 +1118,8 @@
target: navDrawerElement, target: navDrawerElement,
onChange: onMainDrawerSelect, onChange: onMainDrawerSelect,
width: drawerWidth, 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-tabs", ['webcomponentsjs', "html!" + bowerPath + "/paper-tabs/paper-tabs.html"]);
define("paper-button", ["html!" + bowerPath + "/paper-button/paper-button.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-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-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-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"]); define("paper-toggle-button", ['webcomponentsjs', "html!" + bowerPath + "/paper-toggle-button/paper-toggle-button.html"]);