app/assets/javascripts/sheets.js.coffee

   1 $ ->
   2   confirm_confirm_confirm = () ->
   3     confirm(  )
   4   editor = window.PettanrEditor
   5
   6   $('.panel-editor').map ->
   7     if $(@).attr('current') and parseInt($(@).attr('current')) > 0
   8       editor.pettanr_current_panel_id = parseInt($(@).attr('panel_id'))
   9   if editor.is_editting()
  10     $('#tabs').tabs()
  11     $('#elements-tabs').tabs()
  12     $('#new-element-tabs').tabs()
  13     $('#new-speech_balloon-tabs').tabs()
  14     $('#elements-tabs').addClass( "ui-tabs-vertical ui-helper-clearfix" )
  15     $("#elements-tabs li").removeClass("ui-corner-top")
  16     $("#elements-tabs li").addClass("ui-corner-left")
  17     $("#elements-tabs li").map ->
  18       $(@).mouseover ->
  19         switch $(@).attr('element_type')
  20           when 'speech_balloon'
  21             trace = editor.element_tag_id($(@))
  22             t = $('img', $(trace))
  23           when 'panel_picture'
  24             trace = editor.element_tag_id($(@)) + 'img'
  25             t = $(trace)
  26           else
  27             t = null
  28         if t
  29           $('.ui-resizable-handle', t.parent()).map ->
  30             $(@).css('display', 'block')
  31       $(@).mouseout ->
  32         switch $(@).attr('element_type')
  33           when 'speech_balloon'
  34             trace = editor.element_tag_id($(@))
  35             t = $('img', $(trace))
  36           when 'panel_picture'
  37             trace = editor.element_tag_id($(@)) + 'img'
  38             t = $(trace)
  39           else
  40             t = null
  41         if t
  42           $('.ui-resizable-handle', t.parent()).map ->
  43             $(@).css('display', 'none')
  44
  45     #destroy button
  46     $('.ui-icon-destroy').map ->
  47       $(@).button {
  48         icons: {
  49           primary: 'ui-icon-close',
  50           secondary: null
  51         },
  52         text: false
  53       }
  54       $(@).click ->
  55         if confirm('destroy ?')
  56           trace = editor.element_tag_id($(@))
  57           $(trace + '_destroy').val('true')
  58           panel_trace = editor.panel_tag_id($(@))
  59           update_t(panel_trace + 'tsort')
  60           update_z(panel_trace + 'zsort')
  61           # sync
  62           $(trace + 'element_tab').css('display', 'none')
  63           $(trace + 'tab_panel').css('display', 'none')
  64           $(trace + 'zsort').css('display', 'none')
  65           $(trace + 'tsort').css('display', 'none')
  66           switch $(@).attr('element_type')
  67             when 'panel_picture'
  68               trace = trace + 'div'
  69           $(trace).css('display', 'none')
  70
  71
  72     $('#pettanr-panel-submit').focusin ->
  73       editor.refresh_attribute($('#pettanr-panel-json'))
  74
  75     # panel
  76     $('.pettanr-comic-panel').map ->
  77       if editor.is_editable($(@))
  78         $(@).resizable {
  79           stop: ( event, ui ) ->
  80             trace = editor.panel_tag_id($(@))
  81             w = parseInt($(@).width())
  82             h = parseInt($(@).height())
  83             $(trace + 'width').val(w)
  84             $(trace + 'height').val(h)
  85             $('.pettanr-comic-ground-picture').map ->
  86               $(@).width(w)
  87               $(@).height(h)
  88             $('.pettanr-comic-ground-color').map ->
  89               $(@).width(w)
  90               $(@).height(h)
  91           , autoHide: true
  92         }
  93
  94     # sync view
  95     $('input').map  ->
  96       if $(@).attr('element_type')
  97       else
  98         if $(@).attr('panel_id')
  99           $(@).focusout ->
 100             switch $(@).attr('column')
 101               when 'width'
 102                 trace = editor.panel_tag_id($(@))
 103                 $(trace).width(parseInt( $(@).val()))
 104               when 'height'
 105                 trace = editor.panel_tag_id($(@))
 106                 $(trace).height(parseInt( $(@).val()))
 107               when 'border'
 108                 trace = editor.panel_tag_id($(@))
 109                 $(trace).css('border-width', parseInt($(@).val()).toString() + 'px')
 110
 111     # panel picture
 112     PictureSizeHelper.add_helper()
 113
 114     $('.pettanr-panel-picture-wrapper').map ->
 115       $(@).draggable {
 116         stop: ( event, ui ) ->
 117           trace = editor.element_tag_id($(@))
 118           img = $(trace + 'img')
 119           left = img.parent().position().left + $(@).position().left
 120           top = img.parent().position().top + $(@).position().top
 121           $(trace + 'x').val(parseInt(left))
 122           $(trace + 'y').val(parseInt(top))
 123       }
 124
 125     $('.panel-picture').map ->
 126       $(@).resizable {
 127         stop: ( event, ui ) ->
 128           resize_div = $(@)
 129           panel_picture_div = resize_div.parent()
 130           trace = editor.element_tag_id(panel_picture_div)
 131
 132           resize_div.css('top', '0px')
 133           resize_div.css('left', '0px')
 134           if ui.originalPosition.top != ui.position.top
 135             t = panel_picture_div.position().top + ui.position.top
 136             $(trace + 'y').val(Math.floor(t))
 137             panel_picture_div.css('top', t.toString() + 'px')
 138           if ui.originalPosition.left != ui.position.left
 139             l = panel_picture_div.position().left + ui.position.left
 140             $(trace + 'x').val(Math.floor(l))
 141             panel_picture_div.css('left', l.toString() + 'px')
 142           w = if $(trace + 'width').val() < 0
 143             -ui.size.width
 144           else
 145             ui.size.width
 146           h = if $(trace + 'height').val() < 0
 147             -ui.size.height
 148           else
 149             ui.size.height
 150           $(trace + 'width').val(w)
 151           $(trace + 'height').val(h)
 152         resize: ( event, ui ) ->
 153           resize_div = $(@)
 154           panel_picture_div = resize_div.parent()
 155           trace = editor.element_tag_id(panel_picture_div)
 156         handles: 'all',
 157         autoHide: true
 158       }
 159
 160     # sync view
 161     $('input').map  ->
 162       if editor.element_is('panel_picture', $(@))
 163         $(@).focusout ->
 164           switch $(@).attr('column')
 165             when 'x'
 166               trace = editor.element_tag_id($(@)) + 'div'
 167               v = parseInt($(@).val()).toString() + 'px'
 168               $(trace).css('left', v)
 169             when 'y'
 170               trace = editor.element_tag_id($(@)) + 'div'
 171               v = parseInt($(@).val()).toString() + 'px'
 172               $(trace).css('top', v)
 173             when 'width'
 174               trace = editor.element_tag_id($(@)) + 'img'
 175               w = parseInt($(@).val())
 176               $(trace).width(Math.abs(w))
 177               $(trace).parent().width(Math.abs(w))
 178               h = parseInt($(editor.element_tag_id($(@)) + 'height').val())
 179             when 'height'
 180               trace = editor.element_tag_id($(@)) + 'img'
 181               h = parseInt($(@).val())
 182               $(trace).height(Math.abs(h))
 183               $(trace).parent().height(Math.abs(h))
 184               w = parseInt($(editor.element_tag_id($(@)) + 'width').val())
 185             else
 186           PictureSizeHelper.refresh_picture($(trace), w, h)
 187       else
 188
 189     # speech_balloons
 190     ColorHelper.add_helper($('.speech-fore_color-wrap'), 'fore_color')
 191
 192     $('.pettanr-comic-balloon' ).map ->
 193       $(@).draggable {
 194         stop: ( event, ui ) ->
 195           balloon = $('.pettanr-balloon', $(@))
 196           trace = editor.element_part_tag_id(balloon)
 197           left = $(@).position().left
 198           top = $(@).position().top
 199           $(trace + 'x').val(parseInt(left))
 200           $(trace + 'y').val(parseInt(top))
 201       }
 202
 203     $('.pettanr-balloon' ).map ->
 204       $(@).resizable {
 205         stop: ( event, ui ) ->
 206           resize_div = $(@)
 207           speech_balloon_div = resize_div.parent()
 208           balloon = $('.pettanr-balloon', $(@))
 209           trace = editor.element_tag_id(speech_balloon_div)
 210           trace_balloon = editor.element_part_tag_id(balloon)
 211
 212           resize_div.css('top', '0px')
 213           resize_div.css('left', '0px')
 214           w = ui.size.width
 215           h = ui.size.height
 216           if ui.originalPosition.top != ui.position.top
 217             t = speech_balloon_div.position().top + ui.position.top
 218             $(trace_balloon + 'y').val(Math.floor(t))
 219             speech_balloon_div.css('top', t.toString() + 'px')
 220             speech_balloon_div.css('height', h + 'px')
 221           if ui.originalPosition.left != ui.position.left
 222             l = speech_balloon_div.position().left + ui.position.left
 223             $(trace_balloon + 'x').val(Math.floor(l))
 224             speech_balloon_div.css('left', l.toString() + 'px')
 225             speech_balloon_div.css('width', w + 'px')
 226           $(trace_balloon + 'width').val(w)
 227           $(trace_balloon + 'height').val(h)
 228           speech_balloon_div.css('width', w.toString() + 'px')
 229           speech_balloon_div.css('height', h.toString() + 'px')
 230        resize: ( event, ui ) ->
 231           resize_div = $(@)
 232           speech_balloon_div = resize_div.parent()
 233           balloon = $('.pettanr-balloon', $(@))
 234           trace = editor.element_tag_id(speech_balloon_div)
 235           trace_balloon = editor.element_part_tag_id(balloon)
 236         handles: 'all',
 237         autoHide: true
 238       }
 239
 240     $('.pettanr-comic-speech-inner' ).map ->
 241       $(@).mouseover ->
 242         outer = $(@).parent()
 243         sb = outer.parent()
 244         trace = editor.element_tag_id(sb)
 245         img = $('.pettanr-balloon', $(trace))
 246         $('.ui-resizable-handle', img.parent()).map ->
 247           $(@).css('display', 'block')
 248       $(@).mouseout ->
 249         outer = $(@).parent()
 250         sb = outer.parent()
 251         trace = editor.element_tag_id(sb)
 252         img = $('.pettanr-balloon', $(trace))
 253         $('.ui-resizable-handle', img.parent()).map ->
 254           $(@).css('display', 'none')
 255
 256
 257     # sync view
 258     $('input').map  ->
 259       if editor.element_is('speech_balloon', $(@))
 260         $(@).focusout ->
 261           switch $(@).attr('column')
 262             when 'x'
 263               trace = editor.element_tag_id($(@))
 264               v = parseInt($(@).val()).toString() + 'px'
 265               $(trace).css('left', v)
 266             when 'y'
 267               trace = editor.element_tag_id($(@))
 268               v = parseInt($(@).val()).toString() + 'px'
 269               $(trace).css('top', v)
 270             when 'width'
 271               trace = editor.element_tag_id($(@))
 272               v = parseInt($(@).val())
 273               $(trace).width(Math.abs(v))
 274               img = $('.pettanr-balloon', $(trace))
 275               img.parent().width(v)
 276               img.width(v)
 277             when 'height'
 278               trace = editor.element_tag_id($(@))
 279               v = parseInt($(@).val())
 280               $(trace).height(Math.abs(v))
 281               img = $('.pettanr-balloon', $(trace))
 282               img.parent().height(v)
 283               img.height(v)
 284             else
 285       else
 286     $('textarea').map  ->
 287       if editor.element_is('speech_balloon', $(@))
 288         $(@).focusout ->
 289           switch $(@).attr('column')
 290             when 'content'
 291               trace = editor.element_part_tag_id($(@))
 292               wf_sel = $(trace + 'writing_format_id')
 293               wf_id = parseInt(wf_sel.val())
 294               v = WritingFormat.render(wf_id, $(@).val())
 295               $(trace).html(v)
 296     $('textarea').map  ->
 297       if editor.element_is('speech_balloon', $(@))
 298         switch $(@).attr('column')
 299           when 'content'
 300             $(@).bind('textchange', (event, previousText) ->
 301               trace = editor.element_part_tag_id($(@))
 302               wf_sel = $(trace + 'writing_format_id')
 303               wf_id = parseInt(wf_sel.val())
 304               v = WritingFormat.render(wf_id, $(@).val())
 305               $(trace).html(v)
 306             )
 307     $('select').map  ->
 308       if editor.element_is('speech_balloon', $(@))
 309         $(@).change ->
 310           switch $(@).attr('column')
 311             when 'font_size'
 312               trace = editor.element_part_tag_id($(@))
 313               $(trace).css('font-size', $(@).val() + 'em')
 314             when 'text_align'
 315               trace = editor.element_part_tag_id($(@))
 316               v = parseInt($(@).val())
 317               $(trace).css('text-align', editor.text_align_texts[v])
 318       else
 319     $('input').map  ->
 320       if editor.element_is('speech_balloon', $(@))
 321         if $(@).attr('column') == 'fore_color'
 322           $(@).hide()
 323
 324
 325     # ground-picture
 326     # sync view
 327     $('input').map  ->
 328       if editor.element_is('ground_picture', $(@))
 329         $(@).focusout ->
 330           switch $(@).attr('column')
 331             when 'x', 'y'
 332               trace = editor.element_tag_id($(@))
 333               x = parseInt($(trace + 'x').val()).toString() + 'px'
 334               y = parseInt($(trace + 'y').val()).toString() + 'px'
 335               $(trace).css('background-position', x + ' ' + y)
 336     $('select').map  ->
 337       if editor.element_is('ground_picture', $(@))
 338         $(@).change ->
 339           switch $(@).attr('column')
 340             when 'repeat'
 341               trace = editor.element_tag_id($(@))
 342               v = parseInt($(@).val())
 343               $(trace).css('background-repeat', editor.repeat_texts[v])
 344       else
 345
 346
 347     # ground_color
 348     ColorHelper.add_helper($('.ground_color-code-wrap'), 'code')
 349
 350     # sync view
 351     $('input').map  ->
 352       if editor.element_is('ground_color', $(@))
 353         if $(@).attr('column') == 'code'
 354           $(@).hide()
 355
 356     update_t = (ultrace) ->
 357       t = 0
 358       $(ultrace + ' li').map ->
 359         trace = editor.element_tag_id($(@))
 360         if $(trace + '_destroy').val().length < 1
 361           $(trace + 't').val(t)
 362           t++
 363         else
 364
 365     $('.tsort').map ->
 366       $(@).sortable {
 367         update: ( event, ui ) ->
 368           trace = editor.panel_tag_id($(@))
 369           update_t(trace + 'tsort')
 370       }
 371     $('.t-sort li').map ->
 372       $(@).disableSelection()
 373
 374     update_z = (ultrace) ->
 375       z = 1
 376       $(ultrace + ' li').map ->
 377         trace = editor.element_tag_id($(@))
 378         # update panel
 379         if $(trace + '_destroy').val().length < 1
 380           $(trace + 'z').val(z)
 381           switch $(@).attr('element_type')
 382             when 'panel_picture'
 383               trace = trace + 'div'
 384           $(trace).css('zIndex', z)
 385           z++
 386         else
 387
 388     $('.zsort').map ->
 389       $(@).sortable {
 390         update: ( event, ui ) ->
 391           trace = editor.panel_tag_id($(@))
 392           update_z(trace + 'zsort')
 393       }
 394     $('.z-sort li').map ->
 395       $(@).disableSelection()
 396
 397     # all
 398     # disable form actions
 399     # hide submit buttons
 400     $('.edit_panel_picture' ).map ->
 401       $(@).submit ->
 402         false
 403     $('.edit_speech_balloon' ).map ->
 404       $(@).submit ->
 405         false
 406     $('.edit_ground_picture' ).map ->
 407       $(@).submit ->
 408         false
 409     $('.edit_ground_color' ).map ->
 410       $(@).submit ->
 411         false
 412
 413     $('.edit_panel' ).map ->
 414       if $(@).attr('jqform')
 415       else
 416         $(@).submit ->
 417           false
 418
 419     $('.submit' ).map ->
 420       $(@).hide()
 421
 422     # disable form z t
 423     $('input').map  ->
 424       if editor.is_element($(@))
 425         switch $(@).attr('column')
 426           when 'z' , 't'
 427             $(@).hide()
 428             $(@).parent().hide() #label
 429
 430     # add button on new form
 431     $('.submit-new-form').map ->
 432       $(@).html('<button class="new-element">add</button>')
 433
 434     $('.new-element').map ->
 435       $(@).click ->
 436         false
 437