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

Browse source
This commit is contained in:
Luke Pulverenti 2016-06-21 11:26:15 -04:00
parent 94f766b696
commit f9b4288b08
2 changed files with 51 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

22
dashboard-ui/components/navdrawer/navdrawer.css
View file

@ -8,13 +8,14 @@
will-change: transform; will-change: transform;
contain: layout style; contain: layout style;
display: flex; display: flex;
transition: transform ease-out 0.1s; transition: transform ease-out 60ms;
z-index: 1099;
} }
.touch-menu-la.transition { .touch-menu-la.transition {
/*transition: transform 0.3s ease-out;*/ /*transition: transform 0.3s ease-out;*/
transition: -webkit-transform ease-out 0.3s; transition: -webkit-transform ease-out 280ms;
transition: transform ease-out 0.3s; transition: transform ease-out 280ms;
/*transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s; /*transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;
transition: transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;*/ transition: transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;*/
} }
@ -31,13 +32,20 @@
} }
.tmla-mask { .tmla-mask {
width: 100%; position: fixed;
height: 100%;
position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0;
bottom: 0;
background-color: #000; background-color: #000;
opacity: 0.0; opacity: 0.0;
z-index: -1; z-index: 1098;
transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s; transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
background-color: rgba(0, 0, 0, 0.3);
visibility: hidden;
} }
.tmla-mask.backdrop {
visibility: visible;
opacity: 1;
}

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

@ -5,7 +5,6 @@
defaults, defaults,
menuClassName = '', menuClassName = '',
mask, mask,
handle,
maskHammer, maskHammer,
menuHammer, menuHammer,
newPos = 0, newPos = 0,
@ -25,11 +24,8 @@
defaults = { defaults = {
width: 280, width: 280,
zIndex: 99999,
disableSlide: false,
handleSize: 30, handleSize: 30,
disableMask: false, disableMask: false,
disableMask: false,
maxMaskOpacity: 0.5 maxMaskOpacity: 0.5
}; };
@ -47,16 +43,17 @@
}; };
TouchMenuLA.prototype.initElements = function () { TouchMenuLA.prototype.initElements = function () {
options.target.style.zIndex = options.zIndex; options.target.classList.add('touch-menu-la');
options.target.style.width = options.width + 'px'; options.target.style.width = options.width + 'px';
options.target.style.left = -options.width + 'px'; options.target.style.left = -options.width + 'px';
handle = document.createElement('div'); if (!options.disableEdgeSwipe) {
handle.className = "tmla-handle"; var handle = document.createElement('div');
handle.style.width = options.handleSize + 'px'; handle.className = "tmla-handle";
handle.style.right = -options.handleSize + 'px'; handle.style.width = options.handleSize + 'px';
handle.style.right = -options.handleSize + 'px';
options.target.appendChild(handle); options.target.appendChild(handle);
}
if (!options.disableMask) { if (!options.disableMask) {
mask = document.createElement('div'); mask = document.createElement('div');
@ -81,15 +78,18 @@
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
var isOpen = self.visible;
// If it's already open, then treat any right-swipe as vertical pan // If it's already open, then treat any right-swipe as vertical pan
if (!draggingX && ev.deltaX > 0) { if (isOpen && !draggingX && ev.deltaX > 0) {
draggingY = true; draggingY = true;
} }
if (!draggingX && !draggingY && 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'); options.target.classList.add('draggingX');
self.showMask();
} else if (!draggingY) { } else if (!draggingY) {
draggingY = true; draggingY = true;
@ -104,36 +104,22 @@
TouchMenuLA.prototype.animateToPosition = function (pos) { TouchMenuLA.prototype.animateToPosition = function (pos) {
if (pos) { requestAnimationFrame(function() {
options.target.style.transform = 'translate3d(' + pos + 'px, 0, 0)'; if (pos) {
options.target.style.WebkitTransform = 'translate3d(' + pos + 'px, 0, 0)'; options.target.style.transform = 'translate3d(' + pos + 'px, 0, 0)';
options.target.style.MozTransform = 'translate3d(' + pos + 'px, 0, 0)'; options.target.style.WebkitTransform = 'translate3d(' + pos + 'px, 0, 0)';
} else { options.target.style.MozTransform = 'translate3d(' + pos + 'px, 0, 0)';
options.target.style.transform = 'none'; } else {
options.target.style.WebkitTransform = 'none'; options.target.style.transform = 'none';
options.target.style.MozTransform = 'none'; options.target.style.WebkitTransform = 'none';
} options.target.style.MozTransform = 'none';
}
});
}; };
TouchMenuLA.prototype.changeMenuPos = function () { TouchMenuLA.prototype.changeMenuPos = function () {
if (newPos <= options.width) { if (newPos <= options.width) {
this.animateToPosition(newPos); this.animateToPosition(newPos);
if (!options.disableMask) {
this.setMaskOpacity(newPos);
}
}
};
TouchMenuLA.prototype.setMaskOpacity = function (newMenuPos) {
var opacity = parseFloat((newMenuPos / options.width) * options.maxMaskOpacity);
mask.style.opacity = opacity;
if (opacity === 0) {
mask.style.zIndex = -1;
} else {
mask.style.zIndex = options.zIndex - 1;
} }
}; };
@ -175,18 +161,20 @@
currentPos = options.width; currentPos = options.width;
this.isVisible = true; this.isVisible = true;
options.target.classList.add('open');
self.showMask(); self.showMask();
self.invoke(options.onOpen); self.invoke(options.onChange);
}; };
TouchMenuLA.prototype.close = function () { TouchMenuLA.prototype.close = function () {
this.animateToPosition(0); this.animateToPosition(0);
currentPos = 0; currentPos = 0;
self.isVisible = false; self.isVisible = false;
options.target.classList.remove('open');
self.hideMask(); self.hideMask();
self.invoke(options.onClose); self.invoke(options.onChange);
}; };
TouchMenuLA.prototype.toggle = function () { TouchMenuLA.prototype.toggle = function () {
@ -224,13 +212,13 @@
}; };
TouchMenuLA.prototype.showMask = function () { TouchMenuLA.prototype.showMask = function () {
mask.style.opacity = options.maxMaskOpacity;
mask.style.zIndex = options.zIndex - 1; mask.classList.add('backdrop');
}; };
TouchMenuLA.prototype.hideMask = function () { TouchMenuLA.prototype.hideMask = function () {
mask.style.opacity = 0;
mask.style.zIndex = -1; mask.classList.remove('backdrop');
}; };
TouchMenuLA.prototype.setMenuClassName = function () { TouchMenuLA.prototype.setMenuClassName = function () {
@ -251,12 +239,10 @@
self.setMenuClassName(); self.setMenuClassName();
self.initElements(); self.initElements();
if (!options.disableSlide) { self.touchStartMenu();
self.touchStartMenu(); self.touchEndMenu();
self.touchEndMenu(); self.eventStartMask();
self.eventStartMask(); self.eventEndMask();
self.eventEndMask();
}
if (!options.disableMask) { if (!options.disableMask) {
self.clickMaskClose(); self.clickMaskClose();