New widget: an editability indicator

examples/hallo.css

@@ -9,6 +9,13 @@ div.hallotoolbar {
     z-index: 500;
 }
 
+div.halloEditIndicator {
+    background-color: #000000;
+    color: #ffffff;
+    padding: 4px;
+    border-radius: 4px;
+}
+
 /* Drag n Drop */
 [contenteditable] .tmp {
     opacity: 0.3

examples/showalways.html

@@ -74,6 +74,7 @@ <h1 class="editable">Hello World</h1>
       jQuery('#enable').button().click(function() {
         jQuery('.editable').hallo({
           plugins: {
+            'halloindicator': {},
             'halloformat': {},
             'halloheadings': {},
             'hallojustify': {},

src/plugins/indicator.coffee

@@ -0,0 +1,42 @@
+#     Hallo - a rich text editing jQuery UI widget
+#     (c) 2011 Henri Bergius, IKS Consortium
+#     Hallo may be freely distributed under the MIT license
+((jQuery) ->
+  jQuery.widget 'IKS.halloindicator',
+    options:
+      editable: null
+      className: 'halloEditIndicator'
+
+    _create: ->
+      editButton = jQuery('<div><i class="icon-edit"></i> Edit</div>');
+      editButton.addClass @options.className
+      do editButton.hide
+
+      this.element.before editButton
+
+      @bindIndicator editButton
+      @setIndicatorPosition editButton
+
+    bindIndicator: (indicator) ->
+      indicator.bind 'click', =>
+        do @options.editable.element.focus
+
+      this.element.bind 'halloactivated', ->
+        do indicator.hide
+
+      @options.editable.element.hover ->
+        return if jQuery(this).hasClass 'inEditMode'
+        do indicator.show
+      , (data) ->
+        return if jQuery(this).hasClass 'inEditMode'
+        return if data.relatedTarget is indicator.get 0
+
+        do indicator.hide
+
+    setIndicatorPosition: (indicator) ->
+      indicator.css 'position', 'absolute'
+      offset = this.element.offset()
+      indicator.css 'top', offset.top + 2
+      indicator.css 'left', offset.left + 2
+
+) jQuery