0x2620/pandora
2
1
Fork 1
Code Issues 1.3k Pull requests Releases Wiki Activity

use svg

Browse source
This commit is contained in:
rolux 2011-03-07 22:32:29 +00:00
parent 7e6a728280
commit c53a1009e5
1 changed files with 84 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
static/js/pandora.js
View file

@ -27,7 +27,6 @@
return key.find ? key : null; return key.find ? key : null;
}), }),
infoRatio: 16 / 9, infoRatio: 16 / 9,
scrollbarSize: $.browser.mozilla ? 16 : 12,
sectionElement: 'buttons', sectionElement: 'buttons',
sectionFolders: { sectionFolders: {
site: $.merge([ site: $.merge([
@ -464,7 +463,7 @@
$bin.$content.append( $bin.$content.append(
$('<div>').css({ height: '20px' }).append( $('<div>').css({ height: '20px' }).append(
$('<div>').css({ float: 'left', width: '16px', height: '16px', margin: '1px'}).append( $('<div>').css({ float: 'left', width: '16px', height: '16px', margin: '1px'}).append(
$('<img>').attr({ src: 'static/oxjs/build/png/ox.ui.modern/iconFind.png' }).css({ width: '16px', height: '16px', border: 0, background: 'rgb(64, 64, 64)', WebkitBorderRadius: '2px' }) $('<img>').attr({ src: Ox.UI.getImagePath('iconFind.svg') }).css({ width: '16px', height: '16px', border: 0, background: 'rgb(64, 64, 64)', WebkitBorderRadius: '2px' })
) )
).append( ).append(
$('<div>').css({ float: 'left', width: '122px', height: '14px', margin: '2px' }).html('Foo') $('<div>').css({ float: 'left', width: '122px', height: '14px', margin: '2px' }).html('Foo')
@ -604,7 +603,7 @@
}); });
} }
that.update = function() { that.update = function() {
app.$ui.contentPanel.replace(0, app.$ui.browser = ui.browser()); app.$ui.contentPanel.replaceElement(0, app.$ui.browser = ui.browser());
} }
return that; return that;
}, },
@ -627,7 +626,7 @@
collapsed: !app.user.ui.showMovies, collapsed: !app.user.ui.showMovies,
collapsible: true, collapsible: true,
element: app.$ui.browser = ui.browser(), element: app.$ui.browser = ui.browser(),
size: 112 + app.ui.scrollbarSize size: 112 + Ox.UI.SCROLLBAR_SIZE
}, },
{ {
element: app.$ui.item = ui.item(app.user.ui.item, app.user.ui.itemView) element: app.$ui.item = ui.item(app.user.ui.item, app.user.ui.itemView)
@ -691,7 +690,7 @@
height: 264, height: 264,
keys: {enter: 'save', escape: 'cancel'}, keys: {enter: 'save', escape: 'cancel'},
title: 'Advanced Find', title: 'Advanced Find',
width: 616 + app.ui.scrollbarSize width: 616 + Ox.UI.SCROLLBAR_SIZE
}); });
return that; return that;
}, },
@ -864,7 +863,7 @@
}); });
app.$ui.findListInput = new Ox.Input({ app.$ui.findListInput = new Ox.Input({
placeholder: 'Find User', placeholder: 'Find User',
width: 184 - app.ui.scrollbarSize width: 184 - Ox.UI.SCROLLBAR_SIZE
}) })
.css({ .css({
margin: '4px', margin: '4px',
@ -874,20 +873,27 @@
return that; return that;
}, },
folderBrowserList: function(id) { folderBrowserList: function(id) {
var columnWidth = (app.user.ui.sidebarSize - app.ui.scrollbarSize - 88) / 2, var columnWidth = (app.user.ui.sidebarSize - Ox.UI.SCROLLBAR_SIZE - 88) / 2,
i = Ox.getPositionById(app.ui.sectionFolders[app.user.ui.section], id), i = Ox.getPositionById(app.ui.sectionFolders[app.user.ui.section], id),
that = new Ox.TextList({ that = new Ox.TextList({
columns: [ columns: [
{ {
format: function() { format: function() {
return $('<img>').attr({ return $('<img>')
.attr({
src: 'static/oxjs/build/png/ox.ui/icon16.png' src: 'static/oxjs/build/png/ox.ui/icon16.png'
}); });
}, },
id: 'id', id: 'id',
operator: '+', operator: '+',
title: $('<img>').attr({ title: $('<img>')
.attr({
src: 'static/oxjs/build/png/ox.ui/icon16.png' src: 'static/oxjs/build/png/ox.ui/icon16.png'
})
.css({
width: '10px',
height: '10px',
padding: '3px 2px 1px 2px',
}), }),
unique: true, unique: true,
visible: true, visible: true,
@ -922,18 +928,25 @@
format: function(value) { format: function(value) {
return $('<img>') return $('<img>')
.attr({ .attr({
src: 'static/oxjs/build/png/ox.ui.' + Ox.theme() + src: Ox.UI.getImagePath('symbolFind.svg')
'/symbolFind.png'
}) })
.css({ .css({
width: '10px',
height: '10px',
padding: '3px 2px 1px 2px', // fixme: strange
opacity: value == 'static' ? 0.1 : 1 opacity: value == 'static' ? 0.1 : 1
}); });
}, },
id: 'type', id: 'type',
operator: '+', operator: '+',
title: $('<img>').attr({ title: $('<img>')
src: 'static/oxjs/build/png/ox.ui.' + .attr({
Ox.theme() + '/symbolFind.png' src: Ox.UI.getImagePath('symbolFind.svg')
})
.css({
width: '10px',
height: '10px',
padding: '3px 2px 1px 2px',
}), }),
visible: true, visible: true,
width: 16 width: 16
@ -943,19 +956,30 @@
format: function(value) { format: function(value) {
return $('<img>') return $('<img>')
.attr({ .attr({
src: 'static/oxjs/build/png/ox.ui.' + Ox.theme() + src: Ox.UI.getImagePath(
'/symbol' + (id == 'favorite' ? 'Check' : 'Star') + '.png' 'symbol' + (id == 'favorite' ? 'Check' : 'Star') + '.svg'
)
}) })
.css({ .css({
width: '10px',
height: '10px',
padding: '3px 2px 1px 2px',
opacity: id == 'favorite' ? (value ? 1 : 0.1) : opacity: id == 'favorite' ? (value ? 1 : 0.1) :
(value == 'featured' ? 1 : 0.1) (value == 'featured' ? 1 : 0.1)
}); });
}, },
id: id == 'favorite' ? 'subscribed' : 'status', id: id == 'favorite' ? 'subscribed' : 'status',
operator: '+', operator: '+',
title: $('<img>').attr({ title: $('<img>')
src: 'static/oxjs/build/png/ox.ui.' + Ox.theme() + .attr({
'/symbol' + (id == 'favorite' ? 'Check' : 'Star') + '.png' src: Ox.UI.getImagePath(
'symbol' + (id == 'favorite' ? 'Check' : 'Star') + '.svg'
)
})
.css({
width: '10px',
height: '10px',
padding: '3px 2px 1px 2px'
}), }),
visible: true, visible: true,
width: 16 width: 16
@ -1045,9 +1069,10 @@
columns: [ columns: [
{ {
format: function() { format: function() {
return $('<img>').attr({ return $('<img>')
.attr({
src: 'static/oxjs/build/png/ox.ui/icon16.png' src: 'static/oxjs/build/png/ox.ui/icon16.png'
}); })
}, },
id: 'id', id: 'id',
operator: '+', operator: '+',
@ -1134,10 +1159,12 @@
format: function(value) { format: function(value) {
return $('<img>') return $('<img>')
.attr({ .attr({
src: 'static/oxjs/build/png/ox.ui.' + Ox.theme() + src: Ox.UI.getImagePath('symbolFind.svg')
'/symbolFind.png'
}) })
.css({ .css({
width: '10px',
height: '10px',
padding: '3px 2px 1px 2px',
opacity: value == 'static' ? 0.1 : 1 opacity: value == 'static' ? 0.1 : 1
}); });
}, },
@ -1152,10 +1179,14 @@
//var symbols = {private: 'Publish', public: 'Publish', featured: 'Star'}; //var symbols = {private: 'Publish', public: 'Publish', featured: 'Star'};
return $('<img>') return $('<img>')
.attr({ .attr({
src: 'static/oxjs/build/png/ox.ui.' + Ox.theme() + '/symbol' src: Ox.UI.getImagePath(
+ (value == 'featured' ? 'Star' : 'Publish') + '.png' 'symbol' + (value == 'featured' ? 'Star' : 'Publish') + '.svg'
)
}) })
.css({ .css({
width: '10px',
height: '10px',
padding: '3px 2px 1px 2px',
opacity: value == 'private' ? 0.1 : 1 opacity: value == 'private' ? 0.1 : 1
}) })
}, },
@ -1612,7 +1643,7 @@
function replaceGroup(i, id, query) { function replaceGroup(i, id, query) {
// if query is passed, selected items will be derived from it // if query is passed, selected items will be derived from it
var isOuter = i % 4 == 0; var isOuter = i % 4 == 0;
app.$ui[isOuter ? 'browser' : 'groupsInnerPanel'].replace( app.$ui[isOuter ? 'browser' : 'groupsInnerPanel'].replaceElement(
isOuter ? i / 2 : i - 1, isOuter ? i / 2 : i - 1,
app.$ui.groups[i] = ui.group(id, query) app.$ui.groups[i] = ui.group(id, query)
); );
@ -1768,11 +1799,11 @@
} }
} }
})); }));
app.$ui.contentPanel.replace(1, app.$ui.item = $edit); app.$ui.contentPanel.replaceElement(1, app.$ui.item = $edit);
} else { } else {
$.get('/static/html/itemInfo.html', {}, function(template) { $.get('/static/html/itemInfo.html', {}, function(template) {
//Ox.print(template); //Ox.print(template);
app.$ui.contentPanel.replace(1, app.$ui.contentPanel.replaceElement(1,
app.$ui.item = new Ox.Element('div') app.$ui.item = new Ox.Element('div')
.append($.tmpl(template, result.data.item)) .append($.tmpl(template, result.data.item))
); );
@ -1786,7 +1817,7 @@
video.height = video.profiles[0] video.height = video.profiles[0]
video.width = parseInt(video.height * video.aspectRatio / 2) * 2; video.width = parseInt(video.height * video.aspectRatio / 2) * 2;
video.url = video.baseUrl + '/' + video.height + 'p.' + format; video.url = video.baseUrl + '/' + video.height + 'p.' + format;
app.$ui.contentPanel.replace(1, app.$ui.player = new Ox.VideoPanelPlayer({ app.$ui.contentPanel.replaceElement(1, app.$ui.player = new Ox.VideoPanelPlayer({
annotationsSize: app.user.ui.annotationsSize, annotationsSize: app.user.ui.annotationsSize,
duration: video.duration, duration: video.duration,
height: app.$ui.contentPanel.size(1), height: app.$ui.contentPanel.size(1),
@ -1827,7 +1858,7 @@
$.each(app.config.layers, function(i, layer) { $.each(app.config.layers, function(i, layer) {
layers[i] = $.extend({}, layer, {items: result.data.item.layers[layer.id]}); layers[i] = $.extend({}, layer, {items: result.data.item.layers[layer.id]});
}); });
app.$ui.contentPanel.replace(1, app.$ui.editor = new Ox.VideoEditor({ app.$ui.contentPanel.replaceElement(1, app.$ui.editor = new Ox.VideoEditor({
annotationsSize: app.user.ui.annotationsSize, annotationsSize: app.user.ui.annotationsSize,
cuts: cuts, cuts: cuts,
duration: video.duration, duration: video.duration,
@ -1895,7 +1926,7 @@
}); });
*/ */
} else if (app.user.ui.itemView == 'files') { } else if (app.user.ui.itemView == 'files') {
app.$ui.contentPanel.replace(1, app.$ui.contentPanel.replaceElement(1,
app.$ui.item = new Ox.FilesView({ app.$ui.item = new Ox.FilesView({
id: result.data.item.id id: result.data.item.id
}) })
@ -2376,7 +2407,7 @@
} }
}); });
that.display = function() { // fixme: used? that.display = function() { // fixme: used?
app.$ui.rightPanel.replace(1, app.$ui.contentPanel = ui.contentPanel()); app.$ui.rightPanel.replaceElement(1, app.$ui.contentPanel = ui.contentPanel());
}; };
return that; return that;
}, },
@ -3228,7 +3259,7 @@
app.$ui.findElement = ui.findElement() app.$ui.findElement = ui.findElement()
); );
that.display = function() { that.display = function() {
app.$ui.rightPanel.replace(0, app.$ui.toolbar = ui.toolbar()); // fixme: remove later app.$ui.rightPanel.replaceElement(0, app.$ui.toolbar = ui.toolbar()); // fixme: remove later
} }
return that; return that;
}, },
@ -3262,7 +3293,7 @@
var id = data.selected[0].id; var id = data.selected[0].id;
//UI.set({itemView: id}); //UI.set({itemView: id});
URL.set(app.user.ui.item + '/' + id); URL.set(app.user.ui.item + '/' + id);
// app.$ui.contentPanel.replace(1, app.$ui.item = ui.item()); // app.$ui.contentPanel.replaceElement(1, app.$ui.item = ui.item());
} }
}); });
return that; return that;
@ -3323,7 +3354,7 @@
app.user.ui.showSidebar && app.$ui.mainPanel.size(0, 0); app.user.ui.showSidebar && app.$ui.mainPanel.size(0, 0);
app.$ui.rightPanel.size(0, 0).size(2, 0); app.$ui.rightPanel.size(0, 0).size(2, 0);
!app.user.ui.showMovies && app.$ui.contentPanel.css({ !app.user.ui.showMovies && app.$ui.contentPanel.css({
top: (-112 - app.ui.scrollbarSize) + 'px' // fixme: rightPanel.size(0, 0) doesn't preserve negative top of browser top: (-112 - Ox.UI.SCROLLBAR_SIZE) + 'px' // fixme: rightPanel.size(0, 0) doesn't preserve negative top of browser
}); });
app.user.ui.showMovies && app.$ui.contentPanel.size(0, 0); app.user.ui.showMovies && app.$ui.contentPanel.size(0, 0);
app.$ui.player.options({ app.$ui.player.options({
@ -3337,9 +3368,9 @@
app.user.ui.showSidebar && app.$ui.mainPanel.size(0, app.user.ui.sidebarSize); app.user.ui.showSidebar && app.$ui.mainPanel.size(0, app.user.ui.sidebarSize);
app.$ui.rightPanel.size(0, 24).size(2, 16); app.$ui.rightPanel.size(0, 24).size(2, 16);
!app.user.ui.showMovies && app.$ui.contentPanel.css({ !app.user.ui.showMovies && app.$ui.contentPanel.css({
top: 24 + (-112 - app.ui.scrollbarSize) + 'px' // fixme: rightPanel.size(0, 0) doesn't preserve negative top of browser top: 24 + (-112 - Ox.UI.SCROLLBAR_SIZE) + 'px' // fixme: rightPanel.size(0, 0) doesn't preserve negative top of browser
}); });
app.user.ui.showMovies && app.$ui.contentPanel.size(0, 112 + app.ui.scrollbarSize); app.user.ui.showMovies && app.$ui.contentPanel.size(0, 112 + Ox.UI.SCROLLBAR_SIZE);
} }
function getListData() { function getListData() {
@ -3378,7 +3409,7 @@
// fixme: don't use height(), look up in splitpanels // fixme: don't use height(), look up in splitpanels
Ox.print(getFoldersHeight(), '>', app.$ui.leftPanel.height() - 24 - 1 - app.$ui.info.height()) Ox.print(getFoldersHeight(), '>', app.$ui.leftPanel.height() - 24 - 1 - app.$ui.info.height())
if (getFoldersHeight() > app.$ui.leftPanel.height() - 24 - 1 - app.$ui.info.height()) { if (getFoldersHeight() > app.$ui.leftPanel.height() - 24 - 1 - app.$ui.info.height()) {
width -= app.ui.scrollbarSize; width -= Ox.UI.SCROLLBAR_SIZE;
} }
return width; return width;
} }
@ -3386,7 +3417,7 @@
function getGroupWidth(pos, panelWidth) { // fixme: don't pass panelWidth function getGroupWidth(pos, panelWidth) { // fixme: don't pass panelWidth
var width = {}; var width = {};
width.list = Math.floor(panelWidth / 5) + (panelWidth % 5 > pos); width.list = Math.floor(panelWidth / 5) + (panelWidth % 5 > pos);
width.column = width.list - 40 - app.ui.scrollbarSize; width.column = width.list - 40 - Ox.UI.SCROLLBAR_SIZE;
return width; return width;
} }
@ -3879,15 +3910,15 @@
update: function() { update: function() {
URL.parse(); URL.parse();
if (app.user.ui.section != old.user.ui.section) { if (app.user.ui.section != old.user.ui.section) {
app.$ui.appPanel.replace(1, app.$ui.mainPanel = ui.mainPanel()); app.$ui.appPanel.replaceElement(1, app.$ui.mainPanel = ui.mainPanel());
} else if (app.user.ui.sitePage != old.user.ui.sitePage) { } else if (app.user.ui.sitePage != old.user.ui.sitePage) {
app.$ui.mainPanel.replace(1, app.$ui.rightPanel = ui.rightPanel()); app.$ui.mainPanel.replaceElement(1, app.$ui.rightPanel = ui.rightPanel());
} else if (!app.user.ui.item || !old.user.ui.item) { } else if (!app.user.ui.item || !old.user.ui.item) {
app.$ui.mainPanel.replace(1, app.$ui.rightPanel = ui.rightPanel()); app.$ui.mainPanel.replaceElement(1, app.$ui.rightPanel = ui.rightPanel());
app.$ui.leftPanel.replace(2, app.$ui.info = ui.info()); app.$ui.leftPanel.replaceElement(2, app.$ui.info = ui.info());
} else { } else {
app.$ui.contentPanel.replace(1, ui.item()); app.$ui.contentPanel.replaceElement(1, ui.item());
app.$ui.leftPanel.replace(2, app.$ui.info = ui.info()); app.$ui.leftPanel.replaceElement(2, app.$ui.info = ui.info());
} }
if ( if (
old.user.ui.item && old.user.ui.item &&
@ -3941,7 +3972,7 @@
}); });
if (!match) { if (!match) {
Query.fromString(location.hash.substr(1)); Query.fromString(location.hash.substr(1));
app.$ui.rightPanel.replace(1, ui.contentPanel()); app.$ui.rightPanel.replaceElement(1, ui.contentPanel());
} }
} }