Merge pull request bergie#74 from alkacon/master

Changes to improve browser compatibility.
tilgovi · Jul 19, 2012 · 7638182 · 7638182
2 parents c5ce237 + f38f776
commit 7638182
Show file tree

Hide file tree

Showing 11 changed files with 166 additions and 48 deletions.
diff --git a/deps/rangy-core-1.2.3.js b/deps/rangy-core-1.2.3.js
diff --git a/examples/test-annotate.html b/examples/test-annotate.html
@@ -5,10 +5,13 @@
     <link rel="stylesheet" href="hallo.css" />
     <link rel="stylesheet" href="image.css" />
     <link rel="stylesheet" href="fontawesome/css/font-awesome.css" charset="utf-8" />
+<!--[if lt IE 9]>
+    <link rel="stylesheet" href="fontawesome/css/font-awesome-ie7.css" charset="utf-8" />
+<![endif]-->
     <link rel="stylesheet" href="annotate.css" />
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
-
+	<script src="../deps/rangy-core-1.2.3.js"></script>
     <script src="http://szabyg.github.com/annotate.js/lib/underscore-min.js"></script>
     <script src="http://szabyg.github.com/annotate.js/lib/backbone-min.js"></script>
     <script src="http://szabyg.github.com/annotate.js/lib/jquery.rdfquery.min.js"></script>

diff --git a/examples/test.html b/examples/test.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="fontawesome/css/font-awesome.css" charset="utf-8" />
     <script src="../deps/jquery-1.7.1.min.js"></script>
     <script src="../deps/jquery-ui-1.8.18.custom.min.js"></script>
+    <script src="../deps/rangy-core-1.2.3.js"></script>
     <script src="hallo.js"></script>
     <title>Hallo example</title>
   </head>

diff --git a/src/hallo.coffee b/src/hallo.coffee
@@ -179,31 +179,24 @@ http://hallojs.org
         activate: ->
             @element.focus()
 
+        # Checks whether the editable element contains the current selection
+        containsSelection: ->
+            range=@getSelection()
+            return @element.has(range.startContainer).length > 0
+
         # Only supports one range for now (i.e. no multiselection)
         getSelection: ->
-            if jQuery.browser.msie
-                range = document.selection.createRange()
+            sel = rangy.getSelection()
+            range = null
+            if sel.rangeCount > 0
+                range = sel.getRangeAt(0)
             else
-                if window.getSelection
-                    userSelection = window.getSelection()
-                else if (document.selection) #opera
-                    userSelection = document.selection.createRange()
-                else
-                    throw "Your browser does not support selection handling"
-
-                if userSelection.rangeCount > 0
-                    range = userSelection.getRangeAt(0)
-                else
-                    range = userSelection
-
+                range = rangy.createRange()
             return range
 
         restoreSelection: (range) ->
-            if ( jQuery.browser.msie )
-                range.select()
-            else
-                window.getSelection().removeAllRanges()
-                window.getSelection().addRange(range)
+            sel=rangy.getSelection()
+            sel.setSingleRange(range)
 
         replaceSelection: (cb) ->
             if ( jQuery.browser.msie )

diff --git a/src/plugins/halloformat.coffee b/src/plugins/halloformat.coffee
@@ -27,6 +27,6 @@
                 buttonset.append buttonHolder
             buttonize format for format, enabled of @options.formattings when enabled
 
-            buttonset.buttonset()
+            buttonset.hallobuttonset()
             toolbar.append buttonset
 )(jQuery)
diff --git a/src/plugins/justify.coffee b/src/plugins/justify.coffee
@@ -25,7 +25,7 @@
             buttonize "Center"
             buttonize "Right"
 
-            buttonset.buttonset()
+            buttonset.hallobuttonset()
             toolbar.append buttonset
         _init: ->
 

diff --git a/src/plugins/lists.coffee b/src/plugins/lists.coffee
@@ -29,7 +29,7 @@
             buttonize "Ordered", "OL" if @options.lists.ordered
             buttonize "Unordered", "UL" if @options.lists.unordered
 
-            buttonset.buttonset()
+            buttonset.hallobuttonset()
             toolbar.append buttonset
 
 )(jQuery)
diff --git a/src/plugins/reundo.coffee b/src/plugins/reundo.coffee
@@ -25,7 +25,7 @@
             buttonize "undo", "Undo"
             buttonize "redo", "Redo"
 
-            buttonset.buttonset()
+            buttonset.hallobuttonset()
             toolbar.append buttonset
 
         _init: ->

diff --git a/src/toolbar/contextual.coffee b/src/toolbar/contextual.coffee
@@ -23,16 +23,17 @@
 
     _getPosition: (event, selection) ->
       return unless event
-      if event.originalEvent instanceof KeyboardEvent
+      eventType = event.type
+      if eventType == "keydown" || eventType == "keyup" || eventType == "keypress"
         return @_getCaretPosition selection
