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 = $('