app/assets/javascripts/panels.js.coffee

   1 $ ->\r
   2   confirm_confirm_confirm = () ->\r
   3     confirm(  )\r
   4   editor = window.PettanrEditor\r
   5   \r
   6   $('.panel-editor').map ->\r
   7     if $(@).attr('current') and parseInt($(@).attr('current')) > 0\r
   8       editor.pettanr_current_panel_id = parseInt($(@).attr('panel_id'))\r
   9   $('#tabs').tabs()\r
  10   $('#elements-tabs').tabs()\r
  11   $('#new-element-tabs').tabs()\r
  12   $('#new-speech_balloon-tabs').tabs()\r
  13   $('#elements-tabs').addClass( "ui-tabs-vertical ui-helper-clearfix" )\r
  14   $("#elements-tabs li").removeClass("ui-corner-top")\r
  15   $("#elements-tabs li").addClass("ui-corner-left")\r
  16   $("#elements-tabs li").map ->\r
  17     $(@).mouseover -> \r
  18       switch $(@).attr('element_type')\r
  19         when 'speech_balloon'\r
  20           trace = editor.element_tag_id($(@)) \r
  21           t = $('img', $(trace))\r
  22         when 'panel_picture'\r
  23           trace = editor.element_tag_id($(@)) + 'img'\r
  24           t = $(trace)\r
  25         else\r
  26           t = null\r
  27       if t\r
  28         $('.ui-resizable-handle', t.parent()).map ->\r
  29           $(@).css('display', 'block')\r
  30     $(@).mouseout -> \r
  31       switch $(@).attr('element_type')\r
  32         when 'speech_balloon'\r
  33           trace = editor.element_tag_id($(@)) \r
  34           t = $('img', $(trace))\r
  35         when 'panel_picture'\r
  36           trace = editor.element_tag_id($(@)) + 'img'\r
  37           t = $(trace)\r
  38         else\r
  39           t = null\r
  40       if t\r
  41         $('.ui-resizable-handle', t.parent()).map ->\r
  42           $(@).css('display', 'none')\r
  43   \r
  44   #destroy button\r
  45   $('.ui-icon-destroy').map ->\r
  46     $(@).button {\r
  47       icons: {\r
  48         primary: 'ui-icon-close', \r
  49         secondary: null\r
  50       }, \r
  51       text: false\r
  52     }\r
  53     $(@).click -> \r
  54       if confirm('destroy ?')\r
  55         trace = editor.element_tag_id($(@))\r
  56         $(trace + '_destroy').val('true')\r
  57         panel_trace = editor.panel_tag_id($(@))\r
  58         update_t(panel_trace + 'tsort')\r
  59         update_z(panel_trace + 'zsort')\r
  60         # sync\r
  61         $(trace + 'element_tab').css('display', 'none')\r
  62         $(trace + 'tab_panel').css('display', 'none')\r
  63         $(trace + 'zsort').css('display', 'none')\r
  64         $(trace + 'tsort').css('display', 'none')\r
  65         switch $(@).attr('element_type')\r
  66           when 'panel_picture'\r
  67             trace = trace + 'div'\r
  68         $(trace).css('display', 'none')\r
  69         \r
  70   \r
  71   $('#pettanr-panel-submit').focusin ->\r
  72     editor.refresh_attribute($('#pettanr-panel-json'))\r
  73   \r
  74   # panel\r
  75   $('.pettanr-comic-panel').map ->\r
  76     if editor.is_editable($(@))\r
  77       $(@).resizable {\r
  78         stop: ( event, ui ) ->\r
  79           trace = editor.panel_tag_id($(@))\r
  80           w = parseInt($(@).width())\r
  81           h = parseInt($(@).height())\r
  82           $(trace + 'width').val(w)\r
  83           $(trace + 'height').val(h)\r
  84           $('.pettanr-comic-ground-picture').map ->\r
  85             $(@).width(w)\r
  86             $(@).height(h)\r
  87           $('.pettanr-comic-ground-color').map ->\r
  88             $(@).width(w)\r
  89             $(@).height(h)\r
  90         , autoHide: true\r
  91       }\r
  92   # sync view \r
  93   $('input').map  ->\r
  94     if $(@).attr('element_type')\r
  95     else\r
  96       if $(@).attr('panel_id')\r
  97         $(@).focusout ->\r
  98           switch $(@).attr('column')\r
  99             when 'width'\r
 100               trace = editor.panel_tag_id($(@))\r
 101               $(trace).width(parseInt( $(@).val()))\r
 102             when 'height'\r
 103               trace = editor.panel_tag_id($(@))\r
 104               $(trace).height(parseInt( $(@).val()))\r
 105             when 'border'\r
 106               trace = editor.panel_tag_id($(@))\r
 107               $(trace).css('border-width', parseInt($(@).val()).toString() + 'px')\r
 108   \r
 109   \r
 110   # panel picture\r
 111   $('.pettanr-panel-picture-wrapper').map ->\r
 112     $(@).draggable {\r
 113       stop: ( event, ui ) ->\r
 114         trace = '#panel' + $(@).attr('panel_id') + 'panel_picture' + $(@).attr('element_id')\r
 115         img = '#panel' + $(@).attr('panel_id') + 'panel_picture' + $(@).attr('element_id') + 'img'\r
 116         left = $(img).parent().position().left + $(@).position().left\r
 117         top = $(img ).parent().position().top + $(@).position().top\r
 118         $(trace + 'x').val(parseInt(left))\r
 119         $(trace + 'y').val(parseInt(top))\r
 120     }\r
 121   \r
 122   $('.panel-picture').map ->\r
 123     $(@).resizable {\r
 124       stop: ( event, ui ) ->\r
 125         trace = '#panel' + $(@).parent().attr('panel_id') + 'panel_picture' + $(@).parent().attr('element_id')\r
 126         $(trace + 'width').val($(@).width())\r
 127         $(trace + 'height').val($(@).height())\r
 128       handles: 'all',\r
 129       autoHide: true\r
 130     }\r
 131   \r
 132   refresh_picture = (e, w, h)  ->\r
 133     if w and h\r
 134       sd = ''\r
 135       if h < 0\r
 136         sd += 'v'\r
 137       if w < 0\r
 138         sd += 'h'\r
 139       if sd.length > 0\r
 140         sd += '/'\r
 141       pid = parseInt(e.attr('picture_id')).toString()\r
 142       ext = e.attr('ext')\r
 143       src = '/pictures/' + sd + pid + '.' + ext\r
 144       e.attr('src', src)\r
 145   \r
 146   # sync view \r
 147   $('input').map  ->\r
 148     if $(@).attr('element_type') and $(@).attr('element_type') == 'panel_picture'\r
 149       $(@).focusout ->\r
 150         switch $(@).attr('column')\r
 151           when 'x'\r
 152             trace = editor.element_tag_id($(@)) + 'div'\r
 153             v = parseInt($(@).val()).toString() + 'px'\r
 154             $(trace).css('left', v)\r
 155           when 'y'\r
 156             trace = editor.element_tag_id($(@)) + 'div'\r
 157             v = parseInt($(@).val()).toString() + 'px'\r
 158             $(trace).css('top', v)\r
 159           when 'width'\r
 160             trace = editor.element_tag_id($(@)) + 'img'\r
 161             w = parseInt($(@).val())\r
 162             $(trace).width(Math.abs(w))\r
 163             $(trace).parent().width(Math.abs(w))\r
 164             h = parseInt($(editor.element_tag_id($(@)) + 'height').val())\r
 165           when 'height'\r
 166             trace = editor.element_tag_id($(@)) + 'img'\r
 167             h = parseInt($(@).val())\r
 168             $(trace).height(Math.abs(h))\r
 169             $(trace).parent().height(Math.abs(h))\r
 170             w = parseInt($(editor.element_tag_id($(@)) + 'width').val())\r
 171           else\r
 172         refresh_picture($(trace), w, h)\r
 173     else\r
 174   \r
 175   # speech_balloons\r
 176   $('.pettanr-comic-balloon' ).map ->\r
 177     $(@).draggable {\r
 178       stop: ( event, ui ) ->\r
 179         trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'balloon' + $(@).attr('balloon_id')\r
 180         left = $(@).position().left\r
 181         top = $(@).position().top\r
 182         $(trace + 'x').val(parseInt(left))\r
 183         $(trace + 'y').val(parseInt(top))\r
 184     }\r
 185 \r
 186   \r
 187   $('.pettanr-balloon' ).map ->\r
 188     $(@).resizable {\r
 189       stop: ( event, ui ) ->\r
 190         trace = '#panel' + $(@).parent().attr('panel_id') + 'speech_balloon' + $(@).parent().attr('element_id') + 'balloon' + $(@).parent().attr('balloon_id')\r
 191         $(trace + 'width').val($(@).width())\r
 192         $(trace + 'height').val($(@).height())\r
 193      resize: ( event, ui ) ->\r
 194         trace = '#panel' + $(@).parent().attr('panel_id') + 'speech_balloon' + $(@).parent().attr('element_id')\r
 195         $(trace).width($(@).width())\r
 196         $(trace).height($(@).height())\r
 197       handles: 'all',\r
 198       autoHide: true\r
 199     }\r
 200   $('.pettanr-comic-speech-inner' ).map ->\r
 201     $(@).mouseover -> \r
 202       outer = $(@).parent()\r
 203       sb = outer.parent()\r
 204       trace = '#panel' + sb.attr('panel_id') + 'speech_balloon' + sb.attr('element_id') + 'balloon' + sb.attr('balloon_id')\r
 205       img = $(trace)\r
 206       $('.ui-resizable-handle', img.parent()).map ->\r
 207         $(@).css('display', 'block')\r
 208     $(@).mouseout -> \r
 209       outer = $(@).parent()\r
 210       sb = outer.parent()\r
 211       trace = '#panel' + sb.attr('panel_id') + 'speech_balloon' + sb.attr('element_id') + 'balloon' + sb.attr('balloon_id')\r
 212       img = $(trace)\r
 213       $('.ui-resizable-handle', img.parent()).map ->\r
 214         $(@).css('display', 'none')\r
 215         \r
 216   \r
 217   # sync view \r
 218   $('input').map  ->\r
 219     if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'\r
 220       $(@).focusout ->\r
 221         switch $(@).attr('column')\r
 222           when 'x'\r
 223             trace = editor.element_tag_id($(@))\r
 224             v = parseInt($(@).val()).toString() + 'px'\r
 225             $(trace).css('left', v)\r
 226           when 'y'\r
 227             trace = editor.element_tag_id($(@))\r
 228             v = parseInt($(@).val()).toString() + 'px'\r
 229             $(trace).css('top', v)\r
 230           when 'width'\r
 231             trace = editor.element_tag_id($(@))\r
 232             v = parseInt($(@).val())\r
 233             $(trace).width(Math.abs(v))\r
 234             trace = '#panel' + $(trace).attr('panel_id') + 'speech_balloon' + $(trace).attr('element_id') + 'balloon' + $(trace).attr('balloon_id')\r
 235             $(trace).parent().width(v)\r
 236             $(trace).width(v)\r
 237           when 'height'\r
 238             trace = editor.element_tag_id($(@))\r
 239             v = parseInt($(@).val())\r
 240             $(trace).height(Math.abs(v))\r
 241             trace = '#panel' + $(trace).attr('panel_id') + 'speech_balloon' + $(trace).attr('element_id') + 'balloon' + $(trace).attr('balloon_id')\r
 242             $(trace).parent().height(v)\r
 243             $(trace).height(v)\r
 244           else\r
 245     else\r
 246   $('textarea').map  ->\r
 247     if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'\r
 248       $(@).focusout ->\r
 249         switch $(@).attr('column')\r
 250           when 'content'\r
 251             trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'speech' + $(@).attr('element_part_id')\r
 252             wf_sel = $(trace + 'writing_format_id')\r
 253             wf_id = parseInt(wf_sel.val())\r
 254             v = writing_format_functions[writing_formats[wf_id]]($(@).val())\r
 255             $(trace).html(v)\r
 256   $('textarea').map  ->\r
 257     if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'\r
 258       switch $(@).attr('column')\r
 259         when 'content'\r
 260           $(@).bind('textchange', (event, previousText) ->\r
 261             trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'speech' + $(@).attr('element_part_id')\r
 262             wf_sel = $(trace + 'writing_format_id')\r
 263             wf_id = parseInt(wf_sel.val())\r
 264             v = writing_format_functions[writing_formats[wf_id]]($(@).val())\r
 265             $(trace).html('<p>' + v + '</p>')\r
 266           )\r
 267   $('select').map  ->\r
 268     if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'\r
 269       $(@).change ->\r
 270         switch $(@).attr('column')\r
 271           when 'font_size'\r
 272             trace = editor.element_part_tag_id($(@))\r
 273             $(trace).css('font-size', $(@).val() + 'em')\r
 274           when 'text_align'\r
 275             trace = editor.element_part_tag_id($(@))\r
 276             v = parseInt($(@).val())\r
 277             $(trace).css('text-align', text_align_texts[v])\r
 278     else\r
 279   $('input').map  ->\r
 280     if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon' and $(@).attr('column') == 'fore_color'\r
 281       $(@).hide()\r
 282 \r
 283   \r
 284   # ground-picture\r
 285   # sync view \r
 286   $('input').map  ->\r
 287     if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_picture'\r
 288       $(@).focusout ->\r
 289         switch $(@).attr('column')\r
 290           when 'x', 'y'\r
 291             trace = editor.element_tag_id($(@))\r
 292             x = parseInt($(@).val()).toString() + 'px'\r
 293             ytrace = '#panel' + $(@).attr('panel_id') + 'ground_picture' + $(@).attr('element_id') + 'y'\r
 294             y = parseInt($(ytrace).val()).toString() + 'px'\r
 295             $(trace).css('background-position', y + ' ' + x)\r
 296   $('select').map  ->\r
 297     if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_picture'\r
 298       $(@).change ->\r
 299         switch $(@).attr('column')\r
 300           when 'repeat'\r
 301             trace = editor.element_tag_id($(@))\r
 302             v = parseInt($(@).val())\r
 303             $(trace).css('background-repeat', repeat_texts[v])\r
 304     else\r
 305   \r
 306   \r
 307   # ground_color\r
 308   # sync view \r
 309   $('input').map  ->\r
 310     if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_color' and $(@).attr('column') == 'code'\r
 311       $(@).hide()\r
 312 \r
 313   color_slider_change = (trace) -> \r
 314     red = $(trace + 'code_red').slider('value')\r
 315     green = $(trace + 'code_green').slider('value')\r
 316     blue = $(trace + 'code_blue').slider('value')\r
 317     code = (red << 16) + (green << 8) + (blue)\r
 318     phex = "000000" + code.toString(16)\r
 319     hex = code.toString(16)\r
 320     h = phex.substring(phex.length - 6)\r
 321     $(trace + 'code_swatch').css('background-color', '#' + h)\r
 322     $(trace + 'code_hex').html('HEX: #' + h)\r
 323     $(trace + 'code_rgb').html('RGB: (' + red + ',' + green + ',' +blue + ')')\r
 324     v = '#' + h\r
 325     if editor.is_element_part($(trace))\r
 326       $(trace + 'fore_color').val(code)\r
 327       $(trace).css('color', v)\r
 328     else\r
 329       $(trace + 'code').val(code)\r
 330       $(trace).css('background-color', v)\r
 331   \r
 332   $('.colorpicker').map -> \r
 333     if editor.is_element_part($(@))\r
 334       code_picker_trace = editor.element_part_tag_id($(@))\r
 335       code = parseInt($(code_picker_trace + 'fore_color').val())\r
 336     else\r
 337       code_picker_trace = editor.element_tag_id($(@))\r
 338       code = parseInt($(code_picker_trace + 'code').val())\r
 339     red = (code >> 16) & 0xFF\r
 340     green = (code >> 8) & 0xFF\r
 341     blue = code & 0xFF\r
 342     $(code_picker_trace + 'code_red').slider {\r
 343       orientation: 'horizontal',\r
 344       range: 'min',\r
 345       max: 255,\r
 346       value: red,\r
 347       change: ( event, ui ) ->\r
 348         if editor.is_element_part($(@).parent())\r
 349           trace = editor.element_part_tag_id($(@).parent())\r
 350         else\r
 351           trace = editor.element_tag_id($(@).parent())\r
 352         color_slider_change(trace)\r
 353     }\r
 354     $(code_picker_trace + 'code_green').slider {\r
 355       orientation: 'horizontal',\r
 356       range: 'min',\r
 357       max: 255,\r
 358       value: green,\r
 359       change: ( event, ui ) ->\r
 360         if editor.is_element_part($(@).parent())\r
 361           trace = editor.element_part_tag_id($(@).parent())\r
 362         else\r
 363           trace = editor.element_tag_id($(@).parent())\r
 364         color_slider_change(trace)\r
 365     }\r
 366     $(code_picker_trace + 'code_blue').slider {\r
 367       orientation: 'horizontal',\r
 368       range: 'min',\r
 369       max: 255,\r
 370       value: blue,\r
 371       change: ( event, ui ) ->\r
 372         if editor.is_element_part($(@).parent())\r
 373           trace = editor.element_part_tag_id($(@).parent())\r
 374         else\r
 375           trace = editor.element_tag_id($(@).parent())\r
 376         color_slider_change(trace)\r
 377     }\r
 378     color_slider_change(code_picker_trace)\r
 379   $('.colorpicker-wrap').map -> \r
 380     $(@).css('display', 'block')\r
 381   \r
 382   update_t = (ultrace) -> \r
 383     t = 0\r
 384     $(ultrace + ' li').map ->\r
 385       trace = editor.element_tag_id($(@))\r
 386       if $(trace + '_destroy').val().length < 1\r
 387         $(trace + 't').val(t)\r
 388         t++\r
 389       else\r
 390   \r
 391   $('.tsort').map -> \r
 392     $(@).sortable {\r
 393       update: ( event, ui ) ->\r
 394         trace = editor.panel_tag_id($(@))\r
 395         update_t(trace + 'tsort')\r
 396     }\r
 397   $('.t-sort li').map -> \r
 398     $(@).disableSelection()\r
 399   \r
 400   update_z = (ultrace) -> \r
 401     z = 1\r
 402     $(ultrace + ' li').map ->\r
 403       trace = editor.element_tag_id($(@))\r
 404       # update panel\r
 405       if $(trace + '_destroy').val().length < 1\r
 406         $(trace + 'z').val(z)\r
 407         switch $(@).attr('element_type')\r
 408           when 'panel_picture'\r
 409             trace = trace + 'div'\r
 410         $(trace).css('zIndex', z)\r
 411         z++\r
 412       else\r
 413   \r
 414   $('.zsort').map -> \r
 415     $(@).sortable {\r
 416       update: ( event, ui ) ->\r
 417         trace = editor.panel_tag_id($(@))\r
 418         update_z(trace + 'zsort')\r
 419     }\r
 420   $('.z-sort li').map -> \r
 421     $(@).disableSelection()\r
 422   \r
 423   $('.panel_picture_width_tool').map ->\r
 424     $(@).html('<button class="wreverse">Rev</button><button class="wdouble">x2</button><button class="whalf">/2</button>')\r
 425   \r
 426   $('.wreverse').click -> \r
 427     d = $(@).parent()\r
 428     trace = editor.element_tag_id(d)\r
 429     f = $(trace + 'width')\r
 430     w = -f.val()\r
 431     f.val(w)\r
 432     f = $(trace + 'height')\r
 433     h = f.val()\r
 434     refresh_picture($(trace + 'img'), w, h)\r
 435   \r
 436   $('.wdouble').click -> \r
 437     d = $(@).parent()\r
 438     trace = editor.element_tag_id(d)\r
 439     f = $(trace + 'width')\r
 440     w = f.val() * 2\r
 441     f.val(w)\r
 442     $(trace + 'img').width(Math.abs(w))\r
 443     $(trace + 'img').parent().width(Math.abs(w))\r
 444   \r
 445   $('.whalf').click -> \r
 446     d = $(@).parent()\r
 447     trace = editor.element_tag_id(d)\r
 448     f = $(trace + 'width')\r
 449     w = Math.floor(f.val() / 2)\r
 450     f.val(w)\r
 451     $(trace + 'img').width(Math.abs(w))\r
 452     $(trace + 'img').parent().width(Math.abs(w))\r
 453   \r
 454   $('.panel_picture_height_tool').map ->\r
 455     $(@).html('<button class="hreverse">Rev</button><button class="hdouble">x2</button><button class="hhalf">/2</button>')\r
 456   \r
 457   $('.hreverse').click -> \r
 458     d = $(@).parent()\r
 459     trace = editor.element_tag_id(d)\r
 460     f = $(trace + 'height')\r
 461     h = -f.val()\r
 462     f.val(h)\r
 463     f = $(trace + 'width')\r
 464     w = f.val()\r
 465     refresh_picture($(trace + 'img'), w, h)\r
 466   \r
 467   $('.hdouble').click -> \r
 468     d = $(@).parent()\r
 469     trace = editor.element_tag_id(d)\r
 470     f = $(trace + 'height')\r
 471     h = f.val() * 2\r
 472     f.val(h)\r
 473     $(trace + 'img').height(Math.abs(h))\r
 474     $(trace + 'img').parent().height(Math.abs(h))\r
 475   \r
 476   $('.hhalf').click -> \r
 477     d = $(@).parent()\r
 478     trace = editor.element_tag_id(d)\r
 479     f = $(trace + 'height')\r
 480     h = Math.floor(f.val() / 2)\r
 481     f.val(h)\r
 482     $(trace + 'img').height(Math.abs(h))\r
 483     $(trace + 'img').parent().height(Math.abs(h))\r
 484   \r
 485   # all\r
 486   # disable form actions\r
 487   # hide submit buttons\r
 488   $('.edit_panel_picture' ).map ->\r
 489     $(@).submit ->\r
 490       false\r
 491   $('.edit_speech_balloon' ).map ->\r
 492     $(@).submit ->\r
 493       false\r
 494   $('.edit_ground_picture' ).map ->\r
 495     $(@).submit ->\r
 496       false\r
 497   $('.edit_ground_color' ).map ->\r
 498     $(@).submit ->\r
 499       false\r
 500   \r
 501   $('.edit_panel' ).map ->\r
 502     if $(@).attr('jqform')\r
 503     else\r
 504       $(@).submit ->\r
 505         false\r
 506   \r
 507   $('.submit' ).map ->\r
 508     $(@).hide()\r
 509   \r
 510   # disable form z t\r
 511   $('input').map  ->\r
 512     if $(@).attr('element_type') and $(@).attr('column')\r
 513       switch $(@).attr('column')\r
 514         when 'z' , 't'\r
 515           $(@).hide()\r
 516           $(@).parent().hide() #label\r
 517   \r
 518   # add button on new form\r
 519   $('.submit-new-form').map ->\r
 520     $(@).html('<button class="new-element">add</button>')\r
 521   \r
 522   $('.new-element').map ->\r
 523     $(@).click -> \r
 524       false\r
 525   \r