Configurable Note plugin

cnx/aloha-config.coffee

@@ -48,10 +48,16 @@
     ]
 
     note:
-      types:
-        'note': true
-        'noteish': true
-        'noteish-notitle': false
+      types: [
+        { label: 'Note',      cls: 'note', hasTitle: true }
+        { label: 'Aside',     cls: 'note', hasTitle: true, type: 'aside' }
+        { label: 'Warning',   cls: 'note', hasTitle: true, type: 'warning' }
+        { label: 'Tip',       cls: 'note', hasTitle: true, type: 'tip' }
+        { label: 'Important', cls: 'note', hasTitle: true, type: 'important' }
+
+        { label: 'Noteish',   cls: 'noteish', hasTitle: true }
+        { label: 'Noteish (no Title)', cls: 'noteish-notitle', hasTitle: false }
+      ]
 
     # This whole thing is what's needed to:
     #

src/plugins/oer/note/lib/note-plugin.coffee

@@ -8,41 +8,51 @@ define [
   'semanticblock/semanticblock-plugin'
   'css!note/css/note-plugin.css'], (Aloha, Plugin, jQuery, Ephemera, UI, Button, semanticBlock) ->
 
-  TITLE_CONTAINER = '''
+  TITLE_CONTAINER = jQuery('''
         <div class="type-container dropdown">
             <a class="type" data-toggle="dropdown"></a>
             <span class="title" placeholder="Add a title (optional)"></span>
             <ul class="dropdown-menu">
-                <li><a href="">Note</a></li>
-                <li><a href="">Aside</a></li>
-                <li><a href="">Warning</a></li>
-                <li><a href="">Tip</a></li>
-                <li><a href="">Important</a></li>
             </ul>
         </div>
-  '''
+  ''')
+
+  # Find all classes that could mean something is "notish"
+  # so they can be removed when the type is changed from the dropdown.
+  notishClasses = {}
 
   Plugin.create 'note',
     init: () ->
       # Load up specific classes to listen to or use the default
       types = @settings.types or {note: true}
-      jQuery.map types, (hasTitle, className) ->
-
-        # These 2 variables should be moved into the config so other note-ish classes
-        # can define what the element name is that is generated for the note and
+      jQuery.each types, (i, type) =>
+        className = type.cls or throw 'BUG Invalid configuration of not plugin. cls required!'
+        typeName = type.type
+        hasTitle = !!type.hasTitle
+        label = type.label or throw 'BUG Invalid configuration of not plugin. label required!'
+
+        # These 2 variables allow other note-ish classes
+        # to define what the element name is that is generated for the note and
         # for the title.
         #
         # Maybe they could eventually be functions so titles for inline notes generate
         # a `span` instead of a `div` for example.
-        tagName = 'div'
-        titleTagName = 'div'
+        tagName = type.tagName or 'div'
+        titleTagName = type.titleTagName or 'div'
+
+        selector = ".#{className}:not([data-type])"
+        selector = ".#{className}[data-type='#{typeName}']" if typeName
+
+        notishClasses[className] = true
+
+
         newTemplate = jQuery("<#{tagName}></#{tagName}")
         newTemplate.addClass(className)
-        newTemplate.attr('data-type', className)
+        newTemplate.attr('data-type', typeName) if typeName
         if hasTitle
           newTemplate.append("<#{titleTagName} class='title'></#{titleTagName}")
 
