app/assets/javascripts/panels.js.coffee

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