OSDN Git Service

t#31652:Speech br
[pettanr/pettanr.git] / app / assets / javascripts / panels.js.coffee
index 327914e..10e38fd 100644 (file)
@@ -1,4 +1,15 @@
 $ ->\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
+  \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
@@ -8,6 +19,10 @@ $ ->
       if $(@).attr('tree') \r
         keys = $(@).attr('tree').split('-')\r
         set_tree_value(keys, attr, $(this).val())\r
+    $('textarea').map  ->\r
+      if $(@).attr('tree') \r
+        keys = $(@).attr('tree').split('-')\r
+        set_tree_value(keys, attr, $(this).val())\r
     $('select').map ->\r
       if $(@).attr('tree') \r
         keys = $(@).attr('tree').split('-')\r
@@ -22,12 +37,22 @@ $ ->
   \r
   # panel\r
   $('.pettanr-comic-panel').map ->\r
-    $(@).resizable {\r
-      stop: ( event, ui ) ->\r
-        trace = '#panel' + $(@).attr('panel_id')\r
-        $(trace + 'width').val($(@).width())\r
-        $(trace + 'height').val($(@).height())\r
-    }\r
+    if is_editable($(@))\r
+      $(@).resizable {\r
+        stop: ( event, ui ) ->\r
+          trace = 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
+          \r
+      }\r
   # sync view \r
   $('#panel' + pettanr_current_panel_id.toString() +  'width').focusout ->\r
     trace = '#panel' + $(@).attr('panel_id')\r
@@ -63,36 +88,47 @@ $ ->
       handles: 'all'\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 $(@).attr('element_type') and $(@).attr('element_type') == 'panel_picture'\r
       $(@).focusout ->\r
         switch $(@).attr('column')\r
+          when 'x'\r
+            trace = 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
+            v = parseInt($(@).val()).toString() + 'px'\r
+            $(trace).css('top', v)\r
           when 'width'\r
             trace = element_tag_id($(@)) + 'img'\r
-            v = parseInt($(@).val())\r
-            $(trace).width(Math.abs(v))\r
-            sd = if v < 0\r
-              'v/'\r
-            else\r
-              ''\r
-            pid = parseInt($(trace).attr('picture_id')).toString()\r
-            ext = $(trace).attr('ext')\r
-            src = '/pictures/' + sd + pid + '.' + ext\r
-            $(trace).attr('src', src)\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
           when 'height'\r
             trace = element_tag_id($(@)) + 'img'\r
-            v = parseInt($(@).val())\r
-            $(trace).height(Math.abs(v))\r
-            sd = if v < 0\r
-              'h/'\r
-            else\r
-              ''\r
-            pid = parseInt($(trace).attr('picture_id')).toString()\r
-            ext = $(trace).attr('ext')\r
-            src = '/pictures/' + sd + pid + '.' + ext\r
-            $(trace).attr('src', src)\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
           else\r
+        refresh_picture($(trace), w, h)\r
     else\r
   \r
   # speech_balloons\r
@@ -121,10 +157,116 @@ $ ->
     }\r
   \r
   # sync view \r
