[MERGE] trunk-website-al

bzr revid: ddm@openerp.com-20131002085338-8jw3dkqtq842nwhe

3 files changed, 161 insertions, 127 deletions

diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 8b15422b90d..f40ccea715b 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -18,7 +18,7 @@
         return new website.editor.LinkDialog(editor).appendTo(document.body);
     }
     function image_dialog(editor) {
-        return new website.editor.ImageDialog(editor).appendTo(document.body);
+        return new website.editor.RTEImageDialog(editor).appendTo(document.body);
     }
 
     if (website.is_editable) {
@@ -673,6 +673,23 @@
             });
         },
     });
+    /**
+     * ImageDialog widget. Lets users change an image, including uploading a
+     * new image in OpenERP or selecting the image style (if supported by
+     * the caller).
+     *
+     * Initialized as usual, but the caller can hook into two events:
+     *
+     * @event start({url, style}) called during dialog initialization and
+     *                            opening, the handler can *set* the ``url``
+     *                            and ``style`` properties on its parameter
+     *                            to provide these as default values to the
+     *                            dialog
+     * @event save({url, style}) called during dialog finalization, the handler
+     *                           is provided with the image url and style
+     *                           selected by the users (or possibly the ones
+     *                           originally passed in)
+     */
     website.editor.ImageDialog = website.editor.Dialog.extend({
         template: 'website.editor.dialog.image',
         events: _.extend({}, website.editor.Dialog.prototype.events, {
@@ -685,47 +702,30 @@
             'click a[href=#existing]': 'browse_existing',
             'change select.image-style': 'preview_image',
         }),
-        start: function () {
-            var selection = this.editor.getSelection();
-            var el = selection && selection.getSelectedElement();
-            this.element = null;
 
-            var $select = this.$('.image-style');
-            var $options = $select.children();
+        start: function () {
+            var $options = this.$('.image-style').children();
             this.image_styles = $options.map(function () { return this.value; }).get();
 
-            if (el && el.is('img')) {
-                this.element = el;
-                _(this.image_styles).each(function (style) {
-                    if (el.hasClass(style)) {
-                        $select.val(style);
-                    }
-                });
-                // set_image must follow setup of image style
-                this.set_image(el.getAttribute('src'));
+            var o = { url: null, style: null, };
+            // avoid typos, prevent addition of new properties to the object
+            Object.preventExtensions(o);
+            this.trigger('start', o);
+
+            if (o.url) {
+                if (o.style) {
+                    this.$('.image-style').val(o.style);
+                }
+                this.set_image(o.url);
             }
 
             return this._super();
         },
         save: function () {
-            var url = this.$('input.url').val();
-            var style = this.$('.image-style').val();
-            var element, editor = this.editor;
-            if (!(element = this.element)) {
-                element = editor.document.createElement('img');
-                // focus event handler interactions between bootstrap (modal)
-                // and ckeditor (RTE) lead to blowing the stack in Safari and
-                // Chrome (but not FF) when this is done synchronously =>
-                // defer insertion so modal has been hidden & destroyed before
-                // it happens
-                setTimeout(function () {
-                    editor.insertElement(element);
-                }, 0);
-            }
-            element.setAttribute('src', url);
-            $(element.$).removeClass(this.image_styles.join(' '));
-            if (style) { element.addClass(style); }
-
+            this.trigger('save', {
+                url: this.$('input.url').val(),
+                style: this.$('.image-style').val(),
+            });
             return this._super();
         },
 
@@ -769,12 +769,53 @@
                 .removeClass(this.image_styles.join(' '))
                 .addClass(this.$('select.image-style').val());
         },
-
         browse_existing: function (e) {
             e.preventDefault();
             new website.editor.ExistingImageDialog(this).appendTo(document.body);
         },
     });
+    website.editor.RTEImageDialog = website.editor.ImageDialog.extend({
+        init: function () {
+            this._super.apply(this, arguments);
+
+            this.on('start', this, this.proxy('started'));
+            this.on('save', this, this.proxy('saved'));
+        },
+        started: function (holder) {
+            var selection = this.editor.getSelection();
+            var el = selection && selection.getSelectedElement();
+            this.element = null;
+
+            if (el && el.is('img')) {
+                this.element = el;
+                _(this.image_styles).each(function (style) {
+                    if (el.hasClass(style)) {
+                        holder.style = style;
+                    }
+                });
+                holder.url = el.getAttribute('src');
+            }
+        },
+        saved: function (data) {
+            var element, editor = this.editor;
+            if (!(element = this.element)) {
+                element = editor.document.createElement('img');
+                // focus event handler interactions between bootstrap (modal)
+                // and ckeditor (RTE) lead to blowing the stack in Safari and
+                // Chrome (but not FF) when this is done synchronously =>
+                // defer insertion so modal has been hidden & destroyed before
+                // it happens
+                setTimeout(function () {
+                    editor.insertElement(element);
+                }, 0);
+            }
+
+            var style = data.style;
+            element.setAttribute('src', data.url);
+            $(element.$).removeClass(this.image_styles.join(' '));
+            if (style) { element.addClass(style); }
+        },
+    });
 
     var IMAGES_PER_ROW = 6;
     var IMAGES_ROWS = 4;
@@ -893,7 +934,7 @@
                     if (m.attributeName !== 'class') { return true; }
 
                     // find out what classes were added or removed
-                    var oldClasses = m.oldValue.split(/\s+/);
+                    var oldClasses = (m.oldValue || '').split(/\s+/);
                     var newClasses = m.target.className.split(/\s+/);
                     var change = _.union(_.difference(oldClasses, newClasses),
                                          _.difference(newClasses, oldClasses));
@@ -911,6 +952,7 @@
                 while (node && !$(node).hasClass('oe_editable')) {
                     node = node.parentNode;
                 }
+                $(m.target).trigger('node_changed');
                 return node;
             })
             .compact()
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index bc0db10ce88..e524edfb389 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -117,9 +117,29 @@
     };
 
     dom_ready.then(function () {
+
         /* ----- PUBLISHING STUFF ---- */
+        $('[data-publish]:has(.js_publish)').each(function () {
+            var $pub = $("[data-publish]", this);
+            if($pub.size())
+                $(this).attr("data-publish", $pub.attr("data-publish"));
+            else
+                $(this).removeAttr("data-publish");
+        });
+
         $('[data-publish]:has(.js_publish_management)').each(function () {
             $(this).attr("data-publish", $(".js_publish_management .btn-success", this).size() ? "on" : 'off');
+            $(this).attr("data-publish", $(".js_publish_management .btn-success", this).size() ? "on" : 'off');
+        });
+
+        $(document).on('click', '.js_publish', function (e) {
+            e.preventDefault();
+            var $data = $(":first", this).parents("[data-publish]");
+            $data.attr("data-publish", $data.first().attr("data-publish") == 'off' ? 'on' : 'off');
+            openerp.jsonRpc('/website/publish', 'call', {'id': $(this).data('id'), 'object': $(this).data('object')})
+                .then(function (result) {
+                    $data.attr("data-publish", +result ? 'on' : 'off');
+                });
         });
 
         $(document).on('click', '.js_publish_management .js_publish_btn', function (e) {
diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js
index 9a6ade27992..3de2ddaeabb 100644
--- a/addons/website/static/src/js/website.snippets.js
+++ b/addons/website/static/src/js/website.snippets.js
@@ -8,8 +8,8 @@
         start: function () {
             var self = this;
             $("[data-oe-model]").on('click', function (event) {
-                var tag = event.srcElement.tagName.toLowerCase();
                 var $this = $(event.srcElement);
+                var tag = $this[0].tagName.toLowerCase();
                 if (!(tag === 'a' || tag === "button") && !$this.parents("a, button").length) {
                     self.$('[data-action="edit"]').parent().effect('bounce', {distance: 18, times: 5}, 250);
                 }
@@ -158,23 +158,29 @@
             var $pill = self.$(".pill-content");
             var padding = parseInt($pill.css("padding-left"));
             var $scroll = this.$(".scroll");
-
-            $scroll.scroll(function () {
+            
+           $scroll.scroll(function () {
                 $pill.find("> div").each(function () {
+                	/*
                     if ($(this).position().left <= padding) {
                         $ul.find("> li").removeClass('active');
                         $ul.find("a[href='#" + $(this).attr("id") + "']").parent("li").addClass('active');
-                    }
+                    }*/
                 });
             });
 
             $ul.find("a").click(function (event) {
                 event.preventDefault();
-                $scroll.scrollLeft( $scroll.scrollLeft() + $($(event.currentTarget).attr("href")).position().left - padding );
+                $pill.find("> div").hide();
+            	$pill.find( $(event.currentTarget).attr('href')).show();
+            	$ul.find('> li').removeClass('active');
+            	$(event.currentTarget).parent().addClass('active');
                 return false;
             });
 
-            $pill.css("padding-right", self.$el.outerWidth() - padding + 10 - $pill.find("> div:last").outerWidth());
+           // $pill.css("padding-right", self.$el.outerWidth() - padding + 10 - $pill.find("> div:last").outerWidth());
+            $pill.find("> div").hide();
+            $pill.find("div:first").show();
             $ul.find("> li:first").addClass('active');
         },
         cover_target: function ($el, $target){
@@ -389,7 +395,7 @@
                 },
                 stop: function(){
                     $('.oe_drop_zone').droppable('destroy').remove();
-                    if (!dropped) {
+                    if (!dropped && self.$modal.find('input:not(:checked)').length) {
                         self.$modal.modal('toggle');
                     }
                 },
@@ -573,7 +579,6 @@
         onBlurEdit : function () {},
     });
 
-
     website.snippet.editorRegistry = {};
     website.snippet.Editor = openerp.Class.extend({
         init: function (parent, dom) {
@@ -700,6 +705,7 @@
             this.$overlay.on('click', '.oe_snippet_clone', function () {
                 var $clone = self.$target.clone(false);
                 self.$target.after($clone);
+                return false;
             });
         },
 
@@ -793,6 +799,50 @@
         onBlur : function () {
             this.$overlay.removeClass('oe_active');
         },
+
+        change_background: function (bg, ul_options) {
+            var self = this;
+            var $ul = this.$editor.find(ul_options);
+            var bg_value = (typeof bg == 'string' ? self.$target.find(bg) : $(bg)).css("background-image").replace(/url\(['"]*|['"]*\)/g, "");
+
+            // select in ul options
+            $ul.find("li").removeClass("active");
+            var selected = $ul.find('[data-value="' + bg_value + '"], [data-value="' + bg_value.replace(/.*:\/\/[^\/]+/, '') + '"]');
+            selected.addClass('active');
+            if (!selected.length) {
+                $ul.find('.oe_custom_bg b').html(bg_value);
+            }
+
+            // bind envent on options
+            var $li = $ul.find("li");
+            $li.on('click', function (event) {
+                    if ($(this).data("value")) {
+                        $li.removeClass("active");
+                        $(this).addClass("active");
+                        self.$editor.find('input').val("");
+                    } else {
+                        var editor = new website.editor.ImageDialog();
+                        editor.on('start', self, function (o) {o.url = bg_value;});
+                        editor.on('save', self, function (o) {
+                            var $bg = typeof bg == 'string' ? self.$target.find(bg) : $(bg);
+                            $bg.css("background-image", "url(" + o.url + ")");
+                        });
+                        editor.appendTo($('body'));
+                    }
+                })
+                .on('mouseover', function (event) {
+                    if ($(this).data("value")) {
+                        var src = $(this).data("value");
+                        var $bg = typeof bg == 'string' ? self.$target.find(bg) : $(bg);
+                        $bg.css("background-image", "url(" + src + ")");
+                    }
+                })
+                .on('mouseout', function (event) {
+                    var src = $ul.find('li.active').data("value");
+                    var $bg = typeof bg == 'string' ? self.$target.find(bg) : $(bg);
+                    $bg.css("background-image", "url(" + src + ")");
+                });
+        },
     });
 
 
@@ -863,13 +913,13 @@
 
                         var change = false;
                         if (dd > (2*resize[1][next] + resize[1][current])/3) {
-                            self.$target.attr("class",self.$target.attr("class").replace(regClass, ''));
+                            self.$target.attr("class", (self.$target.attr("class")||'').replace(regClass, ''));
                             self.$target.addClass(resize[0][next]);
                             current = next;
                             change = true;
                         }
                         if (prev != current && dd < (2*resize[1][prev] + resize[1][current])/3) {
-                            self.$target.attr("class",self.$target.attr("class").replace(regClass, ''));
+                            self.$target.attr("class", (self.$target.attr("class")||'').replace(regClass, ''));
                             self.$target.addClass(resize[0][prev]);
                             current = prev;
                             change = true;
@@ -991,8 +1041,9 @@
             this.$editor.find(".js_add").on('click', _.bind(this.on_add, this));
             this.$editor.find(".js_remove").on('click', _.bind(this.on_remove, this));
 
-            this.change_background();
+            this.change_background(".item.active", 'ul[name="carousel-background"]');
             this.change_style();
+            this.set_options_style();
             this.change_size();
         },
         on_add: function (e) {
@@ -1014,48 +1065,12 @@
                     .find('.item.active').remove().end()
                     .find('.item:first').addClass('active');
                 this.$target.carousel(0);
-                this.set_options_background();
                 this.set_options_style();
             }
             if (nb <= 1) {
                 this.$target.find('.carousel-control').addClass("hidden");
             }
         },
-        onFocus: function () {
-            this.set_options_background();
-            this.set_options_style();
-            this._super();
-        },
-        set_options_background: function () {
-            var $image = this.$target.find('.carousel-inner .item.active > img');
-            var bg = $image.attr('src');
-            var $ul = this.$editor.find('ul[name="carousel-background"]');
-            $ul.find("li").removeClass("active");
-            var selected = $ul.find('[data-value="' + bg + '"], [data-value="' + bg.replace(/.*:\/\/[^\/]+/, '') + '"]')
-                .addClass('active').length;
-            this.$editor.find('.oe_custom_bg b').html(selected ? "" : bg);
-        },
-        change_background: function () {
-            var self = this;
-            var $ul = this.$editor.find('ul[name="carousel-background"]');
-            var $li = $ul.find("li");
-
-            $li.on('click', function (event) {
-                    $li.removeClass("active");
-                    $(this).addClass("active");
-                    self.$editor.find('input').val("");
-                })
-                .on('mouseover', function (event) {
-                    if ($(this).data("value")) {
-                        self.$target.find('.carousel-inner .item.active > img')
-                            .attr('src', $(this).data("value"));
-                    }
-                })
-                .on('mouseout', function (event) {
-                    self.$target.find('.carousel-inner .item.active > img')
-                        .attr('src', $ul.find('li.active').data("value"));
-                });
-        },
         set_options_style: function () {
             var style = false;
             var $el = this.$target.find('.carousel-inner .item.active');
@@ -1124,50 +1139,7 @@
     website.snippet.editorRegistry.parallax = website.snippet.editorRegistry.resize.extend({
         start : function () {
             this._super();
-            this.change_background();
-        },
-        onFocus: function () {
-            this.$imagebg = $("<img/>");
-            this.$imagebg.prependTo(this.$target);
-            this.set_options_background();
-            this._super();
-        },
-        onBlur : function () {
-            this._super();
-            this.$imagebg.remove();
-        },
-        set_options_background: function () {
-            var bg = this.$target.css("background-image").replace(/url\(|\)/g, "");
-            this.$imagebg.attr("src", bg);
-
-            var $ul = this.$editor.find('ul[name="parallax-background"]');
-            $ul.find("li").removeClass("active");
-            var selected = $ul.find('[data-value="' + bg + '"], [data-value="' + bg.replace(/.*:\/\/[^\/]+/, '') + '"]')
-                .addClass('active').length;
-            this.$editor.find('.oe_custom_bg b').html(selected ? "" : bg);
-        },
-        change_background: function () {
-            var self = this;
-            var $ul = this.$editor.find('ul[name="parallax-background"]');
-            var $li = $ul.find("li");
-
-            $li.on('click', function (event) {
-                    $li.removeClass("active");
-                    $(this).addClass("active");
-                    self.$editor.find('input').val("");
-                })
-                .on('mouseover', function (event) {
-                    if ($(this).data("value")) {
-                        var src = $(this).data("value");
-                        self.$imagebg.attr('src', src);
-                        self.$target.css("background-image", "url(" + src + ")");
-                    }
-                })
-                .on('mouseout', function (event) {
-                    var src = $ul.find('li.active').data("value");
-                    self.$imagebg.attr('src', src);
-                    self.$target.css("background-image", "url(" + src + ")");
-                });
+            this.change_background(this.$target, 'ul[name="parallax-background"]');
         },
     });