Update button state when in area of corresponding formatting

icortex · May 6, 2011 · d44424f · d44424f
1 parent d94e463
commit d44424f
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 6 deletions.
diff --git a/examples/format.js b/examples/format.js
diff --git a/examples/test.html b/examples/test.html
@@ -1,6 +1,7 @@
 <html>
  <head>
- <link rel="stylesheet" href="Aristo/jquery-ui-1.8.7.custom.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
+ <link rel="stylesheet" href="Aristo/jquery-ui-1.8.7.custom.css" />
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
  <script src="hallo.js"></script>
  <script src="format.js"></script>

diff --git a/format.coffee b/format.coffee
@@ -12,7 +12,7 @@
  _create: ->
  widget = this
  buttonset = jQuery "<span></span>"
- for format in @options.formattings
+ buttonize = (format) =>
  label = format.substr(0, 1).toUpperCase()
  id = "#{@options.uuid}-#{format}"
  buttonset.append jQuery("<input id=\"#{id}\" type=\"checkbox\" /><label for=\"#{id}\">#{label}</label>").button()
@@ -21,9 +21,19 @@
  button.bind "change", (event) ->
  format = jQuery(this).attr "hallo-command"
  widget.options.editable.execute format
+ @element.bind "keyup paste change", ->
+ if document.queryCommandState format
+ button.attr "checked", true
+ button.button "refresh"
+ else
+ button.attr "checked", false
+ button.button "refresh"
+
+ buttonize format for format in @options.formattings
 
  buttonset.buttonset()
  @options.toolbar.append buttonset
 
  _init: ->
+
 )(jQuery)