diff options
Diffstat (limited to 'theme_common/static/src/old_snippets/s_css_slider')
3 files changed, 285 insertions, 0 deletions
diff --git a/theme_common/static/src/old_snippets/s_css_slider/000.js b/theme_common/static/src/old_snippets/s_css_slider/000.js new file mode 100644 index 0000000..99d225c --- /dev/null +++ b/theme_common/static/src/old_snippets/s_css_slider/000.js @@ -0,0 +1,122 @@ +odoo.define('theme_common.s_css_slider_frontend', function (require) { + 'use strict'; + + var publicWidget = require('web.public.widget'); + + publicWidget.registry.s_css_slider = publicWidget.Widget.extend({ + selector: ".s_css_slider", + disabledInEditableMode: false, + + start: function () { + var self = this; + var $container = self.$target; + $container.find(".s_css_slider_pagination").remove(); + // create slider pagination + var sliderPagination = self.createSliderPagination($container); + self.bindEvents($container, sliderPagination); + $(window).on("resize", function () { + self.resizeImgs($container); + }).trigger("resize"); + return this._super.apply(this, arguments); + }, + + bindEvents: function ($container, sliderPagination) { + var self = this, + $next_btn = $container.find('.next'), + $prev_btn = $container.find('.prev'); + + $next_btn.on('click.s_css', function (e) { + self.nextSlide($container, sliderPagination); + }); + + $prev_btn.on('click.s_css', function (e) { + self.prevSlide($container, sliderPagination); + }); + + if ($container.hasClass("autoplay") && this.editableMode !== true) { + var interval; + var autoplay = function () { + interval = setInterval(function () { + if (!$next_btn.hasClass("inactive")) { + self.nextSlide($container, sliderPagination); + } else { + self.prevSlide($container, sliderPagination, 0); + } + }, 3000); + }; + autoplay(); + $container.hover(function () { clearInterval(interval); }); + $container.mouseleave(function () { autoplay(); }); + } + + sliderPagination.on('click.s_css', function () { + var selectedDot = $(this); + if (!selectedDot.hasClass('selected')) { + var selectedPosition = selectedDot.index(), + activePosition = $container.find('.slider .selected').index(); + if ( activePosition < selectedPosition) { + self.nextSlide($container, sliderPagination, selectedPosition); + } else { + self.prevSlide($container, sliderPagination, selectedPosition); + } + } + }); + }, + + resizeImgs: function ($container) { + var cont_h = $container.height(), + imgs = $container.find(".slide img"); + + imgs.each(function () { + var $img = $(this), + img_h = $img.height(); + if (img_h > cont_h) { + $img.css("width", "100%"); + $img.css("margin-top", (cont_h - img_h)/2); + } + }); + }, + + createSliderPagination: function ($container) { + var wrapper = $('<ul class="s_css_slider_pagination"></ul>').insertAfter($container.find('.navigation')); + $container.find('.slider .slide').each(function (index) { + var dotWrapper = (index === 0) ? $('<li class="selected"></li>') : $('<li></li>'), + dot = $('<a href="#0"></a>').appendTo(dotWrapper); + dotWrapper.appendTo(wrapper); + dot.text(index+1); + }); + return wrapper.children('li'); + }, + + nextSlide: function ($container, $pagination, $n) { + var self = this, + visibleSlide = $container.find('.slider .selected'), + navigationDot = $container.find('.s_css_slider_pagination .selected'); + + if (typeof $n === 'undefined') $n = visibleSlide.index() + 1; + visibleSlide.removeClass('selected'); + $container.find('.slider .slide').eq($n).addClass('selected').prevAll().addClass('move-left'); + navigationDot.removeClass('selected'); + $pagination.eq($n).addClass('selected'); + self.updateNavigation($container, $container.find('.slider .slide').eq($n)); + }, + + prevSlide: function ($container, $pagination, $n) { + var self = this, + visibleSlide = $container.find('.slider .selected'), + navigationDot = $container.find('.s_css_slider_pagination .selected'); + + if (typeof $n === 'undefined') $n = visibleSlide.index() - 1; + visibleSlide.removeClass('selected'); + $container.find('.slider .slide').eq($n).addClass('selected').removeClass('move-left').nextAll().removeClass('move-left'); + navigationDot.removeClass('selected'); + $pagination.eq($n).addClass('selected'); + self.updateNavigation($container, $container.find('.slider .slide').eq($n)); + }, + + updateNavigation: function ($container, $active) { + $container.find('.prev').toggleClass('inactive', $active.is(':first-child')); + $container.find('.next').toggleClass('inactive', $active.is(':last-child')); + }, + }); +}); diff --git a/theme_common/static/src/old_snippets/s_css_slider/000.scss b/theme_common/static/src/old_snippets/s_css_slider/000.scss new file mode 100644 index 0000000..3fdc00f --- /dev/null +++ b/theme_common/static/src/old_snippets/s_css_slider/000.scss @@ -0,0 +1,153 @@ + +#wrapwrap .s_css_slider { + position: relative; + min-height: 150px; + + .wrapper { + height: 100%; + position: relative; + z-index: 10; + transition: width 400ms; + /* Force Hardware Acceleration */ + transform: translateZ(0); + backface-visibility: hidden; + + @include s-css-slider-wrapper-hook; + } + + .slider{ + padding: 0; + height: 100%; + position: relative; + z-index: 10; + overflow: hidden; + @include s-css-slider-slider-hook; + } + + .slider .slide { + position: absolute; + list-style: none; + overflow: hidden; + top:0; + left:0; + margin: 0; + z-index: 10; + height: 100%; + width: 100%; + transform: translate(100%, 0); + transition: transform 300ms linear; + .info { + position: relative; + margin: 0; + + &:not([class*=bg-]) { + color : $s-css-slider-info-text-color; + background-color : $s-css-slider-info-bg-color; + } + + @include media-breakpoint-up(md) { + padding: $grid-gutter-width; + padding-top: $grid-gutter-width*0.5; + @include o-position-absolute(30%, $left: 60px); + max-width: 60%; + } + } + img { + display:block; + width:100%; + + // Fix the image size on some devices (e.g. iPhone X) + @media screen and (max-width: 400px) { + // The image height was greater than the container height + height: 100%; + + // Necessary if we don't want images of different sizes + // see resizeImgs() in s_css_slider_frontend.js + margin-top: 0 !important; + } + } + &.selected { + position:relative; + z-index:12; + transform: translate(0, 0); + } + &.move-left { + transform: translate(-100%, 0); + } + } + .navigation li { + position:absolute; + z-index:12; + top:50%; + list-style:none; + bottom:auto; + transform: translate(0, -50%); + + span { + display: block; + width: 48px; + height: 48px; + overflow: hidden; + font-size: 1.6em; + color: $s-css-slider-navigation-color; + text-shadow: $s-css-slider-navigation-text-shadow; + white-space: nowrap; + transition: e("opacity 200ms, visibility 0s"); + + @include s-css-slider-navigation-buttons-hook; + + &.inactive { + opacity:0; + visibility:hidden; + transition: e("opacity 200ms 0s, visibility 0s 200ms"); + } + &:hover { + opacity:.7; + } + } + &:first-of-type { + left:10px; + } + &:last-of-type { + right:10px; + } + + @include s-css-slider-navigation-hook; + } + + .s_css_slider_pagination { + position:absolute; + padding: 0; + z-index: 12; + bottom: 30px; + left: 50%; + right:auto; + transform: translate(-50%, 0); + + 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; + } + } +} diff --git a/theme_common/static/src/old_snippets/s_css_slider/000_variables.scss b/theme_common/static/src/old_snippets/s_css_slider/000_variables.scss new file mode 100644 index 0000000..aa8ae79 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_css_slider/000_variables.scss @@ -0,0 +1,10 @@ +$s-css-slider-navigation-color: white; +$s-css-slider-navigation-text-shadow: 0 1px 0 #333; +$s-css-slider-info-bg-color: #fff; +$s-css-slider-info-text-color: #333; + +@mixin s-css-slider-wrapper-hook {} +@mixin s-css-slider-slider-hook {} +@mixin s-css-slider-slider-hover-hook {} +@mixin s-css-slider-navigation-hook {} +@mixin s-css-slider-navigation-buttons-hook {} |