t#31949:lib writing_format

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index be9a8ce..02486b1 100644 (file)
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -7,4 +7,8 @@
 //= require jquery
 //= require jquery_ujs
 //= require jquery.ui.all
-//= require_tree .
+//= require textchange
+//= require pettanr_editor
+//= require writing_formats
+//= require panels
+//  require_tree .

diff --git a/app/assets/javascripts/panels.js.coffee b/app/assets/javascripts/panels.js.coffee
index 70933de..43ae19d 100644 (file)
--- a/app/assets/javascripts/panels.js.coffee
+++ b/app/assets/javascripts/panels.js.coffee
@@ -1,85 +1,13 @@
 $ ->\r
   confirm_confirm_confirm = () ->\r
     confirm(  )\r
-  new_element_index = {}\r
-  new_element_index[pettanr_current_panel_id] = 0\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
-    if p.parent().attr('editable')\r
-      return true\r
-    else\r
-      return false\r
-  is_var = (o) ->\r
-    if parseInt(o.attr('no_attr')) > 0\r
-      return false\r
-    else\r
-      if o.attr('column') \r
-        if o.attr('column') == '_destroy' and o.val().length < 1\r
-          return false\r
-        else\r
-          return true\r
-      else\r
-        return false\r
-  is_element = (o) ->\r
-    if o.attr('element_type')\r
-      return true\r
-    else\r
-      return false\r
-  is_element_part = (o) ->\r
-    if o.attr('element_part_type')\r
-      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
-  text_align_texts = ['left', 'left', 'right', 'center']\r
-\r
-  make_tree = (attr, o) ->\r
-    if is_var(o)\r
-      tree = 'panels-' + o.attr('panel_id') + '-'\r
-      if is_element(o)\r
-        tree = tree + element_type_to_table(o.attr('element_type')) + '_attributes-' + o.attr('element_id') + '-'\r
-        if is_element_part(o)\r
-          tree = tree + o.attr('element_part_type') + '_attributes-'\r
-      tree = tree + o.attr('column')\r
-      keys = tree.split('-')\r
-      set_tree_value(keys, attr, o.val())\r
-  \r
-  panel_tag_id = (element) ->\r
-    '#panel' + element.attr('panel_id')\r
-  \r
-  element_tag_id = (element) ->\r
-    '#panel' + element.attr('panel_id') + element.attr('element_type') + element.attr('element_id')\r
-  \r
-  element_part_tag_id = (element_part) ->\r
-    '#panel' + element_part.attr('panel_id') + element_part.attr('element_type') + element_part.attr('element_id') + element_part.attr('element_part_type') + element_part.attr('element_part_id')\r
-  \r
-  refresh_attribute = () ->\r
-    attr = {}\r
-    $('input').map ->\r
-      make_tree(attr, $(@))\r
-    $('textarea').map  ->\r
-      make_tree(attr, $(@))\r
-    $('select').map ->\r
-      make_tree(attr, $(@))\r
-    $('#pettanr-panel-json').val(JSON.stringify(attr['panels'][pettanr_current_panel_id.toString() ]))\r
+  editor = window.PettanrEditor\r
+  WritingFormat = window.PettanrWritingFormat\r
+  WritingFormat.load($('#writing_formats'))\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
@@ -91,10 +19,10 @@ $ ->
     $(@).mouseover -> \r
       switch $(@).attr('element_type')\r
         when 'speech_balloon'\r
-          trace = element_tag_id($(@)) \r
+          trace = editor.element_tag_id($(@)) \r
           t = $('img', $(trace))\r
         when 'panel_picture'\r
-          trace = element_tag_id($(@)) + 'img'\r
+          trace = editor.element_tag_id($(@)) + 'img'\r
           t = $(trace)\r
         else\r
           t = null\r
@@ -104,10 +32,10 @@ $ ->
     $(@).mouseout -> \r
       switch $(@).attr('element_type')\r
         when 'speech_balloon'\r
-          trace = element_tag_id($(@)) \r
+          trace = editor.element_tag_id($(@)) \r
           t = $('img', $(trace))\r
         when 'panel_picture'\r
-          trace = element_tag_id($(@)) + 'img'\r
+          trace = editor.element_tag_id($(@)) + 'img'\r
           t = $(trace)\r
         else\r
           t = null\r
@@ -126,9 +54,9 @@ $ ->
     }\r
     $(@).click -> \r
       if confirm('destroy ?')\r
