1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update shared components

This commit is contained in:
Luke Pulverenti 2016-05-15 21:22:22 -04:00
parent 65326d4155
commit e004834b2d
11 changed files with 65 additions and 118 deletions

View file

@ -16,12 +16,12 @@
}, },
"devDependencies": {}, "devDependencies": {},
"ignore": [], "ignore": [],
"version": "1.3.27", "version": "1.3.30",
"_release": "1.3.27", "_release": "1.3.30",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "1.3.27", "tag": "1.3.30",
"commit": "d50eb817e00a23afb8fd5c5fe5a08745de291951" "commit": "0cce51a6d5a1ab91c305ba22a211ee87fdf1bea0"
}, },
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git", "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "^1.2.0", "_target": "^1.2.0",

View file

@ -305,14 +305,8 @@ define([], function () {
return intersectsInternal(a1, a2, b1, b2) || intersectsInternal(b1, b2, a1, a2); return intersectsInternal(a1, a2, b1, b2) || intersectsInternal(b1, b2, a1, a2);
} }
var enableDebugInfo = false;
function getNearestElements(elementInfos, options, direction) { function getNearestElements(elementInfos, options, direction) {
if (enableDebugInfo) {
removeAll();
}
// Get elements and work out x/y points // Get elements and work out x/y points
var cache = [], var cache = [],
point1x = parseFloat(options.left) || 0, point1x = parseFloat(options.left) || 0,
@ -379,10 +373,6 @@ define([], function () {
break; break;
} }
if (enableDebugInfo) {
addDebugInfo(elem, distX, distY);
}
var distT = Math.sqrt(distX * distX + distY * distY); var distT = Math.sqrt(distX * distX + distY * distY);
var distT2 = Math.sqrt(distX2 * distX2 + distY2 * distY2); var distT2 = Math.sqrt(distX2 * distX2 + distY2 * distY2);
@ -405,36 +395,6 @@ define([], function () {
return cache; 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) { function sortNodesX(a, b) {
var result = a.distX - b.distX; var result = a.distX - b.distX;

View file

@ -2,6 +2,7 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events'], functio
var thresholdX; var thresholdX;
var thresholdY; var thresholdY;
var windowSize;
function resetThresholds() { function resetThresholds() {
@ -15,25 +16,36 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events'], functio
thresholdX = x; thresholdX = x;
thresholdY = y; thresholdY = y;
resetWindowSize();
} }
resetThresholds();
window.addEventListener("orientationchange", resetThresholds); window.addEventListener("orientationchange", resetThresholds);
window.addEventListener('resize', resetThresholds);
events.on(layoutManager, 'modechange', resetThresholds); events.on(layoutManager, 'modechange', resetThresholds);
var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel'); 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); return visibleinviewport(elem, true, thresholdX, thresholdY, windowSize);
} }
var self = {}; var self = {};
function fillImage(elem) { function fillImage(elem, source, enableEffects) {
var source = elem.getAttribute('data-src');
if (!source) {
source = elem.getAttribute('data-src');
}
if (source) { if (source) {
if (self.enableFade) { if (self.enableFade && enableEffects !== false) {
imageFetcher.loadImage(elem, source).then(fadeIn); imageFetcher.loadImage(elem, source).then(fadeIn);
} else { } else {
imageFetcher.loadImage(elem, source); imageFetcher.loadImage(elem, source);
@ -44,10 +56,6 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events'], functio
function fadeIn(elem) { function fadeIn(elem) {
if (elem.classList.contains('noFade')) {
return;
}
var keyframes = [ var keyframes = [
{ opacity: '0', offset: 0 }, { opacity: '0', offset: 0 },
{ opacity: '1', offset: 1 }]; { opacity: '1', offset: 1 }];
@ -93,11 +101,6 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events'], functio
var anyFound = false; var anyFound = false;
var out = false; var out = false;
var windowSize = {
innerHeight: window.innerHeight,
innerWidth: window.innerWidth
};
// TODO: This out construct assumes left to right, top to bottom // TODO: This out construct assumes left to right, top to bottom
for (var i = 0, length = images.length; i < length; i++) { for (var i = 0, length = images.length; i < length; i++) {
@ -106,7 +109,7 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events'], functio
return; return;
} }
var img = images[i]; var img = images[i];
if (!out && isVisible(img, windowSize)) { if (!out && isVisible(img)) {
anyFound = true; anyFound = true;
fillImage(img); fillImage(img);
} else { } else {
@ -116,6 +119,10 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events'], functio
} }
remaining.push(img); remaining.push(img);
} }
if (out) {
return;
}
} }
images = remaining; images = remaining;
@ -157,29 +164,11 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events'], functio
unveil(); 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) { function lazyChildren(elem) {
unveilElements(elem.getElementsByClassName('lazy')); unveilElements(elem.getElementsByClassName('lazy'));
} }
function lazyImage(elem, url) {
elem.setAttribute('data-src', url);
fillImages([elem]);
}
function getPrimaryImageAspectRatio(items) { function getPrimaryImageAspectRatio(items) {
var values = []; 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.fillImages = fillImages;
self.lazyImage = lazyImage; self.lazyImage = fillImage;
self.lazyChildren = lazyChildren; self.lazyChildren = lazyChildren;
self.getPrimaryImageAspectRatio = getPrimaryImageAspectRatio; self.getPrimaryImageAspectRatio = getPrimaryImageAspectRatio;

View file

@ -1,12 +1,16 @@
define(['MaterialSpinner', 'css!./loading'], function () { define(['MaterialSpinner', 'css!./loading'], function () {
var loadingElem;
return { return {
show: function () { show: function () {
var elem = document.querySelector('.docspinner'); var elem = loadingElem;
if (!elem) { if (!elem) {
elem = document.createElement("div"); elem = document.createElement("div");
loadingElem = elem;
elem.classList.add('docspinner'); elem.classList.add('docspinner');
elem.classList.add('mdl-spinner'); elem.classList.add('mdl-spinner');
elem.classList.add('mdl-js-spinner'); elem.classList.add('mdl-js-spinner');
@ -19,7 +23,7 @@ define(['MaterialSpinner', 'css!./loading'], function () {
elem.classList.remove('loadingHide'); elem.classList.remove('loadingHide');
}, },
hide: function () { hide: function () {
var elem = document.querySelector('.docspinner'); var elem = loadingElem;
if (elem) { if (elem) {

View file

@ -360,9 +360,11 @@ define(['datetime', 'globalize', 'embyRouter', 'html!./../icons/mediainfo.html',
function afterFill(elem, item, options) { function afterFill(elem, item, options) {
var endsAtElem = elem.querySelector('.endsAt'); if (options.endsAt !== false) {
if (endsAtElem) { var endsAtElem = elem.querySelector('.endsAt');
dynamicEndTime(endsAtElem, item); if (endsAtElem) {
dynamicEndTime(endsAtElem, item);
}
} }
var lnkChannel = elem.querySelector('.lnkChannel'); var lnkChannel = elem.querySelector('.lnkChannel');

View file

@ -388,7 +388,7 @@
if (recordingCreated) { if (recordingCreated) {
require(['toast'], function (toast) { require(['toast'], function (toast) {
toast(globalize.translate('RecordingScheduled')); toast(globalize.translate('sharedcomponents#RecordingScheduled'));
}); });
resolve(); resolve();
} else { } else {

View file

@ -4,6 +4,7 @@ define(['browser'], function (browser) {
var pageContainerCount = allPages.length; var pageContainerCount = allPages.length;
var animationDuration = 500; var animationDuration = 500;
var allowAnimation = true; var allowAnimation = true;
var selectedPageIndex = -1;
function enableAnimation() { function enableAnimation() {
@ -33,9 +34,13 @@ define(['browser'], function (browser) {
pageIndex = 0; pageIndex = 0;
} }
var html = '<div class="page-view" data-type="' + (options.type || '') + '" data-url="' + options.url + '">'; var view = document.createElement('div');
html += options.view; view.classList.add('page-view');
html += '</div>'; if (options.type) {
view.setAttribute('data-type', options.type);
}
view.setAttribute('data-url', options.url);
view.innerHTML = options.view;
var animatable = allPages[pageIndex]; var animatable = allPages[pageIndex];
@ -43,12 +48,11 @@ define(['browser'], function (browser) {
if (currentPage) { if (currentPage) {
triggerDestroy(currentPage); triggerDestroy(currentPage);
animatable.replaceChild(view, currentPage);
} else {
animatable.appendChild(view);
} }
animatable.innerHTML = html;
var view = animatable.querySelector('.page-view');
if (onBeforeChange) { if (onBeforeChange) {
onBeforeChange(view, false, options); onBeforeChange(view, false, options);
} }
@ -58,6 +62,7 @@ define(['browser'], function (browser) {
// animate here // animate here
return animate(animatable, previousAnimatable, options.transition, options.isBack).then(function () { return animate(animatable, previousAnimatable, options.transition, options.isBack).then(function () {
selectedPageIndex = pageIndex;
if (!options.cancel && previousAnimatable) { if (!options.cancel && previousAnimatable) {
afterAnimate(allPages, pageIndex); afterAnimate(allPages, pageIndex);
} }
@ -122,7 +127,7 @@ define(['browser'], function (browser) {
animations.push(oldAnimatedPage.animate([ animations.push(oldAnimatedPage.animate([
{ transform: 'none', offset: 0 }, { transform: 'none', offset: 0 },
{ transform: 'translateX(' + destination + ')', offset: 1 } { transform: 'translate3d(' + destination + ', 0, 0)', offset: 1 }
], timings)); ], timings));
} }
@ -133,7 +138,7 @@ define(['browser'], function (browser) {
animations.push(newAnimatedPage.animate([ animations.push(newAnimatedPage.animate([
{ transform: 'translateX(' + start + ')', offset: 0 }, { transform: 'translate3d(' + start + ', 0, 0)', offset: 0 },
{ transform: 'none', offset: 1 } { transform: 'none', offset: 1 }
], timings)); ], timings));
@ -215,13 +220,8 @@ define(['browser'], function (browser) {
} }
function getSelectedIndex(allPages) { 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) { function tryRestoreView(options) {
@ -232,7 +232,7 @@ define(['browser'], function (browser) {
if (view) { if (view) {
var index = -1; var index = -1;
var pages = document.querySelectorAll('.mainAnimatedPage'); var pages = allPages;
for (var i = 0, length = pages.length; i < length; i++) { for (var i = 0, length = pages.length; i < length; i++) {
if (pages[i] == page) { if (pages[i] == page) {
index = i; index = i;
@ -251,7 +251,6 @@ define(['browser'], function (browser) {
var animatable = allPages[index]; var animatable = allPages[index];
var selected = getSelectedIndex(allPages); var selected = getSelectedIndex(allPages);
var previousAnimatable = selected == -1 ? null : allPages[selected]; var previousAnimatable = selected == -1 ? null : allPages[selected];
var view = animatable.querySelector('.page-view');
if (onBeforeChange) { if (onBeforeChange) {
onBeforeChange(view, true, options); onBeforeChange(view, true, options);
@ -261,6 +260,7 @@ define(['browser'], function (browser) {
return animate(animatable, previousAnimatable, options.transition, options.isBack).then(function () { return animate(animatable, previousAnimatable, options.transition, options.isBack).then(function () {
selectedPageIndex = index;
if (!options.cancel && previousAnimatable) { if (!options.cancel && previousAnimatable) {
afterAnimate(allPages, index); afterAnimate(allPages, index);
} }

View file

@ -30,14 +30,14 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}, },
"ignore": [], "ignore": [],
"homepage": "https://github.com/polymerelements/iron-a11y-keys-behavior", "homepage": "https://github.com/PolymerElements/iron-a11y-keys-behavior",
"_release": "1.1.2", "_release": "1.1.2",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.1.2", "tag": "v1.1.2",
"commit": "0c2330c229a6fd3d200e2b84147ec6f94f17c22d" "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", "_target": "^1.0.0",
"_originalSource": "polymerelements/iron-a11y-keys-behavior" "_originalSource": "PolymerElements/iron-a11y-keys-behavior"
} }

View file

@ -34,6 +34,6 @@
"commit": "11c987b2eb3c73b388a79fc8aaea8ca01624f514" "commit": "11c987b2eb3c73b388a79fc8aaea8ca01624f514"
}, },
"_source": "git://github.com/Polymer/polymer.git", "_source": "git://github.com/Polymer/polymer.git",
"_target": "^1.1.0", "_target": "^1.2.0",
"_originalSource": "Polymer/polymer" "_originalSource": "Polymer/polymer"
} }

View file

@ -250,7 +250,7 @@
height: 2px; height: 2px;
transition: all .2s cubic-bezier(.4,0,1,1); transition: all .2s cubic-bezier(.4,0,1,1);
right: 0; right: 0;
transform: translateX(-100%); transform: translate3d(-100%, 0, 0);
border-radius: 0; border-radius: 0;
z-index: 1; z-index: 1;
} }

View file

@ -243,7 +243,7 @@
function fadeInRight(elem) { function fadeInRight(elem) {
var pct = browserInfo.mobile ? '1%' : '0.5%'; var pct = browserInfo.mobile ? '1.5%' : '0.5%';
var keyframes = [ var keyframes = [
{ opacity: '0', transform: 'translate3d(' + pct + ', 0, 0)', offset: 0 }, { opacity: '0', transform: 'translate3d(' + pct + ', 0, 0)', offset: 0 },
@ -3390,9 +3390,8 @@
tag: item.BackdropImageTags[0] tag: item.BackdropImageTags[0]
}); });
itemBackdropElement.classList.add('noFade');
itemBackdropElement.classList.remove('noBackdrop'); itemBackdropElement.classList.remove('noBackdrop');
ImageLoader.lazyImage(itemBackdropElement, imgUrl); ImageLoader.lazyImage(itemBackdropElement, imgUrl, false);
hasbackdrop = true; hasbackdrop = true;
} }
else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) { else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
@ -3404,9 +3403,8 @@
maxWidth: screenWidth maxWidth: screenWidth
}); });
itemBackdropElement.classList.add('noFade');
itemBackdropElement.classList.remove('noBackdrop'); itemBackdropElement.classList.remove('noBackdrop');
ImageLoader.lazyImage(itemBackdropElement, imgUrl); ImageLoader.lazyImage(itemBackdropElement, imgUrl, false);
hasbackdrop = true; hasbackdrop = true;
} }
else { else {