[IMP] website: carousel edition

bzr revid: chm@openerp.com-20130731150511-8wfza72kb6lynmor

diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
index e909c1d..78e9162 100644 (file)
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@@ -177,5 +177,10 @@
 }
 */
 
-    
-    
+.carousel > .css_carousel_options {
+    cursor: pointer;
+    position: absolute;
+    white-space: nowrap;
+    z-index: 1;
+    display: none;
+}
\ No newline at end of file

diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 21d8b42..4b50728 100644 (file)
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -1,5 +1,6 @@
 openerp.website = function(instance) {
 var _lt = instance.web._lt;
+var QWeb = instance.web.qweb;
 instance.website.EditorBar = instance.web.Widget.extend({
     template: 'Website.EditorBar',
     events: {
@@ -356,60 +357,24 @@ instance.website.RTE = instance.web.Widget.extend({
     // TODO clean
     snippet_carousel: function () {
         var self = this;
-        $carousels = $("<div/>");
-        $carousels.css({'position': 'absolute', 'top': 0, 'white-space': 'nowrap'});
-        $carousels.insertAfter(self.$el);
-
-        $(".carousel").each(function() {
-            var $carousel = new instance.website.snippet.carousel(self, this);
-            $carousel.appendTo($carousels);
-        });
-        $(document).on("scroll", function () {
-            $carousels.css("top", (-self.$el.offset().top+2) + 'px');
+        $('.carousel .js_carousel_options .label').on('click', function (e) {
+            e.preventDefault();
+            var $button = $(e.currentTarget)
+            var $c = $button.parents(".carousel:first");
+
+            if($button.hasClass("js_add")) {
+                var cycle = $c.find(".carousel-inner .item").size();
+                $c.find(".carousel-inner").append(QWeb.render("Website.Snipped.carousel"));
+                $c.carousel(cycle);
+            }
+            else {
+                var cycle = $c.find(".carousel-inner .item.active").remove();
+                $c.find(".carousel-inner .item:first").addClass("active");
+                $c.carousel(0);
+                self.trigger('change', self, null);
+            }
         });
-    }
-});
-
-
-instance.website.snippet = {};
-instance.website.snippet.carousel = instance.web.Widget.extend({
-    template: 'Website.Snipped.carousel',
-    events: {
-        'click .add': 'add_page',
-        'click .remove': 'remove_page',
-    },
-    instances: [],
-    init: function (parent, carousel) {
-        this._super(parent);
-        this.parent = parent;
-        var index = instance.website.snippet.carousel.index || 0;
-        instance.website.snippet.carousel.index = index++;
-        this.index = index;
-        $(carousel).addClass("carousel-index-"+index);
-        this.offset = $(carousel).offset();
-    },
-    start: function () {
-        var self = this;
-        this.$el.css({position: 'absolute', top: this.offset.top+'px', left: this.offset.left+'px'});
-    },
-    destroy: function () {
-        return this._super();
-    },
-    get_carousel: function() {
-        return $(".carousel.carousel-index-"+this.index);
-    },
-    add_page: function() {
-        var $c = this.get_carousel();
-        var cycle = $c.find(".carousel-inner .item").size();
-        $c.find(".carousel-inner").append(this.$(".item").clone());
-        $c.carousel(cycle);
-    },
-    remove_page: function() {
-        var $c = this.get_carousel();
-        var cycle = $c.find(".carousel-inner .item.active").remove();
-        $c.find(".carousel-inner .item:first").addClass("active");
-        $c.carousel(0);
-        this.parent.trigger('change', this.parent, null);
+        $('.carousel .js_carousel_options').show();
     }
 });
 
@@ -490,10 +455,8 @@ $(function(){
         }
         event.preventDefault();
     }
-
 });
 
-
 instance.web.ActionRedirect = function(parent, action) {
     var url = $.deparam(window.location.href).url;
     if (url) {

diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index 75d2561..941015f 100644 (file)
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -19,16 +19,10 @@
     </div>
 </t>
 <t t-name="Website.Snipped.carousel">
-    <div style="position: absolute; top: -4px;">
-        <span class="label" style="cursor:pointer"><i class="add icon-plus-sign"></i></span>
-        <span class="label" style="cursor:pointer"><i class="remove icon-minus-sign"></i></span>
-        <div style="display: none;">
-            <div class="item" style="background-image: url(/website/static/src/img/china.jpg); background-size: cover; background-position: bottom;" >
-                <div class='container'>
-                    <h1 class='mt64'>Your New Banner Slide</h1>
-                    <h2>With another convincing subtitle</h2>
-                </div>
-            </div>
+    <div class="item" style="background-image: url(/website/static/src/img/china.jpg); background-size: cover; background-position: bottom;" >
+        <div class='container'>
+            <h1 class='mt64'>Your New Banner Slide</h1>
+            <h2>With another convincing subtitle</h2>
         </div>
     </div>
 </t>

diff --git a/addons/website/views/views.xml b/addons/website/views/views.xml
index 2a4622f..94c2de1 100644 (file)
--- a/addons/website/views/views.xml
+++ b/addons/website/views/views.xml
@@ -204,6 +204,11 @@
 
                 <section>
                     <div id="myCarousel" class="carousel slide" data-interval='1000000'>
+                        <div class="css_carousel_options js_carousel_options" t-ignore="1">
+                            <span class="label js_add"><i class="icon-plus-sign"></i></span>
+                            <span class="label js_remove"><i class="icon-minus-sign"></i></span>
+                        </div>
+                        <!-- Carousel items -->
                         <div class="carousel-inner">
                             <div class="item active" style="background-image: url(/website/static/src/img/greenfields.jpg); background-size: cover;" >
                                 <div class='container'>