From: yasushiito <yas@pen-chan.jp>
Date: Tue, 16 Jul 2013 09:59:12 +0000 (+0900)
Subject: t#31708:hide helper
X-Git-Url: http://git.osdn.net/view?p=pettanr%2Fpettanr.git;a=commitdiff_plain;h=0efd57972385910d4295b3b3683872ab61e3a013

t#31708:hide helper
---

diff --git a/app/assets/javascripts/panels.js.coffee b/app/assets/javascripts/panels.js.coffee
index 91a54caf..b992c738 100644
--- 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'
       $(@).hide()
 
-  $('#colorpicker-red, #colorpicker-green, #colorpicker-blue').map -> 
-    trace = element_tag_id($(@).parent())
-    $(@).slider {
+  color_slider_change = (trace) -> 
+    red = $(trace + 'code_red').slider('value')
+    green = $(trace + 'code_green').slider('value')
+    blue = $(trace + 'code_blue').slider('value')
+    code = (red << 16) + (green << 8) + (blue)
+    phex = "000000" + code.toString(16)
+    hex = code.toString(16)
+    h = phex.substring(phex.length - 6)
+    $(trace + 'code_swatch').css('background-color', '#' + h)
+    $(trace + 'code_hex').html('HEX: #' + h)
+    $(trace + 'code_rgb').html('RGB: (' + red + ',' + green + ',' +blue + ')')
+    $(trace + 'code').val(code)
+    v = '#' + h
+    $(trace).css('background-color', v)
+  
+  $('.colorpicker').map -> 
+    code_picker_trace = element_tag_id($(@))
+    code = parseInt($(code_picker_trace + 'code').val())
+    red = (code >> 16) & 0xFF
+    green = (code >> 8) & 0xFF
+    blue = code & 0xFF
+    $(code_picker_trace + 'code_red').slider {
       orientation: 'horizontal',
       range: 'min',
       max: 255,
-      value: 127,
+      value: red,
       change: ( event, ui ) ->
-        red = $('#colorpicker-red').slider('value')
-        green = $('#colorpicker-green').slider('value')
-        blue = $('#colorpicker-blue').slider('value')
-        code = (red << 16) + (green << 8) + (blue)
-        phex = "000000" + code.toString(16)
-        hex = code.toString(16)
-        h = phex.substring(phex.length - 6)
-        $('#colorpicker-swatch').css('background-color', '#' + h)
-        $('#colorpicker-hex').html('HEX: #' + h)
-        $('#colorpicker-rgb').html('RGB: (' + red + ',' + green + ',' +blue + ')')
-        $(trace + 'code').val(code)
-        v = '#' + h
-        $(trace).css('background-color', v)
+        trace = element_tag_id($(@).parent())
+        color_slider_change(trace)
     }
-
-  $('.colorpicker').map -> 
-    trace = element_tag_id($(@))
-    code = parseInt($(trace + 'code').val())
-    $('.colorpicker-red').map -> 
-      v = (code >> 16) & 0xFF
-      $(@).slider('value', v)
-    $('.colorpicker-green').map -> 
-      v = (code >> 8) & 0xFF
-      $(@).slider('value', v)
-    $('.colorpicker-blue').map -> 
-      v = code & 0xFF
-      $(@).slider('value', v)
+    $(code_picker_trace + 'code_green').slider {
+      orientation: 'horizontal',
+      range: 'min',
+      max: 255,
+      value: green,
+      change: ( event, ui ) ->
+        trace = element_tag_id($(@).parent())
+        color_slider_change(trace)
+    }
+    $(code_picker_trace + 'code_blue').slider {
+      orientation: 'horizontal',
+      range: 'min',
+      max: 255,
+      value: blue,
+      change: ( event, ui ) ->
+        trace = element_tag_id($(@).parent())
+        color_slider_change(trace)
+    }
+    color_slider_change(code_picker_trace)
+  $('.colorpicker-wrap').map -> 
+    $(@).css('display', 'block')
   
   update_t = (ultrace) -> 
     t = 0
diff --git a/app/assets/stylesheets/test.css.scss b/app/assets/stylesheets/test.css.scss
index 68cea161..c7cf6e36 100644
--- 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 b2494a71..1e9495ca 100644
--- 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>