-        semanticBlock.activateHandler(className, (element) ->
+        semanticBlock.activateHandler(selector, (element) =>
           if hasTitle
             titleElement = element.children('.title')
 
@@ -58,9 +68,40 @@ define [
           element.children().remove()
 
           if hasTitle
-            titleContainer = jQuery(TITLE_CONTAINER)
+            titleContainer = TITLE_CONTAINER.clone()
+            # Add dropdown elements for each possible type
+            jQuery.each @settings.types, (i, foo) =>
+              $option = jQuery('<li><a href=""></a></li>')
+              $option.appendTo(titleContainer.find('.dropdown-menu'))
+              $option = $option.children('a')
+              $option.text(foo.label)
+              $option.on 'click', =>
+                # Remove the title if this type does not have one
+                # The title was moved into `.type-container` for some reason
+                if foo.hasTitle
+                  # If there is no `.title` element then add one in and enable it as an Aloha block
+                  if not element.find('> .type-container > .title')[0]
+                    $newTitle = jQuery("<#{foo.titleTagName or 'span'} class='title'></#{foo.titleTagName or 'span'}")
+                    element.children('.type-container').append($newTitle)
+                    $newTitle.aloha()
+
+                else
+                  element.find('> .type-container > .title').remove()
+
+                # Remove the `data-type` if this type does not have one
+                if foo.type
+                  element.attr('data-type', foo.type)
+                else
+                  element.removeAttr('data-type')
+
+                # Remove all notish class names and then add this one in
+                for key of notishClasses
+                  element.removeClass key
+                element.addClass(foo.cls)
+
+
             titleContainer.find('.title').text(title)
-            titleContainer.find('.type').text(type.charAt(0).toUpperCase() + type.slice(1) )
+            titleContainer.find('.type').text(label)
             titleContainer.prependTo(element)
             titleContainer.children('.title').aloha()
 
@@ -71,7 +112,7 @@ define [
           .appendTo(element)
           .aloha()
         )
-        semanticBlock.deactivateHandler(className, (element) ->
+        semanticBlock.deactivateHandler(selector, (element) ->
           bodyElement = element.children('.body')
           body = bodyElement.children()
 
@@ -93,10 +134,10 @@ define [
           element.append(body)
         )
         # Add a listener
-        UI.adopt "insert-#{className}", Button,
+        UI.adopt "insert-#{className}#{typeName}", Button,
           click: -> semanticBlock.insertAtCursor(newTemplate.clone())
 
         # For legacy toolbars listen to 'insertNote'
-        if 'note' == className
+        if 'note' == className and not typeName
           UI.adopt "insertNote", Button,
             click: -> semanticBlock.insertAtCursor(newTemplate.clone())

src/plugins/oer/semanticblock/lib/semanticblock-plugin.coffee

@@ -60,21 +60,19 @@ define ['aloha', 'block/blockmanager', 'aloha/plugin', 'aloha/pluginmanager', 'j
     unless element.parent('.semantic-container').length or element.is('.semantic-container')
       element.addClass 'aloha-oer-block'
       element.wrap(blockTemplate).parent().append(blockControls.clone()).alohaBlock()
-      type = undefined
-      for type of activateHandlers
-        if element.hasClass(type)
-          activateHandlers[type] element
+      for selector of activateHandlers
+        if element.is(selector)
+          activateHandlers[selector] element
           break
 
   deactivate = (element) ->
     if element.parent('.semantic-container').length or element.is('.semantic-container')
       element.removeClass 'aloha-oer-block ui-draggable'
       element.removeAttr 'style'
 
-      type = undefined
-      for type of deactivateHandlers
-        if element.hasClass(type)
-          deactivateHandlers[type] element
+      for selector of deactivateHandlers
+        if element.is(selector)
+          deactivateHandlers[selector] element
           break
       element.siblings('.semantic-controls').remove()
       element.unwrap()
@@ -96,8 +94,8 @@ define ['aloha', 'block/blockmanager', 'aloha/plugin', 'aloha/pluginmanager', 'j
   Plugin.create 'semanticblock',
 
     makeClean: (content) ->
-      for type of deactivateHandlers
-        content.find('.aloha-oer-block.'+type).each ->
+      for selector of deactivateHandlers
+        content.find(".aloha-oer-block#{selector}").each ->
           deactivate jQuery(this)
 
     init: ->
@@ -116,7 +114,7 @@ define ['aloha', 'block/blockmanager', 'aloha/plugin', 'aloha/pluginmanager', 'j
         $root = params.obj
         # Add a `.aloha-oer-block` to all registered classes
         classes = []
-        classes.push ".#{cls}" for cls of activateHandlers
+        classes.push selector for selector of activateHandlers
         $root.find(classes.join()).each (i, el) ->
           $el = jQuery(el)
           $el.addClass 'aloha-oer-block' if not $el.parents('.semantic-drag-source')[0]
@@ -159,11 +157,11 @@ define ['aloha', 'block/blockmanager', 'aloha/plugin', 'aloha/pluginmanager', 'j
       $element = Aloha.jQuery('.semantic-temp').removeClass('semantic-temp')
       activate $element
 
-    activateHandler: (type, handler) ->
-      activateHandlers[type] = handler
+    activateHandler: (selector, handler) ->
+      activateHandlers[selector] = handler
 
-    deactivateHandler: (type, handler) ->
-      deactivateHandlers[type] = handler
+    deactivateHandler: (selector, handler) ->
+      deactivateHandlers[selector] = handler
 
     registerEvent: (name, selector, callback) ->
       pluginEvents.push