initialize: (options) ->\r
super(options)\r
this.$el.addClass(@helper_manifest.dom_class)\r
- @picker = new Locmare.FormModule.FieldModule.HelperModule.ColorModule.Picker({field: @field})\r
- @swatch = new Locmare.FormModule.FieldModule.HelperModule.ColorModule.Swatch({field: @field})\r
- @status = new Locmare.FormModule.FieldModule.HelperModule.ColorModule.Status({field: @field})\r
- @rb = new Pettanr.Tag.RowBreak()\r
+ @picker = new Locmare.FormModule.FieldModule.HelperModule.ColorModule.Picker({field: @field, helper: this})\r
+ @swatch = new Locmare.FormModule.FieldModule.HelperModule.ColorModule.Swatch({field: @field, helper: this})\r
+ @status = new Locmare.FormModule.FieldModule.HelperModule.ColorModule.Status({field: @field, helper: this})\r
+ @rb = new Tag.RowBreak()\r
\r
render: () ->\r
@attr = {\r
this.$el.append(@rb.render().el)\r
this\r
\r
+ h: () -> \r
+ h = "000000" + @field.value().toString(16)\r
+ h.substring(h.length - 6)\r
+ \r
+ slider_change: () -> \r
+ red = @picker.red.$el.slider('value')\r
+ green = @picker.green.$el.slider('value')\r
+ blue = @picker.blue.$el.slider('value')\r
+ code = (red << 16) + (green << 8) + (blue)\r
+ @field.tag.$el.val(code)\r
+ @field.set(code)\r
+ @swatch.refresh()\r
+ @status.refresh()\r
+ \r
class Locmare.FormModule.FieldModule.HelperModule.ColorModule\r
-class Locmare.FormModule.FieldModule.HelperModule.ColorModule.Slider extends Pettanr.Tag.Div\r
+class Locmare.FormModule.FieldModule.HelperModule.ColorModule.Slider extends Tag.Div\r
+ className: 'colorpicker'\r
events: {\r
- slidechange: 'color_slider_change'\r
+ slidechange: 'slider_change'\r
}\r
\r
- color_slider_change: (trace) -> \r
- alert('lide')\r
+ initialize: (options) ->\r
+ @field = options.field\r
+ @helper = options.helper\r
+ @shift = options.shift\r
+ @name = options.name\r
+ super({})\r
+ this.$el.addClass('colorpicker-' + @name)\r
+ \r
+ slider_change: (trace) -> \r
+ @helper.slider_change()\r
+ \r
+ volume: () ->\r
+ (@field.value() >> @shift) & 0xFF\r
\r
class Locmare.FormModule.FieldModule.HelperModule.ColorModule.Picker extends Backbone.View\r
tagName: 'div'\r
\r
initialize: (options) ->\r
@field = options.field\r
+ @helper = options.helper\r
@red = new Locmare.FormModule.FieldModule.HelperModule.ColorModule.Slider({\r
- class_name: 'colorpicker'\r
+ field: @field, helper: @helper, shift: 16, name: 'red'\r
})\r
- @green = new Pettanr.Tag.Div({\r
- class_name: 'colorpicker'\r
+ @green = new Locmare.FormModule.FieldModule.HelperModule.ColorModule.Slider({\r
+ field: @field, helper: @helper, shift: 8, name: 'green'\r
})\r
- @blue = new Pettanr.Tag.Div({\r
- class_name: 'colorpicker'\r
+ @blue = new Locmare.FormModule.FieldModule.HelperModule.ColorModule.Slider({\r
+ field: @field, helper: @helper, shift: 0, name: 'blue'\r
})\r
r = (@field.value() >> 16) & 0xFF\r
g = (@field.value() >> 8) & 0xFF\r
this.$el.append(@blue.render().el)\r
this\r
\r
+ refresh: () -> \r
+ \r
class Locmare.FormModule.FieldModule.HelperModule.ColorModule.Swatch extends Backbone.View\r
tagName: 'div'\r
className: 'code_swatch'\r
\r
initialize: (options) ->\r
@field = options.field\r
+ @helper = options.helper\r
this.$el.addClass('ui-widget-content')\r
this.$el.addClass('ui-corner-all')\r
\r
}\r
this.$el.attr(@attr)\r
this.$el.html('')\r
+ @refresh()\r
this\r
\r
- click: () -> \r
- w = -@field.val()\r
- @field.tag.$el.val(w)\r
- @field.render()\r
- return false\r
+ refresh: () -> \r
+ this.$el.css('background-color', '#' + @helper.h())\r
\r
class Locmare.FormModule.FieldModule.HelperModule.ColorModule.Status extends Backbone.View\r
tagName: 'div'\r
\r
initialize: (options) ->\r
@field = options.field\r
+ @helper = options.helper\r
\r
render: () ->\r
@attr = {\r
style: 'float: left;'\r
}\r
this.$el.attr(@attr)\r
- phex = "000000" + @field.value().toString(16)\r
+ \r
hex = @field.value().toString(16)\r
- h = phex.substring(phex.length - 6)\r
- @hex = new Pettanr.Tag.Div({\r
- content: 'HEX: #' + h\r
- })\r
- @rgb = new Pettanr.Tag.Div({\r
- content: 'RGB: ('\r
- })\r
+ @hex = new Tag.Div({})\r
+ @rgb = new Tag.Div({})\r
this.$el.html('')\r
this.$el.append(@hex.render().el)\r
this.$el.append(@rgb.render().el)\r
+ @refresh()\r
this\r
\r
- click: () -> \r
- w = -@field.val()\r
- @field.tag.$el.val(w)\r
- @field.render()\r
- return false\r
- \r
-class PettanrColorHelper\r
- confirm_confirm_confirm = () ->\r
- confirm( )\r
- @WritingFormat = window.PettanrWritingFormat\r
- \r
- @color_slider_change = (trace) -> \r
- red = $(trace + 'code_red').slider('value')\r
- green = $(trace + 'code_green').slider('value')\r
- blue = $(trace + 'code_blue').slider('value')\r
- code = (red << 16) + (green << 8) + (blue)\r
- phex = "000000" + code.toString(16)\r
- hex = code.toString(16)\r
- h = phex.substring(phex.length - 6)\r
- $(trace + 'code_swatch').css('background-color', '#' + h)\r
- $(trace + 'code_hex').html('HEX: #' + h)\r
- $(trace + 'code_rgb').html('RGB: (' + red + ',' + green + ',' +blue + ')')\r
- v = '#' + h\r
- if $(trace).attr('element_type') == 'ground_color'\r
- $(trace + 'code').val(code)\r
- $(trace).css('background-color', v)\r
- else\r
- $(trace + 'fore_color').val(code)\r
- $(trace).css('color', v)\r
- \r
- @add_helper = (wrapper, column) ->\r
- editor = window.PettanrEditor\r
- wrapper.map -> \r
- $(@).css('display', 'block')\r
- \r
- $('.colorpicker', wrapper).map -> \r
- if editor.is_element_part($(@))\r
- code_picker_trace = editor.element_part_tag_id($(@))\r
- else\r
- code_picker_trace = editor.element_tag_id($(@))\r
- code = parseInt($(code_picker_trace + column).val())\r
- red = (code >> 16) & 0xFF\r
- green = (code >> 8) & 0xFF\r
- blue = code & 0xFF\r
- $(code_picker_trace + 'code_red').slider {\r
- orientation: 'horizontal',\r
- range: 'min',\r
- max: 255,\r
- value: red,\r
- change: ( event, ui ) ->\r
- if editor.is_element_part($(@).parent())\r
- trace = editor.element_part_tag_id($(@).parent())\r
- else\r
- trace = editor.element_tag_id($(@).parent())\r
- PettanrColorHelper.color_slider_change(trace)\r
- }\r
- $(code_picker_trace + 'code_green').slider {\r
- orientation: 'horizontal',\r
- range: 'min',\r
- max: 255,\r
- value: green,\r
- change: ( event, ui ) ->\r
- if editor.is_element_part($(@).parent())\r
- trace = editor.element_part_tag_id($(@).parent())\r
- else\r
- trace = editor.element_tag_id($(@).parent())\r
- PettanrColorHelper.color_slider_change(trace)\r
- }\r
- $(code_picker_trace + 'code_blue').slider {\r
- orientation: 'horizontal',\r
- range: 'min',\r
- max: 255,\r
- value: blue,\r
- change: ( event, ui ) ->\r
- if editor.is_element_part($(@).parent())\r
- trace = editor.element_part_tag_id($(@).parent())\r
- else\r
- trace = editor.element_tag_id($(@).parent())\r
- PettanrColorHelper.color_slider_change(trace)\r
- }\r
- PettanrColorHelper.color_slider_change(code_picker_trace)\r
+ refresh: () -> \r
+ @hex.$el.html('HEX: #' + @helper.h())\r
+ @rgb.$el.html('RGB: (' + @r() + ',' + @g() + ',' + @b() + ')' )\r
+ \r
+ r: () -> \r
+ @helper.picker.red.volume().toString()\r
+ \r
+ g: () -> \r
+ @helper.picker.green.volume().toString()\r
+ \r
+ b: () -> \r
+ @helper.picker.blue.volume().toString()\r
\r
OSDN Git Service