-        trace = element_tag_id($(@))\r
+        trace = editor.element_tag_id($(@))\r
         $(trace + '_destroy').val('true')\r
-        panel_trace = panel_tag_id($(@))\r
+        panel_trace = editor.panel_tag_id($(@))\r
         update_t(panel_trace + 'tsort')\r
         update_z(panel_trace + 'zsort')\r
         # sync\r
@@ -143,14 +71,14 @@ $ ->
         \r
   \r
   $('#pettanr-panel-submit').focusin ->\r
-    refresh_attribute()\r
+    editor.refresh_attribute($('#pettanr-panel-json'))\r
   \r
   # panel\r
   $('.pettanr-comic-panel').map ->\r
-    if is_editable($(@))\r
+    if editor.is_editable($(@))\r
       $(@).resizable {\r
         stop: ( event, ui ) ->\r
-          trace = panel_tag_id($(@))\r
+          trace = editor.panel_tag_id($(@))\r
           w = parseInt($(@).width())\r
           h = parseInt($(@).height())\r
           $(trace + 'width').val(w)\r
@@ -163,25 +91,29 @@ $ ->
             $(@).height(h)\r
         , autoHide: true\r
       }\r
-  # sync view \r
-  $('#panel' + pettanr_current_panel_id.toString() +  'width').focusout ->\r
-    trace = panel_tag_id($(@))\r
-    $(trace).width(parseInt( $(@).val()))\r
-  \r
-  $('#panel' + pettanr_current_panel_id.toString() + 'height').focusout ->\r
-    trace = panel_tag_id($(@))\r
-    $(trace).height(parseInt( $(@).val()))\r
-  \r
-  $('#panel' + pettanr_current_panel_id.toString() + 'border').focusout ->\r
-    trace = panel_tag_id($(@))\r
-    $(trace).css('border-width', parseInt($(@).val()).toString() + 'px')\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
   $('.pettanr-panel-picture-wrapper').map ->\r
     $(@).draggable {\r
       stop: ( event, ui ) ->\r
-        trace = element_tag_id($(@))\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
@@ -194,7 +126,7 @@ $ ->
       stop: ( event, ui ) ->\r
         resize_div = $(@)\r
         panel_picture_div = resize_div.parent()\r
-        trace = element_tag_id(panel_picture_div)\r
+        trace = editor.element_tag_id(panel_picture_div)\r
         \r
         resize_div.css('top', '0px')\r
         resize_div.css('left', '0px')\r
@@ -219,8 +151,7 @@ $ ->
       resize: ( event, ui ) ->\r
         resize_div = $(@)\r
         panel_picture_div = resize_div.parent()\r
-        trace = element_tag_id(panel_picture_div)\r
-        \r
+        trace = editor.element_tag_id(panel_picture_div)\r
       handles: 'all',\r
       autoHide: true\r
     }\r
@@ -241,29 +172,29 @@ $ ->
   \r
   # sync view \r
   $('input').map  ->\r
-    if element_is('panel_picture', $(@))\r
+    if editor.element_is('panel_picture', $(@))\r
       $(@).focusout ->\r
         switch $(@).attr('column')\r
           when 'x'\r
-            trace = element_tag_id($(@)) + 'div'\r
+            trace = editor.element_tag_id($(@)) + 'div'\r
             v = parseInt($(@).val()).toString() + 'px'\r
             $(trace).css('left', v)\r
           when 'y'\r
-            trace = element_tag_id($(@)) + 'div'\r
+            trace = editor.element_tag_id($(@)) + 'div'\r
             v = parseInt($(@).val()).toString() + 'px'\r
             $(trace).css('top', v)\r
           when 'width'\r
-            trace = element_tag_id($(@)) + 'img'\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($(element_tag_id($(@)) + 'height').val())\r
+            h = parseInt($(editor.element_tag_id($(@)) + 'height').val())\r
           when 'height'\r
-            trace = element_tag_id($(@)) + 'img'\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($(element_tag_id($(@)) + 'width').val())\r
+            w = parseInt($(editor.element_tag_id($(@)) + 'width').val())\r
           else\r
         refresh_picture($(trace), w, h)\r
     else\r
