app/assets/javascripts/panels.js.coffee

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