diff --git a/static/js/pandora/helpDialog.js b/static/js/pandora/helpDialog.js index 3c8e85ee..1c486893 100644 --- a/static/js/pandora/helpDialog.js +++ b/static/js/pandora/helpDialog.js @@ -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( + $('') + .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 = $('
').html(html); + + pandora.site.help.forEach(function(section) { + var html = $html.find('#' + section.id).html(); + text[section.id] = '

' + section.title + '


\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; + };