mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
minify resources
This commit is contained in:
Luke Pulverenti
parent
8a6884abef
commit
661eeac16e
201 changed files with 203 additions and 52376 deletions
|
|
@ -1,305 +1 @@
|
|||
define(['browser', 'css!./navdrawer', 'scrollStyles'], function (browser) {
|
||||
'use strict';
|
||||
|
||||
return function (options) {
|
||||
|
||||
var self,
|
||||
defaults,
|
||||
mask,
|
||||
maskHammer,
|
||||
menuHammer,
|
||||
newPos = 0,
|
||||
currentPos = 0,
|
||||
startPoint = 0,
|
||||
countStart = 0,
|
||||
velocity = 0.0;
|
||||
|
||||
options.target.classList.add('transition');
|
||||
var draggingX;
|
||||
var draggingY;
|
||||
|
||||
var scrollContainer = options.target.querySelector('.scrollContainer');
|
||||
scrollContainer.classList.add('smoothScrollY');
|
||||
|
||||
var TouchMenuLA = function () {
|
||||
self = this;
|
||||
|
||||
defaults = {
|
||||
width: 260,
|
||||
handleSize: 30,
|
||||
disableMask: false,
|
||||
maxMaskOpacity: 0.5
|
||||
};
|
||||
|
||||
this.isVisible = false;
|
||||
|
||||
this.initialize();
|
||||
};
|
||||
|
||||
TouchMenuLA.prototype.initElements = function (Hammer) {
|
||||
options.target.classList.add('touch-menu-la');
|
||||
options.target.style.width = options.width + 'px';
|
||||
options.target.style.left = -options.width + 'px';
|
||||
|
||||
if (!options.disableMask) {
|
||||
mask = document.createElement('div');
|
||||
mask.className = 'tmla-mask';
|
||||
document.body.appendChild(mask);
|
||||
|
||||
if (Hammer) {
|
||||
maskHammer = new Hammer(mask, null);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function onPanStart(ev) {
|
||||
options.target.classList.remove('transition');
|
||||
options.target.classList.add('open');
|
||||
velocity = Math.abs(ev.velocity);
|
||||
}
|
||||
|
||||
function onPanMove(ev) {
|
||||
velocity = Math.abs(ev.velocity);
|
||||
// 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 (isOpen && !draggingX && ev.deltaX > 0) {
|
||||
draggingY = true;
|
||||
}
|
||||
|
||||
if (!draggingX && !draggingY && (!isOpen || Math.abs(ev.deltaX) >= 10)) {
|
||||
draggingX = true;
|
||||
scrollContainer.addEventListener('scroll', disableEvent);
|
||||
self.showMask();
|
||||
|
||||
} else if (!draggingY) {
|
||||
draggingY = true;
|
||||
}
|
||||
|
||||
if (draggingX) {
|
||||
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(Hammer) {
|
||||
if (options.disableEdgeSwipe) {
|
||||
return;
|
||||
}
|
||||
return;
|
||||
require(['hammer-main'], initEdgeSwipeInternal);
|
||||
}
|
||||
|
||||
function initEdgeSwipeInternal(edgeHammer) {
|
||||
var isPeeking = false;
|
||||
|
||||
edgeHammer.on('panstart panmove', function (ev) {
|
||||
|
||||
if (isPeeking) {
|
||||
onPanMove(ev);
|
||||
} else {
|
||||
var srcEvent = ev.srcEvent;
|
||||
var clientX = srcEvent.clientX;
|
||||
if (!clientX) {
|
||||
var touches = srcEvent.touches;
|
||||
if (touches && touches.length) {
|
||||
clientX = touches[0].clientX;
|
||||
}
|
||||
}
|
||||
if (clientX <= options.handleSize) {
|
||||
isPeeking = true;
|
||||
onPanStart(ev);
|
||||
}
|
||||
}
|
||||
});
|
||||
edgeHammer.on('panend pancancel', function (ev) {
|
||||
if (isPeeking) {
|
||||
isPeeking = false;
|
||||
onPanEnd(ev);
|
||||
}
|
||||
});
|
||||
|
||||
self.edgeHammer = edgeHammer;
|
||||
}
|
||||
|
||||
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) {
|
||||
|
||||
requestAnimationFrame(function () {
|
||||
if (pos) {
|
||||
options.target.style.transform = 'translate3d(' + pos + 'px, 0, 0)';
|
||||
} else {
|
||||
options.target.style.transform = 'none';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
TouchMenuLA.prototype.changeMenuPos = function () {
|
||||
if (newPos <= options.width) {
|
||||
this.animateToPosition(newPos);
|
||||
}
|
||||
};
|
||||
|
||||
TouchMenuLA.prototype.touchEndMenu = function () {
|
||||
menuHammer.on('panend pancancel', onPanEnd);
|
||||
};
|
||||
|
||||
TouchMenuLA.prototype.clickMaskClose = function () {
|
||||
mask.addEventListener('click', function () {
|
||||
self.close();
|
||||
});
|
||||
};
|
||||
|
||||
TouchMenuLA.prototype.checkMenuState = function (deltaX, deltaY) {
|
||||
if (velocity >= 1.0) {
|
||||
if (deltaX >= -80 || Math.abs(deltaY) >= 70) {
|
||||
self.open();
|
||||
} else {
|
||||
self.close();
|
||||
}
|
||||
} else {
|
||||
if (newPos >= 100) {
|
||||
self.open();
|
||||
} else {
|
||||
self.close();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
TouchMenuLA.prototype.open = function () {
|
||||
this.animateToPosition(options.width);
|
||||
|
||||
currentPos = options.width;
|
||||
this.isVisible = true;
|
||||
options.target.classList.add('open');
|
||||
|
||||
self.showMask();
|
||||
self.invoke(options.onChange);
|
||||
};
|
||||
|
||||
TouchMenuLA.prototype.close = function () {
|
||||
this.animateToPosition(0);
|
||||
currentPos = 0;
|
||||
self.isVisible = false;
|
||||
options.target.classList.remove('open');
|
||||
|
||||
self.hideMask();
|
||||
self.invoke(options.onChange);
|
||||
};
|
||||
|
||||
TouchMenuLA.prototype.toggle = function () {
|
||||
if (self.isVisible) {
|
||||
self.close();
|
||||
} else {
|
||||
self.open();
|
||||
}
|
||||
};
|
||||
|
||||
TouchMenuLA.prototype.eventStartMask = function () {
|
||||
maskHammer.on('panstart panmove', function (ev) {
|
||||
if (ev.center.x <= options.width && self.isVisible) {
|
||||
countStart++;
|
||||
|
||||
if (countStart == 1) {
|
||||
startPoint = ev.deltaX;
|
||||
}
|
||||
|
||||
if (ev.deltaX < 0) {
|
||||
draggingX = true;
|
||||
newPos = (ev.deltaX - startPoint) + options.width;
|
||||
self.changeMenuPos();
|
||||
velocity = Math.abs(ev.velocity);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
TouchMenuLA.prototype.eventEndMask = function () {
|
||||
maskHammer.on('panend pancancel', function (ev) {
|
||||
self.checkMenuState(ev.deltaX);
|
||||
countStart = 0;
|
||||
});
|
||||
};
|
||||
|
||||
TouchMenuLA.prototype.showMask = function () {
|
||||
|
||||
mask.classList.add('backdrop');
|
||||
};
|
||||
|
||||
TouchMenuLA.prototype.hideMask = function () {
|
||||
|
||||
mask.classList.remove('backdrop');
|
||||
};
|
||||
|
||||
TouchMenuLA.prototype.invoke = function (fn) {
|
||||
if (fn) {
|
||||
fn.apply(self);
|
||||
}
|
||||
};
|
||||
|
||||
function initWithHammer(Hammer) {
|
||||
|
||||
if (Hammer) {
|
||||
menuHammer = Hammer(options.target, null);
|
||||
}
|
||||
|
||||
self.initElements(Hammer);
|
||||
|
||||
if (Hammer) {
|
||||
self.touchStartMenu();
|
||||
self.touchEndMenu();
|
||||
self.eventStartMask();
|
||||
self.eventEndMask();
|
||||
initEdgeSwipe(Hammer);
|
||||
}
|
||||
|
||||
if (!options.disableMask) {
|
||||
self.clickMaskClose();
|
||||
}
|
||||
}
|
||||
|
||||
TouchMenuLA.prototype.initialize = function () {
|
||||
|
||||
options = Object.assign(defaults, options || {});
|
||||
|
||||
// Not ready yet
|
||||
if (browser.edge) {
|
||||
options.disableEdgeSwipe = true;
|
||||
}
|
||||
|
||||
if (browser.touch) {
|
||||
require(['hammer'], initWithHammer);
|
||||
} else {
|
||||
initWithHammer();
|
||||
}
|
||||
};
|
||||
|
||||
return new TouchMenuLA();
|
||||
};
|
||||
});
|
||||
define(["browser","css!./navdrawer","scrollStyles"],function(browser){"use strict";return function(options){function onPanStart(ev){options.target.classList.remove("transition"),options.target.classList.add("open"),velocity=Math.abs(ev.velocity)}function onPanMove(ev){velocity=Math.abs(ev.velocity);var isOpen=self.visible;isOpen&&!draggingX&&ev.deltaX>0&&(draggingY=!0),draggingX||draggingY||isOpen&&!(Math.abs(ev.deltaX)>=10)?draggingY||(draggingY=!0):(draggingX=!0,scrollContainer.addEventListener("scroll",disableEvent),self.showMask()),draggingX&&(newPos=currentPos+ev.deltaX,self.changeMenuPos())}function onPanEnd(ev){options.target.classList.add("transition"),scrollContainer.removeEventListener("scroll",disableEvent),draggingX=!1,draggingY=!1,currentPos=ev.deltaX,self.checkMenuState(ev.deltaX,ev.deltaY)}function initEdgeSwipe(Hammer){options.disableEdgeSwipe}function disableEvent(e){e.preventDefault(),e.stopPropagation()}function initWithHammer(Hammer){Hammer&&(menuHammer=Hammer(options.target,null)),self.initElements(Hammer),Hammer&&(self.touchStartMenu(),self.touchEndMenu(),self.eventStartMask(),self.eventEndMask(),initEdgeSwipe(Hammer)),options.disableMask||self.clickMaskClose()}var self,defaults,mask,maskHammer,menuHammer,newPos=0,currentPos=0,startPoint=0,countStart=0,velocity=0;options.target.classList.add("transition");var draggingX,draggingY,scrollContainer=options.target.querySelector(".scrollContainer");scrollContainer.classList.add("smoothScrollY");var TouchMenuLA=function(){self=this,defaults={width:260,handleSize:30,disableMask:!1,maxMaskOpacity:.5},this.isVisible=!1,this.initialize()};return TouchMenuLA.prototype.initElements=function(Hammer){options.target.classList.add("touch-menu-la"),options.target.style.width=options.width+"px",options.target.style.left=-options.width+"px",options.disableMask||(mask=document.createElement("div"),mask.className="tmla-mask",document.body.appendChild(mask),Hammer&&(maskHammer=new Hammer(mask,null)))},TouchMenuLA.prototype.touchStartMenu=function(){menuHammer.on("panstart",function(ev){onPanStart(ev)}),menuHammer.on("panmove",function(ev){onPanMove(ev)})},TouchMenuLA.prototype.animateToPosition=function(pos){requestAnimationFrame(function(){pos?options.target.style.transform="translate3d("+pos+"px, 0, 0)":options.target.style.transform="none"})},TouchMenuLA.prototype.changeMenuPos=function(){newPos<=options.width&&this.animateToPosition(newPos)},TouchMenuLA.prototype.touchEndMenu=function(){menuHammer.on("panend pancancel",onPanEnd)},TouchMenuLA.prototype.clickMaskClose=function(){mask.addEventListener("click",function(){self.close()})},TouchMenuLA.prototype.checkMenuState=function(deltaX,deltaY){velocity>=1?deltaX>=-80||Math.abs(deltaY)>=70?self.open():self.close():newPos>=100?self.open():self.close()},TouchMenuLA.prototype.open=function(){this.animateToPosition(options.width),currentPos=options.width,this.isVisible=!0,options.target.classList.add("open"),self.showMask(),self.invoke(options.onChange)},TouchMenuLA.prototype.close=function(){this.animateToPosition(0),currentPos=0,self.isVisible=!1,options.target.classList.remove("open"),self.hideMask(),self.invoke(options.onChange)},TouchMenuLA.prototype.toggle=function(){self.isVisible?self.close():self.open()},TouchMenuLA.prototype.eventStartMask=function(){maskHammer.on("panstart panmove",function(ev){ev.center.x<=options.width&&self.isVisible&&(countStart++,1==countStart&&(startPoint=ev.deltaX),ev.deltaX<0&&(draggingX=!0,newPos=ev.deltaX-startPoint+options.width,self.changeMenuPos(),velocity=Math.abs(ev.velocity)))})},TouchMenuLA.prototype.eventEndMask=function(){maskHammer.on("panend pancancel",function(ev){self.checkMenuState(ev.deltaX),countStart=0})},TouchMenuLA.prototype.showMask=function(){mask.classList.add("backdrop")},TouchMenuLA.prototype.hideMask=function(){mask.classList.remove("backdrop")},TouchMenuLA.prototype.invoke=function(fn){fn&&fn.apply(self)},TouchMenuLA.prototype.initialize=function(){options=Object.assign(defaults,options||{}),browser.edge&&(options.disableEdgeSwipe=!0),browser.touch?require(["hammer"],initWithHammer):initWithHammer()},new TouchMenuLA}});
|
||||
Loading…
Add table
Add a link
Reference in a new issue