Migration of alphanumericshortcuts, autobackdrops and youtubeplayer/plugin to ES6 modules
This commit is contained in:
Cameron
parent
a9246f8f39
commit
0b98e7770f
6 changed files with 409 additions and 422 deletions
|
|
@ -1,110 +1,111 @@
|
|||
define(['dom', 'focusManager'], function (dom, focusManager) {
|
||||
'use strict';
|
||||
import dom from 'dom';
|
||||
import focusManager from 'focusManager';
|
||||
|
||||
var inputDisplayElement;
|
||||
var currentDisplayText = '';
|
||||
var currentDisplayTextContainer;
|
||||
let inputDisplayElement;
|
||||
let currentDisplayText = '';
|
||||
let currentDisplayTextContainer;
|
||||
|
||||
function onKeyDown(e) {
|
||||
function onKeyDown(e) {
|
||||
|
||||
if (e.ctrlKey) {
|
||||
return;
|
||||
}
|
||||
if (e.shiftKey) {
|
||||
return;
|
||||
}
|
||||
if (e.altKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
var key = e.key;
|
||||
var chr = key ? alphanumeric(key) : null;
|
||||
|
||||
if (chr) {
|
||||
|
||||
chr = chr.toString().toUpperCase();
|
||||
|
||||
if (chr.length === 1) {
|
||||
currentDisplayTextContainer = this.options.itemsContainer;
|
||||
onAlphanumericKeyPress(e, chr);
|
||||
}
|
||||
}
|
||||
if (e.ctrlKey) {
|
||||
return;
|
||||
}
|
||||
if (e.shiftKey) {
|
||||
return;
|
||||
}
|
||||
if (e.altKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
function alphanumeric(value) {
|
||||
var letterNumber = /^[0-9a-zA-Z]+$/;
|
||||
return value.match(letterNumber);
|
||||
}
|
||||
const key = e.key;
|
||||
let chr = key ? alphanumeric(key) : null;
|
||||
|
||||
function ensureInputDisplayElement() {
|
||||
if (!inputDisplayElement) {
|
||||
inputDisplayElement = document.createElement('div');
|
||||
inputDisplayElement.classList.add('alphanumeric-shortcut');
|
||||
inputDisplayElement.classList.add('hide');
|
||||
if (chr) {
|
||||
|
||||
document.body.appendChild(inputDisplayElement);
|
||||
chr = chr.toString().toUpperCase();
|
||||
|
||||
if (chr.length === 1) {
|
||||
currentDisplayTextContainer = this.options.itemsContainer;
|
||||
onAlphanumericKeyPress(e, chr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var alpanumericShortcutTimeout;
|
||||
function clearAlphaNumericShortcutTimeout() {
|
||||
if (alpanumericShortcutTimeout) {
|
||||
clearTimeout(alpanumericShortcutTimeout);
|
||||
alpanumericShortcutTimeout = null;
|
||||
}
|
||||
}
|
||||
function resetAlphaNumericShortcutTimeout() {
|
||||
clearAlphaNumericShortcutTimeout();
|
||||
alpanumericShortcutTimeout = setTimeout(onAlphanumericShortcutTimeout, 2000);
|
||||
}
|
||||
function alphanumeric(value) {
|
||||
const letterNumber = /^[0-9a-zA-Z]+$/;
|
||||
return value.match(letterNumber);
|
||||
}
|
||||
|
||||
function onAlphanumericKeyPress(e, chr) {
|
||||
if (currentDisplayText.length >= 3) {
|
||||
return;
|
||||
}
|
||||
ensureInputDisplayElement();
|
||||
currentDisplayText += chr;
|
||||
inputDisplayElement.innerHTML = currentDisplayText;
|
||||
inputDisplayElement.classList.remove('hide');
|
||||
resetAlphaNumericShortcutTimeout();
|
||||
}
|
||||
|
||||
function onAlphanumericShortcutTimeout() {
|
||||
var value = currentDisplayText;
|
||||
var container = currentDisplayTextContainer;
|
||||
|
||||
currentDisplayText = '';
|
||||
currentDisplayTextContainer = null;
|
||||
inputDisplayElement.innerHTML = '';
|
||||
function ensureInputDisplayElement() {
|
||||
if (!inputDisplayElement) {
|
||||
inputDisplayElement = document.createElement('div');
|
||||
inputDisplayElement.classList.add('alphanumeric-shortcut');
|
||||
inputDisplayElement.classList.add('hide');
|
||||
clearAlphaNumericShortcutTimeout();
|
||||
selectByShortcutValue(container, value);
|
||||
|
||||
document.body.appendChild(inputDisplayElement);
|
||||
}
|
||||
}
|
||||
|
||||
let alpanumericShortcutTimeout;
|
||||
function clearAlphaNumericShortcutTimeout() {
|
||||
if (alpanumericShortcutTimeout) {
|
||||
clearTimeout(alpanumericShortcutTimeout);
|
||||
alpanumericShortcutTimeout = null;
|
||||
}
|
||||
}
|
||||
function resetAlphaNumericShortcutTimeout() {
|
||||
clearAlphaNumericShortcutTimeout();
|
||||
alpanumericShortcutTimeout = setTimeout(onAlphanumericShortcutTimeout, 2000);
|
||||
}
|
||||
|
||||
function onAlphanumericKeyPress(e, chr) {
|
||||
if (currentDisplayText.length >= 3) {
|
||||
return;
|
||||
}
|
||||
ensureInputDisplayElement();
|
||||
currentDisplayText += chr;
|
||||
inputDisplayElement.innerHTML = currentDisplayText;
|
||||
inputDisplayElement.classList.remove('hide');
|
||||
resetAlphaNumericShortcutTimeout();
|
||||
}
|
||||
|
||||
function onAlphanumericShortcutTimeout() {
|
||||
const value = currentDisplayText;
|
||||
const container = currentDisplayTextContainer;
|
||||
|
||||
currentDisplayText = '';
|
||||
currentDisplayTextContainer = null;
|
||||
inputDisplayElement.innerHTML = '';
|
||||
inputDisplayElement.classList.add('hide');
|
||||
clearAlphaNumericShortcutTimeout();
|
||||
selectByShortcutValue(container, value);
|
||||
}
|
||||
|
||||
function selectByShortcutValue(container, value) {
|
||||
|
||||
value = value.toUpperCase();
|
||||
|
||||
let focusElem;
|
||||
if (value === '#') {
|
||||
|
||||
focusElem = container.querySelector('*[data-prefix]');
|
||||
}
|
||||
|
||||
function selectByShortcutValue(container, value) {
|
||||
|
||||
value = value.toUpperCase();
|
||||
|
||||
var focusElem;
|
||||
if (value === '#') {
|
||||
|
||||
focusElem = container.querySelector('*[data-prefix]');
|
||||
}
|
||||
|
||||
if (!focusElem) {
|
||||
focusElem = container.querySelector('*[data-prefix^=\'' + value + '\']');
|
||||
}
|
||||
|
||||
if (focusElem) {
|
||||
focusManager.focus(focusElem);
|
||||
}
|
||||
if (!focusElem) {
|
||||
focusElem = container.querySelector('*[data-prefix^=\'' + value + '\']');
|
||||
}
|
||||
|
||||
function AlphaNumericShortcuts(options) {
|
||||
if (focusElem) {
|
||||
focusManager.focus(focusElem);
|
||||
}
|
||||
}
|
||||
|
||||
class AlphaNumericShortcuts {
|
||||
constructor(options) {
|
||||
|
||||
this.options = options;
|
||||
|
||||
var keyDownHandler = onKeyDown.bind(this);
|
||||
const keyDownHandler = onKeyDown.bind(this);
|
||||
|
||||
dom.addEventListener(window, 'keydown', keyDownHandler, {
|
||||
passive: true
|
||||
|
|
@ -112,10 +113,9 @@ define(['dom', 'focusManager'], function (dom, focusManager) {
|
|||
|
||||
this.keyDownHandler = keyDownHandler;
|
||||
}
|
||||
destroy() {
|
||||
|
||||
AlphaNumericShortcuts.prototype.destroy = function () {
|
||||
|
||||
var keyDownHandler = this.keyDownHandler;
|
||||
const keyDownHandler = this.keyDownHandler;
|
||||
|
||||
if (keyDownHandler) {
|
||||
dom.removeEventListener(window, 'keydown', keyDownHandler, {
|
||||
|
|
@ -124,7 +124,7 @@ define(['dom', 'focusManager'], function (dom, focusManager) {
|
|||
this.keyDownHandler = null;
|
||||
}
|
||||
this.options = null;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return AlphaNumericShortcuts;
|
||||
});
|
||||
export default AlphaNumericShortcuts;
|
||||
|
|
|
|||
|
|
@ -1,77 +1,78 @@
|
|||
define(['backdrop', 'userSettings', 'libraryMenu'], function (backdrop, userSettings, libraryMenu) {
|
||||
'use strict';
|
||||
import backdrop from 'backdrop';
|
||||
import * as userSettings from 'userSettings';
|
||||
import libraryMenu from 'libraryMenu';
|
||||
|
||||
var cache = {};
|
||||
const cache = {};
|
||||
|
||||
function enabled() {
|
||||
return userSettings.enableBackdrops();
|
||||
function enabled() {
|
||||
return userSettings.enableBackdrops();
|
||||
}
|
||||
|
||||
function getBackdropItemIds(apiClient, userId, types, parentId) {
|
||||
const key = `backdrops2_${userId + (types || '') + (parentId || '')}`;
|
||||
let data = cache[key];
|
||||
|
||||
if (data) {
|
||||
console.debug(`Found backdrop id list in cache. Key: ${key}`);
|
||||
data = JSON.parse(data);
|
||||
return Promise.resolve(data);
|
||||
}
|
||||
|
||||
function getBackdropItemIds(apiClient, userId, types, parentId) {
|
||||
var key = `backdrops2_${userId + (types || '') + (parentId || '')}`;
|
||||
var data = cache[key];
|
||||
|
||||
if (data) {
|
||||
console.debug(`Found backdrop id list in cache. Key: ${key}`);
|
||||
data = JSON.parse(data);
|
||||
return Promise.resolve(data);
|
||||
}
|
||||
|
||||
var options = {
|
||||
SortBy: 'IsFavoriteOrLiked,Random',
|
||||
Limit: 20,
|
||||
Recursive: true,
|
||||
IncludeItemTypes: types,
|
||||
ImageTypes: 'Backdrop',
|
||||
ParentId: parentId,
|
||||
EnableTotalRecordCount: false
|
||||
};
|
||||
return apiClient.getItems(apiClient.getCurrentUserId(), options).then(function (result) {
|
||||
var images = result.Items.map(function (i) {
|
||||
return {
|
||||
Id: i.Id,
|
||||
tag: i.BackdropImageTags[0],
|
||||
ServerId: i.ServerId
|
||||
};
|
||||
});
|
||||
cache[key] = JSON.stringify(images);
|
||||
return images;
|
||||
const options = {
|
||||
SortBy: 'IsFavoriteOrLiked,Random',
|
||||
Limit: 20,
|
||||
Recursive: true,
|
||||
IncludeItemTypes: types,
|
||||
ImageTypes: 'Backdrop',
|
||||
ParentId: parentId,
|
||||
EnableTotalRecordCount: false
|
||||
};
|
||||
return apiClient.getItems(apiClient.getCurrentUserId(), options).then(function (result) {
|
||||
const images = result.Items.map(function (i) {
|
||||
return {
|
||||
Id: i.Id,
|
||||
tag: i.BackdropImageTags[0],
|
||||
ServerId: i.ServerId
|
||||
};
|
||||
});
|
||||
}
|
||||
cache[key] = JSON.stringify(images);
|
||||
return images;
|
||||
});
|
||||
}
|
||||
|
||||
function showBackdrop(type, parentId) {
|
||||
var apiClient = window.ApiClient;
|
||||
function showBackdrop(type, parentId) {
|
||||
const apiClient = window.ApiClient;
|
||||
|
||||
if (apiClient) {
|
||||
getBackdropItemIds(apiClient, apiClient.getCurrentUserId(), type, parentId).then(function (images) {
|
||||
if (images.length) {
|
||||
backdrop.setBackdrops(images.map(function (i) {
|
||||
i.BackdropImageTags = [i.tag];
|
||||
return i;
|
||||
}));
|
||||
} else {
|
||||
backdrop.clearBackdrop();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
pageClassOn('pageshow', 'page', function () {
|
||||
var page = this;
|
||||
|
||||
if (!page.classList.contains('selfBackdropPage')) {
|
||||
if (page.classList.contains('backdropPage')) {
|
||||
if (enabled()) {
|
||||
var type = page.getAttribute('data-backdroptype');
|
||||
var parentId = page.classList.contains('globalBackdropPage') ? '' : libraryMenu.getTopParentId();
|
||||
showBackdrop(type, parentId);
|
||||
} else {
|
||||
page.classList.remove('backdropPage');
|
||||
backdrop.clearBackdrop();
|
||||
}
|
||||
if (apiClient) {
|
||||
getBackdropItemIds(apiClient, apiClient.getCurrentUserId(), type, parentId).then(function (images) {
|
||||
if (images.length) {
|
||||
backdrop.setBackdrops(images.map(function (i) {
|
||||
i.BackdropImageTags = [i.tag];
|
||||
return i;
|
||||
}));
|
||||
} else {
|
||||
backdrop.clearBackdrop();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
pageClassOn('pageshow', 'page', function () {
|
||||
const page = this;
|
||||
|
||||
if (!page.classList.contains('selfBackdropPage')) {
|
||||
if (page.classList.contains('backdropPage')) {
|
||||
if (enabled()) {
|
||||
const type = page.getAttribute('data-backdroptype');
|
||||
const parentId = page.classList.contains('globalBackdropPage') ? '' : libraryMenu.getTopParentId();
|
||||
showBackdrop(type, parentId);
|
||||
} else {
|
||||
page.classList.remove('backdropPage');
|
||||
backdrop.clearBackdrop();
|
||||
}
|
||||
} else {
|
||||
backdrop.clearBackdrop();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue