update help dialog
This commit is contained in:
parent
4603a9f1a8
commit
493ba60012
1 changed files with 97 additions and 11 deletions
|
@ -1,7 +1,31 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
'use strict';
|
||||
|
||||
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({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
|
@ -14,25 +38,87 @@ pandora.ui.helpDialog = function() {
|
|||
})
|
||||
],
|
||||
closeButton: true,
|
||||
content: content,
|
||||
content: $loading,
|
||||
height: Math.round((window.innerHeight - 24) * 0.75),
|
||||
keys: {
|
||||
'escape': 'close'
|
||||
},
|
||||
keys: {escape: 'close'},
|
||||
maximizeButton: true,
|
||||
minHeight: 256,
|
||||
minWidth: 640,
|
||||
minWidth: 576,
|
||||
title: 'Help',
|
||||
width: Math.round(window.innerWidth * 0.75)
|
||||
})
|
||||
.bindEvent({
|
||||
close: function(data) {
|
||||
pandora.UI.set({page: ''});
|
||||
close: function() {
|
||||
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);
|
||||
content.html('Help is coming soon...')
|
||||
|
||||
Ox.get('/static/html/help.html', function(html) {
|
||||
|
||||
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;
|
||||
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue