pandora/static/js/helpDialog.js

159 lines
4.9 KiB
JavaScript
Raw Normal View History

2011-10-07 09:18:42 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=javascript
2011-11-05 17:04:10 +00:00
'use strict';
2013-03-04 10:11:46 +00:00
2011-10-07 09:18:42 +00:00
pandora.ui.helpDialog = function() {
2013-03-04 10:11:46 +00:00
2013-03-06 13:28:44 +00:00
var text = {},
2013-03-04 10:11:46 +00:00
$panel, $list, $text, $image,
2013-03-04 10:11:46 +00:00
2011-10-07 09:18:42 +00:00
that = Ox.Dialog({
2011-11-09 22:32:54 +00:00
buttons: [
2013-03-04 12:31:44 +00:00
Ox.Button({
id: 'switch',
2013-05-09 10:13:58 +00:00
title: Ox._('API Documentation...')
2013-03-04 12:31:44 +00:00
}).bindEvent({
click: function() {
pandora.UI.set({page: 'api'});
2013-03-04 12:31:44 +00:00
}
}),
{},
2011-11-09 22:32:54 +00:00
Ox.Button({
id: 'close',
2013-05-09 10:13:58 +00:00
title: Ox._('Close')
2011-11-09 22:32:54 +00:00
}).bindEvent({
click: function() {
that.close();
}
})
],
closeButton: true,
2013-11-20 08:12:59 +00:00
content: Ox.LoadingScreen().start(),
2013-03-05 12:53:48 +00:00
height: 384,
2013-03-04 10:11:46 +00:00
keys: {escape: 'close'},
2011-11-09 22:32:54 +00:00
maximizeButton: true,
minHeight: 256,
2014-09-26 12:12:25 +00:00
minWidth: 544 + 2 * Ox.UI.SCROLLBAR_SIZE,
2013-03-04 11:58:07 +00:00
removeOnClose: true,
2013-05-09 10:13:58 +00:00
title: Ox._('Help'),
2014-09-26 12:12:25 +00:00
width: 672 + 2 * Ox.UI.SCROLLBAR_SIZE
2011-11-09 22:32:54 +00:00
})
.bindEvent({
2013-03-04 10:11:46 +00:00
close: function() {
pandora.user.ui.page == 'help' && pandora.UI.set({page: ''});
2013-03-04 10:11:46 +00:00
},
resize: resize,
'pandora_part.help': function(data) {
2013-03-07 05:50:34 +00:00
if (pandora.user.ui.page == 'help') {
2013-03-04 11:58:07 +00:00
that.select(data.value == '' ? 'help' : data.value);
2013-03-07 05:50:34 +00:00
}
2011-11-09 22:32:54 +00:00
}
});
2013-03-04 10:11:46 +00:00
Ox.get('/static/html/help.html', function(html) {
var $html = $('<div>'),
strings = Ox.clone(pandora.site, true);
strings.addAnnotationShortcuts = strings.layers.map(function(layer, index) {
return '<tr><td>' + (index + 1) + '</td><td>' + Ox._('Add {0}', [layer.item.toLowerCase()]) + '</td></tr>';
}).join('\n');
2013-03-07 05:50:34 +00:00
strings.itemName = Ox.map(strings.itemName, function(v) {
return v.toLowerCase();
});
strings.signup = pandora.user.level == 'guest'
2013-05-09 10:13:58 +00:00
? '<a href="/signup">' + Ox._('sign up') + '</a>' : Ox._('sign up');
$html.html(Ox.formatString(html, strings));
2013-03-04 10:11:46 +00:00
pandora.site.help.forEach(function(section) {
var html = $html.find('#' + section.id).html();
2013-05-09 10:13:58 +00:00
text[section.id] = '<h1><b>' + Ox._(section.title) + '</b></h1>\n' + html;
2013-03-04 10:11:46 +00:00
});
$list = Ox.TableList({
// fixme: silly
_tree: true,
columns: [
{
id: 'title',
visible: true,
2014-09-26 12:12:25 +00:00
width: 128 - Ox.UI.SCROLLBAR_SIZE
2013-03-04 10:11:46 +00:00
}
],
items: pandora.site.help.map(function(value, index) {
2013-07-17 10:25:01 +00:00
return Ox.extend({index: index}, value, {title: Ox._(value.title)});
2013-03-04 10:11:46 +00:00
}),
max: 1,
min: 1,
scrollbarVisible: true,
selected: [pandora.user.ui.part.help || 'help'],
2013-03-04 10:11:46 +00:00
sort: [{key: 'index', operator: '+'}],
unique: 'id'
})
.bindEvent({
select: function(data) {
2013-03-06 13:28:44 +00:00
var id = data.ids[0] == 'help' ? '' : data.ids[0];
pandora.UI.set({'part.help': id});
2013-03-04 10:11:46 +00:00
}
});
$text = Ox.Element()
.addClass('OxTextPage OxSelectable')
2013-03-04 10:11:46 +00:00
.css({
padding: '16px',
overflowY: 'scroll'
2013-03-04 10:11:46 +00:00
});
$panel = Ox.SplitPanel({
elements: [
2014-09-26 12:12:25 +00:00
{element: $list, size: 128 + Ox.UI.SCROLLBAR_SIZE},
2013-03-04 10:11:46 +00:00
{element: $text}
],
orientation: 'horizontal'
});
that.select(pandora.user.ui.part.help).options({content: $panel});
pandora.createLinks($text);
2013-03-04 10:11:46 +00:00
$list.gainFocus();
2011-10-07 09:18:42 +00:00
});
2013-03-04 10:11:46 +00:00
function getImageSize() {
2014-09-26 12:12:25 +00:00
var width = that.options('width') - 160 - 2 * Ox.UI.SCROLLBAR_SIZE,
height = Math.round(width * 5/8);
return {width: width, height: height};
}
function resize(data) {
$list.size();
$image && $image.options(getImageSize());
}
2013-03-04 10:11:46 +00:00
that.select = function(id) {
var img, $img;
2013-03-06 13:28:44 +00:00
$text.html(text[id || 'help']).scrollTop(0);
img = $text.find('img');
if (img) {
$img = $(img);
$img.replaceWith(
$image = Ox.ImageElement(
Ox.extend(getImageSize(), {src: $img.attr('src')})
)
.css({borderRadius: '8px'})
);
}
$text.find('td:first-child')
.css({
height: '16px',
paddingRight: '8px',
2013-03-05 11:13:01 +00:00
textAlign: 'right',
whiteSpace: 'nowrap'
});
2013-03-04 10:11:46 +00:00
return that;
}
2011-10-07 09:18:42 +00:00
return that;
2013-03-04 10:11:46 +00:00
2011-10-07 09:18:42 +00:00
};