X-Git-Url: http://git.osdn.net/view?a=blobdiff_plain;f=app%2Fassets%2Fjavascripts%2Fpanels.js.coffee;h=b992c73875205a0e5385d9ab916136e15d9ec417;hb=0efd57972385910d4295b3b3683872ab61e3a013;hp=327914edda3061c52fbead64f4a293b4dd590b19;hpb=592aa19184c67289e0a9d11143f50e7b90f2c3cb;p=pettanr%2Fpettanr.git

diff --git a/app/assets/javascripts/panels.js.coffee b/app/assets/javascripts/panels.js.coffee
index 327914ed..b992c738 100644
--- a/app/assets/javascripts/panels.js.coffee
+++ b/app/assets/javascripts/panels.js.coffee
@@ -1,33 +1,108 @@
 $ ->
+  confirm_confirm_confirm = () ->
+    confirm(  )
+
+  set_tree_value = (keys, last_attr, value) ->
+    key = keys.shift()
+    if keys.length <= 0
+      last_attr[key] = value
+    else
+      last_attr[key] = last_attr[key] || {}
+      set_tree_value(keys, last_attr[key], value)
+
+  repeat_texts = ['repeat', 'repeat-x', 'repeat-y', 'no-repeat']
+  
+  is_editable = (p) ->
+    if p.parent().attr('editable')
+      return true
+    else
+      return false
+  is_tree = (o) ->
+    if o.attr('tree') 
+      if o.attr('column') == '_destroy' and o.val().length < 1
+        return false
+      else
+        return true
+      return true
+    else
+      return false
+  
+  panel_tag_id = (element) ->
+    '#panel' + element.attr('panel_id')
+  
   element_tag_id = (element) ->
     '#panel' + element.attr('panel_id') + element.attr('element_type') + element.attr('element_id')
   
   refresh_attribute = () ->
     attr = {}
     $('input').map ->
-      if $(@).attr('tree') 
+      if is_tree($(@)) 
+        keys = $(@).attr('tree').split('-')
+        set_tree_value(keys, attr, $(this).val())
+    $('textarea').map  ->
+      if is_tree($(@)) 
         keys = $(@).attr('tree').split('-')
         set_tree_value(keys, attr, $(this).val())
     $('select').map ->
-      if $(@).attr('tree') 
+      if is_tree($(@)) 
         keys = $(@).attr('tree').split('-')
         set_tree_value(keys, attr, $(this).val())
     $('#pettanr-panel-json').val(JSON.stringify(attr['panels'][pettanr_current_panel_id.toString() ]))
   
   $('#tabs').tabs()
   $('#elements-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")
+  
+  #destroy button
+  $('.ui-icon-destroy').map ->
+    $(@).button {
+      icons: {
+        primary: 'ui-icon-close', 
+        secondary: null
+      }, 
+      text: false
+    }
+    $(@).click -> 
+      if confirm('destroy ?')
+        trace = element_tag_id($(@))
+        $(trace + '_destroy').val('true')
+        panel_trace = 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 ->
     refresh_attribute()
   
   # panel
   $('.pettanr-comic-panel').map ->
-    $(@).resizable {
-      stop: ( event, ui ) ->
-        trace = '#panel' + $(@).attr('panel_id')
-        $(trace + 'width').val($(@).width())
-        $(trace + 'height').val($(@).height())
-    }
+    if is_editable($(@))
+      $(@).resizable {
+        stop: ( event, ui ) ->
+          trace = 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)
+          
+      }
   # sync view 
   $('#panel' + pettanr_current_panel_id.toString() +  'width').focusout ->
     trace = '#panel' + $(@).attr('panel_id')
@@ -50,8 +125,8 @@ $ ->
         img = '#panel' + $(@).attr('panel_id') + 'panel_picture' + $(@).attr('element_id') + 'img'
         left = $(img).parent().position().left + $(@).position().left
         top = $(img ).parent().position().top + $(@).position().top
-        $(trace + 'x').val(left)
-        $(trace + 'y').val(top)
+        $(trace + 'x').val(parseInt(left))
+        $(trace + 'y').val(parseInt(top))
     }
   
   $('.panel-picture').map ->
