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

unify backdrops

Browse source
This commit is contained in:
Luke Pulverenti 2016-03-12 02:28:13 -05:00
parent ba749de15d
commit aed49d567d
14 changed files with 420 additions and 296 deletions
Download patch file Download diff file Expand all files Collapse all files

8
dashboard-ui/bower_components/emby-webcomponents/.bower.json vendored
View file

@ -16,12 +16,12 @@
},
"devDependencies": {},
"ignore": [],
"version": "1.1.37",
"_release": "1.1.37",
"version": "1.1.42",
"_release": "1.1.42",
"_resolution": {
"type": "version",
"tag": "1.1.37",
"commit": "7235838b8cff53a9bb2aea7d6c6418160728cd3a"
"tag": "1.1.42",
"commit": "324128b974bbf7d7e011a2add0beae2c0611f9aa"
},
"_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "~1.1.5",

236
dashboard-ui/bower_components/emby-webcomponents/backdrop/backdrop.js vendored Normal file
View file

@ -0,0 +1,236 @@
define(['browser', 'css!./style'], function (browser) {
function enableAnimation() {
if (browser.mobile) {
return false;
}
return true;
}
function backdrop() {
var self = this;
var isDestroyed;
self.load = function (url, parent, existingBackdropImage) {
var img = new Image();
img.onload = function () {
if (isDestroyed) {
return;
}
var backdropImage = document.createElement('div');
backdropImage.classList.add('backdropImage');
backdropImage.classList.add('displayingBackdropImage');
backdropImage.style.backgroundImage = "url('" + url + "')";
backdropImage.setAttribute('data-url', url);
parent.appendChild(backdropImage);
if (!enableAnimation()) {
if (existingBackdropImage && existingBackdropImage.parentNode) {
existingBackdropImage.parentNode.removeChild(existingBackdropImage);
}
internalBackdrop(true);
return;
}
var animation = fadeIn(backdropImage, 1);
currentAnimation = animation;
animation.onfinish = function () {
if (animation == currentAnimation) {
currentAnimation = null;
}
if (existingBackdropImage && existingBackdropImage.parentNode) {
existingBackdropImage.parentNode.removeChild(existingBackdropImage);
}
};
internalBackdrop(true);
};
img.src = url;
};
var currentAnimation;
function fadeIn(elem, iterations) {
var keyframes = [
{ opacity: '0', offset: 0 },
{ opacity: '1', offset: 1 }];
var timing = { duration: 800, iterations: iterations, easing: 'ease-in' };
return elem.animate(keyframes, timing);
}
function cancelAnimation() {
var animation = currentAnimation;
if (animation) {
console.log('Cancelling backdrop animation');
animation.cancel();
currentAnimation = null;
}
}
self.destroy = function () {
isDestroyed = true;
cancelAnimation();
};
}
var backdropContainer;
function getBackdropContainer() {
if (!backdropContainer) {
backdropContainer = document.querySelector('.backdropContainer');
}
if (!backdropContainer) {
backdropContainer = document.createElement('div');
backdropContainer.classList.add('backdropContainer');
document.body.insertBefore(backdropContainer, document.body.firstChild);
}
return backdropContainer;
}
function clearBackdrop(clearAll) {
if (currentLoadingBackdrop) {
currentLoadingBackdrop.destroy();
currentLoadingBackdrop = null;
}
var elem = getBackdropContainer();
elem.innerHTML = '';
if (clearAll) {
hasExternalBackdrop = false;
}
internalBackdrop(false);
}
var skinContainer;
function setSkinContainerBackgroundEnabled() {
if (!skinContainer) {
skinContainer = document.querySelector('.skinContainer');
}
if (hasInternalBackdrop || hasExternalBackdrop) {
skinContainer.classList.add('withBackdrop');
} else {
skinContainer.classList.remove('withBackdrop');
}
}
var hasInternalBackdrop;
function internalBackdrop(enabled) {
hasInternalBackdrop = enabled;
setSkinContainerBackgroundEnabled();
}
var hasExternalBackdrop;
function externalBackdrop(enabled) {
hasExternalBackdrop = enabled;
setSkinContainerBackgroundEnabled();
}
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
var currentLoadingBackdrop;
function setBackdropImage(url) {
if (currentLoadingBackdrop) {
currentLoadingBackdrop.destroy();
currentLoadingBackdrop = null;
}
var elem = getBackdropContainer();
var existingBackdropImage = elem.querySelector('.displayingBackdropImage');
if (existingBackdropImage && existingBackdropImage.getAttribute('data-url') == url) {
if (existingBackdropImage.getAttribute('data-url') == url) {
return;
}
existingBackdropImage.classList.remove('displayingBackdropImage');
}
var instance = new backdrop();
instance.load(url, elem, existingBackdropImage);
currentLoadingBackdrop = instance;
}
function setBackdrops(items) {
var images = items.map(function (i) {
if (i.BackdropImageTags && i.BackdropImageTags.length > 0) {
return {
id: i.Id,
tag: i.BackdropImageTags[0],
serverId: i.ServerId
};
}
if (i.ParentBackdropItemId && i.ParentBackdropImageTags && i.ParentBackdropImageTags.length) {
return {
id: i.ParentBackdropItemId,
tag: i.ParentBackdropImageTags[0],
serverId: i.ServerId
};
}
return null;
}).filter(function (i) {
return i != null;
});
if (images.length) {
var index = getRandom(0, images.length - 1);
var item = images[index];
require(['connectionManager'], function (connectionManager) {
var apiClient = connectionManager.getApiClient(item.serverId);
var imgUrl = apiClient.getScaledImageUrl(item.id, {
type: "Backdrop",
tag: item.tag,
//maxWidth: window.innerWidth,
quality: 100
});
setBackdrop(imgUrl);
});
} else {
clearBackdrop();
}
}
function setBackdrop(url) {
if (url) {
setBackdropImage(url);
} else {
clearBackdrop();
}
}
return {
setBackdrops: setBackdrops,
setBackdrop: setBackdrop,
clear: clearBackdrop,
externalBackdrop: externalBackdrop
};
});

