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