t#31957:helperize

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 02486b1..26e94c0 100644 (file)
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -10,5 +10,7 @@
 //= require textchange
 //= require pettanr_editor
 //= require writing_formats
+//= require_directory ./helpers
+//= require speech_balloon_templates
 //= require panels
 //  require_tree .

diff --git a/app/assets/javascripts/helpers/balloon_r.js.coffee b/app/assets/javascripts/helpers/balloon_r.js.coffee
new file mode 100644 (file)
index 0000000..9d26dae
--- /dev/null
+++ b/app/assets/javascripts/helpers/balloon_r.js.coffee
@@ -0,0 +1,116 @@
+class PettanrBalloonRHelper\r
+  confirm_confirm_confirm = () ->\r
+    confirm(  )\r
+  @WritingFormat = window.PettanrWritingFormat\r
+  \r
+  @speech_balloon_tag_id = (element_part) ->\r
+    window.PettanrEditor.element_tag_id(element_part)\r
+  \r
+  @speech_balloon_template_id = (element_part) ->\r
+    trace = PettanrBalloonRHelper.speech_balloon_tag_id(element_part)\r
+    parseInt($(trace + 'speech_balloon_template_id').val())\r
+  \r
+  @template_class = (element_part) ->\r
+    id = PettanrBalloonRHelper.speech_balloon_template_id(element_part)\r
+    engine_name = window.PettanrSpeechBalloonTemplate.speech_balloon_templates[id]\r
+    window.PettanrSpeechBalloonTemplate.scripts[engine_name]\r
+  \r
+  @settings = (element_part) ->\r
+    id = PettanrBalloonRHelper.speech_balloon_template_id(element_part)\r
+    window.PettanrSpeechBalloonTemplate.settings(id)\r
+  \r
+  @r_step = (element_part) ->\r
+    settings = PettanrBalloonRHelper.settings(element_part)\r
+    settings['speech_balloon']['r_step']\r
+  \r
+  @system_picture_id = (element_part, idx) ->\r
+    settings = PettanrBalloonRHelper.settings(element_part)\r
+    settings[idx]['balloon']['system_picture_id']\r
+  \r
+  # balloon r helper\r
+  \r
+  @balloon_next_index = (input_r, r_step, d)  ->\r
+    v = parseInt(input_r.val()) + r_step * d\r
+    tr = v % 360\r
+    tr = 360 + tr if tr < 0\r
+    offset = r_step / 2.0\r
+    idx = Math.floor(((tr + offset) % 360) / r_step)\r
+    if idx == 0\r
+      ir = 0\r
+    else\r
+      if v < 0\r
+        ir = Math.floor(idx * r_step) - 360\r
+      else\r
+        ir = Math.floor(idx * r_step)\r
+    input_r.val(ir)\r
+    idx\r
+  @balloon_index = (input_r, r_step)  ->\r
+    v = parseInt(input_r.val())\r
+    tr = v % 360\r
+    tr = 360 + tr if tr < 0\r
+    offset = r_step / 2.0\r
+    idx = Math.floor(((tr + offset) % 360) / r_step)\r
+    idx\r
+  @refresh_balloon = (balloon_trace, idx)  ->\r
+    bln = $(balloon_trace)\r
+    sp_id = PettanrBalloonRHelper.system_picture_id(bln, idx)\r
+    fn = '/system_pictures/' + String(sp_id) + '.png'\r
+    ofn = bln.attr('src')\r
+    if fn == ofn\r
+    else\r
+      if bln.attr('src')\r
+        bln.attr('src', fn) \r
+        $(balloon_trace + 'system_picture_id').val(sp_id)\r
+  \r
+  @add_helper = (wrapper) ->\r
+    editor = window.PettanrEditor\r
+    \r
+    wrapper.map -> \r
+      $(@).css('display', 'block')\r
+    \r
+    trace = editor.element_part_tag_id(wrapper)\r
+    $(trace + 'r').spinner {\r
+      spin: ( event, ui ) ->\r
+        balloon_trace = editor.element_part_tag_id($(@))\r
+        r_step = PettanrBalloonRHelper.r_step($(@))\r
+        input_r = $(balloon_trace + 'r')\r
+        idx = PettanrBalloonRHelper.balloon_index(input_r, r_step)\r
+        PettanrBalloonRHelper.refresh_balloon(balloon_trace, idx)\r
+    }\r
+    \r
+    $('.r-down', wrapper).map -> \r
+      $(@).click -> \r
+        wrapper = $(@).parent()\r
+        balloon_trace = editor.element_part_tag_id($(wrapper))\r
+        r_step = PettanrBalloonRHelper.r_step(wrapper)\r
+        input_r = $(balloon_trace + 'r')\r
+        idx = PettanrBalloonRHelper.balloon_next_index(input_r, r_step, -1)\r
+        PettanrBalloonRHelper.refresh_balloon(balloon_trace, idx)\r
+        false\r
+    $('.r-up', wrapper).map -> \r
+      $(@).click -> \r
+        wrapper = $(@).parent()\r
+        balloon_trace = editor.element_part_tag_id($(wrapper))\r
+        r_step = PettanrBalloonRHelper.r_step(wrapper)\r
+        input_r = $(balloon_trace + 'r')\r
+        idx = PettanrBalloonRHelper.balloon_next_index(input_r, r_step, 1)\r
+        PettanrBalloonRHelper.refresh_balloon(balloon_trace, idx)\r
+        false\r
+    $('.r-reset', wrapper).map -> \r
+      $(@).click -> \r
+        wrapper = $(@).parent()\r
+        balloon_trace = editor.element_part_tag_id($(wrapper))\r
+        input_r = $(balloon_trace + 'r')\r
+        input_r.val(0)\r
+        PettanrBalloonRHelper.refresh_balloon(balloon_trace, 0)\r
+        false\r
+    \r
+    # sync view \r
+    $(trace + 'r').focusout ->\r
+      balloon_trace = editor.element_part_tag_id($(@))\r
+      r_step = PettanrBalloonRHelper.r_step($(@))\r
+      input_r = $(balloon_trace + 'r')\r
+      idx = PettanrBalloonRHelper.balloon_index(input_r, r_step)\r
+      PettanrBalloonRHelper.refresh_balloon(balloon_trace, idx)\r
+  \r
+@PettanrBalloonRHelper = PettanrBalloonRHelper\r

