1 class Locmare.FormModule.FieldModule.HelperModule.Color extends Locmare.FormModule.FieldModule.HelperModule.Base
\r
3 className: 'code-wrap'
\r
6 initialize: (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
15 style: 'display: block'
\r
17 this.$el.attr(@attr)
\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
32 h = "000000" + c.toString(16)
\r
33 h.substring(h.length - 6)
\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
45 class Locmare.FormModule.FieldModule.HelperModule.ColorModule
\r
46 class Locmare.FormModule.FieldModule.HelperModule.ColorModule.Slider extends Tag.Div
\r
47 className: 'colorpicker'
\r
49 slidechange: 'slider_change'
\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
58 this.$el.addClass('colorpicker-' + @name)
\r
60 slider_change: (trace) ->
\r
61 @helper.slider_change()
\r
64 (@field.value() >> @shift) & 0xFF
\r
66 class Locmare.FormModule.FieldModule.HelperModule.ColorModule.Picker extends Pettanr.View
\r
68 className: 'colorpickers'
\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
76 @green = new Locmare.FormModule.FieldModule.HelperModule.ColorModule.Slider({
\r
77 field: @field, helper: @helper, shift: 8, name: 'green'
\r
79 @blue = new Locmare.FormModule.FieldModule.HelperModule.ColorModule.Slider({
\r
80 field: @field, helper: @helper, shift: 0, name: 'blue'
\r
82 r = (@field.value() >> 16) & 0xFF
\r
83 g = (@field.value() >> 8) & 0xFF
\r
84 b = @field.value() & 0xFF
\r
86 orientation: 'horizontal',
\r
92 orientation: 'horizontal',
\r
98 orientation: 'horizontal',
\r
106 style: 'float: left;'
\r
108 this.$el.attr(@attr)
\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
118 class Locmare.FormModule.FieldModule.HelperModule.ColorModule.Swatch extends Pettanr.View
\r
120 className: 'code_swatch'
\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
130 style: 'float: left;'
\r
132 this.$el.attr(@attr)
\r
138 this.$el.css('background-color', '#' + @helper.h())
\r
140 class Locmare.FormModule.FieldModule.HelperModule.ColorModule.Status extends Pettanr.View
\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
151 style: 'float: left;'
\r
153 this.$el.attr(@attr)
\r
156 this.$el.append(@hex.render().el)
\r
157 this.$el.append(@rgb.render().el)
\r
162 @hex.$el.html('HEX: #' + @helper.h())
\r
163 @rgb.$el.html('RGB: (' + @r() + ',' + @g() + ',' + @b() + ')' )
\r
166 @helper.picker.red.volume().toString()
\r
169 @helper.picker.green.volume().toString()
\r
172 @helper.picker.blue.volume().toString()
\r