OSDN Git Service

t#31708:hide helper
[pettanr/pettanr.git] / app / assets / javascripts / panels.js.coffee
index 1c483a6..b992c73 100644 (file)
@@ -1,4 +1,15 @@
 $ ->\r
+  confirm_confirm_confirm = () ->\r
+    confirm(  )\r
+\r
+  set_tree_value = (keys, last_attr, value) ->\r
+    key = keys.shift()\r
+    if keys.length <= 0\r
+      last_attr[key] = value\r
+    else\r
+      last_attr[key] = last_attr[key] || {}\r
+      set_tree_value(keys, last_attr[key], value)\r
+\r
   repeat_texts = ['repeat', 'repeat-x', 'repeat-y', 'no-repeat']\r
   \r
   is_editable = (p) ->\r
@@ -6,6 +17,15 @@ $ ->
       return true\r
     else\r
       return false\r
+  is_tree = (o) ->\r
+    if o.attr('tree') \r
+      if o.attr('column') == '_destroy' and o.val().length < 1\r
+        return false\r
+      else\r
+        return true\r
+      return true\r
+    else\r
+      return false\r
   \r
   panel_tag_id = (element) ->\r
     '#panel' + element.attr('panel_id')\r
@@ -16,17 +36,51 @@ $ ->
   refresh_attribute = () ->\r
     attr = {}\r
     $('input').map ->\r
-      if $(@).attr('tree') \r
+      if is_tree($(@)) \r
+        keys = $(@).attr('tree').split('-')\r
+        set_tree_value(keys, attr, $(this).val())\r
+    $('textarea').map  ->\r
+      if is_tree($(@)) \r
         keys = $(@).attr('tree').split('-')\r
         set_tree_value(keys, attr, $(this).val())\r
     $('select').map ->\r
-      if $(@).attr('tree'\r
+      if is_tree($(@)\r
         keys = $(@).attr('tree').split('-')\r
         set_tree_value(keys, attr, $(this).val())\r
     $('#pettanr-panel-json').val(JSON.stringify(attr['panels'][pettanr_current_panel_id.toString() ]))\r
   \r
   $('#tabs').tabs()\r
   $('#elements-tabs').tabs()\r
+  $('#elements-tabs').addClass( "ui-tabs-vertical ui-helper-clearfix" )\r
+  $("#elements-tabs li").removeClass("ui-corner-top")\r
+  $("#elements-tabs li").addClass("ui-corner-left")\r
+  \r
+  #destroy button\r
+  $('.ui-icon-destroy').map ->\r
+    $(@).button {\r
+      icons: {\r
+        primary: 'ui-icon-close', \r
+        secondary: null\r
+      }, \r
+      text: false\r
+    }\r
+    $(@).click -> \r
+      if confirm('destroy ?')\r
+        trace = element_tag_id($(@))\r
+        $(trace + '_destroy').val('true')\r
+        panel_trace = panel_tag_id($(@))\r
+        update_t(panel_trace + 'tsort')\r
+        update_z(panel_trace + 'zsort')\r
+        # sync\r
+        $(trace + 'element_tab').css('display', 'none')\r
+        $(trace + 'tab_panel').css('display', 'none')\r
+        $(trace + 'zsort').css('display', 'none')\r
+        $(trace + 'tsort').css('display', 'none')\r
+        switch $(@).attr('element_type')\r
+          when 'panel_picture'\r
+            trace = trace + 'div'\r
+        $(trace).css('display', 'none')\r
+        \r
   \r
   $('#pettanr-panel-submit').focusin ->\r
     refresh_attribute()\r
@@ -71,8 +125,8 @@ $ ->
         img = '#panel' + $(@).attr('panel_id') + 'panel_picture' + $(@).attr('element_id') + 'img'\r
         left = $(img).parent().position().left + $(@).position().left\r
         top = $(img ).parent().position().top + $(@).position().top\r
-        $(trace + 'x').val(left)\r
-        $(trace + 'y').val(top)\r
+        $(trace + 'x').val(parseInt(left))\r
+        $(trace + 'y').val(parseInt(top))\r
     }\r
   \r
   $('.panel-picture').map ->\r
@@ -134,8 +188,8 @@ $ ->
         trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'balloon' + $(@).attr('balloon_id')\r
         left = $(@).position().left\r
         top = $(@).position().top\r
-        $(trace + 'x').val(left)\r
-        $(trace + 'y').val(top)\r
+        $(trace + 'x').val(parseInt(left))\r
+        $(trace + 'y').val(parseInt(top))\r
     }\r
 \r
   \r