diff --git a/app/assets/javascripts/helpers/color.js.coffee b/app/assets/javascripts/helpers/color.js.coffee
new file mode 100644 (file)
index 0000000..ec038db
--- /dev/null
+++ b/app/assets/javascripts/helpers/color.js.coffee
@@ -0,0 +1,78 @@
+class PettanrColorHelper\r
+  confirm_confirm_confirm = () ->\r
+    confirm(  )\r
+  @WritingFormat = window.PettanrWritingFormat\r
+  \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
+    v = '#' + h\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
+  @add_helper = (wrapper, column) ->\r
+    editor = window.PettanrEditor\r
+    wrapper.map -> \r
+      $(@).css('display', 'block')\r
+    \r
+    $('.colorpicker', wrapper).map -> \r
+      if editor.is_element_part($(@))\r
+        code_picker_trace = editor.element_part_tag_id($(@))\r
+      else\r
+        code_picker_trace = editor.element_tag_id($(@))\r
+      code = parseInt($(code_picker_trace + column).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: red,\r
+        change: ( event, ui ) ->\r
+          if editor.is_element_part($(@).parent())\r
+            trace = editor.element_part_tag_id($(@).parent())\r
+          else\r
+            trace = editor.element_tag_id($(@).parent())\r
+          PettanrColorHelper.color_slider_change(trace)\r
+      }\r
+      $(code_picker_trace + 'code_green').slider {\r
+        orientation: 'horizontal',\r
+        range: 'min',\r
+        max: 255,\r
+        value: green,\r
+        change: ( event, ui ) ->\r
+          if editor.is_element_part($(@).parent())\r
+            trace = editor.element_part_tag_id($(@).parent())\r
+          else\r
+            trace = editor.element_tag_id($(@).parent())\r
+          PettanrColorHelper.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
+          if editor.is_element_part($(@).parent())\r
+            trace = editor.element_part_tag_id($(@).parent())\r
+          else\r
+            trace = editor.element_tag_id($(@).parent())\r
+          PettanrColorHelper.color_slider_change(trace)\r
+      }\r
+      PettanrColorHelper.color_slider_change(code_picker_trace)\r
+  \r
+  \r
+@PettanrColorHelper = PettanrColorHelper\r

diff --git a/app/assets/javascripts/helpers/picture_size.js.coffee b/app/assets/javascripts/helpers/picture_size.js.coffee
new file mode 100644 (file)
index 0000000..ba7b764
--- /dev/null
+++ b/app/assets/javascripts/helpers/picture_size.js.coffee
@@ -0,0 +1,86 @@
+class PettanrPictureSizeHelper\r
+  confirm_confirm_confirm = () ->\r
+    confirm(  )\r
+  @WritingFormat = window.PettanrWritingFormat\r
+  \r
+  @refresh_picture = (e, w, h)  ->\r
+    if w and h\r
+      sd = ''\r
+      if h < 0\r
+        sd += 'v'\r
+      if w < 0\r
+        sd += 'h'\r
+      if sd.length > 0\r
+        sd += '/'\r
+      pid = parseInt(e.attr('picture_id')).toString()\r
+      ext = e.attr('ext')\r
+      src = '/pictures/' + sd + pid + '.' + ext\r
+      e.attr('src', src)\r
+  \r
+  @add_helper = () ->\r
+    editor = window.PettanrEditor\r
+    $('.panel_picture_width_tool').map ->\r
+      $(@).html('<button class="wreverse">Rev</button><button class="wdouble">x2</button><button class="whalf">/2</button>')\r
+    $('.panel_picture_height_tool').map ->\r
+      $(@).html('<button class="hreverse">Rev</button><button class="hdouble">x2</button><button class="hhalf">/2</button>')\r
+    \r
+    $('.wreverse').click -> \r
+      d = $(@).parent()\r
+      trace = editor.element_tag_id(d)\r
+      f = $(trace + 'width')\r
+      w = -f.val()\r
+      f.val(w)\r
+      f = $(trace + 'height')\r
+      h = f.val()\r
+      PettanrPictureSizeHelper.refresh_picture($(trace + 'img'), w, h)\r
+    \r
+    $('.wdouble').click -> \r
+      d = $(@).parent()\r
+      trace = editor.element_tag_id(d)\r
+      f = $(trace + 'width')\r
+      w = f.val() * 2\r
+      f.val(w)\r
+      $(trace + 'img').width(Math.abs(w))\r
+      $(trace + 'img').parent().width(Math.abs(w))\r
+    \r
+    $('.whalf').click -> \r
+      d = $(@).parent()\r
+      trace = editor.element_tag_id(d)\r
+      f = $(trace + 'width')\r
+      w = Math.floor(f.val() / 2)\r
+      f.val(w)\r
+      $(trace + 'img').width(Math.abs(w))\r
+      $(trace + 'img').parent().width(Math.abs(w))\r
+    \r
+    \r
+    $('.hreverse').click -> \r
+      d = $(@).parent()\r
+      trace = editor.element_tag_id(d)\r
+      f = $(trace + 'height')\r
+      h = -f.val()\r
+      f.val(h)\r
+      f = $(trace + 'width')\r
+      w = f.val()\r
+      PettanrPictureSizeHelper.refresh_picture($(trace + 'img'), w, h)\r
+    \r
+    $('.hdouble').click -> \r
+      d = $(@).parent()\r
+      trace = editor.element_tag_id(d)\r
+      f = $(trace + 'height')\r
+      h = f.val() * 2\r
+      f.val(h)\r
+      $(trace + 'img').height(Math.abs(h))\r
+      $(trace + 'img').parent().height(Math.abs(h))\r
+    \r
+    $('.hhalf').click -> \r
+      d = $(@).parent()\r
+      trace = editor.element_tag_id(d)\r
+      f = $(trace + 'height')\r
+      h = Math.floor(f.val() / 2)\r
+      f.val(h)\r
+      $(trace + 'img').height(Math.abs(h))\r
+      $(trace + 'img').parent().height(Math.abs(h))\r
+  \r
+  \r
+  \r
+@PettanrPictureSizeHelper = PettanrPictureSizeHelper\r

diff --git a/app/assets/javascripts/panels.js.coffee b/app/assets/javascripts/panels.js.coffee
index 43ae19d..b32283f 100644 (file)
--- a/app/assets/javascripts/panels.js.coffee
+++ b/app/assets/javascripts/panels.js.coffee
@@ -4,574 +4,443 @@ $ ->
   editor = window.PettanrEditor\r
   WritingFormat = window.PettanrWritingFormat\r
   WritingFormat.load($('#writing_formats'))\r
+  SpeechBalloonTemplate = window.PettanrSpeechBalloonTemplate\r
+  SpeechBalloonTemplate.load($('#speech_balloon_templates'))\r
+  for n, v of SpeechBalloonTemplate.scripts\r
+    v.onLoad()\r
+    v.add_helper( n, '' )\r
+  PictureSizeHelper = window.PettanrPictureSizeHelper\r
+  ColorHelper = window.PettanrColorHelper\r
   \r
   $('.panel-editor').map ->\r
     if $(@).attr('current') and parseInt($(@).attr('current')) > 0\r
       editor.pettanr_current_panel_id = parseInt($(@).attr('panel_id'))\r
