initial commit

3 files changed, 383 insertions, 0 deletions

diff --git a/theme_common/static/src/old_snippets/s_showcase_slider/000.js b/theme_common/static/src/old_snippets/s_showcase_slider/000.js
new file mode 100644
index 0000000..cbdb73a
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_showcase_slider/000.js
@@ -0,0 +1,132 @@
+odoo.define("theme_common.s_showcase_slider_frontend", function (require) {
+    "use strict";
+
+    const dom = require('web.dom');
+    var publicWidget = require('web.public.widget');
+
+    publicWidget.registry.s_showcase_slider = publicWidget.Widget.extend({
+        selector: ".s_showcase_slider",
+
+        start: function () {
+            _.defer(this.bindEvents.bind(this)); // FIXME delayed to counter a web_editor bug which off all click event
+            this.createPagination();
+            return this._super.apply(this, arguments);
+        },
+
+        destroy: function () {
+            this._super.apply(this, arguments);
+            _.defer(this.unbindEvents.bind(this)); // FIXME delayed to counter a web_editor bug which off all click event
+            this.destroyPagination();
+            this.$target.removeClass("active");
+        },
+
+        bindEvents: function () {
+            // Enlarge image on click if not already enlarged
+            this.$target.on("click.s_showcase_slider", ".s_ss_slider", (function (e) {
+                if (this.$target.hasClass("active")) return;
+
+                this.$target
+                    .addClass("active")
+                    .one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", (function () {
+                        dom.scrollTo(this.$target[0], {
+                            duration: 200,
+                            extraOffset: 70,
+                        });
+                        this.$target.trigger("transitionIsFinished");
+                    }).bind(this));
+            }).bind(this));
+
+            // Close the enlarged image on close icon click
+            this.$target.on("click.s_showcase_slider", ".s_ss_close", (function (e) {
+                this.$target.removeClass("active");
+            }).bind(this));
+
+            // Handle click navigation
+            this.$target.on("click.s_showcase_slider", ".s_ss_prev", this.prevSlide.bind(this));
+            this.$target.on("click.s_showcase_slider", ".s_ss_next", this.nextSlide.bind(this));
+            this.$target.on("click.s_showcase_slider", ".s_ss_slider_pagination > li > a", (function (e) {
+                e.preventDefault();
+                var $selectedDot = $(e.currentTarget).parent();
+                if ($selectedDot.hasClass("selected")) return;
+                this.changeSlide($selectedDot.index());
+            }).bind(this));
+
+            // Keyboard slider navigation
+            $(document).on("keyup.s_showcase_slider", (function (e) {
+                if (!this.$target.hasClass("active")) return;
+
+                switch (e.which) {
+                    case $.ui.keyCode.LEFT:
+                        this.prevSlide();
+                        break;
+                    case $.ui.keyCode.RIGHT:
+                        this.nextSlide();
+                        break;
+                    case $.ui.keyCode.ESCAPE:
+                        this.$target.removeClass("active");
+                        break;
+                }
+            }).bind(this));
+        },
+
+        unbindEvents: function () {
+            this.$target.off(".s_showcase_slider");
+            $(document).off(".s_showcase_slider");
+        },
+
+        createPagination: function () { // FIXME pagination should be saved with editor but keep this for compatibility
+            this.$target.find(".s_ss_slider_pagination").remove(); // Remove saved-with-editor pagination
+
+            this.$pagination = $("<ul/>", {class: "s_ss_slider_pagination"});
+            this.$pagination.insertAfter(this.$target.find(".s_ss_slider_navigation"));
+
+            var nbSlides = this.$target.find(".s_ss_slider").children().length;
+            for (var i = 0 ; i < nbSlides ; i++) {
+                this.$pagination.append("<li><a href=\"#\"></a></li>");
+            }
+
+            this.$pagination.children().eq(this.getCurrentIndex()).addClass("selected");
+        },
+
+        destroyPagination: function () {
+            if (this.$pagination) {
+                this.$pagination.remove();
+                this.$pagination = null;
+            }
+        },
+
+        prevSlide: function () {
+            var nbSlides = this.$target.find(".s_ss_slider").children().length;
+            var currentIndex = this.getCurrentIndex();
+            this.changeSlide(currentIndex > 0 ? (currentIndex - 1) : (nbSlides - 1));
+        },
+
+        nextSlide: function () {
+            var nbSlides = this.$target.find(".s_ss_slider").children().length;
+            var currentIndex = this.getCurrentIndex();
+            this.changeSlide((currentIndex + 1) % nbSlides);
+        },
+
+        getCurrentIndex: function () {
+            return this.$target.find(".s_ss_slider > .selected").index();
+        },
+
+        changeSlide: function (n) {
+            var $slides = this.$target.find(".s_ss_slider > li").removeClass("selected");
+            this.$target.find(".s_ss_slider_pagination > li").removeClass("selected");
+
+            var $slide = $slides.eq(n).addClass("selected");
+            $slides.removeClass("move-left");
+            $slide.prevAll().addClass("move-left");
+
+            this.$pagination.children().eq(n).addClass("selected");
+            this.updateNavigation();
+        },
+
+        updateNavigation: function () {
+            var $active = this.$target.find(".s_ss_slider > .selected");
+            this.$target.find(".s_ss_prev").toggleClass("inactive", $active.is(":first-child"));
+            this.$target.find(".s_ss_next").toggleClass("inactive", $active.is(":last-child"));
+        },
+    });
+});
diff --git a/theme_common/static/src/old_snippets/s_showcase_slider/000.scss b/theme_common/static/src/old_snippets/s_showcase_slider/000.scss
new file mode 100644
index 0000000..62a0cdb
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_showcase_slider/000.scss
@@ -0,0 +1,241 @@
+
+#wrapwrap .s_showcase_slider {
+    position: relative;
+
+    .s_ss_slider_wrapper {
+        position: relative;
+        z-index: 10;
+        transition: width 400ms;
+        /* Force Hardware Acceleration */
+        transform: translateZ(0);
+        backface-visibility: hidden;
+
+        @include s-showcase-slider-wrapper-hook;
+
+        .s_ss_close {
+            display: none;
+            @include o-position-absolute(30px, 30px);
+            z-index: 12;
+            width: 48px;
+            height: 48px;
+            overflow: hidden;
+            white-space: nowrap;
+            visibility: hidden;
+            opacity: 0;
+            font-size: 1.6em;
+            text-align: right;
+            color: $s-ss-slider-navigation-color;
+            text-shadow: $s-ss-slider-navigation-text-shadow;
+            transition: transform 0.3s 0s, visibility 0s 0.4s;
+
+            &:hover {
+                transform: scale(1.2);
+            }
+
+            @include s-showcase-slider-close-hook;
+        }
+
+        ul {
+            margin: 0;
+        }
+    }
+
+    .s_ss_slider {
+        padding: 0;
+        position: relative;
+        z-index: 10;
+        overflow: hidden;
+        &:before { /* never visible - this is used by javascript to check the current window size */
+            content: 'mobile';
+            display: none;
+        }
+        @include s-showcase-slider-slider-hook;
+
+        li {
+            @include o-position-absolute($top: 0, $left: 0);
+            list-style: none;
+            z-index: 10;
+            width: 100%;
+            height: 100%;
+            transform: translate(100%, 0);
+            transition: transform 300ms linear;
+            img {
+                display:block;
+                width:100%;
+            }
+            &.selected {
+                position:relative;
+                z-index:12;
+                transform: translate(0, 0);
+            }
+            &.move-left {
+                transform: translate(-100%, 0);
+            }
+        }
+    }
+
+    .s_ss_slider_navigation li {
+        @include o-position-absolute($top: 50%);
+        z-index:12;
+        list-style:none;
+        transform: translate(0, -50%);
+
+        span {
+            display: block;
+            width: 48px;
+            height: 48px;
+            overflow: hidden;
+            font-size: 1.6em;
+            color: $s-ss-slider-navigation-color;
+            text-shadow: $s-ss-slider-navigation-text-shadow;
+            white-space: nowrap;
+            transition: e("opacity 200ms, visibility 0s");
+
+            @include s-showcase-slider-navigation-buttons-hook;
+
+            &.inactive {
+                opacity: 0;
+                visibility: hidden;
+                transition: e("opacity 200ms 0s, visibility 0s 200ms");
+            }
+            &:hover {
+                opacity: 0.7;
+            }
+        }
+        &:first-of-type {
+            left: 10px;
+        }
+        &:last-of-type {
+            right: 10px;
+        }
+
+        @include s-showcase-slider-navigation-hook;
+    }
+
+    .s_ss_slider_pagination {
+        @include o-position-absolute($left: 50%, $bottom: 30px);
+        z-index: 12;
+        transform: translate(-50%, 0);
+        visibility: hidden;
+        li {
+            display: inline-block;
+            float: left;
+            margin: 0 5px;
+        }
+        li.selected a {
+            background: #f5f4f3;
+        }
+        a {
+            display: block;
+            height: 12px;
+            width: 12px;
+            border-radius: 50%;
+            box-shadow: 0 1px 0 #333;
+            border: 1px solid #f5f4f3;
+            background-color: rgba(255,255,255,0);
+            overflow: hidden;
+            text-indent: 100%;
+            white-space: nowrap;
+        }
+        &:after {
+            content: "";
+            display: table;
+            clear: both;
+        }
+    }
+
+    .s_ss_item_info {
+        padding: 50px 5%;
+
+        @include s-showcase-slider-info-hook;
+    }
+
+    // ================ READABLE
+    &.readable {
+        font-size: 100%;
+        .s_ss_item_info {
+            padding: 0 20px;
+        }
+    }
+
+    // ================ SLIDER ACTIVE
+    &.active .s_ss_slider_wrapper .s_ss_close {
+        visibility: visible;
+        opacity: 1;
+        transition: transform 0.3s 0s, visibility 0s 0s, opacity .4s .4s;
+    }
+}
+
+@include media-breakpoint-up(lg) {
+    #wrapwrap .s_showcase_slider {
+        .s_ss_slider {
+            cursor: pointer;
+            &:before { content: 'desktop'; }
+            &:after {
+                content: '';
+                display: block;
+                @include o-position-absolute($top: 0, $left: 0);
+                width: 100%;
+                height: 100%;
+                pointer-events: none;
+                background: rgba(255, 255, 255, 0.4);
+                background-size: 48px;
+                opacity: 0;
+                z-index: 14;
+                transition: opacity 200ms;
+            }
+            &:hover::after {
+                opacity: 1;
+            }
+            @include s-showcase-slider-slider-hover-hook;
+        }
+
+        .s_ss_item_info {
+            @include o-position-absolute(0, 0);
+            width: 50%;
+            padding: 60px 60px 0;
+            margin: 0;
+        }
+
+        .s_ss_slider_wrapper {
+            width: 50%;
+            .s_ss_close {
+                display: block;
+            }
+        }
+        .s_ss_slider_navigation li,
+        .s_ss_slider_pagination {
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.4s 0s, visibility 0s .4s;
+        }
+
+        .s_ss_slider_navigation li {
+            &:first-child {
+                left: 30px;
+            }
+            li:last-child {
+                right: 30px;
+            }
+        }
+        // ================ SLIDER ACTIVE
+        &.active {
+            .s_ss_slider {
+                cursor: auto;
+                &:after {
+                    display: none;
+                }
+            }
+            .s_ss_slider_wrapper {
+                width: 100%;
+                z-index: 10;
+            }
+            .s_ss_slider_navigation li,
+            .s_ss_slider_pagination {
+                opacity: 1;
+                visibility: visible;
+                transition: opacity 0.4s .4s, visibility 0s .4s;
+            }
+        }
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_showcase_slider/000_variables.scss b/theme_common/static/src/old_snippets/s_showcase_slider/000_variables.scss
new file mode 100644
index 0000000..a70b265
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_showcase_slider/000_variables.scss
@@ -0,0 +1,10 @@
+$s-ss-slider-navigation-color : white;
+$s-ss-slider-navigation-text-shadow : 0 1px 0 #333;
+
+@mixin s-showcase-slider-wrapper-hook {}
+@mixin s-showcase-slider-slider-hook {}
+@mixin s-showcase-slider-slider-hover-hook {}
+@mixin s-showcase-slider-navigation-hook {}
+@mixin s-showcase-slider-navigation-buttons-hook {}
+@mixin s-showcase-slider-close-hook {}
+@mixin s-showcase-slider-info-hook {}