0x2620/pandora
2
1
Fork 1
Code Issues 1.3k Pull requests Releases Wiki Activity

update help dialog, help html and help config

Browse source
This commit is contained in:
rolux 2013-03-05 09:33:15 +00:00
parent 5fb2a11f0f
commit a95633b878
6 changed files with 199 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
pandora/config.0xdb.jsonc
View file

@ -91,19 +91,20 @@
"help": [ "help": [
{"id": "help", "title": "Help"}, {"id": "help", "title": "Help"},
{"id": "accounts", "title": "Accounts"}, {"id": "accounts", "title": "Accounts"},
{"id": "annotations", "title": "Annotations"}, {"id": "navigation", "title": "Navigation"},
{"id": "calendars", "title": "Calendars"}, {"id": "views", "title": "Views"},
{"id": "timelines", "title": "Timelines"},
{"id": "clips", "title": "Clips"}, {"id": "clips", "title": "Clips"},
{"id": "edits", "title": "Edits"}, {"id": "maps", "title": "Maps"},
{"id": "calendars", "title": "Calendars"},
{"id": "find", "title": "Find"},
{"id": "filters", "title": "Filters"}, {"id": "filters", "title": "Filters"},
{"id": "lists", "title": "Lists"}, {"id": "lists", "title": "Lists"},
{"id": "maps", "title": "Maps"}, {"id": "player", "title": "Player"},
{"id": "navigation", "title": "Navigation"}, {"id": "editor", "title": "Editor"},
{"id": "search", "title": "Search"}, {"id": "edits", "title": "Edits"},
{"id": "texts", "title": "Texts"}, {"id": "texts", "title": "Texts"},
{"id": "timelines", "title": "Timelines"}, {"id": "embeds", "title": "Embeds"}
{"id": "video", "title": "Video"},
{"id": "views", "title": "Views"}
], ],
/* /*
An itemKey must have the following properties: An itemKey must have the following properties:

19
pandora/config.indiancinema.jsonc
View file

@ -97,19 +97,20 @@
"help": [ "help": [
{"id": "help", "title": "Help"}, {"id": "help", "title": "Help"},
{"id": "accounts", "title": "Accounts"}, {"id": "accounts", "title": "Accounts"},
{"id": "annotations", "title": "Annotations"}, {"id": "navigation", "title": "Navigation"},
{"id": "calendars", "title": "Calendars"}, {"id": "views", "title": "Views"},
{"id": "timelines", "title": "Timelines"},
{"id": "clips", "title": "Clips"}, {"id": "clips", "title": "Clips"},
{"id": "edits", "title": "Edits"}, {"id": "maps", "title": "Maps"},
{"id": "calendars", "title": "Calendars"},
{"id": "find", "title": "Find"},
{"id": "filters", "title": "Filters"}, {"id": "filters", "title": "Filters"},
{"id": "lists", "title": "Lists"}, {"id": "lists", "title": "Lists"},
{"id": "maps", "title": "Maps"}, {"id": "player", "title": "Player"},
{"id": "navigation", "title": "Navigation"}, {"id": "editor", "title": "Editor"},
{"id": "search", "title": "Search"}, {"id": "edits", "title": "Edits"},
{"id": "texts", "title": "Texts"}, {"id": "texts", "title": "Texts"},
{"id": "timelines", "title": "Timelines"}, {"id": "embeds", "title": "Embeds"}
{"id": "video", "title": "Video"},
{"id": "views", "title": "Views"}
], ],
/* /*
An itemKey must have the following properties: An itemKey must have the following properties:

19
pandora/config.padma.jsonc
View file

@ -87,19 +87,20 @@
"help": [ "help": [
{"id": "help", "title": "Help"}, {"id": "help", "title": "Help"},
{"id": "accounts", "title": "Accounts"}, {"id": "accounts", "title": "Accounts"},
{"id": "annotations", "title": "Annotations"}, {"id": "navigation", "title": "Navigation"},
{"id": "calendars", "title": "Calendars"}, {"id": "views", "title": "Views"},
{"id": "timelines", "title": "Timelines"},
{"id": "clips", "title": "Clips"}, {"id": "clips", "title": "Clips"},
{"id": "edits", "title": "Edits"}, {"id": "maps", "title": "Maps"},
{"id": "calendars", "title": "Calendars"},
{"id": "find", "title": "Find"},
{"id": "filters", "title": "Filters"}, {"id": "filters", "title": "Filters"},
{"id": "lists", "title": "Lists"}, {"id": "lists", "title": "Lists"},
{"id": "maps", "title": "Maps"}, {"id": "player", "title": "Player"},
{"id": "navigation", "title": "Navigation"}, {"id": "editor", "title": "Editor"},
{"id": "search", "title": "Search"}, {"id": "edits", "title": "Edits"},
{"id": "texts", "title": "Texts"}, {"id": "texts", "title": "Texts"},
{"id": "timelines", "title": "Timelines"}, {"id": "embeds", "title": "Embeds"}
{"id": "video", "title": "Video"},
{"id": "views", "title": "Views"}
], ],
/* /*
An itemKey must have the following properties: An itemKey must have the following properties:

19
pandora/config.pandora.jsonc
View file

@ -84,19 +84,20 @@
"help": [ "help": [
{"id": "help", "title": "Help"}, {"id": "help", "title": "Help"},
{"id": "accounts", "title": "Accounts"}, {"id": "accounts", "title": "Accounts"},
{"id": "annotations", "title": "Annotations"}, {"id": "navigation", "title": "Navigation"},
{"id": "calendars", "title": "Calendars"}, {"id": "views", "title": "Views"},
{"id": "timelines", "title": "Timelines"},
{"id": "clips", "title": "Clips"}, {"id": "clips", "title": "Clips"},
{"id": "edits", "title": "Edits"}, {"id": "maps", "title": "Maps"},
{"id": "calendars", "title": "Calendars"},
{"id": "find", "title": "Find"},
{"id": "filters", "title": "Filters"}, {"id": "filters", "title": "Filters"},
{"id": "lists", "title": "Lists"}, {"id": "lists", "title": "Lists"},
{"id": "maps", "title": "Maps"}, {"id": "player", "title": "Player"},
{"id": "navigation", "title": "Navigation"}, {"id": "editor", "title": "Editor"},
{"id": "search", "title": "Search"}, {"id": "edits", "title": "Edits"},
{"id": "texts", "title": "Texts"}, {"id": "texts", "title": "Texts"},
{"id": "timelines", "title": "Timelines"}, {"id": "embeds", "title": "Embeds"}
{"id": "video", "title": "Video"},
{"id": "views", "title": "Views"}
], ],
/* /*
An itemKey must have the following properties: An itemKey must have the following properties:

171
static/html/help.html
View file

@ -1,45 +1,142 @@
<div id="help"> <div id="help">
<div>Help is coming soon...</div> <p>To learn more about the various features of {site.name}, just select a topic on the left.</p>
<p>(Please note that this help section is a work in progress.)</p>
</div> </div>
<div id="accounts"> <div id="accounts">
<div>Help is coming soon...</div> <p>Coming soon...</p>
</div>
<div id="annotations">
<div>Help is coming soon...</div>
</div>
<div id="calendars">
<div>Help is coming soon...</div>
</div>
<div id="clips">
<div>Help is coming soon...</div>
</div>
<div id="edits">
<div>Help is coming soon...</div>
</div>
<div id="filters">
<div>Help is coming soon...</div>
</div>
<div id="lists">
<div>Help is coming soon...</div>
</div>
<div id="maps">
<div>Help is coming soon...</div>
</div> </div>
<div id="navigation"> <div id="navigation">
<div>Help is coming soon...</div> <p>
</div> <h2>Mouse and Keyboard Shortcuts</h2><br>
<div id="search"> <table>
<div>Help is coming soon...</div> <tr><td>Click</td><td>Select an item</td></tr>
</div> <tr><td>Doubleclick</td><td>Open an item</td></tr>
<div id="texts"> <tr><td>Shift Click</td><td>Add one or more items to the current selection</td></tr>
<div>Help is coming soon...</div> <tr><td>Command Click</td><td>Toggle an item (select a deselected or deselect a selected item)</td></tr>
</div> <tr><td>Drag &amp; Drop</td><td>Copy all selected items to another list</td></tr>
<div id="timelines"> <tr><td>Command Drag &amp; Drop</td><td>Move all selected items from one list to another</td></tr>
<div>Help is coming soon...</div> <tr><td></td></tr>
</div> <tr><td>Up/Down/Left/Right</td><td>Select next item</td></tr>
<div id="video"> <tr><td>Shift Up/Down/Left/Right</td><td>Add next item to the current selection</td></tr>
<div>Help is coming soon...</div> <tr><td>Control A</td><td>Select all items</td></tr>
<tr><td>Shift Control A</td><td>Deselect all items</td></tr>
<tr><td>Alt Control A</td><td>Toggle all items (select all deselected and deselect all selected items)</td></tr>
<tr><td>Page Up</td><td>Scroll one page up</td></tr>
<tr><td>Page Down</td><td>Scroll one page down</td></tr>
<tr><td>Home</td><td>Scroll to first item</td></tr>
<tr><td>End</td><td>Scroll to last item</td></tr>
<tr><td>Control X</td><td>Cut all selected items from a list</td></tr>
<tr><td>Control C</td><td>Copy all selected items from a list</td></tr>
<tr><td>Control V</td><td>Paste previously cut or copied items into a list</td></tr>
<tr><td>Delete</td><td>Delete all selected items from a list</td></tr>
<tr><td>Space</td><td>Show preview (list of {itemName.plural}) or play/pause video (clip)</td></tr>
</table>
</p>
</div> </div>
<div id="views"> <div id="views">
<div>Help is coming soon...</div> <p>Lists of {itemName.plural}, and also individual {itemName.plural} themselves, can be displayed in different views. Both for lists and for {itemName.plural}, you'll find the menu to switch between views in the toolbar near the top of the screen.</p>
<p>
<h2>List Views</h2><br>
<table>
<tr><td>as List</td><td>A table with fully configurable columns</td></tr>
<tr><td>as Grid</td><td>A grid of icons (posters or stills)</td></tr>
<tr><td>with Timelines</td><td>A list of icons with timelines</td></tr>
<tr><td>with Clips</td><td>A list of icons with clips</td></tr>
<tr><td>as Clips</td><td>A grid of video clips that match your current query</td></tr>
<tr><td>on Map</td><td>A map with all places that appear in your current results</td></tr>
<tr><td>on Calendar</td><td>A calendar with all events that appear in your current results</td></tr>
</table>
</p>
<p>
<h2>Item Views</h2><br>
<table>
<tr><td>Info</td><td>Basic information about the {itemName.singular}</td></tr>
<tr><td>Player</td><td>A video player</td></tr>
<tr><td>Editor</td><td>An editor to add time-based annotations</td></tr>
<tr><td>Timeline</td><td>A small video player that moves on a large timeline</td></tr>
<tr><td>Clips</td><td>A grid of all clips of the current {itemName.singular}</td></tr>
<tr><td>Map</td><td>A map with all places that appear in the current {itemName.singular}</td></tr>
<tr><td>Calendar</td><td>A calendar with all events that appear in the current {itemName.singular}</td></tr>
</table>
</p>
</div>
<div id="timelines">
<p>A timeline is a visual signature of a {itemName.singular}. It provides an instant overview of what is happening in a {itemName.singular}, and can be used for navigation. You can switch between different types of timelines: anti-alias (average colors), slit-scan (see below), keyframes (full frames) and waveform (audio).</p>
<img src="/static/jpg/help.timelines.jpg">
</div>
<div id="clips">
<p>Some views don't show lists of {itemName.plural}, but lists of video clips &mdash; for example clips matching your query, or related to a specific location on a map. Each clip is a video player. The video will load once you've selected it, and you can then simply click to play. If you doubleclick, you'll get to the {itemName.singular} itself, and its video player will be at the very position of the clip.</p>
</div>
<div id="maps">
<p>Coming soon...</p>
</div>
<div id="calendars">
<p>Coming soon...</p>
</div>
<div id="find">
<p>Coming soon...</p>
</div>
<div id="filters">
<p>Coming soon...</p>
</div>
<div id="lists">
<p>Coming soon...</p>
</div>
<div id="player">
<p>Coming soon...</p>
</div>
<div id="editor">
<p>In the editor view, you can add and edit time-based annotations. Just set an in point and an out point, and pick one of the different types of annotations to add.</p>
<p>
<h2>Keyboard Shortcuts</h2>
<br>
<table>
<tr><td>Space</td><td>Play/Pause</td></tr>
<tr><td>P</td><td>Play from in point to out point</td></tr>
<tr><td>0</td><td>Mute/Unmute</td></tr>
<tr><td>-</td><td>Turn volume down</td></tr>
<tr><td>+</td><td>Turn volume up</td></tr>
<tr><td>Shift -</td><td>Small video player</td></tr>
<tr><td>Shift +</td><td>Large video player</td></tr>
<tr><td>←</td><td>Go one frame back</td></tr>
<tr><td>→</td><td>Go one frame forward</td></tr>
<tr><td>Shift ←</td><td>Go one second back</td></tr>
<tr><td>Shift →</td><td>Go one second forward</td></tr>
<tr><td>↑</td><td>Go one line up on the timeline</td></tr>
<tr><td>↓</td><td>Go one line down on the timeline</td></tr>
<tr><td>Shift ↑</td><td>Go to first frame</td></tr>
<tr><td>Shift ↓</td><td>Go to last frame</td></tr>
<tr><td>I</td><td>Set in point</td></tr>
<tr><td>O</td><td>Set out point</td></tr>
<tr><td>Shift I</td><td>Go to in point</td></tr>
<tr><td>Shift O</td><td>Go to out point</td></tr>
<tr><td>[</td><td>Go to previous annotation</td></tr>
<tr><td>]</td><td>Go to next annotation</td></tr>
<tr><td>\</td><td>Select current annotation</td></tr>
<tr><td>B</td><td>Select previous annotation</td></tr>
<tr><td>N</td><td>Select next annotation</td></tr>
<tr><td>&lt;</td><td>Go to previous cut</td></tr>
<tr><td>&gt;</td><td>Go to next cut</td></tr>
<tr><td>/</td><td>Select current cut</td></tr>
<tr><td>F</td><td>Find</td></tr>
<tr><td>Shift G</td><td>Go to previous result</td></tr>
<tr><td>G</td><td>Go to next result</td></tr>
<tr><td>Return</td><td>Edit annotation, submit changes when editing</td></tr>
<tr><td>Shift Return</td><td>Submit changes (for text annotations with line breaks)</td></tr>
<tr><td>Escape</td><td>Deselect annotation, revert changes when editing</td></tr>
{addAnnotationShortcuts}
</table>
</p>
</div>
<div id="edits">
<p>Coming soon...</p>
</div>
<div id="texts">
<p>Coming soon...</p>
</div>
<div id="embeds">
<p>Coming soon...</p>
</div>
<div id="urls">
<p>Coming soon...</p>
</div> </div>

27
static/js/pandora/helpDialog.js
View file

@ -72,13 +72,17 @@ pandora.ui.helpDialog = function() {
Ox.get('/static/html/help.html', function(html) { Ox.get('/static/html/help.html', function(html) {
pandora.site.itemName = Ox.map(pandora.site.itemName, function(v) { var $html = $('<div>'),
strings = Ox.clone(pandora.site, true);
strings.itemName = Ox.map(strings.itemName, function(v) {
return v.toLowerCase(); return v.toLowerCase();
}); });
var $html = $('<div>').html(Ox.formatString(html, pandora.site)); strings.addAnnotationShortcuts = strings.layers.map(function(layer, index) {
pandora.site.itemName = Ox.map(pandora.site.itemName, function(v) { return '<tr><td>' + index + '</td><td>Add ' + layer.item.toLowerCase() + '</td></tr>';
return Ox.toTitleCase(v); }).join('\n');
});
$html.html(Ox.formatString(html, strings));
pandora.site.help.forEach(function(section) { pandora.site.help.forEach(function(section) {
var html = $html.find('#' + section.id).html(); var html = $html.find('#' + section.id).html();
@ -115,7 +119,11 @@ pandora.ui.helpDialog = function() {
$text = Ox.Element() $text = Ox.Element()
.css({ .css({
padding: '16px', padding: '16px',
overflowY: 'auto' // fontSize: '12px',
lineHeight: '16px',
overflowY: 'auto',
MozUserSelect: 'text',
WebkitUserSelect: 'text'
}); });
$panel = Ox.SplitPanel({ $panel = Ox.SplitPanel({
@ -133,7 +141,12 @@ pandora.ui.helpDialog = function() {
that.select = function(id) { that.select = function(id) {
$text.html(text[id]); $text.html(text[id]);
$text.find('td:first-child').css({ $text.find('img')
.css({
width: '100%'
});
$text.find('td:first-child')
.css({
height: '16px', height: '16px',
paddingRight: '8px', paddingRight: '8px',
textAlign: 'right' textAlign: 'right'