t#31896:refact elm

[pettanr/pettanr.git] / app / assets / javascripts / panels.js.coffee

diff --git a/app/assets/javascripts/panels.js.coffee b/app/assets/javascripts/panels.js.coffee
index 1057fc3..ec8547a 100644 (file)
--- a/app/assets/javascripts/panels.js.coffee
+++ b/app/assets/javascripts/panels.js.coffee
@@ -40,6 +40,11 @@ $ ->
       return true\r
     else\r
       return false\r
+  element_is = (element_type, o) ->\r
+    if is_element(o) and o.attr('element_type') == element_type\r
+      return true\r
+    else\r
+      return false\r
   element_types  = {'panel_picture': 'panel_pictures', 'speech_balloon': 'speech_balloons', 'ground_picture': 'ground_pictures', 'ground_color': 'ground_colors'}\r
   element_type_to_table = (element_type) ->\r
     element_types[element_type]\r
@@ -160,15 +165,15 @@ $ ->
       }\r
   # sync view \r
   $('#panel' + pettanr_current_panel_id.toString() +  'width').focusout ->\r
-    trace = '#panel' + $(@).attr('panel_id')\r
+    trace = panel_tag_id($(@))\r
     $(trace).width(parseInt( $(@).val()))\r
   \r
   $('#panel' + pettanr_current_panel_id.toString() + 'height').focusout ->\r
-    trace = '#panel' + $(@).attr('panel_id')\r
+    trace = panel_tag_id($(@))\r
     $(trace).height(parseInt( $(@).val()))\r
   \r
   $('#panel' + pettanr_current_panel_id.toString() + 'border').focusout ->\r
-    trace = '#panel' + $(@).attr('panel_id')\r
+    trace = panel_tag_id($(@))\r
     $(trace).css('border-width', parseInt($(@).val()).toString() + 'px')\r
   \r
   \r
@@ -176,10 +181,10 @@ $ ->
   $('.pettanr-panel-picture-wrapper').map ->\r
     $(@).draggable {\r
       stop: ( event, ui ) ->\r
-        trace = '#panel' + $(@).attr('panel_id') + 'panel_picture' + $(@).attr('element_id')\r
-        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 = element_tag_id($(@))\r
+        img = $(trace + 'img')\r
+        left = img.parent().position().left + $(@).position().left\r
+        top = img.parent().position().top + $(@).position().top\r
         $(trace + 'x').val(parseInt(left))\r
         $(trace + 'y').val(parseInt(top))\r
     }\r
