160 lines
4.8 KiB
JavaScript
160 lines
4.8 KiB
JavaScript
'use strict';
|
|
|
|
oml.ui.appDialog = function() {
|
|
|
|
var ui = oml.user.ui,
|
|
|
|
tabs = [
|
|
{
|
|
id: 'about',
|
|
title: Ox._('About Open Media Library'),
|
|
selected: ui.page == 'about'
|
|
},
|
|
{
|
|
id: 'faq',
|
|
title: Ox._('Frequently Asked Questions'),
|
|
selected: ui.page == 'faq'
|
|
},
|
|
{
|
|
id: 'terms',
|
|
title: Ox._('Terms and Conditions'),
|
|
selected: ui.page == 'terms'
|
|
},
|
|
{
|
|
id: 'development',
|
|
title: Ox._('Software Development'),
|
|
selected: ui.page == 'development'
|
|
},
|
|
].concat(oml.readOnly ? [] : [
|
|
{
|
|
id: 'contact',
|
|
title: Ox._('Send Feedback'),
|
|
selected: ui.page == 'contact'
|
|
}
|
|
]),
|
|
|
|
$panel = Ox.TabPanel({
|
|
content: function(id) {
|
|
var $content = Ox.Element(),
|
|
$logo = Ox.Element(),
|
|
$text = Ox.Element()
|
|
.addClass('OxTextPage OxSelectable'),
|
|
title = Ox.getObjectById(tabs, id).title;
|
|
|
|
$('<img>')
|
|
.attr({
|
|
src: '/static/png/oml.png'
|
|
})
|
|
.css({
|
|
position: 'absolute',
|
|
left: '16px',
|
|
top: '16px',
|
|
width: '192px',
|
|
height: '192px'
|
|
})
|
|
.appendTo($logo);
|
|
if (id == 'contact') {
|
|
$content.append(oml.ui.contactForm());
|
|
} else {
|
|
Ox.get('/static/html/app.html?foo', function(html) {
|
|
var $html = $('<div>').html(html),
|
|
section = $html.find('#' + id).html();
|
|
$content.html('<h1><b>' + title + '</b></h1>' + section);
|
|
oml.createLinks($content);
|
|
});
|
|
}
|
|
$('<div>')
|
|
.css({
|
|
position: 'absolute',
|
|
left: '16px',
|
|
right: '16px',
|
|
top: '16px',
|
|
overflowY: 'auto'
|
|
})
|
|
.append($content)
|
|
.appendTo($text);
|
|
return Ox.SplitPanel({
|
|
elements: [
|
|
{
|
|
element: $logo,
|
|
size: 208
|
|
},
|
|
{
|
|
element: $text
|
|
}
|
|
],
|
|
orientation: 'horizontal'
|
|
});
|
|
},
|
|
style: 'squared',
|
|
tabs: tabs
|
|
})
|
|
.bindEvent({
|
|
change: function(data) {
|
|
oml.UI.set({page: data.selected});
|
|
}
|
|
}),
|
|
|
|
that = Ox.Dialog({
|
|
buttons: (oml.readOnly ? [] : [
|
|
Ox.Button({
|
|
id: 'update',
|
|
style: 'squared',
|
|
title: Ox._('Software Update...')
|
|
})
|
|
.bindEvent({
|
|
click: function() {
|
|
oml.UI.set({page: 'update'});
|
|
}
|
|
}),
|
|
]).concat([
|
|
{},
|
|
Ox.Button({
|
|
id: 'close',
|
|
style: 'squared',
|
|
title: Ox._('Close')
|
|
}).bindEvent({
|
|
click: function() {
|
|
that.close();
|
|
}
|
|
})
|
|
]),
|
|
closeButton: true,
|
|
content: $panel,
|
|
fixedSize: true,
|
|
height: 384,
|
|
removeOnClose: true,
|
|
style: 'squared',
|
|
title: 'Open Media Library',
|
|
width: 768
|
|
})
|
|
.bindEvent({
|
|
close: function() {
|
|
if (Ox.contains(tabs.map(function(tab) {
|
|
return tab.id;
|
|
}), ui.page)) {
|
|
oml.UI.set({page: ''});
|
|
}
|
|
}
|
|
});
|
|
|
|
that.updateElement = function(section) {
|
|
$panel.selectTab(section);
|
|
};
|
|
|
|
function reload() {
|
|
var ws = new WebSocket('ws:' + document.location.host + '/ws');
|
|
ws.onopen = function(event) {
|
|
document.location.href = document.location.protocol + '//' + document.location.host;
|
|
};
|
|
ws.onerror = function(event) {
|
|
ws.close();
|
|
};
|
|
ws.onclose = function(event) {
|
|
setTimeout(reload, 500);
|
|
};
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|