Beginnings of Help display generation, inline help for Markdown

lib/gollum/frontend/public/javascript/gollum-editor/gollum.editor.js

@@ -102,6 +102,11 @@
             } );
         }
         
+        if ( EditorHas.help() ) {
+          $('#gollum-editor-help').hide();
+          $('#gollum-editor-help').removeClass('jaws');
+        }
+        
       } 
       // EditorHas.functionBar
     } 
@@ -174,6 +179,8 @@
       } else {
         LanguageDefinition._ACTIVE_LANG = name;
       }
+      // tell help we switched languages
+      Help.setActiveHelp(name);
     },
     
     
@@ -298,6 +305,16 @@
       return ( $('input#gollum-editor-message-field').length > 0 );
     },
     
+    help: function() {
+      return ( $('#gollum-editor #gollum-editor-help').length && 
+               $('#gollum-editor #function-help').length );
+    },
+    
+    mathJax: function() {
+      //TODO
+      return false;
+    },
+    
     previewButton: function() {
       return ( $('#gollum-editor #gollum-editor-preview').length );
     },
@@ -511,6 +528,174 @@
        FormatSelector.$_SELECTOR.change( FormatSelector.evtChangeFormat );
      }
      
+   };
+   
+   
+   
+   var Help = {
+     
+     _ACTIVE_HELP: '',
+     _LOADED_HELP_LANGS: [],
+     _HELP: {},
+     
+     define: function( name, definitionObject ) {       
+       if ( Help.isValidHelpFormat( definitionObject ) ) {
+         debug('help is a valid format');
+         
+         Help._ACTIVE_HELP_LANG = name;
+         Help._LOADED_HELP_LANGS.push( name );
+         Help._HELP[name] = definitionObject;
+                 
+         if ( $("#function-help").length ) {
+           if ( $('#function-help').hasClass('disabled') ) {
+             $('#function-help').removeClass('disabled');
+           }
+           $('#function-help').unbind('click');
+           $('#function-help').click( Help.evtHelpButtonClick );
+         }
+       } else {
+         if ( $('#function-help').length ) {
+           $('#function-help').addClass('disabled');
+         }
+       }
+     },
+     
+     generateHelpMenuFor: function( name ) {
+       if ( !Help._HELP[name] ) {
+         debug('Help is not defined for ' + name.toString());
+         return false;
+       }
+       var helpData = Help._HELP[name];
+       
+       // add MathJax Help if we have it
+       // TODO
+       if ( EditorHas.mathJax() && Help.isLoadedFor('mathjax') ) {
+         debug('Adding MathJax support to help');
+         // TODO
+       }
+       
+       // clear this shiz out
+       $('#gollum-editor-help-parent').html('');
+       $('#gollum-editor-help-list').html('');
+       $('#gollum-editor-help-content').html('');
+       
+       // go go inefficient algorithm
+       for ( var i=0; i < helpData.length; i++ ) {
+         if ( typeof helpData[i] != 'object' ) break;
+         
+         var $newLi = $('<li><a href="#" rel="' + i + '">' + 
+                        helpData[i].menuName + '</a></li>');
+         $('#gollum-editor-help-parent').append( $newLi );
+         if ( i == 0 ) {
+           // select on first run
+           $newLi.children('a').addClass('selected');
+         }
+         $newLi.children('a').click( Help.evtParentMenuClick );
+       }
+       
+       // generate parent submenu on first run
+       Help.generateSubMenu( helpData[0] );
+       
+     },
+     
+     generateSubMenu: function( subData ) {
+       $('#gollum-editor-help-list').html('');
+       $('#gollum-editor-help-content').html('');
+       for ( var i=0; i < subData.content.length; i++ ) {
+         if ( typeof subData.content[i] != 'object' ) break;
+
+         var $subLi = $('<li><a href="#" rel="' + i + ':' + j + '">' +
+                        helpData[i].content[j].menuName + '</a></li>');
+
+         $('#gollum-editor-help-list').append( $subLi );
+         $subLi.children('a').click( Help.evtSubMenuClick );
+       }
+     },
+     
+     showHelp: function( index1, index2 ) {
+       var html = Help._HELP[_ACTIVE_HELP_LANG][index1].content[index2].data;
+       $('#gollum-editor-help-content').html(html);
+     },
+     
+     isLoadedFor: function( name ) {
+       for ( var i=0; i < Help._LOADED_HELP_LANGS.length; i++ ) {
+         if ( name == Help._LOADED_HELP_LANGS[i] ) {
+           return true;
+         }
+       }
+       return false;
+     },
+     
+     isValidHelpFormat: function( helpArr ) {
+       return ( typeof helpArr == 'object' &&
+                helpArr.length &&
+                typeof helpArr[0].menuName == 'string' &&
+                typeof helpArr[0].content == 'object' &&
+                helpArr[0].content.length );
+     },
+     
+     setActiveHelp: function( name ) {
+       if ( !Help.isLoadedFor( name ) ) {
+         if ( $('#function-help').length ) {
+           $('#function-help').addClass('disabled');
+         }
+       } else {
+          Help._ACTIVE_HELP_LANG = name;
+          if ( $("#function-help").length ) {
+            if ( $('#function-help').hasClass('disabled') ) {
+              $('#function-help').removeClass('disabled');
+            }
+            $('#function-help').unbind('click');
+            $('#function-help').click( Help.evtHelpButtonClick );
+          } 
+       }
+     },
+     
+     evtHelpButtonClick: function( e ) {
+       e.preventDefault();
+       
+       // cascaded animations are prettier
+       if ( $('#gollum-editor-help').is(':visible') ) {
+         $('#gollum-editor-help').animate({
+                                            opacity: 0
+                                           }, 200,
+                                          function() {
+                                            $('#gollum-editor-help')
+                                              .animate({ height: 'hide' }, 200);
+                                          });
+       } else {
+         $('#gollum-editor-help').animate({
+                                            height: 'show'
+                                           }, 200,
+                                          function() {
+                                            $('#gollum-editor-help')
+                                              .animate({ opacity: 1 }, 300);
+                                          });
+       }
+     },
+     
+     evtParentMenuClick: function( e ) {
+       // short circuit if we've selected this already
+       if ( $(this).hasClass('selected') ) return;
+       
+       // populate from help data for this
+       var helpIndex = $(this).attr('rel');
+       var subData = Help._HELP[Help._ACTIVE_HELP][helpIndex];
+       
+       $('#gollum-editor-help-content li a').removeClass('selected');
+       $(this).addClass('selected');
+       Help.generateSubMenu( subData );
+     },
+     
+     evtSubMenuClick: function( e ) {
+       if ( $(this).hasClass('selected') ) return;
+       
+       // split index rel data
+       var rawIndex = $(this).attr('rel').split(':');
+       $('#gollum-editor-help-list li a').removeClass('selected');
+       $(this).addClass('selected');
+       Help.showHelpFor( rawIndex[0], rawIndex[1] );
+     }
      
    };
    
@@ -520,6 +705,7 @@
     *  Used in exec() to display dialogs with dynamic fields.
     *
     */
+   $.GollumEditor.defineHelp = Help.define;
    $.GollumEditor.Dialog = $.GollumDialog;
    $.GollumEditor.replaceSelection = function( repText ) {
      FunctionBar.replaceFieldSelection( $('#gollum-editor-body'), repText );

lib/gollum/frontend/public/javascript/gollum-editor/langs/markdown.js

@@ -131,6 +131,32 @@ var MarkDown = {
                             
 };
 
+var MarkDownHelp = [
+
+  {
+    menuName: 'Formatting',
+    content: [
+                {
+                  menuName: 'Inline Text',
+                  data: '<p>Inline Text goes here</p>;'
+                }
+              ]
+  },
+  
+  {
+    menuName: 'Links and Images',
+    content: [
+                {
+                  menuName: 'Links and Images',
+                  data: '<p>Links and Images go here</p>'
+                }
+              ]
+  }
+
+];
+
+
 jQuery.GollumEditor.defineLanguage('markdown', MarkDown);
+jQuery.GollumEditor.defineHelp('markdown', MarkDownHelp);
 
 })();