-  $('#tabs').tabs()\r
-  $('#elements-tabs').tabs()\r
-  $('#new-element-tabs').tabs()\r
-  $('#new-speech_balloon-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
-  $("#elements-tabs li").map ->\r
-    $(@).mouseover -> \r
-      switch $(@).attr('element_type')\r
-        when 'speech_balloon'\r
-          trace = editor.element_tag_id($(@)) \r
-          t = $('img', $(trace))\r
-        when 'panel_picture'\r
-          trace = editor.element_tag_id($(@)) + 'img'\r
-          t = $(trace)\r
-        else\r
-          t = null\r
-      if t\r
-        $('.ui-resizable-handle', t.parent()).map ->\r
-          $(@).css('display', 'block')\r
-    $(@).mouseout -> \r
-      switch $(@).attr('element_type')\r
-        when 'speech_balloon'\r
-          trace = editor.element_tag_id($(@)) \r
-          t = $('img', $(trace))\r
-        when 'panel_picture'\r
-          trace = editor.element_tag_id($(@)) + 'img'\r
-          t = $(trace)\r
-        else\r
-          t = null\r
-      if t\r
-        $('.ui-resizable-handle', t.parent()).map ->\r
-          $(@).css('display', 'none')\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 = editor.element_tag_id($(@))\r
-        $(trace + '_destroy').val('true')\r
-        panel_trace = editor.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
+  if editor.is_editting()\r
+    $('#tabs').tabs()\r
+    $('#elements-tabs').tabs()\r
+    $('#new-element-tabs').tabs()\r
+    $('#new-speech_balloon-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
+    $("#elements-tabs li").map ->\r
+      $(@).mouseover -> \r
         switch $(@).attr('element_type')\r
+          when 'speech_balloon'\r
+            trace = editor.element_tag_id($(@)) \r
+            t = $('img', $(trace))\r
           when 'panel_picture'\r
-            trace = trace + 'div'\r
-        $(trace).css('display', 'none')\r
-        \r
-  \r
-  $('#pettanr-panel-submit').focusin ->\r
-    editor.refresh_attribute($('#pettanr-panel-json'))\r
-  \r
-  # panel\r
-  $('.pettanr-comic-panel').map ->\r
-    if editor.is_editable($(@))\r
+            trace = editor.element_tag_id($(@)) + 'img'\r
+            t = $(trace)\r
+          else\r
+            t = null\r
+        if t\r
+          $('.ui-resizable-handle', t.parent()).map ->\r
+            $(@).css('display', 'block')\r
+      $(@).mouseout -> \r
+        switch $(@).attr('element_type')\r
+          when 'speech_balloon'\r
+            trace = editor.element_tag_id($(@)) \r
+            t = $('img', $(trace))\r
+          when 'panel_picture'\r
+            trace = editor.element_tag_id($(@)) + 'img'\r
+            t = $(trace)\r
+          else\r
+            t = null\r
+        if t\r
+          $('.ui-resizable-handle', t.parent()).map ->\r
+            $(@).css('display', 'none')\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 = editor.element_tag_id($(@))\r
+          $(trace + '_destroy').val('true')\r
+          panel_trace = editor.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
+      editor.refresh_attribute($('#pettanr-panel-json'))\r
+    \r
+    # panel\r
+    $('.pettanr-comic-panel').map ->\r
+      if editor.is_editable($(@))\r
+        $(@).resizable {\r
+          stop: ( event, ui ) ->\r
+            trace = editor.panel_tag_id($(@))\r
+            w = parseInt($(@).width())\r
+            h = parseInt($(@).height())\r
+            $(trace + 'width').val(w)\r
+            $(trace + 'height').val(h)\r
+            $('.pettanr-comic-ground-picture').map ->\r
+              $(@).width(w)\r
+              $(@).height(h)\r
+            $('.pettanr-comic-ground-color').map ->\r
+              $(@).width(w)\r
+              $(@).height(h)\r
+          , autoHide: true\r
+        }\r
+    \r
+    # sync view \r
+    $('input').map  ->\r
+      if $(@).attr('element_type')\r
+      else\r
+        if $(@).attr('panel_id')\r
+          $(@).focusout ->\r
+            switch $(@).attr('column')\r
+              when 'width'\r
+                trace = editor.panel_tag_id($(@))\r
+                $(trace).width(parseInt( $(@).val()))\r
+              when 'height'\r
+                trace = editor.panel_tag_id($(@))\r
+                $(trace).height(parseInt( $(@).val()))\r
+              when 'border'\r
+                trace = editor.panel_tag_id($(@))\r
+                $(trace).css('border-width', parseInt($(@).val()).toString() + 'px')\r
+    \r
+    # panel picture\r
+    PictureSizeHelper.add_helper()\r
+    \r
+    $('.pettanr-panel-picture-wrapper').map ->\r
+      $(@).draggable {\r
+        stop: ( event, ui ) ->\r
+          trace = editor.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
+    \r
+    $('.panel-picture').map ->\r
       $(@).resizable {\r
         stop: ( event, ui ) ->\r
-          trace = editor.panel_tag_id($(@))\r
-          w = parseInt($(@).width())\r
-          h = parseInt($(@).height())\r
+          resize_div = $(@)\r
+          panel_picture_div = resize_div.parent()\r
+          trace = editor.element_tag_id(panel_picture_div)\r
+          \r
+          resize_div.css('top', '0px')\r
+          resize_div.css('left', '0px')\r
+          if ui.originalPosition.top != ui.position.top\r
+            t = panel_picture_div.position().top + ui.position.top\r
+            $(trace + 'y').val(Math.floor(t))\r
+            panel_picture_div.css('top', t.toString() + 'px')\r
+          if ui.originalPosition.left != ui.position.left\r
+            l = panel_picture_div.position().left + ui.position.left\r
+            $(trace + 'x').val(Math.floor(l))\r
+            panel_picture_div.css('left', l.toString() + 'px')\r
+          w = if $(trace + 'width').val() < 0\r
+            -ui.size.width\r
+          else\r
+            ui.size.width\r
+          h = if $(trace + 'height').val() < 0\r
+            -ui.size.height\r
+          else\r
+            ui.size.height\r
           $(trace + 'width').val(w)\r
           $(trace + 'height').val(h)\r
-          $('.pettanr-comic-ground-picture').map ->\r
-            $(@).width(w)\r
-            $(@).height(h)\r
-          $('.pettanr-comic-ground-color').map ->\r
-            $(@).width(w)\r
-            $(@).height(h)\r
-        , autoHide: true\r
+        resize: ( event, ui ) ->\r
+          resize_div = $(@)\r
+          panel_picture_div = resize_div.parent()\r
+          trace = editor.element_tag_id(panel_picture_div)\r
+        handles: 'all',\r
+        autoHide: true\r
       }\r
-  \r
-  # sync view \r
-  $('input').map  ->\r
-    if $(@).attr('element_type')\r
-    else\r
-      if $(@).attr('panel_id')\r
+    \r
+    # sync view \r
+    $('input').map  ->\r
+      if editor.element_is('panel_picture', $(@))\r
         $(@).focusout ->\r
           switch $(@).attr('column')\r
+            when 'x'\r
+              trace = editor.element_tag_id($(@)) + 'div'\r
+              v = parseInt($(@).val()).toString() + 'px'\r
+              $(trace).css('left', v)\r
+            when 'y'\r
+              trace = editor.element_tag_id($(@)) + 'div'\r
+              v = parseInt($(@).val()).toString() + 'px'\r
+              $(trace).css('top', v)\r
             when 'width'\r
-              trace = editor.panel_tag_id($(@))\r
-              $(trace).width(parseInt( $(@).val()))\r
+              trace = editor.element_tag_id($(@)) + 'img'\r
+              w = parseInt($(@).val())\r
+              $(trace).width(Math.abs(w))\r
+              $(trace).parent().width(Math.abs(w))\r
+              h = parseInt($(editor.element_tag_id($(@)) + 'height').val())\r
             when 'height'\r
-              trace = editor.panel_tag_id($(@))\r
-              $(trace).height(parseInt( $(@).val()))\r
-            when 'border'\r
-              trace = editor.panel_tag_id($(@))\r
-              $(trace).css('border-width', parseInt($(@).val()).toString() + 'px')\r
-  \r
-  # panel picture\r
-  $('.pettanr-panel-picture-wrapper').map ->\r
-    $(@).draggable {\r
-      stop: ( event, ui ) ->\r
-        trace = editor.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
-  \r
-  $('.panel-picture').map ->\r
-    $(@).resizable {\r
-      stop: ( event, ui ) ->\r
-        resize_div = $(@)\r
-        panel_picture_div = resize_div.parent()\r
-        trace = editor.element_tag_id(panel_picture_div)\r
-        \r
-        resize_div.css('top', '0px')\r
-        resize_div.css('left', '0px')\r
-        if ui.originalPosition.top != ui.position.top\r
-          t = panel_picture_div.position().top + ui.position.top\r
-          $(trace + 'y').val(Math.floor(t))\r
-          panel_picture_div.css('top', t.toString() + 'px')\r
-        if ui.originalPosition.left != ui.position.left\r
-          l = panel_picture_div.position().left + ui.position.left\r
-          $(trace + 'x').val(Math.floor(l))\r
-          panel_picture_div.css('left', l.toString() + 'px')\r
-        w = if $(trace + 'width').val() < 0\r
-          -ui.size.width\r
-        else\r
-          ui.size.width\r
-        h = if $(trace + 'height').val() < 0\r
-          -ui.size.height\r
-        else\r
-          ui.size.height\r
-        $(trace + 'width').val(w)\r
-        $(trace + 'height').val(h)\r
-      resize: ( event, ui ) ->\r
-        resize_div = $(@)\r
-        panel_picture_div = resize_div.parent()\r
-        trace = editor.element_tag_id(panel_picture_div)\r
-      handles: 'all',\r
-      autoHide: true\r
-    }\r
-  \r
-  refresh_picture = (e, w, h)  ->\r
-    if w and h\r
-      sd = ''\r
-      if h < 0\r
-        sd += 'v'\r
-      if w < 0\r
-        sd += 'h'\r
-      if sd.length > 0\r
-        sd += '/'\r
-      pid = parseInt(e.attr('picture_id')).toString()\r
-      ext = e.attr('ext')\r
-      src = '/pictures/' + sd + pid + '.' + ext\r
-      e.attr('src', src)\r
-  \r
-  # sync view \r
-  $('input').map  ->\r
-    if editor.element_is('panel_picture', $(@))\r
-      $(@).focusout ->\r
-        switch $(@).attr('column')\r
-          when 'x'\r
-            trace = editor.element_tag_id($(@)) + 'div'\r
-            v = parseInt($(@).val()).toString() + 'px'\r
-            $(trace).css('left', v)\r
-          when 'y'\r
-            trace = editor.element_tag_id($(@)) + 'div'\r
-            v = parseInt($(@).val()).toString() + 'px'\r
-            $(trace).css('top', v)\r
-          when 'width'\r
-            trace = editor.element_tag_id($(@)) + 'img'\r
-            w = parseInt($(@).val())\r
-            $(trace).width(Math.abs(w))\r
-            $(trace).parent().width(Math.abs(w))\r
-            h = parseInt($(editor.element_tag_id($(@)) + 'height').val())\r
-          when 'height'\r
-            trace = editor.element_tag_id($(@)) + 'img'\r
-            h = parseInt($(@).val())\r
-            $(trace).height(Math.abs(h))\r
-            $(trace).parent().height(Math.abs(h))\r
-            w = parseInt($(editor.element_tag_id($(@)) + 'width').val())\r
-          else\r
-        refresh_picture($(trace), w, h)\r
-    else\r
-  \r
-  # speech_balloons\r
-  $('.pettanr-comic-balloon' ).map ->\r
-    $(@).draggable {\r
-      stop: ( event, ui ) ->\r
-        balloon = $('.pettanr-balloon', $(@))\r
-        trace = editor.element_part_tag_id(balloon)\r
-        left = $(@).position().left\r
-        top = $(@).position().top\r
-        $(trace + 'x').val(parseInt(left))\r
-        $(trace + 'y').val(parseInt(top))\r
-    }\r
-  \r
-  $('.pettanr-balloon' ).map ->\r
-    $(@).resizable {\r
-      stop: ( event, ui ) ->\r
-        resize_div = $(@)\r
-        speech_balloon_div = resize_div.parent()\r
-        balloon = $('.pettanr-balloon', $(@))\r
-        trace = editor.element_tag_id(speech_balloon_div)\r
-        trace_balloon = editor.element_part_tag_id(balloon)\r
-        \r
-        resize_div.css('top', '0px')\r
-        resize_div.css('left', '0px')\r
-        w = ui.size.width\r
-        h = ui.size.height\r
-        if ui.originalPosition.top != ui.position.top\r
-          t = speech_balloon_div.position().top + ui.position.top\r
-          $(trace_balloon + 'y').val(Math.floor(t))\r
-          speech_balloon_div.css('top', t.toString() + 'px')\r
-          speech_balloon_div.css('height', h + 'px')\r
-        if ui.originalPosition.left != ui.position.left\r
-          l = speech_balloon_div.position().left + ui.position.left\r
-          $(trace_balloon + 'x').val(Math.floor(l))\r
-          speech_balloon_div.css('left', l.toString() + 'px')\r
-          speech_balloon_div.css('width', w + 'px')\r
-        $(trace_balloon + 'width').val(w)\r
-        $(trace_balloon + 'height').val(h)\r
-        speech_balloon_div.css('width', w.toString() + 'px')\r
-        speech_balloon_div.css('height', h.toString() + 'px')\r
-     resize: ( event, ui ) ->\r
-        resize_div = $(@)\r
-        speech_balloon_div = resize_div.parent()\r
-        balloon = $('.pettanr-balloon', $(@))\r
-        trace = editor.element_tag_id(speech_balloon_div)\r
-        trace_balloon = editor.element_part_tag_id(balloon)\r
-      handles: 'all',\r
-      autoHide: true\r
-    }\r
-  \r
-  $('.pettanr-comic-speech-inner' ).map ->\r
-    $(@).mouseover -> \r
-      outer = $(@).parent()\r
-      sb = outer.parent()\r
-      trace = editor.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 = editor.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 editor.element_is('speech_balloon', $(@))\r
-      $(@).focusout ->\r
-        switch $(@).attr('column')\r
-          when 'x'\r
-            trace = editor.element_tag_id($(@))\r
-            v = parseInt($(@).val()).toString() + 'px'\r
-            $(trace).css('left', v)\r
-          when 'y'\r
-            trace = editor.element_tag_id($(@))\r
-            v = parseInt($(@).val()).toString() + 'px'\r
-            $(trace).css('top', v)\r
-          when 'width'\r
-            trace = editor.element_tag_id($(@))\r
-            v = parseInt($(@).val())\r
-            $(trace).width(Math.abs(v))\r
-            img = $('.pettanr-balloon', $(trace))\r
-            img.parent().width(v)\r
-            img.width(v)\r
-          when 'height'\r
-            trace = editor.element_tag_id($(@))\r
-            v = parseInt($(@).val())\r
-            $(trace).height(Math.abs(v))\r
-            img = $('.pettanr-balloon', $(trace))\r
-            img.parent().height(v)\r
-            img.height(v)\r
-          else\r
-    else\r
-  $('textarea').map  ->\r
-    if editor.element_is('speech_balloon', $(@))\r
-      $(@).focusout ->\r
+              trace = editor.element_tag_id($(@)) + 'img'\r
+              h = parseInt($(@).val())\r
+              $(trace).height(Math.abs(h))\r
+              $(trace).parent().height(Math.abs(h))\r
+              w = parseInt($(editor.element_tag_id($(@)) + 'width').val())\r
+            else\r
+          PictureSizeHelper.refresh_picture($(trace), w, h)\r
+      else\r
+    \r
+    # speech_balloons\r
+    ColorHelper.add_helper($('.speech-fore_color-wrap'), 'fore_color')\r
+    \r
+    $('.pettanr-comic-balloon' ).map ->\r
+      $(@).draggable {\r
+        stop: ( event, ui ) ->\r
+          balloon = $('.pettanr-balloon', $(@))\r
+          trace = editor.element_part_tag_id(balloon)\r
+          left = $(@).position().left\r
+          top = $(@).position().top\r
+          $(trace + 'x').val(parseInt(left))\r
+          $(trace + 'y').val(parseInt(top))\r
+      }\r
+    \r
+    $('.pettanr-balloon' ).map ->\r
+      $(@).resizable {\r
+        stop: ( event, ui ) ->\r
+          resize_div = $(@)\r
+          speech_balloon_div = resize_div.parent()\r
+          balloon = $('.pettanr-balloon', $(@))\r
+          trace = editor.element_tag_id(speech_balloon_div)\r
+          trace_balloon = editor.element_part_tag_id(balloon)\r
+          \r
+          resize_div.css('top', '0px')\r
+          resize_div.css('left', '0px')\r
+          w = ui.size.width\r
+          h = ui.size.height\r
+          if ui.originalPosition.top != ui.position.top\r
+            t = speech_balloon_div.position().top + ui.position.top\r
+            $(trace_balloon + 'y').val(Math.floor(t))\r
+            speech_balloon_div.css('top', t.toString() + 'px')\r
+            speech_balloon_div.css('height', h + 'px')\r
+          if ui.originalPosition.left != ui.position.left\r
+            l = speech_balloon_div.position().left + ui.position.left\r
+            $(trace_balloon + 'x').val(Math.floor(l))\r
+            speech_balloon_div.css('left', l.toString() + 'px')\r
+            speech_balloon_div.css('width', w + 'px')\r
+          $(trace_balloon + 'width').val(w)\r
+          $(trace_balloon + 'height').val(h)\r
+          speech_balloon_div.css('width', w.toString() + 'px')\r
+          speech_balloon_div.css('height', h.toString() + 'px')\r
+       resize: ( event, ui ) ->\r
+          resize_div = $(@)\r
+          speech_balloon_div = resize_div.parent()\r
+          balloon = $('.pettanr-balloon', $(@))\r
+          trace = editor.element_tag_id(speech_balloon_div)\r
+          trace_balloon = editor.element_part_tag_id(balloon)\r
+        handles: 'all',\r
+        autoHide: true\r
+      }\r
+    \r
+    $('.pettanr-comic-speech-inner' ).map ->\r
+      $(@).mouseover -> \r
+        outer = $(@).parent()\r
+        sb = outer.parent()\r
+        trace = editor.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 = editor.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 editor.element_is('speech_balloon', $(@))\r
+        $(@).focusout ->\r
+          switch $(@).attr('column')\r
+            when 'x'\r
+              trace = editor.element_tag_id($(@))\r
+              v = parseInt($(@).val()).toString() + 'px'\r
+              $(trace).css('left', v)\r
+            when 'y'\r
+              trace = editor.element_tag_id($(@))\r
+              v = parseInt($(@).val()).toString() + 'px'\r
+              $(trace).css('top', v)\r
+            when 'width'\r
+              trace = editor.element_tag_id($(@))\r
+              v = parseInt($(@).val())\r
+              $(trace).width(Math.abs(v))\r
+              img = $('.pettanr-balloon', $(trace))\r
+              img.parent().width(v)\r
+              img.width(v)\r
+            when 'height'\r
+              trace = editor.element_tag_id($(@))\r
+              v = parseInt($(@).val())\r
+              $(trace).height(Math.abs(v))\r
+              img = $('.pettanr-balloon', $(trace))\r
+              img.parent().height(v)\r
+              img.height(v)\r
+            else\r
+      else\r
+    $('textarea').map  ->\r
+      if editor.element_is('speech_balloon', $(@))\r
+        $(@).focusout ->\r
+          switch $(@).attr('column')\r
+            when 'content'\r
+              trace = editor.element_part_tag_id($(@))\r
+              wf_sel = $(trace + 'writing_format_id')\r
+              wf_id = parseInt(wf_sel.val())\r
+              v = WritingFormat.render(wf_id, $(@).val())\r
+              $(trace).html(v)\r
+    $('textarea').map  ->\r
+      if editor.element_is('speech_balloon', $(@))\r
         switch $(@).attr('column')\r
           when 'content'\r
-            trace = editor.element_part_tag_id($(@))\r
-            wf_sel = $(trace + 'writing_format_id')\r
-            wf_id = parseInt(wf_sel.val())\r
-            v = WritingFormat.render(wf_id, $(@).val())\r
-            $(trace).html(v)\r
-  $('textarea').map  ->\r
-    if editor.element_is('speech_balloon', $(@))\r
-      switch $(@).attr('column')\r
-        when 'content'\r
-          $(@).bind('textchange', (event, previousText) ->\r
-            trace = editor.element_part_tag_id($(@))\r
-            wf_sel = $(trace + 'writing_format_id')\r
-            wf_id = parseInt(wf_sel.val())\r
-            v = WritingFormat.render(wf_id, $(@).val())\r
-            $(trace).html(v)\r
-          )\r
-  $('select').map  ->\r
-    if editor.element_is('speech_balloon', $(@))\r
-      $(@).change ->\r
-        switch $(@).attr('column')\r
-          when 'font_size'\r
-            trace = editor.element_part_tag_id($(@))\r
-            $(trace).css('font-size', $(@).val() + 'em')\r
-          when 'text_align'\r
-            trace = editor.element_part_tag_id($(@))\r
-            v = parseInt($(@).val())\r
-            $(trace).css('text-align', text_align_texts[v])\r
-    else\r
-  $('input').map  ->\r
-    if editor.element_is('speech_balloon', $(@))\r
-      if $(@).attr('column') == 'fore_color'\r
-        $(@).hide()\r
+            $(@).bind('textchange', (event, previousText) ->\r
+              trace = editor.element_part_tag_id($(@))\r
+              wf_sel = $(trace + 'writing_format_id')\r
+              wf_id = parseInt(wf_sel.val())\r
+              v = WritingFormat.render(wf_id, $(@).val())\r
+              $(trace).html(v)\r
+            )\r
+    $('select').map  ->\r
+      if editor.element_is('speech_balloon', $(@))\r
+        $(@).change ->\r
+          switch $(@).attr('column')\r
+            when 'font_size'\r
+              trace = editor.element_part_tag_id($(@))\r
+              $(trace).css('font-size', $(@).val() + 'em')\r
+            when 'text_align'\r
+              trace = editor.element_part_tag_id($(@))\r
+              v = parseInt($(@).val())\r
+              $(trace).css('text-align', text_align_texts[v])\r
+      else\r
+    $('input').map  ->\r
+      if editor.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 editor.element_is('ground_picture', $(@))\r
-      $(@).focusout ->\r
-        switch $(@).attr('column')\r
-          when 'x', 'y'\r
-            trace = editor.element_tag_id($(@))\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 editor.element_is('ground_picture', $(@))\r
-      $(@).change ->\r
-        switch $(@).attr('column')\r
-          when 'repeat'\r
-            trace = editor.element_tag_id($(@))\r
-            v = parseInt($(@).val())\r
-            $(trace).css('background-repeat', repeat_texts[v])\r
-    else\r
-  \r
-  \r
-  # ground_color\r
-  # sync view \r
-  $('input').map  ->\r
-    if editor.element_is('ground_color', $(@))\r
-      if $(@).attr('column') == 'code'\r
-        $(@).hide()\r
+    \r
+    # ground-picture\r
+    # sync view \r
+    $('input').map  ->\r
+      if editor.element_is('ground_picture', $(@))\r
+        $(@).focusout ->\r
+          switch $(@).attr('column')\r
+            when 'x', 'y'\r
+              trace = editor.element_tag_id($(@))\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 editor.element_is('ground_picture', $(@))\r
+        $(@).change ->\r
+          switch $(@).attr('column')\r
+            when 'repeat'\r
+              trace = editor.element_tag_id($(@))\r
+              v = parseInt($(@).val())\r
+              $(trace).css('background-repeat', repeat_texts[v])\r
+      else\r
+    \r
+    \r
+    # ground_color\r
+    ColorHelper.add_helper($('.ground_color-code-wrap'), 'code')\r
+    \r
+    # sync view \r
+    $('input').map  ->\r
+      if editor.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
-    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
-    v = '#' + h\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 editor.is_element_part($(@))\r
-      code_picker_trace = editor.element_part_tag_id($(@))\r
-      code = parseInt($(code_picker_trace + 'fore_color').val())\r
-    else\r
-      code_picker_trace = editor.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: red,\r
-      change: ( event, ui ) ->\r
-        if editor.is_element_part($(@).parent())\r
-          trace = editor.element_part_tag_id($(@).parent())\r
-        else\r
-          trace = editor.element_tag_id($(@).parent())\r
-        color_slider_change(trace)\r
-    }\r
-    $(code_picker_trace + 'code_green').slider {\r
-      orientation: 'horizontal',\r
-      range: 'min',\r
-      max: 255,\r
-      value: green,\r
-      change: ( event, ui ) ->\r
-        if editor.is_element_part($(@).parent())\r
-          trace = editor.element_part_tag_id($(@).parent())\r
+    update_t = (ultrace) -> \r
+      t = 0\r
+      $(ultrace + ' li').map ->\r
+        trace = editor.element_tag_id($(@))\r
+        if $(trace + '_destroy').val().length < 1\r
+          $(trace + 't').val(t)\r
+          t++\r
         else\r
-          trace = editor.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
-        if editor.is_element_part($(@).parent())\r
-          trace = editor.element_part_tag_id($(@).parent())\r
+    \r
+    $('.tsort').map -> \r
+      $(@).sortable {\r
+        update: ( event, ui ) ->\r
+          trace = editor.panel_tag_id($(@))\r
+          update_t(trace + 'tsort')\r
+      }\r
+    $('.t-sort li').map -> \r
+      $(@).disableSelection()\r
+    \r
+    update_z = (ultrace) -> \r
+      z = 1\r
+      $(ultrace + ' li').map ->\r
+        trace = editor.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
-          trace = editor.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 = editor.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 = editor.panel_tag_id($(@))\r
-        update_t(trace + 'tsort')\r
-    }\r
-  $('.t-sort li').map -> \r
-    $(@).disableSelection()\r
-  \r
-  update_z = (ultrace) -> \r
-    z = 1\r
-    $(ultrace + ' li').map ->\r
-      trace = editor.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
-        trace = editor.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
-  \r
-  $('.wreverse').click -> \r
-    d = $(@).parent()\r
-    trace = editor.element_tag_id(d)\r
-    f = $(trace + 'width')\r
-    w = -f.val()\r
-    f.val(w)\r
-    f = $(trace + 'height')\r
-    h = f.val()\r
-    refresh_picture($(trace + 'img'), w, h)\r
-  \r
-  $('.wdouble').click -> \r
-    d = $(@).parent()\r
-    trace = editor.element_tag_id(d)\r
-    f = $(trace + 'width')\r
-    w = f.val() * 2\r
-    f.val(w)\r
-    $(trace + 'img').width(Math.abs(w))\r
-    $(trace + 'img').parent().width(Math.abs(w))\r
-  \r
-  $('.whalf').click -> \r
-    d = $(@).parent()\r
-    trace = editor.element_tag_id(d)\r
-    f = $(trace + 'width')\r
-    w = Math.floor(f.val() / 2)\r
-    f.val(w)\r
-    $(trace + 'img').width(Math.abs(w))\r
-    $(trace + 'img').parent().width(Math.abs(w))\r
-  \r
-  $('.panel_picture_height_tool').map ->\r
-    $(@).html('<button class="hreverse">Rev</button><button class="hdouble">x2</button><button class="hhalf">/2</button>')\r
-  \r
-  $('.hreverse').click -> \r
-    d = $(@).parent()\r
-    trace = editor.element_tag_id(d)\r
-    f = $(trace + 'height')\r
-    h = -f.val()\r
-    f.val(h)\r
-    f = $(trace + 'width')\r
-    w = f.val()\r
-    refresh_picture($(trace + 'img'), w, h)\r
-  \r
-  $('.hdouble').click -> \r
-    d = $(@).parent()\r
-    trace = editor.element_tag_id(d)\r
-    f = $(trace + 'height')\r
-    h = f.val() * 2\r
-    f.val(h)\r
-    $(trace + 'img').height(Math.abs(h))\r
-    $(trace + 'img').parent().height(Math.abs(h))\r
-  \r
-  $('.hhalf').click -> \r
-    d = $(@).parent()\r
-    trace = editor.element_tag_id(d)\r
-    f = $(trace + 'height')\r
-    h = Math.floor(f.val() / 2)\r
-    f.val(h)\r
-    $(trace + 'img').height(Math.abs(h))\r
-    $(trace + 'img').parent().height(Math.abs(h))\r
-  \r
-  # all\r
-  # disable form actions\r
-  # hide submit buttons\r
-  $('.edit_panel_picture' ).map ->\r
-    $(@).submit ->\r
-      false\r
-  $('.edit_speech_balloon' ).map ->\r
-    $(@).submit ->\r
-      false\r
-  $('.edit_ground_picture' ).map ->\r
-    $(@).submit ->\r
-      false\r
-  $('.edit_ground_color' ).map ->\r
-    $(@).submit ->\r
-      false\r
-  \r
-  $('.edit_panel' ).map ->\r
-    if $(@).attr('jqform')\r
-    else\r
+    \r
+    $('.zsort').map -> \r
+      $(@).sortable {\r
+        update: ( event, ui ) ->\r
+          trace = editor.panel_tag_id($(@))\r
+          update_z(trace + 'zsort')\r
+      }\r
+    $('.z-sort li').map -> \r
+      $(@).disableSelection()\r
+    \r
+    # all\r
+    # disable form actions\r
+    # hide submit buttons\r
+    $('.edit_panel_picture' ).map ->\r
       $(@).submit ->\r
         false\r
-  \r
-  $('.submit' ).map ->\r
-    $(@).hide()\r
-  \r
-  # disable form z t\r
-  $('input').map  ->\r
-    if editor.is_element($(@))\r
-      switch $(@).attr('column')\r
-        when 'z' , 't'\r
-          $(@).hide()\r
-          $(@).parent().hide() #label\r
-  \r
-  # add button on new form\r
-  $('.submit-new-form').map ->\r
-    $(@).html('<button class="new-element">add</button>')\r
-  \r
-  $('.new-element').map ->\r
-    $(@).click -> \r
-      false\r
-  \r
+    $('.edit_speech_balloon' ).map ->\r
+      $(@).submit ->\r
+        false\r
+    $('.edit_ground_picture' ).map ->\r
+      $(@).submit ->\r
+        false\r
+    $('.edit_ground_color' ).map ->\r
+      $(@).submit ->\r
+        false\r
+    \r
+    $('.edit_panel' ).map ->\r
+      if $(@).attr('jqform')\r
+      else\r
+        $(@).submit ->\r
+          false\r
+    \r
+    $('.submit' ).map ->\r
+      $(@).hide()\r
+    \r
+    # disable form z t\r
+    $('input').map  ->\r
+      if editor.is_element($(@))\r
+        switch $(@).attr('column')\r
+          when 'z' , 't'\r
+            $(@).hide()\r
+            $(@).parent().hide() #label\r
+    \r
+    # add button on new form\r
+    $('.submit-new-form').map ->\r
+      $(@).html('<button class="new-element">add</button>')\r
+    \r
+    $('.new-element').map ->\r
+      $(@).click -> \r
+        false\r
+    \r

diff --git a/app/assets/javascripts/pettanr_editor.js.coffee b/app/assets/javascripts/pettanr_editor.js.coffee
index 836d49b..24aef1f 100644 (file)
--- a/app/assets/javascripts/pettanr_editor.js.coffee
+++ b/app/assets/javascripts/pettanr_editor.js.coffee
@@ -4,6 +4,9 @@ class PettanrEditor
   @new_element_index = {}\r
   @new_element_index[PettanrEditor.pettanr_current_panel_id] = 0\r
   \r
+  @current_panel = () ->\r
+    $('#panel' + PettanrEditor.pettanr_current_panel_id.toString())\r
+  \r
   @set_tree_value = (keys, last_attr, value) ->\r
     key = keys.shift()\r
     if keys.length <= 0\r
@@ -14,6 +17,12 @@ class PettanrEditor
 \r
   @repeat_texts = ['repeat', 'repeat-x', 'repeat-y', 'no-repeat']\r
   \r
+  @is_editting = () ->\r
+    trace = '#panel' + PettanrEditor.pettanr_current_panel_id.toString() + 'wrapper'\r
+    if $(trace) and $(trace).attr('editable')\r
+      return true\r
+    else\r
+      return false\r
   @is_editable = (p) ->\r
     if p.parent().attr('editable')\r
       return true\r

diff --git a/app/assets/javascripts/speech_balloon_templates.js.coffee b/app/assets/javascripts/speech_balloon_templates.js.coffee
new file mode 100644 (file)
index 0000000..05c8809
--- /dev/null
+++ b/app/assets/javascripts/speech_balloon_templates.js.coffee
@@ -0,0 +1,43 @@
+class PettanrSpeechBalloonTemplate
+  #keys: speech_balloon_template_id
+  #values: engine_name
+  @speech_balloon_templates = {}
+  
+  #keys engine_name :ex. 'circle_speech_balloon'
+  #values: SpeechBalloon class :ex.PettanrCircleSpeechBalloon
+  @scripts = {}
+  
+  #keys engine_name :ex. 'circle_speech_balloon'
+  #values: speech_balloon_template_id
+  @engine_names = {}
+  
+  @load = (div) ->
+    $('div', div).map ->
+      id = parseInt($(@).attr('speech_balloon_template_id'))
+      engine_name = $(@).attr('engine_name')
+      settings = JSON.parse($(@).attr('settings'))
+      PettanrSpeechBalloonTemplate.speech_balloon_templates[id] = {
+        engine_name: engine_name, 
+        settings: settings
+      }
+      PettanrSpeechBalloonTemplate.engine_names[engine_name] = id
+  
+  @row = (speech_balloon_template_id) ->
+    PettanrSpeechBalloonTemplate.speech_balloon_templates[speech_balloon_template_id]
+  
+  @engine_name = (speech_balloon_template_id) ->
+    row = PettanrSpeechBalloonTemplate.row(speech_balloon_template_id)
+    row.engine_name
+  
+  @settings = (speech_balloon_template_id) ->
+    row = PettanrSpeechBalloonTemplate.row(speech_balloon_template_id)
+    row.settings
+  
+  @id = (engine_name) ->
+    PettanrSpeechBalloonTemplate.engine_names[engine_name]
+  
+  @add_helper = (speech_balloon_template_id, opt) ->
+    engine_name = PettanrSpeechBalloonTemplate.engine_name
+    PettanrSpeechBalloonTemplate.scripts[engine_name].add_helper(opt)
+  
+@PettanrSpeechBalloonTemplate = PettanrSpeechBalloonTemplate

diff --git a/app/assets/javascripts/writing_formats.js.coffee b/app/assets/javascripts/writing_formats.js.coffee
index a4a3fa7..67a4163 100644 (file)
--- a/app/assets/javascripts/writing_formats.js.coffee
+++ b/app/assets/javascripts/writing_formats.js.coffee
@@ -9,7 +9,7 @@ class PettanrWritingFormat
       PettanrWritingFormat.writing_formats[id] = engine_name
   
   @render = (writing_format, content) -> 
-    engine_name = PettanrWritingFormat.writing_formats[1]
+    engine_name = PettanrWritingFormat.writing_formats[writing_format]
     PettanrWritingFormat.renderers[engine_name].render(content)
   
   

diff --git a/app/assets/stylesheets/test.css.scss b/app/assets/stylesheets/test.css.scss
index bd7f0e0..efff5fe 100644 (file)
--- a/app/assets/stylesheets/test.css.scss
+++ b/app/assets/stylesheets/test.css.scss
@@ -132,7 +132,15 @@ font-family : monospace;
   height          : 9px;
   right           : -5px;
   top             : -5px;
-}.colorpicker-wrap {
+}
+.ground_color-code-wrap {
+    border: 1px solid #d0d0d0;
+    border-radius: 10px;
+    padding: 10px 5px;
+    background: #fafafa;
+    display: none;
+}
+.speech-fore_color-wrap {
     border: 1px solid #d0d0d0;
     border-radius: 10px;
     padding: 10px 5px;

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 061bad0..f53da6f 100644 (file)
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -54,6 +54,12 @@ module ApplicationHelper
     WritingFormat.list().map {|wf|
 #      javascript_include_tag wf.engine_name
       javascript_include_tag wf.engine_name + "/application"
+    }.join("\n") + 
+    SpeechBalloonTemplate.enable_list().map {|sbt|
+      stylesheet_link_tag sbt.engine_name + "/application"
+    }.join("\n") + 
+    SpeechBalloonTemplate.enable_list().map {|sbt|
+      javascript_include_tag sbt.engine_name + "/application"
     }.join("\n")
   end
   

diff --git a/app/views/ground_colors/_form.html.erb b/app/views/ground_colors/_form.html.erb
index 55f51a2..a42714d 100644 (file)
--- a/app/views/ground_colors/_form.html.erb
+++ b/app/views/ground_colors/_form.html.erb
@@ -9,8 +9,10 @@
     <%= f.label :code %>
     <%= f.text_field :code, elm.field_tag_attributes(:code, no_attr, :size => 8) %>
     <% if elm.has_helper?(:code) %>
-      <%= render elm.form_helper_template(:code), :elm => elm, :no_attr => no_attr %>
-    <% end %>
+      <div class="ground_color-code-wrap">
+        <%= render elm.form_helper_template(:code), :elm => elm, :no_attr => no_attr %>
+      </div>
+   <% end %>
   </div>
   <div class="field">
     <%= f.label :z %>

diff --git a/app/views/panels/_color_helper.html.erb b/app/views/panels/_color_helper.html.erb
index a2ecf68..2cff8db 100644 (file)
--- a/app/views/panels/_color_helper.html.erb
+++ b/app/views/panels/_color_helper.html.erb
@@ -1,15 +1,13 @@
-<div class="colorpicker-wrap">
-  <div class="colorpicker" style="float: left;" <%= raw elm.field_tag_attr(:code_picker, no_attr) -%>>
-    <div id="<%= elm.tag_id(:code_red) -%>" class="colorpicker-red"></div>
-    <div id="<%= elm.tag_id(:code_green) -%>" class="colorpicker-green"></div>
-    <div id="<%= elm.tag_id(:code_blue) -%>" class="colorpicker-blue"></div>
-  </div>
-  <div style="float: left;">
-    <div id="<%= elm.tag_id(:code_swatch) -%>" class="ui-widget-content ui-corner-all code_swatch"></div>
-  </div>
-  <div style="float: left;">
-    <div id="<%= elm.tag_id(:code_hex) -%>"></div>
-    <div id="<%= elm.tag_id(:code_rgb) -%>"></div>
-  </div>
-  <div style="clear: both;"></div>
+<div class="colorpicker" style="float: left;" <%= raw elm.field_tag_attr(:code_picker, no_attr) -%>>
+  <div id="<%= elm.tag_id(:code_red) -%>" class="colorpicker-red"></div>
+  <div id="<%= elm.tag_id(:code_green) -%>" class="colorpicker-green"></div>
+  <div id="<%= elm.tag_id(:code_blue) -%>" class="colorpicker-blue"></div>
 </div>
+<div style="float: left;">
+  <div id="<%= elm.tag_id(:code_swatch) -%>" class="ui-widget-content ui-corner-all code_swatch"></div>
+</div>
+<div style="float: left;">
+  <div id="<%= elm.tag_id(:code_hex) -%>"></div>
+  <div id="<%= elm.tag_id(:code_rgb) -%>"></div>
+</div>
+<div style="clear: both;"></div>

diff --git a/app/views/panels/_form.html.erb b/app/views/panels/_form.html.erb
index 10310a8..06370c0 100644 (file)
--- a/app/views/panels/_form.html.erb
+++ b/app/views/panels/_form.html.erb
@@ -149,17 +149,6 @@
         <% i += 1 %>
       <% end %>
     </div>
-    <script>
-    <!--
-      <% SpeechBalloonTemplate.enable_list().each do |sbt| %>
-        var <%= h(sbt.engine_name) %>_settings = <%= raw sbt.parsed_settings.to_json -%>;
-      <% end %>
-    // -->
-    </script>
-    <% SpeechBalloonTemplate.enable_list().each do |sbt| %>
-      <%= stylesheet_link_tag sbt.engine_name + "/application" %>
-      <%= javascript_include_tag sbt.engine_name + "/application" %>
-    <% end %>
   </div>
 </div>
 <%= form_for(@panel, :html => {:jqform => 'pettanr-panel-form'}) do |f| %>
@@ -172,7 +161,13 @@
 <% end %>
 <div id="writing_formats">
   <% WritingFormat.list().each do |wf| %>
-    <div id="sss<%= wf.id -%>" writing_format_id="<%= wf.id -%>" writing_format_engine_name="<%= wf.engine_name -%>">
+    <div id="writing_format-<%= wf.id -%>" writing_format_id="<%= wf.id -%>" writing_format_engine_name="<%= wf.engine_name -%>">
+    </div>
+  <% end %>
+</div>
+<div id="speech_balloon_templates">
+  <% SpeechBalloonTemplate.enable_list().each do |sbt| %>
+    <div id="speech_balloon_template-<%= sbt.id -%>" speech_balloon_template_id="<%= sbt.id -%>" engine_name="<%= sbt.engine_name -%>" settings="<%= sbt.parsed_settings.to_json -%>">
     </div>
   <% end %>
 </div>

diff --git a/app/views/panels/_tail_angle_helper.html.erb b/app/views/panels/_tail_angle_helper.html.erb
index be9300c..81a6cbc 100644 (file)
--- a/app/views/panels/_tail_angle_helper.html.erb
+++ b/app/views/panels/_tail_angle_helper.html.erb
@@ -1,4 +1,4 @@
-<span class="r-wrap" style="display: none;" <%= raw elm.tag_attr -%> r_step="<%= elm.r_step -%>">
+<span class="r-wrap" style="display: none;" <%= raw elm.tag_attr -%>>
   <button class="r-down" value="0"><</button>
   <button class="r-up" value="0">></button>
   <button class="r-reset" value="0">reset</button>