update help dialog, help html and help config

pandora/config.0xdb.jsonc

@@ -91,19 +91,20 @@
     "help": [
         {"id": "help", "title": "Help"},
         {"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": "edits", "title": "Edits"},
+        {"id": "maps", "title": "Maps"},
+        {"id": "calendars", "title": "Calendars"},
+        {"id": "find", "title": "Find"},
         {"id": "filters", "title": "Filters"},
         {"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": "timelines", "title": "Timelines"},
+        {"id": "embeds", "title": "Embeds"}
-        {"id": "video", "title": "Video"},
-        {"id": "views", "title": "Views"}
     ],
     /*
         An itemKey must have the following properties:

pandora/config.indiancinema.jsonc

@@ -97,19 +97,20 @@
     "help": [
         {"id": "help", "title": "Help"},
         {"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": "edits", "title": "Edits"},
+        {"id": "maps", "title": "Maps"},
+        {"id": "calendars", "title": "Calendars"},
+        {"id": "find", "title": "Find"},
         {"id": "filters", "title": "Filters"},
         {"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": "timelines", "title": "Timelines"},
+        {"id": "embeds", "title": "Embeds"}
-        {"id": "video", "title": "Video"},
-        {"id": "views", "title": "Views"}
     ],
     /*
         An itemKey must have the following properties:

pandora/config.padma.jsonc

@@ -87,19 +87,20 @@
     "help": [
         {"id": "help", "title": "Help"},
         {"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": "edits", "title": "Edits"},
+        {"id": "maps", "title": "Maps"},
+        {"id": "calendars", "title": "Calendars"},
+        {"id": "find", "title": "Find"},
         {"id": "filters", "title": "Filters"},
         {"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": "timelines", "title": "Timelines"},
+        {"id": "embeds", "title": "Embeds"}
-        {"id": "video", "title": "Video"},
-        {"id": "views", "title": "Views"}
     ],
     /*
         An itemKey must have the following properties:

pandora/config.pandora.jsonc

@@ -84,19 +84,20 @@
     "help": [
         {"id": "help", "title": "Help"},
         {"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": "edits", "title": "Edits"},
+        {"id": "maps", "title": "Maps"},
+        {"id": "calendars", "title": "Calendars"},
+        {"id": "find", "title": "Find"},
         {"id": "filters", "title": "Filters"},
         {"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": "timelines", "title": "Timelines"},
+        {"id": "embeds", "title": "Embeds"}
-        {"id": "video", "title": "Video"},
-        {"id": "views", "title": "Views"}
     ],
     /*
         An itemKey must have the following properties:

static/html/help.html

@@ -1,45 +1,142 @@
 <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 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 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 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>

static/js/pandora/helpDialog.js

@@ -72,13 +72,17 @@ pandora.ui.helpDialog = function() {
 
     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();
         });
-        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) {
             var html = $html.find('#' + section.id).html();
@@ -115,7 +119,11 @@ pandora.ui.helpDialog = function() {
         $text = Ox.Element()
             .css({
                 padding: '16px',
-                overflowY: 'auto'
+                // fontSize: '12px',
+                lineHeight: '16px',
+                overflowY: 'auto',
+                MozUserSelect: 'text',
+                WebkitUserSelect: 'text'
             });
 
         $panel = Ox.SplitPanel({
@@ -133,11 +141,16 @@ pandora.ui.helpDialog = function() {
 
     that.select = function(id) {
         $text.html(text[id]);
-        $text.find('td:first-child').css({
+        $text.find('img')
-            height: '16px',
+            .css({
-            paddingRight: '8px',
+                width: '100%'
-            textAlign: 'right'
+            });
-        });
+        $text.find('td:first-child')
+            .css({
+                height: '16px',
+                paddingRight: '8px',
+                textAlign: 'right'
+            });
         return that;
     }