@@ -63,36 +138,47 @@ $ ->
       handles: 'all'
     }
   
+  refresh_picture = (e, w, h)  ->
+    if w and h
+      sd = ''
+      if h < 0
+        sd += 'v'
+      if w < 0
+        sd += 'h'
+      if sd.length > 0
+        sd += '/'
+      pid = parseInt(e.attr('picture_id')).toString()
+      ext = e.attr('ext')
+      src = '/pictures/' + sd + pid + '.' + ext
+      e.attr('src', src)
+  
   # sync view 
   $('input').map  ->
     if $(@).attr('element_type') and $(@).attr('element_type') == 'panel_picture'
       $(@).focusout ->
         switch $(@).attr('column')
+          when 'x'
+            trace = element_tag_id($(@)) + 'div'
+            v = parseInt($(@).val()).toString() + 'px'
+            $(trace).css('left', v)
+          when 'y'
+            trace = element_tag_id($(@)) + 'div'
+            v = parseInt($(@).val()).toString() + 'px'
+            $(trace).css('top', v)
           when 'width'
             trace = element_tag_id($(@)) + 'img'
-            v = parseInt($(@).val())
-            $(trace).width(Math.abs(v))
-            sd = if v < 0
-              'v/'
-            else
-              ''
-            pid = parseInt($(trace).attr('picture_id')).toString()
-            ext = $(trace).attr('ext')
-            src = '/pictures/' + sd + pid + '.' + ext
-            $(trace).attr('src', src)
+            w = parseInt($(@).val())
+            $(trace).width(Math.abs(w))
+            $(trace).parent().width(Math.abs(w))
+            h = parseInt($(element_tag_id($(@)) + 'height').val())
           when 'height'
             trace = element_tag_id($(@)) + 'img'
-            v = parseInt($(@).val())
-            $(trace).height(Math.abs(v))
-            sd = if v < 0
-              'h/'
-            else
-              ''
-            pid = parseInt($(trace).attr('picture_id')).toString()
-            ext = $(trace).attr('ext')
-            src = '/pictures/' + sd + pid + '.' + ext
-            $(trace).attr('src', src)
+            h = parseInt($(@).val())
+            $(trace).height(Math.abs(h))
+            $(trace).parent().height(Math.abs(h))
+            w = parseInt($(element_tag_id($(@)) + 'width').val())
           else
+        refresh_picture($(trace), w, h)
     else
   
   # speech_balloons
@@ -102,8 +188,8 @@ $ ->
         trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'balloon' + $(@).attr('balloon_id')
         left = $(@).position().left
         top = $(@).position().top
-        $(trace + 'x').val(left)
-        $(trace + 'y').val(top)
+        $(trace + 'x').val(parseInt(left))
+        $(trace + 'y').val(parseInt(top))
     }
 
   
@@ -121,46 +207,227 @@ $ ->
     }
   
   # sync view 
