[REF] website: move s_image_gallery snippet to dedicated files

1 files changed, 172 insertions, 0 deletions

diff --git a/addons/website/static/src/snippets/s_image_gallery/000.js b/addons/website/static/src/snippets/s_image_gallery/000.js
new file mode 100644
index 00000000000..72a9f2a0fe1
--- /dev/null
+++ b/addons/website/static/src/snippets/s_image_gallery/000.js
@@ -0,0 +1,172 @@
+odoo.define('website.s_image_gallery', function (require) {
+'use strict';
+
+var core = require('web.core');
+var publicWidget = require('web.public.widget');
+
+var qweb = core.qweb;
+
+const GalleryWidget = publicWidget.Widget.extend({
+    selector: '.o_gallery:not(.o_slideshow)',
+    xmlDependencies: ['/website/static/src/xml/website.gallery.xml'],
+    events: {
+        'click img': '_onClickImg',
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Called when an image is clicked. Opens a dialog to browse all the images
+     * with a bigger size.
+     *
+     * @private
+     * @param {Event} ev
+     */
+    _onClickImg: function (ev) {
+        var self = this;
+        var $cur = $(ev.currentTarget);
+
+        var urls = [];
+        var idx = undefined;
+        var milliseconds = undefined;
+        var params = undefined;
+        var $images = $cur.closest('.o_gallery').find('img');
+        var size = 0.8;
+        var dimensions = {
+            min_width: Math.round(window.innerWidth * size * 0.9),
+            min_height: Math.round(window.innerHeight * size),
+            max_width: Math.round(window.innerWidth * size * 0.9),
+            max_height: Math.round(window.innerHeight * size),
+            width: Math.round(window.innerWidth * size * 0.9),
+            height: Math.round(window.innerHeight * size)
+        };
+
+        $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 $modal = $(qweb.render('website.gallery.slideshow.lightbox', {
+            srcs: urls,
+            index: idx,
+            dim: dimensions,
+            interval: milliseconds || 0,
+            id: _.uniqueId('slideshow_'),
+        }));
+        $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.one('shown.bs.modal', function () {
+            self.trigger_up('widgets_start_request', {
+                editableMode: false,
+                $target: $modal.find('.modal-body.o_slideshow'),
+            });
+        });
+    },
+});
+
+const GallerySliderWidget = publicWidget.Widget.extend({
+    selector: '.o_slideshow',
+    xmlDependencies: ['/website/static/src/xml/website.gallery.xml'],
+    disabledInEditableMode: false,
+
+    /**
+     * @override
+     */
+    start: function () {
+        var self = this;
+        this.$carousel = this.$target.is('.carousel') ? this.$target : this.$target.find('.carousel');
+        this.$indicator = this.$carousel.find('.carousel-indicators');
+        this.$prev = this.$indicator.find('li.o_indicators_left').css('visibility', ''); // force visibility as some databases have it hidden
+        this.$next = this.$indicator.find('li.o_indicators_right').css('visibility', '');
+        var $lis = this.$indicator.find('li[data-slide-to]');
+        var nbPerPage = Math.floor(this.$indicator.width() / $lis.first().outerWidth(true)) - 3; // - navigator - 1 to leave some space
+        var realNbPerPage = nbPerPage || 1;
+        var nbPages = Math.ceil($lis.length / realNbPerPage);
+
+        var index;
+        var page;
+        update();
+
+        function hide() {
+            $lis.each(function (i) {
+                $(this).toggleClass('d-none', i < page * nbPerPage || i >= (page + 1) * nbPerPage);
+            });
+            if (self.editableMode) { // do not remove DOM in edit mode
+                return;
+            }
+            if (page <= 0) {
+                self.$prev.detach();
+            } else {
+                self.$prev.prependTo(self.$indicator);
+            }
+            if (page >= nbPages - 1) {
+                self.$next.detach();
+            } else {
+                self.$next.appendTo(self.$indicator);
+            }
+        }
+
+        function update() {
+            index = $lis.index($lis.filter('.active')) || 0;
+            page = Math.floor(index / realNbPerPage);
+            hide();
+        }
+
+        this.$carousel.on('slide.bs.carousel.gallery_slider', function () {
+            setTimeout(function () {
+                var $item = self.$carousel.find('.carousel-inner .carousel-item-prev, .carousel-inner .carousel-item-next');
+                var index = $item.index();
+                $lis.removeClass('active')
+                    .filter('[data-slide-to="' + index + '"]')
+                    .addClass('active');
+            }, 0);
+        });
+        this.$indicator.on('click.gallery_slider', '> li:not([data-slide-to])', function () {
+            page += ($(this).hasClass('o_indicators_left') ? -1 : 1);
+            page = Math.max(0, Math.min(nbPages - 1, page)); // should not be necessary
+            self.$carousel.carousel(page * realNbPerPage);
+            hide();
+        });
+        this.$carousel.on('slid.bs.carousel.gallery_slider', update);
+
+        return this._super.apply(this, arguments);
+    },
+    /**
+     * @override
+     */
+    destroy: function () {
+        this._super.apply(this, arguments);
+
+        if (!this.$indicator) {
+            return;
+        }
+
+        this.$prev.prependTo(this.$indicator);
+        this.$next.appendTo(this.$indicator);
+        this.$carousel.off('.gallery_slider');
+        this.$indicator.off('.gallery_slider');
+    },
+});
+
+publicWidget.registry.gallery = GalleryWidget;
+publicWidget.registry.gallerySlider = GallerySliderWidget;
+
+return {
+    GalleryWidget: GalleryWidget,
+    GallerySliderWidget: GallerySliderWidget,
+};
+});