app/assets/javascripts/locmare/form/field/helper/color.js.coffee

   1 class Locmare.FormModule.FieldModule.HelperModule.Color extends Locmare.FormModule.FieldModule.HelperModule.Base\r
   2   tagName: 'div'\r
   3   className: 'code-wrap'\r
   4   \r
   5   # wrapper\r
   6   initialize: (options) ->\r
   7     super(options)\r
   8     this.$el.addClass(@helper_manifest.dom_class)\r
   9     @picker = new Locmare.FormModule.FieldModule.HelperModule.ColorModule.Picker({field: @field, helper: this})\r
  10     @swatch = new Locmare.FormModule.FieldModule.HelperModule.ColorModule.Swatch({field: @field, helper: this})\r
  11     @status = new Locmare.FormModule.FieldModule.HelperModule.ColorModule.Status({field: @field, helper: this})\r
  12     @rb = new Tag.RowBreak()\r
  13   \r
  14   render: () ->\r
  15     @attr = {\r
  16       style: 'display: block'\r
  17     }\r
  18     this.$el.attr(@attr)\r
  19     this.$el.html('')\r
  20     this.$el.append(@picker.render().el)\r
  21     this.$el.append(@swatch.render().el)\r
  22     this.$el.append(@status.render().el)\r
  23     this.$el.append(@rb.render().el)\r
  24     this\r
  25   \r
  26   refresh: () ->\r
  27     @picker.refresh()\r
  28     @swatch.refresh()\r
  29     @status.refresh()\r
  30   \r
  31   h: () -> \r
  32     c = @field.value()\r
  33     h = "000000" + c.toString(16)\r
  34     h.substring(h.length - 6)\r
  35   \r
  36   slider_change: () -> \r
  37     red = @picker.red.$el.slider('value')\r
  38     green = @picker.green.$el.slider('value')\r
  39     blue = @picker.blue.$el.slider('value')\r
  40     code = (red << 16) + (green << 8) + (blue)\r
  41     @field.tag.$el.val(code)\r
  42     @field.trigger('change')\r
  43     @swatch.refresh()\r
  44     @status.refresh()\r
  45   \r
  46 class Locmare.FormModule.FieldModule.HelperModule.ColorModule\r
  47 class Locmare.FormModule.FieldModule.HelperModule.ColorModule.Slider extends Tag.Div\r
  48   className: 'colorpicker'\r
  49   events: {\r
  50     slidechange: 'slider_change'\r
  51   }\r
  52   \r
  53   initialize: (options) ->\r
  54     @field = options.field\r
  55     @helper = options.helper\r
  56     @shift = options.shift\r
  57     @name = options.name\r
  58     super({})\r
  59     this.$el.addClass('colorpicker-' + @name)\r
  60   \r
  61   slider_change: (trace) -> \r
  62     @helper.slider_change()\r
  63   \r
  64   volume: () ->\r
  65     (@field.value() >> @shift) & 0xFF\r
  66   \r
  67 class Locmare.FormModule.FieldModule.HelperModule.ColorModule.Picker extends Backbone.View\r
  68   tagName: 'div'\r
  69   className: 'colorpickers'\r
  70   \r
  71   initialize: (options) ->\r
  72     @field = options.field\r
  73     @helper = options.helper\r
  74     @red = new Locmare.FormModule.FieldModule.HelperModule.ColorModule.Slider({\r
  75       field: @field, helper: @helper, shift: 16, name: 'red'\r
  76     })\r
  77     @green = new Locmare.FormModule.FieldModule.HelperModule.ColorModule.Slider({\r
  78       field: @field, helper: @helper, shift: 8, name: 'green'\r
  79     })\r
  80     @blue = new Locmare.FormModule.FieldModule.HelperModule.ColorModule.Slider({\r
  81       field: @field, helper: @helper, shift: 0, name: 'blue'\r
  82     })\r
  83     r = (@field.value() >> 16) & 0xFF\r
  84     g = (@field.value() >> 8) & 0xFF\r
  85     b = @field.value() & 0xFF\r
  86     @red.$el.slider {\r
  87       orientation: 'horizontal',\r
  88       range: 'min',\r
  89       max: 255,\r
  90       value: r \r
  91     }\r
  92     @green.$el.slider {\r
  93       orientation: 'horizontal',\r
  94       range: 'min',\r
  95       max: 255,\r
  96       value: g \r
  97     }\r
  98     @blue.$el.slider {\r
  99       orientation: 'horizontal',\r
 100       range: 'min',\r
 101       max: 255,\r
 102       value: b \r
 103     }\r
 104   \r
 105   render: () ->\r
 106     @attr = {\r
 107       style: 'float: left;'\r
 108     }\r
 109     this.$el.attr(@attr)\r
 110     this.$el.html('')\r
 111     this.$el.append(@red.render().el)\r
 112     this.$el.append(@green.render().el)\r
 113     this.$el.append(@blue.render().el)\r
 114     this\r
 115   \r
 116   refresh: () -> \r
 117     null\r
 118   \r
 119 class Locmare.FormModule.FieldModule.HelperModule.ColorModule.Swatch extends Backbone.View\r
 120   tagName: 'div'\r
 121   className: 'code_swatch'\r
 122   \r
 123   initialize: (options) ->\r
 124     @field = options.field\r
 125     @helper = options.helper\r
 126     this.$el.addClass('ui-widget-content')\r
 127     this.$el.addClass('ui-corner-all')\r
 128   \r
 129   render: () ->\r
 130     @attr = {\r
 131       style: 'float: left;'\r
 132     }\r
 133     this.$el.attr(@attr)\r
 134     this.$el.html('')\r
 135     @refresh()\r
 136     this\r
 137   \r
 138   refresh: () -> \r
 139     this.$el.css('background-color', '#' + @helper.h())\r
 140   \r
 141 class Locmare.FormModule.FieldModule.HelperModule.ColorModule.Status extends Backbone.View\r
 142   tagName: 'div'\r
 143   \r
 144   initialize: (options) ->\r
 145     @field = options.field\r
 146     @helper = options.helper\r
 147     @hex = new Tag.Div({})\r
 148     @rgb = new Tag.Div({})\r
 149   \r
 150   render: () ->\r
 151     @attr = {\r
 152       style: 'float: left;'\r
 153     }\r
 154     this.$el.attr(@attr)\r
 155     \r
 156     this.$el.html('')\r
 157     this.$el.append(@hex.render().el)\r
 158     this.$el.append(@rgb.render().el)\r
 159     @refresh()\r
 160     this\r
 161   \r
 162   refresh: () -> \r
 163     @hex.$el.html('HEX: #' + @helper.h())\r
 164     @rgb.$el.html('RGB: (' + @r()  + ',' + @g()  + ',' + @b()  + ')' )\r
 165   \r
 166   r: () -> \r
 167     @helper.picker.red.volume().toString()\r
 168   \r
 169   g: () -> \r
 170     @helper.picker.green.volume().toString()\r
 171   \r
 172   b: () -> \r
 173     @helper.picker.blue.volume().toString()\r
 174   \r