-      if event.originalEvent instanceof MouseEvent
+      if eventType == "click" || eventType == "mousedown" || eventType == "mouseup"
         return position =
           top: event.pageY
           left: event.pageX
 
     _getCaretPosition: (range) ->
       tmpSpan = jQuery "<span/>"
-      newRange = document.createRange()
+      newRange = rangy.createRange()
       newRange.setStart range.endContainer, range.endOffset
       newRange.insertNode tmpSpan.get 0
 

diff --git a/src/toolbar/fixed.coffee b/src/toolbar/fixed.coffee
@@ -44,7 +44,7 @@
 
     _getCaretPosition: (range) ->
       tmpSpan = jQuery "<span/>"
-      newRange = document.createRange()
+      newRange =rangy.createRange()
       newRange.setStart range.endContainer, range.endOffset
       newRange.insertNode tmpSpan.get 0
 

diff --git a/src/widgets/button.coffee b/src/widgets/button.coffee
@@ -4,6 +4,7 @@
 ((jQuery) ->
   jQuery.widget 'IKS.hallobutton',
     button: null
+    isChecked: false
 
     options:
       uuid: ''
@@ -20,55 +21,80 @@
       @options.icon ?= "icon-#{@options.label.toLowerCase()}"
 
       id = "#{@options.uuid}-#{@options.label}"
-      @element.append @_createButton id, @options.command
-      @element.append @_createLabel id, @options.command, @options.label, @options.icon
-      @element.find('label').addClass @options.cssClass if @options.cssClass
-      @button = @element.find 'input'
-      @button.button()
+      @button = @_createButton id, @options.command, @options.label, @options.icon
+      @element.append @button
       @button.addClass @options.cssClass if @options.cssClass
       @button.addClass 'btn-large' if @options.editable.options.touchScreen
       @button.data 'hallo-command', @options.command
 
+      hoverclass = 'ui-state-hover'
+      @button.bind 'mouseenter', (event) =>
+        if @isEnabled()
+          @button.addClass hoverclass
+      @button.bind 'mouseleave', (event) =>
+        @button.removeClass hoverclass
+
     _init: ->
       @button = @_prepareButton() unless @button
       @element.append @button
+      queryState = (event) =>
+        return unless @options.command
+        try
+          @checked document.queryCommandState @options.command
+        catch e
+          return
 
       if @options.command
-        @button.bind 'change', (event) =>
+        @button.bind 'click', (event) =>
           @options.editable.execute @options.command
+          queryState
+          return false
 
       return unless @options.queryState
 
       editableElement = @options.editable.element
-      queryState = (event) =>
-        return unless @options.command
-        try
-          @checked document.queryCommandState @options.command
-        catch e
-          return
       editableElement.bind 'keyup paste change mouseup hallomodified', queryState
       editableElement.bind 'halloenabled', =>
         editableElement.bind 'keyup paste change mouseup hallomodified', queryState
       editableElement.bind 'hallodisabled', =>
         editableElement.unbind 'keyup paste change mouseup hallomodified', queryState
 
     enable: ->
-      @button.button 'enable'
+      @button.removeAttr 'disabled'
 
     disable: ->
-      @button.button 'disable'
+      @button.attr 'disabled', 'true'
+
+    isEnabled: ->
+      return @button.attr('disabled') != 'true'
 
     refresh: ->
-      @button.button 'refresh'
+      if @isChecked
+        @button.addClass 'ui-state-active'
+      else
+        @button.removeClass 'ui-state-active'
 
     checked: (checked) ->
-      @button.attr 'checked', checked
+      @isChecked = checked
       @refresh()
 
-    _createButton: (id) ->
-      jQuery "<input id=\"#{id}\" type=\"checkbox\" />"
+    _createButton: (id, command, label, icon) ->
+      jQuery "<button for=\"#{id}\" class=\"ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only #{command}_button\" title=\"#{label}\"><span class=\"ui-button-text\"><i class=\"#{icon}\"></i></span></button>"
+
 
-    _createLabel: (id, command, label, icon) ->
-      jQuery "<label for=\"#{id}\" class=\"#{command}_button\" title=\"#{label}\"><i class=\"#{icon}\"></i></label>"
+  jQuery.widget 'IKS.hallobuttonset',
+    buttons: null
+    _create: ->
+      @element.addClass 'ui-buttonset'
 
+    _init: ->
+      @refresh()
+
+    refresh: ->
+      rtl = @element.css('direction') == 'rtl'
+      @buttons = @element.find '.ui-button'
+      @buttons.hallobutton 'refresh'
+      @buttons.removeClass 'ui-corner-all ui-corner-left ui-corner-right'
+      @buttons.filter(':first').addClass if rtl then 'ui-corner-right' else 'ui-corner-left'
+      @buttons.filter(':last').addClass if rtl then 'ui-corner-left' else 'ui-corner-right'
 )(jQuery)