-  $('#t-sortable tbody').sortable {
+  $('input').map  ->
+    if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'
+      $(@).focusout ->
+        switch $(@).attr('column')
+          when 'x'
+            trace = element_tag_id($(@))
+            v = parseInt($(@).val()).toString() + 'px'
+            $(trace).css('left', v)
+          when 'y'
+            trace = element_tag_id($(@))
+            v = parseInt($(@).val()).toString() + 'px'
+            $(trace).css('top', v)
+          when 'width'
+            trace = element_tag_id($(@))
+            v = parseInt($(@).val())
+            $(trace).width(Math.abs(v))
+            trace = '#panel' + $(trace).attr('panel_id') + 'speech_balloon' + $(trace).attr('element_id') + 'balloon' + $(trace).attr('balloon_id')
+            $(trace).parent().width(v)
+            $(trace).width(v)
+          when 'height'
+            trace = element_tag_id($(@))
+            v = parseInt($(@).val())
+            $(trace).height(Math.abs(v))
+            trace = '#panel' + $(trace).attr('panel_id') + 'speech_balloon' + $(trace).attr('element_id') + 'balloon' + $(trace).attr('balloon_id')
+            $(trace).parent().height(v)
+            $(trace).height(v)
+          else
+    else
+  $('textarea').map  ->
+    if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'
+      $(@).focusout ->
+        switch $(@).attr('column')
+          when 'content'
+            trace = element_tag_id($(@))
+            speech_trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'speech' + $(@).attr('element_part_id')
+            v = $(@).val()
+            $(speech_trace).html(v)
+  
+  # ground-picture
+  # sync view 
+  $('input').map  ->
+    if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_picture'
+      $(@).focusout ->
+        switch $(@).attr('column')
+          when 'x', 'y'
+            trace = element_tag_id($(@))
+            x = parseInt($(@).val()).toString() + 'px'
+            ytrace = '#panel' + $(@).attr('panel_id') + 'ground_picture' + $(@).attr('element_id') + 'y'
+            y = parseInt($(ytrace).val()).toString() + 'px'
+            $(trace).css('background-position', y + ' ' + x)
+  $('select').map  ->
+    if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_picture'
+      $(@).change ->
+        switch $(@).attr('column')
+          when 'repeat'
+            trace = element_tag_id($(@))
+            v = parseInt($(@).val())
+            $(trace).css('background-repeat', repeat_texts[v])
+    else
+  
+  
+  # ground_color
+  # sync view 
+  $('input').map  ->
+    if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_color' and $(@).attr('column') == 'code'
+      $(@).hide()
+
+  color_slider_change = (trace) -> 
+    red = $(trace + 'code_red').slider('value')
+    green = $(trace + 'code_green').slider('value')
+    blue = $(trace + 'code_blue').slider('value')
+    code = (red << 16) + (green << 8) + (blue)
+    phex = "000000" + code.toString(16)
+    hex = code.toString(16)
+    h = phex.substring(phex.length - 6)
+    $(trace + 'code_swatch').css('background-color', '#' + h)
+    $(trace + 'code_hex').html('HEX: #' + h)
+    $(trace + 'code_rgb').html('RGB: (' + red + ',' + green + ',' +blue + ')')
+    $(trace + 'code').val(code)
+    v = '#' + h
+    $(trace).css('background-color', v)
+  
+  $('.colorpicker').map -> 
+    code_picker_trace = element_tag_id($(@))
+    code = parseInt($(code_picker_trace + 'code').val())
+    red = (code >> 16) & 0xFF
+    green = (code >> 8) & 0xFF
+    blue = code & 0xFF
+    $(code_picker_trace + 'code_red').slider {
+      orientation: 'horizontal',
+      range: 'min',
+      max: 255,
+      value: red,
+      change: ( event, ui ) ->
+        trace = element_tag_id($(@).parent())
+        color_slider_change(trace)
+    }
+    $(code_picker_trace + 'code_green').slider {
+      orientation: 'horizontal',
+      range: 'min',
+      max: 255,
+      value: green,
+      change: ( event, ui ) ->
+        trace = element_tag_id($(@).parent())
+        color_slider_change(trace)
+    }
+    $(code_picker_trace + 'code_blue').slider {
+      orientation: 'horizontal',
+      range: 'min',
+      max: 255,
+      value: blue,
+      change: ( event, ui ) ->
+        trace = element_tag_id($(@).parent())
+        color_slider_change(trace)
+    }
+    color_slider_change(code_picker_trace)
+  $('.colorpicker-wrap').map -> 
+    $(@).css('display', 'block')
+  
+  update_t = (ultrace) -> 
+    t = 0
+    $(ultrace + ' li').map ->
+      trace = element_tag_id($(@))
+      if $(trace + '_destroy').val().length < 1
+        $(trace + 't').val(t)
+        t++
+      else
+  
+  $('.tsort').map -> 
+    $(@).sortable {
       update: ( event, ui ) ->
-        t = 0;
-        $('#t-sortable tr').map ->
-          pid = $(@).attr('panel_id')
-          eid = $(@).attr('element_id')
-          etp = $(@).attr('element_type')
-          tid = '#panel' + pid + etp + eid
-          # update input
-          trace = tid + 't'
-          $(trace).val(t)
-          t++
-  }
-  $('#t-sortable tbody').disableSelection()
-  
-  $('#z-sortable tbody').sortable {
+        trace = panel_tag_id($(@))
+        update_t(trace + 'tsort')
+    }
+  $('.t-sort li').map -> 
+    $(@).disableSelection()
+  
+  update_z = (ultrace) -> 
+    z = 1
+    $(ultrace + ' li').map ->
+      trace = 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 ) ->
-        z = 1;
-        $('#z-sortable tr').map ->
-          pid = $(@).attr('panel_id')
-          eid = $(@).attr('element_id')
-          etp = $(@).attr('element_type')
-          tid = '#panel' + pid + etp + eid
-          # update input
-          trace = tid + 'z'
-          $(trace).val(z)
-          # update panel
-          switch etp
-            when 'panel_picture'
-              trace = tid + 'div'
-            when 'speech_balloon'
-              trace = tid
-            when 'ground_picture'
-              trace = tid
-            when 'ground_color'
-              trace = tid
-          $(trace).css('zIndex', z)
-          z++
-  }
-  $('#t-sortable tbody').disableSelection()
+        trace = panel_tag_id($(@))
+        update_z(trace + 'zsort')
+    }
+  $('.z-sort li').map -> 
+    $(@).disableSelection()
+  
+  $('.panel_picture_width_tool').map ->
+    $(@).html('<button class="wreverse">Rev</button><button class="wdouble">x2</button><button class="whalf">/2</button>')
+  
+  $('.wreverse').click -> 
+    d = $(@).parent()
+    trace = element_tag_id(d)
+    f = $(trace + 'width')
+    w = -f.val()
+    f.val(w)
+    f = $(trace + 'height')
+    h = f.val()
+    refresh_picture($(trace + 'img'), w, h)
+  
+  $('.wdouble').click -> 
+    d = $(@).parent()
+    trace = element_tag_id(d)
+    f = $(trace + 'width')
+    w = f.val() * 2
+    f.val(w)
+    $(trace + 'img').width(Math.abs(w))
+    $(trace + 'img').parent().width(Math.abs(w))
+  
+  $('.whalf').click -> 
+    d = $(@).parent()
+    trace = element_tag_id(d)
+    f = $(trace + 'width')
+    w = f.val() / 2
+    f.val(w)
+    $(trace + 'img').width(Math.abs(w))
+    $(trace + 'img').parent().width(Math.abs(w))
+  
+  $('.panel_picture_height_tool').map ->
+    $(@).html('<button class="hreverse">Rev</button><button class="hdouble">x2</button><button class="hhalf">/2</button>')
+  
+  $('.hreverse').click -> 
+    d = $(@).parent()
+    trace = element_tag_id(d)
+    f = $(trace + 'height')
+    h = -f.val()
+    f.val(h)
+    f = $(trace + 'width')
+    w = f.val()
+    refresh_picture($(trace + 'img'), w, h)
+  
+  $('.hdouble').click -> 
+    d = $(@).parent()
+    trace = element_tag_id(d)
+    f = $(trace + 'height')
+    h = f.val() * 2
+    f.val(h)
+    $(trace + 'img').height(Math.abs(h))
+    $(trace + 'img').parent().height(Math.abs(h))
+  
+  $('.hhalf').click -> 
+    d = $(@).parent()
+    trace = element_tag_id(d)
+    f = $(trace + 'height')
+    h = f.val() / 2
+    f.val(h)
+    $(trace + 'img').height(Math.abs(h))
+    $(trace + 'img').parent().height(Math.abs(h))
   
   # all
   # disable form actions
@@ -168,6 +435,15 @@ $ ->
   $('.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')
@@ -178,4 +454,11 @@ $ ->
   $('.submit' ).map ->
     $(@).hide()
   
+  # disable form z t
+  $('input').map  ->
+    if $(@).attr('element_type') and $(@).attr('column')
+      switch $(@).attr('column')
+        when 'z' , 't'
+          $(@).hide()
+          $(@).parent().hide() #label