t#31708:hide helper

diff --git a/app/assets/javascripts/panels.js.coffee b/app/assets/javascripts/panels.js.coffee
index 91a54ca..b992c73 100644 (file)
--- a/app/assets/javascripts/panels.js.coffee
+++ b/app/assets/javascripts/panels.js.coffee
@@ -274,41 +274,57 @@ $ ->
     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

diff --git a/app/assets/stylesheets/test.css.scss b/app/assets/stylesheets/test.css.scss
index 68cea16..c7cf6e3 100644 (file)
--- a/app/assets/stylesheets/test.css.scss
+++ b/app/assets/stylesheets/test.css.scss
@@ -73,44 +73,45 @@ div.md5 {
   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 {

diff --git a/app/views/ground_colors/_form.html.erb b/app/views/ground_colors/_form.html.erb
index b2494a7..1e9495c 100644 (file)
--- a/app/views/ground_colors/_form.html.erb
+++ b/app/views/ground_colors/_form.html.erb
@@ -7,19 +7,19 @@
   </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>