update help dialog

This commit is contained in:
rolux 2013-03-04 10:11:46 +00:00
parent 4603a9f1a8
commit 493ba60012

View file

@ -1,7 +1,31 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript // vim: et:ts=4:sw=4:sts=4:ft=javascript
'use strict'; 'use strict';
pandora.ui.helpDialog = function() { pandora.ui.helpDialog = function() {
var content = Ox.Element().css({margin: '16px'}),
var selected = pandora.user.ui.hash && pandora.user.ui.hash.anchor
? pandora.user.ui.hash.anchor : 'help',
text = {},
$loading = Ox.Element()
.append(
$('<img>')
.attr({src: Ox.UI.getImageURL('symbolLoadingAnimated')})
.css({
position: 'absolute',
width: '32px',
height: '32px',
left: 0,
top: 0,
right: 0,
bottom: 0,
margin: 'auto'
})
),
$panel, $list, $text,
that = Ox.Dialog({ that = Ox.Dialog({
buttons: [ buttons: [
Ox.Button({ Ox.Button({
@ -14,25 +38,87 @@ pandora.ui.helpDialog = function() {
}) })
], ],
closeButton: true, closeButton: true,
content: content, content: $loading,
height: Math.round((window.innerHeight - 24) * 0.75), height: Math.round((window.innerHeight - 24) * 0.75),
keys: { keys: {escape: 'close'},
'escape': 'close'
},
maximizeButton: true, maximizeButton: true,
minHeight: 256, minHeight: 256,
minWidth: 640, minWidth: 576,
title: 'Help', title: 'Help',
width: Math.round(window.innerWidth * 0.75) width: Math.round(window.innerWidth * 0.75)
}) })
.bindEvent({ .bindEvent({
close: function(data) { close: function() {
pandora.UI.set({page: ''}); pandora.UI.set({page: '', 'hash.anchor': ''});
},
resize: function() {
$list.size();
},
'pandora_hash.anchor': function(data) {
that.select(data.value == '' ? 'help' : data.value);
} }
}); });
pandora.api.getPage({name: 'help'}, function(result) {
//content.html(response.data.body); Ox.get('/static/html/help.html', function(html) {
content.html('Help is coming soon...')
var $html = $('<div>').html(html);
pandora.site.help.forEach(function(section) {
var html = $html.find('#' + section.id).html();
text[section.id] = '<h1><b>' + section.title + '</b><h1><br>\n' + html;
}); });
$list = Ox.TableList({
// fixme: silly
_tree: true,
columns: [
{
id: 'title',
visible: true,
width: 192 - Ox.UI.SCROLLBAR_SIZE
}
],
items: pandora.site.help.map(function(value, index) {
return Ox.extend({index: index}, value);
}),
max: 1,
min: 1,
scrollbarVisible: true,
selected: [selected],
sort: [{key: 'index', operator: '+'}],
unique: 'id'
})
.bindEvent({
select: function(data) {
var id = data.ids[0];
pandora.UI.set({'hash.anchor': id == 'help' ? '' : id});
}
});
$text = Ox.Element()
.css({
padding: '16px',
overflowY: 'auto'
});
$panel = Ox.SplitPanel({
elements: [
{element: $list, size: 192},
{element: $text}
],
orientation: 'horizontal'
});
that.select(selected).options({content: $panel});
$list.gainFocus();
});
that.select = function(id) {
$text.html(text[id]);
return that; return that;
}
return that;
}; };