openmedialibrary/static/js/appDialog.js

108 lines
3.2 KiB
JavaScript
Raw Normal View History

2014-05-04 17:26:43 +00:00
'use strict';
oml.ui.appDialog = function() {
var ui = oml.user.ui,
2014-05-14 09:57:11 +00:00
tabs = Ox.getObjectById(oml.config.pages, 'app').parts.map(function(tab) {
return {
id: tab.id,
title: tab.title.replace(/ Open Media Library$/, ''),
selected: tab.id == ui.part.app
};
}),
2014-05-04 17:26:43 +00:00
2014-05-14 09:57:11 +00:00
$panel = Ox.TabPanel({
content: function(id) {
var $logo = Ox.Element(),
$text = Ox.Element()
.addClass('OxTextPage'),
title = Ox.getObjectById(
Ox.getObjectById(oml.config.pages, 'app').parts,
id
).title;
$('<img>')
2014-05-04 17:26:43 +00:00
.attr({
src: '/static/png/oml.png'
})
.css({
2014-05-14 09:57:11 +00:00
position: 'absolute',
left: '16px',
top: '16px',
2014-05-04 17:26:43 +00:00
width: '192px',
height: '192px'
})
.appendTo($logo);
$('<div>')
2014-05-14 09:57:11 +00:00
.css({
position: 'absolute',
left: '16px',
2014-05-16 08:06:11 +00:00
right: '16px',
top: '16px',
2014-05-14 09:57:11 +00:00
overflowY: 'auto'
})
.html(
'<h1><b>' + title + '</b></h1>'
+ '<p>The lazy brown fox jumped over the lazy black fox, but otherwise not really much happened here since you last checked.'
)
.appendTo($text);
2014-05-04 17:26:43 +00:00
return Ox.SplitPanel({
elements: [
{
element: $logo,
size: 208
},
{
element: $text
}
],
orientation: 'horizontal'
});
2014-05-14 09:57:11 +00:00
},
tabs: tabs
})
.bindEvent({
change: function(data) {
2014-05-04 17:26:43 +00:00
oml.UI.set({'part.app': data.selected});
2014-05-14 09:57:11 +00:00
}
}),
2014-05-04 17:26:43 +00:00
that = Ox.Dialog({
buttons: [
Ox.Button({
id: 'close',
title: Ox._('Close')
}).bindEvent({
click: function() {
that.close();
}
})
],
closeButton: true,
content: $panel,
fixedSize: true,
height: 384,
removeOnClose: true,
title: 'Open Media Library',
width: 768
})
.bindEvent({
2014-05-14 09:57:11 +00:00
close: function() {
2014-05-04 17:26:43 +00:00
if (ui.page == 'app') {
oml.UI.set({page: ''});
}
},
'oml_part.app': function() {
if (ui.page == 'app') {
2014-05-17 11:45:57 +00:00
that.updateElement();
2014-05-04 17:26:43 +00:00
}
}
});
2014-05-17 11:45:57 +00:00
that.updateElement = function(section) {
2014-05-14 09:57:11 +00:00
$panel.selectTab(section);
2014-05-04 17:26:43 +00:00
};
return that;
};