[IMP] website: carousel

bzr revid: chm@openerp.com-20130730143643-1itg8hhwuchnb5k3

addons/website/static/src/js/website.js

@@ -253,6 +253,7 @@ instance.website.RTE = instance.web.Widget.extend({
         var self = this;
         this.$el.show();
         this.disable();
+        this.snippet_carousel();
         CKEDITOR.on('currentInstance', this.proxy('_change_focused_editor'));
         $elements
             .not('span, [data-oe-type]')
@@ -308,6 +309,57 @@ instance.website.RTE = instance.web.Widget.extend({
             allowedContent: true,
         };
     },
+    // TODO clean
+    snippet_carousel: function () {
+        var self = this;
+        $(".carousel").each(function() {
+            var $carousel = new instance.website.snippet.carousel(self, this);
+            $carousel.insertAfter(self.$el);
+        });
+    }
+});
+
+
+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);
+    }
 });
 
 $(function(){
@@ -366,8 +418,6 @@ $(function(){
         });
     }
 
-        
-
     function append_snippet(event){
         console.log('click',this,event.button);
         if(event.button === 0){

addons/website/static/src/xml/website.xml

@@ -18,4 +18,13 @@
         <ul class="dropdown-menu" role="menu"/>
     </div>
 </t>
+<t t-name="Website.Snipped.carousel">
+    <div style="position: absolute; top: -4px;">
+        <button class="add"><t t-esc="'Add a new banner\'s page'"/></button>
+        <button class="remove"><t t-esc="'Remove this banner\'s page'"/></button>
+        <div style="display: none;">
+            <div class="item" style="width: 992px; min-height: 100px;"><h1>Please edit me...</h1></div>
+        </div>
+    </div>
+</t>
 </templates>

addons/website/views/views.xml

@@ -190,16 +190,15 @@
                             <div class="oe_span12">
                                 <div id="myCarousel" class="carousel slide">
                                     <!-- Carousel items -->
-                                    <div class="carousel-inner">
+                                    <div class="carousel-inner" style="width: 992px; height: 210px;">
                                         <div class="item">
-                                            <div style="width: 992px; height: 210px; overflow: hidden;">
+                                            <div style="border:1px solid #eee; width: 992px; height: 210px; overflow: hidden;">
                                                 <img src="//www.openerp.com/saas_master/static/site_new/img/homepage/events_openedays.jpg"/>
                                             </div>
                                             <div class="css_titlebox" style="position: absolute; top: 50%%; right: 80px;">
                                                 <div style="margin-top: -25%%; text-align: right; background: #f6f6f6; padding: 7px 20px; border-radius: 5px;">
                                                     <h1>OpenDays</h1>
                                                     <h4>1000+ participants.<br/>A success thanks to you !</h4>
-
                                                     <a class="btn btn-info" href="https://www.openerp.com/news/post/133-OpenERP-Open-Days-2013-wrap-up-">More Info</a>
                                                 </div>
                                             </div>