app/assets/javascripts/panels.js.coffee

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