addons/website/static/src/js/website.editor.js

   1 (function () {
   2     'use strict';
   3
   4     var website = openerp.website;
   5     var _t = openerp._t;
   6
   7     website.add_template_file('/website/static/src/xml/website.editor.xml');
   8     website.dom_ready.done(function () {
   9         var is_smartphone = $(document.body)[0].clientWidth < 767;
  10
  11         if (!is_smartphone) {
  12             website.ready().then(website.init_editor);
  13         } else {
  14             // remove padding of fake editor bar
  15             document.body.style.padding = 0;
  16         }
  17
  18         $(document).on('click', 'a.js_link2post', function (ev) {
  19             ev.preventDefault();
  20             website.form(this.pathname, 'POST');
  21         });
  22
  23         $(document).on('click', '.cke_editable label', function (ev) {
  24             ev.preventDefault();
  25         });
  26
  27         $(document).on('submit', '.cke_editable form', function (ev) {
  28             // Disable form submition in editable mode
  29             ev.preventDefault();
  30         });
  31
  32         $(document).on('hide.bs.dropdown', '.dropdown', function (ev) {
  33             // Prevent dropdown closing when a contenteditable children is focused
  34             if (ev.originalEvent
  35                     && $(ev.target).has(ev.originalEvent.target).length
  36                     && $(ev.originalEvent.target).is('[contenteditable]')) {
  37                 ev.preventDefault();
  38             }
  39         });
  40     });
  41
  42     /**
  43      * An editing host is an HTML element with @contenteditable=true, or the
  44      * child of a document in designMode=on (but that one's not supported)
  45      *
  46      * https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#editing-host
  47      */
  48     function is_editing_host(element) {
  49         return element.getAttribute('contentEditable') === 'true';
  50     }
  51     /**
  52      * Checks that both the element's content *and the element itself* are
  53      * editable: an editing host is considered non-editable because its content
  54      * is editable but its attributes should not be considered editable
  55      */
  56     function is_editable_node(element) {
  57         return !(element.data('oe-model') === 'ir.ui.view'
  58               || element.data('cke-realelement')
  59               || (is_editing_host(element) && element.getAttribute('attributeEditable') !== 'true')
  60               || element.isReadOnly());
  61     }
  62
  63     function link_dialog(editor) {
  64         return new website.editor.RTELinkDialog(editor).appendTo(document.body);
  65     }
  66     function image_dialog(editor, image) {
  67         return new website.editor.MediaDialog(editor, image).appendTo(document.body);
  68     }
  69
  70     // only enable editors manually
  71     CKEDITOR.disableAutoInline = true;
  72     // EDIT ALL THE THINGS
  73     CKEDITOR.dtd.$editable = _.omit(
  74         $.extend({}, CKEDITOR.dtd.$block, CKEDITOR.dtd.$inline),
  75         // well maybe not *all* the things
  76         'ul', 'ol', 'li', 'table', 'tr', 'th', 'td');
  77     // Disable removal of empty elements on CKEDITOR activation. Empty
  78     // elements are used for e.g. support of FontAwesome icons
  79     CKEDITOR.dtd.$removeEmpty = {};
  80
  81     website.init_editor = function () {
  82         CKEDITOR.plugins.add('customdialogs', {
  83             // requires: 'link,image',
  84             init: function (editor) {
  85                 editor.on('doubleclick', function (evt) {
  86                     var element = evt.data.element;
  87                     if ((element.is('img') || element.$.className.indexOf(' fa-') != -1) && is_editable_node(element)) {
  88                         image_dialog(editor, element);
  89                         return;
  90                     }
  91                     var parent = new CKEDITOR.dom.element(element.$.parentNode);
  92                     if (parent.$.className.indexOf('media_iframe_video') != -1 && is_editable_node(parent)) {
  93                         image_dialog(editor, parent);
  94                         return;
  95                     }
  96
  97                     element = get_selected_link(editor) || evt.data.element;
  98                     if (!(element.is('a') && is_editable_node(element))) {
  99                         return;
 100                     }
 101
 102                     editor.getSelection().selectElement(element);
 103                     link_dialog(editor);
 104                 }, null, null, 500);
 105
 106                 //noinspection JSValidateTypes
 107                 editor.addCommand('link', {
 108                     exec: function (editor) {
 109                         link_dialog(editor);
 110                         return true;
 111                     },
 112                     canUndo: false,
 113                     editorFocus: true,
 114                     context: 'a',
 115                 });
 116                 //noinspection JSValidateTypes
 117                 editor.addCommand('cimage', {
 118                     exec: function (editor) {
 119                         image_dialog(editor);
 120                         return true;
 121                     },
 122                     canUndo: false,
 123                     editorFocus: true,
 124                     context: 'img',
 125                 });
 126
 127                 editor.ui.addButton('Link', {
 128                     label: 'Link',
 129                     command: 'link',
 130                     toolbar: 'links,10',
 131                 });
 132                 editor.ui.addButton('Image', {
 133                     label: 'Image',
 134                     command: 'cimage',
 135                     toolbar: 'insert,10',
 136                 });
 137
 138                 editor.setKeystroke(CKEDITOR.CTRL + 76 /*L*/, 'link');
 139             }
 140         });
 141         CKEDITOR.plugins.add( 'tablebutton', {
 142             requires: 'panelbutton,floatpanel',
 143             init: function( editor ) {
 144                 var label = "Table";
 145
 146                 editor.ui.add('TableButton', CKEDITOR.UI_PANELBUTTON, {
 147                     label: label,
 148                     title: label,
 149                     // use existing 'table' icon
 150                     icon: 'table',
 151                     modes: { wysiwyg: true },
 152                     editorFocus: true,
 153                     // panel opens in iframe, @css is CSS file <link>-ed within
 154                     // frame document, @attributes are set on iframe itself.
 155                     panel: {
 156                         css: '/website/static/src/css/editor.css',
 157                         attributes: { 'role': 'listbox', 'aria-label': label, },
 158                     },
 159
 160                     onBlock: function (panel, block) {
 161                         block.autoSize = true;
 162                         block.element.setHtml(openerp.qweb.render('website.editor.table.panel', {
 163                             rows: 5,
 164                             cols: 5,
 165                         }));
 166
 167                         var $table = $(block.element.$).on('mouseenter', 'td', function (e) {
 168                             var $e = $(e.target);
 169                             var y = $e.index() + 1;
 170                             var x = $e.closest('tr').index() + 1;
 171
 172                             $table
 173                                 .find('td').removeClass('selected').end()
 174                                 .find('tr:lt(' + String(x) + ')')
 175                                 .children().filter(function () { return $(this).index() < y; })
 176                                 .addClass('selected');
 177                         }).on('click', 'td', function (e) {
 178                             var $e = $(e.target);
 179
 180                             //noinspection JSPotentiallyInvalidConstructorUsage
 181                             var table = new CKEDITOR.dom.element(
 182                                 $(openerp.qweb.render('website.editor.table', {
 183                                     rows: $e.closest('tr').index() + 1,
 184                                     cols: $e.index() + 1,
 185                                 }))[0]);
 186
 187                             editor.insertElement(table);
 188                             setTimeout(function () {
 189                                 //noinspection JSPotentiallyInvalidConstructorUsage
 190                                 var firstCell = new CKEDITOR.dom.element(table.$.rows[0].cells[0]);
 191                                 var range = editor.createRange();
 192                                 range.moveToPosition(firstCell, CKEDITOR.POSITION_AFTER_START);
 193                                 range.select();
 194                             }, 0);
 195                         });
 196
 197                         block.element.getDocument().getBody().setStyle('overflow', 'hidden');
 198                         CKEDITOR.ui.fire('ready', this);
 199                     },
 200                 });
 201             }
 202         });
 203
 204         CKEDITOR.plugins.add('linkstyle', {
 205             requires: 'panelbutton,floatpanel',
 206             init: function (editor) {
 207                 var label = "Link Style";
 208
 209                 editor.ui.add('LinkStyle', CKEDITOR.UI_PANELBUTTON, {
 210                     label: label,
 211                     title: label,
 212                     icon: '/website/static/src/img/bglink.png',
 213                     modes: { wysiwyg: true },
 214                     editorFocus: true,
 215                     context: 'a',
 216                     panel: {
 217                         css: '/web/static/lib/bootstrap/css/bootstrap.css',
 218                         attributes: { 'role': 'listbox', 'aria-label': label },
 219                     },
 220
 221                     types: {
 222                         'btn-default': _t("Basic"),
 223                         'btn-primary': _t("Primary"),
 224                         'btn-success': _t("Success"),
 225                         'btn-info': _t("Info"),
 226                         'btn-warning': _t("Warning"),
 227                         'btn-danger': _t("Danger"),
 228                     },
 229                     sizes: {
 230                         'btn-xs': _t("Extra Small"),
 231                         'btn-sm': _t("Small"),
 232                         '': _t("Default"),
 233                         'btn-lg': _t("Large")
 234                     },
 235
 236                     onRender: function () {
 237                         var self = this;
 238                         editor.on('selectionChange', function (e) {
 239                             var path = e.data.path, el;
 240
 241                             if (!(e = path.contains('a')) || e.isReadOnly()) {
 242                                 self.disable();
 243                                 return;
 244                             }
 245
 246                             self.enable();
 247                         });
 248                         // no hook where button is available, so wait
 249                         // "some time" after render.
 250                         setTimeout(function () {
 251                             self.disable();
 252                         }, 0)
 253                     },
 254                     enable: function () {
 255                         this.setState(CKEDITOR.TRISTATE_OFF);
 256                     },
 257                     disable: function () {
 258                         this.setState(CKEDITOR.TRISTATE_DISABLED);
 259                     },
 260
 261                     onOpen: function () {
 262                         var link = get_selected_link(editor);
 263                         var id = this._.id;
 264                         var block = this._.panel._.panel._.blocks[id];
 265                         var $root = $(block.element.$);
 266                         $root.find('button').removeClass('active').removeProp('disabled');
 267
 268                         // enable buttons matching link state
 269                         for (var type in this.types) {
 270                             if (!this.types.hasOwnProperty(type)) { continue; }
 271                             if (!link.hasClass(type)) { continue; }
 272
 273                             $root.find('button[data-type=types].' + type)
 274                                  .addClass('active');
 275                         }
 276                         var found;
 277                         for (var size in this.sizes) {
 278                             if (!this.sizes.hasOwnProperty(size)) { continue; }
 279                             if (!size || !link.hasClass(size)) { continue; }
 280                             found = true;
 281                             $root.find('button[data-type=sizes].' + size)
 282                                  .addClass('active');
 283                         }
 284                         if (!found && link.hasClass('btn')) {
 285                             $root.find('button[data-type="sizes"][data-set-class=""]')
 286                                  .addClass('active');
 287                         }
 288                     },
 289
 290                     onBlock: function (panel, block) {
 291                         var self = this;
 292                         block.autoSize = true;
 293
 294                         var html = ['<div style="padding: 5px">'];
 295                         html.push('<div style="white-space: nowrap">');
 296                         _(this.types).each(function (label, key) {
 297                             html.push(_.str.sprintf(
 298                                 '<button type="button" class="btn %s" ' +
 299                                         'data-type="types" data-set-class="%s">%s</button>',
 300                                 key, key, label));
 301                         });
 302                         html.push('</div>');
 303                         html.push('<div style="white-space: nowrap; margin: 5px 0; text-align: center">');
 304                         _(this.sizes).each(function (label, key) {
 305                             html.push(_.str.sprintf(
 306                                 '<button type="button" class="btn btn-default %s" ' +
 307                                         'data-type="sizes" data-set-class="%s">%s</button>',
 308                                 key, key, label));
 309                         });
 310                         html.push('</div>');
 311                         html.push('<button type="button" class="btn btn-link btn-block" ' +
 312                                           'data-type="reset">Reset</button>');
 313                         html.push('</div>');
 314
 315                         block.element.setHtml(html.join(' '));
 316                         var $panel = $(block.element.$);
 317                         $panel.on('click', 'button', function () {
 318                             self.clicked(this);
 319                         });
 320                     },
 321                     clicked: function (button) {
 322                         editor.focus();
 323                         editor.fire('saveSnapshot');
 324
 325                         var $button = $(button),
 326                               $link = $(get_selected_link(editor).$);
 327                         if (!$link.hasClass('btn')) {
 328                             $link.addClass('btn btn-default');
 329                         }
 330                         switch($button.data('type')) {
 331                         case 'reset':
 332                             $link.removeClass('btn')
 333                                  .removeClass(_.keys(this.types).join(' '))
 334                                  .removeClass(_.keys(this.sizes).join(' '));
 335                             break;
 336                         case 'types':
 337                             $link.removeClass(_.keys(this.types).join(' '))
 338                                  .addClass($button.data('set-class'));
 339                             break;
 340                         case 'sizes':
 341                             $link.removeClass(_.keys(this.sizes).join(' '))
 342                                  .addClass($button.data('set-class'));
 343                         }
 344                         this._.panel.hide();
 345
 346                         editor.fire('saveSnapshot');
 347                     },
 348
 349                 });
 350             }
 351         });
 352
 353         CKEDITOR.plugins.add('oeref', {
 354             requires: 'widget',
 355
 356             init: function (editor) {
 357                 var specials = {
 358                     // Can't find the correct ACL rule to only allow img tags
 359                     image: { content: '*' },
 360                     html: { text: '*' },
 361                     monetary: {
 362                         text: {
 363                             selector: 'span.oe_currency_value',
 364                             allowedContent: { }
 365                         }
 366                     }
 367                 };
 368                 _(specials).each(function (editable, type) {
 369                     editor.widgets.add(type, {
 370                         draggable: false,
 371                         editables: editable,
 372                         upcast: function (el) {
 373                             return  el.attributes['data-oe-type'] === type;
 374
 375                         }
 376                     });
 377                 });
 378                 editor.widgets.add('oeref', {
 379                     draggable: false,
 380                     editables: {
 381                         text: {
 382                             selector: '*',
 383                             allowedContent: { }
 384                         },
 385                     },
 386                     upcast: function (el) {
 387                         var type = el.attributes['data-oe-type'];
 388                         if (!type || (type in specials)) {
 389                             return false;
 390                         }
 391                         if (el.attributes['data-oe-original']) {
 392                             while (el.children.length) {
 393                                 el.children[0].remove();
 394                             }
 395                             el.add(new CKEDITOR.htmlParser.text(
 396                                 el.attributes['data-oe-original']
 397                             ));
 398                         }
 399                         return true;
 400                     }
 401                 });
 402
 403                 editor.widgets.add('icons', {
 404                     draggable: false,
 405
 406                     init: function () {
 407                         this.on('edit', function () {
 408                             new website.editor.MediaDialog(editor, this.element)
 409                                 .appendTo(document.body);
 410                         });
 411                     },
 412                     upcast: function (el) {
 413                         return el.hasClass('fa')
 414                             // ignore ir.ui.view (other data-oe-model should
 415                             // already have been matched by oeref and
 416                             // monetary?
 417                             && !el.attributes['data-oe-model'];
 418                     }
 419                 });
 420             }
 421         });
 422
 423         var editor = new website.EditorBar();
 424         var $body = $(document.body);
 425         editor.prependTo($body).then(function () {
 426             if (location.search.indexOf("enable_editor") >= 0) {
 427                 editor.edit();
 428             }
 429         });
 430     };
 431
 432     /* ----- TOP EDITOR BAR FOR ADMIN ---- */
 433     website.EditorBar = openerp.Widget.extend({
 434         template: 'website.editorbar',
 435         events: {
 436             'click button[data-action=edit]': 'edit',
 437             'click button[data-action=save]': 'save',
 438             'click a[data-action=cancel]': 'cancel',
 439         },
 440         container: 'body',
 441         customize_setup: function() {
 442             var self = this;
 443             var view_name = $(document.documentElement).data('view-xmlid');
 444             if (!view_name) {
 445                 this.$('#customize-menu-button').addClass("hidden");
 446             }
 447             var menu = $('#customize-menu');
 448             this.$('#customize-menu-button').click(function(event) {
 449                 menu.empty();
 450                 openerp.jsonRpc('/website/customize_template_get', 'call', { 'xml_id': view_name }).then(
 451                     function(result) {
 452                         _.each(result, function (item) {
 453                             if (item.xml_id === "website.debugger" && !window.location.search.match(/[&?]debug(&|$)/)) return;
 454                             if (item.header) {
 455                                 menu.append('<li class="dropdown-header">' + item.name + '</li>');
 456                             } else {
 457                                 menu.append(_.str.sprintf('<li role="presentation"><a href="#" data-view-id="%s" role="menuitem"><strong class="fa fa%s-square-o"></strong> %s</a></li>',
 458                                     item.id, item.active ? '-check' : '', item.name));
 459                             }
 460                         });
 461                         // Adding Static Menus
 462                         menu.append('<li class="divider"></li>');
 463                         menu.append('<li><a data-action="ace" href="#">HTML Editor</a></li>');
 464                         menu.append('<li class="js_change_theme"><a href="/page/website.themes">Change Theme</a></li>');
 465                         menu.append('<li><a href="/web#return_label=Website&action=website.action_module_website">Install Apps</a></li>');
 466                         self.trigger('rte:customize_menu_ready');
 467                     }
 468                 );
 469             });
 470             menu.on('click', 'a[data-action!=ace]', function (event) {
 471                 var view_id = $(event.currentTarget).data('view-id');
 472                 openerp.jsonRpc('/website/customize_template_toggle', 'call', {
 473                     'view_id': view_id
 474                 }).then( function() {
 475                     window.location.reload();
 476                 });
 477             });
 478         },
 479         start: function() {
 480             // remove placeholder editor bar
 481             var fakebar = document.getElementById('website-top-navbar-placeholder');
 482             if (fakebar) {
 483                 fakebar.parentNode.removeChild(fakebar);
 484             }
 485
 486             var self = this;
 487             this.saving_mutex = new openerp.Mutex();
 488
 489             this.$('#website-top-edit').hide();
 490             this.$('#website-top-view').show();
 491
 492             $('.dropdown-toggle').dropdown();
 493             this.customize_setup();
 494
 495             this.$buttons = {
 496                 edit: this.$('button[data-action=edit]'),
 497                 save: this.$('button[data-action=save]'),
 498                 cancel: this.$('button[data-action=cancel]'),
 499             };
 500
 501             this.rte = new website.RTE(this);
 502             this.rte.on('change', this, this.proxy('rte_changed'));
 503             this.rte.on('rte:ready', this, function () {
 504                 self.setup_hover_buttons();
 505                 self.trigger('rte:ready');
 506                 self.check_height();
 507             });
 508
 509             $(window).on('resize', _.debounce(this.check_height.bind(this), 50));
 510             this.check_height();
 511
 512             if (website.is_editable_button) {
 513                 this.$("button[data-action=edit]").removeClass("hidden");
 514             }
 515
 516             return $.when(
 517                 this._super.apply(this, arguments),
 518                 this.rte.appendTo(this.$('#website-top-edit .nav.pull-right'))
 519             ).then(function () {
 520                 self.check_height();
 521             });
 522         },
 523         check_height: function () {
 524             var editor_height = this.$el.outerHeight();
 525             if (this.get('height') != editor_height) {
 526                 $(document.body).css('padding-top', editor_height);
 527                 this.set('height', editor_height);
 528             }
 529         },
 530         edit: function () {
 531             this.$buttons.edit.prop('disabled', true);
 532             this.$('#website-top-view').hide();
 533             this.$('#website-top-edit').show();
 534             $('.css_non_editable_mode_hidden').removeClass("css_non_editable_mode_hidden");
 535
 536             this.rte.start_edition().then(this.check_height.bind(this));
 537             this.trigger('rte:called');
 538         },
 539         rte_changed: function () {
 540             this.$buttons.save.prop('disabled', false);
 541         },
 542         save: function () {
 543             var self = this;
 544
 545             observer.disconnect();
 546             var editor = this.rte.editor;
 547             var root = editor.element.$;
 548             editor.destroy();
 549             // FIXME: select editables then filter by dirty?
 550             var defs = this.rte.fetch_editables(root)
 551                 .filter('.oe_dirty')
 552                 .removeAttr('contentEditable')
 553                 .removeClass('oe_dirty oe_editable cke_focus oe_carlos_danger')
 554                 .map(function () {
 555                     var $el = $(this);
 556                     // TODO: Add a queue with concurrency limit in webclient
 557                     // https://github.com/medikoo/deferred/blob/master/lib/ext/function/gate.js
 558                     return self.saving_mutex.exec(function () {
 559                         return self.saveElement($el)
 560                             .then(undefined, function (thing, response) {
 561                                 // because ckeditor regenerates all the dom,
 562                                 // we can't just setup the popover here as
 563                                 // everything will be destroyed by the DOM
 564                                 // regeneration. Add markings instead, and
 565                                 // returns a new rejection with all relevant
 566                                 // info
 567                                 var id = _.uniqueId('carlos_danger_');
 568                                 $el.addClass('oe_dirty oe_carlos_danger');
 569                                 $el.addClass(id);
 570                                 return $.Deferred().reject({
 571                                     id: id,
 572                                     error: response.data,
 573                                 });
 574                             });
 575                     });
 576                 }).get();
 577             return $.when.apply(null, defs).then(function () {
 578                 website.reload();
 579             }, function (failed) {
 580                 // If there were errors, re-enable edition
 581                 self.rte.start_edition(true).then(function () {
 582                     // jquery's deferred being a pain in the ass
 583                     if (!_.isArray(failed)) { failed = [failed]; }
 584
 585                     _(failed).each(function (failure) {
 586                         var html = failure.error.exception_type === "except_osv";
 587                         if (html) {
 588                             var msg = $("<div/>").text(failure.error.message).html();
 589                             var data = msg.substring(3,msg.length-2).split(/', u'/);
 590                             failure.error.message = '<b>' + data[0] + '</b><br/>' + data[1];
 591                         }
 592                         $(root).find('.' + failure.id)
 593                             .removeClass(failure.id)
 594                             .popover({
 595                                 html: html,
 596                                 trigger: 'hover',
 597                                 content: failure.error.message,
 598                                 placement: 'auto top',
 599                             })
 600                             // Force-show popovers so users will notice them.
 601                             .popover('show');
 602                     });
 603                 });
 604             });
 605         },
 606         /**
 607          * Saves an RTE content, which always corresponds to a view section (?).
 608          */
 609         saveElement: function ($el) {
 610             var markup = $el.prop('outerHTML');
 611             return openerp.jsonRpc('/web/dataset/call', 'call', {
 612                 model: 'ir.ui.view',
 613                 method: 'save',
 614                 args: [$el.data('oe-id'), markup,
 615                        $el.data('oe-xpath') || null,
 616                        website.get_context()],
 617             });
 618         },
 619         cancel: function () {
 620             new $.Deferred(function (d) {
 621                 var $dialog = $(openerp.qweb.render('website.editor.discard')).appendTo(document.body);
 622                 $dialog.on('click', '.btn-danger', function () {
 623                     d.resolve();
 624                 }).on('hidden.bs.modal', function () {
 625                     d.reject();
 626                 });
 627                 d.always(function () {
 628                     $dialog.remove();
 629                 });
 630                 $dialog.modal('show');
 631             }).then(function () {
 632                 website.reload();
 633             })
 634         },
 635
 636         /**
 637          * Creates a "hover" button for link edition
 638          *
 639          * @param {Function} editfn edition function, called when clicking the button
 640          * @returns {jQuery}
 641          */
 642         make_hover_button_link: function (editfn) {
 643             return $(openerp.qweb.render('website.editor.hoverbutton.link', {}))
 644                 .hide()
 645                 .click(function (e) {
 646                     e.preventDefault();
 647                     e.stopPropagation();
 648                     editfn.call(this, e);
 649                 })
 650                 .appendTo(document.body);
 651         },
 652
 653         /**
 654          * Creates a "hover" button for image
 655          *
 656          * @param {Function} editfn edition function, called when clicking the button
 657          * @param {Function} stylefn edition style function, called when clicking the button
 658          * @returns {jQuery}
 659          */
 660         make_hover_button_image: function (editfn, stylefn) {
 661             var $div = $(openerp.qweb.render('website.editor.hoverbutton.media', {}))
 662                 .hide()
 663                 .appendTo(document.body);
 664
 665             $div.find('[data-toggle="dropdown"]').dropdown();
 666             $div.find(".hover-edition-button").click(function (e) {
 667                 e.preventDefault();
 668                 e.stopPropagation();
 669                 editfn.call(this, e);
 670             });
 671             if (stylefn) {
 672                 $div.find(".hover-style-button").click(function (e) {
 673                     e.preventDefault();
 674                     e.stopPropagation();
 675                     stylefn.call(this, e);
 676                 });
 677             }
 678             return $div;
 679         },
 680         /**
 681          * For UI clarity, during RTE edition when the user hovers links and
 682          * images a small button should appear to make the capability clear,
 683          * as not all users think of double-clicking the image or link.
 684          */
 685         setup_hover_buttons: function () {
 686             var editor = this.rte.editor;
 687             var $link_button = this.make_hover_button_link(function () {
 688                 var sel = new CKEDITOR.dom.element(previous);
 689                 editor.getSelection().selectElement(sel);
 690                 if(sel.hasClass('fa')) {
 691                     new website.editor.MediaDialog(editor, previous)
 692                         .appendTo(document.body);
 693                 } else if (previous.tagName.toUpperCase() === 'A') {
 694                     link_dialog(editor);
 695                 }
 696                 $link_button.hide();
 697                 previous = null;
 698             });
 699
 700             function is_icons_widget(element) {
 701                 var w = editor.widgets.getByElement(element);
 702                 return w && w.name === 'icons';
 703             }
 704
 705             // previous is the state of the button-trigger: it's the
 706             // currently-ish hovered element which can trigger a button showing.
 707             // -ish, because when moving to the button itself ``previous`` is
 708             // still set to the element having triggered showing the button.
 709             var previous;
 710             $(editor.element.$).on('mouseover', 'a', function () {
 711                 // Back from edit button -> ignore
 712                 if (previous && previous === this) { return; }
 713
 714                 // hover button should appear for "editable" links and images
 715                 // (img and a nodes whose *attributes* are editable, they
 716                 // can not be "editing hosts") *or* for non-editing-host
 717                 // elements bearing an ``fa`` class. These should have been
 718                 // made into CKE widgets which are editing hosts by
 719                 // definition, so instead check if the element has been
 720                 // converted/upcasted to an fa widget
 721                 var selected = new CKEDITOR.dom.element(this);
 722                 if (!(is_editable_node(selected) || is_icons_widget(selected))) {
 723                     return;
 724                 }
 725
 726                 previous = this;
 727                 var $selected = $(this);
 728                 var position = $selected.offset();
 729                 $link_button.show().offset({
 730                     top: $selected.outerHeight()
 731                             + position.top,
 732                     left: $selected.outerWidth() / 2
 733                             + position.left
 734                             - $link_button.outerWidth() / 2
 735                 })
 736             }).on('mouseleave', 'a, img, .fa', function (e) {
 737                 var current = document.elementFromPoint(e.clientX, e.clientY);
 738                 if (current === $link_button[0] || $(current).parent()[0] === $link_button[0]) {
 739                     return;
 740                 }
 741                 $link_button.hide();
 742                 previous = null;
 743             });
 744         }
 745     });
 746
 747     var blocks_selector = _.keys(CKEDITOR.dtd.$block).join(',');
 748     /* ----- RICH TEXT EDITOR ---- */
 749     website.RTE = openerp.Widget.extend({
 750         tagName: 'li',
 751         id: 'oe_rte_toolbar',
 752         className: 'oe_right oe_rte_toolbar',
 753         // editor.ui.items -> possible commands &al
 754         // editor.applyStyle(new CKEDITOR.style({element: "span",styles: {color: "#(color)"},overrides: [{element: "font",attributes: {color: null}}]}, {color: '#ff0000'}));
 755
 756         init: function (EditorBar) {
 757             this.EditorBar = EditorBar;
 758             this._super.apply(this, arguments);
 759         },
 760
 761         /**
 762          * In Webkit-based browsers, triple-click will select a paragraph up to
 763          * the start of the next "paragraph" including any empty space
 764          * inbetween. When said paragraph is removed or altered, it nukes
 765          * the empty space and brings part of the content of the next
 766          * "paragraph" (which may well be e.g. an image) into the current one,
 767          * completely fucking up layouts and breaking snippets.
 768          *
 769          * Try to fuck around with selections on triple-click to attempt to
 770          * fix this garbage behavior.
 771          *
 772          * Note: for consistent behavior we may actually want to take over
 773          * triple-clicks, in all browsers in order to ensure consistent cross-
 774          * platform behavior instead of being at the mercy of rendering engines
 775          * & platform selection quirks?
 776          */
 777         webkitSelectionFixer: function (root) {
 778             root.addEventListener('click', function (e) {
 779                 // only webkit seems to have a fucked up behavior, ignore others
 780                 // FIXME: $.browser goes away in jquery 1.9...
 781                 if (!$.browser.webkit) { return; }
 782                 // http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mouseevents
 783                 // The detail attribute indicates the number of times a mouse button has been pressed
 784                 // we just want the triple click
 785                 if (e.detail !== 3) { return; }
 786                 e.preventDefault();
 787
 788                 // Get closest block-level element to the triple-clicked
 789                 // element (using ckeditor's block list because why not)
 790                 var $closest_block = $(e.target).closest(blocks_selector);
 791
 792                 // manually set selection range to the content of the
 793                 // triple-clicked block-level element, to avoid crossing over
 794                 // between block-level elements
 795                 document.getSelection().selectAllChildren($closest_block[0]);
 796             });
 797         },
 798         tableNavigation: function (root) {
 799             var self = this;
 800             $(root).on('keydown', function (e) {
 801                 // ignore non-TAB
 802                 if (e.which !== 9) { return; }
 803
 804                 if (self.handleTab(e)) {
 805                     e.preventDefault();
 806                 }
 807             });
 808         },
 809         /**
 810          * Performs whatever operation is necessary on a [TAB] hit, returns
 811          * ``true`` if the event's default should be cancelled (if the TAB was
 812          * handled by the function)
 813          */
 814         handleTab: function (event) {
 815             var forward = !event.shiftKey;
 816
 817             var root = window.getSelection().getRangeAt(0).commonAncestorContainer;
 818             var $cell = $(root).closest('td,th');
 819
 820             if (!$cell.length) { return false; }
 821
 822             var cell = $cell[0];
 823
 824             // find cell in same row
 825             var row = cell.parentNode;
 826             var sibling = row.cells[cell.cellIndex + (forward ? 1 : -1)];
 827             if (sibling) {
 828                 document.getSelection().selectAllChildren(sibling);
 829                 return true;
 830             }
 831
 832             // find cell in previous/next row
 833             var table = row.parentNode;
 834             var sibling_row = table.rows[row.rowIndex + (forward ? 1 : -1)];
 835             if (sibling_row) {
 836                 var new_cell = sibling_row.cells[forward ? 0 : sibling_row.cells.length - 1];
 837                 document.getSelection().selectAllChildren(new_cell);
 838                 return true;
 839             }
 840
 841             // at edge cells, copy word/openoffice behavior: if going backwards
 842             // from first cell do nothing, if going forwards from last cell add
 843             // a row
 844             if (forward) {
 845                 var row_size = row.cells.length;
 846                 var new_row = document.createElement('tr');
 847                 while(row_size--) {
 848                     var newcell = document.createElement('td');
 849                     // zero-width space
 850                     newcell.textContent = '\u200B';
 851                     new_row.appendChild(newcell);
 852                 }
 853                 table.appendChild(new_row);
 854                 document.getSelection().selectAllChildren(new_row.cells[0]);
 855             }
 856
 857             return true;
 858         },
 859         /**
 860          * Makes the page editable
 861          *
 862          * @param {Boolean} [restart=false] in case the edition was already set
 863          *                                  up once and is being re-enabled.
 864          * @returns {$.Deferred} deferred indicating when the RTE is ready
 865          */
 866         start_edition: function (restart) {
 867             var self = this;
 868             // create a single editor for the whole page
 869             var root = document.getElementById('wrapwrap');
 870             if (!restart) {
 871                 $(root).on('dragstart', 'img', function (e) {
 872                     e.preventDefault();
 873                 });
 874                 this.webkitSelectionFixer(root);
 875                 this.tableNavigation(root);
 876             }
 877             var def = $.Deferred();
 878             var editor = this.editor = CKEDITOR.inline(root, self._config());
 879             editor.on('instanceReady', function () {
 880                 editor.setReadOnly(false);
 881                 // ckeditor set root to editable, disable it (only inner
 882                 // sections are editable)
 883                 // FIXME: are there cases where the whole editor is editable?
 884                 editor.editable().setReadOnly(true);
 885
 886                 self.setup_editables(root);
 887
 888                 try {
 889                     // disable firefox's broken table resizing thing
 890                     document.execCommand("enableObjectResizing", false, "false");
 891                     document.execCommand("enableInlineTableEditing", false, "false");
 892                 } catch (e) {}
 893
 894                 // detect & setup any CKEDITOR widget within a newly dropped
 895                 // snippet. There does not seem to be a simple way to do it for
 896                 // HTML not inserted via ckeditor APIs:
 897                 // https://dev.ckeditor.com/ticket/11472
 898                 $(document.body)
 899                     .off('snippet-dropped')
 900                     .on('snippet-dropped', function (e, el) {
 901                         // CKEDITOR data processor extended by widgets plugin
 902                         // to add wrappers around upcasting elements
 903                         el.innerHTML = editor.dataProcessor.toHtml(el.innerHTML, {
 904                             fixForBody: false,
 905                             dontFilter: true,
 906                         });
 907                         // then repository.initOnAll() handles the conversion
 908                         // from wrapper to actual widget instance (or something
 909                         // like that).
 910                         setTimeout(function () {
 911                             editor.widgets.initOnAll();
 912                         }, 0);
 913                     });
 914
 915                 self.trigger('rte:ready');
 916                 def.resolve();
 917             });
 918             return def;
 919         },
 920
 921         setup_editables: function (root) {
 922             // selection of editable sub-items was previously in
 923             // EditorBar#edit, but for some unknown reason the elements were
 924             // apparently removed and recreated (?) at editor initalization,
 925             // and observer setup was lost.
 926             var self = this;
 927             // setup dirty-marking for each editable element
 928             this.fetch_editables(root)
 929                 .addClass('oe_editable')
 930                 .each(function () {
 931                     var node = this;
 932                     var $node = $(node);
 933                     // only explicitly set contenteditable on view sections,
 934                     // cke widgets system will do the widgets themselves
 935                     if ($node.data('oe-model') === 'ir.ui.view') {
 936                         node.contentEditable = true;
 937                     }
 938
 939                     observer.observe(node, OBSERVER_CONFIG);
 940                     $node.one('content_changed', function () {
 941                         $node.addClass('oe_dirty');
 942                         self.trigger('change');
 943                     });
 944                 });
 945         },
 946
 947         fetch_editables: function (root) {
 948             return $(root).find('[data-oe-model]')
 949                 .not('link, script')
 950                 .not('.oe_snippet_editor')
 951                 .filter(function () {
 952                     var $this = $(this);
 953                     // keep view sections and fields which are *not* in
 954                     // view sections for top-level editables
 955                     return $this.data('oe-model') === 'ir.ui.view'
 956                        || !$this.closest('[data-oe-model = "ir.ui.view"]').length;
 957                 });
 958         },
 959
 960         _current_editor: function () {
 961             return CKEDITOR.currentInstance;
 962         },
 963         _config: function () {
 964             // base plugins minus
 965             // - magicline (captures mousein/mouseout -> breaks draggable)
 966             // - contextmenu & tabletools (disable contextual menu)
 967             // - bunch of unused plugins
 968             var plugins = [
 969                 'a11yhelp', 'basicstyles', 'blockquote',
 970                 'clipboard', 'colorbutton', 'colordialog', 'dialogadvtab',
 971                 'elementspath', /*'enterkey',*/ 'entities', 'filebrowser',
 972                 'find', 'floatingspace','format', 'htmlwriter', 'iframe',
 973                 'indentblock', 'indentlist', 'justify',
 974                 'list', 'pastefromword', 'pastetext', 'preview',
 975                 'removeformat', 'resize', 'save', 'selectall', 'stylescombo',
 976                 'table', 'templates', 'toolbar', 'undo', 'wysiwygarea'
 977             ];
 978             return {
 979                 // FIXME
 980                 language: 'en',
 981                 // Disable auto-generated titles
 982                 // FIXME: accessibility, need to generate user-sensible title, used for @title and @aria-label
 983                 title: false,
 984                 plugins: plugins.join(','),
 985                 uiColor: '',
 986                 // FIXME: currently breaks RTE?
 987                 // Ensure no config file is loaded
 988                 customConfig: '',
 989                 // Disable ACF
 990                 allowedContent: true,
 991                 // Don't insert paragraphs around content in e.g. <li>
 992                 autoParagraph: false,
 993                 // Don't automatically add &nbsp; or <br> in empty block-level
 994                 // elements when edition starts
 995                 fillEmptyBlocks: false,
 996                 filebrowserImageUploadUrl: "/website/attach",
 997                 // Support for sharedSpaces in 4.x
 998                 extraPlugins: 'sharedspace,customdialogs,tablebutton,oeref,linkstyle',
 999                 // Place toolbar in controlled location
1000                 sharedSpaces: { top: 'oe_rte_toolbar' },
1001                 toolbar: [{
1002                         name: 'basicstyles', items: [
1003                         "Bold", "Italic", "Underline", "Strike", "Subscript",
1004                         "Superscript", "TextColor", "BGColor", "RemoveFormat"
1005                     ]},{
1006                     name: 'span', items: [
1007                         "Link", "LinkStyle", "Blockquote", "BulletedList",
1008                         "NumberedList", "Indent", "Outdent"
1009                     ]},{
1010                     name: 'justify', items: [
1011                         "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock"
1012                     ]},{
1013                     name: 'special', items: [
1014                         "Image", "TableButton"
1015                     ]},{
1016                     name: 'styles', items: [
1017                         "Styles"
1018                     ]}
1019                 ],
1020                 // styles dropdown in toolbar
1021                 stylesSet: [
1022                     {name: "Normal", element: 'p'},
1023                     {name: "Heading 1", element: 'h1'},
1024                     {name: "Heading 2", element: 'h2'},
1025                     {name: "Heading 3", element: 'h3'},
1026                     {name: "Heading 4", element: 'h4'},
1027                     {name: "Heading 5", element: 'h5'},
1028                     {name: "Heading 6", element: 'h6'},
1029                     {name: "Formatted", element: 'pre'},
1030                     {name: "Address", element: 'address'}
1031                 ],
1032             };
1033         },
1034     });
1035
1036     website.editor = { };
1037     website.editor.Dialog = openerp.Widget.extend({
1038         events: {
1039             'hidden.bs.modal': 'destroy',
1040             'click button.save': 'save',
1041             'click button[data-dismiss="modal"]': 'cancel',
1042         },
1043         init: function (editor) {
1044             this._super();
1045             this.editor = editor;
1046         },
1047         start: function () {
1048             var sup = this._super();
1049             this.$el.modal({backdrop: 'static'});
1050             this.$('input:first').focus();
1051             return sup;
1052         },
1053         save: function () {
1054             this.close();
1055             this.trigger("saved");
1056         },
1057         cancel: function () {
1058         },
1059         close: function () {
1060             this.$el.modal('hide');
1061         },
1062     });
1063
1064     website.editor.LinkDialog = website.editor.Dialog.extend({
1065         template: 'website.editor.dialog.link',
1066         events: _.extend({}, website.editor.Dialog.prototype.events, {
1067             'change :input.url-source': function (e) { this.changed($(e.target)); },
1068             'mousedown': function (e) {
1069                 var $target = $(e.target).closest('.list-group-item');
1070                 if (!$target.length || $target.hasClass('active')) {
1071                     // clicked outside groups, or clicked in active groups
1072                     return;
1073                 }
1074
1075                 this.changed($target.find('.url-source').filter(':input'));
1076             },
1077             'click button.remove': 'remove_link',
1078             'change input#link-text': function (e) {
1079                 this.text = $(e.target).val()
1080             },
1081         }),
1082         init: function (editor) {
1083             this._super(editor);
1084             this.text = null;
1085             // Store last-performed request to be able to cancel/abort it.
1086             this.page_exists_req = null;
1087             this.search_pages_req = null;
1088         },
1089         start: function () {
1090             var self = this;
1091             var last;
1092             this.$('#link-page').select2({
1093                 minimumInputLength: 1,
1094                 placeholder: _t("New or existing page"),
1095                 query: function (q) {
1096                     if (q.term == last) return;
1097                     last = q.term;
1098                     $.when(
1099                         self.page_exists(q.term),
1100                         self.fetch_pages(q.term)
1101                     ).then(function (exists, results) {
1102                         var rs = _.map(results, function (r) {
1103                             return { id: r.url, text: r.name, };
1104                         });
1105                         if (!exists) {
1106                             rs.push({
1107                                 create: true,
1108                                 id: q.term,
1109                                 text: _.str.sprintf(_t("Create page '%s'"), q.term),
1110                             });
1111                         }
1112                         q.callback({
1113                             more: false,
1114                             results: rs
1115                         });
1116                     }, function () {
1117                         q.callback({more: false, results: []});
1118                     });
1119                 },
1120             });
1121             return this._super().then(this.proxy('bind_data'));
1122         },
1123         save: function () {
1124             var self = this, _super = this._super.bind(this);
1125             var $e = this.$('.list-group-item.active .url-source').filter(':input');
1126             var val = $e.val();
1127             if (!val || !$e[0].checkValidity()) {
1128                 // FIXME: error message
1129                 $e.closest('.form-group').addClass('has-error');
1130                 $e.focus();
1131                 return;
1132             }
1133
1134             var done = $.when();
1135             if ($e.hasClass('email-address')) {
1136                 this.make_link('mailto:' + val, false, val);
1137             } else if ($e.hasClass('page')) {
1138                 var data = $e.select2('data');
1139                 if (!data.create) {
1140                     self.make_link(data.id, false, data.text);
1141                 } else {
1142                     // Create the page, get the URL back
1143                     done = $.get(_.str.sprintf(
1144                             '/website/add/%s?noredirect=1', encodeURI(data.id)))
1145                         .then(function (response) {
1146                             self.make_link(response, false, data.id);
1147                         });
1148                 }
1149             } else {
1150                 this.make_link(val, this.$('input.window-new').prop('checked'));
1151             }
1152             done.then(_super);
1153         },
1154         make_link: function (url, new_window, label) {
1155         },
1156         bind_data: function (text, href, new_window) {
1157             href = href || this.element && (this.element.data( 'cke-saved-href')
1158                                     ||  this.element.getAttribute('href'));
1159
1160             if (new_window === undefined) {
1161                 new_window = this.element
1162                         ? this.element.getAttribute('target') === '_blank'
1163                         : false;
1164             }
1165             if (text === undefined) {
1166                 text = this.element ? this.element.getText() : '';
1167             }
1168
1169             this.$('input#link-text').val(text);
1170             this.$('input.window-new').prop('checked', new_window);
1171
1172             if (!href) { return; }
1173             var match, $control;
1174             if ((match = /mailto:(.+)/.exec(href))) {
1175                 $control = this.$('input.email-address').val(match[1]);
1176             }
1177             if (!$control) {
1178                 $control = this.$('input.url').val(href);
1179             }
1180
1181             this.changed($control);
1182         },
1183         changed: function ($e) {
1184             this.$('.url-source').filter(':input').not($e).val('')
1185                     .filter(function () { return !!$(this).data('select2'); })
1186                     .select2('data', null);
1187             $e.closest('.list-group-item')
1188                 .addClass('active')
1189                 .siblings().removeClass('active')
1190                 .addBack().removeClass('has-error');
1191         },
1192         call: function (method, args, kwargs) {
1193             var self = this;
1194             var req = method + '_req';
1195
1196             if (this[req]) { this[req].abort(); }
1197
1198             return this[req] = openerp.jsonRpc('/web/dataset/call_kw', 'call', {
1199                 model: 'website',
1200                 method: method,
1201                 args: args,
1202                 kwargs: kwargs,
1203             }).always(function () {
1204                 self[req] = null;
1205             });
1206         },
1207         page_exists: function (term) {
1208             return this.call('page_exists', [null, term], {
1209                 context: website.get_context(),
1210             });
1211         },
1212         fetch_pages: function (term) {
1213             return this.call('search_pages', [null, term], {
1214                 limit: 9,
1215                 context: website.get_context(),
1216             });
1217         },
1218     });
1219     website.editor.RTELinkDialog = website.editor.LinkDialog.extend({
1220         start: function () {
1221             var element;
1222             if ((element = this.get_selected_link()) && element.hasAttribute('href')) {
1223                 this.editor.getSelection().selectElement(element);
1224             }
1225             this.element = element;
1226             if (element) {
1227                 this.add_removal_button();
1228             }
1229
1230             return this._super();
1231         },
1232         add_removal_button: function () {
1233             this.$('.modal-footer').prepend(
1234                 openerp.qweb.render(
1235                     'website.editor.dialog.link.footer-button'));
1236         },
1237         remove_link: function () {
1238             var editor = this.editor;
1239             // same issue as in make_link
1240             setTimeout(function () {
1241                 editor.removeStyle(new CKEDITOR.style({
1242                     element: 'a',
1243                     type: CKEDITOR.STYLE_INLINE,
1244                     alwaysRemoveElement: true,
1245                 }));
1246             }, 0);
1247             this.close();
1248         },
1249         /**
1250          * Greatly simplified version of CKEDITOR's
1251          * plugins.link.dialogs.link.onOk.
1252          *
1253          * @param {String} url
1254          * @param {Boolean} [new_window=false]
1255          * @param {String} [label=null]
1256          */
1257         make_link: function (url, new_window, label) {
1258             var attributes = {href: url, 'data-cke-saved-href': url};
1259             var to_remove = [];
1260             if (new_window) {
1261                 attributes['target'] = '_blank';
1262             } else {
1263                 to_remove.push('target');
1264             }
1265
1266             if (this.element) {
1267                 this.element.setAttributes(attributes);
1268                 this.element.removeAttributes(to_remove);
1269                 if (this.text) { this.element.setText(this.text); }
1270             } else {
1271                 var selection = this.editor.getSelection();
1272                 var range = selection.getRanges(true)[0];
1273
1274                 if (range.collapsed) {
1275                     //noinspection JSPotentiallyInvalidConstructorUsage
1276                     var text = new CKEDITOR.dom.text(
1277                         this.text || label || url);
1278                     range.insertNode(text);
1279                     range.selectNodeContents(text);
1280                 }
1281
1282                 //noinspection JSPotentiallyInvalidConstructorUsage
1283                 new CKEDITOR.style({
1284                     type: CKEDITOR.STYLE_INLINE,
1285                     element: 'a',
1286                     attributes: attributes,
1287                 }).applyToRange(range);
1288
1289                 // focus dance between RTE & dialog blow up the stack in Safari
1290                 // and Chrome, so defer select() until dialog has been closed
1291                 setTimeout(function () {
1292                     range.select();
1293                 }, 0);
1294             }
1295         },
1296         /**
1297          * CKEDITOR.plugins.link.getSelectedLink ignores the editor's root,
1298          * if the editor is set directly on a link it will thus not work.
1299          */
1300         get_selected_link: function () {
1301             return get_selected_link(this.editor);
1302         },
1303     });
1304
1305     website.editor.Media = openerp.Widget.extend({
1306         init: function (parent, editor, media) {
1307             this._super();
1308             this.parent = parent;
1309             this.editor = editor;
1310             this.media = media;
1311         },
1312         start: function () {
1313             this.$preview = this.$('.preview-container').detach();
1314             return this._super();
1315         },
1316         search: function (needle) {
1317         },
1318         save: function () {
1319         },
1320         clear: function () {
1321         },
1322         cancel: function () {
1323         },
1324         close: function () {
1325         },
1326     });
1327     website.editor.MediaDialog = website.editor.Dialog.extend({
1328         template: 'website.editor.dialog.media',
1329         events : _.extend({}, website.editor.Dialog.prototype.events, {
1330             'input input#icon-search': 'search',
1331         }),
1332
1333         init: function (editor, media) {
1334             this._super(editor);
1335             this.editor = editor;
1336             this.page = 0;
1337             this.media = media;
1338         },
1339         start: function () {
1340             var self = this;
1341
1342             this.imageDialog = new website.editor.RTEImageDialog(this, this.editor, this.media);
1343             this.imageDialog.appendTo(this.$("#editor-media-image"));
1344             this.iconDialog = new website.editor.FontIconsDialog(this, this.editor, this.media);
1345             this.iconDialog.appendTo(this.$("#editor-media-icon"));
1346             this.videoDialog = new website.editor.VideoDialog(this, this.editor, this.media);
1347             this.videoDialog.appendTo(this.$("#editor-media-video"));
1348
1349             this.active = this.imageDialog;
1350
1351             $('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
1352                 if ($(event.target).is('[href="#editor-media-image"]')) {
1353                     self.active = self.imageDialog;
1354                     self.$('li.search, li.previous, li.next').removeClass("hidden");
1355                 } else if ($(event.target).is('[href="#editor-media-icon"]')) {
1356                     self.active = self.iconDialog;
1357                     self.$('li.search, li.previous, li.next').removeClass("hidden");
1358                     self.$('.nav-tabs li.previous, .nav-tabs li.next').addClass("hidden");
1359                 } else if ($(event.target).is('[href="#editor-media-video"]')) {
1360                     self.active = self.videoDialog;
1361                     self.$('.nav-tabs li.search').addClass("hidden");
1362                 }
1363             });
1364
1365             if (this.media) {
1366                 if (this.media.$.nodeName === "IMG") {
1367                     this.$('[href="#editor-media-image"]').tab('show');
1368                 } else if (this.media.$.className.match(/(^|\s)media_iframe_video($|\s)/)) {
1369                     this.$('[href="#editor-media-video"]').tab('show');
1370                 } else if (this.media.$.className.match(/(^|\s)fa($|\s)/)) {
1371                     this.$('[href="#editor-media-icon"]').tab('show');
1372                 }
1373
1374                 if ($(this.media.$).parent().data("oe-field") === "image") {
1375                     this.$('[href="#editor-media-video"], [href="#editor-media-icon"]').addClass('hidden');
1376                 }
1377             }
1378
1379             return this._super();
1380         },
1381         save: function () {
1382             var self = this;
1383             if (self.media) {
1384                 this.media.$.innerHTML = "";
1385                 if (this.active !== this.imageDialog) {
1386                     this.imageDialog.clear();
1387                 }
1388                 if (this.active !== this.iconDialog) {
1389                     this.iconDialog.clear();
1390                 }
1391                 if (this.active !== this.videoDialog) {
1392                     this.videoDialog.clear();
1393                 }
1394             } else {
1395                 var selection = this.editor.getSelection();
1396                 var range = selection.getRanges(true)[0];
1397                 this.media = new CKEDITOR.dom.element("img");
1398                 range.insertNode(this.media);
1399                 range.selectNodeContents(this.media);
1400                 this.active.media = this.media;
1401             }
1402
1403             var $el = $(self.active.media.$);
1404
1405             this.active.save();
1406
1407             this.media.$.className = this.media.$.className.replace(/\s+/g, ' ');
1408
1409             setTimeout(function () {
1410                 $el.trigger("saved", self.active.media.$);
1411                 $(document.body).trigger("media-saved", [$el[0], self.active.media.$]);
1412             },0);
1413
1414             this._super();
1415         },
1416         searchTimer: null,
1417         search: function () {
1418             var self = this;
1419             var needle = this.$("input#icon-search").val();
1420             clearTimeout(this.searchTimer);
1421             this.searchTimer = setTimeout(function () {
1422                 self.active.search(needle || "");
1423             },250);
1424         }
1425     });
1426
1427     /**
1428      * ImageDialog widget. Lets users change an image, including uploading a
1429      * new image in OpenERP or selecting the image style (if supported by
1430      * the caller).
1431      *
1432      * Initialized as usual, but the caller can hook into two events:
1433      *
1434      * @event start({url, style}) called during dialog initialization and
1435      *                            opening, the handler can *set* the ``url``
1436      *                            and ``style`` properties on its parameter
1437      *                            to provide these as default values to the
1438      *                            dialog
1439      * @event save({url, style}) called during dialog finalization, the handler
1440      *                           is provided with the image url and style
1441      *                           selected by the users (or possibly the ones
1442      *                           originally passed in)
1443      */
1444     var IMAGES_PER_ROW = 6;
1445     var IMAGES_ROWS = 4;
1446     website.editor.ImageDialog = website.editor.Media.extend({
1447         template: 'website.editor.dialog.image',
1448         events: _.extend({}, website.editor.Dialog.prototype.events, {
1449             'change .url-source': function (e) {
1450                 this.changed($(e.target));
1451             },
1452             'click button.filepicker': function () {
1453                 this.$('input[type=file]').click();
1454             },
1455             'change input[type=file]': 'file_selection',
1456             'submit form': 'form_submit',
1457             //'change input.url': 'preview_image',
1458             //'change select.image-style': 'preview_image',
1459             'click .existing-attachments img': 'select_existing',
1460             'click .existing-attachment-remove': 'try_remove',
1461         }),
1462
1463         init: function (parent, editor, media) {
1464             this.page = 0;
1465             this._super(parent, editor, media);
1466         },
1467         start: function () {
1468             var self = this;
1469             var res = this._super();
1470
1471             var o = { url: null };
1472             // avoid typos, prevent addition of new properties to the object
1473             Object.preventExtensions(o);
1474             this.trigger('start', o);
1475
1476             this.parent.$(".pager > li").click(function (e) {
1477                 e.preventDefault();
1478                 var $target = $(e.currentTarget);
1479                 if ($target.hasClass('disabled')) {
1480                     return;
1481                 }
1482                 self.page += $target.hasClass('previous') ? -1 : 1;
1483                 self.display_attachments();
1484             });
1485
1486             this.set_image(o.url);
1487
1488             return res;
1489         },
1490         save: function () {
1491             this.trigger('save', {
1492                 url: this.$('input.url').val()
1493             });
1494             this.media.renameNode("img");
1495             this.media.$.attributes.src = this.$('input.url').val();
1496             return this._super();
1497         },
1498         clear: function () {
1499             this.media.$.className = this.media.$.className.replace(/(^|\s)(img(\s|$)|img-[^\s]*)/g, ' ');
1500         },
1501         cancel: function () {
1502             this.trigger('cancel');
1503         },
1504
1505         search: function (needle) {
1506             var self = this;
1507             this.fetch_existing(needle).then(function () {
1508                 self.selected_existing(self.$('input.url').val());
1509             });
1510         },
1511
1512         set_image: function (url, error) {
1513             var self = this;
1514             this.$('input.url').val(error ? null : url || '');
1515             this.fetch_existing().then(function () {
1516                 self.selected_existing(url);
1517             });
1518         },
1519
1520         form_submit: function (event) {
1521             var self = this;
1522             var $form = this.$('form[action="/website/attach"]');
1523             if (!$form.find('input[name="upload"]').val().length) {
1524                 var url = $form.find('input[name="url"]').val();
1525                 if (this.selected_existing(url).size()) {
1526                     event.preventDefault();
1527                     return false;
1528                 }
1529             }
1530             var callback = _.uniqueId('func_');
1531             this.$('input[name=func]').val(callback);
1532             window[callback] = function (url, error) {
1533                 delete window[callback];
1534                 self.file_selected(url, error);
1535             };
1536         },
1537         file_selection: function () {
1538             this.$el.addClass('nosave');
1539             this.$('form').removeClass('has-error').find('.help-block').empty();
1540             this.$('button.filepicker').removeClass('btn-danger btn-success');
1541             this.$('form').submit();
1542         },
1543         file_selected: function(url, error) {
1544             var $button = this.$('button.filepicker');
1545             if (!error) {
1546                 $button.addClass('btn-success');
1547             } else {
1548                 url = null;
1549                 this.$('form').addClass('has-error')
1550                     .find('.help-block').text(error);
1551                 $button.addClass('btn-danger');
1552             }
1553             this.set_image(url, error);
1554         },
1555
1556         fetch_existing: function (needle) {
1557             var domain = [['res_model', '=', 'ir.ui.view'], '|',
1558                         ['mimetype', '=', false], ['mimetype', '=like', 'image/%']];
1559             if (needle && needle.length) {
1560                 domain.push('|', ['datas_fname', 'ilike', needle], ['name', 'ilike', needle]);
1561             }
1562             return openerp.jsonRpc('/web/dataset/call_kw', 'call', {
1563                 model: 'ir.attachment',
1564                 method: 'search_read',
1565                 args: [],
1566                 kwargs: {
1567                     fields: ['name', 'website_url'],
1568                     domain: domain,
1569                     order: 'id desc',
1570                     context: website.get_context(),
1571                 }
1572             }).then(this.proxy('fetched_existing'));
1573         },
1574         fetched_existing: function (records) {
1575             this.records = records;
1576             this.display_attachments();
1577         },
1578         display_attachments: function () {
1579             this.$('.help-block').empty();
1580             var per_screen = IMAGES_PER_ROW * IMAGES_ROWS;
1581
1582             var from = this.page * per_screen;
1583             var records = this.records;
1584
1585             // Create rows of 3 records
1586             var rows = _(records).chain()
1587                 .slice(from, from + per_screen)
1588                 .groupBy(function (_, index) { return Math.floor(index / IMAGES_PER_ROW); })
1589                 .values()
1590                 .value();
1591
1592             this.$('.existing-attachments').replaceWith(
1593                 openerp.qweb.render(
1594                     'website.editor.dialog.image.existing.content', {rows: rows}));
1595             this.parent.$('.pager')
1596                 .find('li.previous').toggleClass('disabled', (from === 0)).end()
1597                 .find('li.next').toggleClass('disabled', (from + per_screen >= records.length));
1598         },
1599         select_existing: function (e) {
1600             var link = $(e.currentTarget).attr('src');
1601             this.selected_existing(link);
1602         },
1603         selected_existing: function (link) {
1604             this.$('input.url').val(link);
1605             this.$('.existing-attachment-cell.media_selected').removeClass("media_selected");
1606             var $select = this.$('.existing-attachment-cell img').filter(function () {
1607                 return $(this).attr("src") == link;
1608             }).first();
1609             $select.parent().addClass("media_selected");
1610             return $select;
1611         },
1612
1613         try_remove: function (e) {
1614             var $help_block = this.$('.help-block').empty();
1615             var self = this;
1616             var $a = $(e.target);
1617             var id = parseInt($a.data('id'), 10);
1618             var attachment = _.findWhere(this.records, {id: id});
1619             var $both = $a.parent().children();
1620
1621             $both.css({borderWidth: "5px", borderColor: "#f00"});
1622
1623             return openerp.jsonRpc('/web/dataset/call_kw', 'call', {
1624                 model: 'ir.attachment',
1625                 method: 'try_remove',
1626                 args: [],
1627                 kwargs: {
1628                     ids: [id],
1629                     context: website.get_context()
1630                 }
1631             }).then(function (prevented) {
1632                 if (_.isEmpty(prevented)) {
1633                     self.records = _.without(self.records, attachment);
1634                     self.display_attachments();
1635                     return;
1636                 }
1637                 $both.css({borderWidth: "", borderColor: ""});
1638                 $help_block.replaceWith(openerp.qweb.render(
1639                     'website.editor.dialog.image.existing.error', {
1640                         views: prevented[id]
1641                     }
1642                 ));
1643             });
1644         },
1645     });
1646
1647     website.editor.RTEImageDialog = website.editor.ImageDialog.extend({
1648         init: function (parent, editor, media) {
1649             this._super(parent, editor, media);
1650
1651             this.on('start', this, this.proxy('started'));
1652             this.on('save', this, this.proxy('saved'));
1653         },
1654         started: function (holder) {
1655             if (!this.media) {
1656                 var selection = this.editor.getSelection();
1657                 this.media = selection && selection.getSelectedElement();
1658             }
1659
1660             var el = this.media;
1661             if (!el || !el.is('img')) {
1662                 return;
1663             }
1664             holder.url = el.getAttribute('src');
1665         },
1666         saved: function (data) {
1667             var element, editor = this.editor;
1668             if (!(element = this.media)) {
1669                 element = editor.document.createElement('img');
1670                 element.addClass('img');
1671                 element.addClass('img-responsive');
1672                 // focus event handler interactions between bootstrap (modal)
1673                 // and ckeditor (RTE) lead to blowing the stack in Safari and
1674                 // Chrome (but not FF) when this is done synchronously =>
1675                 // defer insertion so modal has been hidden & destroyed before
1676                 // it happens
1677                 setTimeout(function () {
1678                     editor.insertElement(element);
1679                 }, 0);
1680             }
1681
1682             var style = data.style;
1683             element.setAttribute('src', data.url);
1684             element.removeAttribute('data-cke-saved-src');
1685             if (style) { element.addClass(style); }
1686         },
1687     });
1688
1689     function get_selected_link(editor) {
1690         var sel = editor.getSelection(),
1691             el = sel.getSelectedElement();
1692         if (el && el.is('a')) { return el; }
1693
1694         var range = sel.getRanges(true)[0];
1695         if (!range) { return null; }
1696
1697         range.shrink(CKEDITOR.SHRINK_TEXT);
1698         var commonAncestor = range.getCommonAncestor();
1699         var viewRoot = editor.elementPath(commonAncestor).contains(function (element) {
1700             return element.data('oe-model') === 'ir.ui.view';
1701         });
1702         if (!viewRoot) { return null; }
1703         // if viewRoot is the first link, don't edit it.
1704         return new CKEDITOR.dom.elementPath(commonAncestor, viewRoot)
1705                 .contains('a', true);
1706     }
1707
1708     website.editor.FontIconsDialog = website.editor.Media.extend({
1709         template: 'website.editor.dialog.font-icons',
1710         events : _.extend({}, website.editor.Dialog.prototype.events, {
1711             change: 'update_preview',
1712             'click .font-icons-icon': function (e) {
1713                 e.preventDefault();
1714                 e.stopPropagation();
1715
1716                 this.$('#fa-icon').val(e.target.getAttribute('data-id'));
1717                 this.update_preview();
1718             },
1719             'click #fa-preview span': function (e) {
1720                 e.preventDefault();
1721                 e.stopPropagation();
1722
1723                 this.$('#fa-size').val(e.target.getAttribute('data-size'));
1724                 this.update_preview();
1725             },
1726         }),
1727
1728         // List of FontAwesome icons in 4.0.3, extracted from the cheatsheet.
1729         // Each icon provides the unicode codepoint as ``text`` and the class
1730         // name as ``id`` so the whole thing can be fed directly to select2
1731         // without post-processing and do the right thing (except for the part
1732         // where we still need to implement ``initSelection``)
1733         // TODO: add id/name to the text in order to allow FAYT selection of icons?
1734         icons: [{"text": "\uf000", "id": "fa-glass"}, {"text": "\uf001", "id": "fa-music"}, {"text": "\uf002", "id": "fa-search"}, {"text": "\uf003", "id": "fa-envelope-o"}, {"text": "\uf004", "id": "fa-heart"}, {"text": "\uf005", "id": "fa-star"}, {"text": "\uf006", "id": "fa-star-o"}, {"text": "\uf007", "id": "fa-user"}, {"text": "\uf008", "id": "fa-film"}, {"text": "\uf009", "id": "fa-th-large"}, {"text": "\uf00a", "id": "fa-th"}, {"text": "\uf00b", "id": "fa-th-list"}, {"text": "\uf00c", "id": "fa-check"}, {"text": "\uf00d", "id": "fa-times"}, {"text": "\uf00e", "id": "fa-search-plus"}, {"text": "\uf010", "id": "fa-search-minus"}, {"text": "\uf011", "id": "fa-power-off"}, {"text": "\uf012", "id": "fa-signal"}, {"text": "\uf013", "id": "fa-cog"}, {"text": "\uf014", "id": "fa-trash-o"}, {"text": "\uf015", "id": "fa-home"}, {"text": "\uf016", "id": "fa-file-o"}, {"text": "\uf017", "id": "fa-clock-o"}, {"text": "\uf018", "id": "fa-road"}, {"text": "\uf019", "id": "fa-download"}, {"text": "\uf01a", "id": "fa-arrow-circle-o-down"}, {"text": "\uf01b", "id": "fa-arrow-circle-o-up"}, {"text": "\uf01c", "id": "fa-inbox"}, {"text": "\uf01d", "id": "fa-play-circle-o"}, {"text": "\uf01e", "id": "fa-repeat"}, {"text": "\uf021", "id": "fa-refresh"}, {"text": "\uf022", "id": "fa-list-alt"}, {"text": "\uf023", "id": "fa-lock"}, {"text": "\uf024", "id": "fa-flag"}, {"text": "\uf025", "id": "fa-headphones"}, {"text": "\uf026", "id": "fa-volume-off"}, {"text": "\uf027", "id": "fa-volume-down"}, {"text": "\uf028", "id": "fa-volume-up"}, {"text": "\uf029", "id": "fa-qrcode"}, {"text": "\uf02a", "id": "fa-barcode"}, {"text": "\uf02b", "id": "fa-tag"}, {"text": "\uf02c", "id": "fa-tags"}, {"text": "\uf02d", "id": "fa-book"}, {"text": "\uf02e", "id": "fa-bookmark"}, {"text": "\uf02f", "id": "fa-print"}, {"text": "\uf030", "id": "fa-camera"}, {"text": "\uf031", "id": "fa-font"}, {"text": "\uf032", "id": "fa-bold"}, {"text": "\uf033", "id": "fa-italic"}, {"text": "\uf034", "id": "fa-text-height"}, {"text": "\uf035", "id": "fa-text-width"}, {"text": "\uf036", "id": "fa-align-left"}, {"text": "\uf037", "id": "fa-align-center"}, {"text": "\uf038", "id": "fa-align-right"}, {"text": "\uf039", "id": "fa-align-justify"}, {"text": "\uf03a", "id": "fa-list"}, {"text": "\uf03b", "id": "fa-outdent"}, {"text": "\uf03c", "id": "fa-indent"}, {"text": "\uf03d", "id": "fa-video-camera"}, {"text": "\uf03e", "id": "fa-picture-o"}, {"text": "\uf040", "id": "fa-pencil"}, {"text": "\uf041", "id": "fa-map-marker"}, {"text": "\uf042", "id": "fa-adjust"}, {"text": "\uf043", "id": "fa-tint"}, {"text": "\uf044", "id": "fa-pencil-square-o"}, {"text": "\uf045", "id": "fa-share-square-o"}, {"text": "\uf046", "id": "fa-check-square-o"}, {"text": "\uf047", "id": "fa-arrows"}, {"text": "\uf048", "id": "fa-step-backward"}, {"text": "\uf049", "id": "fa-fast-backward"}, {"text": "\uf04a", "id": "fa-backward"}, {"text": "\uf04b", "id": "fa-play"}, {"text": "\uf04c", "id": "fa-pause"}, {"text": "\uf04d", "id": "fa-stop"}, {"text": "\uf04e", "id": "fa-forward"}, {"text": "\uf050", "id": "fa-fast-forward"}, {"text": "\uf051", "id": "fa-step-forward"}, {"text": "\uf052", "id": "fa-eject"}, {"text": "\uf053", "id": "fa-chevron-left"}, {"text": "\uf054", "id": "fa-chevron-right"}, {"text": "\uf055", "id": "fa-plus-circle"}, {"text": "\uf056", "id": "fa-minus-circle"}, {"text": "\uf057", "id": "fa-times-circle"}, {"text": "\uf058", "id": "fa-check-circle"}, {"text": "\uf059", "id": "fa-question-circle"}, {"text": "\uf05a", "id": "fa-info-circle"}, {"text": "\uf05b", "id": "fa-crosshairs"}, {"text": "\uf05c", "id": "fa-times-circle-o"}, {"text": "\uf05d", "id": "fa-check-circle-o"}, {"text": "\uf05e", "id": "fa-ban"}, {"text": "\uf060", "id": "fa-arrow-left"}, {"text": "\uf061", "id": "fa-arrow-right"}, {"text": "\uf062", "id": "fa-arrow-up"}, {"text": "\uf063", "id": "fa-arrow-down"}, {"text": "\uf064", "id": "fa-share"}, {"text": "\uf065", "id": "fa-expand"}, {"text": "\uf066", "id": "fa-compress"}, {"text": "\uf067", "id": "fa-plus"}, {"text": "\uf068", "id": "fa-minus"}, {"text": "\uf069", "id": "fa-asterisk"}, {"text": "\uf06a", "id": "fa-exclamation-circle"}, {"text": "\uf06b", "id": "fa-gift"}, {"text": "\uf06c", "id": "fa-leaf"}, {"text": "\uf06d", "id": "fa-fire"}, {"text": "\uf06e", "id": "fa-eye"}, {"text": "\uf070", "id": "fa-eye-slash"}, {"text": "\uf071", "id": "fa-exclamation-triangle"}, {"text": "\uf072", "id": "fa-plane"}, {"text": "\uf073", "id": "fa-calendar"}, {"text": "\uf074", "id": "fa-random"}, {"text": "\uf075", "id": "fa-comment"}, {"text": "\uf076", "id": "fa-magnet"}, {"text": "\uf077", "id": "fa-chevron-up"}, {"text": "\uf078", "id": "fa-chevron-down"}, {"text": "\uf079", "id": "fa-retweet"}, {"text": "\uf07a", "id": "fa-shopping-cart"}, {"text": "\uf07b", "id": "fa-folder"}, {"text": "\uf07c", "id": "fa-folder-open"}, {"text": "\uf07d", "id": "fa-arrows-v"}, {"text": "\uf07e", "id": "fa-arrows-h"}, {"text": "\uf080", "id": "fa-bar-chart-o"}, {"text": "\uf081", "id": "fa-twitter-square"}, {"text": "\uf082", "id": "fa-facebook-square"}, {"text": "\uf083", "id": "fa-camera-retro"}, {"text": "\uf084", "id": "fa-key"}, {"text": "\uf085", "id": "fa-cogs"}, {"text": "\uf086", "id": "fa-comments"}, {"text": "\uf087", "id": "fa-thumbs-o-up"}, {"text": "\uf088", "id": "fa-thumbs-o-down"}, {"text": "\uf089", "id": "fa-star-half"}, {"text": "\uf08a", "id": "fa-heart-o"}, {"text": "\uf08b", "id": "fa-sign-out"}, {"text": "\uf08c", "id": "fa-linkedin-square"}, {"text": "\uf08d", "id": "fa-thumb-tack"}, {"text": "\uf08e", "id": "fa-external-link"}, {"text": "\uf090", "id": "fa-sign-in"}, {"text": "\uf091", "id": "fa-trophy"}, {"text": "\uf092", "id": "fa-github-square"}, {"text": "\uf093", "id": "fa-upload"}, {"text": "\uf094", "id": "fa-lemon-o"}, {"text": "\uf095", "id": "fa-phone"}, {"text": "\uf096", "id": "fa-square-o"}, {"text": "\uf097", "id": "fa-bookmark-o"}, {"text": "\uf098", "id": "fa-phone-square"}, {"text": "\uf099", "id": "fa-twitter"}, {"text": "\uf09a", "id": "fa-facebook"}, {"text": "\uf09b", "id": "fa-github"}, {"text": "\uf09c", "id": "fa-unlock"}, {"text": "\uf09d", "id": "fa-credit-card"}, {"text": "\uf09e", "id": "fa-rss"}, {"text": "\uf0a0", "id": "fa-hdd-o"}, {"text": "\uf0a1", "id": "fa-bullhorn"}, {"text": "\uf0f3", "id": "fa-bell"}, {"text": "\uf0a3", "id": "fa-certificate"}, {"text": "\uf0a4", "id": "fa-hand-o-right"}, {"text": "\uf0a5", "id": "fa-hand-o-left"}, {"text": "\uf0a6", "id": "fa-hand-o-up"}, {"text": "\uf0a7", "id": "fa-hand-o-down"}, {"text": "\uf0a8", "id": "fa-arrow-circle-left"}, {"text": "\uf0a9", "id": "fa-arrow-circle-right"}, {"text": "\uf0aa", "id": "fa-arrow-circle-up"}, {"text": "\uf0ab", "id": "fa-arrow-circle-down"}, {"text": "\uf0ac", "id": "fa-globe"}, {"text": "\uf0ad", "id": "fa-wrench"}, {"text": "\uf0ae", "id": "fa-tasks"}, {"text": "\uf0b0", "id": "fa-filter"}, {"text": "\uf0b1", "id": "fa-briefcase"}, {"text": "\uf0b2", "id": "fa-arrows-alt"}, {"text": "\uf0c0", "id": "fa-users"}, {"text": "\uf0c1", "id": "fa-link"}, {"text": "\uf0c2", "id": "fa-cloud"}, {"text": "\uf0c3", "id": "fa-flask"}, {"text": "\uf0c4", "id": "fa-scissors"}, {"text": "\uf0c5", "id": "fa-files-o"}, {"text": "\uf0c6", "id": "fa-paperclip"}, {"text": "\uf0c7", "id": "fa-floppy-o"}, {"text": "\uf0c8", "id": "fa-square"}, {"text": "\uf0c9", "id": "fa-bars"}, {"text": "\uf0ca", "id": "fa-list-ul"}, {"text": "\uf0cb", "id": "fa-list-ol"}, {"text": "\uf0cc", "id": "fa-strikethrough"}, {"text": "\uf0cd", "id": "fa-underline"}, {"text": "\uf0ce", "id": "fa-table"}, {"text": "\uf0d0", "id": "fa-magic"}, {"text": "\uf0d1", "id": "fa-truck"}, {"text": "\uf0d2", "id": "fa-pinterest"}, {"text": "\uf0d3", "id": "fa-pinterest-square"}, {"text": "\uf0d4", "id": "fa-google-plus-square"}, {"text": "\uf0d5", "id": "fa-google-plus"}, {"text": "\uf0d6", "id": "fa-money"}, {"text": "\uf0d7", "id": "fa-caret-down"}, {"text": "\uf0d8", "id": "fa-caret-up"}, {"text": "\uf0d9", "id": "fa-caret-left"}, {"text": "\uf0da", "id": "fa-caret-right"}, {"text": "\uf0db", "id": "fa-columns"}, {"text": "\uf0dc", "id": "fa-sort"}, {"text": "\uf0dd", "id": "fa-sort-asc"}, {"text": "\uf0de", "id": "fa-sort-desc"}, {"text": "\uf0e0", "id": "fa-envelope"}, {"text": "\uf0e1", "id": "fa-linkedin"}, {"text": "\uf0e2", "id": "fa-undo"}, {"text": "\uf0e3", "id": "fa-gavel"}, {"text": "\uf0e4", "id": "fa-tachometer"}, {"text": "\uf0e5", "id": "fa-comment-o"}, {"text": "\uf0e6", "id": "fa-comments-o"}, {"text": "\uf0e7", "id": "fa-bolt"}, {"text": "\uf0e8", "id": "fa-sitemap"}, {"text": "\uf0e9", "id": "fa-umbrella"}, {"text": "\uf0ea", "id": "fa-clipboard"}, {"text": "\uf0eb", "id": "fa-lightbulb-o"}, {"text": "\uf0ec", "id": "fa-exchange"}, {"text": "\uf0ed", "id": "fa-cloud-download"}, {"text": "\uf0ee", "id": "fa-cloud-upload"}, {"text": "\uf0f0", "id": "fa-user-md"}, {"text": "\uf0f1", "id": "fa-stethoscope"}, {"text": "\uf0f2", "id": "fa-suitcase"}, {"text": "\uf0a2", "id": "fa-bell-o"}, {"text": "\uf0f4", "id": "fa-coffee"}, {"text": "\uf0f5", "id": "fa-cutlery"}, {"text": "\uf0f6", "id": "fa-file-text-o"}, {"text": "\uf0f7", "id": "fa-building-o"}, {"text": "\uf0f8", "id": "fa-hospital-o"}, {"text": "\uf0f9", "id": "fa-ambulance"}, {"text": "\uf0fa", "id": "fa-medkit"}, {"text": "\uf0fb", "id": "fa-fighter-jet"}, {"text": "\uf0fc", "id": "fa-beer"}, {"text": "\uf0fd", "id": "fa-h-square"}, {"text": "\uf0fe", "id": "fa-plus-square"}, {"text": "\uf100", "id": "fa-angle-double-left"}, {"text": "\uf101", "id": "fa-angle-double-right"}, {"text": "\uf102", "id": "fa-angle-double-up"}, {"text": "\uf103", "id": "fa-angle-double-down"}, {"text": "\uf104", "id": "fa-angle-left"}, {"text": "\uf105", "id": "fa-angle-right"}, {"text": "\uf106", "id": "fa-angle-up"}, {"text": "\uf107", "id": "fa-angle-down"}, {"text": "\uf108", "id": "fa-desktop"}, {"text": "\uf109", "id": "fa-laptop"}, {"text": "\uf10a", "id": "fa-tablet"}, {"text": "\uf10b", "id": "fa-mobile"}, {"text": "\uf10c", "id": "fa-circle-o"}, {"text": "\uf10d", "id": "fa-quote-left"}, {"text": "\uf10e", "id": "fa-quote-right"}, {"text": "\uf110", "id": "fa-spinner"}, {"text": "\uf111", "id": "fa-circle"}, {"text": "\uf112", "id": "fa-reply"}, {"text": "\uf113", "id": "fa-github-alt"}, {"text": "\uf114", "id": "fa-folder-o"}, {"text": "\uf115", "id": "fa-folder-open-o"}, {"text": "\uf118", "id": "fa-smile-o"}, {"text": "\uf119", "id": "fa-frown-o"}, {"text": "\uf11a", "id": "fa-meh-o"}, {"text": "\uf11b", "id": "fa-gamepad"}, {"text": "\uf11c", "id": "fa-keyboard-o"}, {"text": "\uf11d", "id": "fa-flag-o"}, {"text": "\uf11e", "id": "fa-flag-checkered"}, {"text": "\uf120", "id": "fa-terminal"}, {"text": "\uf121", "id": "fa-code"}, {"text": "\uf122", "id": "fa-reply-all"}, {"text": "\uf122", "id": "fa-mail-reply-all"}, {"text": "\uf123", "id": "fa-star-half-o"}, {"text": "\uf124", "id": "fa-location-arrow"}, {"text": "\uf125", "id": "fa-crop"}, {"text": "\uf126", "id": "fa-code-fork"}, {"text": "\uf127", "id": "fa-chain-broken"}, {"text": "\uf128", "id": "fa-question"}, {"text": "\uf129", "id": "fa-info"}, {"text": "\uf12a", "id": "fa-exclamation"}, {"text": "\uf12b", "id": "fa-superscript"}, {"text": "\uf12c", "id": "fa-subscript"}, {"text": "\uf12d", "id": "fa-eraser"}, {"text": "\uf12e", "id": "fa-puzzle-piece"}, {"text": "\uf130", "id": "fa-microphone"}, {"text": "\uf131", "id": "fa-microphone-slash"}, {"text": "\uf132", "id": "fa-shield"}, {"text": "\uf133", "id": "fa-calendar-o"}, {"text": "\uf134", "id": "fa-fire-extinguisher"}, {"text": "\uf135", "id": "fa-rocket"}, {"text": "\uf136", "id": "fa-maxcdn"}, {"text": "\uf137", "id": "fa-chevron-circle-left"}, {"text": "\uf138", "id": "fa-chevron-circle-right"}, {"text": "\uf139", "id": "fa-chevron-circle-up"}, {"text": "\uf13a", "id": "fa-chevron-circle-down"}, {"text": "\uf13b", "id": "fa-html5"}, {"text": "\uf13c", "id": "fa-css3"}, {"text": "\uf13d", "id": "fa-anchor"}, {"text": "\uf13e", "id": "fa-unlock-alt"}, {"text": "\uf140", "id": "fa-bullseye"}, {"text": "\uf141", "id": "fa-ellipsis-h"}, {"text": "\uf142", "id": "fa-ellipsis-v"}, {"text": "\uf143", "id": "fa-rss-square"}, {"text": "\uf144", "id": "fa-play-circle"}, {"text": "\uf145", "id": "fa-ticket"}, {"text": "\uf146", "id": "fa-minus-square"}, {"text": "\uf147", "id": "fa-minus-square-o"}, {"text": "\uf148", "id": "fa-level-up"}, {"text": "\uf149", "id": "fa-level-down"}, {"text": "\uf14a", "id": "fa-check-square"}, {"text": "\uf14b", "id": "fa-pencil-square"}, {"text": "\uf14c", "id": "fa-external-link-square"}, {"text": "\uf14d", "id": "fa-share-square"}, {"text": "\uf14e", "id": "fa-compass"}, {"text": "\uf150", "id": "fa-caret-square-o-down"}, {"text": "\uf151", "id": "fa-caret-square-o-up"}, {"text": "\uf152", "id": "fa-caret-square-o-right"}, {"text": "\uf153", "id": "fa-eur"}, {"text": "\uf154", "id": "fa-gbp"}, {"text": "\uf155", "id": "fa-usd"}, {"text": "\uf156", "id": "fa-inr"}, {"text": "\uf157", "id": "fa-jpy"}, {"text": "\uf158", "id": "fa-rub"}, {"text": "\uf159", "id": "fa-krw"}, {"text": "\uf15a", "id": "fa-btc"}, {"text": "\uf15b", "id": "fa-file"}, {"text": "\uf15c", "id": "fa-file-text"}, {"text": "\uf15d", "id": "fa-sort-alpha-asc"}, {"text": "\uf15e", "id": "fa-sort-alpha-desc"}, {"text": "\uf160", "id": "fa-sort-amount-asc"}, {"text": "\uf161", "id": "fa-sort-amount-desc"}, {"text": "\uf162", "id": "fa-sort-numeric-asc"}, {"text": "\uf163", "id": "fa-sort-numeric-desc"}, {"text": "\uf164", "id": "fa-thumbs-up"}, {"text": "\uf165", "id": "fa-thumbs-down"}, {"text": "\uf166", "id": "fa-youtube-square"}, {"text": "\uf167", "id": "fa-youtube"}, {"text": "\uf168", "id": "fa-xing"}, {"text": "\uf169", "id": "fa-xing-square"}, {"text": "\uf16a", "id": "fa-youtube-play"}, {"text": "\uf16b", "id": "fa-dropbox"}, {"text": "\uf16c", "id": "fa-stack-overflow"}, {"text": "\uf16d", "id": "fa-instagram"}, {"text": "\uf16e", "id": "fa-flickr"}, {"text": "\uf170", "id": "fa-adn"}, {"text": "\uf171", "id": "fa-bitbucket"}, {"text": "\uf172", "id": "fa-bitbucket-square"}, {"text": "\uf173", "id": "fa-tumblr"}, {"text": "\uf174", "id": "fa-tumblr-square"}, {"text": "\uf175", "id": "fa-long-arrow-down"}, {"text": "\uf176", "id": "fa-long-arrow-up"}, {"text": "\uf177", "id": "fa-long-arrow-left"}, {"text": "\uf178", "id": "fa-long-arrow-right"}, {"text": "\uf179", "id": "fa-apple"}, {"text": "\uf17a", "id": "fa-windows"}, {"text": "\uf17b", "id": "fa-android"}, {"text": "\uf17c", "id": "fa-linux"}, {"text": "\uf17d", "id": "fa-dribbble"}, {"text": "\uf17e", "id": "fa-skype"}, {"text": "\uf180", "id": "fa-foursquare"}, {"text": "\uf181", "id": "fa-trello"}, {"text": "\uf182", "id": "fa-female"}, {"text": "\uf183", "id": "fa-male"}, {"text": "\uf184", "id": "fa-gittip"}, {"text": "\uf185", "id": "fa-sun-o"}, {"text": "\uf186", "id": "fa-moon-o"}, {"text": "\uf187", "id": "fa-archive"}, {"text": "\uf188", "id": "fa-bug"}, {"text": "\uf189", "id": "fa-vk"}, {"text": "\uf18a", "id": "fa-weibo"}, {"text": "\uf18b", "id": "fa-renren"}, {"text": "\uf18c", "id": "fa-pagelines"}, {"text": "\uf18d", "id": "fa-stack-exchange"}, {"text": "\uf18e", "id": "fa-arrow-circle-o-right"}, {"text": "\uf190", "id": "fa-arrow-circle-o-left"}, {"text": "\uf191", "id": "fa-caret-square-o-left"}, {"text": "\uf192", "id": "fa-dot-circle-o"}, {"text": "\uf193", "id": "fa-wheelchair"}, {"text": "\uf194", "id": "fa-vimeo-square"}, {"text": "\uf195", "id": "fa-try"}, {"text": "\uf196", "id": "fa-plus-square-o"}],
1735         /**
1736          * Initializes select2: in Chrome and Safari, <select> font apparently
1737          * isn't customizable (?) and the fontawesome glyphs fail to appear.
1738          */
1739         start: function () {
1740             return this._super().then(this.proxy('load_data'));
1741         },
1742         search: function (needle) {
1743             var icons = this.icons;
1744             if (needle) {
1745                 icons = _(icons).filter(function (icon) {
1746                     return icon.id.substring(3).indexOf(needle) !== -1;
1747                 });
1748             }
1749
1750             this.$('div.font-icons-icons').html(
1751                 openerp.qweb.render(
1752                     'website.editor.dialog.font-icons.icons',
1753                     {icons: icons}));
1754         },
1755         /**
1756          * Removes existing FontAwesome classes on the bound element, and sets
1757          * all the new ones if necessary.
1758          */
1759         save: function () {
1760             var style = this.media.$.attributes.style ? this.media.$.attributes.style.textContent : '';
1761             var classes = (this.media.$.className||"").split(/\s+/);
1762             var non_fa_classes = _.reject(classes, function (cls) {
1763                 return cls === 'fa' || /^fa-/.test(cls);
1764             });
1765             var final_classes = non_fa_classes.concat(this.get_fa_classes());
1766             this.media.$.className = final_classes.join(' ');
1767             this.media.renameNode("span");
1768             this.media.$.attributes.style.textContent = style;
1769             this._super();
1770         },
1771         /**
1772          * Looks up the various FontAwesome classes on the bound element and
1773          * sets the corresponding template/form elements to the right state.
1774          * If multiple classes of the same category are present on an element
1775          * (e.g. fa-lg and fa-3x) the last one occurring will be selected,
1776          * which may not match the visual look of the element.
1777          */
1778         load_data: function () {
1779             var classes = (this.media&&this.media.$.className||"").split(/\s+/);
1780             for (var i = 0; i < classes.length; i++) {
1781                 var cls = classes[i];
1782                 switch(cls) {
1783                 case 'fa-2x':case 'fa-3x':case 'fa-4x':case 'fa-5x':
1784                     // size classes
1785                     this.$('#fa-size').val(cls);
1786                     continue;
1787                 case 'fa-spin':
1788                 case 'fa-rotate-90':case 'fa-rotate-180':case 'fa-rotate-270':
1789                 case 'fa-flip-horizontal':case 'fa-rotate-vertical':
1790                     this.$('#fa-rotation').val(cls);
1791                     continue;
1792                 case 'fa-fw':
1793                     continue;
1794                 case 'fa-border':
1795                     this.$('#fa-border').prop('checked', true);
1796                     continue;
1797                 default:
1798                     if (!/^fa-/.test(cls)) { continue; }
1799                     this.$('#fa-icon').val(cls);
1800                 }
1801             }
1802             this.update_preview();
1803         },
1804         /**
1805          * Serializes the dialog to an array of FontAwesome classes. Includes
1806          * the base ``fa``.
1807          */
1808         get_fa_classes: function () {
1809             return [
1810                 'fa',
1811                 this.$('#fa-icon').val(),
1812                 this.$('#fa-size').val(),
1813                 this.$('#fa-rotation').val(),
1814                 this.$('#fa-border').prop('checked') ? 'fa-border' : ''
1815             ];
1816         },
1817         update_preview: function () {
1818             this.$preview.empty();
1819             var $preview = this.$('#fa-preview').empty();
1820
1821             var sizes = ['', 'fa-2x', 'fa-3x', 'fa-4x', 'fa-5x'];
1822             var classes = this.get_fa_classes();
1823             var no_sizes = _.difference(classes, sizes).join(' ');
1824             var selected = false;
1825             for (var i = sizes.length - 1; i >= 0; i--) {
1826                 var size = sizes[i];
1827
1828                 var $p = $('<span>')
1829                         .attr('data-size', size)
1830                         .addClass(size)
1831                         .addClass(no_sizes);
1832                 if ((size && _.contains(classes, size)) || (classes[2] === "" && !selected)) {
1833                     this.$preview.append($p.clone());
1834                     this.$('#fa-size').val(size);
1835                     $p.addClass('font-icons-selected');
1836                     selected = true;
1837                 }
1838                 $preview.prepend($p);
1839             }
1840         },
1841         clear: function () {
1842             this.media.$.className = this.media.$.className.replace(/(^|\s)(fa(\s|$)|fa-[^\s]*)/g, ' ');
1843         },
1844     });
1845
1846     website.editor.VideoDialog = website.editor.Media.extend({
1847         template: 'website.editor.dialog.video',
1848         events : _.extend({}, website.editor.Dialog.prototype.events, {
1849             'click input#urlvideo ~ button': 'get_video',
1850             'click input#embedvideo ~ button': 'get_embed_video',
1851         }),
1852         start: function () {
1853             this.$iframe = this.$("iframe");
1854             var $media = $(this.media && this.media.$);
1855             if ($media.hasClass("media_iframe_video")) {
1856                 var src = $media.data('src');
1857                 this.$("input#urlvideo").val(src);
1858                 this.$("#autoplay").attr("checked", src.indexOf('autoplay=1') != -1);
1859                 this.get_video();
1860             }
1861             return this._super();
1862         },
1863         get_url: function () {
1864             var video_id = this.$("#video_id").val();
1865             var video_type = this.$("#video_type").val();
1866             switch (video_type) {
1867                 case "youtube":
1868                     return "//www.youtube.com/embed/" + video_id + "?autoplay=" + (this.$("#autoplay").is(":checked") ? 1 : 0);
1869                 case "vimeo":
1870                     return "//player.vimeo.com/video/" + video_id + "?autoplay=" + (this.$("#autoplay").is(":checked") ? 1 : 0);
1871                 case "dailymotion":
1872                     return "//www.dailymotion.com/embed/video/" + video_id + "?autoplay=" + (this.$("#autoplay").is(":checked") ? 1 : 0);
1873                 default:
1874                     return video_id;
1875             }
1876         },
1877         get_embed_video: function (event) {
1878             event.preventDefault();
1879             var embedvideo = this.$("input#embedvideo").val().match(/src=["']?([^"']+)["' ]?/);
1880             if (embedvideo) {
1881                 this.$("input#urlvideo").val(embedvideo[1]);
1882                 this.get_video(event);
1883             }
1884             return false;
1885         },
1886         get_video: function (event) {
1887             if (event) event.preventDefault();
1888             var needle = this.$("input#urlvideo").val();
1889             var video_id;
1890             var video_type;
1891
1892             if (needle.indexOf(".youtube.") != -1) {
1893                 video_type = "youtube";
1894                 video_id = needle.match(/\.youtube\.[a-z]+\/(embed\/|watch\?v=)?([^\/?&]+)/i)[2];
1895             } else if (needle.indexOf("//youtu.") != -1) {
1896                 video_type = "youtube";
1897                 video_id = needle.match(/youtube\.[a-z]+\/([^\/?&]+)/i)[1];
1898             } else if (needle.indexOf("player.vimeo.") != -1 || needle.indexOf("//vimeo.") != -1) {
1899                 video_type = "vimeo";
1900                 video_id = needle.match(/vimeo\.[a-z]+\/(video\/)?([^?&]+)/i)[2];
1901             } else if (needle.indexOf(".dailymotion.") != -1) {
1902                 video_type = "dailymotion";
1903                 video_id = needle.match(/dailymotion\.[a-z]+\/(embed\/)?(video\/)?([^\/?&]+)/i)[3];
1904             } else {
1905                 video_type = "";
1906                 video_id = needle;
1907             }
1908
1909             this.$("#video_id").val(video_id);
1910             this.$("#video_type").val(video_type);
1911
1912             this.$iframe.attr("src", this.get_url());
1913             return false;
1914         },
1915         save: function () {
1916             var video_id = this.$("#video_id").val();
1917             var video_type = this.$("#video_type").val();
1918             var style = this.media.$.attributes.style ? this.media.$.attributes.style.textContent : '';
1919             var $iframe = $(
1920                 '<div class="media_iframe_video" data-src="'+this.get_url()+'" style="'+style+'">'+
1921                     '<div class="css_editable_mode_display">&nbsp;</div>'+
1922                     '<iframe src="'+this.get_url()+'" frameborder="0" allowfullscreen="allowfullscreen"></iframe>'+
1923                 '</div>');
1924             $(this.media.$).replaceWith($iframe);
1925             this.media.$ = $iframe[0];
1926             this._super();
1927         },
1928         clear: function () {
1929             delete this.media.$.dataset.src;
1930             this.media.$.className = this.media.$.className.replace(/(^|\s)media_iframe_video(\s|$)/g, ' ');
1931         },
1932     });
1933
1934     website.Observer = window.MutationObserver || window.WebkitMutationObserver || window.JsMutationObserver;
1935     var OBSERVER_CONFIG = {
1936         childList: true,
1937         attributes: true,
1938         characterData: true,
1939         subtree: true,
1940         attributeOldValue: true,
1941     };
1942     var observer = new website.Observer(function (mutations) {
1943         // NOTE: Webkit does not fire DOMAttrModified => webkit browsers
1944         //       relying on JsMutationObserver shim (Chrome < 18, Safari < 6)
1945         //       will not mark dirty on attribute changes (@class, img/@src,
1946         //       a/@href, ...)
1947         _(mutations).chain()
1948             .filter(function (m) {
1949                 // ignore any change related to mundane image-edit-button
1950                 if (m.target && m.target.className
1951                         && m.target.className.indexOf('image-edit-button') !== -1) {
1952                     return false;
1953                 }
1954                 switch(m.type) {
1955                 case 'attributes': // ignore .cke_focus being added or removed
1956                     // ignore id modification
1957                     if (m.attributeName === 'id') { return false; }
1958                     // if attribute is not a class, can't be .cke_focus change
1959                     if (m.attributeName !== 'class') { return true; }
1960
1961                     // find out what classes were added or removed
1962                     var oldClasses = (m.oldValue || '').split(/\s+/);
1963                     var newClasses = m.target.className.split(/\s+/);
1964                     var change = _.union(_.difference(oldClasses, newClasses),
1965                                          _.difference(newClasses, oldClasses));
1966                     // ignore mutation if the *only* change is .cke_focus
1967                     return change.length !== 1 || change[0] === 'cke_focus';
1968                 case 'childList':
1969                     setTimeout(function () {
1970                         fixup_browser_crap(m.addedNodes);
1971                     }, 0);
1972                     // Remove ignorable nodes from addedNodes or removedNodes,
1973                     // if either set remains non-empty it's considered to be an
1974                     // impactful change. Otherwise it's ignored.
1975                     return !!remove_mundane_nodes(m.addedNodes).length ||
1976                            !!remove_mundane_nodes(m.removedNodes).length;
1977                 default:
1978                     return true;
1979                 }
1980             })
1981             .map(function (m) {
1982                 var node = m.target;
1983                 while (node && !$(node).hasClass('oe_editable')) {
1984                     node = node.parentNode;
1985                 }
1986                 return node;
1987             })
1988             .compact()
1989             .uniq()
1990             .each(function (node) { $(node).trigger('content_changed'); })
1991     });
1992     function remove_mundane_nodes(nodes) {
1993         if (!nodes || !nodes.length) { return []; }
1994
1995         var output = [];
1996         for(var i=0; i<nodes.length; ++i) {
1997             var node = nodes[i];
1998             if (node.nodeType === document.ELEMENT_NODE) {
1999                 if (node.nodeName === 'BR' && node.getAttribute('type') === '_moz') {
2000                     // <br type="_moz"> appears when focusing RTE in FF, ignore
2001                     continue;
2002                 } else if (node.nodeName === 'DIV' && $(node).hasClass('oe_drop_zone')) {
2003                     // ignore dropzone inserted by snippets
2004                     continue
2005                 }
2006             }
2007
2008             output.push(node);
2009         }
2010         return output;
2011     }
2012
2013     var programmatic_styles = {
2014         float: 1,
2015         display: 1,
2016         position: 1,
2017         top: 1,
2018         left: 1,
2019         right: 1,
2020         bottom: 1,
2021     };
2022     function fixup_browser_crap(nodes) {
2023         if (!nodes || !nodes.length) { return; }
2024         /**
2025          * Checks that the node only has a @style, not e.g. @class or whatever
2026          */
2027         function has_only_style(node) {
2028             for (var i = 0; i < node.attributes.length; i++) {
2029                 var attr = node.attributes[i];
2030                 if (attr.attributeName !== 'style') {
2031                     return false;
2032                 }
2033             }
2034             return true;
2035         }
2036         function has_programmatic_style(node) {
2037             for (var i = 0; i < node.style.length; i++) {
2038               var style = node.style[i];
2039               if (programmatic_styles[style]) {
2040                   return true;
2041               }
2042             }
2043             return false;
2044         }
2045
2046         for (var i=0; i<nodes.length; ++i) {
2047             var node = nodes[i];
2048             if (node.nodeType !== document.ELEMENT_NODE) { continue; }
2049
2050             if (node.nodeName === 'SPAN'
2051                     && has_only_style(node)
2052                     && !has_programmatic_style(node)) {
2053                 // On backspace, webkit browsers create a <span> with a bunch of
2054                 // inline styles "remembering" where they come from. Refs:
2055                 //    http://www.neotericdesign.com/blog/2013/3/working-around-chrome-s-contenteditable-span-bug
2056                 //    https://code.google.com/p/chromium/issues/detail?id=226941
2057                 //    https://bugs.webkit.org/show_bug.cgi?id=114791
2058                 //    http://dev.ckeditor.com/ticket/9998
2059                 var child, parent = node.parentNode;
2060                 while (child = node.firstChild) {
2061                     parent.insertBefore(child, node);
2062                 }
2063                 parent.removeChild(node);
2064                 // chances are we had e.g.
2065                 //  <p>foo</p>
2066                 //  <p>bar</p>
2067                 // merged the lines getting this in webkit
2068                 //  <p>foo<span>bar</span></p>
2069                 // after unwrapping the span, we have 2 text nodes
2070                 //  <p>[foo][bar]</p>
2071                 // where we probably want only one. Normalize will merge
2072                 // adjacent text nodes. However, does not merge text and cdata
2073                 parent.normalize();
2074             }
2075         }
2076     }
2077 })();