app/assets/javascripts/panels.js.coffee

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