theme.js adds common video components
// js/custom-element/ui/native-video.js
var NativeVideo = class extends HTMLElement {
constructor() {
super();
this. hasLoaded = false;
if (this. autoPlay) {
this. play();
} else {
this.addEventListener("click", this.play.bind(this), { once: true });
}
}
get autoPlay() {
return this. hasAttribute("autoplay");
}
play() {
if (!this. hasLoaded) {
this._replaceContent();
}
this.querySelector("video").play();
}
pause() {
if (this. hasLoaded) {
this.querySelector("video").pause();
}
}
_replaceContent() {
const node = this.querySelector("template").content.firstElementChild.cloneNode(true);
this.innerHTML = "";
this.appendChild(node);
this.firstElementChild.addEventListener("play", () => {
this.dispatchEvent(new CustomEvent("video:played", { bubbles: true }));
});
this.firstElementChild.addEventListener("pause", () => {
this.dispatchEvent(new CustomEvent("video:paused", { bubbles: true }));
});
this.hasLoaded = true;
}
};
window.customElements.define("native-video", NativeVideo);
<style>
{%- for block in section.blocks -%}
{%- assign text_position = block.settings.text_position | split: '_' | first -%}
{%- case text_position -%}
{%- when 'top' -%}
{%- assign section_items_alignment = 'flex-start' -%}
{%- when 'middle' -%}
{%- assign section_items_alignment = 'center' -%}
{%- when 'bottom' -%}
{%- assign section_items_alignment = 'flex-end' -%}
{%-endcase-%}
#block-{<!-- -->{ section.id }}-{<!-- -->{ block.id }}{
--section-items-alignment: {<!-- -->{ section_items_alignment }};
/* opacity */
--section-blocks-overlay-color: {<!-- -->{ block.settings.overlay_color.red }}, {<!-- -->{ block.settings.overlay_color.green }}, {< !-- -->{ block.settings.overlay_color.blue }};
--section-blocks-overlay-opacity: {<!-- -->{ block.settings.overlay_opacity | divided_by: 100.0 }};
/* text color */
--text-color: {<!-- -->{ block.settings.text_color.red }}, {<!-- -->{ block.settings.text_color.green }}, {<!-- - ->{ block.settings.text_color.blue }};
/* button color */
--primary-button-background: {<!-- -->{ block.settings.button_background.red }}, {<!-- -->{ block.settings.button_background.green }}, {<!- - -->{ block.settings.button_background.blue }};
--primary-button-text-color: {<!-- -->{ block.settings.button_text_color.red }}, {<!-- -->{ block.settings.button_text_color.green }}, {< !-- -->{ block.settings.button_text_color.blue }};
/* font-size */
--sub-px:{<!-- -->{block.settings.sub_px}}px;
--title-px:{<!-- -->{block.settings.title_px}}px;
--button-px:{<!-- -->{block.settings.button_px}}px;
/* end */
.slideshowSwiper --top --left{
align-items: flex-start;
justify-content: flex-start;
}
.slideshowSwiper --top --center{
align-items: center;
justify-content: flex-start;
}
.slideshowSwiper --top --right{
align-items: flex-end;
justify-content: flex-start;
}
.slideshowSwiper--middle--left{
align-items: flex-start;
justify-content: center;
}
.slideshowSwiper--middle--center{
align-items: center;
justify-content: center;
}
.slideshowSwiper--middle--right{
align-items: flex-end;
justify-content: center;
}
.slideshowSwiper--bottom--left{
align-items: flex-start;
justify-content: flex-end;
}
.slideshowSwiper--bottom--center{
justify-content: flex-end;
align-items: center;
}
.slideshowSwiper--bottom--right{
align-items: flex-end;
justify-content: flex-end;
}
}
{%- endfor -%}
.slideshow_all{
position: relative;
}
.slideshow_all .slideshowSwiper .swiper-pagination {
bottom: 25px;
}
.slideshow_all .slideshowSwiper .swiper-pagination-bullet {
opacity: 1;
position: relative;
width:60px;
height: 3px;
border-radius: 0;
margin: 0 4px;
background-color: rgba(0,0,0,0.5);
transition: background-color .3s ease;
}
.slideshow_all .slideshowSwiper .swiper-pagination-bullet::before {
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
transform: scaleX(0);
transform-origin: 0 0;
}
.slideshow_all .slideshowSwiper .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
animation: sliderPagination 5s linear forwards
}
/* .slideshow_all .slideshowSwiper .swiper-pagination-bullet:hover {
background-color: #fff;
}
*/
@keyframes sliderPagination {
100% {
transform: scaleX(1);
opacity: 1;
}
}
.slideshowSwiper{
overflow: hidden;
}
.slideshowSwiper_box img,.slideshowSwiper_box video{
width: 100%;
}
/* box position */
.slideshowSwiper_boxPosition{
color: rgba(var(--text-color));
position: absolute;
flex-direction: column;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
content: '';
padding-top: 80px;
padding-bottom: 80px;
background: rgba(var(--section-blocks-overlay-color), var(--section-blocks-overlay-opacity));
}
.slideshowSwiper_boxPosition_button{
max-width: 200px;
display: flex;
align-items: center;
justify-content: center;
padding: 14px 20px;
cursor: pointer;
font-size: var(--button-px);
background: rgba(var(--primary-button-background));
color: rgba(var(--primary-button-text-color));
transition: box-shadow 350ms cubic-bezier(.25, .1, 0, 1.009),color 250ms;
}
.slideshowSwiper_boxPosition_button:hover{
box-shadow: inset 0 -54px 0 0px #000;
color: #fff;
}
/* */
.slideshowSwiper_boxPosition_sub{
line-height: 1.2;
font-size: var(--sub-px);
}
.slideshowSwiper_boxPosition_title{
line-height: 1.2;
font-weight: 600;
font-size: var(--title-px);
}
.slideshowSwiper_boxcover .slideshowSwiper_box_img {
position: relative;
width: 100%;
height: 0;
padding-top: 45%;
}
.slideshowSwiper_boxcover .slideshowSwiper_box_img img {
object-fit: cover;
position: absolute;
left: 0;
top: 0;
height: 100%;
}
</style>
<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="//i2.wp.com/cdn.suoluomei.com/common/js2.0/swiper.animate/1.0.3/1.0.3.min.js"></script>
<script src="//i2.wp.com/unpkg.com/swiper/swiper-bundle.min.js"> </script>
<div class="slideshow_all">
<div class="slideshowSwiper slideshowSwiper_box{<!-- -->{section.settings.section_height}}">
<div class="swiper-wrapper">
{% for block in section. blocks %}
<div class="swiper-slide slideshowSwiper_box" id="block-{<!-- -->{ section.id }}-{<!-- -->{ block.id }}">
{% if block.settings.video_link !=blank and block.settings.video_mobileLink !=blank %}
<native-video class="video-wrapper video-wrapper--native pc" autoplay id="pageAppVideo">
<!-- controls: true, -->
{<!-- -->{- block.settings.video_link | video_tag: autoplay: true, playsinline: true, muted: true, loop: true -}}
</native-video>
<native-video class="video-wrapper video-wrapper--native mobile" autoplay id="pageAppVideo">
<!-- controls: true, -->
{<!-- -->{- block.settings.video_mobileLink | video_tag: autoplay: true, playsinline: true, muted: true, loop: true -}}
</native-video>
{% else %}
<div class="slideshowSwiper_box_img pc">
<img src="{<!-- -->{block.settings.img | img_url: '1920x'}}" alt="{<!-- -->{block.settings.img .alt}}">
</div>
<div class="slideshowSwiper_box_img mobile">
<img src="{<!-- -->{block.settings.img_mobile | img_url: '750x'}}" alt="{<!-- -->{block.settings.img_mobile .alt}}">
</div>
{% endif %}
{%- assign text_alignment = block.settings.text_position | split: '_' | first -%}
{%- assign text_position = block.settings.text_position | split: '_' | last -%}
<div class="slideshowSwiper_boxPosition slideshowSwiper--{<!-- -->{ text_alignment }}--{<!-- -->{ text_position }} container">
{% if block.settings.sub !=blank %}
<div class="slideshowSwiper_boxPosition_sub ani" swiper-animate-effect="fadeInUp">
{<!-- -->{block.settings.sub}}
</div>
{% endif %}
{% if block.settings.title !=blank %}
<div class="slideshowSwiper_boxPosition_title ani" swiper-animate-effect="fadeInUp">
{<!-- -->{block.settings.title}}
</div>
{% endif %}
{% if block.settings.button !=blank and block.settings.button_link !=blank %}
<a href="{<!-- -->{block.settings.button_link}}" class="slideshowSwiper_boxPosition_button ani" swiper-animate-effect="fadeInUp">
{<!-- -->{block.settings.button}}
</a>
{% endif %}
</div>
</div>
{% end for %}
</div>
<!-- Postscript -->
<div class="swiper-pagination"></div>
</div>
</div>
<script>
var mySwiper = new Swiper('.slideshowSwiper', {
speed: 500,
slidesPerView: 1,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
//Add page style
pagination: {
el: '.swiper-pagination', // The class to be recognized as a page character
clickable: true, //Move after clicking the "Page" button
type: 'bullets', // shape type
},
on: { // event
slideChange: () => { // The event will occur after the slide changes
if (mySwiper.realIndex > 0) {
mySwiper.params.autoplay.delay = 5000;
}
},
init: function(){
swiperAnimateCache(this); //Hide animated elements
swiperAnimate(this); //Initialization completed and animation started
},
slideChangeTransitionEnd: function(){
swiperAnimate(this); //The current slide animation is also run at the end of each slide switch.
//this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); The animation is only displayed once, removing the ani class name
}
}
})
</script>
{% schema %}
{
"name": "index- Slideshow",
"class": "shopify-section--index-slideshow",
"settings": [
{
"type": "select",
"id": "selectId",
"label": "Box",
"options": [
{
"value": "full_width",
"label": "Full width"
},
{
"value": "boxed",
"label": "Boxed"
}
],
"default": "full_width"
},
{
"type": "select",
"id": "section_height",
"label": "Section height",
"options": [
{
"value": "auto",
"label": "Original image ratio"
},
{
"value": "cover",
"label": "cover"
}
],
"default": "auto"
}
],
"blocks": [
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "img",
"info": "2160 x 1080px .jpg recommended, 1080 x 1080px .jpg recommended if split",
"label": "Image"
},
{
"type": "image_picker",
"id": "img_mobile",
"label": "Mobile image",
"info": "1000 x 1400px .jpg recommended. If none is set, desktop image will be used."
},
{
"type": "video",
"id": "video_link",
"label": "video link"
},
{
"type": "video",
"id": "video_mobileLink",
"label": "video mobile link"
},
{
"type": "header",
"content": "Content"
},
{
"type": "select",
"id": "text_position",
"label": "Text position",
"options": [
{
"value": "top_left",
"label": "Top left"
},
{
"value": "top_center",
"label": "Top center"
},
{
"value": "top_right",
"label": "Top right"
},
{
"value": "middle_left",
"label": "Middle left"
},
{
"value": "middle_center",
"label": "Middle center"
},
{
"value": "middle_right",
"label": "Middle right"
},
{
"value": "bottom_left",
"label": "Bottom left"
},
{
"value": "bottom_center",
"label": "Bottom center"
},
{
"value": "bottom_right",
"label": "Bottom right"
}
],
"default": "middle_center"
},
{
"type": "richtext",
"id": "sub",
"label": "sub",
"default": "<p>label</p>"
},
{
"type": "range",
"id": "sub_px",
"label": "sub fontSize",
"unit": "px",
"min": 12,
"max": 108,
"step": 1,
"default": 12
},
{
"type": "richtext",
"id": "title",
"label": "Heading",
"default": "<p>Slide title</p>"
},
{
"type": "range",
"id": "title_px",
"label": "title fontSize",
"unit": "px",
"min": 24,
"max": 123,
"step": 1,
"default": 24
},
{
"type": "text",
"id": "button",
"label": "Button"
},
{
"type": "range",
"id": "button_px",
"label": "button fontSize",
"unit": "px",
"min": 12,
"max": 50,
"step": 1,
"default": 12
},
{
"type": "url",
"id": "button_link",
"label": "Button link",
"info": "Leave the "Button text" and "Button 2" settings empty to make the slide fully clickable."
},
{
"type": "header",
"content": "Colors"
},
{
"type": "color",
"id": "text_color",
"label": "Text",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_background",
"label": "Button background",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button text",
"default": "#000000"
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay",
"default": "#000000"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Overlay opacity",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"default": 30
}
]
}
],
"presets": [
{
"name": "index Slideshow",
"blocks": [
{
"type": "image",
"settings": {
"title": "<p>Slide title</p>"
}
},
{
"type": "image",
"settings": {
"title": "<p>Slide title</p>"
}
}
]
}
]
}
{% endschema %}