@@ -273,7 +204,7 @@ $ ->
     $(@).draggable {\r
       stop: ( event, ui ) ->\r
         balloon = $('.pettanr-balloon', $(@))\r
-        trace = element_part_tag_id(balloon)\r
+        trace = editor.element_part_tag_id(balloon)\r
         left = $(@).position().left\r
         top = $(@).position().top\r
         $(trace + 'x').val(parseInt(left))\r
@@ -286,8 +217,8 @@ $ ->
         resize_div = $(@)\r
         speech_balloon_div = resize_div.parent()\r
         balloon = $('.pettanr-balloon', $(@))\r
-        trace = element_tag_id(speech_balloon_div)\r
-        trace_balloon = element_part_tag_id(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
@@ -311,9 +242,8 @@ $ ->
         resize_div = $(@)\r
         speech_balloon_div = resize_div.parent()\r
         balloon = $('.pettanr-balloon', $(@))\r
-        trace = element_tag_id(speech_balloon_div)\r
-        trace_balloon = element_part_tag_id(balloon)\r
-        \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
@@ -322,14 +252,14 @@ $ ->
     $(@).mouseover -> \r
       outer = $(@).parent()\r
       sb = outer.parent()\r
-      trace = element_tag_id(sb)\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 = element_tag_id(sb)\r
+      trace = editor.element_tag_id(sb)\r
       img = $('.pettanr-balloon', $(trace))\r
       $('.ui-resizable-handle', img.parent()).map ->\r
         $(@).css('display', 'none')\r
@@ -337,26 +267,26 @@ $ ->
   \r
   # sync view \r
   $('input').map  ->\r
-    if element_is('speech_balloon', $(@))\r
+    if editor.element_is('speech_balloon', $(@))\r
       $(@).focusout ->\r
         switch $(@).attr('column')\r
           when 'x'\r
-            trace = element_tag_id($(@))\r
+            trace = editor.element_tag_id($(@))\r
             v = parseInt($(@).val()).toString() + 'px'\r
             $(trace).css('left', v)\r
           when 'y'\r
-            trace = element_tag_id($(@))\r
+            trace = editor.element_tag_id($(@))\r
             v = parseInt($(@).val()).toString() + 'px'\r
             $(trace).css('top', v)\r
           when 'width'\r
-            trace = element_tag_id($(@))\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 = element_tag_id($(@))\r
+            trace = editor.element_tag_id($(@))\r
             v = parseInt($(@).val())\r
             $(trace).height(Math.abs(v))\r
             img = $('.pettanr-balloon', $(trace))\r
@@ -365,40 +295,40 @@ $ ->
           else\r
     else\r
   $('textarea').map  ->\r
-    if element_is('speech_balloon', $(@))\r
+    if editor.element_is('speech_balloon', $(@))\r
       $(@).focusout ->\r
         switch $(@).attr('column')\r
           when 'content'\r
-            trace = element_part_tag_id($(@))\r
+            trace = editor.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
+            v = WritingFormat.render(wf_id, $(@).val())\r
+            $(trace).html(v)\r
   $('textarea').map  ->\r
-    if element_is('speech_balloon', $(@))\r
+    if editor.element_is('speech_balloon', $(@))\r
       switch $(@).attr('column')\r
         when 'content'\r
           $(@).bind('textchange', (event, previousText) ->\r
-            trace = element_part_tag_id($(@))\r
+            trace = editor.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
+            v = WritingFormat.render(wf_id, $(@).val())\r
+            $(trace).html(v)\r
           )\r
   $('select').map  ->\r
-    if element_is('speech_balloon', $(@))\r
+    if editor.element_is('speech_balloon', $(@))\r
       $(@).change ->\r
         switch $(@).attr('column')\r
           when 'font_size'\r
-            trace = element_part_tag_id($(@))\r
+            trace = editor.element_part_tag_id($(@))\r
             $(trace).css('font-size', $(@).val() + 'em')\r
           when 'text_align'\r
-            trace = element_part_tag_id($(@))\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 element_is('speech_balloon', $(@))\r
+    if editor.element_is('speech_balloon', $(@))\r
       if $(@).attr('column') == 'fore_color'\r
         $(@).hide()\r
 \r
@@ -406,20 +336,20 @@ $ ->
   # ground-picture\r
   # sync view \r
   $('input').map  ->\r
-    if element_is('ground_picture', $(@))\r
+    if editor.element_is('ground_picture', $(@))\r
       $(@).focusout ->\r
         switch $(@).attr('column')\r
           when 'x', 'y'\r
-            trace = element_tag_id($(@))\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 element_is('ground_picture', $(@))\r
+    if editor.element_is('ground_picture', $(@))\r
       $(@).change ->\r
         switch $(@).attr('column')\r
           when 'repeat'\r
-            trace = element_tag_id($(@))\r
+            trace = editor.element_tag_id($(@))\r
             v = parseInt($(@).val())\r
             $(trace).css('background-repeat', repeat_texts[v])\r
     else\r
@@ -428,7 +358,7 @@ $ ->
   # ground_color\r
   # sync view \r
   $('input').map  ->\r
-    if element_is('ground_color', $(@))\r
+    if editor.element_is('ground_color', $(@))\r
       if $(@).attr('column') == 'code'\r
         $(@).hide()\r
 \r
@@ -452,11 +382,11 @@ $ ->
       $(trace).css('color', v)\r
   \r
   $('.colorpicker').map -> \r
-    if is_element_part($(@))\r
-      code_picker_trace = element_part_tag_id($(@))\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 = element_tag_id($(@))\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
@@ -467,10 +397,10 @@ $ ->
       max: 255,\r
       value: red,\r
       change: ( event, ui ) ->\r
-        if is_element_part($(@).parent())\r
-          trace = element_part_tag_id($(@).parent())\r
+        if editor.is_element_part($(@).parent())\r
+          trace = editor.element_part_tag_id($(@).parent())\r
         else\r
-          trace = element_tag_id($(@).parent())\r
+          trace = editor.element_tag_id($(@).parent())\r
         color_slider_change(trace)\r
     }\r
     $(code_picker_trace + 'code_green').slider {\r
@@ -479,10 +409,10 @@ $ ->
       max: 255,\r
       value: green,\r
       change: ( event, ui ) ->\r
-        if is_element_part($(@).parent())\r
-          trace = element_part_tag_id($(@).parent())\r
+        if editor.is_element_part($(@).parent())\r
+          trace = editor.element_part_tag_id($(@).parent())\r
         else\r
-          trace = element_tag_id($(@).parent())\r
+          trace = editor.element_tag_id($(@).parent())\r
         color_slider_change(trace)\r
     }\r
     $(code_picker_trace + 'code_blue').slider {\r
@@ -491,10 +421,10 @@ $ ->
       max: 255,\r
       value: blue,\r
       change: ( event, ui ) ->\r
-        if is_element_part($(@).parent())\r
-          trace = element_part_tag_id($(@).parent())\r
+        if editor.is_element_part($(@).parent())\r
+          trace = editor.element_part_tag_id($(@).parent())\r
         else\r
-          trace = element_tag_id($(@).parent())\r
+          trace = editor.element_tag_id($(@).parent())\r
         color_slider_change(trace)\r
     }\r
     color_slider_change(code_picker_trace)\r
@@ -504,7 +434,7 @@ $ ->
   update_t = (ultrace) -> \r
     t = 0\r
     $(ultrace + ' li').map ->\r
-      trace = element_tag_id($(@))\r
+      trace = editor.element_tag_id($(@))\r
       if $(trace + '_destroy').val().length < 1\r
         $(trace + 't').val(t)\r
         t++\r
@@ -513,7 +443,7 @@ $ ->
   $('.tsort').map -> \r
     $(@).sortable {\r
       update: ( event, ui ) ->\r
-        trace = panel_tag_id($(@))\r
+        trace = editor.panel_tag_id($(@))\r
         update_t(trace + 'tsort')\r
     }\r
   $('.t-sort li').map -> \r
@@ -522,7 +452,7 @@ $ ->
   update_z = (ultrace) -> \r
     z = 1\r
     $(ultrace + ' li').map ->\r
-      trace = element_tag_id($(@))\r
+      trace = editor.element_tag_id($(@))\r
       # update panel\r
       if $(trace + '_destroy').val().length < 1\r
         $(trace + 'z').val(z)\r
@@ -536,7 +466,7 @@ $ ->
   $('.zsort').map -> \r
     $(@).sortable {\r
       update: ( event, ui ) ->\r
-        trace = panel_tag_id($(@))\r
+        trace = editor.panel_tag_id($(@))\r
         update_z(trace + 'zsort')\r
     }\r
   $('.z-sort li').map -> \r
@@ -547,7 +477,7 @@ $ ->
   \r
   $('.wreverse').click -> \r
     d = $(@).parent()\r
-    trace = element_tag_id(d)\r
+    trace = editor.element_tag_id(d)\r
     f = $(trace + 'width')\r
     w = -f.val()\r
     f.val(w)\r
@@ -557,7 +487,7 @@ $ ->
   \r
   $('.wdouble').click -> \r
     d = $(@).parent()\r
-    trace = element_tag_id(d)\r
+    trace = editor.element_tag_id(d)\r
     f = $(trace + 'width')\r
     w = f.val() * 2\r
     f.val(w)\r
@@ -566,7 +496,7 @@ $ ->
   \r
   $('.whalf').click -> \r
     d = $(@).parent()\r
-    trace = element_tag_id(d)\r
+    trace = editor.element_tag_id(d)\r
     f = $(trace + 'width')\r
     w = Math.floor(f.val() / 2)\r
     f.val(w)\r
@@ -578,7 +508,7 @@ $ ->
   \r
   $('.hreverse').click -> \r
     d = $(@).parent()\r
-    trace = element_tag_id(d)\r
+    trace = editor.element_tag_id(d)\r
     f = $(trace + 'height')\r
     h = -f.val()\r
     f.val(h)\r
@@ -588,7 +518,7 @@ $ ->
   \r
   $('.hdouble').click -> \r
     d = $(@).parent()\r
-    trace = element_tag_id(d)\r
+    trace = editor.element_tag_id(d)\r
     f = $(trace + 'height')\r
     h = f.val() * 2\r
     f.val(h)\r
@@ -597,7 +527,7 @@ $ ->
   \r
   $('.hhalf').click -> \r
     d = $(@).parent()\r
-    trace = element_tag_id(d)\r
+    trace = editor.element_tag_id(d)\r
     f = $(trace + 'height')\r
     h = Math.floor(f.val() / 2)\r
     f.val(h)\r
@@ -631,7 +561,7 @@ $ ->
   \r
   # disable form z t\r
   $('input').map  ->\r
-    if is_element($(@))\r
+    if editor.is_element($(@))\r
       switch $(@).attr('column')\r
         when 'z' , 't'\r
           $(@).hide()\r

diff --git a/app/assets/javascripts/pettanr_editor.js.coffee b/app/assets/javascripts/pettanr_editor.js.coffee
new file mode 100644 (file)
index 0000000..836d49b
--- /dev/null
+++ b/app/assets/javascripts/pettanr_editor.js.coffee
@@ -0,0 +1,83 @@
+class PettanrEditor\r
+  @pettanr_current_panel_id = 0\r
+  \r
+  @new_element_index = {}\r
+  @new_element_index[PettanrEditor.pettanr_current_panel_id] = 0\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
+      PettanrEditor.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
+    if p.parent().attr('editable')\r
+      return true\r
+    else\r
+      return false\r
+  @is_var = (o) ->\r
+    if parseInt(o.attr('no_attr')) > 0\r
+      return false\r
+    else\r
+      if o.attr('column') \r
+        if o.attr('column') == '_destroy' and o.val().length < 1\r
+          return false\r
+        else\r
+          return true\r
+      else\r
+        return false\r
+  @is_element = (o) ->\r
+    if o.attr('element_type')\r
+      return true\r
+    else\r
+      return false\r
+  @is_element_part = (o) ->\r
+    if o.attr('element_part_type')\r
+      return true\r
+    else\r
+      return false\r
+  @element_is = (element_type, o) ->\r
+    if PettanrEditor.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
+    PettanrEditor.element_types[element_type]\r
+  @text_align_texts = ['left', 'left', 'right', 'center']\r
+\r
+  @make_tree = (attr, o) ->\r
+    if PettanrEditor.is_var(o)\r
+      tree = 'panels-' + o.attr('panel_id') + '-'\r
+      if PettanrEditor.is_element(o)\r
+        tree = tree + PettanrEditor.element_type_to_table(o.attr('element_type')) + '_attributes-' + o.attr('element_id') + '-'\r
+        if PettanrEditor.is_element_part(o)\r
+          tree = tree + o.attr('element_part_type') + '_attributes-'\r
+      tree = tree + o.attr('column')\r
+      keys = tree.split('-')\r
+      PettanrEditor.set_tree_value(keys, attr, o.val())\r
+  \r
+  @panel_tag_id = (element) ->\r
+    '#panel' + element.attr('panel_id')\r
+  \r
+  @element_tag_id = (element) ->\r
+    '#panel' + element.attr('panel_id') + element.attr('element_type') + element.attr('element_id')\r
+  \r
+  @element_part_tag_id = (element_part) ->\r
+    '#panel' + element_part.attr('panel_id') + element_part.attr('element_type') + element_part.attr('element_id') + element_part.attr('element_part_type') + element_part.attr('element_part_id')\r
+  \r
+  @refresh_attribute = (field) ->\r
+    attr = {}\r
+    $('input').map ->\r
+      PettanrEditor.make_tree(attr, $(@))\r
+    $('textarea').map  ->\r
+      PettanrEditor.make_tree(attr, $(@))\r
+    $('select').map ->\r
+      PettanrEditor.make_tree(attr, $(@))\r
+    field.val(JSON.stringify(attr['panels'][PettanrEditor.pettanr_current_panel_id.toString() ]))\r
+  \r
+@PettanrEditor = PettanrEditor\r

diff --git a/app/assets/javascripts/writing_formats.js.coffee b/app/assets/javascripts/writing_formats.js.coffee
index 7615679..a4a3fa7 100644 (file)
--- a/app/assets/javascripts/writing_formats.js.coffee
+++ b/app/assets/javascripts/writing_formats.js.coffee
@@ -1,3 +1,16 @@
-# Place all the behaviors and hooks related to the matching controller here.
-# All this logic will automatically be available in application.js.
-# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
+class PettanrWritingFormat
+  @writing_formats = {}
+  @renderers = {}
+  
+  @load = (div) ->
+    $('div', div).map ->
+      id = parseInt($(@).attr('writing_format_id'))
+      engine_name = $(@).attr('writing_format_engine_name')
+      PettanrWritingFormat.writing_formats[id] = engine_name
+  
+  @render = (writing_format, content) -> 
+    engine_name = PettanrWritingFormat.writing_formats[1]
+    PettanrWritingFormat.renderers[engine_name].render(content)
+  
+  
+@PettanrWritingFormat = PettanrWritingFormat

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index e3ca640..061bad0 100644 (file)
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -52,6 +52,7 @@ module ApplicationHelper
   
   def panel_editor_javascript_include_tags
     WritingFormat.list().map {|wf|
+#      javascript_include_tag wf.engine_name
       javascript_include_tag wf.engine_name + "/application"
     }.join("\n")
   end

diff --git a/app/views/panels/_form.html.erb b/app/views/panels/_form.html.erb
index 1df0225..10310a8 100644 (file)
--- a/app/views/panels/_form.html.erb
+++ b/app/views/panels/_form.html.erb
@@ -1,4 +1,4 @@
-<div id="tabs">
+<div id="tabs" class="panel-editor" panel_id="<%= @panel.tag_panel_id -%>" current="1">
   <ul>
     <li><a href="#tabs-1">panel</a></li>
     <li><a href="#tabs-2">elements</a></li>
@@ -170,13 +170,9 @@
     <%= submit_tag t('panels.create_from_json'), :id => 'pettanr-panel-submit' -%>
   </div>
 <% end %>
-<script>
-<!--
-var pettanr_current_panel_id = <%= @panel.tag_panel_id -%>;
-var writing_formats = {};
-var writing_format_functions = {};
-<% WritingFormat.list().each do |wf| %>
-  writing_formats[<%= wf.id -%>] = '<%= wf.engine_name -%>';
-<% end %>
-// -->
-</script>
+<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>
+  <% end %>
+</div>

diff --git a/app/views/speech_balloons/_element.html.erb b/app/views/speech_balloons/_element.html.erb
index 7839a48..c2c52cf 100644 (file)
--- a/app/views/speech_balloons/_element.html.erb
+++ b/app/views/speech_balloons/_element.html.erb
@@ -2,7 +2,7 @@
   <img <%= raw elm.balloon.tag_attr -%> class="pettanr-balloon" src="<%= elm.balloon.system_picture.url -%>" alt="<%= elm.caption -%>">
   <div class="pettanr-comic-speech" style="top:<%= elm.speech.y -%>%; left:<%= elm.speech.x -%>%;width:<%= elm.speech.width -%>%; height:<%= elm.speech.height -%>%;">
     <div class="pettanr-comic-speech-inner" <%= raw elm.speech.tag_attr -%> style="font-size:<%= elm.speech.font_size -%>em; text-align:<%= elm.speech.text_align_text -%>; color:#<%= format("%06x", elm.speech.fore_color) -%>;">
-      <%= simple_format(elm.speech.content) -%>
+      <%= raw elm.speech.writing_format.engine_model.render(elm.speech.content) -%>
     </div>
   </div>
 </div>