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   $('#colorpicker-red, #colorpicker-green, #colorpicker-blue').map -> \r
 278     trace = element_tag_id($(@).parent())\r
 279     $(@).slider {\r
 280       orientation: 'horizontal',\r
 281       range: 'min',\r
 282       max: 255,\r
 283       value: 127,\r
 284       change: ( event, ui ) ->\r
 285         red = $('#colorpicker-red').slider('value')\r
 286         green = $('#colorpicker-green').slider('value')\r
 287         blue = $('#colorpicker-blue').slider('value')\r
 288         code = (red << 16) + (green << 8) + (blue)\r
 289         phex = "000000" + code.toString(16)\r
 290         hex = code.toString(16)\r
 291         h = phex.substring(phex.length - 6)\r
 292         $('#colorpicker-swatch').css('background-color', '#' + h)\r
 293         $('#colorpicker-hex').html('HEX: #' + h)\r
 294         $('#colorpicker-rgb').html('RGB: (' + red + ',' + green + ',' +blue + ')')\r
 295         $(trace + 'code').val(code)\r
 296         v = '#' + h\r
 297         $(trace).css('background-color', v)\r
 298     }\r
 299 \r
 300   $('.colorpicker').map -> \r
 301     trace = element_tag_id($(@))\r
 302     code = parseInt($(trace + 'code').val())\r
 303     $('.colorpicker-red').map -> \r
 304       v = (code >> 16) & 0xFF\r
 305       $(@).slider('value', v)\r
 306     $('.colorpicker-green').map -> \r
 307       v = (code >> 8) & 0xFF\r
 308       $(@).slider('value', v)\r
 309     $('.colorpicker-blue').map -> \r
 310       v = code & 0xFF\r
 311       $(@).slider('value', v)\r
 312   \r
 313   update_t = (ultrace) -> \r
 314     t = 0\r
 315     $(ultrace + ' li').map ->\r
 316       trace = element_tag_id($(@))\r
 317       if $(trace + '_destroy').val().length < 1\r
 318         $(trace + 't').val(t)\r
 319         t++\r
 320       else\r
 321   \r
 322   $('.tsort').map -> \r
 323     $(@).sortable {\r
 324       update: ( event, ui ) ->\r
 325         trace = panel_tag_id($(@))\r
 326         update_t(trace + 'tsort')\r
 327     }\r
 328   $('.t-sort li').map -> \r
 329     $(@).disableSelection()\r
 330   \r
 331   update_z = (ultrace) -> \r
 332     z = 1\r
 333     $(ultrace + ' li').map ->\r
 334       trace = element_tag_id($(@))\r
 335       # update panel\r
 336       if $(trace + '_destroy').val().length < 1\r
 337         $(trace + 'z').val(z)\r
 338         switch $(@).attr('element_type')\r
 339           when 'panel_picture'\r
 340             trace = trace + 'div'\r
 341         $(trace).css('zIndex', z)\r
 342         z++\r
 343       else\r
 344   \r
 345   $('.zsort').map -> \r
 346     $(@).sortable {\r
 347       update: ( event, ui ) ->\r
 348         trace = panel_tag_id($(@))\r
 349         update_z(trace + 'zsort')\r
 350     }\r
 351   $('.z-sort li').map -> \r
 352     $(@).disableSelection()\r
 353   \r
 354   $('.panel_picture_width_tool').map ->\r
 355     $(@).html('<button class="wreverse">Rev</button><button class="wdouble">x2</button><button class="whalf">/2</button>')\r
 356   \r
 357   $('.wreverse').click -> \r
 358     d = $(@).parent()\r
 359     trace = element_tag_id(d)\r
 360     f = $(trace + 'width')\r
 361     w = -f.val()\r
 362     f.val(w)\r
 363     f = $(trace + 'height')\r
 364     h = f.val()\r
 365     refresh_picture($(trace + 'img'), w, h)\r
 366   \r
 367   $('.wdouble').click -> \r
 368     d = $(@).parent()\r
 369     trace = element_tag_id(d)\r
 370     f = $(trace + 'width')\r
 371     w = f.val() * 2\r
 372     f.val(w)\r
 373     $(trace + 'img').width(Math.abs(w))\r
 374     $(trace + 'img').parent().width(Math.abs(w))\r
 375   \r
 376   $('.whalf').click -> \r
 377     d = $(@).parent()\r
 378     trace = element_tag_id(d)\r
 379     f = $(trace + 'width')\r
 380     w = f.val() / 2\r
 381     f.val(w)\r
 382     $(trace + 'img').width(Math.abs(w))\r
 383     $(trace + 'img').parent().width(Math.abs(w))\r
 384   \r
 385   $('.panel_picture_height_tool').map ->\r
 386     $(@).html('<button class="hreverse">Rev</button><button class="hdouble">x2</button><button class="hhalf">/2</button>')\r
 387   \r
 388   $('.hreverse').click -> \r
 389     d = $(@).parent()\r
 390     trace = element_tag_id(d)\r
 391     f = $(trace + 'height')\r
 392     h = -f.val()\r
 393     f.val(h)\r
 394     f = $(trace + 'width')\r
 395     w = f.val()\r
 396     refresh_picture($(trace + 'img'), w, h)\r
 397   \r
 398   $('.hdouble').click -> \r
 399     d = $(@).parent()\r
 400     trace = element_tag_id(d)\r
 401     f = $(trace + 'height')\r
 402     h = f.val() * 2\r
 403     f.val(h)\r
 404     $(trace + 'img').height(Math.abs(h))\r
 405     $(trace + 'img').parent().height(Math.abs(h))\r
 406   \r
 407   $('.hhalf').click -> \r
 408     d = $(@).parent()\r
 409     trace = element_tag_id(d)\r
 410     f = $(trace + 'height')\r
 411     h = f.val() / 2\r
 412     f.val(h)\r
 413     $(trace + 'img').height(Math.abs(h))\r
 414     $(trace + 'img').parent().height(Math.abs(h))\r
 415   \r
 416   # all\r
 417   # disable form actions\r
 418   # hide submit buttons\r
 419   $('.edit_panel_picture' ).map ->\r
 420     $(@).submit ->\r
 421       false\r
 422   $('.edit_speech_balloon' ).map ->\r
 423     $(@).submit ->\r
 424       false\r
 425   $('.edit_ground_picture' ).map ->\r
 426     $(@).submit ->\r
 427       false\r
 428   $('.edit_ground_color' ).map ->\r
 429     $(@).submit ->\r
 430       false\r
 431   \r
 432   $('.edit_panel' ).map ->\r
 433     if $(@).attr('jqform')\r
 434     else\r
 435       $(@).submit ->\r
 436         false\r
 437   \r
 438   $('.submit' ).map ->\r
 439     $(@).hide()\r
 440   \r
 441   # disable form z t\r
 442   $('input').map  ->\r
 443     if $(@).attr('element_type') and $(@).attr('column')\r
 444       switch $(@).attr('column')\r
 445         when 'z' , 't'\r
 446           $(@).hide()\r
 447           $(@).parent().hide() #label\r
 448   \r