started work on the help system...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui (gen4)/css/experimenting.css

@@ -419,6 +419,53 @@ body {
 
 
 
+/* help... */
+.help-dialog {
+	max-width: 80vw;
+	max-height: 80vh;
+
+	overflow: auto;
+
+	padding: 1em;
+	padding-bottom: 2em;
+
+	background: white;
+}
+.help-dialog .comment {
+	color: gray;
+	font-style: italic;
+}
+
+/* scrollbar setup... */
+.help-dialog::-webkit-scrollbar {
+	width: 10px;
+	height: 10px;
+}
+.help-dialog::-webkit-scrollbar-button {
+	display: none;
+}
+.help-dialog::-webkit-scrollbar-track {
+}
+.help-dialog::-webkit-scrollbar-track-piece {
+	background: transparent;
+}
+.help-dialog::-webkit-scrollbar-track-piece {
+	background: rgba(0, 0, 0, 0.05);
+}
+.help-dialog::-webkit-scrollbar-thumb {
+	background: rgba(0, 0, 0, 0.15);
+}
+.help-dialog::-webkit-scrollbar-thumb:hover {
+	background: rgba(0, 0, 0, 0.3);
+}
+.help-dialog::-webkit-scrollbar-corner {
+}
+.help-dialog::-webkit-resizer {
+}
+
+
+
+
 
 /* DEBUG stuff... */
 .container-center {

ui (gen4)/features/ui-widgets.js

@@ -532,6 +532,43 @@ var DialogsActions = actions.Actions({
 			return browse.makeList(null, list, options) })],
 
 
+	// XXX this needs to:
+	// 		- be a widget
+	// 		- handle focus
+	// 		- handle keyboard
+	// 		- handle search...
+	// 		- ...
+	showDoc: ['- Interface/Action help',
+		makeUIDialog(function(actions){
+			actions = actions || this.actions
+			actions = actions instanceof Array ? actions : [actions]
+
+			var doc = this.getDoc(actions)
+			var res = $('<div>')
+				.addClass('help-dialog')
+
+			actions.forEach(function(action){
+				res.append($('<div class="action">')
+					.prop('tabindex', true)
+					.append($('<h2>').text(doc[action][2]))
+					.append($('<i>').text(doc[action][0]))
+					.append($('<hr>'))
+					.append($('<pre>').html((doc[action][1] || '')
+						.replace(/&/g, '&amp;')
+						.replace(/</g, '&lt;')
+						.replace(/>/g, '&gt;')
+						// normalize tabs...
+						.replace(/ {0,3}\t/g, '    ')
+						// comments...
+						.replace(/(\/\/.*)\n/g, '<span class="comment">$1</span>\n')
+						.replace(/NOTE:/g, '<b>NOTE:</b>')
+					)))
+			})
+
+			return res
+		})],
+	
+
 	listDialogs: ['Interface/Dialog/Dialog list...',
 		makeUIDialog(function(){
 			var actions = this
@@ -1008,7 +1045,10 @@ var BrowseActionsActions = actions.Actions({
 												}],
 											//[getKeys(action)],
 										]})
-										.attr('keys', getKeys(action))
+										.attr({
+											keys: getKeys(action),
+											action: action,
+										})
 										.addClass(mode == 'hidden' ? mode : '')
 										.on('open', function(){
 											options.callback ?
@@ -1032,7 +1072,10 @@ var BrowseActionsActions = actions.Actions({
 												false
 												: mode == 'hidden',
 										})
-										.attr('keys', getKeys(action))
+										.attr({
+											keys: getKeys(action),
+											action: action,
+										})
 										.on('open', function(){
 											options.callback ?
 												options.callback.call(actions, action)
@@ -1065,6 +1108,17 @@ var BrowseActionsActions = actions.Actions({
 			this.config['browse-actions-keys'] 
 				&& dialog.dom.addClass('show-keys')
 
+			// handle '?' button to browse path...
+			dialog.showDoc = function(){
+				var action = dialog.select('!').attr('action')
+				action 
+					&& actions.showDoc(action)
+			}
+			// clone the bindings so as not to mess up the global browser...
+			dialog.keybindings = JSON.parse(JSON.stringify(dialog.keybindings))
+			dialog.keyboard.handler('General', '?', 'showDoc')
+
+
 			return dialog
 		})],