Adding a CSS scope option to hallo.

src/hallo.coffee

@@ -95,12 +95,14 @@ http://hallojs.org
             editable: true
             plugins: {}
             toolbar: 'halloToolbarContextual'
+            toolbarOffset: 0
             parentElement: 'body'
             buttonCssClass: null
             placeholder: ''
             forceStructured: true
             checkTouch: true
             touchScreen: null
+            cssScope: null
 
         _create: ->
             @id = @_generateUUID()
@@ -273,12 +275,16 @@ http://hallojs.org
             "#{S4()}#{S4()}-#{S4()}-#{S4()}-#{S4()}-#{S4()}#{S4()}#{S4()}"
 
         _prepareToolbar: ->
-            @toolbar = jQuery('<div class="hallotoolbar"></div>').hide()
+            toolbarClass = "hallotoolbar"
+            if @options.cssScope
+                toolbarClass += " " + @options.cssScope
+            @toolbar = jQuery('<div class="'+toolbarClass+'"></div>').hide()
 
             jQuery(@element)[@options.toolbar]
               editable: @
               parentElement: @options.parentElement
               toolbar: @toolbar
+              toolbarOffset: @options.toolbarOffset
 
             for plugin of @options.plugins
                 jQuery(@element)[plugin] 'populateToolbar', @toolbar

src/plugins/block.coffee

@@ -7,7 +7,9 @@
       editable: null
       toolbar: null
       uuid: ''