@@ -181,6 +235,15 @@ $ ->
             $(trace).height(v)\r
           else\r
     else\r
+  $('textarea').map  ->\r
+    if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'\r
+      $(@).focusout ->\r
+        switch $(@).attr('column')\r
+          when 'content'\r
+            trace = element_tag_id($(@))\r
+            speech_trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'speech' + $(@).attr('element_part_id')\r
+            v = $(@).val()\r
+            $(speech_trace).html(v)\r
   \r
   # ground-picture\r
   # sync view \r
@@ -211,85 +274,98 @@ $ ->
     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
+    $(ultrace + ' li').map ->\r
+      trace = element_tag_id($(@))\r
+      if $(trace + '_destroy').val().length < 1\r
+        $(trace + 't').val(t)\r
+        t++\r
+      else\r
   \r
   $('.tsort').map -> \r
     $(@).sortable {\r
       update: ( event, ui ) ->\r
         trace = panel_tag_id($(@))\r
-        ul = $(@).attr('id')\r
-        t = 0\r
-        $('#' + ul + ' li').map ->\r
-          pid = $(@).attr('panel_id')\r
-          eid = $(@).attr('element_id')\r
-          etp = $(@).attr('element_type')\r
-          tid = '#panel' + pid + etp + eid\r
-          # update input\r
-          trace = tid + 't'\r
-          $(trace).val(t)\r
-          t++\r
+        update_t(trace + 'tsort')\r
     }\r
-  $('#t-sortable tbody').disableSelection()\r
-  \r
-  $('#z-sortable tbody').sortable {\r
+  $('.t-sort li').map -> \r
+    $(@).disableSelection()\r
+  \r
+  update_z = (ultrace) -> \r
+    z = 1\r
+    $(ultrace + ' li').map ->\r
+      trace = element_tag_id($(@))\r
+      # update panel\r
+      if $(trace + '_destroy').val().length < 1\r
+        $(trace + 'z').val(z)\r
+        switch $(@).attr('element_type')\r
+          when 'panel_picture'\r
+            trace = trace + 'div'\r
+        $(trace).css('zIndex', z)\r
+        z++\r
+      else\r
+  \r
+  $('.zsort').map -> \r
+    $(@).sortable {\r
       update: ( event, ui ) ->\r
-        z = 1;\r
-        $('#z-sortable tr').map ->\r
-          pid = $(@).attr('panel_id')\r
-          eid = $(@).attr('element_id')\r
-          etp = $(@).attr('element_type')\r
-          tid = '#panel' + pid + etp + eid\r
-          # update input\r
-          trace = tid + 'z'\r
-          $(trace).val(z)\r
-          # update panel\r
-          switch etp\r
-            when 'panel_picture'\r
-              trace = tid + 'div'\r
-            when 'speech_balloon'\r
-              trace = tid\r
-            when 'ground_picture'\r
-              trace = tid\r
-            when 'ground_color'\r
-              trace = tid\r
-          $(trace).css('zIndex', z)\r
-          z++\r
-  }\r
-  $('#t-sortable tbody').disableSelection()\r
+        trace = panel_tag_id($(@))\r
+        update_z(trace + 'zsort')\r
+    }\r
+  $('.z-sort li').map -> \r
+    $(@).disableSelection()\r
   \r
   $('.panel_picture_width_tool').map ->\r
     $(@).html('<button class="wreverse">Rev</button><button class="wdouble">x2</button><button class="whalf">/2</button>')\r