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

dam lint

Browse source
This commit is contained in:
Sarab Singh 2020-05-03 20:00:32 +05:30
parent 6d28c139cd
commit 05385ffdf4
1 changed files with 278 additions and 283 deletions
Download patch file Download diff file Expand all files Collapse all files

561
src/components/actionSheet/actionSheet.js
View file

@ -11,362 +11,357 @@ import 'listViewStyle';
function getOffsets(elems) { function getOffsets(elems) {
var doc = document; var doc = document;
var results = []; var results = [];
if (!doc) { if (!doc) {
return results; return results;
} }
var box; var box;
var elem; var elem;
for (var i = 0, length = elems.length; i < length; i++) { for (var i = 0, length = elems.length; i < length; i++) {
elem = elems[i]; elem = elems[i];
// Support: BlackBerry 5, iOS 3 (original iPhone) // Support: BlackBerry 5, iOS 3 (original iPhone)
// If we don't have gBCR, just use 0,0 rather than error // If we don't have gBCR, just use 0,0 rather than error
if (elem.getBoundingClientRect) { if (elem.getBoundingClientRect) {
box = elem.getBoundingClientRect(); box = elem.getBoundingClientRect();
} else { } else {
box = { top: 0, left: 0 }; box = { top: 0, left: 0 };
} }
results[i] = { results[i] = {
top: box.top, top: box.top,
left: box.left, left: box.left,
width: box.width, width: box.width,
height: box.height height: box.height
}; };
} }
return results; return results;
} }
function getPosition(options, dlg) { function getPosition(options, dlg) {
var windowSize = dom.getWindowSize(); var windowSize = dom.getWindowSize();
var windowHeight = windowSize.innerHeight; var windowHeight = windowSize.innerHeight;
var windowWidth = windowSize.innerWidth; var windowWidth = windowSize.innerWidth;
var pos = getOffsets([options.positionTo])[0]; var pos = getOffsets([options.positionTo])[0];
if (options.positionY !== 'top') { if (options.positionY !== 'top') {
pos.top += (pos.height || 0) / 2; pos.top += (pos.height || 0) / 2;
} }
pos.left += (pos.width || 0) / 2; pos.left += (pos.width || 0) / 2;
var height = dlg.offsetHeight || 300; var height = dlg.offsetHeight || 300;
var width = dlg.offsetWidth || 160; var width = dlg.offsetWidth || 160;
// Account for popup size // Account for popup size
pos.top -= height / 2; pos.top -= height / 2;
pos.left -= width / 2; pos.left -= width / 2;
// Avoid showing too close to the bottom // Avoid showing too close to the bottom
var overflowX = pos.left + width - windowWidth; var overflowX = pos.left + width - windowWidth;
var overflowY = pos.top + height - windowHeight; var overflowY = pos.top + height - windowHeight;
if (overflowX > 0) { if (overflowX > 0) {
pos.left -= (overflowX + 20); pos.left -= (overflowX + 20);
} }
if (overflowY > 0) { if (overflowY > 0) {
pos.top -= (overflowY + 20); pos.top -= (overflowY + 20);
} }
pos.top += (options.offsetTop || 0); pos.top += (options.offsetTop || 0);
pos.left += (options.offsetLeft || 0); pos.left += (options.offsetLeft || 0);
// Do some boundary checking // Do some boundary checking
pos.top = Math.max(pos.top, 10); pos.top = Math.max(pos.top, 10);
pos.left = Math.max(pos.left, 10); pos.left = Math.max(pos.left, 10);
return pos; return pos;
} }
function centerFocus(elem, horiz, on) { function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) { require(['scrollHelper'], function (scrollHelper) {
var fn = on ? 'on' : 'off'; var fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz); scrollHelper.centerFocus[fn](elem, horiz);
}); });
} }
export function show(options) { export function show(options) {
// items // items
// positionTo // positionTo
// showCancel // showCancel
// title // title
var dialogOptions = { var dialogOptions = {
removeOnClose: true, removeOnClose: true,
enableHistory: options.enableHistory, enableHistory: options.enableHistory,
scrollY: false scrollY: false
}; };
var backButton = false; var backButton = false;
var isFullscreen; var isFullscreen;
if (layoutManager.tv) { if (layoutManager.tv) {
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
isFullscreen = true; isFullscreen = true;
backButton = true; backButton = true;
dialogOptions.autoFocus = true; dialogOptions.autoFocus = true;
} else { } else {
dialogOptions.modal = false; dialogOptions.modal = false;
dialogOptions.entryAnimation = options.entryAnimation; dialogOptions.entryAnimation = options.entryAnimation;
dialogOptions.exitAnimation = options.exitAnimation; dialogOptions.exitAnimation = options.exitAnimation;
dialogOptions.entryAnimationDuration = options.entryAnimationDuration || 140; dialogOptions.entryAnimationDuration = options.entryAnimationDuration || 140;
dialogOptions.exitAnimationDuration = options.exitAnimationDuration || 100; dialogOptions.exitAnimationDuration = options.exitAnimationDuration || 100;
dialogOptions.autoFocus = false; dialogOptions.autoFocus = false;
} }
var dlg = dialogHelper.createDialog(dialogOptions); var dlg = dialogHelper.createDialog(dialogOptions);
if (isFullscreen) { if (isFullscreen) {
dlg.classList.add('actionsheet-fullscreen'); dlg.classList.add('actionsheet-fullscreen');
} else { } else {
dlg.classList.add('actionsheet-not-fullscreen'); dlg.classList.add('actionsheet-not-fullscreen');
} }
dlg.classList.add('actionSheet'); dlg.classList.add('actionSheet');
if (options.dialogClass) { if (options.dialogClass) {
dlg.classList.add(options.dialogClass); dlg.classList.add(options.dialogClass);
} }
var html = ''; var html = '';
var scrollClassName = layoutManager.tv ? 'scrollY smoothScrollY hiddenScrollY' : 'scrollY'; var scrollClassName = layoutManager.tv ? 'scrollY smoothScrollY hiddenScrollY' : 'scrollY';
var style = ''; var style = '';
// Admittedly a hack but right now the scrollbar is being factored into the width which is causing truncation // Admittedly a hack but right now the scrollbar is being factored into the width which is causing truncation
if (options.items.length > 20) { if (options.items.length > 20) {
var minWidth = dom.getWindowSize().innerWidth >= 300 ? 240 : 200; var minWidth = dom.getWindowSize().innerWidth >= 300 ? 240 : 200;
style += "min-width:" + minWidth + "px;"; style += "min-width:" + minWidth + "px;";
} }
var i; var i;
var length; var length;
var option; var option;
var renderIcon = false; var renderIcon = false;
var icons = []; var icons = [];
var itemIcon; var itemIcon;
for (i = 0, length = options.items.length; i < length; i++) { for (i = 0, length = options.items.length; i < length; i++) {
option = options.items[i]; option = options.items[i];
itemIcon = option.icon || (option.selected ? 'check' : null); itemIcon = option.icon || (option.selected ? 'check' : null);
if (itemIcon) { if (itemIcon) {
renderIcon = true; renderIcon = true;
} }
icons.push(itemIcon || ''); icons.push(itemIcon || '');
} }
if (layoutManager.tv) { if (layoutManager.tv) {
html += '<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1"><i class="material-icons arrow_back"></i></button>'; html += '<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1"><i class="material-icons arrow_back"></i></button>';
} }
// If any items have an icon, give them all an icon just to make sure they're all lined up evenly // If any items have an icon, give them all an icon just to make sure they're all lined up evenly
var center = options.title && (!renderIcon /*|| itemsWithIcons.length != options.items.length*/); var center = options.title && (!renderIcon /*|| itemsWithIcons.length != options.items.length*/);
if (center || layoutManager.tv) { if (center || layoutManager.tv) {
html += '<div class="actionSheetContent actionSheetContent-centered">'; html += '<div class="actionSheetContent actionSheetContent-centered">';
} else { } else {
html += '<div class="actionSheetContent">'; html += '<div class="actionSheetContent">';
} }
if (options.title) { if (options.title) {
html += '<h1 class="actionSheetTitle">'; html += '<h1 class="actionSheetTitle">';
html += options.title; html += options.title;
html += '</h1>'; html += '</h1>';
} }
if (options.text) { if (options.text) {
html += '<p class="actionSheetText">'; html += '<p class="actionSheetText">';
html += options.text; html += options.text;
html += '</p>'; html += '</p>';
} }
var scrollerClassName = 'actionSheetScroller'; var scrollerClassName = 'actionSheetScroller';
if (layoutManager.tv) { if (layoutManager.tv) {
scrollerClassName += ' actionSheetScroller-tv focuscontainer-x focuscontainer-y'; scrollerClassName += ' actionSheetScroller-tv focuscontainer-x focuscontainer-y';
} }
html += '<div class="' + scrollerClassName + ' ' + scrollClassName + '" style="' + style + '">'; html += '<div class="' + scrollerClassName + ' ' + scrollClassName + '" style="' + style + '">';
var menuItemClass = 'listItem listItem-button actionSheetMenuItem'; var menuItemClass = 'listItem listItem-button actionSheetMenuItem';
if (options.border || options.shaded) { if (options.border || options.shaded) {
menuItemClass += ' listItem-border'; menuItemClass += ' listItem-border';
} }
if (options.menuItemClass) { if (options.menuItemClass) {
menuItemClass += ' ' + options.menuItemClass; menuItemClass += ' ' + options.menuItemClass;
} }
if (layoutManager.tv) { if (layoutManager.tv) {
menuItemClass += ' listItem-focusscale'; menuItemClass += ' listItem-focusscale';
} }
if (layoutManager.mobile) { if (layoutManager.mobile) {
menuItemClass += ' actionsheet-xlargeFont'; menuItemClass += ' actionsheet-xlargeFont';
} }
for (i = 0, length = options.items.length; i < length; i++) { for (i = 0, length = options.items.length; i < length; i++) {
option = options.items[i]; option = options.items[i];
if (option.divider) { if (option.divider) {
html += '<div class="actionsheetDivider"></div>'; html += '<div class="actionsheetDivider"></div>';
continue; continue;
} }
var autoFocus = option.selected && layoutManager.tv ? ' autoFocus' : ''; var autoFocus = option.selected && layoutManager.tv ? ' autoFocus' : '';
// Check for null in case int 0 was passed in // Check for null in case int 0 was passed in
var optionId = option.id == null || option.id === '' ? option.value : option.id; var optionId = option.id == null || option.id === '' ? option.value : option.id;
html += '<button' + autoFocus + ' is="emby-button" type="button" class="' + menuItemClass + '" data-id="' + optionId + '">'; html += '<button' + autoFocus + ' is="emby-button" type="button" class="' + menuItemClass + '" data-id="' + optionId + '">';
itemIcon = icons[i]; itemIcon = icons[i];
if (itemIcon) { if (itemIcon) {
html += '<i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons">' + itemIcon + '</i>'; html += '<i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons">' + itemIcon + '</i>';
} else if (renderIcon && !center) { } else if (renderIcon && !center) {
html += '<i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons" style="visibility:hidden;">check</i>'; html += '<i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons" style="visibility:hidden;">check</i>';
} }
html += '<div class="listItemBody actionsheetListItemBody">'; html += '<div class="listItemBody actionsheetListItemBody">';
html += '<div class="listItemBodyText actionSheetItemText">'; html += '<div class="listItemBodyText actionSheetItemText">';
html += (option.name || option.textContent || option.innerText); html += (option.name || option.textContent || option.innerText);
html += '</div>'; html += '</div>';
if (option.secondaryText) { if (option.secondaryText) {
html += '<div class="listItemBodyText secondary">'; html += '<div class="listItemBodyText secondary">';
html += option.secondaryText; html += option.secondaryText;
html += '</div>'; html += '</div>';
} }
html += '</div>'; html += '</div>';
if (option.asideText) { if (option.asideText) {
html += '<div class="listItemAside actionSheetItemAsideText">'; html += '<div class="listItemAside actionSheetItemAsideText">';
html += option.asideText; html += option.asideText;
html += '</div>'; html += '</div>';
} }
html += '</button>'; html += '</button>';
} }
if (options.showCancel) { if (options.showCancel) {
html += '<div class="buttons">'; html += '<div class="buttons">';
html += '<button is="emby-button" type="button" class="btnCloseActionSheet">' + globalize.translate('ButtonCancel') + '</button>'; html += '<button is="emby-button" type="button" class="btnCloseActionSheet">' + globalize.translate('ButtonCancel') + '</button>';
html += '</div>'; html += '</div>';
} }
html += '</div>'; html += '</div>';
dlg.innerHTML = html; dlg.innerHTML = html;
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.actionSheetScroller'), false, true); centerFocus(dlg.querySelector('.actionSheetScroller'), false, true);
} }
var btnCloseActionSheet = dlg.querySelector('.btnCloseActionSheet'); var btnCloseActionSheet = dlg.querySelector('.btnCloseActionSheet');
if (btnCloseActionSheet) { if (btnCloseActionSheet) {
dlg.querySelector('.btnCloseActionSheet').addEventListener('click', function () { dlg.querySelector('.btnCloseActionSheet').addEventListener('click', function () {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
} }
// Seeing an issue in some non-chrome browsers where this is requiring a double click // Seeing an issue in some non-chrome browsers where this is requiring a double click
//var eventName = browser.firefox ? 'mousedown' : 'click'; //var eventName = browser.firefox ? 'mousedown' : 'click';
var selectedId; var selectedId;
var timeout; var timeout;
if (options.timeout) { if (options.timeout) {
timeout = setTimeout(function () { timeout = setTimeout(function () {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}, options.timeout); }, options.timeout);
} }
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
var isResolved; var isResolved;
dlg.addEventListener('click', function (e) { dlg.addEventListener('click', function (e) {
var actionSheetMenuItem = dom.parentWithClass(e.target, 'actionSheetMenuItem'); var actionSheetMenuItem = dom.parentWithClass(e.target, 'actionSheetMenuItem');
if (actionSheetMenuItem) { if (actionSheetMenuItem) {
selectedId = actionSheetMenuItem.getAttribute('data-id'); selectedId = actionSheetMenuItem.getAttribute('data-id');
if (options.resolveOnClick) { if (options.resolveOnClick) {
if (options.resolveOnClick.indexOf) { if (options.resolveOnClick.indexOf) {
if (options.resolveOnClick.indexOf(selectedId) !== -1) { if (options.resolveOnClick.indexOf(selectedId) !== -1) {
resolve(selectedId); resolve(selectedId);
isResolved = true; isResolved = true;
} }
} else { } else {
resolve(selectedId); resolve(selectedId);
isResolved = true; isResolved = true;
} }
} }
dialogHelper.close(dlg); dialogHelper.close(dlg);
} }
}); });
dlg.addEventListener('close', function () { dlg.addEventListener('close', function () {
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.actionSheetScroller'), false, false); centerFocus(dlg.querySelector('.actionSheetScroller'), false, false);
} }
if (timeout) { if (timeout) {
clearTimeout(timeout); clearTimeout(timeout);
timeout = null; timeout = null;
} }
if (!isResolved) { if (!isResolved) {
if (selectedId != null) { if (selectedId != null) {
if (options.callback) { if (options.callback) {
options.callback(selectedId); options.callback(selectedId);
} }
resolve(selectedId); resolve(selectedId);
} else { } else {
reject(); reject();
} }
} }
}); });
dialogHelper.open(dlg); dialogHelper.open(dlg);
var pos = options.positionTo && dialogOptions.size !== 'fullscreen' ? getPosition(options, dlg) : null; var pos = options.positionTo && dialogOptions.size !== 'fullscreen' ? getPosition(options, dlg) : null;
if (pos) { if (pos) {
dlg.style.position = 'fixed'; dlg.style.position = 'fixed';
dlg.style.margin = 0; dlg.style.margin = 0;
dlg.style.left = pos.left + 'px'; dlg.style.left = pos.left + 'px';
dlg.style.top = pos.top + 'px'; dlg.style.top = pos.top + 'px';
} }
}); });
} }
export default { export default {
show: show show: show
}; };
// return {
// show: show
// };
// });