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

   1 (function () {
   2     'use strict';
   3
   4     var website = openerp.website;
   5
   6     website.templates.push('/website/static/src/xml/website.editor.xml');
   7     website.dom_ready.done(function () {
   8         // $.fn.data automatically parses value, '0'|'1' -> 0|1
   9         website.is_editable = $(document.documentElement).data('editable');
  10         var is_smartphone = $(document.body)[0].clientWidth < 767;
  11
  12         if (website.is_editable && !is_smartphone) {
  13             website.ready().then(website.init_editor);
  14         }
  15     });
  16
  17     function link_dialog(editor) {
  18         return new website.editor.LinkDialog(editor).appendTo(document.body);
  19     }
  20     function image_dialog(editor) {
  21         return new website.editor.ImageDialog(editor).appendTo(document.body);
  22     }
  23
  24     website.init_editor = function () {
  25         CKEDITOR.plugins.add('customdialogs', {
  26             requires: 'link,image',
  27             init: function (editor) {
  28                 editor.on('doubleclick', function (evt) {
  29                     if (evt.data.dialog === 'link') {
  30                         delete evt.data.dialog;
  31                         link_dialog(editor);
  32                     } else if(evt.data.dialog === 'image') {
  33                         delete evt.data.dialog;
  34                         image_dialog(editor);
  35                     }
  36                     // priority should be smaller than dialog (999) but bigger
  37                     // than link or image (default=10)
  38                 }, null, null, 500);
  39
  40                 editor.addCommand('link', {
  41                     exec: function (editor, data) {
  42                         link_dialog(editor);
  43                         return true;
  44                     },
  45                     canUndo: false,
  46                     editorFocus: true,
  47                 });
  48                 editor.addCommand('image', {
  49                     exec: function (editor, data) {
  50                         image_dialog(editor);
  51                         return true;
  52                     },
  53                     canUndo: false,
  54                     editorFocus: true,
  55                 });
  56             }
  57         });
  58         CKEDITOR.plugins.add( 'tablebutton', {
  59             requires: 'panelbutton,floatpanel',
  60             init: function( editor ) {
  61                 var label = "Table";
  62
  63                 editor.ui.add('TableButton', CKEDITOR.UI_PANELBUTTON, {
  64                     label: label,
  65                     title: label,
  66                     // use existing 'table' icon
  67                     icon: 'table',
  68                     modes: { wysiwyg: true },
  69                     editorFocus: true,
  70                     // panel opens in iframe, @css is CSS file <link>-ed within
  71                     // frame document, @attributes are set on iframe itself.
  72                     panel: {
  73                         css: '/website/static/src/css/editor.css',
  74                         attributes: { 'role': 'listbox', 'aria-label': label, },
  75                     },
  76
  77                     onBlock: function (panel, block) {
  78                         block.autoSize = true;
  79                         block.element.setHtml(openerp.qweb.render('website.editor.table.panel', {
  80                             rows: 5,
  81                             cols: 5,
  82                         }));
  83
  84                         var $table = $(block.element.$).on('mouseenter', 'td', function (e) {
  85                             var $e = $(e.target);
  86                             var y = $e.index() + 1;
  87                             var x = $e.closest('tr').index() + 1;
  88
  89                             $table
  90                                 .find('td').removeClass('selected').end()
  91                                 .find('tr:lt(' + String(x) + ')')
  92                                 .children().filter(function () { return $(this).index() < y; })
  93                                 .addClass('selected');
  94                         }).on('click', 'td', function (e) {
  95                             var $e = $(e.target);
  96
  97                             var table = new CKEDITOR.dom.element(
  98                                 $(openerp.qweb.render('website.editor.table', {
  99                                     rows: $e.closest('tr').index() + 1,
 100                                     cols: $e.index() + 1,
 101                                 }))[0]);
 102
 103                             editor.insertElement(table);
 104                             setTimeout(function () {
 105                                 var firstCell = new CKEDITOR.dom.element(table.$.rows[0].cells[0]);
 106                                 var range = editor.createRange();
 107                                 range.moveToPosition(firstCell, CKEDITOR.POSITION_AFTER_START);
 108                                 range.select();
 109                             }, 0);
 110                         });
 111
 112                         block.element.getDocument().getBody().setStyle('overflow', 'hidden');
 113                         CKEDITOR.ui.fire('ready', this);
 114                     },
 115                 });
 116             }
 117         });
 118
 119         var editor = new website.EditorBar();
 120         var $body = $(document.body);
 121         editor.prependTo($body).then(function () {
 122             if (location.search.indexOf("unable_editor") >= 0) {
 123                 editor.edit();
 124             }
 125         });
 126         $body.css('padding-top', '50px'); // Not working properly: editor.$el.outerHeight());
 127     };
 128         /* ----- TOP EDITOR BAR FOR ADMIN ---- */
 129     website.EditorBar = openerp.Widget.extend({
 130         template: 'website.editorbar',
 131         events: {
 132             'click button[data-action=edit]': 'edit',
 133             'click button[data-action=save]': 'save',
 134             'click button[data-action=cancel]': 'cancel',
 135         },
 136         container: 'body',
 137         customize_setup: function() {
 138             var self = this;
 139             var view_name = $(document.documentElement).data('view-xmlid');
 140             var menu = $('#customize-menu');
 141             this.$('#customize-menu-button').click(function(event) {
 142                 menu.empty();
 143                 openerp.jsonRpc('/website/customize_template_get', 'call', { 'xml_id': view_name }).then(
 144                     function(result) {
 145                         _.each(result, function (item) {
 146                             if (item.header) {
 147                                 menu.append('<li class="dropdown-header">' + item.name + '</li>');
 148                             } else {
 149                                 menu.append(_.str.sprintf('<li role="presentation"><a href="#" data-view-id="%s" role="menuitem"><strong class="icon-check%s"></strong> %s</a></li>',
 150                                     item.id, item.active ? '' : '-empty', item.name));
 151                             }
 152                         });
 153                         // Adding Static Menus
 154                         menu.append('<li class="divider"></li><li><a href="/page/website.themes">Change Theme</a></li>');
 155                         menu.append('<li class="divider"></li><li><a data-action="ace" href="#">Advanced view editor</a></li>');
 156                     }
 157                 );
 158             });
 159             menu.on('click', 'a[data-action!=ace]', function (event) {
 160                 var view_id = $(event.currentTarget).data('view-id');
 161                 openerp.jsonRpc('/website/customize_template_toggle', 'call', {
 162                     'view_id': view_id
 163                 }).then( function(result) {
 164                     window.location.reload();
 165                 });
 166             });
 167         },
 168         start: function() {
 169             var self = this;
 170
 171             this.saving_mutex = new openerp.Mutex();
 172
 173             this.$('#website-top-edit').hide();
 174             this.$('#website-top-view').show();
 175
 176             $('.dropdown-toggle').dropdown();
 177             this.customize_setup();
 178
 179             this.$buttons = {
 180                 edit: this.$('button[data-action=edit]'),
 181                 save: this.$('button[data-action=save]'),
 182                 cancel: this.$('button[data-action=cancel]'),
 183             };
 184
 185             this.rte = new website.RTE(this);
 186             this.rte.on('change', this, this.proxy('rte_changed'));
 187
 188             return $.when(
 189                 this._super.apply(this, arguments),
 190                 this.rte.prependTo(this.$('#website-top-edit .nav.pull-right'))
 191             );
 192         },
 193         edit: function () {
 194             var self = this;
 195             this.$buttons.edit.prop('disabled', true);
 196             this.$('#website-top-view').hide();
 197             this.$('#website-top-edit').show();
 198             $('.css_non_editable_mode_hidden').removeClass("css_non_editable_mode_hidden");
 199
 200             var $editables = $('[data-oe-model]')
 201                     .not('link, script')
 202                     // FIXME: propagation should make "meta" blocks non-editable in the first place...
 203                     .not('.oe_snippets,.oe_snippet, .oe_snippet *')
 204                     .prop('contentEditable', true)
 205                     .addClass('oe_editable');
 206             var $rte_ables = $editables.not('[data-oe-type]');
 207             var $raw_editables = $editables.not($rte_ables);
 208
 209             // temporary: on raw editables, links are still active so an
 210             // editable link, containing a link or within a link becomes very
 211             // hard to edit. Disable linking for these.
 212             $raw_editables.parents('a')
 213                 .add($raw_editables.find('a'))
 214                 .on('click', function (e) {
 215                     e.preventDefault();
 216                 });
 217
 218             this.rte.start_edition($rte_ables);
 219             $raw_editables.each(function () {
 220                 observer.observe(this, OBSERVER_CONFIG);
 221             }).one('content_changed', function () {
 222                 $(this).addClass('oe_dirty');
 223                 self.rte_changed();
 224             });
 225         },
 226         rte_changed: function () {
 227             this.$buttons.save.prop('disabled', false);
 228         },
 229         save: function () {
 230             var self = this;
 231             var defs = [];
 232             observer.disconnect();
 233             $('.oe_dirty').each(function (i, v) {
 234                 var $el = $(this);
 235                 // TODO: Add a queue with concurrency limit in webclient
 236                 // https://github.com/medikoo/deferred/blob/master/lib/ext/function/gate.js
 237                 var def = self.saving_mutex.exec(function () {
 238                     return self.saveElement($el).then(function () {
 239                         $el.removeClass('oe_dirty');
 240                     }).fail(function () {
 241                         var data = $el.data();
 242                         console.error(_.str.sprintf('Could not save %s#%d#%s', data.oeModel, data.oeId, data.oeField));
 243                     });
 244                 });
 245                 defs.push(def);
 246             });
 247             return $.when.apply(null, defs).then(function () {
 248                 window.location.href = window.location.href.replace(/unable_editor(=[^&]*)?/, '');
 249             });
 250         },
 251         saveElement: function ($el) {
 252             var data = $el.data();
 253             var html = $el.html();
 254             var xpath = data.oeXpath;
 255             if (xpath) {
 256                 var $w = $el.clone();
 257                 $w.removeClass('oe_dirty');
 258                 _.each(['model', 'id', 'field', 'xpath'], function(d) {$w.removeAttr('data-oe-' + d);});
 259                 $w
 260                     .removeClass('oe_editable')
 261                     .prop('contentEditable', false);
 262                 html = $w.wrap('<div>').parent().html();
 263             }
 264             return openerp.jsonRpc('/web/dataset/call', 'call', {
 265                 model: 'ir.ui.view',
 266                 method: 'save',
 267                 args: [data.oeModel, data.oeId, data.oeField, html, xpath]
 268             });
 269         },
 270         cancel: function () {
 271             window.location.href = window.location.href.replace(/unable_editor(=[^&]*)?/, '');
 272         },
 273     });
 274
 275     /* ----- RICH TEXT EDITOR ---- */
 276     website.RTE = openerp.Widget.extend({
 277         tagName: 'li',
 278         id: 'oe_rte_toolbar',
 279         className: 'oe_right oe_rte_toolbar',
 280         // editor.ui.items -> possible commands &al
 281         // editor.applyStyle(new CKEDITOR.style({element: "span",styles: {color: "#(color)"},overrides: [{element: "font",attributes: {color: null}}]}, {color: '#ff0000'}));
 282
 283         init: function (EditorBar) {
 284             this.EditorBar = EditorBar;
 285             this._super.apply(this, arguments);
 286         },
 287
 288         start_edition: function ($elements) {
 289             var self = this;
 290             $elements
 291                 .not('span, [data-oe-type]')
 292                 .each(function () {
 293                     var node = this;
 294                     var $node = $(node);
 295                     var editor = CKEDITOR.inline(this, self._config());
 296                     editor.on('instanceReady', function () {
 297                         self.trigger('instanceReady');
 298                         observer.observe(node, OBSERVER_CONFIG);
 299                     });
 300                     $node.one('content_changed', function () {
 301                         $node.addClass('oe_dirty');
 302                         self.trigger('change');
 303                     });
 304                 });
 305         },
 306
 307         _current_editor: function () {
 308             return CKEDITOR.currentInstance;
 309         },
 310         _config: function () {
 311             var removed_plugins = [
 312                     // remove custom context menu
 313                     'contextmenu,tabletools,liststyle',
 314                     // magicline captures mousein/mouseout => draggable does not work
 315                     'magicline'
 316             ];
 317             return {
 318                 // Disable auto-generated titles
 319                 // FIXME: accessibility, need to generate user-sensible title, used for @title and @aria-label
 320                 title: false,
 321                 removePlugins: removed_plugins.join(','),
 322                 uiColor: '',
 323                 // Ensure no config file is loaded
 324                 customConfig: '',
 325                 // Disable ACF
 326                 allowedContent: true,
 327                 // Don't insert paragraphs around content in e.g. <li>
 328                 autoParagraph: false,
 329                 filebrowserImageUploadUrl: "/website/attach",
 330                 // Support for sharedSpaces in 4.x
 331                 extraPlugins: 'sharedspace,customdialogs,tablebutton',
 332                 // Place toolbar in controlled location
 333                 sharedSpaces: { top: 'oe_rte_toolbar' },
 334                 toolbar: [
 335                     {name: 'basicstyles', items: [
 336                         "Bold", "Italic", "Underline", "Strike", "Subscript",
 337                         "Superscript", "TextColor", "BGColor", "RemoveFormat"
 338                     ]},{
 339                     name: 'span', items: [
 340                         "Link", "Unlink", "Blockquote", "BulletedList",
 341                         "NumberedList", "Indent", "Outdent"
 342                     ]},{
 343                     name: 'justify', items: [
 344                         "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock"
 345                     ]},{
 346                     name: 'special', items: [
 347                         "Image", "TableButton"
 348                     ]},{
 349                     name: 'styles', items: [
 350                         "Styles"
 351                     ]}
 352                 ],
 353                 // styles dropdown in toolbar
 354                 stylesSet: [
 355                     {name: "Normal", element: 'p'},
 356                     {name: "Heading 1", element: 'h1'},
 357                     {name: "Heading 2", element: 'h2'},
 358                     {name: "Heading 3", element: 'h3'},
 359                     {name: "Heading 4", element: 'h4'},
 360                     {name: "Heading 5", element: 'h5'},
 361                     {name: "Heading 6", element: 'h6'},
 362                     {name: "Formatted", element: 'pre'},
 363                     {name: "Address", element: 'address'},
 364                     // emphasis
 365                     {name: "Muted", element: 'span', attributes: {'class': 'text-muted'}},
 366                     {name: "Primary", element: 'span', attributes: {'class': 'text-primary'}},
 367                     {name: "Warning", element: 'span', attributes: {'class': 'text-warning'}},
 368                     {name: "Danger", element: 'span', attributes: {'class': 'text-danger'}},
 369                     {name: "Success", element: 'span', attributes: {'class': 'text-success'}},
 370                     {name: "Info", element: 'span', attributes: {'class': 'text-info'}}
 371                 ],
 372             };
 373         },
 374     });
 375
 376     website.editor = { };
 377     website.editor.Dialog = openerp.Widget.extend({
 378         events: {
 379             'hidden.bs.modal': 'destroy',
 380             'click button.save': 'save',
 381         },
 382         init: function (editor) {
 383             this._super();
 384             this.editor = editor;
 385         },
 386         start: function () {
 387             var sup = this._super();
 388             this.$el.modal();
 389             return sup;
 390         },
 391         save: function () {
 392             this.$el.modal('hide');
 393         },
 394     });
 395
 396     website.editor.LinkDialog = website.editor.Dialog.extend({
 397         template: 'website.editor.dialog.link',
 398         events: _.extend({}, website.editor.Dialog.prototype.events, {
 399             'change .url-source': function (e) { this.changed($(e.target)); },
 400             'click div.existing a': 'select_page',
 401         }),
 402         init: function (editor) {
 403             this._super(editor);
 404             // url -> name mapping for existing pages
 405             this.pages = Object.create(null);
 406             // name -> url mapping for the same
 407             this.pages_by_name = Object.create(null);
 408         },
 409         start: function () {
 410             var element;
 411             if ((element = this.get_selected_link()) && element.hasAttribute('href')) {
 412                 this.editor.getSelection().selectElement(element);
 413             }
 414             this.element = element;
 415
 416             return $.when(
 417                 this.fetch_pages().done(this.proxy('fill_pages')),
 418                 this._super()
 419             ).done(this.proxy('bind_data'));
 420         },
 421         /**
 422          * Greatly simplified version of CKEDITOR's
 423          * plugins.link.dialogs.link.onOk.
 424          *
 425          * @param {String} url
 426          * @param {Boolean} [new_window=false]
 427          * @param {String} [label=null]
 428          */
 429         make_link: function (url, new_window, label) {
 430             var attributes = {href: url, 'data-cke-saved-href': url};
 431             var to_remove = [];
 432             if (new_window) {
 433                 attributes['target'] = '_blank';
 434             } else {
 435                 to_remove.push('target');
 436             }
 437
 438             if (this.element) {
 439                 this.element.setAttributes(attributes);
 440                 this.element.removeAttributes(to_remove);
 441             } else {
 442                 var selection = this.editor.getSelection();
 443                 var range = selection.getRanges(true)[0];
 444
 445                 if (range.collapsed) {
 446                     var text = new CKEDITOR.dom.text(label || url);
 447                     range.insertNode(text);
 448                     range.selectNodeContents(text);
 449                 }
 450
 451                 new CKEDITOR.style({
 452                     type: CKEDITOR.STYLE_INLINE,
 453                     element: 'a',
 454                     attributes: attributes,
 455                 }).applyToRange(range);
 456
 457                 // focus dance between RTE & dialog blow up the stack in Safari
 458                 // and Chrome, so defer select() until dialog has been closed
 459                 setTimeout(function () {
 460                     range.select();
 461                 }, 0);
 462             }
 463         },
 464         save: function () {
 465             var self = this, _super = this._super.bind(this);
 466             var $e = this.$('.url-source').filter(function () { return !!this.value; });
 467
 468             var val = $e.val(), done = $.when();
 469             if ($e.hasClass('email-address')) {
 470                 this.make_link('mailto:' + val, false, val);
 471             } else if ($e.hasClass('pages')) {
 472                 // ``val`` is the *name* of the page
 473                 var url = this.pages_by_name[val];
 474                 if (!url) {
 475                     // Create the page, get the URL back
 476                     done = $.get(_.str.sprintf(
 477                         '/pagenew/%s?noredirect', encodeURIComponent(val)))
 478                         .then(function (response) {
 479                             url = response;
 480                         });
 481                 }
 482                 done.then(function () {
 483                     self.make_link(url, false, val);
 484                 });
 485             } else {
 486                 this.make_link(val, this.$('input.window-new').prop('checked'));
 487             }
 488             done.then(_super);
 489         },
 490         bind_data: function () {
 491             var href = this.element && (this.element.data( 'cke-saved-href')
 492                                     ||  this.element.getAttribute('href'));
 493             if (!href) { return; }
 494
 495             var match, $control;
 496             if (match = /(mailto):(.+)/.exec(href)) {
 497                 $control = this.$('input.email-address').val(match[2]);
 498             } else if(href in this.pages) {
 499                 $control = this.$('input.pages').val(this.pages[href]);
 500             }
 501             if (!$control) {
 502                 $control = this.$('input.url').val(href);
 503             }
 504
 505             this.changed($control);
 506
 507             this.$('input.window-new').prop(
 508                 'checked', this.element.getAttribute('target') === '_blank');
 509         },
 510         changed: function ($e) {
 511             $e.closest('li.list-group-item').addClass('active')
 512               .siblings().removeClass('active');
 513             this.$('.url-source').not($e).val('');
 514         },
 515         /**
 516          * Selected an existing page in dropdown
 517          */
 518         select_page: function (e) {
 519             e.preventDefault();
 520             e.stopPropagation();
 521             var $target = $(e.target);
 522             this.$('input.pages').val($target.text()).change();
 523             // No #dropdown('close'), and using #dropdown('toggle') sur
 524             // #closest('.dropdown') makes the dropdown not work correctly
 525             $target.closest('.open').removeClass('open');
 526         },
 527         /**
 528          * CKEDITOR.plugins.link.getSelectedLink ignores the editor's root,
 529          * if the editor is set directly on a link it will thus not work.
 530          */
 531         get_selected_link: function () {
 532             var sel = this.editor.getSelection(),
 533                 el = sel.getSelectedElement();
 534             if (el && el.is('a')) { return el; }
 535
 536             var range = sel.getRanges(true)[0];
 537             if (!range) { return null; }
 538
 539             range.shrink(CKEDITOR.SHRINK_TEXT);
 540             return this.editor.elementPath(range.getCommonAncestor())
 541                               .contains('a');
 542
 543         },
 544         fetch_pages: function () {
 545             return openerp.jsonRpc('/web/dataset/call_kw', 'call', {
 546                 model: 'website',
 547                 method: 'list_pages',
 548                 args: [],
 549                 kwargs: {}
 550             });
 551         },
 552         fill_pages: function (results) {
 553             var self = this;
 554             var $pages = this.$('div.existing ul').empty();
 555             _(results).each(function (result) {
 556                 self.pages[result.url] = result.name;
 557                 self.pages_by_name[result.name] = result.url;
 558                 var $link = $('<a>').attr('href', result.url).text(result.name);
 559                 $('<li>').append($link).appendTo($pages);
 560             });
 561         },
 562     });
 563     website.editor.ImageDialog = website.editor.Dialog.extend({
 564         template: 'website.editor.dialog.image',
 565         events: _.extend({}, website.editor.Dialog.prototype.events, {
 566             'change .url-source': function (e) { this.changed($(e.target)); },
 567             'click button.filepicker': function () {
 568                 this.$('input[type=file]').click();
 569             },
 570             'change input[type=file]': 'file_selection',
 571             'change input.url': 'preview_image',
 572             'click .existing-attachments a': 'select_existing',
 573         }),
 574         start: function () {
 575             var selection = this.editor.getSelection();
 576             var el = selection && selection.getSelectedElement();
 577             this.element = null;
 578             if (el && el.is('img')) {
 579                 this.element = el;
 580                 this.set_image(el.getAttribute('src'));
 581             }
 582
 583             return $.when(
 584                 this._super(),
 585                 this.fetch_existing().then(this.proxy('fetched_existing')));
 586         },
 587         save: function () {
 588             var url = this.$('input.url').val();
 589             var element, editor = this.editor;
 590             if (!(element = this.element)) {
 591                 element = editor.document.createElement('img');
 592                 // focus event handler interactions between bootstrap (modal)
 593                 // and ckeditor (RTE) lead to blowing the stack in Safari and
 594                 // Chrome (but not FF) when this is done synchronously =>
 595                 // defer insertion so modal has been hidden & destroyed before
 596                 // it happens
 597                 setTimeout(function () {
 598                     editor.insertElement(element);
 599                 }, 0);
 600             }
 601             element.setAttribute('src', url);
 602             this._super();
 603         },
 604
 605         /**
 606          * Sets the provided image url as the dialog's value-to-save and
 607          * refreshes the preview element to use it.
 608          */
 609         set_image: function (url) {
 610             this.$('input.url').val(url);
 611             this.preview_image();
 612         },
 613
 614         file_selection: function (e) {
 615             this.$('button.filepicker').removeClass('btn-danger btn-success');
 616
 617             var self = this;
 618             var callback = _.uniqueId('func_');
 619             this.$('input[name=func]').val(callback);
 620
 621             window[callback] = function (url, error) {
 622                 delete window[callback];
 623                 self.file_selected(url, error);
 624             };
 625             this.$('form').submit();
 626         },
 627         file_selected: function(url, error) {
 628             var $button = this.$('button.filepicker');
 629             if (error) {
 630                 $button.addClass('btn-danger');
 631                 return;
 632             }
 633             $button.addClass('btn-success');
 634             this.set_image(url);
 635         },
 636         preview_image: function () {
 637             var image = this.$('input.url').val();
 638             if (!image) { return; }
 639
 640             this.$('img.image-preview').attr('src', image);
 641         },
 642
 643         fetch_existing: function () {
 644             // FIXME: lazy load attachments?
 645             return openerp.jsonRpc('/web/dataset/call_kw', 'call', {
 646                 model: 'ir.attachment',
 647                 method: 'search_read',
 648                 args: [],
 649                 kwargs: {
 650                     fields: ['name'],
 651                     domain: [['res_model', '=', 'ir.ui.view']],
 652                     order: 'name',
 653                 }
 654             });
 655         },
 656         fetched_existing: function (records) {
 657             // Create rows of 3 records
 658             var rows = _(records).chain()
 659                 .groupBy(function (_, index) { return Math.floor(index / 3); })
 660                 .values()
 661                 .value();
 662             this.$('.existing-attachments').replaceWith(
 663                 openerp.qweb.render('website.editor.dialog.image.existing', {rows: rows}));
 664         },
 665         select_existing: function (e) {
 666             e.preventDefault();
 667             this.set_image(e.currentTarget.getAttribute('href'));
 668         },
 669     });
 670
 671
 672     var Observer = window.MutationObserver || window.WebkitMutationObserver || window.JsMutationObserver;
 673     var OBSERVER_CONFIG = {
 674         childList: true,
 675         attributes: true,
 676         characterData: true,
 677         subtree: true,
 678         attributeOldValue: true,
 679     };
 680     var observer = new Observer(function (mutations) {
 681         // NOTE: Webkit does not fire DOMAttrModified => webkit browsers
 682         //       relying on JsMutationObserver shim (Chrome < 18, Safari < 6)
 683         //       will not mark dirty on attribute changes (@class, img/@src,
 684         //       a/@href, ...)
 685         _(mutations).chain()
 686                 .filter(function (m) {
 687                 switch(m.type) {
 688                 case 'attributes': // ignore .cke_focus being added or removed
 689                     // if attribute is not a class, can't be .cke_focus change
 690                     if (m.attributeName !== 'class') { return true; }
 691
 692                     // find out what classes were added or removed
 693                     var oldClasses = m.oldValue.split(/\s+/);
 694                     var newClasses = m.target.className.split(/\s+/);
 695                     var change = _.union(_.difference(oldClasses, newClasses),
 696                                          _.difference(newClasses, oldClasses));
 697                     // ignore mutation if the *only* change is .cke_focus
 698                     return change.length !== 1 || change[0] === 'cke_focus';
 699                 case 'childList':
 700                     // <br type="_moz"> appears when focusing RTE in FF, ignore
 701                     return m.addedNodes.length !== 1 || m.addedNodes[0].nodeName !== 'BR';
 702                 default:
 703                     return true;
 704                 }
 705             })
 706             .map(function (m) {
 707                 var node = m.target;
 708                 while (node && !$(node).hasClass('oe_editable')) {
 709                     node = node.parentNode;
 710                 }
 711                 return node;
 712             })
 713             .compact()
 714             .uniq()
 715             .each(function (node) { $(node).trigger('content_changed'); })
 716     });
 717 })();