app/assets/javascripts/panels.js.coffee

   1 $ ->\r
   2   confirm_confirm_confirm = () ->\r
   3     confirm(  )\r
   4   editor = window.PettanrEditor\r
   5   configurations =  window.configurations\r
   6   WritingFormat = window.PettanrWritingFormat\r
   7   WritingFormat.load($('#writing_formats'))\r
   8   SpeechBalloonTemplate = window.PettanrSpeechBalloonTemplate\r
   9   SpeechBalloonTemplate.load($('#speech_balloon_templates'))\r
  10   for n, v of SpeechBalloonTemplate.scripts\r
  11     v.onLoad()\r
  12     v.add_helper( n, '' )\r
  13   PictureSizeHelper = window.PettanrPictureSizeHelper\r
  14   ColorHelper = window.PettanrColorHelper\r
  15   \r
  16   find_configurations = ( hash, key) ->\r
  17     if typeof(hash[key]) == 'string'\r
  18       find_configurations(hash, hash[key])\r
  19     else\r
  20       return hash[key]\r
  21   \r
  22   set_validates = (form) ->\r
  23     rules = {}\r
  24     $('input', form).map ->\r
  25       model_name = $(@).attr('data-model')\r
  26       column_name = $(@).attr('column')\r
  27       name = $(@).attr('name')\r
  28       if model_name and column_name\r
  29         model = find_configurations(configurations['models'], model_name)\r
  30         rule = model['attributes'][column_name]['rules']\r
  31         trace = editor.element_tag_id($(@)) \r
  32         if rule\r
  33           rules[name] = rule\r
  34           $(@).focusout ->\r
  35             if editor.is_panel(form)\r
  36               validate_panel(form)\r
  37             else\r
  38               validate_element(form)\r
  39     if Object.keys(rules).length > 0\r
  40       v = form.validate({ignore:[],rules: rules})\r
  41   \r
  42   validate_panel = (form) ->\r
  43     valid = form.valid()\r
  44     bc = if valid\r
  45       ''\r
  46     else\r
  47       '#ef29ef'\r
  48     $('a', $('#tabs-1-tab')).map ->\r
  49       $(@).css('background-color', bc)\r
  50     valid\r
  51   \r
  52   display_element = (element, vis) ->\r
  53     v = if vis\r
  54       ''\r
  55     else\r
  56       'none'\r
  57     trace = editor.element_tag_id(element)\r
  58     switch element.attr('element_type')\r
  59       when 'panel_picture'\r
  60         trace = trace + 'div'\r
  61     $(trace).css('display', v)\r
  62   \r
  63   validate_element = (form) ->\r
  64     valid = form.valid()\r
  65     bc = if valid\r
  66       ''\r
  67     else\r
  68       '#ef29ef'\r
  69     display_element(form, valid)\r
  70     trace = editor.element_tag_id(form) \r
  71     $('.elements-tab', $(trace + 'element_tab')).map  ->\r
  72       $(@).css('background-color', bc)\r
  73     valid\r
  74   \r
  75   validate_forms = () ->\r
  76     valid = true\r
  77     $('form', $('#tabs-1')).map  ->\r
  78       form_name = $(@).attr('data-form-name')\r
  79       if form_name\r
  80         if validate_panel($(@))\r
  81         else\r
  82           valid = false\r
  83     invalid_elements = []\r
  84     $('form', $('#tabs-2')).map  ->\r
  85       form_name = $(@).attr('data-form-name')\r
  86       if form_name\r
  87         if validate_element($(@))\r
  88         else\r
  89           valid = false\r
  90           invalid_elements.push form_name\r
  91     if invalid_elements.length > 0\r
  92       bc = '#ef29ef'\r
  93     else\r
  94       bc = ''\r
  95     $('a', $('#tabs-2-tab')).map ->\r
  96       $(@).css('background-color', bc)\r
  97     return valid\r
  98   $('form').map  ->\r
  99     form_name = $(@).attr('data-form-name')\r
 100     if form_name\r
 101       form = $(this)\r
 102       set_validates(form)\r
 103   $('.panel-editor').map ->\r
 104     if $(@).attr('current') and parseInt($(@).attr('current')) > 0\r
 105       editor.pettanr_current_panel_id = parseInt($(@).attr('panel_id'))\r
 106   if editor.is_editting()\r
 107     $('#tabs').tabs()\r
 108     $('#elements-tabs').tabs()\r
 109     $('#new-element-tabs').tabs()\r
 110     $('#new-speech_balloon-tabs').tabs()\r
 111     $('#elements-tabs').addClass( "ui-tabs-vertical ui-helper-clearfix" )\r
 112     $("#elements-tabs li").removeClass("ui-corner-top")\r
 113     $("#elements-tabs li").addClass("ui-corner-left")\r
 114     $("#elements-tabs li").map ->\r
 115       $(@).mouseover -> \r
 116         switch $(@).attr('element_type')\r
 117           when 'speech_balloon'\r
 118             trace = editor.element_tag_id($(@)) \r
 119             t = $('img', $(trace))\r
 120           when 'panel_picture'\r
 121             trace = editor.element_tag_id($(@)) + 'img'\r
 122             t = $(trace)\r
 123           else\r
 124             t = null\r
 125         if t\r
 126           $('.ui-resizable-handle', t.parent()).map ->\r
 127             $(@).css('display', 'block')\r
 128       $(@).mouseout -> \r
 129         switch $(@).attr('element_type')\r
 130           when 'speech_balloon'\r
 131             trace = editor.element_tag_id($(@)) \r
 132             t = $('img', $(trace))\r
 133           when 'panel_picture'\r
 134             trace = editor.element_tag_id($(@)) + 'img'\r
 135             t = $(trace)\r
 136           else\r
 137             t = null\r
 138         if t\r
 139           $('.ui-resizable-handle', t.parent()).map ->\r
 140             $(@).css('display', 'none')\r
 141     \r
 142     #destroy button\r
 143     $('.ui-icon-destroy').map ->\r
 144       $(@).button {\r
 145         icons: {\r
 146           primary: 'ui-icon-close', \r
 147           secondary: null\r
 148         }, \r
 149         text: false\r
 150       }\r
 151       $(@).click -> \r
 152         if confirm('destroy ?')\r
 153           trace = editor.element_tag_id($(@))\r
 154           $(trace + '_destroy').val('true')\r
 155           panel_trace = editor.panel_tag_id($(@))\r
 156           update_t(panel_trace + 'tsort')\r
 157           update_z(panel_trace + 'zsort')\r
 158           # sync\r
 159           $(trace + 'element_tab').css('display', 'none')\r
 160           $(trace + 'tab_panel').css('display', 'none')\r
 161           $(trace + 'zsort').css('display', 'none')\r
 162           $(trace + 'tsort').css('display', 'none')\r
 163           display_element($(@), false)\r
 164     \r
 165     $('#pettanr-panel-submit').focusin ->\r
 166       editor.refresh_attribute($('#pettanr-panel-json'))\r
 167     \r
 168     # panel\r
 169     $('.pettanr-comic-panel').map ->\r
 170       if editor.is_editable($(@))\r
 171         $(@).resizable {\r
 172           stop: ( event, ui ) ->\r
 173             trace = editor.panel_tag_id($(@))\r
 174             w = parseInt($(@).width())\r
 175             h = parseInt($(@).height())\r
 176             $(trace + 'width').val(w)\r
 177             $(trace + 'height').val(h)\r
 178             $('.pettanr-comic-ground-picture').map ->\r
 179               $(@).width(w)\r
 180               $(@).height(h)\r
 181             $('.pettanr-comic-ground-color').map ->\r
 182               $(@).width(w)\r
 183               $(@).height(h)\r
 184           , autoHide: true\r
 185         }\r
 186     \r
 187     # sync view \r
 188     $('input').map  ->\r
 189       if $(@).attr('element_type')\r
 190       else\r
 191         if $(@).attr('panel_id')\r
 192           $(@).focusout ->\r
 193             switch $(@).attr('column')\r
 194               when 'width'\r
 195                 trace = editor.panel_tag_id($(@))\r
 196                 $(trace).width(parseInt( $(@).val()))\r
 197               when 'height'\r
 198                 trace = editor.panel_tag_id($(@))\r
 199                 $(trace).height(parseInt( $(@).val()))\r
 200               when 'border'\r
 201                 trace = editor.panel_tag_id($(@))\r
 202                 $(trace).css('border-width', parseInt($(@).val()).toString() + 'px')\r
 203     \r
 204     # panel picture\r
 205     PictureSizeHelper.add_helper()\r
 206     \r
 207     $('.pettanr-panel-picture-wrapper').map ->\r
 208       $(@).draggable {\r
 209         stop: ( event, ui ) ->\r
 210           trace = editor.element_tag_id($(@))\r
 211           img = $(trace + 'img')\r
 212           left = img.parent().position().left + $(@).position().left\r
 213           top = img.parent().position().top + $(@).position().top\r
 214           $(trace + 'x').val(parseInt(left))\r
 215           $(trace + 'y').val(parseInt(top))\r
 216       }\r
 217     \r
 218     $('.panel-picture').map ->\r
 219       $(@).resizable {\r
 220         stop: ( event, ui ) ->\r
 221           resize_div = $(@)\r
 222           panel_picture_div = resize_div.parent()\r
 223           trace = editor.element_tag_id(panel_picture_div)\r
 224           \r
 225           resize_div.css('top', '0px')\r
 226           resize_div.css('left', '0px')\r
 227           if ui.originalPosition.top != ui.position.top\r
 228             t = panel_picture_div.position().top + ui.position.top\r
 229             $(trace + 'y').val(Math.floor(t))\r
 230             panel_picture_div.css('top', t.toString() + 'px')\r
 231           if ui.originalPosition.left != ui.position.left\r
 232             l = panel_picture_div.position().left + ui.position.left\r
 233             $(trace + 'x').val(Math.floor(l))\r
 234             panel_picture_div.css('left', l.toString() + 'px')\r
 235           w = if $(trace + 'width').val() < 0\r
 236             -ui.size.width\r
 237           else\r
 238             ui.size.width\r
 239           h = if $(trace + 'height').val() < 0\r
 240             -ui.size.height\r
 241           else\r
 242             ui.size.height\r
 243           $(trace + 'width').val(w)\r
 244           $(trace + 'height').val(h)\r
 245         resize: ( event, ui ) ->\r
 246           resize_div = $(@)\r
 247           panel_picture_div = resize_div.parent()\r
 248           trace = editor.element_tag_id(panel_picture_div)\r
 249         handles: 'all',\r
 250         autoHide: true\r
 251       }\r
 252     \r
 253     # sync view \r
 254     $('input').map  ->\r
 255       if editor.element_is('panel_picture', $(@))\r
 256         $(@).focusout ->\r
 257           switch $(@).attr('column')\r
 258             when 'x'\r
 259               trace = editor.element_tag_id($(@)) + 'div'\r
 260               v = parseInt($(@).val()).toString() + 'px'\r
 261               $(trace).css('left', v)\r
 262             when 'y'\r
 263               trace = editor.element_tag_id($(@)) + 'div'\r
 264               v = parseInt($(@).val()).toString() + 'px'\r
 265               $(trace).css('top', v)\r
 266             when 'width'\r
 267               trace = editor.element_tag_id($(@)) + 'img'\r
 268               w = parseInt($(@).val())\r
 269               $(trace).width(Math.abs(w))\r
 270               $(trace).parent().width(Math.abs(w))\r
 271               h = parseInt($(editor.element_tag_id($(@)) + 'height').val())\r
 272             when 'height'\r
 273               trace = editor.element_tag_id($(@)) + 'img'\r
 274               h = parseInt($(@).val())\r
 275               $(trace).height(Math.abs(h))\r
 276               $(trace).parent().height(Math.abs(h))\r
 277               w = parseInt($(editor.element_tag_id($(@)) + 'width').val())\r
 278             else\r
 279           PictureSizeHelper.refresh_picture($(trace), w, h)\r
 280       else\r
 281     \r
 282     # speech_balloons\r
 283     ColorHelper.add_helper($('.speech-fore_color-wrap'), 'fore_color')\r
 284     \r
 285     $('.pettanr-comic-balloon' ).map ->\r
 286       $(@).draggable {\r
 287         stop: ( event, ui ) ->\r
 288           balloon = $('.pettanr-balloon', $(@))\r
 289           trace = editor.element_part_tag_id(balloon)\r
 290           left = $(@).position().left\r
 291           top = $(@).position().top\r
 292           $(trace + 'x').val(parseInt(left))\r
 293           $(trace + 'y').val(parseInt(top))\r
 294       }\r
 295     \r
 296     $('.pettanr-balloon' ).map ->\r
 297       $(@).resizable {\r
 298         stop: ( event, ui ) ->\r
 299           resize_div = $(@)\r
 300           speech_balloon_div = resize_div.parent()\r
 301           balloon = $('.pettanr-balloon', $(@))\r
 302           trace = editor.element_tag_id(speech_balloon_div)\r
 303           trace_balloon = editor.element_part_tag_id(balloon)\r
 304           \r
 305           resize_div.css('top', '0px')\r
 306           resize_div.css('left', '0px')\r
 307           w = ui.size.width\r
 308           h = ui.size.height\r
 309           if ui.originalPosition.top != ui.position.top\r
 310             t = speech_balloon_div.position().top + ui.position.top\r
 311             $(trace_balloon + 'y').val(Math.floor(t))\r
 312             speech_balloon_div.css('top', t.toString() + 'px')\r
 313             speech_balloon_div.css('height', h + 'px')\r
 314           if ui.originalPosition.left != ui.position.left\r
 315             l = speech_balloon_div.position().left + ui.position.left\r
 316             $(trace_balloon + 'x').val(Math.floor(l))\r
 317             speech_balloon_div.css('left', l.toString() + 'px')\r
 318             speech_balloon_div.css('width', w + 'px')\r
 319           $(trace_balloon + 'width').val(w)\r
 320           $(trace_balloon + 'height').val(h)\r
 321           speech_balloon_div.css('width', w.toString() + 'px')\r
 322           speech_balloon_div.css('height', h.toString() + 'px')\r
 323        resize: ( event, ui ) ->\r
 324           resize_div = $(@)\r
 325           speech_balloon_div = resize_div.parent()\r
 326           balloon = $('.pettanr-balloon', $(@))\r
 327           trace = editor.element_tag_id(speech_balloon_div)\r
 328           trace_balloon = editor.element_part_tag_id(balloon)\r
 329         handles: 'all',\r
 330         autoHide: true\r
 331       }\r
 332     \r
 333     $('.pettanr-comic-speech-inner' ).map ->\r
 334       $(@).mouseover -> \r
 335         outer = $(@).parent()\r
 336         sb = outer.parent()\r
 337         trace = editor.element_tag_id(sb)\r
 338         img = $('.pettanr-balloon', $(trace))\r
 339         $('.ui-resizable-handle', img.parent()).map ->\r
 340           $(@).css('display', 'block')\r
 341       $(@).mouseout -> \r
 342         outer = $(@).parent()\r
 343         sb = outer.parent()\r
 344         trace = editor.element_tag_id(sb)\r
 345         img = $('.pettanr-balloon', $(trace))\r
 346         $('.ui-resizable-handle', img.parent()).map ->\r
 347           $(@).css('display', 'none')\r
 348           \r
 349     \r
 350     # sync view \r
 351     $('input').map  ->\r
 352       if editor.element_is('speech_balloon', $(@))\r
 353         $(@).focusout ->\r
 354           switch $(@).attr('column')\r
 355             when 'x'\r
 356               trace = editor.element_tag_id($(@))\r
 357               v = parseInt($(@).val()).toString() + 'px'\r
 358               $(trace).css('left', v)\r
 359             when 'y'\r
 360               trace = editor.element_tag_id($(@))\r
 361               v = parseInt($(@).val()).toString() + 'px'\r
 362               $(trace).css('top', v)\r
 363             when 'width'\r
 364               trace = editor.element_tag_id($(@))\r
 365               v = parseInt($(@).val())\r
 366               $(trace).width(Math.abs(v))\r
 367               img = $('.pettanr-balloon', $(trace))\r
 368               img.parent().width(v)\r
 369               img.width(v)\r
 370             when 'height'\r
 371               trace = editor.element_tag_id($(@))\r
 372               v = parseInt($(@).val())\r
 373               $(trace).height(Math.abs(v))\r
 374               img = $('.pettanr-balloon', $(trace))\r
 375               img.parent().height(v)\r
 376               img.height(v)\r
 377             else\r
 378       else\r
 379     $('textarea').map  ->\r
 380       if editor.element_is('speech_balloon', $(@))\r
 381         $(@).focusout ->\r
 382           switch $(@).attr('column')\r
 383             when 'content'\r
 384               trace = editor.element_part_tag_id($(@))\r
 385               wf_sel = $(trace + 'writing_format_id')\r
 386               wf_id = parseInt(wf_sel.val())\r
 387               v = WritingFormat.render(wf_id, $(@).val())\r
 388               $(trace).html(v)\r
 389     $('textarea').map  ->\r
 390       if editor.element_is('speech_balloon', $(@))\r
 391         switch $(@).attr('column')\r
 392           when 'content'\r
 393             $(@).bind('textchange', (event, previousText) ->\r
 394               trace = editor.element_part_tag_id($(@))\r
 395               wf_sel = $(trace + 'writing_format_id')\r
 396               wf_id = parseInt(wf_sel.val())\r
 397               v = WritingFormat.render(wf_id, $(@).val())\r
 398               $(trace).html(v)\r
 399             )\r
 400     $('select').map  ->\r
 401       if editor.element_is('speech_balloon', $(@))\r
 402         $(@).change ->\r
 403           switch $(@).attr('column')\r
 404             when 'font_size'\r
 405               trace = editor.element_part_tag_id($(@))\r
 406               $(trace).css('font-size', $(@).val() + 'em')\r
 407             when 'text_align'\r
 408               trace = editor.element_part_tag_id($(@))\r
 409               v = parseInt($(@).val())\r
 410               $(trace).css('text-align', editor.text_align_texts[v])\r
 411       else\r
 412     $('input').map  ->\r
 413       if editor.element_is('speech_balloon', $(@))\r
 414         if $(@).attr('column') == 'fore_color'\r
 415           $(@).hide()\r
 416 \r
 417     \r
 418     # ground-picture\r
 419     refresh_ground_picture = (element_trace)  ->\r
 420       x = parseInt($(element_trace + 'x').val()).toString() + 'px'\r
 421       y = parseInt($(element_trace + 'y').val()).toString() + 'px'\r
 422       $(element_trace).css('background-position', x + ' ' + y)\r
 423     \r
 424     # sync view \r
 425     $('input').map  ->\r
 426       if editor.element_is('ground_picture', $(@))\r
 427         switch $(@).attr('column')\r
 428           when 'x', 'y'\r
 429             $(@).focusout ->\r
 430               trace = editor.element_tag_id($(@))\r
 431               refresh_ground_picture(trace)\r
 432             $(@).spinner {\r
 433               stop: ( event, ui ) ->\r
 434                 trace = editor.element_tag_id($(@))\r
 435                 refresh_ground_picture(trace)\r
 436             }\r
 437     $('select').map  ->\r
 438       if editor.element_is('ground_picture', $(@))\r
 439         $(@).change ->\r
 440           switch $(@).attr('column')\r
 441             when 'repeat'\r
 442               trace = editor.element_tag_id($(@))\r
 443               v = parseInt($(@).val())\r
 444               $(trace).css('background-repeat', editor.repeat_texts[v])\r
 445       else\r
 446     \r
 447     \r
 448     # ground_color\r
 449     ColorHelper.add_helper($('.ground_color-code-wrap'), 'code')\r
 450     \r
 451     refresh_ground_color = (element_trace)  ->\r
 452       orientation = parseInt( $(element_trace + 'orientation').val() )\r
 453       xy = $(element_trace + 'xy').val()\r
 454       wh = $(element_trace + 'wh').val()\r
 455       div_offset = if xy\r
 456         xy\r
 457       else\r
 458         0\r
 459       div_size = if wh\r
 460         wh\r
 461       else\r
 462         100 - div_offset\r
 463       div_x = if orientation == 0\r
 464         0\r
 465       else\r
 466         div_offset\r
 467       div_y = if orientation == 0\r
 468         div_offset\r
 469       else\r
 470         0\r
 471       div_width = if orientation == 0\r
 472         100\r
 473       else\r
 474         div_size\r
 475       div_height = if orientation == 0\r
 476         div_size\r
 477       else\r
 478         100\r
 479       div = $(element_trace)\r
 480       div.css('left', div_x.toString() + '%')\r
 481       div.css('top', div_y.toString() + '%')\r
 482       div.css('width', div_width.toString() + '%')\r
 483       div.css('height', div_height.toString() + '%')\r
 484     \r
 485     # sync view \r
 486     $('input').map  ->\r
 487       if editor.element_is('ground_color', $(@))\r
 488         switch $(@).attr('column')\r
 489           when 'code'\r
 490             $(@).hide()\r
 491           when 'xy', 'wh'\r
 492             $(@).spinner {\r
 493               stop: ( event, ui ) ->\r
 494                 trace = editor.element_tag_id($(@))\r
 495                 refresh_ground_color(trace)\r
 496               , min: 0\r
 497               , max: 100\r
 498             }\r
 499             $(@).focusout ->\r
 500               trace = editor.element_tag_id($(@))\r
 501               refresh_ground_color(trace)\r
 502     \r
 503     $('select').map  ->\r
 504       if editor.element_is('ground_color', $(@))\r
 505         switch $(@).attr('column')\r
 506           when 'orientation'\r
 507             $(@).change ->\r
 508               trace = editor.element_tag_id($(@))\r
 509               refresh_ground_color(trace)\r
 510 \r
 511     update_t = (ultrace) -> \r
 512       t = 0\r
 513       $(ultrace + ' li').map ->\r
 514         trace = editor.element_tag_id($(@))\r
 515         if $(trace + '_destroy').val().length < 1\r
 516           $(trace + 't').val(t)\r
 517           t++\r
 518         else\r
 519     \r
 520     $('.tsort').map -> \r
 521       $(@).sortable {\r
 522         update: ( event, ui ) ->\r
 523           trace = editor.panel_tag_id($(@))\r
 524           update_t(trace + 'tsort')\r
 525       }\r
 526     $('.t-sort li').map -> \r
 527       $(@).disableSelection()\r
 528     \r
 529     update_z = (ultrace) -> \r
 530       z = 1\r
 531       $(ultrace + ' li').map ->\r
 532         trace = editor.element_tag_id($(@))\r
 533         # update panel\r
 534         if $(trace + '_destroy').val().length < 1\r
 535           $(trace + 'z').val(z)\r
 536           switch $(@).attr('element_type')\r
 537             when 'panel_picture'\r
 538               trace = trace + 'div'\r
 539           $(trace).css('zIndex', z)\r
 540           z++\r
 541         else\r
 542     \r
 543     $('.zsort').map -> \r
 544       $(@).sortable {\r
 545         update: ( event, ui ) ->\r
 546           trace = editor.panel_tag_id($(@))\r
 547           update_z(trace + 'zsort')\r
 548       }\r
 549     $('.z-sort li').map -> \r
 550       $(@).disableSelection()\r
 551     \r
 552     # all\r
 553     # disable form actions\r
 554     # hide submit buttons\r
 555     $('.edit_panel_picture' ).map ->\r
 556       $(@).submit ->\r
 557         false\r
 558     $('.edit_speech_balloon' ).map ->\r
 559       $(@).submit ->\r
 560         false\r
 561     $('.edit_ground_picture' ).map ->\r
 562       $(@).submit ->\r
 563         false\r
 564     $('.edit_ground_color' ).map ->\r
 565       $(@).submit ->\r
 566         false\r
 567     \r
 568     $('.edit_panel' ).map ->\r
 569       if $(@).attr('jqform')\r
 570         $(@).submit ->\r
 571           if validate_forms()\r
 572             true\r
 573           else\r
 574             false\r
 575       else\r
 576         $(@).submit ->\r
 577           false\r
 578     \r
 579     $('.submit' ).map ->\r
 580       $(@).hide()\r
 581     \r
 582     # disable form z t\r
 583     $('input').map  ->\r
 584       if editor.is_element($(@))\r
 585         switch $(@).attr('column')\r
 586           when 'z' , 't'\r
 587             $(@).hide()\r
 588             $(@).parent().hide() #label\r
 589     \r
 590     # add button on new form\r
 591     $('.submit-new-form').map ->\r
 592       $(@).html('<button class="new-element">add</button>')\r
 593     \r
 594     $('.new-element').map ->\r
 595       $(@).click -> \r
 596         false\r
 597     j = JSON.stringify(window.configurations)\r
 598     $('#pettanr-configurations').val(j)\r
 599 \r