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