11
dashboard-ui/bower_components/emby-webcomponents/backdrop/style.css vendored Normal file
View file

@ -0,0 +1,11 @@
.backdropImage {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

44
dashboard-ui/bower_components/emby-webcomponents/focusmanager.js vendored
View file

@ -120,36 +120,37 @@ define([], function () {
return elem;
}
function getOffset(elem, doc) {
function getWindowData(win, documentElement) {
return {
pageYOffset: win.pageYOffset,
pageXOffset: win.pageXOffset,
clientTop: documentElement.clientTop,
clientLeft: documentElement.clientLeft
};
}
function getOffset(elem, windowData) {
var box = { top: 0, left: 0 };
if (!doc) {
return box;
}
var docElem = doc.documentElement;
// Support: BlackBerry 5, iOS 3 (original iPhone)
// If we don't have gBCR, just use 0,0 rather than error
if (elem.getBoundingClientRect) {
box = elem.getBoundingClientRect();
}
var win = doc.defaultView;
return {
top: box.top + win.pageYOffset - docElem.clientTop,
left: box.left + win.pageXOffset - docElem.clientLeft
top: box.top + windowData.pageYOffset - windowData.clientTop,
left: box.left + windowData.pageXOffset - windowData.clientLeft
};
}
function getViewportBoundingClientRect(elem) {
function getViewportBoundingClientRect(elem, windowData) {
var doc = elem.ownerDocument;
var offset = getOffset(elem, doc);
var win = doc.defaultView;
var offset = getOffset(elem, windowData);
var posY = offset.top - win.pageXOffset;
var posX = offset.left - win.pageYOffset;
var posY = offset.top - windowData.pageXOffset;
var posX = offset.left - windowData.pageYOffset;
var width = elem.offsetWidth;
var height = elem.offsetHeight;
@ -162,11 +163,6 @@ define([], function () {
right: posX + width,
bottom: posY + height
};
var scrollLeft = (((t = document.documentElement) || (t = document.body.parentNode))
&& typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft;
var scrollTop = (((t = document.documentElement) || (t = document.body.parentNode))
&& typeof t.scrollTop == 'number' ? t : document.body).scrollTop;
}
function nav(activeElement, direction) {
@ -186,7 +182,9 @@ define([], function () {
var focusableContainer = parentWithClass(activeElement, 'focusable');
var rect = getViewportBoundingClientRect(activeElement);
var doc = activeElement.ownerDocument;
var windowData = getWindowData(doc.defaultView, doc.documentElement);
var rect = getViewportBoundingClientRect(activeElement, windowData);
var focusableElements = [];
var focusable = container.querySelectorAll(focusableQuery);
@ -205,7 +203,7 @@ define([], function () {
continue;
}
var elementRect = getViewportBoundingClientRect(curr);
var elementRect = getViewportBoundingClientRect(curr, windowData);
switch (direction) {