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

animate now playing bar

Browse source
This commit is contained in:
Luke Pulverenti 2015-11-30 00:33:29 -05:00
parent 4a80f8d99b
commit 7dd1eedf26
21 changed files with 3722 additions and 6204 deletions
Download patch file Download diff file Expand all files Collapse all files

93
dashboard-ui/scripts/actionsheet.js
View file

@ -6,18 +6,16 @@
// positionTo
// showCancel
// title
var id = 'dlg' + new Date().getTime();
var html = '';
var style = "";
var windowHeight = $(window).height();
var pos;
// If the window height is under a certain amount, don't bother trying to position
// based on an element.
if (options.positionTo && windowHeight >= 540) {
var pos = $(options.positionTo).offset();
pos = $(options.positionTo).offset();
pos.top += $(options.positionTo).innerHeight() / 2;
pos.left += $(options.positionTo).innerWidth() / 2;
@ -41,12 +39,8 @@
// Do some boundary checking
pos.top = Math.max(pos.top, 0);
pos.left = Math.max(pos.left, 0);
style += 'position:fixed;top:' + pos.top + 'px;left:' + pos.left + 'px';
}
html += '<paper-dialog id="' + id + '" with-backdrop style="' + style + '">';
if (options.title) {
html += '<h2>';
html += options.title;
@ -93,57 +87,62 @@
html += '</div>';
}
html += '</paper-dialog>';
var dlg = document.createElement('paper-dialog');
dlg.setAttribute('with-backdrop', 'with-backdrop');
dlg.innerHTML = html;
$(document.body).append(html);
if (pos) {
dlg.style.position = 'fixed';
dlg.style.left = pos.left + 'px';
dlg.style.top = pos.top + 'px';
}
document.body.appendChild(dlg);
// The animations flicker in IE and Firefox (probably wherever the polyfill is used)
if (browserInfo.chrome) {
dlg.animationConfig = {
// scale up
'entry': {
name: 'scale-up-animation',
node: dlg,
timing: { duration: 160, easing: 'ease-out' }
},
// fade out
'exit': {
name: 'fade-out-animation',
node: dlg,
timing: { duration: 200, easing: 'ease-in' }
}
};
}
setTimeout(function () {
var dlg = document.getElementById(id);
// The animations flicker in IE and Firefox (probably wherever the polyfill is used)
if (browserInfo.chrome) {
dlg.animationConfig = {
// scale up
'entry': {
name: 'scale-up-animation',
node: dlg,
timing: { duration: 160, easing: 'ease-out' }
},
// fade out
'exit': {
name: 'fade-out-animation',
node: dlg,
timing: { duration: 200, easing: 'ease-in' }
}
};
}
dlg.open();
}, 10);
// Has to be assigned a z-index after the call to .open()
$(dlg).on('iron-overlay-closed', function () {
$(this).remove();
});
// Has to be assigned a z-index after the call to .open()
dlg.addEventListener('iron-overlay-closed', function () {
dlg.parentNode.removeChild(dlg);
});
// Seeing an issue in some non-chrome browsers where this is requiring a double click
var eventName = browserInfo.chrome || browserInfo.safari ? 'click' : 'mousedown';
// Seeing an issue in some non-chrome browsers where this is requiring a double click
var eventName = browserInfo.chrome || browserInfo.safari ? 'click' : 'mousedown';
$('.actionSheetMenuItem', dlg).on(eventName, function () {
$('.actionSheetMenuItem', dlg).on(eventName, function () {
var selectedId = this.getAttribute('data-id');
var selectedId = this.getAttribute('data-id');
// Add a delay here to allow the click animation to finish, for nice effect
setTimeout(function () {
// Add a delay here to allow the click animation to finish, for nice effect
setTimeout(function () {
dlg.close();
dlg.close();
if (options.callback) {
options.callback(selectedId);
}
if (options.callback) {
options.callback(selectedId);
}
}, 100);
});
}, 100);
}, 100);
});
}
window.ActionSheetElement = {