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