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

   1 (function () {
   2     'use strict';
   3
   4     var website = openerp.website;
   5     website.add_template_file('/website/static/src/xml/website.snippets.xml');
   6
   7     website.EditorBar.include({
   8         start: function () {
   9             var self = this;
  10             $("[data-oe-model]").on('click', function (event) {
  11                 var $this = $(event.srcElement);
  12                 var tag = $this[0].tagName.toLowerCase();
  13                 if (!(tag === 'a' || tag === "button") && !$this.parents("a, button").length) {
  14                     self.$('[data-action="edit"]').parent().effect('bounce', {distance: 18, times: 5}, 250);
  15                 }
  16             });
  17             return this._super();
  18         },
  19         edit: function () {
  20             var self = this;
  21             $("body").off('click');
  22             window.snippets = this.snippets = new website.snippet.BuildingBlock(this);
  23             this.snippets.appendTo(this.$el);
  24
  25             this.on('rte:ready', this, function () {
  26                 self.snippets.$button.removeClass("hidden");
  27                 website.snippet.stop_animation();
  28                 website.snippet.start_animation();
  29                 self.trigger('tour:editor_bar_loaded');
  30             });
  31
  32             return this._super.apply(this, arguments);
  33         },
  34         save: function () {
  35             this.snippets.make_active(false);
  36
  37             // FIXME: call clean_for_save on all snippets of the page, not only modified ones
  38             // important for banner of parallax that changes data automatically.
  39             this.snippets.clean_for_save();
  40             remove_added_snippet_id();
  41             this._super();
  42         },
  43     });
  44
  45     /* ----- SNIPPET SELECTOR ---- */
  46
  47     var observer = new website.Observer(function (mutations) {
  48         if (!_(mutations).find(function (m) {
  49                     return m.type === 'childList' && m.addedNodes.length > 0;
  50                 })) {
  51             return;
  52         }
  53         hack_to_add_snippet_id()
  54     });
  55
  56     // puts $el at the same absolute position as $target
  57     function hack_to_add_snippet_id () {
  58         _.each(website.snippet.selector, function (val) {
  59             $(val[0]).each(function() {
  60                 if (!$(this).is("[data-snippet-id]") && $(this).parents("[data-oe-model]").length) {
  61                     $(this).attr("data-snippet-id", val[1]);
  62                 }
  63             });
  64         });
  65     }
  66     function remove_added_snippet_id () {
  67         _.each(website.snippet.selector, function (val) {
  68             $(val[0]).each(function() {
  69                 if ($(this).data("snippet-id") === val[1]) {
  70                     $(this).removeAttr("data-snippet-id");
  71                 }
  72             });
  73         });
  74     }
  75
  76     $(document).ready(function() {
  77         hack_to_add_snippet_id();
  78     });
  79
  80     website.snippet.styles = {};
  81     website.snippet.selector = [];
  82     website.snippet.BuildingBlock = openerp.Widget.extend({
  83         template: 'website.snippets',
  84         activeSnippets: [],
  85         init: function (parent) {
  86             this.parent = parent;
  87             this._super.apply(this, arguments);
  88             if(!$('#oe_manipulators').length){
  89                 $("<div id='oe_manipulators'></div>").appendTo('body');
  90             }
  91             this.$active_snipped_id = false;
  92             hack_to_add_snippet_id();
  93             this.snippets = [];
  94
  95             observer.observe(document.body, {
  96                 childList: true,
  97                 subtree: true,
  98             });
  99         },
 100         dom_filter: function (dom, sibling) {
 101             if (typeof dom === "string") {
 102                 var include = "[data-oe-model]";
 103                 var sdom = dom.split(',');
 104                 dom = "";
 105                 _.each(sdom, function (val) {
 106                     val = val.replace(/^\s+|\s+$/g, '');
 107                     dom += include + " " + val + ", ";
 108                     if (!sibling) {
 109                         val = val.split(" ");
 110                         dom += val.shift() + include + val.join(" ") + ", ";
 111                     }
 112                 });
 113                 dom = dom.replace(/,\s*$/g, '');
 114                 return $(dom);
 115             } else {
 116                 return (!sibling && $(dom).is("[data-oe-model]")) || $(dom).parents("[data-oe-model]").length ? $(dom) : $("");
 117             }
 118         },
 119         start: function() {
 120             var self = this;
 121
 122             this.$button = $(openerp.qweb.render('website.snippets_button'))
 123                 .prependTo(this.parent.$("#website-top-edit ul"))
 124                 .find("button");
 125
 126             this.$button.click(function () {
 127                 self.make_active(false);
 128                 self.$el.toggleClass("hidden");
 129             });
 130
 131             this.fetch_snippet_templates();
 132
 133             this.bind_snippet_click_editor();
 134
 135             this.$el.addClass("hidden");
 136
 137             this.$modal = $(openerp.qweb.render('website.snippets_modal'));
 138             this.$modal.appendTo("body");
 139         },
 140         fetch_snippet_templates: function () {
 141             var self = this;
 142
 143             openerp.jsonRpc("/website/snippets", 'call', {})
 144                 .then(function (html) {
 145                     var $html = $(html);
 146
 147                     var $styles = $html.find("[data-snippet-style-id]");
 148                     $styles.each(function () {
 149                         var $style = $(this);
 150                         var style_id = $style.data('snippet-style-id');
 151                         website.snippet.styles[style_id] = {
 152                             'snippet-style-id' : style_id,
 153                             'selector': $style.data('selector'),
 154                             '$el': $style,
 155                         };
 156                     });
 157                     $styles.addClass("hidden");
 158
 159                     self.$snippets = $html.find(".tab-content > div > div").addClass("oe_snippet");
 160                     self.$el.append($html);
 161
 162                     self.make_snippet_draggable(self.$snippets);
 163                 });
 164         },
 165         cover_target: function ($el, $target){
 166             var pos = $target.offset();
 167             var mt = parseInt($target.css("margin-top") || 0);
 168             var mb = parseInt($target.css("margin-bottom") || 0);
 169             $el.css({
 170                 'position': 'absolute',
 171                 'width': $target.outerWidth(),
 172                 'height': $target.outerHeight() + mt + mb,
 173                 'top': pos.top - mt,
 174                 'left': pos.left
 175             });
 176         },
 177         show: function () {
 178             this.$el.removeClass("hidden");
 179         },
 180         hide: function () {
 181             this.$el.addClass("hidden");
 182         },
 183
 184         bind_snippet_click_editor: function () {
 185             var self = this;
 186             var snipped_event_flag = false;
 187             $("body").on('click', "[data-oe-model] [data-snippet-id], [data-oe-model][data-snippet-id]", function (event) {
 188                     if (snipped_event_flag) {
 189                         return;
 190                     }
 191                     snipped_event_flag = true;
 192                     setTimeout(function () {snipped_event_flag = false;}, 0);
 193                     var $target = $(event.currentTarget);
 194                     if (self.$active_snipped_id && self.$active_snipped_id.is($target)) {
 195                         return;
 196                     }
 197                     self.make_active($target);
 198                 });
 199             $("[data-oe-model]").on('click', function () {
 200                     if (!snipped_event_flag && self.$active_snipped_id && !self.$active_snipped_id.parents("[data-snippet-id]:first")) {
 201                         self.make_active(false);
 202                     }
 203                 });
 204         },
 205         snippet_blur: function ($snipped_id) {
 206             if ($snipped_id) {
 207                 if ($snipped_id.data("snippet-editor")) {
 208                     $snipped_id.data("snippet-editor").onBlur();
 209                 }
 210             }
 211         },
 212         snippet_focus: function ($snipped_id) {
 213             if ($snipped_id) {
 214                 if ($snipped_id.data("snippet-editor")) {
 215                     $snipped_id.data("snippet-editor").onFocus();
 216                 }
 217             }
 218         },
 219         clean_for_save: function () {
 220             for (var k in this.snippets) {
 221                 if (!this.snippets.hasOwnProperty(k)) { continue; }
 222                 var editor = $(this.snippets[k]).data("snippet-editor");
 223                 if (editor) {
 224                     editor.clean_for_save();
 225                 }
 226             }
 227         },
 228         make_active: function ($snipped_id) {
 229             if ($snipped_id && this.$active_snipped_id && this.$active_snipped_id.get(0) === $snipped_id.get(0)) {
 230                 return;
 231             }
 232             if (this.$active_snipped_id) {
 233                 this.snippet_blur(this.$active_snipped_id);
 234                 this.$active_snipped_id = false;
 235             }
 236             if ($snipped_id) {
 237                 if(_.indexOf(this.snippets, $snipped_id.get(0)) === -1) {
 238                     this.snippets.push($snipped_id.get(0));
 239                 }
 240                 this.$active_snipped_id = $snipped_id;
 241                 this.create_overlay(this.$active_snipped_id);
 242                 this.snippet_focus($snipped_id);
 243             }
 244         },
 245         create_overlay: function ($snipped_id) {
 246             if (typeof $snipped_id.data("snippet-editor") === 'undefined') {
 247                 var $targets = this.activate_overlay_zones($snipped_id);
 248                 if (!$targets.length) return;
 249                 var editor = website.snippet.editorRegistry[$snipped_id.data("snippet-id")] || website.snippet.editorRegistry.resize;
 250                 $snipped_id.data("snippet-editor", new editor(this, $snipped_id));
 251             }
 252             this.cover_target($snipped_id.data('overlay'), $snipped_id);
 253         },
 254
 255         path_eval: function(path){
 256             var obj = window;
 257             path = path.split('.');
 258             do{
 259                 obj = obj[path.shift()];
 260             }while(path.length && obj);
 261             return obj;
 262         },
 263
 264         // activate drag and drop for the snippets in the snippet toolbar
 265         make_snippet_draggable: function($snippets){
 266             var self = this;
 267             var $tumb = $snippets.find(".oe_snippet_thumbnail:first");
 268             var left = $tumb.outerWidth()/2;
 269             var top = $tumb.outerHeight()/2;
 270             var $toInsert, dropped, $snippet, action, snipped_id;
 271
 272             $snippets.draggable({
 273                 greedy: true,
 274                 helper: 'clone',
 275                 zIndex: '1000',
 276                 appendTo: 'body',
 277                 cursor: "move",
 278                 handle: ".oe_snippet_thumbnail",
 279                 cursorAt: {
 280                     'left': left,
 281                     'top': top
 282                 },
 283                 start: function(){
 284                     self.hide();
 285                     dropped = false;
 286                     $snippet = $(this);
 287                     snipped_id = $snippet.data('snippet-id');
 288                     action = $snippet.find('.oe_snippet_body').size() ? 'insert' : 'mutate';
 289                     if( action === 'insert'){
 290                         if (!$snippet.data('selector-siblings') && !$snippet.data('selector-children') && !$snippet.data('selector-vertical-children')) {
 291                             console.debug($snippet.data("snippet-id") + " have oe_snippet_body class and have not for insert action"+
 292                                 "data-selector-siblings, data-selector-children or data-selector-vertical-children tag for mutate action");
 293                             return;
 294                         }
 295                         self.activate_insertion_zones({
 296                             siblings: $snippet.data('selector-siblings'),
 297                             children:   $snippet.data('selector-children'),
 298                             vertical_children:   $snippet.data('selector-vertical-children')
 299                         });
 300
 301                         $toInsert = $snippet.find('.oe_snippet_body').clone();
 302                         $toInsert.removeClass('oe_snippet_body');
 303                         $toInsert.attr('data-snippet-id', snipped_id);
 304
 305                     } else if( action === 'mutate' ){
 306                         if (!$snippet.data('selector')) {
 307                             console.debug($snippet.data("snippet-id") + " have not oe_snippet_body class and have not data-selector tag");
 308                             return;
 309                         }
 310                         var $targets = self.activate_overlay_zones($snippet.data('selector'));
 311                         $targets.each(function(){
 312                             var $clone = $(this).data('overlay').clone();
 313                              $clone.addClass("oe_drop_zone").data('target', $(this));
 314                             $(this).data('overlay').after($clone);
 315                         });
 316
 317                     }
 318
 319                     $('.oe_drop_zone').droppable({
 320                         over:   function(){
 321                             if( action === 'insert'){
 322                                 dropped = true;
 323                                 $(this).first().after($toInsert);
 324                             }
 325                         },
 326                         out:    function(){
 327                             var prev = $toInsert.prev();
 328                             if( action === 'insert' && this === prev[0]){
 329                                 dropped = false;
 330                                 $toInsert.detach();
 331                             }
 332                         }
 333                     });
 334                 },
 335                 stop: function(ev, ui){
 336                     if (action === 'insert' && ! dropped && $('.oe_drop_zone')) {
 337                         var el = $('.oe_drop_zone').nearest({x: ui.position.left, y: ui.position.top}).first();
 338                         if (el.length) {
 339                             el.after($toInsert);
 340                             dropped = true;
 341                         }
 342                     }
 343
 344                     $('.oe_drop_zone').droppable('destroy').remove();
 345                     if (dropped) {
 346                         var $target = false;
 347                         if(action === 'insert'){
 348                             $target = $toInsert;
 349
 350                             website.snippet.start_animation();
 351
 352                             self.create_overlay($target);
 353                             if ($snippet.data("snippet-editor")) {
 354                                 $target.data("snippet-editor").drop_and_build_snippet($target);
 355                             }
 356
 357                             $target.find("[data-snippet-id]").each(function () {
 358                                 var $snippet = $(this);
 359                                 var snippet_id = $snippet.data("data-snippet-id");
 360                                 self.create_overlay($snippet);
 361                                 if ($snippet.data("snippet-editor")) {
 362                                     $snippet.data("snippet-editor").drop_and_build_snippet($snippet);
 363                                 }
 364                             });
 365
 366                         } else {
 367                             $target = $(this).data('target');
 368
 369                             self.create_overlay($target);
 370                             if (website.snippet.editorRegistry[snipped_id]) {
 371                                 var snippet = new website.snippet.editorRegistry[snipped_id](self, $target);
 372                                 snippet.drop_and_build_snippet($target);
 373                             }
 374                         }
 375                         setTimeout(function () {self.make_active($target);},0);
 376                     } else {
 377                         $toInsert.remove();
 378                         if (self.$modal.find('input:not(:checked)').length) {
 379                             self.$modal.modal('toggle');
 380                         }
 381                     }
 382                 },
 383             });
 384         },
 385
 386         // return the original snippet in the editor bar from a snippet id (string)
 387         get_snippet_from_id: function(id){
 388             return $('.oe_snippet').filter(function(){
 389                     return $(this).data('snippet-id') === id;
 390                 }).first();
 391         },
 392
 393         // Create element insertion drop zones. two css selectors can be provided
 394         // selector.children -> will insert drop zones as direct child of the selected elements
 395         //   in case the selected elements have children themselves, dropzones will be interleaved
 396         //   with them.
 397         // selector.siblings -> will insert drop zones after and before selected elements
 398         activate_insertion_zones: function(selector){
 399             var self = this;
 400             var child_selector = selector.children;
 401             var sibling_selector = selector.siblings;
 402             var vertical_child_selector   =  selector.vertical_children;
 403
 404             var zone_template = "<div class='oe_drop_zone oe_insert'></div>";
 405
 406             if(child_selector){
 407                 self.dom_filter(child_selector).each(function (){
 408                     var $zone = $(this);
 409                     $zone.find('> *:not(.oe_drop_zone):visible').after(zone_template);
 410                     $zone.prepend(zone_template);
 411                 });
 412             }
 413
 414             if(vertical_child_selector){
 415                 self.dom_filter(vertical_child_selector).each(function (){
 416                     var $zone = $(this);
 417                     var $template = $(zone_template).addClass("oe_vertical");
 418                     var nb = 0;
 419                     var $lastinsert = false;
 420                     var left = 0;
 421                     var temp_left = 0;
 422                     $zone.find('> *:not(.oe_drop_zone):visible').each(function () {
 423                         var $col = $(this);
 424                         $template.css('height', ($col.outerHeight() + parseInt($col.css("margin-top")) + parseInt($col.css("margin-bottom")))+'px');
 425                         $lastinsert = $template.clone();
 426                         $(this).after($lastinsert);
 427
 428                         temp_left = $col.position().left;
 429                         if (left === temp_left) {
 430                             $col.prev(".oe_drop_zone.oe_vertical").remove();
 431                             $col.before($template.clone().css("clear", "left"));
 432                         }
 433                         else if (!nb) {
 434                             $col.before($template.clone());
 435                         }
 436                         left = temp_left;
 437                         nb ++;
 438                     });
 439                     if (!nb) {
 440                         $zone.prepend($template.css('height', $zone.outerHeight()+'px'));
 441                     }
 442                 });
 443             }
 444
 445             if(sibling_selector){
 446                 self.dom_filter(sibling_selector, true).each(function (){
 447                     var $zone = $(this);
 448                     if($zone.prev('.oe_drop_zone:visible').length === 0){
 449                         $zone.before(zone_template);
 450                     }
 451                     if($zone.next('.oe_drop_zone:visible').length === 0){
 452                         $zone.after(zone_template);
 453                     }
 454                 });
 455             }
 456
 457             var count;
 458             do {
 459                 count = 0;
 460                 // var $zones = $('.oe_drop_zone + .oe_drop_zone');    // no two consecutive zones
 461                 // count += $zones.length;
 462                 // $zones.remove();
 463
 464                 $zones = $('.oe_drop_zone > .oe_drop_zone:not(.oe_vertical)').remove();   // no recursive zones
 465                 count += $zones.length;
 466                 $zones.remove();
 467             } while (count > 0);
 468
 469             // Cleaning up zones placed between floating or inline elements. We do not like these kind of zones.
 470             var $zones = $('.oe_drop_zone:not(.oe_vertical)');
 471             $zones.each(function (){
 472                 var zone = $(this);
 473                 var prev = zone.prev();
 474                 var next = zone.next();
 475                 var float_prev = prev.css('float')   || 'none';
 476                 var float_next = next.css('float')   || 'none';
 477                 var disp_prev  = prev.css('display') ||  null;
 478                 var disp_next  = next.css('display') ||  null;
 479                 if(     (float_prev === 'left' || float_prev === 'right')
 480                     &&  (float_next === 'left' || float_next === 'right')  ){
 481                     zone.remove();
 482                 }else if( !( disp_prev === null
 483                           || disp_next === null
 484                           || disp_prev === 'block'
 485                           || disp_next === 'block' )){
 486                     zone.remove();
 487                 }
 488             });
 489         },
 490
 491         // generate drop zones covering the elements selected by the selector
 492         // we generate overlay drop zones only to get an idea of where the snippet are, the drop
 493         activate_overlay_zones: function(selector){
 494             var $targets = this.dom_filter(selector || '[data-snippet-id]');
 495             var self = this;
 496
 497             if (typeof selector !== 'string' && !$targets.length) {
 498                 console.debug( "A good node must have a [data-oe-model] attribute or must have at least one parent with [data-oe-model] attribute.");
 499                 console.debug( "Wrong node(s): ", selector);
 500             }
 501
 502             function is_visible($el){
 503                 return     $el.css('display')    != 'none'
 504                         && $el.css('opacity')    != '0'
 505                         && $el.css('visibility') != 'hidden';
 506             }
 507
 508             // filter out invisible elements
 509             $targets = $targets.filter(function(){ return is_visible($(this)); });
 510
 511             // filter out elements with invisible parents
 512             $targets = $targets.filter(function(){
 513                 var parents = $(this).parents().filter(function(){ return !is_visible($(this)); });
 514                 return parents.length === 0;
 515             });
 516
 517             $targets.each(function () {
 518                 var $target = $(this);
 519                 if (!$target.data('overlay')) {
 520                     var $zone = $(openerp.qweb.render('website.snippet_overlay'));
 521                     $zone.appendTo('#oe_manipulators');
 522                     $zone.data('target',$target);
 523                     $target.data('overlay',$zone);
 524
 525                     $target.on("DOMNodeInserted DOMNodeRemoved DOMSubtreeModified", function () {
 526                         self.cover_target($zone, $target);
 527                     });
 528                     $('body').on("resize", function () {
 529                         self.cover_target($zone, $target);
 530                     });
 531                 }
 532                 self.cover_target($target.data('overlay'), $target);
 533             });
 534             return $targets;
 535         }
 536     });
 537
 538
 539     website.snippet.styleRegistry = {};
 540     website.snippet.StyleEditor = openerp.Class.extend({
 541         // initialisation (don't overwrite)
 542         init: function (parent, $target, snippet_id) {
 543             this.parent = parent;
 544             this.$target = $target;
 545             var styles = this.$target.data("snippet-style-ids") || {};
 546             styles[snippet_id] = this;
 547             this.$target.data("snippet-style-ids", styles);
 548             this.$overlay = this.$target.data('overlay');
 549             this['snippet-style-id'] = snippet_id;
 550             this.$el = website.snippet.styles[snippet_id].$el.find(">li").clone();
 551
 552             this.required = this.$el.data("required");
 553
 554             this.set_active();
 555             this.$el.find('li[data-class] a').on('mouseover mouseout click', _.bind(this._mouse, this));
 556             this.$target.on('snippet-style-reset', _.bind(this.set_active, this));
 557
 558             this.start();
 559         },
 560         _mouse: function (event) {
 561             var self = this;
 562
 563             if (event.type === 'mouseout') {
 564                 if (!this.over) return;
 565                 this.over = false;
 566             } else if (event.type === 'click') {
 567                 this.over = false;
 568             }else {
 569                 this.over = true;
 570             }
 571
 572             var $prev, $next;
 573             if (event.type === 'mouseout') {
 574                 $prev = $(event.currentTarget).parent();
 575                 $next = this.$el.find("li[data-class].active");
 576             } else {
 577                 $prev = this.$el.find("li[data-class].active");
 578                 $next = $(event.currentTarget).parent();
 579             }
 580             if (!$prev.length) {
 581                 $prev = false;
 582             }
 583             if ($prev && $prev[0] === $next[0]) {
 584                 $next = false;
 585                 if (this.required) {
 586                     return;
 587                 }
 588             }
 589
 590             var np = {'$next': $next, '$prev': $prev};
 591
 592             if (event.type === 'click') {
 593                 setTimeout(function () {
 594                     self.set_active();
 595                     self.$target.trigger("snippet-style-change", [self, np]);
 596                 },0);
 597                 this.select(event, {'$next': $next, '$prev': $prev});
 598             } else {
 599                 setTimeout(function () {
 600                     self.$target.trigger("snippet-style-preview", [self, np]);
 601                 },0);
 602                 this.preview(event, np);
 603             }
 604         },
 605         // start is call just after the init
 606         start: function () {
 607         },
 608         /* select
 609         *  called when a user select an item
 610         *  variables: np = {$next, $prev}
 611         *       $next is false if they are no next item selected
 612         *       $prev is false if they are no previous item selected
 613         */
 614         select: function (event, np) {
 615             var self = this;
 616             // add or remove html class
 617             if (np.$prev) {
 618                 this.$target.removeClass(np.$prev.data('class' || ""));
 619             }
 620             if (np.$next) {
 621                 this.$target.addClass(np.$next.data('class') || "");
 622             }
 623         },
 624         /* preview
 625         *  called when a user is on mouse over or mouse out of an item
 626         *  variables: np = {$next, $prev}
 627         *       $next is false if they are no next item selected
 628         *       $prev is false if they are no previous item selected
 629         */
 630         preview: function (event, np) {
 631             var self = this;
 632
 633             // add or remove html class
 634             if (np.$prev) {
 635                 this.$target.removeClass(np.$prev.data('class') || "");
 636             }
 637             if (np.$next) {
 638                 this.$target.addClass(np.$next.data('class') || "");
 639             }
 640         },
 641         /* set_active
 642         *  select and set item active or not (add highlight item and his parents)
 643         *  called before start
 644         */
 645         set_active: function () {
 646             var self = this;
 647             this.$el.find('li').removeClass("active");
 648             var $active = this.$el.find('li[data-class]')
 649                 .filter(function () {
 650                     var $li = $(this);
 651                     return  ($li.data('class') && self.$target.hasClass($li.data('class')));
 652                 })
 653                 .first()
 654                 .addClass("active");
 655             this.$el.find('li:has(li[data-class].active)').addClass("active");
 656         }
 657     });
 658
 659
 660     website.snippet.styleRegistry['size'] = website.snippet.StyleEditor.extend({
 661         select: function(event, np) {
 662             this._super(event, np);
 663             this.parent.parent.cover_target(this.$overlay, this.$target);
 664         },
 665         preview: function (event, np) {
 666             this._super(event, np);
 667             this.parent.parent.cover_target(this.$overlay, this.$target);
 668         }
 669     });
 670
 671     website.snippet.styleRegistry.background = website.snippet.StyleEditor.extend({
 672         _get_bg: function () {
 673             return this.$target.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
 674         },
 675         _set_bg: function (src) {
 676             this.$target.css("background-image", src && src !== "" ? 'url(' + src + ')' : "");
 677         },
 678         start: function () {
 679             this._super();
 680             var src = this._get_bg();
 681             this.$el.find("li[data-class].active.oe_custom_bg").data("src", src);
 682         },
 683         select: function(event, np) {
 684             var self = this;
 685             this._super(event, np);
 686             if (np.$next) {
 687                 if (np.$next.hasClass("oe_custom_bg")) {
 688                     var editor = new website.editor.ImageDialog();
 689                     editor.on('start', self, function (o) {o.url = np.$prev && np.$prev.data("src") || np.$next && np.$next.data("src") || "";});
 690                     editor.on('save', self, function (o) {
 691                         self._set_bg(o.url);
 692                         np.$next.data("src", o.url);
 693                         self.$target.trigger("snippet-style-change", [self, np]);
 694                     });
 695                     editor.on('cancel', self, function () {
 696                         if (!np.$prev || np.$prev.data("src") === "") {
 697                             self.$target.removeClass(np.$next.data("class"));
 698                             self.$target.trigger("snippet-style-change", [self, np]);
 699                         }
 700                     });
 701                     editor.appendTo($('body'));
 702                 } else {
 703                     this._set_bg(np.$next.data("src"));
 704                 }
 705             } else {
 706                 this._set_bg(false);
 707                 this.$target.removeClass(np.$prev.data("class"));
 708             }
 709         },
 710         preview: function (event, np) {
 711             this._super(event, np);
 712             if (np.$next) {
 713                 this._set_bg(np.$next.data("src"));
 714             }
 715         },
 716         set_active: function () {
 717             var self = this;
 718             var bg = self.$target.css("background-image");
 719             this.$el.find('li').removeClass("active");
 720             var $active = this.$el.find('li[data-class]')
 721                 .filter(function () {
 722                     var $li = $(this);
 723                     return  ($li.data('src') && bg.indexOf($li.data('src')) >= 0) ||
 724                             (!$li.data('src') && self.$target.hasClass($li.data('class')));
 725                 })
 726                 .first();
 727             if (!$active.length) {
 728                 $active = this.$target.css("background-image") !== 'none' ?
 729                     this.$el.find('li[data-class].oe_custom_bg') :
 730                     this.$el.find('li[data-class=""]');
 731             }
 732             $active.addClass("active");
 733             this.$el.find('li:has(li[data-class].active)').addClass("active");
 734         }
 735     });
 736
 737
 738     website.snippet.editorRegistry = {};
 739     website.snippet.Editor = openerp.Class.extend({
 740         init: function (parent, dom) {
 741             this.parent = parent;
 742             this.$target = $(dom);
 743             this.$overlay = this.$target.data('overlay');
 744             this.snippet_id = this.$target.data("snippet-id");
 745             this._readXMLData();
 746             this.load_style_options();
 747             this.get_parent_block();
 748             this.start();
 749         },
 750
 751         /*
 752         *  _readXMLData
 753         *  Read data XML and set value into:
 754         *  this.$el :
 755         *       all xml data
 756         *  this.$overlay :
 757         *       Dom hover the $target who content options
 758         *  this.$editor :
 759         *       content of .oe_snippet_options
 760         *       Displayed into the overlay options on focus
 761         */
 762         _readXMLData: function() {
 763             var self = this;
 764             this.$el = this.parent.$snippets.filter(function () { return $(this).data("snippet-id") == self.snippet_id; }).clone();
 765             this.$editor = this.$el.find(".oe_snippet_options");
 766             var $options = this.$overlay.find(".oe_overlay_options");
 767             this.$editor.prependTo($options.find(".oe_options ul"));
 768             if ($options.find(".oe_options ul li").length) {
 769                 $options.find(".oe_options").removeClass("hidden");
 770             }
 771         },
 772
 773
 774         // activate drag and drop for the snippets in the snippet toolbar
 775         _drag_and_drop: function(){
 776             var self = this;
 777             this.dropped = false;
 778             this.$overlay.draggable({
 779                 greedy: true,
 780                 appendTo: 'body',
 781                 cursor: "move",
 782                 handle: ".oe_snippet_move",
 783                 cursorAt: {
 784                     left: 18,
 785                     top: 14
 786                 },
 787                 helper: function() {
 788                     var $clone = $(this).clone().css({width: "24px", height: "24px", border: 0});
 789                     $clone.find(".oe_overlay_options >:not(:contains(.oe_snippet_move)), .oe_handle").remove();
 790                     $clone.find(":not(.glyphicon)").css({position: 'absolute', top: 0, left: 0});
 791                     $clone.appendTo("body").removeClass("hidden");
 792                     return $clone;
 793                 },
 794                 start: _.bind(self._drag_and_drop_start, self),
 795                 stop: _.bind(self._drag_and_drop_stop, self)
 796             });
 797         },
 798         _drag_and_drop_after_insert_dropzone: function (){},
 799         _drag_and_drop_active_drop_zone: function ($zones){
 800             var self = this;
 801             $zones.droppable({
 802                 over:   function(){
 803                     $(".oe_drop_zone.hide").removeClass("hide");
 804                     $(this).addClass("hide").first().after(self.$target);
 805                     self.dropped = true;
 806                 },
 807                 out:    function(){
 808                     $(this).removeClass("hide");
 809                     self.$target.detach();
 810                     self.dropped = false;
 811                 },
 812             });
 813         },
 814         _drag_and_drop_start: function (){
 815             var self = this;
 816             self.parent.hide();
 817             self.parent.editor_busy = true;
 818             self.size = {
 819                 width: self.$target.width(),
 820                 height: self.$target.height()
 821             };
 822             self.$target.after("<div class='oe_drop_clone' style='display: none;'/>");
 823             self.$target.detach();
 824             self.$overlay.addClass("hidden");
 825
 826             self.parent.activate_insertion_zones({
 827                 siblings: self.$el ? self.$el.data('selector-siblings') : false,
 828                 children:   self.$el ? self.$el.data('selector-children') : false,
 829                 vertical_children: self.$el ? self.$el.data('selector-vertical-children') : false,
 830             });
 831
 832             $("body").addClass('move-important');
 833
 834             self._drag_and_drop_after_insert_dropzone();
 835             self._drag_and_drop_active_drop_zone($('.oe_drop_zone'));
 836         },
 837         _drag_and_drop_stop: function (){
 838             var self = this;
 839             if (!self.dropped) {
 840                 $(".oe_drop_clone").after(self.$target);
 841             }
 842             self.$overlay.removeClass("hidden");
 843             $("body").removeClass('move-important');
 844             $('.oe_drop_zone').droppable('destroy').remove();
 845             $(".oe_drop_clone, .oe_drop_to_remove").remove();
 846             self.parent.editor_busy = false;
 847             self.get_parent_block();
 848             setTimeout(function () {self.parent.create_overlay(self.$target);},0);
 849         },
 850
 851         load_style_options: function () {
 852             var self = this;
 853             var $styles = this.$overlay.find('.oe_options');
 854             var $ul = $styles.find('ul:first');
 855             _.each(website.snippet.styles, function (val) {
 856                 if (!self.parent.dom_filter(val.selector).is(self.$target)) {
 857                     return;
 858                 }
 859                 var Editor = website.snippet.styleRegistry[val['snippet-style-id']] || website.snippet.StyleEditor;
 860                 var editor = new Editor(self, self.$target, val['snippet-style-id']);
 861                 $ul.prepend(editor.$el);
 862             });
 863
 864             if ($ul.find("li").length) {
 865                 $styles.removeClass("hidden");
 866             }
 867         },
 868
 869         get_parent_block: function () {
 870             var self = this;
 871             var $button = this.$overlay.find('.oe_snippet_parent');
 872             var $parent = this.$target.parents("[data-snippet-id]:first");
 873             if ($parent.length) {
 874                 $button.removeClass("hidden");
 875                 $button.off("click").on('click', function (event) {
 876                     event.preventDefault();
 877                     setTimeout(function () {
 878                         self.parent.make_active($parent);
 879                     }, 0);
 880                 });
 881             } else {
 882                 $button.addClass("hidden");
 883             }
 884         },
 885
 886         /*
 887         *  start
 888         *  This method is called after init and _readXMLData
 889         */
 890         start: function () {
 891             var self = this;
 892             this.$overlay.on('click', '.oe_snippet_clone', _.bind(this.on_clone, this));
 893             this.$overlay.on('click', '.oe_snippet_remove', _.bind(this.on_remove, this));
 894             this._drag_and_drop();
 895         },
 896
 897         on_clone: function () {
 898             var $clone = this.$target.clone(false);
 899             this.$target.after($clone);
 900             return false;
 901         },
 902
 903         on_remove: function () {
 904             this.onBlur();
 905             var index = _.indexOf(this.parent.snippets, this.$target.get(0));
 906             delete this.parent.snippets[index];
 907             this.$target.remove();
 908             this.$overlay.remove();
 909             return false;
 910         },
 911
 912         /*
 913         *  drop_and_build_snippet
 914         *  This method is called just after that a thumbnail is drag and dropped into a drop zone
 915         *  (after the insertion of this.$body, if this.$body exists)
 916         */
 917         drop_and_build_snippet: function ($target) {
 918         },
 919
 920         /* onFocus
 921         *  This method is called when the user click inside the snippet in the dom
 922         */
 923         onFocus : function () {
 924             this.$overlay.addClass('oe_active');
 925         },
 926
 927         /* onFocus
 928         *  This method is called when the user click outside the snippet in the dom, after a focus
 929         */
 930         onBlur : function () {
 931             this.$overlay.removeClass('oe_active');
 932         },
 933
 934         /* clean_for_save
 935         *  function called just before save vue
 936         */
 937         clean_for_save: function () {
 938             this.$target.find(".row:empty").remove();
 939         },
 940     });
 941
 942
 943     website.snippet.editorRegistry.resize = website.snippet.Editor.extend({
 944         start: function () {
 945             var self = this;
 946             this._super();
 947             var $box = $(openerp.qweb.render("website.snippets.resize"));
 948
 949             var resize_values = this.getSize();
 950             if (!resize_values.n) $box.find(".oe_handle.n").remove();
 951             if (!resize_values.s) $box.find(".oe_handle.s").remove();
 952             if (!resize_values.e) $box.find(".oe_handle.e").remove();
 953             if (!resize_values.w) $box.find(".oe_handle.w").remove();
 954
 955             this.$overlay.append($box.find(".oe_handles").html());
 956
 957             this.$overlay.find(".oe_handle").on('mousedown', function (event){
 958                     event.preventDefault();
 959
 960                     var $handle = $(this);
 961
 962                     var resize_values = self.getSize();
 963                     var compass = false;
 964                     var XY = false;
 965                     if ($handle.hasClass('n')) {
 966                         compass = 'n';
 967                         XY = 'Y';
 968                     }
 969                     else if ($handle.hasClass('s')) {
 970                         compass = 's';
 971                         XY = 'Y';
 972                     }
 973                     else if ($handle.hasClass('e')) {
 974                         compass = 'e';
 975                         XY = 'X';
 976                     }
 977                     else if ($handle.hasClass('w')) {
 978                         compass = 'w';
 979                         XY = 'X';
 980                     }
 981
 982                     var resize = resize_values[compass];
 983                     if (!resize) return;
 984
 985                     var current = resize[2] || 0;
 986                     _.each(resize[0], function (val, key) {
 987                         if (self.$target.hasClass(val)) {
 988                             current = key;
 989                         }
 990                     });
 991
 992                     self.parent.editor_busy = true;
 993
 994                     var xy = event['page'+XY];
 995                     var begin = current;
 996                     var beginClass = self.$target.attr("class");
 997                     var regClass = new RegExp("\\s*" + resize[0][begin].replace(/[-]*[0-9]+/, '[-]*[0-9]+'), 'g');
 998
 999                     var cursor = $handle.css("cursor")+'-important';
1000                     var $body = $(document.body);
1001                     $body.addClass(cursor);
1002
1003                     var body_mousemove = function (event){
1004                         event.preventDefault();
1005                         var dd = event['page'+XY] - xy + resize[1][begin];
1006                         var next = current+1 === resize[1].length ? current : (current+1);
1007                         var prev = current ? (current-1) : 0;
1008
1009                         var change = false;
1010                         if (dd > (2*resize[1][next] + resize[1][current])/3) {
1011                             self.$target.attr("class", (self.$target.attr("class")||'').replace(regClass, ''));
1012                             self.$target.addClass(resize[0][next]);
1013                             current = next;
1014                             change = true;
1015                         }
1016                         if (prev != current && dd < (2*resize[1][prev] + resize[1][current])/3) {
1017                             self.$target.attr("class", (self.$target.attr("class")||'').replace(regClass, ''));
1018                             self.$target.addClass(resize[0][prev]);
1019                             current = prev;
1020                             change = true;
1021                         }
1022
1023                         if (change) {
1024                             self.on_resize(compass, beginClass, current);
1025                             self.parent.cover_target(self.$overlay, self.$target);
1026                         }
1027                     };
1028
1029                     var body_mouseup = function(){
1030                         $body.unbind('mousemove', body_mousemove);
1031                         $body.unbind('mouseup', body_mouseup);
1032                         $body.removeClass(cursor);
1033                         self.parent.editor_busy = false;
1034                     };
1035                     $body.mousemove(body_mousemove);
1036                     $body.mouseup(body_mouseup);
1037                 });
1038         },
1039         getSize: function () {
1040             var grid = [0,4,8,16,32,48,64,92,128];
1041             this.grid = {
1042                 n: [_.map(grid, function (v) {return 'mt'+v;}), grid],
1043                 s: [_.map(grid, function (v) {return 'mb'+v;}), grid]
1044             };
1045             return this.grid;
1046         },
1047
1048         /* on_resize
1049         *  called when the box is resizing and the class change, before the cover_target
1050         *  @compass: resize direction : 'n', 's', 'e', 'w'
1051         *  @beginClass: attributes class at the begin
1052         *  @current: curent increment in this.grid
1053         */
1054         on_resize: function (compass, beginClass, current) {
1055
1056         }
1057     });
1058
1059     website.snippet.editorRegistry.colmd = website.snippet.editorRegistry.resize.extend({
1060         getSize: function () {
1061             this.grid = this._super();
1062             var width = this.$target.parents(".row:first").first().outerWidth();
1063
1064             var grid = [1,2,3,4,5,6,7,8,9,10,11,12];
1065             this.grid.e = [_.map(grid, function (v) {return 'col-md-'+v;}), _.map(grid, function (v) {return width/12*v;})];
1066
1067             var grid = [-12,-11,-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10,11];
1068             this.grid.w = [_.map(grid, function (v) {return 'col-md-offset-'+v;}), _.map(grid, function (v) {return width/12*v;}), 12];
1069
1070             return this.grid;
1071         },
1072         _drag_and_drop_after_insert_dropzone: function(){
1073             var self = this;
1074             var $zones = $(".row:has(> .oe_drop_zone)").each(function () {
1075                 var $row = $(this);
1076                 var width = $row.innerWidth();
1077                 var pos = 0;
1078                 while (width > pos + self.size.width) {
1079                     var $last = $row.find("> .oe_drop_zone:last");
1080                     $last.each(function () {
1081                         pos = $(this).position().left;
1082                     });
1083                     if (width > pos + self.size.width) {
1084                         $row.append("<div class='col-md-1 oe_drop_to_remove'/>");
1085                         var $add_drop = $last.clone();
1086                         $row.append($add_drop);
1087                         self._drag_and_drop_active_drop_zone($add_drop);
1088                     }
1089                 }
1090             });
1091         },
1092         _drag_and_drop_start: function () {
1093             this._super();
1094             this.$target.attr("class",this.$target.attr("class").replace(/\s*(col-lg-offset-|col-md-offset-)([0-9-]+)/g, ''));
1095         },
1096         _drag_and_drop_stop: function () {
1097             this.$target.addClass("col-md-offset-" + this.$target.prevAll(".oe_drop_to_remove").length);
1098             this._super();
1099         },
1100         onFocus : function () {
1101             this._super();
1102             this.$overlay.find('.oe_snippet_remove').toggleClass("hidden", !this.$target.siblings().length);
1103         },
1104         on_clone: function () {
1105             var $clone = this.$target.clone(false);
1106             var _class = $clone.attr("class").replace(/\s*(col-md-|col-lg-offset-|col-md-offset-)([0-9-]+)/g, '');
1107             _class += ' col-md-1';
1108             $clone.attr("class", _class);
1109             this.$target.after($clone);
1110             return false;
1111         },
1112         on_remove: function () {
1113             if (!this.$target.siblings().length){
1114                 return false;
1115             }
1116             return this._super();
1117         },
1118         on_resize: function (compass, beginClass, current) {
1119             if (compass !== 'w')
1120                 return;
1121
1122             // don't change the right border position when we change the offset (replace col size)
1123             var beginCol = Number(beginClass.match(/col-md-([0-9]+)|$/)[1] || 0);
1124             var beginOffset = Number(beginClass.match(/col-md-offset-([0-9-]+)|$/)[1] || beginClass.match(/col-lg-offset-([0-9-]+)|$/)[1] || 0);
1125             var offset = Number(this.grid.w[0][current].match(/col-md-offset-([0-9-]+)|$/)[1] || 0);
1126             if (offset < 0) {
1127                 offset = 0;
1128             }
1129             var colSize = beginCol - (offset - beginOffset);
1130             if (colSize <= 0) {
1131                 colSize = 1;
1132                 offset = beginOffset + beginCol - 1;
1133             }
1134             this.$target.attr("class",this.$target.attr("class").replace(/\s*(col-lg-offset-|col-md-offset-|col-md-)([0-9-]+)/g, ''));
1135
1136             this.$target.addClass('col-md-' + (colSize > 12 ? 12 : colSize));
1137             if (offset > 0) {
1138                 this.$target.addClass('col-md-offset-' + offset);
1139             }
1140         },
1141     });
1142
1143     website.snippet.editorRegistry.slider = website.snippet.editorRegistry.resize.extend({
1144         drop_and_build_snippet: function() {
1145             var id = 0;
1146             $(".carousel").each(function () {
1147                 var _id = +$(this).attr("id").replace(/^[^a-z]+/i, '');
1148                 if (id <= _id) {
1149                     id = _id + 1;
1150                 }
1151             });
1152             this.id = "myCarousel" + id;
1153             this.$target.attr("id", this.id);
1154             this.$target.find(".carousel-control").attr("href", "#myCarousel" + id);
1155             this.$target.find("[data-target]").attr("data-target", "#myCarousel" + id);
1156
1157             this.rebind_event();
1158         },
1159         // rebind event to active carousel on edit mode
1160         rebind_event: function () {
1161             var self = this;
1162             this.$target.find('.carousel-indicators [data-target]').off('click').on('click', function () {
1163                 self.$target.carousel(+$(this).data('slide-to')); });
1164
1165             this.$target.attr('contentEditable', 'false');
1166             this.$target.find('.oe_structure, blockquote').attr('contentEditable', 'true');
1167
1168             this.$target.carousel('pause');
1169         },
1170         clean_for_save: function () {
1171             this._super();
1172             this.$target.find(".item").removeClass("next prev left right");
1173             if(!this.$target.find(".item.active").length) {
1174                 this.$target.find(".item:first").addClass("active");
1175             }
1176             this.$target.removeAttr('contentEditable')
1177                 .find('*').removeAttr('contentEditable');
1178         },
1179         onFocus: function () {
1180             this._super();
1181             this.$target.carousel('pause');
1182         },
1183         onBlur: function () {
1184             this._super();
1185             this.$target.carousel('cycle');
1186         },
1187         start : function () {
1188             this._super();
1189             this.id = this.$target.attr("id");
1190             this.$inner = this.$target.find('.carousel-inner');
1191             this.$indicators = this.$target.find('.carousel-indicators');
1192
1193             this.$editor.find(".js_add").on('click', _.bind(this.on_add_slide, this));
1194             this.$editor.find(".js_remove").on('click', _.bind(this.on_remove_slide, this));
1195
1196             this.rebind_event();
1197         },
1198         on_add_slide: function () {
1199             var self = this;
1200             var cycle = this.$inner.find('.item').length;
1201             var $active = this.$inner.find('.item.active, .item.prev, .item.next').first();
1202             var index = $active.index();
1203             this.$target.find('.carousel-control, .carousel-indicators').removeClass("hidden");
1204             this.$indicators.append('<li data-target="#' + this.id + '" data-slide-to="' + cycle + '"></li>');
1205
1206             var $clone = this.$el.find(".item.active").clone();
1207
1208             // insert
1209             $clone.removeClass('active').insertAfter($active);
1210             setTimeout(function() {
1211                 self.$target.carousel().carousel(++index);
1212                 self.rebind_event();
1213             },0);
1214             return $clone;
1215         },
1216         on_remove_slide: function () {
1217             if (this.remove_process) {
1218                 return;
1219             }
1220             var self = this;
1221             var new_index = 0;
1222             var cycle = this.$inner.find('.item').length - 1;
1223             var index = this.$inner.find('.item.active').index();
1224
1225             if (cycle > 0) {
1226                 this.remove_process = true;
1227                 var $el = this.$inner.find('.item.active');
1228                 self.$target.on('slid.bs.carousel', function (event) {
1229                     $el.remove();
1230                     self.$indicators.find("li:last").remove();
1231                     self.$target.off('slid.bs.carousel');
1232                     self.rebind_event();
1233                     self.remove_process = false;
1234                     if (cycle == 1) {
1235                         self.on_remove_slide(event);
1236                     }
1237                 });
1238                 setTimeout(function () {
1239                     self.$target.carousel( index > 0 ? --index : cycle );
1240                 }, 500);
1241             } else {
1242                 this.$target.find('.carousel-control, .carousel-indicators').addClass("hidden");
1243             }
1244         },
1245     });
1246
1247     website.snippet.editorRegistry.carousel = website.snippet.editorRegistry.slider.extend({
1248         clean_for_save: function () {
1249             this._super();
1250             this.$target.css("background-image", "");
1251             this.$target.removeClass(this._class);
1252             this.$target.find('.content, .carousel-image img').attr('contentEditable', 'true');
1253         },
1254         start : function () {
1255             var self = this;
1256             this._super();
1257
1258             // set background and prepare to clean for save
1259             var add_class = function (c){
1260                 if (c) self._class = (self._class || "").replace(new RegExp("[ ]+" + c.replace(" ", "|[ ]+")), '') + ' ' + c;
1261                 return self._class || "";
1262             };
1263             this.$target.on('snippet-style-change snippet-style-preview', function (event, style, np) {
1264                 var $active = self.$target.find(".item.active");
1265                 if (style['snippet-style-id'] === "size") return;
1266                 if (style['snippet-style-id'] === "background") {
1267                     $active.css("background-image", self.$target.css("background-image"));
1268                 }
1269                 if (np.$prev) {
1270                     $active.removeClass(np.$prev.data("class"));
1271                 }
1272                 if (np.$next) {
1273                     $active.addClass(np.$next.data("class"));
1274                     add_class(np.$next.data("class"));
1275                 }
1276             });
1277             this.$target.on('slid', function () { // slide.bs.carousel
1278                 var $active = self.$target.find(".item.active");
1279                 self.$target
1280                     .css("background-image", $active.css("background-image"))
1281                     .removeClass(add_class($active.attr("class")))
1282                     .addClass($active.attr("class"))
1283                     .trigger("snippet-style-reset");
1284
1285                 self.$target.carousel();
1286             });
1287             this.$target.trigger('slid');
1288         },
1289         on_add_slide: function () {
1290             var $clone = this._super();
1291
1292             // choose an other background
1293             var $styles = this.$target.data("snippet-style-ids").background.$el.find("li[data-class]:not(.oe_custom_bg)");
1294             var styles_index = $styles.index($styles.filter(".active")[0]);
1295             var $select = $($styles[styles_index >= $styles.length-1 ? 0 : styles_index+1]);
1296             $clone.css("background-image", $select.data("src") ? "url('"+ $select.data("src") +"')" : "");
1297             $clone.addClass($select.data("class") || "");
1298
1299             return $clone;
1300         },
1301         // rebind event to active carousel on edit mode
1302         rebind_event: function () {
1303             var self = this;
1304             this.$target.find('.carousel-control').off('click').on('click', function () {
1305                 self.$target.carousel( $(this).data('slide')); });
1306
1307             this.$target.find('.carousel-image img, .content').attr('contentEditable', 'true');
1308             this._super();
1309         },
1310     });
1311
1312     website.snippet.editorRegistry.parallax = website.snippet.editorRegistry.resize.extend({
1313         start : function () {
1314             var self = this;
1315             this._super();
1316             this.scroll();
1317             this.$target.on('snippet-style-change snippet-style-preview', function () {
1318                 self.$target.data("snippet-view").set_values();
1319             });
1320         },
1321         scroll: function () {
1322             var self = this;
1323             var $ul = this.$editor.find('ul[name="parallax-scroll"]');
1324             var $li = $ul.find("li");
1325             var speed = this.$target.data('scroll-background-ratio') || 0.6 ;
1326             $ul.find('[data-value="' + speed + '"]').addClass('active');
1327             $li.on('click', function (event) {
1328                 $li.removeClass("active");
1329                 $(this).addClass("active");
1330                 var speed =  $(this).data('value');
1331                 self.$target.attr('data-scroll-background-ratio', speed);
1332                 self.$target.data("snippet-view").set_values();
1333                 return false;
1334             });
1335             this.$target.data("snippet-view").set_values();
1336         },
1337         clean_for_save: function () {
1338             this._super();
1339             this.$target.find(".parallax")
1340                 .css("background-position", '')
1341                 .removeAttr("data-scroll-background-offset");
1342         }
1343     });
1344
1345     /*
1346     * data-snippet-id automatically setted
1347     * Don't need to add data-snippet-id="..." into the views
1348     */
1349
1350     website.snippet.selector.push([".row > [class*='col-md-']", 'colmd']);
1351     website.snippet.selector.push(['hr', 'hr']);
1352     website.snippet.selector.push(['blockquote', 'quote']);
1353
1354 })();