if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_color' and $(@).attr('column') == 'code'\r
$(@).hide()\r
\r
- $('#colorpicker-red, #colorpicker-green, #colorpicker-blue').map -> \r
- trace = element_tag_id($(@).parent())\r
- $(@).slider {\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
+ $(trace + 'code').val(code)\r
+ v = '#' + h\r
+ $(trace).css('background-color', v)\r
+ \r
+ $('.colorpicker').map -> \r
+ code_picker_trace = element_tag_id($(@))\r
+ code = parseInt($(code_picker_trace + 'code').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: 127,\r
+ value: red,\r
change: ( event, ui ) ->\r
- red = $('#colorpicker-red').slider('value')\r
- green = $('#colorpicker-green').slider('value')\r
- blue = $('#colorpicker-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
- $('#colorpicker-swatch').css('background-color', '#' + h)\r
- $('#colorpicker-hex').html('HEX: #' + h)\r
- $('#colorpicker-rgb').html('RGB: (' + red + ',' + green + ',' +blue + ')')\r
- $(trace + 'code').val(code)\r
- v = '#' + h\r
- $(trace).css('background-color', v)\r
+ trace = element_tag_id($(@).parent())\r
+ color_slider_change(trace)\r
}\r
-\r
- $('.colorpicker').map -> \r
- trace = element_tag_id($(@))\r
- code = parseInt($(trace + 'code').val())\r
- $('.colorpicker-red').map -> \r
- v = (code >> 16) & 0xFF\r
- $(@).slider('value', v)\r
- $('.colorpicker-green').map -> \r
- v = (code >> 8) & 0xFF\r
- $(@).slider('value', v)\r
- $('.colorpicker-blue').map -> \r
- v = code & 0xFF\r
- $(@).slider('value', v)\r
+ $(code_picker_trace + 'code_green').slider {\r
+ orientation: 'horizontal',\r
+ range: 'min',\r
+ max: 255,\r
+ value: green,\r
+ change: ( event, ui ) ->\r
+ trace = element_tag_id($(@).parent())\r
+ 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
+ trace = element_tag_id($(@).parent())\r
+ color_slider_change(trace)\r
+ }\r
+ color_slider_change(code_picker_trace)\r
+ $('.colorpicker-wrap').map -> \r
+ $(@).css('display', 'block')\r
\r
update_t = (ultrace) -> \r
t = 0\r
font-family: monospace;
}
-#colorpicker-wrap {
+.colorpicker-wrap {
border: 1px solid #d0d0d0;
border-radius: 10px;
padding: 10px 5px;
background: #fafafa;
+ display: none;
}
-#colorpicker-red, #colorpicker-green, #colorpicker-blue {
+.colorpicker-red, .colorpicker-green, .colorpicker-blue {
float: left;
clear: left;
width: 256px;
margin: 3px 10px;
}
-#colorpicker-swatch {
+.code_swatch {
width: 50px;
height: 50px;
margin-top: 0;
margin-left: 10px;
background-image: none;
}
-#colorpicker-red .ui-slider-range {
+.colorpicker-red .ui-slider-range {
background: #ef2929;
}
-#colorpicker-red .ui-slider-handle {
+.colorpicker-red .ui-slider-handle {
border-color: #ef2929;
}
-#colorpicker-green .ui-slider-range {
+.colorpicker-green .ui-slider-range {
background: #8ae234;
}
-#colorpicker-green .ui-slider-handle {
+.colorpicker-green .ui-slider-handle {
border-color: #8ae234;
}
-#colorpicker-blue .ui-slider-range {
+.colorpicker-blue .ui-slider-range {
background: #729fcf;
}
-#colorpicker-blue .ui-slider-handle {
+.colorpicker-blue .ui-slider-handle {
border-color: #729fcf;
}
-#colorpicker-hex, #colorpicker-rgb {
+.colorpicker-hex, #colorpicker-rgb {
margin: 5px;
}
.tsort-box {
</div>
<div class="field">
<%= f.label :code %><br />
- <%= f.text_field :code, :id => ground_color.field_tag_id(:code), :panel_id => ground_color.tag_panel_id, :element_id => ground_color.tag_element_id, :element_type => ground_color.tag_element_type, :column => :code, :tree => ground_color.field_tree(:code) %>
- <div id="colorpicker-wrap">
- <div class="colorpicker" style="float: left;" panel_id="<%= ground_color.tag_panel_id -%>" element_id="<%= ground_color.tag_element_id -%>" element_type="<%= ground_color.tag_element_type -%>">
- <div id="colorpicker-red" class="colorpicker-red"></div>
- <div id="colorpicker-green" class="colorpicker-green"></div>
- <div id="colorpicker-blue" class="colorpicker-blue"></div>
+ <%= f.text_field :code, :id => ground_color.tag_id(:code), :panel_id => ground_color.tag_panel_id, :element_id => ground_color.tag_element_id, :element_type => ground_color.tag_element_type, :column => :code, :tree => ground_color.field_tree(:code) %>
+ <div class="colorpicker-wrap">
+ <div class="colorpicker" style="float: left;" id="<%= ground_color.tag_id(:code_picker) -%>" panel_id="<%= ground_color.tag_panel_id -%>" element_id="<%= ground_color.tag_element_id -%>" element_type="<%= ground_color.tag_element_type -%>">
+ <div id="<%= ground_color.tag_id(:code_red) -%>" class="colorpicker-red"></div>
+ <div id="<%= ground_color.tag_id(:code_green) -%>" class="colorpicker-green"></div>
+ <div id="<%= ground_color.tag_id(:code_blue) -%>" class="colorpicker-blue"></div>
</div>
<div style="float: left;">
- <div id="colorpicker-swatch" class="ui-widget-content ui-corner-all"></div>
+ <div id="<%= ground_color.tag_id(:code_swatch) -%>" class="ui-widget-content ui-corner-all code_swatch"></div>
</div>
<div style="float: left;">
- <div id="colorpicker-hex"></div>
- <div id="colorpicker-rgb"></div>
+ <div id="<%= ground_color.tag_id(:code_hex) -%>"></div>
+ <div id="<%= ground_color.tag_id(:code_rgb) -%>"></div>
</div>
<div style="clear: both;"></div>
</div>