app/assets/javascripts/panels.js.coffee

   1 $ ->\r
   2   repeat_texts = ['repeat', 'repeat-x', 'repeat-y', 'no-repeat']\r
   3   \r
   4   is_editable = (p) ->\r
   5     if p.parent().attr('editable')\r
   6       return true\r
   7     else\r
   8       return false\r
   9   \r
  10   panel_tag_id = (element) ->\r
  11     '#panel' + element.attr('panel_id')\r
  12   \r
  13   element_tag_id = (element) ->\r
  14     '#panel' + element.attr('panel_id') + element.attr('element_type') + element.attr('element_id')\r
  15   \r
  16   refresh_attribute = () ->\r
  17     attr = {}\r
  18     $('input').map ->\r
  19       if $(@).attr('tree') \r
  20         keys = $(@).attr('tree').split('-')\r
  21         set_tree_value(keys, attr, $(this).val())\r
  22     $('textarea').map  ->\r
  23       if $(@).attr('tree') \r
  24         keys = $(@).attr('tree').split('-')\r
  25         set_tree_value(keys, attr, $(this).val())\r
  26     $('select').map ->\r
  27       if $(@).attr('tree') \r
  28         keys = $(@).attr('tree').split('-')\r
  29         set_tree_value(keys, attr, $(this).val())\r
  30     $('#pettanr-panel-json').val(JSON.stringify(attr['panels'][pettanr_current_panel_id.toString() ]))\r
  31   \r
  32   $('#tabs').tabs()\r
  33   $('#elements-tabs').tabs()\r
  34   \r
  35   $('#pettanr-panel-submit').focusin ->\r
  36     refresh_attribute()\r
  37   \r
  38   # panel\r
  39   $('.pettanr-comic-panel').map ->\r
  40     if is_editable($(@))\r
  41       $(@).resizable {\r
  42         stop: ( event, ui ) ->\r
  43           trace = panel_tag_id($(@))\r
  44           w = parseInt($(@).width())\r
  45           h = parseInt($(@).height())\r
  46           $(trace + 'width').val(w)\r
  47           $(trace + 'height').val(h)\r
  48           $('.pettanr-comic-ground-picture').map ->\r
  49             $(@).width(w)\r
  50             $(@).height(h)\r
  51           $('.pettanr-comic-ground-color').map ->\r
  52             $(@).width(w)\r
  53             $(@).height(h)\r
  54           \r
  55       }\r
  56   # sync view \r
  57   $('#panel' + pettanr_current_panel_id.toString() +  'width').focusout ->\r
  58     trace = '#panel' + $(@).attr('panel_id')\r
  59     $(trace).width(parseInt( $(@).val()))\r
  60   \r
  61   $('#panel' + pettanr_current_panel_id.toString() + 'height').focusout ->\r
  62     trace = '#panel' + $(@).attr('panel_id')\r
  63     $(trace).height(parseInt( $(@).val()))\r
  64   \r
  65   $('#panel' + pettanr_current_panel_id.toString() + 'border').focusout ->\r
  66     trace = '#panel' + $(@).attr('panel_id')\r
  67     $(trace).css('border-width', parseInt($(@).val()).toString() + 'px')\r
  68   \r
  69   \r
  70   # panel picture\r
  71   $('.pettanr-panel-picture-wrapper').map ->\r
  72     $(@).draggable {\r
  73       stop: ( event, ui ) ->\r
  74         trace = '#panel' + $(@).attr('panel_id') + 'panel_picture' + $(@).attr('element_id')\r
  75         img = '#panel' + $(@).attr('panel_id') + 'panel_picture' + $(@).attr('element_id') + 'img'\r
  76         left = $(img).parent().position().left + $(@).position().left\r
  77         top = $(img ).parent().position().top + $(@).position().top\r
  78         $(trace + 'x').val(left)\r
  79         $(trace + 'y').val(top)\r
  80     }\r
  81   \r
  82   $('.panel-picture').map ->\r
  83     $(@).resizable {\r
  84       stop: ( event, ui ) ->\r
  85         trace = '#panel' + $(@).parent().attr('panel_id') + 'panel_picture' + $(@).parent().attr('element_id')\r
  86         $(trace + 'width').val($(@).width())\r
  87         $(trace + 'height').val($(@).height())\r
  88       handles: 'all'\r
  89     }\r
  90   \r
  91   refresh_picture = (e, w, h)  ->\r
  92     if w and h\r
  93       sd = ''\r
  94       if h < 0\r
  95         sd += 'v'\r
  96       if w < 0\r
  97         sd += 'h'\r
  98       if sd.length > 0\r
  99         sd += '/'\r
 100       pid = parseInt(e.attr('picture_id')).toString()\r
 101       ext = e.attr('ext')\r
 102       src = '/pictures/' + sd + pid + '.' + ext\r
 103       e.attr('src', src)\r
 104   \r
 105   # sync view \r
 106   $('input').map  ->\r
 107     if $(@).attr('element_type') and $(@).attr('element_type') == 'panel_picture'\r
 108       $(@).focusout ->\r
 109         switch $(@).attr('column')\r
 110           when 'x'\r
 111             trace = element_tag_id($(@)) + 'div'\r
 112             v = parseInt($(@).val()).toString() + 'px'\r
 113             $(trace).css('left', v)\r
 114           when 'y'\r
 115             trace = element_tag_id($(@)) + 'div'\r
 116             v = parseInt($(@).val()).toString() + 'px'\r
 117             $(trace).css('top', v)\r
 118           when 'width'\r
 119             trace = element_tag_id($(@)) + 'img'\r
 120             w = parseInt($(@).val())\r
 121             $(trace).width(Math.abs(w))\r
 122             $(trace).parent().width(Math.abs(w))\r
 123             h = parseInt($(element_tag_id($(@)) + 'height').val())\r
 124           when 'height'\r
 125             trace = element_tag_id($(@)) + 'img'\r
 126             h = parseInt($(@).val())\r
 127             $(trace).height(Math.abs(h))\r
 128             $(trace).parent().height(Math.abs(h))\r
 129             w = parseInt($(element_tag_id($(@)) + 'width').val())\r
 130           else\r
 131         refresh_picture($(trace), w, h)\r
 132     else\r
 133   \r
 134   # speech_balloons\r
 135   $('.pettanr-comic-balloon' ).map ->\r
 136     $(@).draggable {\r
 137       stop: ( event, ui ) ->\r
 138         trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'balloon' + $(@).attr('balloon_id')\r
 139         left = $(@).position().left\r
 140         top = $(@).position().top\r
 141         $(trace + 'x').val(left)\r
 142         $(trace + 'y').val(top)\r
 143     }\r
 144 \r
 145   \r
 146   $('.pettanr-balloon' ).map ->\r
 147     $(@).resizable {\r
 148       stop: ( event, ui ) ->\r
 149         trace = '#panel' + $(@).parent().attr('panel_id') + 'speech_balloon' + $(@).parent().attr('element_id') + 'balloon' + $(@).parent().attr('balloon_id')\r
 150         $(trace + 'width').val($(@).width())\r
 151         $(trace + 'height').val($(@).height())\r
 152      resize: ( event, ui ) ->\r
 153         trace = '#panel' + $(@).parent().attr('panel_id') + 'speech_balloon' + $(@).parent().attr('element_id')\r
 154         $(trace).width($(@).width())\r
 155         $(trace).height($(@).height())\r
 156       handles: 'all'\r
 157     }\r
 158   \r
 159   # sync view \r
 160   $('input').map  ->\r
 161     if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'\r
 162       $(@).focusout ->\r
 163         switch $(@).attr('column')\r
 164           when 'x'\r
 165             trace = element_tag_id($(@))\r
 166             v = parseInt($(@).val()).toString() + 'px'\r
 167             $(trace).css('left', v)\r
 168           when 'y'\r
 169             trace = element_tag_id($(@))\r
 170             v = parseInt($(@).val()).toString() + 'px'\r
 171             $(trace).css('top', v)\r
 172           when 'width'\r
 173             trace = element_tag_id($(@))\r
 174             v = parseInt($(@).val())\r
 175             $(trace).width(Math.abs(v))\r
 176             trace = '#panel' + $(trace).attr('panel_id') + 'speech_balloon' + $(trace).attr('element_id') + 'balloon' + $(trace).attr('balloon_id')\r
 177             $(trace).parent().width(v)\r
 178             $(trace).width(v)\r
 179           when 'height'\r
 180             trace = element_tag_id($(@))\r
 181             v = parseInt($(@).val())\r
 182             $(trace).height(Math.abs(v))\r
 183             trace = '#panel' + $(trace).attr('panel_id') + 'speech_balloon' + $(trace).attr('element_id') + 'balloon' + $(trace).attr('balloon_id')\r
 184             $(trace).parent().height(v)\r
 185             $(trace).height(v)\r
 186           else\r
 187     else\r
 188   $('textarea').map  ->\r
 189     if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'\r
 190       $(@).focusout ->\r
 191         switch $(@).attr('column')\r
 192           when 'content'\r
 193             trace = element_tag_id($(@))\r
 194             speech_trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'speech' + $(@).attr('element_part_id')\r
 195             v = $(@).val()\r
 196             $(speech_trace).html(v)\r
 197   \r
 198   # ground-picture\r
 199   # sync view \r
 200   $('input').map  ->\r
 201     if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_picture'\r
 202       $(@).focusout ->\r
 203         switch $(@).attr('column')\r
 204           when 'x', 'y'\r
 205             trace = element_tag_id($(@))\r
 206             x = parseInt($(@).val()).toString() + 'px'\r
 207             ytrace = '#panel' + $(@).attr('panel_id') + 'ground_picture' + $(@).attr('element_id') + 'y'\r
 208             y = parseInt($(ytrace).val()).toString() + 'px'\r
 209             $(trace).css('background-position', y + ' ' + x)\r
 210   $('select').map  ->\r
 211     if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_picture'\r
 212       $(@).change ->\r
 213         switch $(@).attr('column')\r
 214           when 'repeat'\r
 215             trace = element_tag_id($(@))\r
 216             v = parseInt($(@).val())\r
 217             $(trace).css('background-repeat', repeat_texts[v])\r
 218     else\r
 219   \r
 220   \r
 221   # ground_color\r
 222   # sync view \r
 223   $('input').map  ->\r
 224     if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_color' and $(@).attr('column') == 'code'\r
 225       $(@).hide()\r
 226 \r
 227   $('#colorpicker-red, #colorpicker-green, #colorpicker-blue').map -> \r
 228     trace = element_tag_id($(@).parent())\r
 229     $(@).slider {\r
 230       orientation: 'horizontal',\r
 231       range: 'min',\r
 232       max: 255,\r
 233       value: 127,\r
 234       change: ( event, ui ) ->\r
 235         red = $('#colorpicker-red').slider('value')\r
 236         green = $('#colorpicker-green').slider('value')\r
 237         blue = $('#colorpicker-blue').slider('value')\r
 238         code = (red << 16) + (green << 8) + (blue)\r
 239         phex = "000000" + code.toString(16)\r
 240         hex = code.toString(16)\r
 241         h = phex.substring(phex.length - 6)\r
 242         $('#colorpicker-swatch').css('background-color', '#' + h)\r
 243         $('#colorpicker-hex').html('HEX: #' + h)\r
 244         $('#colorpicker-rgb').html('RGB: (' + red + ',' + green + ',' +blue + ')')\r
 245         $(trace + 'code').val(code)\r
 246         v = '#' + h\r
 247         $(trace).css('background-color', v)\r
 248     }\r
 249 \r
 250   $('.colorpicker').map -> \r
 251     trace = element_tag_id($(@))\r
 252     code = parseInt($(trace + 'code').val())\r
 253     $('.colorpicker-red').map -> \r
 254       v = (code >> 16) & 0xFF\r
 255       $(@).slider('value', v)\r
 256     $('.colorpicker-green').map -> \r
 257       v = (code >> 8) & 0xFF\r
 258       $(@).slider('value', v)\r
 259     $('.colorpicker-blue').map -> \r
 260       v = code & 0xFF\r
 261       $(@).slider('value', v)\r
 262   \r
 263   $('.tsort').map -> \r
 264     $(@).sortable {\r
 265       update: ( event, ui ) ->\r
 266         trace = panel_tag_id($(@))\r
 267         ul = $(@).attr('id')\r
 268         t = 0\r
 269         $('#' + ul + ' li').map ->\r
 270           pid = $(@).attr('panel_id')\r
 271           eid = $(@).attr('element_id')\r
 272           etp = $(@).attr('element_type')\r
 273           tid = '#panel' + pid + etp + eid\r
 274           # update input\r
 275           trace = tid + 't'\r
 276           $(trace).val(t)\r
 277           t++\r
 278     }\r
 279   $('#t-sortable tbody').disableSelection()\r
 280   \r
 281   $('#z-sortable tbody').sortable {\r
 282       update: ( event, ui ) ->\r
 283         z = 1;\r
 284         $('#z-sortable tr').map ->\r
 285           pid = $(@).attr('panel_id')\r
 286           eid = $(@).attr('element_id')\r
 287           etp = $(@).attr('element_type')\r
 288           tid = '#panel' + pid + etp + eid\r
 289           # update input\r
 290           trace = tid + 'z'\r
 291           $(trace).val(z)\r
 292           # update panel\r
 293           switch etp\r
 294             when 'panel_picture'\r
 295               trace = tid + 'div'\r
 296             when 'speech_balloon'\r
 297               trace = tid\r
 298             when 'ground_picture'\r
 299               trace = tid\r
 300             when 'ground_color'\r
 301               trace = tid\r
 302           $(trace).css('zIndex', z)\r
 303           z++\r
 304   }\r
 305   $('#t-sortable tbody').disableSelection()\r
 306   \r
 307   $('.panel_picture_width_tool').map ->\r
 308     $(@).html('<button class="wreverse">Rev</button><button class="wdouble">x2</button><button class="whalf">/2</button>')\r
 309   \r
 310   $('.wreverse').click -> \r
 311     d = $(@).parent()\r
 312     trace = element_tag_id(d)\r
 313     f = $(trace + 'width')\r
 314     w = -f.val()\r
 315     f.val(w)\r
 316     f = $(trace + 'height')\r
 317     h = f.val()\r
 318     refresh_picture($(trace + 'img'), w, h)\r
 319   \r
 320   $('.wdouble').click -> \r
 321     d = $(@).parent()\r
 322     trace = element_tag_id(d)\r
 323     f = $(trace + 'width')\r
 324     w = f.val() * 2\r
 325     f.val(w)\r
 326     $(trace + 'img').width(Math.abs(w))\r
 327     $(trace + 'img').parent().width(Math.abs(w))\r
 328   \r
 329   $('.whalf').click -> \r
 330     d = $(@).parent()\r
 331     trace = element_tag_id(d)\r
 332     f = $(trace + 'width')\r
 333     w = f.val() / 2\r
 334     f.val(w)\r
 335     $(trace + 'img').width(Math.abs(w))\r
 336     $(trace + 'img').parent().width(Math.abs(w))\r
 337   \r
 338   $('.panel_picture_height_tool').map ->\r
 339     $(@).html('<button class="hreverse">Rev</button><button class="hdouble">x2</button><button class="hhalf">/2</button>')\r
 340   \r
 341   $('.hreverse').click -> \r
 342     d = $(@).parent()\r
 343     trace = element_tag_id(d)\r
 344     f = $(trace + 'height')\r
 345     h = -f.val()\r
 346     f.val(h)\r
 347     f = $(trace + 'width')\r
 348     w = f.val()\r
 349     refresh_picture($(trace + 'img'), w, h)\r
 350   \r
 351   $('.hdouble').click -> \r
 352     d = $(@).parent()\r
 353     trace = element_tag_id(d)\r
 354     f = $(trace + 'height')\r
 355     h = f.val() * 2\r
 356     f.val(h)\r
 357     $(trace + 'img').height(Math.abs(h))\r
 358     $(trace + 'img').parent().height(Math.abs(h))\r
 359   \r
 360   $('.hhalf').click -> \r
 361     d = $(@).parent()\r
 362     trace = element_tag_id(d)\r
 363     f = $(trace + 'height')\r
 364     h = f.val() / 2\r
 365     f.val(h)\r
 366     $(trace + 'img').height(Math.abs(h))\r
 367     $(trace + 'img').parent().height(Math.abs(h))\r
 368   \r
 369   # all\r
 370   # disable form actions\r
 371   # hide submit buttons\r
 372   $('.edit_panel_picture' ).map ->\r
 373     $(@).submit ->\r
 374       false\r
 375   $('.edit_speech_balloon' ).map ->\r
 376     $(@).submit ->\r
 377       false\r
 378   $('.edit_ground_picture' ).map ->\r
 379     $(@).submit ->\r
 380       false\r
 381   $('.edit_ground_color' ).map ->\r
 382     $(@).submit ->\r
 383       false\r
 384   \r
 385   $('.edit_panel' ).map ->\r
 386     if $(@).attr('jqform')\r
 387     else\r
 388       $(@).submit ->\r
 389         false\r
 390   \r
 391   $('.submit' ).map ->\r
 392     $(@).hide()\r
 393   \r
 394   # disable form z t\r
 395   $('input').map  ->\r
 396     if $(@).attr('element_type') and $(@).attr('column')\r
 397       switch $(@).attr('column')\r
 398         when 'z' , 't'\r
 399           $(@).hide()\r
 400           $(@).parent().hide() #label\r
 401   \r