mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update events
This commit is contained in:
parent
ab15648bbb
commit
f8a1cdd9a2
8 changed files with 151 additions and 600 deletions
|
@ -1,105 +0,0 @@
|
||||||
.remoteControlFlyout {
|
|
||||||
width: 300px;
|
|
||||||
min-height: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playMenuOptions {
|
|
||||||
max-height: 200px;
|
|
||||||
overflow-y: auto;
|
|
||||||
border: 1px solid #aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tblRemoteControl {
|
|
||||||
width: 100%;
|
|
||||||
border-spacing: 0;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tblRemoteControl tbody tr:hover {
|
|
||||||
background: #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tblRemoteControl td {
|
|
||||||
padding: 5px;
|
|
||||||
border-top: 1px solid #ccc;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tblRemoteControl th {
|
|
||||||
padding: 3px 5px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tblRemoteControl th:first-child, .tblRemoteControl td:first-child {
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tblRemoteControlNoHeader tr:first-child td {
|
|
||||||
border-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tdSelectPlayTime, .tdSelectItem {
|
|
||||||
vertical-align: middle!important;
|
|
||||||
width: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tdRemoteControlImage {
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tblRemoteControl img {
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nowPlaying .ui-slider-track {
|
|
||||||
margin-left: 15px!important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (max-width: 550px) {
|
|
||||||
.nowPlayingCell + .nowPlayingCell {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (max-width: 450px) {
|
|
||||||
.nowPlayingCell {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-height: 500px) {
|
|
||||||
.remoteControlFlyout {
|
|
||||||
min-height: 450px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-height: 600px) {
|
|
||||||
.remoteControlFlyout {
|
|
||||||
min-height: 500px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-height: 800px) {
|
|
||||||
.playMenuOptions {
|
|
||||||
max-height: 300px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 400px) {
|
|
||||||
.remoteControlFlyout {
|
|
||||||
width: 360px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 500px) {
|
|
||||||
.remoteControlFlyout {
|
|
||||||
width: 450px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 600px) {
|
|
||||||
.remoteControlFlyout {
|
|
||||||
width: 550px;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -246,9 +246,9 @@
|
||||||
|
|
||||||
var legacyTabs = $('.legacyTabs', ownerpage);
|
var legacyTabs = $('.legacyTabs', ownerpage);
|
||||||
|
|
||||||
$(pages).on('iron-select', function (e) {
|
pages.addEventListener('iron-select', function (e) {
|
||||||
|
|
||||||
var selected = this.selected;
|
var selected = pages.selected;
|
||||||
$('a', legacyTabs).removeClass('ui-btn-active')[selected].classList.add('ui-btn-active');
|
$('a', legacyTabs).removeClass('ui-btn-active')[selected].classList.add('ui-btn-active');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -2816,8 +2816,8 @@
|
||||||
dlg.innerHTML = html;
|
dlg.innerHTML = html;
|
||||||
document.body.appendChild(dlg);
|
document.body.appendChild(dlg);
|
||||||
|
|
||||||
$(dlg).on('iron-overlay-closed', function () {
|
dlg.addEventListener('iron-overlay-closed', function () {
|
||||||
$(this).remove();
|
$(dlg).remove();
|
||||||
});
|
});
|
||||||
|
|
||||||
require(['components/paperdialoghelper'], function () {
|
require(['components/paperdialoghelper'], function () {
|
||||||
|
|
|
@ -2,14 +2,35 @@
|
||||||
|
|
||||||
var showOverlayTimeout;
|
var showOverlayTimeout;
|
||||||
|
|
||||||
function onHoverOut() {
|
function getCardHoverElement(e) {
|
||||||
|
|
||||||
|
var elem = parentWithClass(e.target, 'card');
|
||||||
|
|
||||||
|
if (!elem) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (elem.classList.contains('bannerCard')) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return elem;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onHoverOut(e) {
|
||||||
|
|
||||||
|
var elem = getCardHoverElement(e);
|
||||||
|
|
||||||
|
if (!elem) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (showOverlayTimeout) {
|
if (showOverlayTimeout) {
|
||||||
clearTimeout(showOverlayTimeout);
|
clearTimeout(showOverlayTimeout);
|
||||||
showOverlayTimeout = null;
|
showOverlayTimeout = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
var elem = this.querySelector('.cardOverlayTarget');
|
elem = elem.querySelector('.cardOverlayTarget');
|
||||||
|
|
||||||
if ($(elem).is(':visible')) {
|
if ($(elem).is(':visible')) {
|
||||||
require(["jquery", "velocity"], function ($, Velocity) {
|
require(["jquery", "velocity"], function ($, Velocity) {
|
||||||
|
@ -637,235 +658,13 @@
|
||||||
url += '&context=' + context;
|
url += '&context=' + context;
|
||||||
}
|
}
|
||||||
Dashboard.navigate(url);
|
Dashboard.navigate(url);
|
||||||
return;
|
|
||||||
|
|
||||||
var ids = items.map(function (i) {
|
|
||||||
return i.Id;
|
|
||||||
});
|
|
||||||
|
|
||||||
showItemsOverlay({
|
|
||||||
ids: ids,
|
|
||||||
context: context
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getItemsOverlay(ids, context) {
|
|
||||||
|
|
||||||
$('.detailsMenu').remove();
|
|
||||||
|
|
||||||
var html = '<div data-role="popup" class="detailsMenu" style="border:0;padding:0;" data-ids="' + ids.join(',') + '" data-context="' + (context || '') + '">';
|
|
||||||
|
|
||||||
html += '<div style="padding:1em 1em;background:rgba(20,20,20,1);margin:0;text-align:center;" class="detailsMenuHeader">';
|
|
||||||
html += '<paper-icon-button icon="keyboard-arrow-left" class="detailsMenuLeftButton"></paper-icon-button>';
|
|
||||||
html += '<h3 style="font-weight:400;margin:.5em 0;"></h3>';
|
|
||||||
html += '<paper-icon-button icon="keyboard-arrow-right" class="detailsMenuRightButton"></paper-icon-button>';
|
|
||||||
html += '</div>';
|
|
||||||
|
|
||||||
html += '<div class="detailsMenuContent" style="background-position:center center;background-repeat:no-repeat;background-size:cover;">';
|
|
||||||
html += '<div style="padding:.5em 1em 1em;background:rgba(10,10,10,.80);" class="detailsMenuContentInner">';
|
|
||||||
html += '</div>';
|
|
||||||
html += '</div>';
|
|
||||||
|
|
||||||
html += '</div>';
|
|
||||||
|
|
||||||
$($.mobile.activePage).append(html);
|
|
||||||
|
|
||||||
var elem = $('.detailsMenu').popup().trigger('create').popup("open").on("popupafterclose", function () {
|
|
||||||
|
|
||||||
$(this).off("popupafterclose").remove();
|
|
||||||
})[0];
|
|
||||||
|
|
||||||
$('.detailsMenuLeftButton', elem).on('click', function () {
|
|
||||||
|
|
||||||
var overlay = $(this).parents('.detailsMenu')[0];
|
|
||||||
setItemIntoOverlay(overlay, parseInt(overlay.getAttribute('data-index') || '0') - 1, context);
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.detailsMenuRightButton', elem).on('click', function () {
|
|
||||||
|
|
||||||
var overlay = $(this).parents('.detailsMenu')[0];
|
|
||||||
setItemIntoOverlay(overlay, parseInt(overlay.getAttribute('data-index') || '0') + 1, context);
|
|
||||||
});
|
|
||||||
|
|
||||||
return elem;
|
|
||||||
}
|
|
||||||
|
|
||||||
function setItemIntoOverlay(elem, index) {
|
|
||||||
|
|
||||||
var ids = elem.getAttribute('data-ids').split(',');
|
|
||||||
var itemId = ids[index];
|
|
||||||
var userId = Dashboard.getCurrentUserId();
|
|
||||||
var context = elem.getAttribute('data-context');
|
|
||||||
|
|
||||||
elem.setAttribute('data-index', index);
|
|
||||||
|
|
||||||
if (index > 0) {
|
|
||||||
$('.detailsMenuLeftButton', elem).show();
|
|
||||||
} else {
|
|
||||||
$('.detailsMenuLeftButton', elem).hide();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (index < ids.length - 1) {
|
|
||||||
$('.detailsMenuRightButton', elem).show();
|
|
||||||
} else {
|
|
||||||
$('.detailsMenuRightButton', elem).hide();
|
|
||||||
}
|
|
||||||
|
|
||||||
var promise1 = ApiClient.getItem(userId, itemId);
|
|
||||||
var promise2 = Dashboard.getCurrentUser();
|
|
||||||
|
|
||||||
$.when(promise1, promise2).done(function (response1, response2) {
|
|
||||||
|
|
||||||
var item = response1[0];
|
|
||||||
var user = response2[0];
|
|
||||||
|
|
||||||
var background = 'none';
|
|
||||||
|
|
||||||
if (AppInfo.enableDetailsMenuImages) {
|
|
||||||
var backdropUrl;
|
|
||||||
var screenWidth = $(window).width();
|
|
||||||
var backdropWidth = Math.min(screenWidth, 800);
|
|
||||||
|
|
||||||
if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
|
||||||
|
|
||||||
backdropUrl = ApiClient.getScaledImageUrl(item.Id, {
|
|
||||||
type: "Backdrop",
|
|
||||||
index: 0,
|
|
||||||
maxWidth: backdropWidth,
|
|
||||||
tag: item.BackdropImageTags[0]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
|
|
||||||
|
|
||||||
backdropUrl = ApiClient.getScaledImageUrl(item.ParentBackdropItemId, {
|
|
||||||
type: 'Backdrop',
|
|
||||||
index: 0,
|
|
||||||
tag: item.ParentBackdropImageTags[0],
|
|
||||||
maxWidth: backdropWidth
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (backdropUrl) {
|
|
||||||
background = 'url(' + backdropUrl + ')';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$('.detailsMenuContent', elem).css('backgroundImage', background);
|
|
||||||
|
|
||||||
var headerHtml = LibraryBrowser.getPosterViewDisplayName(item);
|
|
||||||
$('.detailsMenuHeader', elem).removeClass('detailsMenuHeaderWithLogo');
|
|
||||||
if (AppInfo.enableDetailsMenuImages) {
|
|
||||||
|
|
||||||
var logoUrl;
|
|
||||||
|
|
||||||
var logoHeight = 30;
|
|
||||||
if (item.ImageTags && item.ImageTags.Logo) {
|
|
||||||
|
|
||||||
logoUrl = ApiClient.getScaledImageUrl(item.Id, {
|
|
||||||
type: "Logo",
|
|
||||||
index: 0,
|
|
||||||
maxHeight: logoHeight,
|
|
||||||
tag: item.ImageTags.Logo
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (logoUrl) {
|
|
||||||
headerHtml = '<img src="' + logoUrl + '" style="height:' + logoHeight + 'px;" />';
|
|
||||||
$('.detailsMenuHeader', elem).addClass('detailsMenuHeaderWithLogo');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$('h3', elem).html(headerHtml);
|
|
||||||
|
|
||||||
var contentHtml = '';
|
|
||||||
|
|
||||||
var miscInfo = LibraryBrowser.getMiscInfoHtml(item);
|
|
||||||
if (miscInfo) {
|
|
||||||
|
|
||||||
contentHtml += '<p>' + miscInfo + '</p>';
|
|
||||||
}
|
|
||||||
|
|
||||||
var userData = LibraryBrowser.getUserDataIconsHtml(item);
|
|
||||||
if (userData) {
|
|
||||||
|
|
||||||
contentHtml += '<p class="detailsMenuUserData">' + userData + '</p>';
|
|
||||||
}
|
|
||||||
|
|
||||||
var ratingHtml = LibraryBrowser.getRatingHtml(item);
|
|
||||||
if (ratingHtml) {
|
|
||||||
|
|
||||||
contentHtml += '<p>' + ratingHtml + '</p>';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (item.Overview) {
|
|
||||||
contentHtml += '<p class="detailsMenuOverview">' + item.Overview + '</p>';
|
|
||||||
}
|
|
||||||
|
|
||||||
contentHtml += '<div class="detailsMenuButtons">';
|
|
||||||
|
|
||||||
if (MediaController.canPlay(item)) {
|
|
||||||
if (item.MediaType == 'Video' && !item.IsFolder && item.UserData && item.UserData.PlaybackPositionTicks) {
|
|
||||||
contentHtml += '<paper-button raised class="secondary btnResume" style="background-color:#ff8f00;"><iron-icon icon="play-arrow"></iron-icon><span>' + Globalize.translate('ButtonResume') + '</span></paper-button>';
|
|
||||||
}
|
|
||||||
|
|
||||||
contentHtml += '<paper-button raised class="secondary btnPlay"><iron-icon icon="play-arrow"></iron-icon><span>' + Globalize.translate('ButtonPlay') + '</span></paper-button>';
|
|
||||||
}
|
|
||||||
|
|
||||||
contentHtml += '<paper-button data-href="' + LibraryBrowser.getHref(item, context) + '" raised class="submit" style="background-color: #673AB7;" onclick="Dashboard.navigate(this.getAttribute(\'data-href\'));"><iron-icon icon="folder-open"></iron-icon><span>' + Globalize.translate('ButtonOpen') + '</span></paper-button>';
|
|
||||||
|
|
||||||
if (SyncManager.isAvailable(item, user)) {
|
|
||||||
contentHtml += '<paper-button raised class="submit btnSync"><iron-icon icon="sync"></iron-icon><span>' + Globalize.translate('ButtonSync') + '</span></paper-button>';
|
|
||||||
}
|
|
||||||
|
|
||||||
contentHtml += '</div>';
|
|
||||||
|
|
||||||
$('.detailsMenuContentInner', elem).html(contentHtml).trigger('create');
|
|
||||||
|
|
||||||
$('.btnSync', elem).on('click', function () {
|
|
||||||
|
|
||||||
$(elem).popup('close');
|
|
||||||
|
|
||||||
SyncManager.showMenu({
|
|
||||||
items: [item]
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.btnPlay', elem).on('click', function () {
|
|
||||||
|
|
||||||
$(elem).popup('close');
|
|
||||||
|
|
||||||
MediaController.play({
|
|
||||||
items: [item]
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.btnResume', elem).on('click', function () {
|
|
||||||
|
|
||||||
$(elem).popup('close');
|
|
||||||
|
|
||||||
MediaController.play({
|
|
||||||
items: [item],
|
|
||||||
startPositionTicks: item.UserData.PlaybackPositionTicks
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function showItemsOverlay(options) {
|
|
||||||
|
|
||||||
var context = options.context;
|
|
||||||
|
|
||||||
require(['jqmpopup'], function () {
|
|
||||||
var elem = getItemsOverlay(options.ids, context);
|
|
||||||
|
|
||||||
setItemIntoOverlay(elem, 0);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function parentWithClass(elem, className) {
|
function parentWithClass(elem, className) {
|
||||||
|
|
||||||
while (!elem.classList || !elem.classList.contains(className)) {
|
while (!elem.classList || !elem.classList.contains(className)) {
|
||||||
|
@ -933,6 +732,12 @@
|
||||||
|
|
||||||
function onHoverIn(e) {
|
function onHoverIn(e) {
|
||||||
|
|
||||||
|
var elem = getCardHoverElement(e);
|
||||||
|
|
||||||
|
if (!elem) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (preventHover === true) {
|
if (preventHover === true) {
|
||||||
preventHover = false;
|
preventHover = false;
|
||||||
return;
|
return;
|
||||||
|
@ -943,14 +748,11 @@
|
||||||
showOverlayTimeout = null;
|
showOverlayTimeout = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
var elem = this;
|
|
||||||
|
|
||||||
while (!elem.classList.contains('card')) {
|
while (!elem.classList.contains('card')) {
|
||||||
elem = elem.parentNode;
|
elem = elem.parentNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
showOverlayTimeout = setTimeout(function () {
|
showOverlayTimeout = setTimeout(function () {
|
||||||
|
|
||||||
onShowTimerExpired(elem);
|
onShowTimerExpired(elem);
|
||||||
|
|
||||||
}, 1000);
|
}, 1000);
|
||||||
|
@ -960,31 +762,33 @@
|
||||||
preventHover = true;
|
preventHover = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.off('click', onCardClick);
|
|
||||||
this.on('click', onCardClick);
|
|
||||||
|
|
||||||
if (AppInfo.isTouchPreferred) {
|
|
||||||
this.off('contextmenu', disableEvent);
|
|
||||||
this.on('contextmenu', disableEvent);
|
|
||||||
//this.off('contextmenu', onContextMenu);
|
|
||||||
//this.on('contextmenu', onContextMenu);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.off('contextmenu', onContextMenu);
|
|
||||||
this.on('contextmenu', onContextMenu);
|
|
||||||
|
|
||||||
this.off('mouseenter', '.card:not(.bannerCard) .cardContent', onHoverIn);
|
|
||||||
this.on('mouseenter', '.card:not(.bannerCard) .cardContent', onHoverIn);
|
|
||||||
|
|
||||||
this.off('mouseleave', '.card:not(.bannerCard) .cardContent', onHoverOut);
|
|
||||||
this.on('mouseleave', '.card:not(.bannerCard) .cardContent', onHoverOut);
|
|
||||||
|
|
||||||
this.off("touchstart", '.card:not(.bannerCard) .cardContent', preventTouchHover);
|
|
||||||
this.on("touchstart", '.card:not(.bannerCard) .cardContent', preventTouchHover);
|
|
||||||
}
|
|
||||||
|
|
||||||
for (var i = 0, length = this.length; i < length; i++) {
|
for (var i = 0, length = this.length; i < length; i++) {
|
||||||
initTapHoldMenus(this[i]);
|
|
||||||
|
var curr = this[i];
|
||||||
|
curr.removeEventListener('click', onCardClick);
|
||||||
|
curr.addEventListener('click', onCardClick);
|
||||||
|
|
||||||
|
if (AppInfo.isTouchPreferred) {
|
||||||
|
curr.removeEventListener('contextmenu', disableEvent);
|
||||||
|
curr.addEventListener('contextmenu', disableEvent);
|
||||||
|
//this.off('contextmenu', onContextMenu);
|
||||||
|
//this.on('contextmenu', onContextMenu);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
curr.removeEventListener('contextmenu', onContextMenu);
|
||||||
|
curr.addEventListener('contextmenu', onContextMenu);
|
||||||
|
|
||||||
|
curr.removeEventListener('mouseenter', onHoverIn);
|
||||||
|
curr.addEventListener('mouseenter', onHoverIn, true);
|
||||||
|
|
||||||
|
curr.removeEventListener('mouseleave', onHoverOut);
|
||||||
|
curr.addEventListener('mouseleave', onHoverOut, true);
|
||||||
|
|
||||||
|
curr.removeEventListener("touchstart", preventTouchHover);
|
||||||
|
curr.addEventListener("touchstart", preventTouchHover);
|
||||||
|
}
|
||||||
|
|
||||||
|
initTapHoldMenus(curr);
|
||||||
}
|
}
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
|
@ -1368,7 +1172,11 @@
|
||||||
|
|
||||||
function onItemWithActionClick(e) {
|
function onItemWithActionClick(e) {
|
||||||
|
|
||||||
var elem = this;
|
var elem = parentWithClass(e.target, 'itemWithAction');
|
||||||
|
|
||||||
|
if (!elem) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
var action = elem.getAttribute('data-action');
|
var action = elem.getAttribute('data-action');
|
||||||
var elemWithAttributes = elem;
|
var elemWithAttributes = elem;
|
||||||
|
@ -1400,6 +1208,7 @@
|
||||||
MediaController.instantMix(itemId);
|
MediaController.instantMix(itemId);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1436,7 +1245,7 @@
|
||||||
|
|
||||||
var page = this;
|
var page = this;
|
||||||
|
|
||||||
$(page).on('click', '.itemWithAction', onItemWithActionClick);
|
page.addEventListener('click', onItemWithActionClick);
|
||||||
|
|
||||||
var itemsContainers = page.querySelectorAll('.itemsContainer:not(.noautoinit)');
|
var itemsContainers = page.querySelectorAll('.itemsContainer:not(.noautoinit)');
|
||||||
for (var i = 0, length = itemsContainers.length; i < length; i++) {
|
for (var i = 0, length = itemsContainers.length; i < length; i++) {
|
||||||
|
|
|
@ -135,7 +135,7 @@
|
||||||
if (mainDrawerButton) {
|
if (mainDrawerButton) {
|
||||||
if (AppInfo.isTouchPreferred || $.browser.mobile) {
|
if (AppInfo.isTouchPreferred || $.browser.mobile) {
|
||||||
|
|
||||||
Events.on(mainDrawerButton, 'click', openMainDrawer);
|
mainDrawerButton.addEventListener('click', openMainDrawer);
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
$(mainDrawerButton).createHoverTouch().on('hovertouch', openMainDrawer);
|
$(mainDrawerButton).createHoverTouch().on('hovertouch', openMainDrawer);
|
||||||
|
@ -144,7 +144,7 @@
|
||||||
|
|
||||||
var headerBackButton = document.querySelector('.headerBackButton');
|
var headerBackButton = document.querySelector('.headerBackButton');
|
||||||
if (headerBackButton) {
|
if (headerBackButton) {
|
||||||
Events.on(headerBackButton, 'click', onBackClick);
|
headerBackButton.addEventListener('click', onBackClick);
|
||||||
}
|
}
|
||||||
|
|
||||||
var viewMenuBar = document.querySelector(".viewMenuBar");
|
var viewMenuBar = document.querySelector(".viewMenuBar");
|
||||||
|
@ -226,9 +226,10 @@
|
||||||
|
|
||||||
document.querySelector('.mainDrawerPanel').closeDrawer();
|
document.querySelector('.mainDrawerPanel').closeDrawer();
|
||||||
}
|
}
|
||||||
function onMainDrawerSelect() {
|
function onMainDrawerSelect(e) {
|
||||||
|
|
||||||
if (this.selected == 'main') {
|
var drawer = e.target;
|
||||||
|
if (drawer.selected == 'main') {
|
||||||
|
|
||||||
document.body.classList.remove('bodyWithPopupOpen');
|
document.body.classList.remove('bodyWithPopupOpen');
|
||||||
document.querySelector('.mainDrawerPanel #drawer').classList.remove('verticalScrollingDrawer');
|
document.querySelector('.mainDrawerPanel #drawer').classList.remove('verticalScrollingDrawer');
|
||||||
|
@ -385,7 +386,7 @@
|
||||||
|
|
||||||
drawer.querySelector('.userFooter').innerHTML = html;
|
drawer.querySelector('.userFooter').innerHTML = html;
|
||||||
|
|
||||||
Events.on(drawer.querySelector('.lnkManageServer'), 'click', onManageServerClicked);
|
drawer.querySelector('.lnkManageServer').addEventListener('click', onManageServerClicked);
|
||||||
}
|
}
|
||||||
|
|
||||||
function onSidebarLinkClick() {
|
function onSidebarLinkClick() {
|
||||||
|
@ -998,7 +999,7 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
var mainDrawerPanel = document.querySelector('.mainDrawerPanel');
|
var mainDrawerPanel = document.querySelector('.mainDrawerPanel');
|
||||||
Events.on(mainDrawerPanel, 'iron-select', onMainDrawerSelect);
|
mainDrawerPanel.addEventListener('iron-select', onMainDrawerSelect);
|
||||||
});
|
});
|
||||||
|
|
||||||
})(window, document, jQuery, window.devicePixelRatio);
|
})(window, document, jQuery, window.devicePixelRatio);
|
||||||
|
|
|
@ -674,9 +674,9 @@ var Dashboard = {
|
||||||
});
|
});
|
||||||
|
|
||||||
// Has to be assigned a z-index after the call to .open()
|
// Has to be assigned a z-index after the call to .open()
|
||||||
$(dlg).on('iron-overlay-closed', function (e) {
|
dlg.addEventListener('iron-overlay-closed', function (e) {
|
||||||
|
|
||||||
this.parentNode.removeChild(this);
|
dlg.parentNode.removeChild(dlg);
|
||||||
});
|
});
|
||||||
|
|
||||||
dlg.open();
|
dlg.open();
|
||||||
|
@ -729,9 +729,10 @@ var Dashboard = {
|
||||||
var dlg = document.getElementById(id);
|
var dlg = document.getElementById(id);
|
||||||
|
|
||||||
// Has to be assigned a z-index after the call to .open()
|
// Has to be assigned a z-index after the call to .open()
|
||||||
$(dlg).on('iron-overlay-closed', function (e) {
|
dlg.addEventListener('iron-overlay-closed', function (e) {
|
||||||
var confirmed = this.closingReason.confirmed;
|
|
||||||
this.parentNode.removeChild(this);
|
var confirmed = dlg.closingReason.confirmed;
|
||||||
|
dlg.parentNode.removeChild(dlg);
|
||||||
|
|
||||||
if (callback) {
|
if (callback) {
|
||||||
callback(confirmed);
|
callback(confirmed);
|
||||||
|
@ -2009,7 +2010,7 @@ var AppInfo = {};
|
||||||
|
|
||||||
$(document.body).append(footerHtml);
|
$(document.body).append(footerHtml);
|
||||||
|
|
||||||
$(window).on("beforeunload", function () {
|
window.addEventListener("beforeunload", function () {
|
||||||
|
|
||||||
var apiClient = window.ApiClient;
|
var apiClient = window.ApiClient;
|
||||||
|
|
||||||
|
@ -2028,14 +2029,6 @@ var AppInfo = {};
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
$(document).on('contextmenu', '.ui-popup-screen', function (e) {
|
|
||||||
|
|
||||||
$('.ui-popup').popup('close');
|
|
||||||
|
|
||||||
e.preventDefault();
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (Dashboard.isRunningInCordova()) {
|
if (Dashboard.isRunningInCordova()) {
|
||||||
require(['cordova/connectsdk', 'scripts/registrationservices', 'cordova/back']);
|
require(['cordova/connectsdk', 'scripts/registrationservices', 'cordova/back']);
|
||||||
|
|
||||||
|
@ -2468,9 +2461,9 @@ var AppInfo = {};
|
||||||
onWebComponentsReady();
|
onWebComponentsReady();
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
$(document).on('WebComponentsReady', function() {
|
document.addEventListener('WebComponentsReady', function () {
|
||||||
|
|
||||||
setTimeout(onWebComponentsReady, 200);
|
setTimeout(onWebComponentsReady, 300);
|
||||||
});
|
});
|
||||||
require(['bower_components/webcomponentsjs/webcomponents-lite.js']);
|
require(['bower_components/webcomponentsjs/webcomponents-lite.js']);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,16 @@
|
||||||
/* Panel */
|
/* preset breakpoint to switch to stacked grid styles below 35em (560px) */
|
||||||
|
@media (max-width: 35em) {
|
||||||
|
.ui-responsive > .ui-block-a,
|
||||||
|
.ui-responsive > .ui-block-b,
|
||||||
|
.ui-responsive > .ui-block-c,
|
||||||
|
.ui-responsive > .ui-block-d,
|
||||||
|
.ui-responsive > .ui-block-e {
|
||||||
|
width: 100%;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Panel */
|
||||||
.ui-panel {
|
.ui-panel {
|
||||||
width: 17em;
|
width: 17em;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
|
|
|
@ -1,4 +1,59 @@
|
||||||
.ui-table {
|
.ui-block-a,
|
||||||
|
.ui-block-b,
|
||||||
|
.ui-block-c,
|
||||||
|
.ui-block-d,
|
||||||
|
.ui-block-e {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
float: left;
|
||||||
|
min-height: 1px;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
/* force new row */
|
||||||
|
.ui-block-a {
|
||||||
|
clear: left;
|
||||||
|
}
|
||||||
|
li.ui-block-a,
|
||||||
|
li.ui-block-b,
|
||||||
|
li.ui-block-c,
|
||||||
|
li.ui-block-d,
|
||||||
|
li.ui-block-e {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
/* No margin in grids for 100% width button elements until we can use max-width: fill-available; */
|
||||||
|
[class*="ui-block-"] > button.ui-btn {
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
[class*="ui-block-"] > .ui-btn,
|
||||||
|
[class*="ui-block-"] > .ui-select,
|
||||||
|
[class*="ui-block-"] > .ui-checkbox,
|
||||||
|
[class*="ui-block-"] > .ui-radio,
|
||||||
|
[class*="ui-block-"] > button.ui-btn-inline,
|
||||||
|
[class*="ui-block-"] > button.ui-btn-icon-notext {
|
||||||
|
margin-right: .3125em;
|
||||||
|
margin-left: .3125em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* preset breakpoint to switch to stacked grid styles below 35em (560px) */
|
||||||
|
@media (max-width: 35em) {
|
||||||
|
.ui-responsive > .ui-block-a,
|
||||||
|
.ui-responsive > .ui-block-b,
|
||||||
|
.ui-responsive > .ui-block-c,
|
||||||
|
.ui-responsive > .ui-block-d,
|
||||||
|
.ui-responsive > .ui-block-e {
|
||||||
|
width: 100%;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-table {
|
||||||
border: 0;
|
border: 0;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
|
@ -290,218 +290,4 @@ button.ui-btn-icon-notext,
|
||||||
/* Used for hiding elements by the filterable widget. You can also use this class to hide list items or buttons in controlgroups; this ensures correct corner styling. */
|
/* Used for hiding elements by the filterable widget. You can also use this class to hide list items or buttons in controlgroups; this ensures correct corner styling. */
|
||||||
.ui-screen-hidden {
|
.ui-screen-hidden {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* content configurations. */
|
|
||||||
.ui-grid-a,
|
|
||||||
.ui-grid-b,
|
|
||||||
.ui-grid-c,
|
|
||||||
.ui-grid-d,
|
|
||||||
.ui-grid-solo {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.ui-block-a,
|
|
||||||
.ui-block-b,
|
|
||||||
.ui-block-c,
|
|
||||||
.ui-block-d,
|
|
||||||
.ui-block-e {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
float: left;
|
|
||||||
min-height: 1px;
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
/* force new row */
|
|
||||||
.ui-block-a {
|
|
||||||
clear: left;
|
|
||||||
}
|
|
||||||
ul.ui-grid-a,
|
|
||||||
ul.ui-grid-b,
|
|
||||||
ul.ui-grid-c,
|
|
||||||
ul.ui-grid-d,
|
|
||||||
ul.ui-grid-solo,
|
|
||||||
li.ui-block-a,
|
|
||||||
li.ui-block-b,
|
|
||||||
li.ui-block-c,
|
|
||||||
li.ui-block-d,
|
|
||||||
li.ui-block-e {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
/* No margin in grids for 100% width button elements until we can use max-width: fill-available; */
|
|
||||||
[class*="ui-block-"] > button.ui-btn {
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
[class*="ui-block-"] > .ui-btn,
|
|
||||||
[class*="ui-block-"] > .ui-select,
|
|
||||||
[class*="ui-block-"] > .ui-checkbox,
|
|
||||||
[class*="ui-block-"] > .ui-radio,
|
|
||||||
[class*="ui-block-"] > button.ui-btn-inline,
|
|
||||||
[class*="ui-block-"] > button.ui-btn-icon-notext {
|
|
||||||
margin-right: .3125em;
|
|
||||||
margin-left: .3125em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui-grid-a > .ui-block-a,
|
|
||||||
.ui-grid-a > .ui-block-b {
|
|
||||||
/* width: 49.95%; IE7 */
|
|
||||||
/* margin-right: -.5px; BB5 */
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
.ui-grid-b > .ui-block-a,
|
|
||||||
.ui-grid-b > .ui-block-b,
|
|
||||||
.ui-grid-b > .ui-block-c {
|
|
||||||
/* width: 33.25%; IE7 */
|
|
||||||
/* margin-right: -.5px; BB5 */
|
|
||||||
width: 33.333%;
|
|
||||||
}
|
|
||||||
.ui-grid-c > .ui-block-a,
|
|
||||||
.ui-grid-c > .ui-block-b,
|
|
||||||
.ui-grid-c > .ui-block-c,
|
|
||||||
.ui-grid-c > .ui-block-d {
|
|
||||||
/* width: 24.925%; IE7 */
|
|
||||||
/* margin-right: -.5px; BB5 */
|
|
||||||
width: 25%;
|
|
||||||
}
|
|
||||||
.ui-grid-d > .ui-block-a,
|
|
||||||
.ui-grid-d > .ui-block-b,
|
|
||||||
.ui-grid-d > .ui-block-c,
|
|
||||||
.ui-grid-d > .ui-block-d,
|
|
||||||
.ui-grid-d > .ui-block-e {
|
|
||||||
/* width: 19.925%; IE7 */
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
.ui-grid-solo > .ui-block-a {
|
|
||||||
width: 100%;
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* preset breakpoint to switch to stacked grid styles below 35em (560px) */
|
|
||||||
@media (max-width: 35em) {
|
|
||||||
.ui-responsive > .ui-block-a,
|
|
||||||
.ui-responsive > .ui-block-b,
|
|
||||||
.ui-responsive > .ui-block-c,
|
|
||||||
.ui-responsive > .ui-block-d,
|
|
||||||
.ui-responsive > .ui-block-e {
|
|
||||||
width: 100%;
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Transitions originally inspired by those from jQtouch, nice work, folks */
|
|
||||||
.ui-mobile-viewport-transitioning,
|
|
||||||
.ui-mobile-viewport-transitioning .ui-page {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui-page-pre-in {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.in {
|
|
||||||
-webkit-animation-timing-function: ease-out;
|
|
||||||
-webkit-animation-duration: 350ms;
|
|
||||||
-moz-animation-timing-function: ease-out;
|
|
||||||
-moz-animation-duration: 350ms;
|
|
||||||
animation-timing-function: ease-out;
|
|
||||||
animation-duration: 350ms;
|
|
||||||
}
|
|
||||||
.out {
|
|
||||||
-webkit-animation-timing-function: ease-in;
|
|
||||||
-webkit-animation-duration: 225ms;
|
|
||||||
-moz-animation-timing-function: ease-in;
|
|
||||||
-moz-animation-duration: 225ms;
|
|
||||||
animation-timing-function: ease-in;
|
|
||||||
animation-duration: 225ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@-webkit-keyframes fadein {
|
|
||||||
from { opacity: 0; }
|
|
||||||
to { opacity: 1; }
|
|
||||||
}
|
|
||||||
@-moz-keyframes fadein {
|
|
||||||
from { opacity: 0; }
|
|
||||||
to { opacity: 1; }
|
|
||||||
}
|
|
||||||
@keyframes fadein {
|
|
||||||
from { opacity: 0; }
|
|
||||||
to { opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes fadeout {
|
|
||||||
from { opacity: 1; }
|
|
||||||
to { opacity: 0; }
|
|
||||||
}
|
|
||||||
@-moz-keyframes fadeout {
|
|
||||||
from { opacity: 1; }
|
|
||||||
to { opacity: 0; }
|
|
||||||
}
|
|
||||||
@keyframes fadeout {
|
|
||||||
from { opacity: 1; }
|
|
||||||
to { opacity: 0; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade.out {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-animation-duration: 125ms;
|
|
||||||
-webkit-animation-name: fadeout;
|
|
||||||
-moz-animation-duration: 125ms;
|
|
||||||
-moz-animation-name: fadeout;
|
|
||||||
animation-duration: 125ms;
|
|
||||||
animation-name: fadeout;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade.in {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-animation-duration: 225ms;
|
|
||||||
-webkit-animation-name: fadein;
|
|
||||||
-moz-animation-duration: 225ms;
|
|
||||||
-moz-animation-name: fadein;
|
|
||||||
animation-duration: 225ms;
|
|
||||||
animation-name: fadein;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide the native input element */
|
|
||||||
.ui-input-btn input {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
outline: 0;
|
|
||||||
-webkit-border-radius: inherit;
|
|
||||||
border-radius: inherit;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
cursor: pointer;
|
|
||||||
background: #fff;
|
|
||||||
background: rgba(255,255,255,0);
|
|
||||||
filter: Alpha(Opacity=0);
|
|
||||||
opacity: .1;
|
|
||||||
font-size: 1px;
|
|
||||||
text-indent: -9999px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
/* Fixes IE/WP filter alpha opacity bugs */
|
|
||||||
.ui-input-btn.ui-state-disabled input {
|
|
||||||
position: absolute !important;
|
|
||||||
height: 1px;
|
|
||||||
width: 1px;
|
|
||||||
overflow: hidden;
|
|
||||||
clip: rect(1px,1px,1px,1px);
|
|
||||||
}
|
}
|
Loading…
Add table
Add a link
Reference in a new issue