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