openmedialibrary/static/js/appDialog.js

158 lines
4.7 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,
2016-01-13 06:46:21 +00:00
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'
},
{
id: 'contact',
title: Ox._('Send Feedback'),
selected: ui.page == 'contact'
}
],
2014-05-04 17:26:43 +00:00
2014-05-14 09:57:11 +00:00
$panel = Ox.TabPanel({
content: function(id) {
var $content = Ox.Element(),
$logo = Ox.Element(),
2014-05-14 09:57:11 +00:00
$text = Ox.Element()
2016-01-08 05:36:10 +00:00
.addClass('OxTextPage OxSelectable'),
2016-01-13 06:46:21 +00:00
title = Ox.getObjectById(tabs, id).title;
2016-01-16 08:40:20 +00:00
2014-05-14 09:57:11 +00:00
$('<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);
2016-01-16 08:40:20 +00:00
if (id == 'contact') {
$content.append(oml.ui.contactForm());
} else {
2016-01-16 08:52:42 +00:00
Ox.get('/static/html/app.html', function(html) {
2016-01-16 09:00:16 +00:00
var $html = $('<div>').html(html),
section = $html.find('#' + id).html();
$content.html('<h1><b>' + title + '</b></h1>' + section);
2016-01-16 08:52:42 +00:00
});
2016-01-16 08:40:20 +00:00
}
2014-05-04 17:26:43 +00:00
$('<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'
})
.append($content)
2014-05-14 09:57:11 +00:00
.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
},
2016-01-12 05:33:41 +00:00
style: 'squared',
2014-05-14 09:57:11 +00:00
tabs: tabs
})
.bindEvent({
change: function(data) {
2016-01-13 06:46:21 +00:00
oml.UI.set({page: 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: 'update',
style: 'squared',
title: Ox._('Software Update...')
})
.bindEvent({
click: function() {
oml.UI.set({page: 'update'});
}
}),
{},
2014-05-04 17:26:43 +00:00
Ox.Button({
id: 'close',
style: 'squared',
2014-05-04 17:26:43 +00:00
title: Ox._('Close')
}).bindEvent({
click: function() {
that.close();
}
})
],
closeButton: true,
content: $panel,
fixedSize: true,
height: 384,
removeOnClose: true,
2016-01-12 05:33:41 +00:00
style: 'squared',
2014-05-04 17:26:43 +00:00
title: 'Open Media Library',
width: 768
})
.bindEvent({
2014-05-14 09:57:11 +00:00
close: function() {
2016-01-14 08:50:53 +00:00
if (Ox.contains(tabs.map(function(tab) {
return tab.id;
}), ui.page)) {
oml.UI.set({page: ''});
}
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
};
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);
};
}
2014-05-04 17:26:43 +00:00
return that;
};