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

update components

This commit is contained in:
Luke Pulverenti 2016-08-11 23:23:12 -04:00
parent 1ad3cfbf43
commit 106870b066
11 changed files with 99 additions and 65 deletions

View file

@ -14,12 +14,12 @@
},
"devDependencies": {},
"ignore": [],
"version": "1.4.166",
"_release": "1.4.166",
"version": "1.4.167",
"_release": "1.4.167",
"_resolution": {
"type": "version",
"tag": "1.4.166",
"commit": "869fe388b2e0bd01bee868001f9e1d456a2c7ca1"
"tag": "1.4.167",
"commit": "03c12f1c7360d863dc0ec55491a292a3f64fb400"
},
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "^1.2.1",

View file

@ -34,8 +34,9 @@
function getPosition(options, dlg) {
var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
var windowSize = dom.getWindowSize();
var windowHeight = windowSize.innerHeight;
var windowWidth = windowSize.innerWidth;
if (windowHeight < 540) {
return null;
@ -125,7 +126,7 @@
// Admittedly a hack but right now the scrollbar is being factored into the width which is causing truncation
if (options.items.length > 20) {
var minWidth = window.innerWidth >= 300 ? 240 : 200;
var minWidth = dom.getWindowSize().innerWidth >= 300 ? 240 : 200;
style += "min-width:" + minWidth + "px;";
}

View file

@ -1,4 +1,4 @@
define(['browser', 'connectionManager', 'playbackManager', 'css!./style'], function (browser, connectionManager, playbackManager) {
define(['browser', 'connectionManager', 'playbackManager', 'dom', 'css!./style'], function (browser, connectionManager, playbackManager, dom) {
function enableAnimation(elem) {
@ -178,14 +178,6 @@
currentLoadingBackdrop = instance;
}
var windowWidth;
function resetWindowSize() {
windowWidth = screen.availWidth || window.innerWidth;
}
window.addEventListener("orientationchange", resetWindowSize);
window.addEventListener('resize', resetWindowSize);
resetWindowSize();
function getItemImageUrls(item) {
var apiClient = connectionManager.getApiClient(item.ServerId);
@ -197,7 +189,7 @@
return apiClient.getScaledImageUrl(item.Id, {
type: "Backdrop",
tag: imgTag,
maxWidth: Math.min(windowWidth, 1920),
maxWidth: Math.min(dom.getWindowSize().innerWidth, 1920),
index: index
});
});
@ -210,7 +202,7 @@
return apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
type: "Backdrop",
tag: imgTag,
maxWidth: Math.min(windowWidth, 1920),
maxWidth: Math.min(dom.getWindowSize().innerWidth, 1920),
index: index
});
});

View file

@ -1,5 +1,5 @@
define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo', 'focusManager', 'indicators', 'globalize', 'layoutManager', 'apphost', 'emby-button', 'css!./card', 'paper-icon-button-light', 'clearButtonStyle'],
function (datetime, imageLoader, connectionManager, itemHelper, mediaInfo, focusManager, indicators, globalize, layoutManager, appHost) {
define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo', 'focusManager', 'indicators', 'globalize', 'layoutManager', 'apphost', 'dom', 'emby-button', 'css!./card', 'paper-icon-button-light', 'clearButtonStyle'],
function (datetime, imageLoader, connectionManager, itemHelper, mediaInfo, focusManager, indicators, globalize, layoutManager, appHost, dom) {
// Regular Expressions for parsing tags and attributes
var SURROGATE_PAIR_REGEXP = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
@ -118,7 +118,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
function getImageWidth(shape) {
var screenWidth = window.innerWidth;
var screenWidth = dom.getWindowSize().innerWidth;
if (isResizable(screenWidth)) {
var roundScreenTo = 100;

View file

@ -1,5 +1,8 @@
.cardBox-round {
border: .7em solid transparent;
border: .7em solid transparent !important;
transition: transform 180ms ease-out !important;
-webkit-transform-origin: center center;
transform-origin: center center;
}
.cardImageContainer-round {
@ -10,12 +13,6 @@
border-color: #fff;
}
.cardBox-round {
transition: transform 180ms ease-out !important;
-webkit-transform-origin: center center;
transform-origin: center center;
}
.layout-tv .card-round:focus .cardBox {
transform: scale(1.34, 1.34);
}
@ -26,4 +23,4 @@
.cardImageContainer-round, .card-round .cardImage {
border-radius: 1000px;
}
}

View file

@ -284,6 +284,8 @@
if (!dlg.classList.contains('hide')) {
var onAnimationFinish = function () {
focusManager.popScope(dlg);
dlg.classList.add('hide');
if (dlg.close) {
dlg.close();
@ -319,6 +321,7 @@
function animateDialogOpen(dlg) {
var onAnimationFinish = function () {
focusManager.pushScope(dlg);
if (dlg.getAttribute('data-autofocus') == 'true') {
autoFocus(dlg);
}

View file

@ -70,11 +70,30 @@ define([], function () {
target.removeEventListener(type, handler, optionsOrCapture);
}
var windowSize;
function resetWindowSize() {
windowSize = {
innerHeight: window.innerHeight,
innerWidth: window.innerWidth
};
}
function getWindowSize() {
if (!windowSize) {
resetWindowSize();
addEventListenerWithOptions(window, "orientationchange", resetWindowSize, { passive: true });
addEventListenerWithOptions(window, 'resize', resetWindowSize, { passive: true });
}
return windowSize;
}
return {
parentWithAttribute: parentWithAttribute,
parentWithClass: parentWithClass,
parentWithTag: parentWithTag,
addEventListener: addEventListenerWithOptions,
removeEventListener: removeEventListenerWithOptions
removeEventListener: removeEventListenerWithOptions,
getWindowSize: getWindowSize
};
});

View file

@ -1,5 +1,17 @@
define(['dom'], function (dom) {
var scopes = [];
function pushScope(elem) {
scopes.push(elem);
}
function popScope(elem) {
if (scopes.length) {
scopes.length -= 1;
}
}
function autoFocus(view, defaultToFirst, findAutoFocusElement) {
var element;
@ -34,7 +46,14 @@ define(['dom'], function (dom) {
var focusableTagNames = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A'];
var focusableContainerTagNames = ['BODY', 'DIALOG'];
var focusableQuery = focusableTagNames.join(',') + ',.focusable';
var focusableQuery = focusableTagNames.map(function (t) {
if (t == 'INPUT') {
t += ':not([type="range"])';
}
return t + ':not([tabindex="-1"]):not(:disabled)';
}).join(',') + ',.focusable';
function isFocusable(elem) {
@ -62,6 +81,17 @@ define(['dom'], function (dom) {
return elem;
}
// Determines if a focusable element can be focused at a given point in time
function isCurrentlyFocusableInternal(elem) {
// http://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom
if (elem.offsetParent === null) {
return false;
}
return true;
}
// Determines if a focusable element can be focused at a given point in time
function isCurrentlyFocusable(elem) {
@ -73,11 +103,6 @@ define(['dom'], function (dom) {
return false;
}
// http://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom
if (elem.offsetParent === null) {
return false;
}
if (elem.tagName == 'INPUT') {
var type = elem.type;
if (type == 'range') {
@ -85,18 +110,22 @@ define(['dom'], function (dom) {
}
}
return true;
return isCurrentlyFocusableInternal(elem);
}
function getDefaultScope() {
return scopes[0] || document.body;
}
function getFocusableElements(parent) {
var elems = (parent || document.body).querySelectorAll(focusableQuery);
var elems = (parent || getDefaultScope()).querySelectorAll(focusableQuery);
var focusableElements = [];
for (var i = 0, length = elems.length; i < length; i++) {
var elem = elems[i];
if (isCurrentlyFocusable(elem)) {
if (isCurrentlyFocusableInternal(elem)) {
focusableElements.push(elem);
}
}
@ -132,7 +161,7 @@ define(['dom'], function (dom) {
elem = elem.parentNode;
if (!elem) {
return document.body;
return getDefaultScope();
}
}
@ -192,7 +221,7 @@ define(['dom'], function (dom) {
activeElement = focusableParent(activeElement);
}
var container = activeElement ? getFocusContainer(activeElement, direction) : document.body;
var container = activeElement ? getFocusContainer(activeElement, direction) : getDefaultScope();
if (!activeElement) {
autoFocus(container, true, false);
@ -218,9 +247,9 @@ define(['dom'], function (dom) {
continue;
}
if (!isCurrentlyFocusable(curr)) {
continue;
}
//if (!isCurrentlyFocusableInternal(curr)) {
// continue;
//}
var elementRect = getViewportBoundingClientRect(curr, windowData);
@ -415,6 +444,8 @@ define(['dom'], function (dom) {
nav(sourceElement, 3);
},
sendText: sendText,
isCurrentlyFocusable: isCurrentlyFocusable
isCurrentlyFocusable: isCurrentlyFocusable,
pushScope: pushScope,
popScope: popScope
};
});

View file

@ -2,7 +2,6 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser
var thresholdX;
var thresholdY;
var windowSize;
var supportsIntersectionObserver = function () {
@ -20,37 +19,28 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser
return false;
}();
function resetWindowSize() {
windowSize = {
innerHeight: window.innerHeight,
innerWidth: window.innerWidth
};
}
function resetThresholds() {
var x = screen.availWidth;
var y = screen.availHeight;
if (layoutManager.mobile) {
if (browser.touch) {
x *= 2;
y *= 2;
}
thresholdX = x;
thresholdY = y;
resetWindowSize();
}
if (!supportsIntersectionObserver) {
window.addEventListener("orientationchange", resetThresholds);
window.addEventListener('resize', resetThresholds);
events.on(layoutManager, 'modechange', resetThresholds);
dom.addEventListener(window, "orientationchange", resetThresholds, { passive: true });
dom.addEventListener(window, 'resize', resetThresholds, { passive: true });
resetThresholds();
}
function isVisible(elem) {
return visibleinviewport(elem, true, thresholdX, thresholdY, windowSize);
return visibleinviewport(elem, true, thresholdX, thresholdY);
}
var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel');

View file

@ -1,4 +1,4 @@
define([], function () {
define(['dom'], function (dom) {
/**
* Copyright 2012, Digital Fusion
@ -19,10 +19,7 @@
return true;
}
windowSize = windowSize || {
innerHeight: window.innerHeight,
innerWidth: window.innerWidth
};
windowSize = windowSize || dom.getWindowSize();
var vpWidth = windowSize.innerWidth,
vpHeight = windowSize.innerHeight;

View file

@ -2865,7 +2865,11 @@ var AppInfo = {};
if (!browserInfo.tv && !AppInfo.isNativeApp) {
if (navigator.serviceWorker) {
navigator.serviceWorker.register('serviceworker.js');
try {
navigator.serviceWorker.register('serviceworker.js');
} catch (err) {
console.log('Error registering serviceWorker: ' + err);
}
}
if (window.Notification) {