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