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