OSDN Git Service

t#32046:add sheet
[pettanr/pettanr.git] / app / assets / javascripts / sheets.js.coffee
index 7615679..634a64f 100644 (file)
@@ -1,3 +1,437 @@
-# 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/
+$ ->
+  confirm_confirm_confirm = () ->
+    confirm(  )
+  editor = window.PettanrEditor
+  
+  $('.panel-editor').map ->
+    if $(@).attr('current') and parseInt($(@).attr('current')) > 0
+      editor.pettanr_current_panel_id = parseInt($(@).attr('panel_id'))
+  if editor.is_editting()
+    $('#tabs').tabs()
+    $('#elements-tabs').tabs()
+    $('#new-element-tabs').tabs()
+    $('#new-speech_balloon-tabs').tabs()
+    $('#elements-tabs').addClass( "ui-tabs-vertical ui-helper-clearfix" )
+    $("#elements-tabs li").removeClass("ui-corner-top")
+    $("#elements-tabs li").addClass("ui-corner-left")
+    $("#elements-tabs li").map ->
+      $(@).mouseover -> 
+        switch $(@).attr('element_type')
+          when 'speech_balloon'
+            trace = editor.element_tag_id($(@)) 
+            t = $('img', $(trace))
+          when 'panel_picture'
+            trace = editor.element_tag_id($(@)) + 'img'
+            t = $(trace)
+          else
+            t = null
+        if t
+          $('.ui-resizable-handle', t.parent()).map ->
+            $(@).css('display', 'block')
+      $(@).mouseout -> 
+        switch $(@).attr('element_type')
+          when 'speech_balloon'
+            trace = editor.element_tag_id($(@)) 
+            t = $('img', $(trace))
+          when 'panel_picture'
+            trace = editor.element_tag_id($(@)) + 'img'
+            t = $(trace)
+          else
+            t = null
+        if t
+          $('.ui-resizable-handle', t.parent()).map ->
+            $(@).css('display', 'none')
+    
+    #destroy button
+    $('.ui-icon-destroy').map ->
+      $(@).button {
+        icons: {
+          primary: 'ui-icon-close', 
+          secondary: null
+        }, 
+        text: false
+      }
+      $(@).click -> 
+        if confirm('destroy ?')
+          trace = editor.element_tag_id($(@))
+          $(trace + '_destroy').val('true')
+          panel_trace = editor.panel_tag_id($(@))
+          update_t(panel_trace + 'tsort')
+          update_z(panel_trace + 'zsort')
+          # sync
+          $(trace + 'element_tab').css('display', 'none')
+          $(trace + 'tab_panel').css('display', 'none')
+          $(trace + 'zsort').css('display', 'none')
+          $(trace + 'tsort').css('display', 'none')
+          switch $(@).attr('element_type')
+            when 'panel_picture'
+              trace = trace + 'div'
+          $(trace).css('display', 'none')
+          
+    
+    $('#pettanr-panel-submit').focusin ->
+      editor.refresh_attribute($('#pettanr-panel-json'))
+    
+    # panel
+    $('.pettanr-comic-panel').map ->
+      if editor.is_editable($(@))
+        $(@).resizable {
+          stop: ( event, ui ) ->
+            trace = editor.panel_tag_id($(@))
+            w = parseInt($(@).width())
+            h = parseInt($(@).height())
+            $(trace + 'width').val(w)
+            $(trace + 'height').val(h)
+            $('.pettanr-comic-ground-picture').map ->
+              $(@).width(w)
+              $(@).height(h)
+            $('.pettanr-comic-ground-color').map ->
+              $(@).width(w)
+              $(@).height(h)
+          , autoHide: true
+        }
+    
+    # sync view 
+    $('input').map  ->
+      if $(@).attr('element_type')
+      else
+        if $(@).attr('panel_id')
+          $(@).focusout ->
+            switch $(@).attr('column')
+              when 'width'
+                trace = editor.panel_tag_id($(@))
+                $(trace).width(parseInt( $(@).val()))
+              when 'height'
+                trace = editor.panel_tag_id($(@))
+                $(trace).height(parseInt( $(@).val()))
+              when 'border'
+                trace = editor.panel_tag_id($(@))
+                $(trace).css('border-width', parseInt($(@).val()).toString() + 'px')
+    
+    # panel picture
+    PictureSizeHelper.add_helper()
+    
+    $('.pettanr-panel-picture-wrapper').map ->
+      $(@).draggable {
+        stop: ( event, ui ) ->
+          trace = editor.element_tag_id($(@))
+          img = $(trace + 'img')
+          left = img.parent().position().left + $(@).position().left
+          top = img.parent().position().top + $(@).position().top
+          $(trace + 'x').val(parseInt(left))
+          $(trace + 'y').val(parseInt(top))
+      }
+    
+    $('.panel-picture').map ->
+      $(@).resizable {
+        stop: ( event, ui ) ->
+          resize_div = $(@)
+          panel_picture_div = resize_div.parent()
+          trace = editor.element_tag_id(panel_picture_div)
+          
+          resize_div.css('top', '0px')
+          resize_div.css('left', '0px')
+          if ui.originalPosition.top != ui.position.top
+            t = panel_picture_div.position().top + ui.position.top
+            $(trace + 'y').val(Math.floor(t))
+            panel_picture_div.css('top', t.toString() + 'px')
+          if ui.originalPosition.left != ui.position.left
+            l = panel_picture_div.position().left + ui.position.left
+            $(trace + 'x').val(Math.floor(l))
+            panel_picture_div.css('left', l.toString() + 'px')
+          w = if $(trace + 'width').val() < 0
+            -ui.size.width
+          else
+            ui.size.width
+          h = if $(trace + 'height').val() < 0
+            -ui.size.height
+          else
+            ui.size.height
+          $(trace + 'width').val(w)
+          $(trace + 'height').val(h)
+        resize: ( event, ui ) ->
+          resize_div = $(@)
+          panel_picture_div = resize_div.parent()
+          trace = editor.element_tag_id(panel_picture_div)
+        handles: 'all',
+        autoHide: true
+      }
+    
+    # sync view 
+    $('input').map  ->
+      if editor.element_is('panel_picture', $(@))
+        $(@).focusout ->
+          switch $(@).attr('column')
+            when 'x'
+              trace = editor.element_tag_id($(@)) + 'div'
+              v = parseInt($(@).val()).toString() + 'px'
+              $(trace).css('left', v)
+            when 'y'
+              trace = editor.element_tag_id($(@)) + 'div'
+              v = parseInt($(@).val()).toString() + 'px'
+              $(trace).css('top', v)
+            when 'width'
+              trace = editor.element_tag_id($(@)) + 'img'
+              w = parseInt($(@).val())
+              $(trace).width(Math.abs(w))
+              $(trace).parent().width(Math.abs(w))
+              h = parseInt($(editor.element_tag_id($(@)) + 'height').val())
+            when 'height'
+              trace = editor.element_tag_id($(@)) + 'img'
+              h = parseInt($(@).val())
+              $(trace).height(Math.abs(h))
+              $(trace).parent().height(Math.abs(h))
+              w = parseInt($(editor.element_tag_id($(@)) + 'width').val())
+            else
+          PictureSizeHelper.refresh_picture($(trace), w, h)
+      else
+    
+    # speech_balloons
+    ColorHelper.add_helper($('.speech-fore_color-wrap'), 'fore_color')
+    
+    $('.pettanr-comic-balloon' ).map ->
+      $(@).draggable {
+        stop: ( event, ui ) ->
+          balloon = $('.pettanr-balloon', $(@))
+          trace = editor.element_part_tag_id(balloon)
+          left = $(@).position().left
+          top = $(@).position().top
+          $(trace + 'x').val(parseInt(left))
+          $(trace + 'y').val(parseInt(top))
+      }
+    
+    $('.pettanr-balloon' ).map ->
+      $(@).resizable {
+        stop: ( event, ui ) ->
+          resize_div = $(@)
+          speech_balloon_div = resize_div.parent()
+          balloon = $('.pettanr-balloon', $(@))
+          trace = editor.element_tag_id(speech_balloon_div)
+          trace_balloon = editor.element_part_tag_id(balloon)
+          
+          resize_div.css('top', '0px')
+          resize_div.css('left', '0px')
+          w = ui.size.width
+          h = ui.size.height
+          if ui.originalPosition.top != ui.position.top
+            t = speech_balloon_div.position().top + ui.position.top
+            $(trace_balloon + 'y').val(Math.floor(t))
+            speech_balloon_div.css('top', t.toString() + 'px')
+            speech_balloon_div.css('height', h + 'px')
+          if ui.originalPosition.left != ui.position.left
+            l = speech_balloon_div.position().left + ui.position.left
+            $(trace_balloon + 'x').val(Math.floor(l))
+            speech_balloon_div.css('left', l.toString() + 'px')
+            speech_balloon_div.css('width', w + 'px')
+          $(trace_balloon + 'width').val(w)
+          $(trace_balloon + 'height').val(h)
+          speech_balloon_div.css('width', w.toString() + 'px')
+          speech_balloon_div.css('height', h.toString() + 'px')
+       resize: ( event, ui ) ->
+          resize_div = $(@)
+          speech_balloon_div = resize_div.parent()
+          balloon = $('.pettanr-balloon', $(@))
+          trace = editor.element_tag_id(speech_balloon_div)
+          trace_balloon = editor.element_part_tag_id(balloon)
+        handles: 'all',
+        autoHide: true
+      }
+    
+    $('.pettanr-comic-speech-inner' ).map ->
+      $(@).mouseover -> 
+        outer = $(@).parent()
+        sb = outer.parent()
+        trace = editor.element_tag_id(sb)
+        img = $('.pettanr-balloon', $(trace))
+        $('.ui-resizable-handle', img.parent()).map ->
+          $(@).css('display', 'block')
+      $(@).mouseout -> 
+        outer = $(@).parent()
+        sb = outer.parent()
+        trace = editor.element_tag_id(sb)
+        img = $('.pettanr-balloon', $(trace))
+        $('.ui-resizable-handle', img.parent()).map ->
+          $(@).css('display', 'none')
+          
+    
+    # sync view 
+    $('input').map  ->
+      if editor.element_is('speech_balloon', $(@))
+        $(@).focusout ->
+          switch $(@).attr('column')
+            when 'x'
+              trace = editor.element_tag_id($(@))
+              v = parseInt($(@).val()).toString() + 'px'
+              $(trace).css('left', v)
+            when 'y'
+              trace = editor.element_tag_id($(@))
+              v = parseInt($(@).val()).toString() + 'px'
+              $(trace).css('top', v)
+            when 'width'
+              trace = editor.element_tag_id($(@))
+              v = parseInt($(@).val())
+              $(trace).width(Math.abs(v))
+              img = $('.pettanr-balloon', $(trace))
+              img.parent().width(v)
+              img.width(v)
+            when 'height'
+              trace = editor.element_tag_id($(@))
+              v = parseInt($(@).val())
+              $(trace).height(Math.abs(v))
+              img = $('.pettanr-balloon', $(trace))
+              img.parent().height(v)
+              img.height(v)
+            else
+      else
+    $('textarea').map  ->
+      if editor.element_is('speech_balloon', $(@))
+        $(@).focusout ->
+          switch $(@).attr('column')
+            when 'content'
+              trace = editor.element_part_tag_id($(@))
+              wf_sel = $(trace + 'writing_format_id')
+              wf_id = parseInt(wf_sel.val())
+              v = WritingFormat.render(wf_id, $(@).val())
+              $(trace).html(v)
+    $('textarea').map  ->
+      if editor.element_is('speech_balloon', $(@))
+        switch $(@).attr('column')
+          when 'content'
+            $(@).bind('textchange', (event, previousText) ->
+              trace = editor.element_part_tag_id($(@))
+              wf_sel = $(trace + 'writing_format_id')
+              wf_id = parseInt(wf_sel.val())
+              v = WritingFormat.render(wf_id, $(@).val())
+              $(trace).html(v)
+            )
+    $('select').map  ->
+      if editor.element_is('speech_balloon', $(@))
+        $(@).change ->
+          switch $(@).attr('column')
+            when 'font_size'
+              trace = editor.element_part_tag_id($(@))
+              $(trace).css('font-size', $(@).val() + 'em')
+            when 'text_align'
+              trace = editor.element_part_tag_id($(@))
+              v = parseInt($(@).val())
+              $(trace).css('text-align', editor.text_align_texts[v])
+      else
+    $('input').map  ->
+      if editor.element_is('speech_balloon', $(@))
+        if $(@).attr('column') == 'fore_color'
+          $(@).hide()
+
+    
+    # ground-picture
+    # sync view 
+    $('input').map  ->
+      if editor.element_is('ground_picture', $(@))
+        $(@).focusout ->
+          switch $(@).attr('column')
+            when 'x', 'y'
+              trace = editor.element_tag_id($(@))
+              x = parseInt($(trace + 'x').val()).toString() + 'px'
+              y = parseInt($(trace + 'y').val()).toString() + 'px'
+              $(trace).css('background-position', x + ' ' + y)
+    $('select').map  ->
+      if editor.element_is('ground_picture', $(@))
+        $(@).change ->
+          switch $(@).attr('column')
+            when 'repeat'
+              trace = editor.element_tag_id($(@))
+              v = parseInt($(@).val())
+              $(trace).css('background-repeat', editor.repeat_texts[v])
+      else
+    
+    
+    # ground_color
+    ColorHelper.add_helper($('.ground_color-code-wrap'), 'code')
+    
+    # sync view 
+    $('input').map  ->
+      if editor.element_is('ground_color', $(@))
+        if $(@).attr('column') == 'code'
+          $(@).hide()
+
+    update_t = (ultrace) -> 
+      t = 0
+      $(ultrace + ' li').map ->
+        trace = editor.element_tag_id($(@))
+        if $(trace + '_destroy').val().length < 1
+          $(trace + 't').val(t)
+          t++
+        else
+    
+    $('.tsort').map -> 
+      $(@).sortable {
+        update: ( event, ui ) ->
+          trace = editor.panel_tag_id($(@))
+          update_t(trace + 'tsort')
+      }
+    $('.t-sort li').map -> 
+      $(@).disableSelection()
+    
+    update_z = (ultrace) -> 
+      z = 1
+      $(ultrace + ' li').map ->
+        trace = editor.element_tag_id($(@))
+        # update panel
+        if $(trace + '_destroy').val().length < 1
+          $(trace + 'z').val(z)
+          switch $(@).attr('element_type')
+            when 'panel_picture'
+              trace = trace + 'div'
+          $(trace).css('zIndex', z)
+          z++
+        else
+    
+    $('.zsort').map -> 
+      $(@).sortable {
+        update: ( event, ui ) ->
+          trace = editor.panel_tag_id($(@))
+          update_z(trace + 'zsort')
+      }
+    $('.z-sort li').map -> 
+      $(@).disableSelection()
+    
+    # all
+    # disable form actions
+    # hide submit buttons
+    $('.edit_panel_picture' ).map ->
+      $(@).submit ->
+        false
+    $('.edit_speech_balloon' ).map ->
+      $(@).submit ->
+        false
+    $('.edit_ground_picture' ).map ->
+      $(@).submit ->
+        false
+    $('.edit_ground_color' ).map ->
+      $(@).submit ->
+        false
+    
+    $('.edit_panel' ).map ->
+      if $(@).attr('jqform')
+      else
+        $(@).submit ->
+          false
+    
+    $('.submit' ).map ->
+      $(@).hide()
+    
+    # disable form z t
+    $('input').map  ->
+      if editor.is_element($(@))
+        switch $(@).attr('column')
+          when 'z' , 't'
+            $(@).hide()
+            $(@).parent().hide() #label
+    
+    # add button on new form
+    $('.submit-new-form').map ->
+      $(@).html('<button class="new-element">add</button>')
+    
+    $('.new-element').map ->
+      $(@).click -> 
+        false
+