app/assets/javascripts/panels.js.coffee

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