mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-17 19:08:18 -07:00
update shared components
This commit is contained in:
parent
65326d4155
commit
e004834b2d
@ -16,12 +16,12 @@
|
||||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.3.27",
|
||||
"_release": "1.3.27",
|
||||
"version": "1.3.30",
|
||||
"_release": "1.3.30",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.3.27",
|
||||
"commit": "d50eb817e00a23afb8fd5c5fe5a08745de291951"
|
||||
"tag": "1.3.30",
|
||||
"commit": "0cce51a6d5a1ab91c305ba22a211ee87fdf1bea0"
|
||||
},
|
||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||
"_target": "^1.2.0",
|
||||
|
@ -305,14 +305,8 @@ define([], function () {
|
||||
return intersectsInternal(a1, a2, b1, b2) || intersectsInternal(b1, b2, a1, a2);
|
||||
}
|
||||
|
||||
var enableDebugInfo = false;
|
||||
|
||||
function getNearestElements(elementInfos, options, direction) {
|
||||
|
||||
if (enableDebugInfo) {
|
||||
removeAll();
|
||||
}
|
||||
|
||||
// Get elements and work out x/y points
|
||||
var cache = [],
|
||||
point1x = parseFloat(options.left) || 0,
|
||||
@ -379,10 +373,6 @@ define([], function () {
|
||||
break;
|
||||
}
|
||||
|
||||
if (enableDebugInfo) {
|
||||
addDebugInfo(elem, distX, distY);
|
||||
}
|
||||
|
||||
var distT = Math.sqrt(distX * distX + distY * distY);
|
||||
var distT2 = Math.sqrt(distX2 * distX2 + distY2 * distY2);
|
||||
|
||||
@ -405,36 +395,6 @@ define([], function () {
|
||||
return cache;
|
||||
}
|
||||
|
||||
function addDebugInfo(elem, distX, distY) {
|
||||
|
||||
var div = elem.querySelector('focusInfo');
|
||||
|
||||
if (!div) {
|
||||
div = document.createElement('div');
|
||||
div.classList.add('focusInfo');
|
||||
elem.appendChild(div);
|
||||
|
||||
if (getComputedStyle(elem, null).getPropertyValue('position') == 'static') {
|
||||
elem.style.position = 'relative';
|
||||
}
|
||||
div.style.position = 'absolute';
|
||||
div.style.left = '0';
|
||||
div.style.top = '0';
|
||||
div.style.color = 'white';
|
||||
div.style.backgroundColor = 'red';
|
||||
div.style.padding = '2px';
|
||||
}
|
||||
|
||||
div.innerHTML = Math.round(distX) + ',' + Math.round(distY);
|
||||
}
|
||||
|
||||
function removeAll() {
|
||||
var elems = document.querySelectorAll('.focusInfo');
|
||||
for (var i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].parentNode.removeChild(elems[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function sortNodesX(a, b) {
|
||||
var result = a.distX - b.distX;
|
||||
|
||||
|
@ -2,6 +2,7 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events'], functio
|
||||
|
||||
var thresholdX;
|
||||
var thresholdY;
|
||||
var windowSize;
|
||||
|
||||
function resetThresholds() {
|
||||
|
||||
@ -15,25 +16,36 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events'], functio
|
||||
|
||||
thresholdX = x;
|
||||
thresholdY = y;
|
||||
resetWindowSize();
|
||||
}
|
||||
|
||||
resetThresholds();
|
||||
|
||||
window.addEventListener("orientationchange", resetThresholds);
|
||||
window.addEventListener('resize', resetThresholds);
|
||||
events.on(layoutManager, 'modechange', resetThresholds);
|
||||
|
||||
var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel');
|
||||
|
||||
function isVisible(elem, windowSize) {
|
||||
function resetWindowSize() {
|
||||
windowSize = {
|
||||
innerHeight: window.innerHeight,
|
||||
innerWidth: window.innerWidth
|
||||
};
|
||||
}
|
||||
resetThresholds();
|
||||
|
||||
function isVisible(elem) {
|
||||
return visibleinviewport(elem, true, thresholdX, thresholdY, windowSize);
|
||||
}
|
||||
|
||||
var self = {};
|
||||
|
||||
function fillImage(elem) {
|
||||
var source = elem.getAttribute('data-src');
|
||||
function fillImage(elem, source, enableEffects) {
|
||||
|
||||
if (!source) {
|
||||
source = elem.getAttribute('data-src');
|
||||
}
|
||||
if (source) {
|
||||
if (self.enableFade) {
|
||||
if (self.enableFade && enableEffects !== false) {
|
||||
imageFetcher.loadImage(elem, source).then(fadeIn);
|
||||
} else {
|
||||
imageFetcher.loadImage(elem, source);
|
||||
@ -44,10 +56,6 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events'], functio
|
||||
|
||||
function fadeIn(elem) {
|
||||
|
||||
if (elem.classList.contains('noFade')) {
|
||||
return;
|
||||
}
|
||||
|
||||
var keyframes = [
|
||||
{ opacity: '0', offset: 0 },
|
||||
{ opacity: '1', offset: 1 }];
|
||||
@ -93,11 +101,6 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events'], functio
|
||||
var anyFound = false;
|
||||
var out = false;
|
||||
|
||||
var windowSize = {
|
||||
innerHeight: window.innerHeight,
|
||||
innerWidth: window.innerWidth
|
||||
};
|
||||
|
||||
// TODO: This out construct assumes left to right, top to bottom
|
||||
|
||||
for (var i = 0, length = images.length; i < length; i++) {
|
||||
@ -106,7 +109,7 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events'], functio
|
||||
return;
|
||||
}
|
||||
var img = images[i];
|
||||
if (!out && isVisible(img, windowSize)) {
|
||||
if (!out && isVisible(img)) {
|
||||
anyFound = true;
|
||||
fillImage(img);
|
||||
} else {
|
||||
@ -116,6 +119,10 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events'], functio
|
||||
}
|
||||
remaining.push(img);
|
||||
}
|
||||
|
||||
if (out) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
images = remaining;
|
||||
@ -157,29 +164,11 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events'], functio
|
||||
unveil();
|
||||
}
|
||||
|
||||
function fillImages(elems) {
|
||||
|
||||
for (var i = 0, length = elems.length; i < length; i++) {
|
||||
var elem = elems[0];
|
||||
var source = elem.getAttribute('data-src');
|
||||
if (source) {
|
||||
ImageStore.setImageInto(elem, source);
|
||||
elem.setAttribute("data-src", '');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function lazyChildren(elem) {
|
||||
|
||||
unveilElements(elem.getElementsByClassName('lazy'));
|
||||
}
|
||||
|
||||
function lazyImage(elem, url) {
|
||||
|
||||
elem.setAttribute('data-src', url);
|
||||
fillImages([elem]);
|
||||
}
|
||||
|
||||
function getPrimaryImageAspectRatio(items) {
|
||||
|
||||
var values = [];
|
||||
@ -245,14 +234,8 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events'], functio
|
||||
}
|
||||
}
|
||||
|
||||
function lazyImage(elem, url) {
|
||||
|
||||
elem.setAttribute('data-src', url);
|
||||
fillImage(elem);
|
||||
}
|
||||
|
||||
self.fillImages = fillImages;
|
||||
self.lazyImage = lazyImage;
|
||||
self.lazyImage = fillImage;
|
||||
self.lazyChildren = lazyChildren;
|
||||
self.getPrimaryImageAspectRatio = getPrimaryImageAspectRatio;
|
||||
|
||||
|
@ -1,12 +1,16 @@
|
||||
define(['MaterialSpinner', 'css!./loading'], function () {
|
||||
|
||||
var loadingElem;
|
||||
|
||||
return {
|
||||
show: function () {
|
||||
var elem = document.querySelector('.docspinner');
|
||||
var elem = loadingElem;
|
||||
|
||||
if (!elem) {
|
||||
|
||||
elem = document.createElement("div");
|
||||
loadingElem = elem;
|
||||
|
||||
elem.classList.add('docspinner');
|
||||
elem.classList.add('mdl-spinner');
|
||||
elem.classList.add('mdl-js-spinner');
|
||||
@ -19,7 +23,7 @@ define(['MaterialSpinner', 'css!./loading'], function () {
|
||||
elem.classList.remove('loadingHide');
|
||||
},
|
||||
hide: function () {
|
||||
var elem = document.querySelector('.docspinner');
|
||||
var elem = loadingElem;
|
||||
|
||||
if (elem) {
|
||||
|
||||
|
@ -360,10 +360,12 @@ define(['datetime', 'globalize', 'embyRouter', 'html!./../icons/mediainfo.html',
|
||||
|
||||
function afterFill(elem, item, options) {
|
||||
|
||||
if (options.endsAt !== false) {
|
||||
var endsAtElem = elem.querySelector('.endsAt');
|
||||
if (endsAtElem) {
|
||||
dynamicEndTime(endsAtElem, item);
|
||||
}
|
||||
}
|
||||
|
||||
var lnkChannel = elem.querySelector('.lnkChannel');
|
||||
if (lnkChannel) {
|
||||
|
@ -388,7 +388,7 @@
|
||||
|
||||
if (recordingCreated) {
|
||||
require(['toast'], function (toast) {
|
||||
toast(globalize.translate('RecordingScheduled'));
|
||||
toast(globalize.translate('sharedcomponents#RecordingScheduled'));
|
||||
});
|
||||
resolve();
|
||||
} else {
|
||||
|
@ -4,6 +4,7 @@ define(['browser'], function (browser) {
|
||||
var pageContainerCount = allPages.length;
|
||||
var animationDuration = 500;
|
||||
var allowAnimation = true;
|
||||
var selectedPageIndex = -1;
|
||||
|
||||
function enableAnimation() {
|
||||
|
||||
@ -33,9 +34,13 @@ define(['browser'], function (browser) {
|
||||
pageIndex = 0;
|
||||
}
|
||||
|
||||
var html = '<div class="page-view" data-type="' + (options.type || '') + '" data-url="' + options.url + '">';
|
||||
html += options.view;
|
||||
html += '</div>';
|
||||
var view = document.createElement('div');
|
||||
view.classList.add('page-view');
|
||||
if (options.type) {
|
||||
view.setAttribute('data-type', options.type);
|
||||
}
|
||||
view.setAttribute('data-url', options.url);
|
||||
view.innerHTML = options.view;
|
||||
|
||||
var animatable = allPages[pageIndex];
|
||||
|
||||
@ -43,12 +48,11 @@ define(['browser'], function (browser) {
|
||||
|
||||
if (currentPage) {
|
||||
triggerDestroy(currentPage);
|
||||
animatable.replaceChild(view, currentPage);
|
||||
} else {
|
||||
animatable.appendChild(view);
|
||||
}
|
||||
|
||||
animatable.innerHTML = html;
|
||||
|
||||
var view = animatable.querySelector('.page-view');
|
||||
|
||||
if (onBeforeChange) {
|
||||
onBeforeChange(view, false, options);
|
||||
}
|
||||
@ -58,6 +62,7 @@ define(['browser'], function (browser) {
|
||||
// animate here
|
||||
return animate(animatable, previousAnimatable, options.transition, options.isBack).then(function () {
|
||||
|
||||
selectedPageIndex = pageIndex;
|
||||
if (!options.cancel && previousAnimatable) {
|
||||
afterAnimate(allPages, pageIndex);
|
||||
}
|
||||
@ -122,7 +127,7 @@ define(['browser'], function (browser) {
|
||||
animations.push(oldAnimatedPage.animate([
|
||||
|
||||
{ transform: 'none', offset: 0 },
|
||||
{ transform: 'translateX(' + destination + ')', offset: 1 }
|
||||
{ transform: 'translate3d(' + destination + ', 0, 0)', offset: 1 }
|
||||
|
||||
], timings));
|
||||
}
|
||||
@ -133,7 +138,7 @@ define(['browser'], function (browser) {
|
||||
|
||||
animations.push(newAnimatedPage.animate([
|
||||
|
||||
{ transform: 'translateX(' + start + ')', offset: 0 },
|
||||
{ transform: 'translate3d(' + start + ', 0, 0)', offset: 0 },
|
||||
{ transform: 'none', offset: 1 }
|
||||
|
||||
], timings));
|
||||
@ -215,13 +220,8 @@ define(['browser'], function (browser) {
|
||||
}
|
||||
|
||||
function getSelectedIndex(allPages) {
|
||||
for (var i = 0, length = allPages.length; i < length; i++) {
|
||||
if (!allPages[i].classList.contains('hide')) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
|
||||
return -1;
|
||||
return selectedPageIndex;
|
||||
}
|
||||
|
||||
function tryRestoreView(options) {
|
||||
@ -232,7 +232,7 @@ define(['browser'], function (browser) {
|
||||
if (view) {
|
||||
|
||||
var index = -1;
|
||||
var pages = document.querySelectorAll('.mainAnimatedPage');
|
||||
var pages = allPages;
|
||||
for (var i = 0, length = pages.length; i < length; i++) {
|
||||
if (pages[i] == page) {
|
||||
index = i;
|
||||
@ -251,7 +251,6 @@ define(['browser'], function (browser) {
|
||||
var animatable = allPages[index];
|
||||
var selected = getSelectedIndex(allPages);
|
||||
var previousAnimatable = selected == -1 ? null : allPages[selected];
|
||||
var view = animatable.querySelector('.page-view');
|
||||
|
||||
if (onBeforeChange) {
|
||||
onBeforeChange(view, true, options);
|
||||
@ -261,6 +260,7 @@ define(['browser'], function (browser) {
|
||||
|
||||
return animate(animatable, previousAnimatable, options.transition, options.isBack).then(function () {
|
||||
|
||||
selectedPageIndex = index;
|
||||
if (!options.cancel && previousAnimatable) {
|
||||
afterAnimate(allPages, index);
|
||||
}
|
||||
|
@ -30,14 +30,14 @@
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"ignore": [],
|
||||
"homepage": "https://github.com/polymerelements/iron-a11y-keys-behavior",
|
||||
"homepage": "https://github.com/PolymerElements/iron-a11y-keys-behavior",
|
||||
"_release": "1.1.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.1.2",
|
||||
"commit": "0c2330c229a6fd3d200e2b84147ec6f94f17c22d"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-a11y-keys-behavior.git",
|
||||
"_source": "git://github.com/PolymerElements/iron-a11y-keys-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/iron-a11y-keys-behavior"
|
||||
"_originalSource": "PolymerElements/iron-a11y-keys-behavior"
|
||||
}
|
@ -34,6 +34,6 @@
|
||||
"commit": "11c987b2eb3c73b388a79fc8aaea8ca01624f514"
|
||||
},
|
||||
"_source": "git://github.com/Polymer/polymer.git",
|
||||
"_target": "^1.1.0",
|
||||
"_target": "^1.2.0",
|
||||
"_originalSource": "Polymer/polymer"
|
||||
}
|
@ -250,7 +250,7 @@
|
||||
height: 2px;
|
||||
transition: all .2s cubic-bezier(.4,0,1,1);
|
||||
right: 0;
|
||||
transform: translateX(-100%);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
border-radius: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
@ -243,7 +243,7 @@
|
||||
|
||||
function fadeInRight(elem) {
|
||||
|
||||
var pct = browserInfo.mobile ? '1%' : '0.5%';
|
||||
var pct = browserInfo.mobile ? '1.5%' : '0.5%';
|
||||
|
||||
var keyframes = [
|
||||
{ opacity: '0', transform: 'translate3d(' + pct + ', 0, 0)', offset: 0 },
|
||||
@ -3390,9 +3390,8 @@
|
||||
tag: item.BackdropImageTags[0]
|
||||
});
|
||||
|
||||
itemBackdropElement.classList.add('noFade');
|
||||
itemBackdropElement.classList.remove('noBackdrop');
|
||||
ImageLoader.lazyImage(itemBackdropElement, imgUrl);
|
||||
ImageLoader.lazyImage(itemBackdropElement, imgUrl, false);
|
||||
hasbackdrop = true;
|
||||
}
|
||||
else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
|
||||
@ -3404,9 +3403,8 @@
|
||||
maxWidth: screenWidth
|
||||
});
|
||||
|
||||
itemBackdropElement.classList.add('noFade');
|
||||
itemBackdropElement.classList.remove('noBackdrop');
|
||||
ImageLoader.lazyImage(itemBackdropElement, imgUrl);
|
||||
ImageLoader.lazyImage(itemBackdropElement, imgUrl, false);
|
||||
hasbackdrop = true;
|
||||
}
|
||||
else {
|
||||
|
Loading…
Reference in New Issue
Block a user