add print view

This commit is contained in:
rolux 2013-03-09 09:19:15 +05:30
parent 9330433f2c
commit ec3ffee3db
4 changed files with 70 additions and 8 deletions

View file

@ -37,6 +37,8 @@ appPanel
isEmbed = /^#\?/.test(document.location.hash) isEmbed = /^#\?/.test(document.location.hash)
&& /embed=true/.test(document.location.hash), && /embed=true/.test(document.location.hash),
isMSIE = /MSIE/.test(navigator.userAgent), isMSIE = /MSIE/.test(navigator.userAgent),
isPrint = /^#\?/.test(document.location.hash)
&& /print=true/.test(document.location.hash),
legacyThemes = {classic: 'oxlight', modern: 'oxdark'}, legacyThemes = {classic: 'oxlight', modern: 'oxdark'},
theme = localStorage && localStorage['Ox.theme'] theme = localStorage && localStorage['Ox.theme']
&& JSON.parse(localStorage['Ox.theme']) || 'oxmedium'; && JSON.parse(localStorage['Ox.theme']) || 'oxmedium';
@ -57,7 +59,7 @@ appPanel
images.logo = document.createElement('img'); images.logo = document.createElement('img');
images.logo.onload = function() { images.logo.onload = function() {
var ratio = images.logo.width / images.logo.height, var ratio = images.logo.width / images.logo.height,
width = isEmbed ? 96 : 320, width = isEmbed || isPrint ? 96 : 320,
height = width / ratio; height = width / ratio;
images.logo.style.position = 'absolute'; images.logo.style.position = 'absolute';
images.logo.style.left = 0; images.logo.style.left = 0;
@ -87,11 +89,11 @@ appPanel
images.loadingIcon.setAttribute('id', 'loadingIcon'); images.loadingIcon.setAttribute('id', 'loadingIcon');
images.loadingIcon.style.position = 'absolute'; images.loadingIcon.style.position = 'absolute';
images.loadingIcon.style.left = 0; images.loadingIcon.style.left = 0;
images.loadingIcon.style.top = isEmbed ? '32px' : '80px'; images.loadingIcon.style.top = isEmbed || isPrint ? '32px' : '80px';
images.loadingIcon.style.right = 0; images.loadingIcon.style.right = 0;
images.loadingIcon.style.bottom = 0; images.loadingIcon.style.bottom = 0;
images.loadingIcon.style.width = isEmbed ? '16px' : '32px'; images.loadingIcon.style.width = isEmbed || isPrint ? '16px' : '32px';
images.loadingIcon.style.height = isEmbed ? '16px' : '32px'; images.loadingIcon.style.height = isEmbed || isPrint ? '16px' : '32px';
images.loadingIcon.style.margin = 'auto'; images.loadingIcon.style.margin = 'auto';
images.loadingIcon.src = '/static/oxjs/' + (enableDebugMode ? 'dev' : 'build') images.loadingIcon.src = '/static/oxjs/' + (enableDebugMode ? 'dev' : 'build')
+ '/Ox.UI/themes/' + theme + '/svg/symbolLoading.svg'; + '/Ox.UI/themes/' + theme + '/svg/symbolLoading.svg';
@ -106,12 +108,12 @@ appPanel
var gradient = document.createElement('div'); var gradient = document.createElement('div');
gradient.style.position = 'absolute'; gradient.style.position = 'absolute';
gradient.style.left = 0; gradient.style.left = 0;
gradient.style.top = isEmbed ? '48px' : '160px'; gradient.style.top = isEmbed || isPrint ? '48px' : '160px';
gradient.style.right = 0; gradient.style.right = 0;
gradient.style.bottom = 0; gradient.style.bottom = 0;
// FIXME: should be 320 and 160 - the values below are temporary fixes for Chrome 26 // FIXME: should be 320 and 160 - the values below are temporary fixes for Chrome 26
gradient.style.width = isEmbed ? '98px' : '322px'; gradient.style.width = isEmbed || isPrint ? '98px' : '322px';
gradient.style.height = isEmbed ? '50px' : '162px'; gradient.style.height = isEmbed || isPrint ? '50px' : '162px';
gradient.style.margin = 'auto'; gradient.style.margin = 'auto';
gradient.style.background = theme == 'oxlight' ? '-moz-linear-gradient(top, rgba(224, 224, 224, 0.75), rgba(224, 224, 224, 1), rgba(224, 224, 224, 1))' gradient.style.background = theme == 'oxlight' ? '-moz-linear-gradient(top, rgba(224, 224, 224, 0.75), rgba(224, 224, 224, 1), rgba(224, 224, 224, 1))'
: theme == 'oxmedium' ? '-moz-linear-gradient(top, rgba(144, 144, 144, 0.75), rgba(144, 144, 144, 1), rgba(144, 144, 144, 1))' : theme == 'oxmedium' ? '-moz-linear-gradient(top, rgba(144, 144, 144, 0.75), rgba(144, 144, 144, 1), rgba(144, 144, 144, 1))'
@ -327,6 +329,8 @@ appPanel
} }
} }
}); });
} else if (isPrint) {
pandora.$ui.printView = pandora.ui.printView().display();
} else { } else {
pandora.$ui.appPanel = pandora.ui.appPanel().display(); pandora.$ui.appPanel = pandora.ui.appPanel().display();
Ox.Request.requests() && pandora.$ui.loadingIcon.start(); Ox.Request.requests() && pandora.$ui.loadingIcon.start();

View file

@ -1,6 +1,6 @@
'use strict'; 'use strict';
// FIXME: rename to embed // FIXME: rename to embedView
pandora.ui.embedPanel = function() { pandora.ui.embedPanel = function() {

View file

@ -307,6 +307,8 @@ pandora.ui.mainMenu = function() {
pandora.$ui.uploadDialog = pandora.ui.uploadDialog().open(); pandora.$ui.uploadDialog = pandora.ui.uploadDialog().open();
} else if (data.id == 'deletelist') { } else if (data.id == 'deletelist') {
pandora.ui.deleteListDialog().open(); pandora.ui.deleteListDialog().open();
} else if (data.id == 'print') {
window.open('#?print=true', '_blank')
} else if (data.id == 'showsidebar') { } else if (data.id == 'showsidebar') {
pandora.UI.set({showSidebar: !ui.showSidebar}); pandora.UI.set({showSidebar: !ui.showSidebar});
} else if (data.id == 'showinfo') { } else if (data.id == 'showinfo') {
@ -410,6 +412,9 @@ pandora.ui.mainMenu = function() {
} }
} }
}, },
key_control_p: function() {
window.open('#?print=true', '_blank');
},
key_control_shift_f: function() { key_control_shift_f: function() {
if (!pandora.hasDialogOrScreen()) { if (!pandora.hasDialogOrScreen()) {
pandora.$ui.filterDialog = pandora.ui.filterDialog().open(); pandora.$ui.filterDialog = pandora.ui.filterDialog().open();
@ -671,6 +676,7 @@ pandora.ui.mainMenu = function() {
{ id: 'editlist', title: 'Edit Selected List...', disabled: isGuest || !pandora.user.ui._list, keyboard: 'control e' }, { id: 'editlist', title: 'Edit Selected List...', disabled: isGuest || !pandora.user.ui._list, keyboard: 'control e' },
{ id: 'deletelist', title: 'Delete Selected List...', disabled: isGuest || !pandora.user.ui._list, keyboard: 'delete' }, { id: 'deletelist', title: 'Delete Selected List...', disabled: isGuest || !pandora.user.ui._list, keyboard: 'delete' },
{}, {},
{ id: 'print', title: 'Print', keyboard: 'control p' },
{ id: 'tv', title: 'TV', keyboard: 'control space' } { id: 'tv', title: 'TV', keyboard: 'control space' }
] ]
)}; )};

View file

@ -0,0 +1,52 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript
'use strict';
pandora.ui.printView = function(data) {
var that = Ox.Element()
.css({
padding: '64px 128px',
backgroundColor: 'rgb(255, 255, 255)',
color: 'rgb(0, 0, 0)'
}),
keys = ['director', 'year', 'title'];
pandora.api.find({
keys: keys.concat(['id']),
query: pandora.user.ui.find,
range: [0, 1000000],
sort: keys.map(function(key) {
return {
key: key,
operator: Ox.getObjectById(pandora.site.itemKeys, 'year').operator
};
})
}, function(result) {
result.data.items && result.data.items.forEach(function(item) {
var url = (pandora.site.https ? 'https://' : 'http://')
+ pandora.site.url + '/' + item.id;
$('<div>')
.attr({title: url})
.css({
height: '16px',
overflow: 'hidden',
textOverflow: 'ellipsis'
})
.html(
(item.director ? item.director.join(', ') + ': ' : '')
+ '<b>' + item.title + '</b>'
+ (item.year ? ' (' + item.year + ')' : '')
)
.on({
click: function() {
document.location.href = url;
}
})
.appendTo(that);
});
});
return that;
};