@@ -187,7 +192,7 @@ $ ->
   $('.panel-picture').map ->\r
     $(@).resizable {\r
       stop: ( event, ui ) ->\r
-        trace = '#panel' + $(@).parent().attr('panel_id') + 'panel_picture' + $(@).parent().attr('element_id')\r
+        trace = element_tag_id($(@).parent())\r
         $(trace + 'width').val($(@).width())\r
         $(trace + 'height').val($(@).height())\r
       handles: 'all',\r
@@ -210,7 +215,7 @@ $ ->
   \r
   # sync view \r
   $('input').map  ->\r
-    if $(@).attr('element_type') and $(@).attr('element_type') == 'panel_picture'\r
+    if element_is('panel_picture', $(@))\r
       $(@).focusout ->\r
         switch $(@).attr('column')\r
           when 'x'\r
@@ -241,24 +246,26 @@ $ ->
   $('.pettanr-comic-balloon' ).map ->\r
     $(@).draggable {\r
       stop: ( event, ui ) ->\r
-        trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'balloon' + $(@).attr('balloon_id')\r
+        img = $('.pettanr-balloon', $(@))\r
+        trace = element_part_tag_id(img)\r
         left = $(@).position().left\r
         top = $(@).position().top\r
         $(trace + 'x').val(parseInt(left))\r
         $(trace + 'y').val(parseInt(top))\r
     }\r
-\r
   \r
   $('.pettanr-balloon' ).map ->\r
     $(@).resizable {\r
       stop: ( event, ui ) ->\r
-        trace = '#panel' + $(@).parent().attr('panel_id') + 'speech_balloon' + $(@).parent().attr('element_id') + 'balloon' + $(@).parent().attr('balloon_id')\r
+        img = $('.pettanr-balloon', $(@))\r
+        trace = element_part_tag_id(img)\r
         $(trace + 'width').val($(@).width())\r
         $(trace + 'height').val($(@).height())\r
      resize: ( event, ui ) ->\r
-        trace = '#panel' + $(@).parent().attr('panel_id') + 'speech_balloon' + $(@).parent().attr('element_id')\r
-        $(trace).width($(@).width())\r
-        $(trace).height($(@).height())\r
+        img = $('.pettanr-balloon', $(@))\r
+        sb = element_tag_id(img)\r
+        $(sb).width($(@).width())\r
+        $(sb).height($(@).height())\r
       handles: 'all',\r
       autoHide: true\r
     }\r
@@ -266,22 +273,22 @@ $ ->
     $(@).mouseover -> \r
       outer = $(@).parent()\r
       sb = outer.parent()\r
-      trace = '#panel' + sb.attr('panel_id') + 'speech_balloon' + sb.attr('element_id') + 'balloon' + sb.attr('balloon_id')\r
-      img = $(trace)\r
+      trace = element_tag_id(sb)\r
+      img = $('.pettanr-balloon', $(trace))\r
       $('.ui-resizable-handle', img.parent()).map ->\r
         $(@).css('display', 'block')\r
     $(@).mouseout -> \r
       outer = $(@).parent()\r
       sb = outer.parent()\r
-      trace = '#panel' + sb.attr('panel_id') + 'speech_balloon' + sb.attr('element_id') + 'balloon' + sb.attr('balloon_id')\r
-      img = $(trace)\r
+      trace = element_tag_id(sb)\r
+      img = $('.pettanr-balloon', $(trace))\r
       $('.ui-resizable-handle', img.parent()).map ->\r
         $(@).css('display', 'none')\r
         \r
   \r
   # sync view \r
   $('input').map  ->\r
-    if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'\r
+    if element_is('speech_balloon', $(@))\r
       $(@).focusout ->\r
         switch $(@).attr('column')\r
           when 'x'\r
@@ -296,41 +303,41 @@ $ ->
             trace = element_tag_id($(@))\r
             v = parseInt($(@).val())\r
             $(trace).width(Math.abs(v))\r
-            trace = '#panel' + $(trace).attr('panel_id') + 'speech_balloon' + $(trace).attr('element_id') + 'balloon' + $(trace).attr('balloon_id')\r
-            $(trace).parent().width(v)\r
-            $(trace).width(v)\r
+            img = $('.pettanr-balloon', $(trace))\r
+            img.parent().width(v)\r
+            img.width(v)\r
           when 'height'\r
             trace = element_tag_id($(@))\r
             v = parseInt($(@).val())\r
             $(trace).height(Math.abs(v))\r
-            trace = '#panel' + $(trace).attr('panel_id') + 'speech_balloon' + $(trace).attr('element_id') + 'balloon' + $(trace).attr('balloon_id')\r
-            $(trace).parent().height(v)\r
-            $(trace).height(v)\r
+            img = $('.pettanr-balloon', $(trace))\r
+            img.parent().height(v)\r
+            img.height(v)\r
           else\r
     else\r
   $('textarea').map  ->\r
-    if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'\r
+    if element_is('speech_balloon', $(@))\r
       $(@).focusout ->\r
         switch $(@).attr('column')\r
           when 'content'\r
-            trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'speech' + $(@).attr('element_part_id')\r
+            trace = element_part_tag_id($(@))\r
             wf_sel = $(trace + 'writing_format_id')\r
             wf_id = parseInt(wf_sel.val())\r
             v = writing_format_functions[writing_formats[wf_id]]($(@).val())\r
-            $(trace).html(v)\r
+            $(trace).html('<p>' + v + '</p>')\r
   $('textarea').map  ->\r
-    if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'\r
+    if element_is('speech_balloon', $(@))\r
       switch $(@).attr('column')\r
         when 'content'\r
           $(@).bind('textchange', (event, previousText) ->\r
-            trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'speech' + $(@).attr('element_part_id')\r
+            trace = element_part_tag_id($(@))\r
             wf_sel = $(trace + 'writing_format_id')\r
             wf_id = parseInt(wf_sel.val())\r
             v = writing_format_functions[writing_formats[wf_id]]($(@).val())\r
             $(trace).html('<p>' + v + '</p>')\r
           )\r
   $('select').map  ->\r
-    if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'\r
+    if element_is('speech_balloon', $(@))\r
       $(@).change ->\r
         switch $(@).attr('column')\r
           when 'font_size'\r
@@ -342,24 +349,24 @@ $ ->
             $(trace).css('text-align', text_align_texts[v])\r
     else\r
   $('input').map  ->\r
-    if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon' and $(@).attr('column') == 'fore_color'\r
-      $(@).hide()\r
+    if element_is('speech_balloon', $(@))\r
+      if $(@).attr('column') == 'fore_color'\r
+        $(@).hide()\r
 \r
   \r
   # ground-picture\r
   # sync view \r
   $('input').map  ->\r
-    if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_picture'\r
+    if element_is('ground_picture', $(@))\r
       $(@).focusout ->\r
         switch $(@).attr('column')\r
           when 'x', 'y'\r
             trace = element_tag_id($(@))\r
-            x = parseInt($(@).val()).toString() + 'px'\r
-            ytrace = '#panel' + $(@).attr('panel_id') + 'ground_picture' + $(@).attr('element_id') + 'y'\r
-            y = parseInt($(ytrace).val()).toString() + 'px'\r
-            $(trace).css('background-position', y + ' ' + x)\r
+            x = parseInt($(trace + 'x').val()).toString() + 'px'\r
+            y = parseInt($(trace + 'y').val()).toString() + 'px'\r
+            $(trace).css('background-position', x + ' ' + y)\r
   $('select').map  ->\r
-    if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_picture'\r
+    if element_is('ground_picture', $(@))\r
       $(@).change ->\r
         switch $(@).attr('column')\r
           when 'repeat'\r
@@ -372,8 +379,9 @@ $ ->
   # ground_color\r
   # sync view \r
   $('input').map  ->\r
-    if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_color' and $(@).attr('column') == 'code'\r
-      $(@).hide()\r
+    if element_is('ground_color', $(@))\r
+      if $(@).attr('column') == 'code'\r
+        $(@).hide()\r
 \r
   color_slider_change = (trace) -> \r
     red = $(trace + 'code_red').slider('value')\r
@@ -387,12 +395,12 @@ $ ->
     $(trace + 'code_hex').html('HEX: #' + h)\r
     $(trace + 'code_rgb').html('RGB: (' + red + ',' + green + ',' +blue + ')')\r
     v = '#' + h\r
-    if is_element_part($(trace))\r
-      $(trace + 'fore_color').val(code)\r
-      $(trace).css('color', v)\r
-    else\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
   $('.colorpicker').map -> \r
     if is_element_part($(@))\r
@@ -574,7 +582,7 @@ $ ->
   \r
   # disable form z t\r
   $('input').map  ->\r
-    if $(@).attr('element_type') and $(@).attr('column')\r
+    if is_element($(@))\r
       switch $(@).attr('column')\r
         when 'z' , 't'\r
           $(@).hide()\r