Have editor function bar fail nicely to bad language definitions

lib/gollum/frontend/public/css/editor.css

@@ -84,16 +84,23 @@ a {
 #gollum-editor #gollum-editor-function-bar  {
   border-bottom: 1px solid #ddd;
   overflow: hidden;
-  padding: 0 0 1.1em 0;
+  padding: 0;
-  display: none;
 }
 
+
 #gollum-editor-title-field + #gollum-editor-function-bar {
   margin-top: 0.6em;
 }
 
-#gollum-editor #gollum-editor-function-bar.active {
+#gollum-editor #gollum-editor-function-bar #gollum-editor-function-buttons {
+  display: none;
+}
+
+#gollum-editor #gollum-editor-function-bar.active #gollum-editor-function-buttons {
   display: block;
+  float: left;
+  overflow: hidden;
+  padding: 0 0 1.1em 0;
 }
 
 #gollum-editor #gollum-editor-function-bar a.function-button {
@@ -179,6 +186,11 @@ a#function-help:hover span { background-position: -405px -28px; }
   width: 0.5em;
 }
 
+#gollum-editor #gollum-editor-function-bar #gollum-editor-format-selector {
+  overflow: hidden;
+  padding: 0 0 1.1em 0;
+}
+
 #gollum-editor #gollum-editor-function-bar 
   #gollum-editor-format-selector select {  
   background-color: #f9f9f9;

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

@@ -81,25 +81,11 @@
           ActiveOptions.MarkupType = htmlSetMarkupLang;
         }
         
-        if ( !LanguageDefinition.isLoadedFor(ActiveOptions.MarkupType) ) {
+        // load language definition
-          debug('Loading language definition for ' + ActiveOptions.MarkupType);
+        LanguageDefinition.setActiveLanguage( ActiveOptions.MarkupType );
-          LanguageDefinition.loadFor( ActiveOptions.MarkupType, 
+        if ( EditorHas.formatSelector() ) {
-            function(data, textStatus) { 
+          FormatSelector.init( 
-              if ( textStatus != 'success' ) {
+            $('#gollum-editor-format-selector select') );
-                debug('Language definition could not be loaded for markup '
-                      + 'type ' + ActiveOptions.MarkupType);
-                return;
-              }
-              
-              if ( EditorHas.formatSelector() ) {
-                FormatSelector.init( 
-                  $('#gollum-editor-format-selector select') );
-              }
-              
-              // activate the function bar
-              debug('Activating function bar');
-              FunctionBar.activate();
-            } );
         }
         
         if ( EditorHas.help() ) {
@@ -175,12 +161,25 @@
     
     setActiveLanguage: function( name ) {
       if ( !LanguageDefinition.isLoadedFor(name) ) {
-        LanguageDefinition.loadFor( name );
+        LanguageDefinition._ACTIVE_LANG = null;
+        LanguageDefinition.loadFor( name, function(x, t) {
+          if ( t != 'success' ) {
+            debug('Failed to load language definition for ' + name);
+            return;
+          }
+          
+          // update features that rely on the language definition
+          if ( EditorHas.functionBar() )
+            FunctionBar.refresh();
+            
+          if ( LanguageDefinition.isValid() && EditorHas.formatSelector() )
+            FormatSelector.updateSelected();
+          
+        } );
       } else {
         LanguageDefinition._ACTIVE_LANG = name;
+        FunctionBar.refresh();
       }
-      // tell help we switched languages
-      Help.setActiveHelp(name);
     },
     
     
@@ -245,6 +244,12 @@
         return true;
       }
       return false;
+    },
+    
+    isValid: function() {
+      return ( LanguageDefinition._ACTIVE_LANG && 
+               typeof LanguageDefinition._LANG[LanguageDefinition._ACTIVE_LANG] == 
+               'object' );
     }
     
   };
