[IMP] website snippet new option, gallery

website.snippet: The methods described in javascript will be called automatically from the data-method_name = value on li snippets options. The methods are called in the order relative to children of xml (eg: <li data-method1=value1> ... <li data-method2=value2> ... </ li>, the method1 is then called method2). Methods receive two arguments: type (over, click, reset) and value. data-snippet-id-option becomes data-snippet-id. Several xml options can use the same data-snippet-id.

add a new gallery snippet

convert website_sale to the new option system

1 files changed, 76 insertions, 1 deletions

diff --git a/addons/website/static/src/js/website.snippets.animation.js b/addons/website/static/src/js/website.snippets.animation.js
index c72e2c3b84e..785027795ce 100644
--- a/addons/website/static/src/js/website.snippets.animation.js
+++ b/addons/website/static/src/js/website.snippets.animation.js
@@ -1,7 +1,9 @@
 (function () {
     'use strict';
 
+
     var website = openerp.website;
+
     if (!website.snippet) website.snippet = {};
     website.snippet.readyAnimation = [];
 
@@ -37,7 +39,14 @@
             }
         });
     };
+
+
     $(document).ready(function () {
+        if ($(".o_gallery:not(.oe_slideshow)").size()) {
+            // load gallery modal template
+            website.add_template_file('/website/static/src/xml/website.gallery.xml');
+        }
+
         website.snippet.start_animation();
     });
 
@@ -69,7 +78,7 @@
     website.snippet.animationRegistry.slider = website.snippet.Animation.extend({
         selector: ".carousel",
         start: function () {
-            this.$target.carousel({interval: 10000});
+            this.$target.carousel();
         },
         stop: function () {
             this.$target.carousel('pause');
@@ -154,4 +163,70 @@
             this.$target.html('<div class="css_editable_mode_display">&nbsp;</div><iframe src="'+this.$target.data("src")+'" frameborder="0" allowfullscreen="allowfullscreen"></iframe>');
         },
     });
+    
+    /* -------------------------------------------------------------------------
+    Gallery Animation  
+
+    This ads a Modal window containing a slider when an image is clicked 
+    inside a gallery 
+   -------------------------------------------------------------------------*/
+    website.snippet.animationRegistry.gallery = website.snippet.Animation.extend({
+        selector: ".o_gallery:not(.o_slideshow)",
+        start: function() {
+            var self = this;
+            this.$el.on("click", "img", this.click_handler);
+        },
+        click_handler : function(event) {
+            var self = this;
+            var $cur = $(event.currentTarget);
+            var edition_mode = ($cur.closest("[contenteditable='true']").size() !== 0);
+            
+            // show it only if not in edition mode
+            if (!edition_mode) {
+                var urls = [],
+                    idx = undefined,
+                    milliseconds = undefined,
+                    params = undefined,
+                    $images = $cur.closest(".o_gallery").find("img"),
+                    dimensions = {
+                        min_width  : Math.round( window.innerWidth  *  0.7),
+                        min_height : Math.round( window.innerHeight *  0.7),
+                        max_width  : Math.round( window.innerWidth  *  0.7),
+                        max_height : Math.round( window.innerHeight *  0.7),
+                        height : Math.round( window.innerHeight *  0.7)
+                };
+
+                $images.each(function() {
+                    urls.push($(this).attr("src"));
+                });
+                var $img = ($cur.is("img") === true) ? $cur : $cur.closest("img");
+                idx = urls.indexOf($img.attr("src"));
+
+                milliseconds = $cur.closest(".o_gallery").data("interval") || false;
+                var params = {
+                    srcs : urls,
+                    index: idx,
+                    dim  : dimensions,
+                    interval : milliseconds,
+                    id: _.uniqueId("slideshow_")
+                };
+                var $modal = $(openerp.qweb.render('website.gallery.slideshow.lightbox', params));
+                $modal.modal({
+                    keyboard : true,
+                    backdrop : true
+                });
+                $modal.on('hidden.bs.modal', function() {
+                    $(this).hide();
+                    $(this).siblings().filter(".modal-backdrop").remove(); // bootstrap leaves a modal-backdrop
+                    $(this).remove();
+
+                });
+                $modal.find(".modal-content, .modal-body.o_slideshow").css("height", "100%");
+
+                $modal.appendTo(document.body);
+                $modal.find(".carousel").carousel();
+            }
+        } // click_handler  
+    });
+
 })();