app/assets/javascripts/panels.js.coffee

   1 $ ->\r
   2   confirm_confirm_confirm = () ->\r
   3     confirm(  )\r
   4   editor = window.PettanrEditor\r
   5   configurations =  window.configurations\r
   6   WritingFormat = window.PettanrWritingFormat\r
   7   WritingFormat.load($('#writing_formats'))\r
   8   SpeechBalloonTemplate = window.PettanrSpeechBalloonTemplate\r
   9   SpeechBalloonTemplate.load($('#speech_balloon_templates'))\r
  10   for n, v of SpeechBalloonTemplate.scripts\r
  11     v.onLoad()\r
  12     v.add_helper( n, '' )\r
  13   PictureSizeHelper = window.PettanrPictureSizeHelper\r
  14   ColorHelper = window.PettanrColorHelper\r
  15   PopupHelper = window.PettanrPopupHelper\r
  16   \r
  17   find_configurations = ( hash, key) ->\r
  18     if typeof(hash[key]) == 'string'\r
  19       find_configurations(hash, hash[key])\r
  20     else\r
  21       return hash[key]\r
  22   \r
  23   set_validates = (form) ->\r
  24     rules = {}\r
  25     $('input', form).map ->\r
  26       model_name = $(@).attr('data-model')\r
  27       column_name = $(@).attr('column')\r
  28       name = $(@).attr('name')\r
  29       if model_name and column_name\r
  30         model = find_configurations(configurations['models'], model_name)\r
  31         rule = model['attributes'][column_name]['rules']\r
  32         trace = editor.element_tag_id($(@)) \r
  33         if rule\r
  34           rules[name] = rule\r
  35           $(@).focusout ->\r
  36             if editor.is_panel(form)\r
  37               validate_panel(form)\r
  38             else\r
  39               validate_element(form)\r
  40     if Object.keys(rules).length > 0\r
  41       v = form.validate({ignore:[],rules: rules})\r
  42   \r
  43   display_panel = (panel, vis) ->\r
  44     v = if vis\r
  45       ''\r
  46     else\r
  47       'none'\r
  48     trace = editor.panel_tag_id(panel)\r
  49     $(trace).css('display', v)\r
  50   \r
  51   validate_panel = (form) ->\r
  52     valid = form.valid()\r
  53     bc = if valid\r
  54       ''\r
  55     else\r
  56       '#ef29ef'\r
  57     $('a', $('#tabs-1-tab')).map ->\r
  58       $(@).css('background-color', bc)\r
  59     display_panel(form, valid)\r
  60     valid\r
  61   \r
  62   display_element = (element, vis) ->\r
  63     trace = editor.element_tag_id(element)\r
  64     d = $(trace + '_destroy').val()\r
  65     v = if vis and d.length < 1\r
  66       ''\r
  67     else\r
  68       'none'\r
  69     switch element.attr('element_type')\r
  70       when 'panel_picture'\r
  71         trace = trace + 'div'\r
  72     $(trace).css('display', v)\r
  73   \r
  74   validate_element = (form) ->\r
  75     valid = form.valid()\r
  76     bc = if valid\r
  77       ''\r
  78     else\r
  79       '#ef29ef'\r
  80     display_element(form, valid)\r
  81     trace = editor.element_tag_id(form) \r
  82     $('.elements-tab', $(trace + 'element_tab')).map  ->\r
  83       $(@).css('background-color', bc)\r
  84     valid\r
  85   \r
  86   validate_forms = () ->\r
  87     valid = true\r
  88     $('form', $('#tabs-1')).map  ->\r
  89       form_name = $(@).attr('data-form-name')\r
  90       if form_name\r
  91         if validate_panel($(@))\r
  92         else\r
  93           valid = false\r
  94     invalid_elements = []\r
  95     $('form', $('#tabs-2')).map  ->\r
  96       form_name = $(@).attr('data-form-name')\r
  97       if form_name\r
  98         if validate_element($(@))\r
  99         else\r
 100           valid = false\r
 101           invalid_elements.push form_name\r
 102     if invalid_elements.length > 0\r
 103       bc = '#ef29ef'\r
 104     else\r
 105       bc = ''\r
 106     $('a', $('#tabs-2-tab')).map ->\r
 107       $(@).css('background-color', bc)\r
 108     return valid\r
 109   $('form').map  ->\r
 110     form_name = $(@).attr('data-form-name')\r
 111     if form_name\r
 112       form = $(this)\r
 113       set_validates(form)\r
 114   $('.panel-editor').map ->\r
 115     if $(@).attr('current') and parseInt($(@).attr('current')) > 0\r
 116       editor.pettanr_current_panel_id = parseInt($(@).attr('panel_id'))\r
 117   if editor.is_editting()\r
 118     $('#tabs').tabs()\r
 119     $('#elements-tabs').tabs()\r
 120     $('#new-element-tabs').tabs()\r
 121     $('#new-speech_balloon-tabs').tabs()\r
 122     $('#elements-tabs').addClass( "ui-tabs-vertical ui-helper-clearfix" )\r
 123     $("#elements-tabs li").removeClass("ui-corner-top")\r
 124     $("#elements-tabs li").addClass("ui-corner-left")\r
 125     $("#elements-tabs li").map ->\r
 126       $(@).mouseover -> \r
 127         switch $(@).attr('element_type')\r
 128           when 'speech_balloon'\r
 129             trace = editor.element_tag_id($(@)) \r
 130             t = $('img', $(trace))\r
 131           when 'panel_picture'\r
 132             trace = editor.element_tag_id($(@)) + 'img'\r
 133             t = $(trace)\r
 134           else\r
 135             t = null\r
 136         if t\r
 137           $('.ui-resizable-handle', t.parent()).map ->\r
 138             $(@).css('display', 'block')\r
 139       $(@).mouseout -> \r
 140         switch $(@).attr('element_type')\r
 141           when 'speech_balloon'\r
 142             trace = editor.element_tag_id($(@)) \r
 143             t = $('img', $(trace))\r
 144           when 'panel_picture'\r
 145             trace = editor.element_tag_id($(@)) + 'img'\r
 146             t = $(trace)\r
 147           else\r
 148             t = null\r
 149         if t\r
 150           $('.ui-resizable-handle', t.parent()).map ->\r
 151             $(@).css('display', 'none')\r
 152     \r
 153     #destroy button\r
 154     $('.ui-icon-destroy').map ->\r
 155       $(@).button {\r
 156         icons: {\r
 157           primary: 'ui-icon-close', \r
 158           secondary: null\r
 159         }, \r
 160         text: false\r
 161       }\r
 162       $(@).click -> \r
 163         if confirm('destroy ?')\r
 164           trace = editor.element_tag_id($(@))\r
 165           $(trace + '_destroy').val('true')\r
 166           panel_trace = editor.panel_tag_id($(@))\r
 167           update_t(panel_trace + 'tsort')\r
 168           update_z(panel_trace + 'zsort')\r
 169           # sync\r
 170           $(trace + 'element_tab').css('display', 'none')\r
 171           $(trace + 'tab_panel').css('display', 'none')\r
 172           $(trace + 'zsort').css('display', 'none')\r
 173           $(trace + 'tsort').css('display', 'none')\r
 174           display_element($(@), false)\r
 175     \r
 176     $('#pettanr-panel-submit').focusin ->\r
 177       editor.refresh_attribute($('#pettanr-panel-json'))\r
 178     \r
 179     # panel\r
 180     $('.pettanr-comic-panel').map ->\r
 181       if editor.is_editable($(@))\r
 182         $(@).resizable {\r
 183           stop: ( event, ui ) ->\r
 184             trace = editor.panel_tag_id($(@))\r
 185             w = parseInt($(@).width())\r
 186             h = parseInt($(@).height())\r
 187             $(trace + 'width').val(w)\r
 188             $(trace + 'height').val(h)\r
 189             $('.pettanr-comic-ground-picture').map ->\r
 190               $(@).width(w)\r
 191               $(@).height(h)\r
 192             $('.pettanr-comic-ground-color').map ->\r
 193               $(@).width(w)\r
 194               $(@).height(h)\r
 195           , autoHide: true\r
 196         }\r
 197     \r
 198     # sync view \r
 199     $('input').map  ->\r
 200       if $(@).attr('element_type')\r
 201       else\r
 202         if $(@).attr('panel_id')\r
 203           $(@).focusout ->\r
 204             switch $(@).attr('column')\r
 205               when 'width'\r
 206                 trace = editor.panel_tag_id($(@))\r
 207                 $(trace).width(parseInt( $(@).val()))\r
 208               when 'height'\r
 209                 trace = editor.panel_tag_id($(@))\r
 210                 $(trace).height(parseInt( $(@).val()))\r
 211               when 'border'\r
 212                 trace = editor.panel_tag_id($(@))\r
 213                 $(trace).css('border-width', parseInt($(@).val()).toString() + 'px')\r
 214     \r
 215     # panel picture\r
 216     PictureSizeHelper.add_helper()\r
 217     PopupHelper.add_helper()\r
 218     \r
 219     $('.pettanr-panel-picture-wrapper').map ->\r
 220       $(@).draggable {\r
 221         stop: ( event, ui ) ->\r
 222           trace = editor.element_tag_id($(@))\r
 223           img = $(trace + 'img')\r
 224           left = img.parent().position().left + $(@).position().left\r
 225           top = img.parent().position().top + $(@).position().top\r
 226           $(trace + 'x').val(parseInt(left))\r
 227           $(trace + 'y').val(parseInt(top))\r
 228       }\r
 229     \r
 230     $('.panel-picture').map ->\r
 231       $(@).resizable {\r
 232         stop: ( event, ui ) ->\r
 233           resize_div = $(@)\r
 234           panel_picture_div = resize_div.parent()\r
 235           trace = editor.element_tag_id(panel_picture_div)\r
 236           \r
 237           resize_div.css('top', '0px')\r
 238           resize_div.css('left', '0px')\r
 239           if ui.originalPosition.top != ui.position.top\r
 240             t = panel_picture_div.position().top + ui.position.top\r
 241             $(trace + 'y').val(Math.floor(t))\r
 242             panel_picture_div.css('top', t.toString() + 'px')\r
 243           if ui.originalPosition.left != ui.position.left\r
 244             l = panel_picture_div.position().left + ui.position.left\r
 245             $(trace + 'x').val(Math.floor(l))\r
 246             panel_picture_div.css('left', l.toString() + 'px')\r
 247           w = if $(trace + 'width').val() < 0\r
 248             -ui.size.width\r
 249           else\r
 250             ui.size.width\r
 251           h = if $(trace + 'height').val() < 0\r
 252             -ui.size.height\r
 253           else\r
 254             ui.size.height\r
 255           $(trace + 'width').val(w)\r
 256           $(trace + 'height').val(h)\r
 257         resize: ( event, ui ) ->\r
 258           resize_div = $(@)\r
 259           panel_picture_div = resize_div.parent()\r
 260           trace = editor.element_tag_id(panel_picture_div)\r
 261         handles: 'all',\r
 262         autoHide: true\r
 263       }\r
 264     \r
 265     # sync view \r
 266     $('input').map  ->\r
 267       if editor.element_is('panel_picture', $(@))\r
 268         $(@).focusout ->\r
 269           switch $(@).attr('column')\r
 270             when 'x'\r
 271               trace = editor.element_tag_id($(@)) + 'div'\r
 272               v = parseInt($(@).val()).toString() + 'px'\r
 273               $(trace).css('left', v)\r
 274             when 'y'\r
 275               trace = editor.element_tag_id($(@)) + 'div'\r
 276               v = parseInt($(@).val()).toString() + 'px'\r
 277               $(trace).css('top', v)\r
 278             when 'width'\r
 279               trace = editor.element_tag_id($(@)) + 'img'\r
 280               w = parseInt($(@).val())\r
 281               $(trace).width(Math.abs(w))\r
 282               $(trace).parent().width(Math.abs(w))\r
 283               h = parseInt($(editor.element_tag_id($(@)) + 'height').val())\r
 284             when 'height'\r
 285               trace = editor.element_tag_id($(@)) + 'img'\r
 286               h = parseInt($(@).val())\r
 287               $(trace).height(Math.abs(h))\r
 288               $(trace).parent().height(Math.abs(h))\r
 289               w = parseInt($(editor.element_tag_id($(@)) + 'width').val())\r
 290             else\r
 291           PictureSizeHelper.refresh_picture($(trace), w, h)\r
 292       else\r
 293     \r
 294     # speech_balloons\r
 295     ColorHelper.add_helper($('.speech-fore_color-wrap'), 'fore_color')\r
 296     \r
 297     $('.pettanr-comic-balloon' ).map ->\r
 298       $(@).draggable {\r
 299         stop: ( event, ui ) ->\r
 300           balloon = $('.pettanr-balloon', $(@))\r
 301           trace = editor.element_part_tag_id(balloon)\r
 302           left = $(@).position().left\r
 303           top = $(@).position().top\r
 304           $(trace + 'x').val(parseInt(left))\r
 305           $(trace + 'y').val(parseInt(top))\r
 306       }\r
 307     \r
 308     $('.pettanr-balloon' ).map ->\r
 309       $(@).resizable {\r
 310         stop: ( event, ui ) ->\r
 311           resize_div = $(@)\r
 312           speech_balloon_div = resize_div.parent()\r
 313           balloon = $('.pettanr-balloon', $(@))\r
 314           trace = editor.element_tag_id(speech_balloon_div)\r
 315           trace_balloon = editor.element_part_tag_id(balloon)\r
 316           \r
 317           resize_div.css('top', '0px')\r
 318           resize_div.css('left', '0px')\r
 319           w = ui.size.width\r
 320           h = ui.size.height\r
 321           if ui.originalPosition.top != ui.position.top\r
 322             t = speech_balloon_div.position().top + ui.position.top\r
 323             $(trace_balloon + 'y').val(Math.floor(t))\r
 324             speech_balloon_div.css('top', t.toString() + 'px')\r
 325             speech_balloon_div.css('height', h + 'px')\r
 326           if ui.originalPosition.left != ui.position.left\r
 327             l = speech_balloon_div.position().left + ui.position.left\r
 328             $(trace_balloon + 'x').val(Math.floor(l))\r
 329             speech_balloon_div.css('left', l.toString() + 'px')\r
 330             speech_balloon_div.css('width', w + 'px')\r
 331           $(trace_balloon + 'width').val(w)\r
 332           $(trace_balloon + 'height').val(h)\r
 333           speech_balloon_div.css('width', w.toString() + 'px')\r
 334           speech_balloon_div.css('height', h.toString() + 'px')\r
 335        resize: ( event, ui ) ->\r
 336           resize_div = $(@)\r
 337           speech_balloon_div = resize_div.parent()\r
 338           balloon = $('.pettanr-balloon', $(@))\r
 339           trace = editor.element_tag_id(speech_balloon_div)\r
 340           trace_balloon = editor.element_part_tag_id(balloon)\r
 341         handles: 'all',\r
 342         autoHide: true\r
 343       }\r
 344     \r
 345     $('.pettanr-comic-speech-inner' ).map ->\r
 346       $(@).mouseover -> \r
 347         outer = $(@).parent()\r
 348         sb = outer.parent()\r
 349         trace = editor.element_tag_id(sb)\r
 350         img = $('.pettanr-balloon', $(trace))\r
 351         $('.ui-resizable-handle', img.parent()).map ->\r
 352           $(@).css('display', 'block')\r
 353       $(@).mouseout -> \r
 354         outer = $(@).parent()\r
 355         sb = outer.parent()\r
 356         trace = editor.element_tag_id(sb)\r
 357         img = $('.pettanr-balloon', $(trace))\r
 358         $('.ui-resizable-handle', img.parent()).map ->\r
 359           $(@).css('display', 'none')\r
 360           \r
 361     \r
 362     # sync view \r
 363     $('input').map  ->\r
 364       if editor.element_is('speech_balloon', $(@))\r
 365         $(@).focusout ->\r
 366           switch $(@).attr('column')\r
 367             when 'x'\r
 368               trace = editor.element_tag_id($(@))\r
 369               v = parseInt($(@).val()).toString() + 'px'\r
 370               $(trace).css('left', v)\r
 371             when 'y'\r
 372               trace = editor.element_tag_id($(@))\r
 373               v = parseInt($(@).val()).toString() + 'px'\r
 374               $(trace).css('top', v)\r
 375             when 'width'\r
 376               trace = editor.element_tag_id($(@))\r
 377               v = parseInt($(@).val())\r
 378               $(trace).width(Math.abs(v))\r
 379               img = $('.pettanr-balloon', $(trace))\r
 380               img.parent().width(v)\r
 381               img.width(v)\r
 382             when 'height'\r
 383               trace = editor.element_tag_id($(@))\r
 384               v = parseInt($(@).val())\r
 385               $(trace).height(Math.abs(v))\r
 386               img = $('.pettanr-balloon', $(trace))\r
 387               img.parent().height(v)\r
 388               img.height(v)\r
 389             else\r
 390       else\r
 391     $('textarea').map  ->\r
 392       if editor.element_is('speech_balloon', $(@))\r
 393         $(@).focusout ->\r
 394           switch $(@).attr('column')\r
 395             when 'content'\r
 396               trace = editor.element_part_tag_id($(@))\r
 397               wf_sel = $(trace + 'writing_format_id')\r
 398               wf_id = parseInt(wf_sel.val())\r
 399               v = WritingFormat.render(wf_id, $(@).val())\r
 400               $(trace).html(v)\r
 401     $('textarea').map  ->\r
 402       if editor.element_is('speech_balloon', $(@))\r
 403         switch $(@).attr('column')\r
 404           when 'content'\r
 405             $(@).bind('textchange', (event, previousText) ->\r
 406               trace = editor.element_part_tag_id($(@))\r
 407               wf_sel = $(trace + 'writing_format_id')\r
 408               wf_id = parseInt(wf_sel.val())\r
 409               v = WritingFormat.render(wf_id, $(@).val())\r
 410               $(trace).html(v)\r
 411             )\r
 412     $('select').map  ->\r
 413       if editor.element_is('speech_balloon', $(@))\r
 414         $(@).change ->\r
 415           switch $(@).attr('column')\r
 416             when 'font_size'\r
 417               trace = editor.element_part_tag_id($(@))\r
 418               $(trace).css('font-size', $(@).val() + 'em')\r
 419             when 'text_align'\r
 420               trace = editor.element_part_tag_id($(@))\r
 421               v = parseInt($(@).val())\r
 422               $(trace).css('text-align', editor.text_align_texts[v])\r
 423       else\r
 424     $('input').map  ->\r
 425       if editor.element_is('speech_balloon', $(@))\r
 426         if $(@).attr('column') == 'fore_color'\r
 427           $(@).hide()\r
 428 \r
 429     \r
 430     # ground-picture\r
 431     refresh_ground_picture = (element_trace)  ->\r
 432       x = parseInt($(element_trace + 'x').val()).toString() + 'px'\r
 433       y = parseInt($(element_trace + 'y').val()).toString() + 'px'\r
 434       $(element_trace).css('background-position', x + ' ' + y)\r
 435     \r
 436     # sync view \r
 437     $('input').map  ->\r
 438       if editor.element_is('ground_picture', $(@))\r
 439         switch $(@).attr('column')\r
 440           when 'x', 'y'\r
 441             $(@).focusout ->\r
 442               trace = editor.element_tag_id($(@))\r
 443               refresh_ground_picture(trace)\r
 444             $(@).spinner {\r
 445               stop: ( event, ui ) ->\r
 446                 trace = editor.element_tag_id($(@))\r
 447                 refresh_ground_picture(trace)\r
 448             }\r
 449     $('select').map  ->\r
 450       if editor.element_is('ground_picture', $(@))\r
 451         $(@).change ->\r
 452           switch $(@).attr('column')\r
 453             when 'repeat'\r
 454               trace = editor.element_tag_id($(@))\r
 455               v = parseInt($(@).val())\r
 456               $(trace).css('background-repeat', editor.repeat_texts[v])\r
 457       else\r
 458     \r
 459     \r
 460     # ground_color\r
 461     ColorHelper.add_helper($('.ground_color-code-wrap'), 'code')\r
 462     \r
 463     refresh_ground_color = (element_trace)  ->\r
 464       orientation = parseInt( $(element_trace + 'orientation').val() )\r
 465       xy = $(element_trace + 'xy').val()\r
 466       wh = $(element_trace + 'wh').val()\r
 467       div_offset = if xy\r
 468         xy\r
 469       else\r
 470         0\r
 471       div_size = if wh\r
 472         wh\r
 473       else\r
 474         100 - div_offset\r
 475       div_x = if orientation == 0\r
 476         0\r
 477       else\r
 478         div_offset\r
 479       div_y = if orientation == 0\r
 480         div_offset\r
 481       else\r
 482         0\r
 483       div_width = if orientation == 0\r
 484         100\r
 485       else\r
 486         div_size\r
 487       div_height = if orientation == 0\r
 488         div_size\r
 489       else\r
 490         100\r
 491       div = $(element_trace)\r
 492       div.css('left', div_x.toString() + '%')\r
 493       div.css('top', div_y.toString() + '%')\r
 494       div.css('width', div_width.toString() + '%')\r
 495       div.css('height', div_height.toString() + '%')\r
 496     \r
 497     # sync view \r
 498     $('input').map  ->\r
 499       if editor.element_is('ground_color', $(@))\r
 500         switch $(@).attr('column')\r
 501           when 'code'\r
 502             $(@).hide()\r
 503           when 'xy', 'wh'\r
 504             $(@).spinner {\r
 505               stop: ( event, ui ) ->\r
 506                 trace = editor.element_tag_id($(@))\r
 507                 refresh_ground_color(trace)\r
 508               , min: 0\r
 509               , max: 100\r
 510             }\r
 511             $(@).focusout ->\r
 512               trace = editor.element_tag_id($(@))\r
 513               refresh_ground_color(trace)\r
 514     \r
 515     $('select').map  ->\r
 516       if editor.element_is('ground_color', $(@))\r
 517         switch $(@).attr('column')\r
 518           when 'orientation'\r
 519             $(@).change ->\r
 520               trace = editor.element_tag_id($(@))\r
 521               refresh_ground_color(trace)\r
 522 \r
 523     update_t = (ultrace) -> \r
 524       t = 0\r
 525       $(ultrace + ' li').map ->\r
 526         trace = editor.element_tag_id($(@))\r
 527         if $(trace + '_destroy').val().length < 1\r
 528           $(trace + 't').val(t)\r
 529           t++\r
 530         else\r
 531     \r
 532     $('.tsort').map -> \r
 533       $(@).sortable {\r
 534         update: ( event, ui ) ->\r
 535           trace = editor.panel_tag_id($(@))\r
 536           update_t(trace + 'tsort')\r
 537       }\r
 538     $('.t-sort li').map -> \r
 539       $(@).disableSelection()\r
 540     \r
 541     update_z = (ultrace) -> \r
 542       z = 1\r
 543       $(ultrace + ' li').map ->\r
 544         trace = editor.element_tag_id($(@))\r
 545         # update panel\r
 546         if $(trace + '_destroy').val().length < 1\r
 547           $(trace + 'z').val(z)\r
 548           switch $(@).attr('element_type')\r
 549             when 'panel_picture'\r
 550               trace = trace + 'div'\r
 551           $(trace).css('zIndex', z)\r
 552           z++\r
 553         else\r
 554     \r
 555     $('.zsort').map -> \r
 556       $(@).sortable {\r
 557         update: ( event, ui ) ->\r
 558           trace = editor.panel_tag_id($(@))\r
 559           update_z(trace + 'zsort')\r
 560       }\r
 561     $('.z-sort li').map -> \r
 562       $(@).disableSelection()\r
 563     \r
 564     # all\r
 565     # disable form actions\r
 566     # hide submit buttons\r
 567     $('.edit_panel_picture' ).map ->\r
 568       $(@).submit ->\r
 569         false\r
 570     $('.edit_speech_balloon' ).map ->\r
 571       $(@).submit ->\r
 572         false\r
 573     $('.edit_ground_picture' ).map ->\r
 574       $(@).submit ->\r
 575         false\r
 576     $('.edit_ground_color' ).map ->\r
 577       $(@).submit ->\r
 578         false\r
 579     \r
 580     $('.edit_panel' ).map ->\r
 581       if $(@).attr('jqform')\r
 582         $(@).submit ->\r
 583           if validate_forms()\r
 584             true\r
 585           else\r
 586             false\r
 587       else\r
 588         $(@).submit ->\r
 589           false\r
 590     \r
 591     $('.submit' ).map ->\r
 592       $(@).hide()\r
 593     \r
 594     # disable form z t\r
 595     $('input').map  ->\r
 596       if editor.is_element($(@))\r
 597         switch $(@).attr('column')\r
 598           when 'z' , 't'\r
 599             $(@).hide()\r
 600             $(@).parent().hide() #label\r
 601     \r
 602     # add button on new form\r
 603     $('.submit-new-form').map ->\r
 604       $(@).html('<button class="new-element">add</button>')\r
 605     \r
 606     $('.new-element').map ->\r
 607       $(@).click -> \r
 608         false\r
 609     j = JSON.stringify(window.configurations)\r
 610     $('#pettanr-configurations').val(j)\r
 611 \r