@@ -395,10 +400,14 @@
        *
        */
       activate: function() {
+        debug('Activating function bar');
+        
         // check these out
         $('#gollum-editor-function-bar a.function-button').each(function() {
-          if ( LanguageDefinition.getDefinitionFor( $(this).attr('id') ) )
+          if ( LanguageDefinition.getDefinitionFor( $(this).attr('id') ) ) {
             $(this).click( FunctionBar.evtFunctionButtonClick );
+            $(this).removeClass('disabled');
+          }
           else if ( $(this).attr('id') != 'function-help' )
             $(this).addClass('disabled');
         });
@@ -409,6 +418,13 @@
       },
       
       
+      deactivate: function() {
+        $('#gollum-editor-function-bar a.function-button').unbind('click');
+        $('#gollum-editor-function-bar').removeClass( 'active' );
+        FunctionBar.isActive = false;
+      },
+      
+      
       /**
        *  FunctionBar.evtFunctionButtonClick
        *  Event handler for the function buttons. Traps the click and 
@@ -517,6 +533,28 @@
       },
       
       
+      isShown: function() {
+        return ($('#gollum-editor-function-bar').is(':visible'));
+      },
+      
+      refresh: function() {
+        if ( EditorHas.functionBar() ) {
+          if ( LanguageDefinition.isValid() ) {
+            $('#gollum-editor-function-bar a.function-button').unbind('click');
+            FunctionBar.activate();
+            if ( Help )
+              Help.setActiveHelp( LanguageDefinition.getActiveLanguage() );
+          } else {
+            debug('Language definition is invalid.');
+            if ( FunctionBar.isShown() ) {
+              // deactivate the function bar; it's not gonna work now
+              FunctionBar.deactivate();
+            }
+          }   
+        }
+      },
+      
+      
       /**
        *  replaceFieldSelection
        *  Replaces the currently selected substring of the textarea with 
@@ -589,13 +627,27 @@
      init: function( $sel ) {
        debug('Initializing format selector');
        
+       // unbind events if init is being called twice for some reason
+       if ( FormatSelector.$_SELECTOR &&
+            typeof FormatSelector.$_SELECTOR == 'object' ) {
+         FormatSelector.$_SELECTOR.unbind( 'change' );
+       }
+       
        FormatSelector.$_SELECTOR = $sel;
        
        // set format selector to the current language
+       FormatSelector.updateSelected();
+       FormatSelector.$_SELECTOR.change( FormatSelector.evtChangeFormat );
+     },
+     
+     
+     /**
+      * FormatSelector.update
+      */
+    updateSelected: function() {
        var currentLang = LanguageDefinition.getActiveLanguage();
        FormatSelector.$_SELECTOR.val( currentLang );
-       FormatSelector.$_SELECTOR.change( FormatSelector.evtChangeFormat );
+    }
-     }
      
    };
    

lib/gollum/frontend/templates/editor.mustache

@@ -16,6 +16,7 @@
   <input type="hidden" name="page" id="gollum-editor-page-title" value="{{page_name}}">
   {{/is_edit_page}}
   <div id="gollum-editor-function-bar">
+    <div id="gollum-editor-function-buttons">
     <a href="#" id="function-bold" class="function-button">
       <span>Bold</span></a>
     <a href="#" id="function-italic" class="function-button">
@@ -47,6 +48,7 @@
     <span class="function-divider">&nbsp;</span>
     <a href="#" id="function-help" class="function-button">
       <span>Help</span></a>
+    </div>
       
     <div id="gollum-editor-format-selector"> 
       <select id="wiki_format" name="format">

scratch/TODO

@@ -3,6 +3,8 @@
 * IE7 Styles
 * Fix how text selections occur in IE7/8 so we actually get the right text
 * Figure out why Dialogs won't fire in IE7 (likely a css issue)
+* Hide help if the new JS file doesn't have working help.
+* Hide function bar if language definition is malformed (non-404 results)
   
 * Write Editor/Sidebar implementation notes for Rick
 * Find some clever way to represent page hierarchy.