[MERGE]Merge lp:~openerp-dev/openobject-addons/trunk-website-al.

bzr revid: bth@tinyerp.com-20131111094934-qh95bt41fptwepm0

7 files changed, 128 insertions, 56 deletions

diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index 698c5794236..70e2994eb65 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -361,8 +361,7 @@ footer {
 }
 
 .parallax {
-  background-attachment: fixed;
-  background-size: 100%;
+  position: relative;
 }
 .parallax.oe_small {
   height: 200px;
@@ -455,3 +454,24 @@ table.well tr td span {
 .logo-img {
   width: 220px;
 }
+
+.oe_demo {
+  position: relative;
+}
+.oe_demo img {
+  width: 100%;
+}
+.oe_demo div {
+  position: absolute;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  opacity: 0.85;
+  bottom: 0px;
+  width: 100%;
+  padding: 7px;
+  color: white;
+  font-weight: bold;
+}
+.oe_demo div a {
+  color: white;
+}
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 61de135f6a0..f35f951b8f6 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -276,8 +276,7 @@ footer
             background-color: grey
 
 .parallax
-    background-attachment: fixed
-    background-size: 100%
+    position: relative
     &.oe_small
         height: 200px
     &.oe_medium
@@ -347,3 +346,21 @@ table.well tr
 
 .logo-img
     width: 220px
+
+
+.oe_demo
+    position: relative
+    img
+        width: 100%
+    div
+        position: absolute
+        left: 0
+        background-color: rgba(0,0,0,0.4)
+        opacity: 0.85
+        bottom: 0px
+        width: 100%
+        padding: 7px
+        color: white
+        font-weight: bold
+        a
+            color: white
diff --git a/addons/website/static/src/img/parallax/parallax_bg.jpg b/addons/website/static/src/img/parallax/parallax_bg.jpg
index aa1dd20f21a..b4d56d7f23a 100644
--- a/addons/website/static/src/img/parallax/parallax_bg.jpg
+++ b/addons/website/static/src/img/parallax/parallax_bg.jpg
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 9f5e32ae183..5915ee5b359 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -402,8 +402,10 @@
                             }
                         });
                         // Adding Static Menus
-                        menu.append('<li class="divider"></li><li class="js_change_theme"><a href="/page/website.themes">Change Theme</a></li>');
-                        menu.append('<li class="divider"></li><li><a data-action="ace" href="#">HTML Editor</a></li>');
+                        menu.append('<li class="divider"></li>');
+			menu.append('<li><a data-action="ace" href="#">HTML Editor</a></li>');
+                        menu.append('<li class="js_change_theme"><a href="/page/website.themes">Change Theme</a></li>');
+			menu.append('<li><a href="/web#action=website.action_module_website">Install Apps</a></li>');
                         self.trigger('rte:customize_menu_ready');
                     }
                 );
diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js
index 6a9c4039e97..e25de37b524 100644
--- a/addons/website/static/src/js/website.snippets.js
+++ b/addons/website/static/src/js/website.snippets.js
@@ -1,6 +1,21 @@
 (function () {
     'use strict';
 
+
+    var start_snippet_animation = function () {
+        hack_to_add_snippet_id();
+        $("[data-snippet-id]").each(function() {
+            var $snipped_id = $(this);
+            if (    !$snipped_id.parents("#oe_snippets").length &&
+                    typeof $snipped_id.data("snippet-view") === 'undefined' &&
+                    website.snippet.animationRegistry[$snipped_id.data("snippet-id")]) {
+                var snippet = new website.snippet.animationRegistry[$snipped_id.data("snippet-id")]($snipped_id);
+                $snipped_id.data("snippet-view", snippet);
+            }
+        });
+    };
+    $(document).ready(start_snippet_animation);
+
     var website = openerp.website;
     website.add_template_file('/website/static/src/xml/website.snippets.xml');
 
@@ -22,8 +37,10 @@
             window.snippets = this.snippets = new website.snippet.BuildingBlock(this);
             this.snippets.appendTo(this.$el);
 
-            this.rte.on('rte:ready', this, function () {
+            this.on('rte:ready', this, function () {
                 self.snippets.$button.removeClass("hidden");
+                start_snippet_animation();
+                self.trigger('rte:snippets_ready');
             });
 
             return this._super.apply(this, arguments);
@@ -39,20 +56,8 @@
         },
     });
 
-
-    $(document).ready(function () {
-        hack_to_add_snippet_id();
-        $("[data-snippet-id]").each(function() {
-                var $snipped_id = $(this);
-                if (typeof $snipped_id.data("snippet-view") === 'undefined' &&
-                        website.snippet.animationRegistry[$snipped_id.data("snippet-id")]) {
-                    $snipped_id.data("snippet-view", new website.snippet.animationRegistry[$snipped_id.data("snippet-id")]($snipped_id));
-                }
-            });
-    });
-
     /* ----- SNIPPET SELECTOR ---- */
-    
+
     website.snippet = {};
     var observer = new website.Observer(function (mutations) {
         if (!_(mutations).find(function (m) {
@@ -504,7 +509,7 @@
                 console.debug( "A good node must have a [data-oe-model] attribute or must have at least one parent with [data-oe-model] attribute.");
                 console.debug( "Wrong node(s): ", selector);
             }
-            
+
             function is_visible($el){
                 return     $el.css('display')    != 'none'
                         && $el.css('opacity')    != '0'
@@ -519,7 +524,7 @@
                 var parents = $(this).parents().filter(function(){ return !is_visible($(this)); });
                 return parents.length === 0;
             });
-            
+
             $targets.each(function () {
                 var $target = $(this);
                 if (!$target.data('overlay')) {
@@ -558,13 +563,13 @@
         start: function () {
         },
         /* onFocusEdit
-        *  if they are an editor for this data-snippet-id 
+        *  if they are an editor for this data-snippet-id
         *  Called before onFocus of snippet editor
         */
         onFocusEdit : function () {},
 
         /* onBlurEdit
-        *  if they are an editor for this data-snippet-id 
+        *  if they are an editor for this data-snippet-id
         *  Called after onBlur of snippet editor
         */
         onBlurEdit : function () {},
@@ -665,7 +670,7 @@
             });
 
             $("body").addClass('move-important');
-            
+
             self._drag_and_drop_after_insert_dropzone();
             self._drag_and_drop_active_drop_zone($('.oe_drop_zone'));
         },
@@ -775,7 +780,7 @@
         *  This method is called when the user click inside the snippet in the dom
         */
         onFocus : function () {
-            this.$overlay.addClass('oe_active').effect('bounce', {distance: 18, times: 5}, 250);
+            this.$overlay.addClass('oe_active');
         },
 
         /* onFocus
@@ -855,7 +860,7 @@
             if (!resize_values.s) $box.find(".oe_handle.s").remove();
             if (!resize_values.e) $box.find(".oe_handle.e").remove();
             if (!resize_values.w) $box.find(".oe_handle.w").remove();
-            
+
             this.$overlay.append($box.find(".oe_handles").html());
 
             this.$overlay.find(".oe_handle").on('mousedown', function (event){
@@ -1111,7 +1116,7 @@
             var index = $active.index();
             this.$target.find('.carousel-control, .carousel-indicators').removeClass("hidden");
             this.$indicators.append('<li data-target="#' + this.id + '" data-slide-to="' + cycle + '"></li>');
-            
+
             var $clone = this.$el.find(".item.active").clone();
             var bg = this.$editor.find('ul[name="carousel-background"] li:not([data-value="'+ $active.css("background-image").replace(/.*:\/\/[^\/]+|\)$/g, '') +'"]):first').data("value");
             $clone.css("background-image", "url('"+ bg +"')");
@@ -1207,24 +1212,23 @@
     website.snippet.editorRegistry.parallax = website.snippet.editorRegistry.resize.extend({
         start : function () {
             this._super();
-            this.change_background($('.parallax', this.$target), 'ul[name="parallax-background"]');
+            this.change_background(this.$target, 'ul[name="parallax-background"]');
             this.scroll();
             this.change_size();
         },
-        scroll: function(){
+        scroll: function () {
+            var self = this;
             var $ul = this.$editor.find('ul[name="parallax-scroll"]');
             var $li = $ul.find("li");
-            var $parallax = this.$target.find('.parallax');
-            var speed = $parallax.data('stellar-background-ratio') || 0.5 ;
-            
+            var speed = this.$target.data('scroll-background-ratio') || 0.6 ;
             $ul.find('[data-value="' + speed + '"]').addClass('active');
             $li.on('click', function (event) {
                 $li.removeClass("active");
                 $(this).addClass("active");
                 var speed =  $(this).data('value');
-                $parallax.attr('data-stellar-background-ratio', speed);
+                self.$target.attr('data-scroll-background-ratio', speed);
+                self.$target.data("snippet-view").set_values();
             });
-
         },
         clean_for_save: function () {
             this._super();
@@ -1232,12 +1236,11 @@
         },
         change_size: function () {
             var self = this;
-            var $el = $('.oe_big,.oe_medium,.oe_small', this.$target);
 
             var size = 'oe_big';
-            if ($el.hasClass('oe_small'))
+            if (this.$target.hasClass('oe_small'))
                 size = 'oe_small';
-            else if ($el.hasClass('oe_medium'))
+            else if (this.$target.hasClass('oe_medium'))
                 size = 'oe_medium';
             var $ul = this.$editor.find('ul[name="parallax-size"]');
             var $li = $ul.find("li");
@@ -1247,21 +1250,50 @@
             $li.on('click', function (event) {
                     $li.removeClass("active");
                     $(this).addClass("active");
+                    self.$target.data("snippet-view").set_values();
                 })
                 .on('mouseover', function (event) {
-                    $el.removeClass('oe_big oe_small oe_medium');
-                    $el.addClass($(event.currentTarget).data("value"));
+                    self.$target.removeClass('oe_big oe_small oe_medium');
+                    self.$target.addClass($(event.currentTarget).data("value"));
                 })
                 .on('mouseout', function (event) {
-                    $el.removeClass('oe_big oe_small oe_medium');
-                    $el.addClass($ul.find('li.active').data("value"));
+                    self.$target.removeClass('oe_big oe_small oe_medium');
+                    self.$target.addClass($ul.find('li.active').data("value"));
                 });
         }
     });
     website.snippet.animationRegistry.parallax = website.snippet.Animation.extend({
         start: function () {
-            $.stellar({ horizontalScrolling: false, verticalOffset: 0 });
+            var self = this;
+            this.set_values();
+            var on_scroll = function () {
+                var speed = parseFloat(self.$target.attr("data-scroll-background-ratio") || 0);
+                if (speed == 1) return;
+                var offset = parseFloat(self.$target.attr("data-scroll-background-offset") || 0);
+                var top = offset + window.scrollY * speed;
+                self.$target.css("background-position", "0px " + top + "px");
+            };
+            $(window).off("scroll").on("scroll", on_scroll);
         },
+        set_values: function () {
+            var self = this;
+            var speed = parseFloat(self.$target.attr("data-scroll-background-ratio") || 0);
+
+            if (speed == 1) {
+                this.$target.css("background-attachment", "fixed").css("background-position", "0px 0px");
+                return;
+            } else {
+                this.$target.css("background-attachment", "scroll");
+            }
+
+            this.$target.attr("data-scroll-background-offset", 0);
+            var img = new Image();
+            img.onload = function () {
+                self.$target.attr("data-scroll-background-offset", self.$target.outerHeight() - this.height);
+                $(window).scroll();
+            };
+            img.src = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)/g, "");
+        }
     });
 
     /*
diff --git a/addons/website/static/src/js/website.tour.basic.js b/addons/website/static/src/js/website.tour.basic.js
index 876d2a7b5b9..649317b8cfc 100644
--- a/addons/website/static/src/js/website.tour.basic.js
+++ b/addons/website/static/src/js/website.tour.basic.js
@@ -24,10 +24,14 @@
                     stepId: 'edit-page',
                     element: 'button[data-action=edit]',
                     placement: 'bottom',
-                    reflex: true,
                     title: "Edit this page",
                     content: "Every page of your website can be modified through the <i>Edit</i> button.",
                     template: render('website.tour_popover'),
+                    onShow: function () {
+                        editor.on('rte:snippets_ready', editor, function() {
+                            self.movetoStep('add-block');
+                        });
+                    },
                 },
                 {
                     stepId: 'add-block',
@@ -37,11 +41,6 @@
                     content: "To add content in a page, you can insert building blocks.",
                     template: render('website.tour_popover'),
                     onShow: function () {
-                        function refreshAddBlockStep () {
-                            self.tour.showStep(self.indexOfStep('add-block'));
-                            editor.off('rte:ready', editor, refreshAddBlockStep);
-                        }
-                        editor.on('rte:ready', editor, refreshAddBlockStep);
                         $('button[data-action=snippet]').click(function () {
                             self.movetoStep('drag-banner');
                         });
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index e864d304795..d3232767714 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -21,14 +21,19 @@
                     <ul class="nav navbar-nav navbar-right">
                         <li><a data-action="show-mobile-preview" href="#"><span title="Mobile preview" class="icon-mobile-phone"/></a></li>
                         <li class="divider-vertical"></li>
+                        <li><a data-action="promote-current-page" href="#"><span title="Promote page on the web">Promote</span></a></li>
                         <li class="dropdown js_hide_on_translate">
-                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Structure <span class="caret"></span></a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Content <span class="caret"></span></a>
                             <ul class="dropdown-menu" role="menu">
-                                <li><a data-action="edit-structure" href="#"><span title="Edit Top Menu">Top Menu</span></a></li>
-                                <!-- <a data-action="edit-footer" href="#"><span title="Edit Footer">Footer</span></a></li> -->
+                                <li><a data-action="edit-structure" href="#"><span title="Edit Top Menu">Edit Menu</span></a></li>
+                                <li class="divider"> </li>
+                                <li><a href="">New Page</a></li> <!-- Todo: Implement with inheritancy in each module-->
+                                <li><a href="">New Blog Post</a></li>
+                                <li><a href="">New Event</a></li>
+                                <li><a href="">New Job Offer</a></li>
+                                <li><a href="">New Product</a></li>
                             </ul>
                         </li>
-                        <li><a data-action="promote-current-page" href="#"><span title="Promote page on the web">Promote</span></a></li>
                         <li class="dropdown js_hide_on_translate">
                             <a id="customize-menu-button" class="dropdown-toggle" data-toggle="dropdown" href="#">Customize <span class="caret"></span></a>
                             <ul class="dropdown-menu" role="menu" id="customize-menu">
@@ -41,9 +46,6 @@
                                 <!-- filled in JS -->
                             </ul>
                         </li>
-                        <li>
-                            <a href="/web#action=website.action_module_website">Apps</a>
-                        </li>
                     </ul>
                 </div>
             </div>