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
12 @rb = new Tag.RowBreak()
\r
16 style: 'display: block'
\r
18 this.$el.attr(@attr)
\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
33 h = "000000" + c.toString(16)
\r
34 h.substring(h.length - 6)
\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
46 class Locmare.FormModule.FieldModule.HelperModule.ColorModule
\r
47 class Locmare.FormModule.FieldModule.HelperModule.ColorModule.Slider extends Tag.Div
\r
48 className: 'colorpicker'
\r
50 slidechange: 'slider_change'
\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
59 this.$el.addClass('colorpicker-' + @name)
\r
61 slider_change: (trace) ->
\r
62 @helper.slider_change()
\r
65 (@field.value() >> @shift) & 0xFF
\r
67 class Locmare.FormModule.FieldModule.HelperModule.ColorModule.Picker extends Backbone.View
\r
69 className: 'colorpickers'
\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
77 @green = new Locmare.FormModule.FieldModule.HelperModule.ColorModule.Slider({
\r
78 field: @field, helper: @helper, shift: 8, name: 'green'
\r
80 @blue = new Locmare.FormModule.FieldModule.HelperModule.ColorModule.Slider({
\r
81 field: @field, helper: @helper, shift: 0, name: 'blue'
\r
83 r = (@field.value() >> 16) & 0xFF
\r
84 g = (@field.value() >> 8) & 0xFF
\r
85 b = @field.value() & 0xFF
\r
87 orientation: 'horizontal',
\r
93 orientation: 'horizontal',
\r
99 orientation: 'horizontal',
\r
107 style: 'float: left;'
\r
109 this.$el.attr(@attr)
\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
119 class Locmare.FormModule.FieldModule.HelperModule.ColorModule.Swatch extends Backbone.View
\r
121 className: 'code_swatch'
\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
131 style: 'float: left;'
\r
133 this.$el.attr(@attr)
\r
139 this.$el.css('background-color', '#' + @helper.h())
\r
141 class Locmare.FormModule.FieldModule.HelperModule.ColorModule.Status extends Backbone.View
\r
144 initialize: (options) ->
\r
145 @field = options.field
\r
146 @helper = options.helper
\r
150 style: 'float: left;'
\r
152 this.$el.attr(@attr)
\r
154 @hex = new Tag.Div({})
\r
155 @rgb = new Tag.Div({})
\r
157 this.$el.append(@hex.render().el)
\r
158 this.$el.append(@rgb.render().el)
\r
163 @hex.$el.html('HEX: #' + @helper.h())
\r
164 @rgb.$el.html('RGB: (' + @r() + ',' + @g() + ',' + @b() + ')' )
\r
167 @helper.picker.red.volume().toString()
\r
170 @helper.picker.green.volume().toString()
\r
173 @helper.picker.blue.volume().toString()
\r