Permalink
Browse files

Updated colorpicker, now hides when hallo disappears, added an input.

  • Loading branch information...
1 parent 00f1737 commit b1723ad87ccb8d7ef396239e8a48f1ccb700c34c @adjohu committed Mar 23, 2012
Showing with 38 additions and 7 deletions.
  1. +38 −7 plugins/colorpicker.coffee
View
45 plugins/colorpicker.coffee
@@ -36,7 +36,7 @@
@colorpicker = canvas
# bind the click event to emit a colorchanged event
- canvas.on 'click', (evt) ->
+ canvas.on 'mousedown', (evt) ->
# get position of click relative to canvas
{left, top} = canvas.offset()
{pageX, pageY} = evt
@@ -50,18 +50,42 @@
hex = RGBtoHex i[0], i[1], i[2]
# Trigger color change event
- #canvas.trigger('colorChange', [hex])
- console.log widget.options.editable
- widget.options.editable.execute 'foreColor', '#' + hex
+ console.log(widget.button)
+ widget.button.trigger 'colorChange', ['#' + hex]
+ #widget.options.editable.execute 'foreColor', '#' + hex
+ _buildInput: ->
+ widget = this
+ input = jQuery('<input type="text" />')
+ .on('keyup', ->
+ widget.button.trigger 'colorChange', input.val()
+ )
+ @colorPickerInput = input
+
+ _observeColorChange: ->
+ widget = this
+ @button.on 'colorChange', (evt, hex) ->
+ console.log arguments
+ widget.options.editable.restoreSelection(widget.lastSelection)
+ widget.options.editable.execute 'foreColor', hex
# Create the dialog the colorpicker will sit in
_makeDialog: ->
- @dialog = jQuery("<div />").hide().css('position', 'absolute')
+ widget = this
+ @dialog = jQuery("<div class='hallodropdown' />").hide().css('position', 'absolute')
.append(@colorpicker)
+ .append(@colorPickerInput)
.appendTo('body') # TODO: find somewhere better to put this
+ # Make dialog hide on hallo deactivated
+ @options.editable.element.bind "hallounselected", ->
+ widget._closeDialog()
+
+
+ _closeDialog: ->
+ @_toggleDialog() unless @dialog.is(':hidden')
+
_toggleDialog: ->
# Move dialog to be below button
label = @button.filter 'label'
@@ -86,16 +110,23 @@
buttonset.append button
button.bind "change", (event) ->
+ # Save the last selection as we may lose focus
+ widget.lastSelection = widget.options.editable.getSelection()
widget._toggleDialog()
@button = button
+ # Set up button
+ buttonize()
+
# Init colorpicker
@_buildColorpicker()
+ @_buildInput()
@_makeDialog()
- # Set up button
- buttonize()
+ # Set up colorchange observer
+ @_observeColorChange()
+
buttonset.buttonset()
@options.toolbar.append buttonset

0 comments on commit b1723ad

Please sign in to comment.