t#31949:lib writing_format

diff --cc app/assets/javascripts/application.js
index be9a8ce,602015a..02486b1
--- 1/app/assets/javascripts/application.js
--- 2/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@@ -7,4 -7,6 +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 --cc app/assets/javascripts/panels.js.coffee
index 70933de,cd3bb24..43ae19d
--- 1/app/assets/javascripts/panels.js.coffee
--- 2/app/assets/javascripts/panels.js.coffee
+++ b/app/assets/javascripts/panels.js.coffee
@@@ -1,85 -1,11 +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
@@@ -192,35 -122,9 +124,34 @@@
    $('.panel-picture').map ->\r
      $(@).resizable {\r
        stop: ( event, ui ) ->\r
 -        trace = editor.element_tag_id($(@).parent())\r
 -        $(trace + 'width').val($(@).width())\r
 -        $(trace + 'height').val($(@).height())\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
 +        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 = element_tag_id(panel_picture_div)\r
-         \r
++        trace = editor.element_tag_id(panel_picture_div)\r
        handles: 'all',\r
        autoHide: true\r
      }\r
@@@ -272,8 -176,8 +203,8 @@@
    $('.pettanr-comic-balloon' ).map ->\r
      $(@).draggable {\r
        stop: ( event, ui ) ->\r
 -        img = $('.pettanr-balloon', $(@))\r
 -        trace = editor.element_part_tag_id(img)\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
@@@ -283,37 -187,15 +214,36 @@@
    $('.pettanr-balloon' ).map ->\r
      $(@).resizable {\r
        stop: ( event, ui ) ->\r
 -        img = $('.pettanr-balloon', $(@))\r
 -        trace = editor.element_part_tag_id(img)\r
 -        $(trace + 'width').val($(@).width())\r
 -        $(trace + 'height').val($(@).height())\r
 +        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
 +        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
 -        img = $('.pettanr-balloon', $(@))\r
 -        sb = editor.element_tag_id(img)\r
 -        $(sb).width($(@).width())\r
 -        $(sb).height($(@).height())\r
 +        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
@@@ -369,24 -250,24 +299,24 @@@
        $(@).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
@@@ -631,7 -512,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 --cc app/assets/javascripts/writing_formats.js.coffee
index 7615679,7615679..a4a3fa7
--- 1/app/assets/javascripts/writing_formats.js.coffee
--- 2/app/assets/javascripts/writing_formats.js.coffee
+++ b/app/assets/javascripts/writing_formats.js.coffee
@@@ -1,3 -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 --cc app/helpers/application_helper.rb
index e3ca640,e3ca640..061bad0
--- 1/app/helpers/application_helper.rb
--- 2/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@@ -52,6 -52,6 +52,7 @@@ module ApplicationHelpe
    
    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 --cc app/views/panels/_form.html.erb
index 1df0225,311e836..10310a8
--- 1/app/views/panels/_form.html.erb
--- 2/app/views/panels/_form.html.erb
+++ b/app/views/panels/_form.html.erb
@@@ -170,13 -170,12 +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 --cc app/views/speech_balloons/_element.html.erb
index 7839a48,7839a48..c2c52cf
--- 1/app/views/speech_balloons/_element.html.erb
--- 2/app/views/speech_balloons/_element.html.erb
+++ b/app/views/speech_balloons/_element.html.erb
@@@ -2,7 -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>