-      elements: [
+      label: 'Block formats'
+      elements: null
+      defaultElements: [
         'h1'
         'h2'
         'h3'
@@ -18,7 +20,7 @@
       buttonCssClass: null
 
     populateToolbar: (toolbar) ->
-      buttonset = jQuery "<span class=\"#{@widgetName}\"></span>"
+      buttonset = jQuery "<span class=\"#{@widgetName} ui-buttonset\"></span>"
       contentId = "#{@options.uuid}-#{@widgetName}-data"
       target = @_prepareDropdown contentId
       buttonset.append target
@@ -63,8 +65,11 @@
           @options.editable.element.unbind 'keyup paste change mouseup', queryState
 
         el
-
-      for element in @options.elements
+      if @options.elements
+      	elements = @options.elements
+      else
+        elements = @options.defaultElements
+      for element in elements
         contentArea.append addElement element
       contentArea
 
@@ -73,7 +78,7 @@
       buttonElement.hallodropdownbutton
         uuid: @options.uuid
         editable: @options.editable
-        label: 'block'
+        label: @options.label
         icon: 'icon-text-height'
         target: target
         cssClass: @options.buttonCssClass

src/plugins/halloformat.coffee

@@ -6,11 +6,13 @@
         options:
             editable: null
             uuid: ""
-            formattings: 
-                bold: true
-                italic: true
-                strikeThrough: false
-                underline: false
+            defaultFormats: [
+                (command: "bold", label: "Bold")
+                (command: "italic", label: "Italic")
+                (command: "strikeThrough", label: "Strike through")
+                (command: "underline", label: "Underline")
+            ]
+            formats: null
             buttonCssClass: null
 
         populateToolbar: (toolbar) ->
@@ -19,13 +21,15 @@
             buttonize = (format) =>
                 buttonHolder = jQuery '<span></span>'
                 buttonHolder.hallobutton
-                  label: format
+                  label: format.label
                   editable: @options.editable
-                  command: format
+                  command: format.command
                   uuid: @options.uuid
                   cssClass: @options.buttonCssClass
+                  icon: "icon-#{format.command.toLowerCase()}"
                 buttonset.append buttonHolder
-            buttonize format for format, enabled of @options.formattings when enabled
+            formats = if @options.formats != null then @options.formats else @options.defaultFormats
+            buttonize(format) for format in formats
 
             buttonset.hallobuttonset()
             toolbar.append buttonset

src/plugins/justify.coffee

@@ -8,22 +8,29 @@
             toolbar: null
             uuid: ''
             buttonCssClass: null
+            defaultFormats: [
+                (command: "Left", label: "Left")
+                (command: "Center", label: "Center")
+                (command: "Right", label: "Right")
+                (command: "Full", label: "Block", icon: "justify")
+            ]
+            formats: null
 
         populateToolbar: (toolbar) ->
             buttonset = jQuery "<span class=\"#{@widgetName}\"></span>"
-            buttonize = (alignment) =>
+            buttonize = (format) =>
                 buttonElement = jQuery '<span></span>'
+                iconName= if format.icon then format.icon else format.command.toLowerCase()
                 buttonElement.hallobutton
                   uuid: @options.uuid
                   editable: @options.editable
-                  label: alignment
-                  command: "justify#{alignment}"
-                  icon: "icon-align-#{alignment.toLowerCase()}"
+                  label: format.label
+                  command: "justify#{format.command}"
+                  icon: "icon-align-#{iconName}"
                   cssClass: @options.buttonCssClass
                 buttonset.append buttonElement 
-            buttonize "Left"
-            buttonize "Center"
-            buttonize "Right"
+            formats = if @options.formats != null then @options.formats else @options.defaultFormats
+            buttonize(format) for format in formats
 
             buttonset.hallobuttonset()
             toolbar.append buttonset

src/plugins/lists.coffee

@@ -7,27 +7,32 @@
             editable: null
             toolbar: null
             uuid: ''
+            defaultFormats: [
+                (command: "Ordered", label: "Ordered list", icon: "ol")
+                (command: "Unordered", label: "Unordered list", icon: "ul")
+            ]
+            formats: null
             lists:
                 ordered: true
                 unordered: true
             buttonCssClass: null
 
         populateToolbar: (toolbar) ->
             buttonset = jQuery "<span class=\"#{@widgetName}\"></span>"
-            buttonize = (type, label) =>
+            buttonize = (format) =>
 
                 buttonElement = jQuery '<span></span>'
                 buttonElement.hallobutton
                   uuid: @options.uuid
                   editable: @options.editable
-                  label: label
-                  command: "insert#{type}List"
-                  icon: "icon-list-#{label.toLowerCase()}"
+                  label: format.label
+                  command: "insert#{format.command}List"
+                  icon: "icon-list-#{format.icon}"
                   cssClass: @options.buttonCssClass
                 buttonset.append buttonElement
 
-            buttonize "Ordered", "OL" if @options.lists.ordered
-            buttonize "Unordered", "UL" if @options.lists.unordered
+            formats = if @options.formats != null then @options.formats else @options.defaultFormats
+            buttonize(format) for format in formats
 
             buttonset.hallobuttonset()
             toolbar.append buttonset

src/plugins/reundo.coffee

@@ -8,6 +8,8 @@
             toolbar: null
             uuid: ''
             buttonCssClass: null
+            labelUndo: "Undo"
+            labelRedo: "Redo"
 
         populateToolbar: (toolbar) ->
             buttonset = jQuery "<span class=\"#{@widgetName}\"></span>"
@@ -22,8 +24,8 @@
                   queryState: false
                   cssClass: @options.buttonCssClass
                 buttonset.append buttonElement
-            buttonize "undo", "Undo"
-            buttonize "redo", "Redo"
+            buttonize "undo", @options.labelUndo
+            buttonize "redo", @options.labelRedo
 
             buttonset.hallobuttonset()
             toolbar.append buttonset

src/toolbar/fixed.coffee

@@ -11,6 +11,7 @@
       parentElement: 'body'
       editable: null
       toolbar: null
+      toolbarOffset: 0
 
     _create: ->
       @toolbar = @options.toolbar
@@ -27,20 +28,26 @@
       # element when floating is set to true
       if @options.parentElement is 'body' and not @options.floating
         el = jQuery(@element)
-        widthToAdd = parseFloat el.css('padding-left')
-        widthToAdd += parseFloat el.css('padding-right')
-        widthToAdd += parseFloat el.css('border-left-width')
-        widthToAdd += parseFloat el.css('border-right-width')
-        widthToAdd += (parseFloat el.css('outline-width')) * 2
-        widthToAdd += (parseFloat el.css('outline-offset')) * 2
-        jQuery(@toolbar).css "width", el.width() + widthToAdd
+        elementWidth=el.width()
+        if elementWidth > 20
+          widthToAdd = parseFloat el.css('padding-left')
+          widthToAdd += parseFloat el.css('padding-right')
+          widthToAdd += parseFloat el.css('border-left-width')
+          widthToAdd += parseFloat el.css('border-right-width')
+          try
+            widthToAdd += (parseFloat el.css('outline-width')) * 2
+            widthToAdd += (parseFloat el.css('outline-offset')) * 2
+          # clear right padding
+          jQuery(@toolbar).css "padding-right", ""
+          jQuery(@toolbar).css "width", el.width() + widthToAdd
+        else
+          jQuery(@toolbar).css "padding-right", "4px"
+          jQuery(@toolbar).css "width", ""
 
     _getPosition: (event, selection) ->
-      return unless event
-      offset = parseFloat(@element.css('outline-width')) + parseFloat(@element.css('outline-offset'))
       return position =
-        top: @element.offset().top - @toolbar.outerHeight() - offset
-        left: @element.offset().left - offset
+        top: 0
+        left: 0
 
     _getCaretPosition: (range) ->
       tmpSpan = jQuery "<span/>"
@@ -58,7 +65,7 @@
     setPosition: ->
       return unless @options.parentElement is 'body'
       @toolbar.css 'position', 'absolute'
-      @toolbar.css 'top', @element.offset().top - @toolbar.outerHeight()
+      @toolbar.css 'top', @element.offset().top - @toolbar.outerHeight() - @options.toolbarOffset
       @toolbar.css 'left', @element.offset().left
 
     _updatePosition: (position) ->

src/widgets/dropdownbutton.coffee

@@ -59,7 +59,7 @@
     _prepareButton: ->
       id = "#{@options.uuid}-#{@options.label}"
       buttonEl = jQuery """<button id=\"#{id}\" data-toggle=\"dropdown\" data-target=\"##{@options.target.attr('id')}\" title=\"#{@options.label}\">
-          <span class="ui-button-text"><i class=\"#{@options.icon}\"></i></span>
+          <i class=\"#{@options.icon}\"></i>
         </button>"""
       buttonEl.addClass @options.cssClass if @options.cssClass