-  $('#t-sortable tbody').sortable {\r
+  $('input').map  ->\r
+    if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'\r
+      $(@).focusout ->\r
+        switch $(@).attr('column')\r
+          when 'x'\r
+            trace = element_tag_id($(@))\r
+            v = parseInt($(@).val()).toString() + 'px'\r
+            $(trace).css('left', v)\r
+          when 'y'\r
+            trace = element_tag_id($(@))\r
+            v = parseInt($(@).val()).toString() + 'px'\r
+            $(trace).css('top', v)\r
+          when 'width'\r
+            trace = element_tag_id($(@))\r
+            v = parseInt($(@).val())\r
+            $(trace).width(Math.abs(v))\r
+            trace = '#panel' + $(trace).attr('panel_id') + 'speech_balloon' + $(trace).attr('element_id') + 'balloon' + $(trace).attr('balloon_id')\r
+            $(trace).parent().width(v)\r
+            $(trace).width(v)\r
+          when 'height'\r
+            trace = element_tag_id($(@))\r
+            v = parseInt($(@).val())\r
+            $(trace).height(Math.abs(v))\r
+            trace = '#panel' + $(trace).attr('panel_id') + 'speech_balloon' + $(trace).attr('element_id') + 'balloon' + $(trace).attr('balloon_id')\r
+            $(trace).parent().height(v)\r
+            $(trace).height(v)\r
+          else\r
+    else\r
+  $('textarea').map  ->\r
+    if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'\r
+      $(@).focusout ->\r
+        switch $(@).attr('column')\r
+          when 'content'\r
+            trace = element_tag_id($(@))\r
+            speech_trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'speech' + $(@).attr('element_part_id')\r
+            v = $(@).val()\r
+            $(speech_trace).html(v)\r
+  \r
+  # ground-picture\r
+  # sync view \r
+  $('input').map  ->\r
+    if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_picture'\r
+      $(@).focusout ->\r
+        switch $(@).attr('column')\r
+          when 'x', 'y'\r
+            trace = element_tag_id($(@))\r
+            x = parseInt($(@).val()).toString() + 'px'\r
+            ytrace = '#panel' + $(@).attr('panel_id') + 'ground_picture' + $(@).attr('element_id') + 'y'\r
+            y = parseInt($(ytrace).val()).toString() + 'px'\r
+            $(trace).css('background-position', y + ' ' + x)\r
+  $('select').map  ->\r
+    if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_picture'\r
+      $(@).change ->\r
+        switch $(@).attr('column')\r
+          when 'repeat'\r
+            trace = 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 $(@).attr('element_type') and $(@).attr('element_type') == 'ground_color' and $(@).attr('column') == 'code'\r
+      $(@).hide()\r
+\r
+  $('#colorpicker-red, #colorpicker-green, #colorpicker-blue').map -> \r
+    trace = element_tag_id($(@).parent())\r
+    $(@).slider {\r
+      orientation: 'horizontal',\r
+      range: 'min',\r
+      max: 255,\r
+      value: 127,\r
+      change: ( event, ui ) ->\r
+        red = $('#colorpicker-red').slider('value')\r
+        green = $('#colorpicker-green').slider('value')\r
+        blue = $('#colorpicker-blue').slider('value')\r
+        code = (red << 16) + (green << 8) + (blue)\r
+        phex = "000000" + code.toString(16)\r
+        hex = code.toString(16)\r
+        h = phex.substring(phex.length - 6)\r
+        $('#colorpicker-swatch').css('background-color', '#' + h)\r
+        $('#colorpicker-hex').html('HEX: #' + h)\r
+        $('#colorpicker-rgb').html('RGB: (' + red + ',' + green + ',' +blue + ')')\r
+        $(trace + 'code').val(code)\r
+        v = '#' + h\r
+        $(trace).css('background-color', v)\r
+    }\r
+\r
+  $('.colorpicker').map -> \r
+    trace = element_tag_id($(@))\r
+    code = parseInt($(trace + 'code').val())\r
+    $('.colorpicker-red').map -> \r
+      v = (code >> 16) & 0xFF\r
+      $(@).slider('value', v)\r
+    $('.colorpicker-green').map -> \r
+      v = (code >> 8) & 0xFF\r
+      $(@).slider('value', v)\r
+    $('.colorpicker-blue').map -> \r
+      v = code & 0xFF\r
+      $(@).slider('value', v)\r
+  \r
+  $('.tsort').map -> \r
+    $(@).sortable {\r
       update: ( event, ui ) ->\r
-        t = 0;\r
-        $('#t-sortable tr').map ->\r
+        trace = panel_tag_id($(@))\r
+        ul = $(@).attr('id')\r
+        t = 0\r
+        $('#' + ul + ' li').map ->\r
           pid = $(@).attr('panel_id')\r
           eid = $(@).attr('element_id')\r
           etp = $(@).attr('element_type')\r
@@ -133,7 +275,7 @@ $ ->
           trace = tid + 't'\r
           $(trace).val(t)\r
           t++\r
-  }\r
+    }\r
   $('#t-sortable tbody').disableSelection()\r
   \r
   $('#z-sortable tbody').sortable {\r
@@ -162,12 +304,83 @@ $ ->
   }\r
   $('#t-sortable tbody').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 = 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 = 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 = 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
+  $('.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 = 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 = 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 = 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
   # 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
@@ -178,4 +391,11 @@ $ ->
   $('.submit' ).map ->\r
     $(@).hide()\r
   \r
+  # disable form z t\r
+  $('input').map  ->\r
+    if $(@).attr('element_type') and $(@).attr('column')\r
+      switch $(@).attr('column')\r
+        when 'z' , 't'\r
+          $(@).hide()\r
+          $(@).parent().hide() #label\r
   \r