forked from 0x2620/pandora
update help dialog, help html and help config
This commit is contained in:
rolux
parent
5fb2a11f0f
commit
a95633b878
6 changed files with 199 additions and 85 deletions
|
|
@ -91,19 +91,20 @@
|
|||
"help": [
|
||||
{"id": "help", "title": "Help"},
|
||||
{"id": "accounts", "title": "Accounts"},
|
||||
{"id": "annotations", "title": "Annotations"},
|
||||
{"id": "calendars", "title": "Calendars"},
|
||||
{"id": "navigation", "title": "Navigation"},
|
||||
{"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": "navigation", "title": "Navigation"},
|
||||
{"id": "search", "title": "Search"},
|
||||
{"id": "player", "title": "Player"},
|
||||
{"id": "editor", "title": "Editor"},
|
||||
{"id": "edits", "title": "Edits"},
|
||||
{"id": "texts", "title": "Texts"},
|
||||
{"id": "timelines", "title": "Timelines"},
|
||||
{"id": "video", "title": "Video"},
|
||||
{"id": "views", "title": "Views"}
|
||||
{"id": "embeds", "title": "Embeds"}
|
||||
],
|
||||
/*
|
||||
An itemKey must have the following properties:
|
||||
|
|
|
|||
|
|
@ -97,19 +97,20 @@
|
|||
"help": [
|
||||
{"id": "help", "title": "Help"},
|
||||
{"id": "accounts", "title": "Accounts"},
|
||||
{"id": "annotations", "title": "Annotations"},
|
||||
{"id": "calendars", "title": "Calendars"},
|
||||
{"id": "navigation", "title": "Navigation"},
|
||||
{"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": "navigation", "title": "Navigation"},
|
||||
{"id": "search", "title": "Search"},
|
||||
{"id": "player", "title": "Player"},
|
||||
{"id": "editor", "title": "Editor"},
|
||||
{"id": "edits", "title": "Edits"},
|
||||
{"id": "texts", "title": "Texts"},
|
||||
{"id": "timelines", "title": "Timelines"},
|
||||
{"id": "video", "title": "Video"},
|
||||
{"id": "views", "title": "Views"}
|
||||
{"id": "embeds", "title": "Embeds"}
|
||||
],
|
||||
/*
|
||||
An itemKey must have the following properties:
|
||||
|
|
|
|||
|
|
@ -87,19 +87,20 @@
|
|||
"help": [
|
||||
{"id": "help", "title": "Help"},
|
||||
{"id": "accounts", "title": "Accounts"},
|
||||
{"id": "annotations", "title": "Annotations"},
|
||||
{"id": "calendars", "title": "Calendars"},
|
||||
{"id": "navigation", "title": "Navigation"},
|
||||
{"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": "navigation", "title": "Navigation"},
|
||||
{"id": "search", "title": "Search"},
|
||||
{"id": "player", "title": "Player"},
|
||||
{"id": "editor", "title": "Editor"},
|
||||
{"id": "edits", "title": "Edits"},
|
||||
{"id": "texts", "title": "Texts"},
|
||||
{"id": "timelines", "title": "Timelines"},
|
||||
{"id": "video", "title": "Video"},
|
||||
{"id": "views", "title": "Views"}
|
||||
{"id": "embeds", "title": "Embeds"}
|
||||
],
|
||||
/*
|
||||
An itemKey must have the following properties:
|
||||
|
|
|
|||
|
|
@ -84,19 +84,20 @@
|
|||
"help": [
|
||||
{"id": "help", "title": "Help"},
|
||||
{"id": "accounts", "title": "Accounts"},
|
||||
{"id": "annotations", "title": "Annotations"},
|
||||
{"id": "calendars", "title": "Calendars"},
|
||||
{"id": "navigation", "title": "Navigation"},
|
||||
{"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": "navigation", "title": "Navigation"},
|
||||
{"id": "search", "title": "Search"},
|
||||
{"id": "player", "title": "Player"},
|
||||
{"id": "editor", "title": "Editor"},
|
||||
{"id": "edits", "title": "Edits"},
|
||||
{"id": "texts", "title": "Texts"},
|
||||
{"id": "timelines", "title": "Timelines"},
|
||||
{"id": "video", "title": "Video"},
|
||||
{"id": "views", "title": "Views"}
|
||||
{"id": "embeds", "title": "Embeds"}
|
||||
],
|
||||
/*
|
||||
An itemKey must have the following properties:
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</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>
|
||||
<p>Coming soon...</p>
|
||||
</div>
|
||||
<div id="navigation">
|
||||
<div>Help is coming soon...</div>
|
||||
</div>
|
||||
<div id="search">
|
||||
<div>Help is coming soon...</div>
|
||||
</div>
|
||||
<div id="texts">
|
||||
<div>Help is coming soon...</div>
|
||||
</div>
|
||||
<div id="timelines">
|
||||
<div>Help is coming soon...</div>
|
||||
</div>
|
||||
<div id="video">
|
||||
<div>Help is coming soon...</div>
|
||||
<p>
|
||||
<h2>Mouse and Keyboard Shortcuts</h2><br>
|
||||
<table>
|
||||
<tr><td>Click</td><td>Select an item</td></tr>
|
||||
<tr><td>Doubleclick</td><td>Open an item</td></tr>
|
||||
<tr><td>Shift Click</td><td>Add one or more items to the current selection</td></tr>
|
||||
<tr><td>Command Click</td><td>Toggle an item (select a deselected or deselect a selected item)</td></tr>
|
||||
<tr><td>Drag & Drop</td><td>Copy all selected items to another list</td></tr>
|
||||
<tr><td>Command Drag & Drop</td><td>Move all selected items from one list to another</td></tr>
|
||||
<tr><td></td></tr>
|
||||
<tr><td>Up/Down/Left/Right</td><td>Select next item</td></tr>
|
||||
<tr><td>Shift Up/Down/Left/Right</td><td>Add next item to the current selection</td></tr>
|
||||
<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>
|
||||
</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 — 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><</td><td>Go to previous cut</td></tr>
|
||||
<tr><td>></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>
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
pandora.site.itemName = Ox.map(pandora.site.itemName, function(v) {
|
||||
return Ox.toTitleCase(v);
|
||||
});
|
||||
strings.addAnnotationShortcuts = strings.layers.map(function(layer, index) {
|
||||
return '<tr><td>' + index + '</td><td>Add ' + layer.item.toLowerCase() + '</td></tr>';
|
||||
}).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({
|
||||
height: '16px',
|
||||
paddingRight: '8px',
|
||||
textAlign: 'right'
|
||||
});
|
||||
$text.find('img')
|
||||
.css({
|
||||
width: '100%'
|
||||
});
|
||||
$text.find('td:first-child')
|
||||
.css({
|
||||
height: '16px',
|
||||
paddingRight: '8px',
|
||||
textAlign: 'right'
|
||||
});
|
||||
return that;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue