Skip to content

Commit

Permalink
Added the setting to video + adjusted strategy for modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@tyleralsbury
tyleralsbury committed Jan 13, 2022
1 parent b881d9c commit 600ab4f
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 54 deletions.
3 changes: 3 additions & 0 deletions assets/global.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -441,6 +441,9 @@ class ModalDialog extends HTMLElement {
});
}

}

connectedCallback() {
document.body.appendChild(this);
}

Expand Down
139 changes: 85 additions & 54 deletions sections/video.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,52 @@
}
{%- endstyle -%}

<div class="video-section{% unless section.settings.full_width %} page-width{% endunless %} section-{{ section.id }}-padding">
<div{% if section.settings.full_width %} class="page-width"{% endif %}>
{% unless section.settings.heading == "" %}
<div class="title-wrapper title-wrapper--no-top-margin">
<h2 class="title">{{ section.settings.heading }}</h2>
<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="video-section{% unless section.settings.full_width %} page-width{% endunless %} section-{{ section.id }}-padding">
<div{% if section.settings.full_width %} class="page-width"{% endif %}>
{% unless section.settings.heading == "" %}
<div class="title-wrapper title-wrapper--no-top-margin">
<h2 class="title">{{ section.settings.heading }}</h2>
</div>
{% endunless %}
</div>
<noscript>
<div class="video-section__media"
{% if section.settings.cover_image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.cover_image.aspect_ratio | times: 100 }}%;"{% endif %}
>
<a href="{{ section.settings.video_url }}" class="video-section__poster media media--transparent media--landscape{% if section.settings.cover_image == blank %} video-section__placeholder{% endif %}">
{%- if section.settings.cover_image != blank -%}
<img
srcset="{%- if section.settings.cover_image.width >= 375 -%}{{ section.settings.cover_image | img_url: '375x' }} 375w,{%- endif -%}
{%- if section.settings.cover_image.width >= 750 -%}{{ section.settings.cover_image | img_url: '750x' }} 750w,{%- endif -%}
{%- if section.settings.cover_image.width >= 1100 -%}{{ section.settings.cover_image | img_url: '1100x' }} 1100w,{%- endif -%}
{%- if section.settings.cover_image.width >= 1500 -%}{{ section.settings.cover_image | img_url: '1500x' }} 1500w,{%- endif -%}
{%- if section.settings.cover_image.width >= 1780 -%}{{ section.settings.cover_image | img_url: '1780x' }} 1780w,{%- endif -%}
{%- if section.settings.cover_image.width >= 2000 -%}{{ section.settings.cover_image | img_url: '2000x' }} 2000w,{%- endif -%}
{%- if section.settings.cover_image.width >= 3000 -%}{{ section.settings.cover_image | img_url: '3000x' }} 3000w,{%- endif -%}
{%- if section.settings.cover_image.width >= 3840 -%}{{ section.settings.cover_image | img_url: '3840x' }} 3840w,{%- endif -%}
{{ section.settings.cover_image | img_url: 'master' }} {{ section.settings.cover_image.width }}w"
src="{{ section.settings.cover_image | img_url: '1920x' }}"
sizes="{% if section.settings.full_width %}100vw{% else %}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw{% endif %}"
alt="{{ 'sections.video.load_video' | t: description: section.settings.description | escape }}"
loading="lazy"
width="{{ section.settings.cover_image.width }}"
height="{{ section.settings.cover_image.height }}"
>
{%- else -%}
{{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
</a>
</div>
{% endunless %}
</div>
<noscript>
<div class="video-section__media"
</noscript>
<deferred-media class="video-section__media deferred-media no-js-hidden" data-media-id="{{ section.settings.video_url.id }}"
{% if section.settings.cover_image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.cover_image.aspect_ratio | times: 100 }}%;"{% endif %}
>
<a href="{{ section.settings.video_url }}" class="video-section__poster media media--transparent media--landscape{% if section.settings.cover_image == blank %} video-section__placeholder{% endif %}">
<button
id="Deferred-Poster-Modal-{{ section.settings.video_url.id }}"
class="video-section__poster media deferred-media__poster media--landscape"
type="button"
>
{%- if section.settings.cover_image != blank -%}
<img
srcset="{%- if section.settings.cover_image.width >= 375 -%}{{ section.settings.cover_image | img_url: '375x' }} 375w,{%- endif -%}
Expand All @@ -49,50 +82,19 @@
{%- else -%}
{{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
</a>
</div>
</noscript>
<deferred-media class="video-section__media deferred-media no-js-hidden" data-media-id="{{ section.settings.video_url.id }}"
{% if section.settings.cover_image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.cover_image.aspect_ratio | times: 100 }}%;"{% endif %}
>
<button
id="Deferred-Poster-Modal-{{ section.settings.video_url.id }}"
class="video-section__poster media deferred-media__poster media--landscape"
type="button"
>
{%- if section.settings.cover_image != blank -%}
<img
srcset="{%- if section.settings.cover_image.width >= 375 -%}{{ section.settings.cover_image | img_url: '375x' }} 375w,{%- endif -%}
{%- if section.settings.cover_image.width >= 750 -%}{{ section.settings.cover_image | img_url: '750x' }} 750w,{%- endif -%}
{%- if section.settings.cover_image.width >= 1100 -%}{{ section.settings.cover_image | img_url: '1100x' }} 1100w,{%- endif -%}
{%- if section.settings.cover_image.width >= 1500 -%}{{ section.settings.cover_image | img_url: '1500x' }} 1500w,{%- endif -%}
{%- if section.settings.cover_image.width >= 1780 -%}{{ section.settings.cover_image | img_url: '1780x' }} 1780w,{%- endif -%}
{%- if section.settings.cover_image.width >= 2000 -%}{{ section.settings.cover_image | img_url: '2000x' }} 2000w,{%- endif -%}
{%- if section.settings.cover_image.width >= 3000 -%}{{ section.settings.cover_image | img_url: '3000x' }} 3000w,{%- endif -%}
{%- if section.settings.cover_image.width >= 3840 -%}{{ section.settings.cover_image | img_url: '3840x' }} 3840w,{%- endif -%}
{{ section.settings.cover_image | img_url: 'master' }} {{ section.settings.cover_image.width }}w"
src="{{ section.settings.cover_image | img_url: '1920x' }}"
sizes="{% if section.settings.full_width %}100vw{% else %}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw{% endif %}"
alt="{{ 'sections.video.load_video' | t: description: section.settings.description | escape }}"
loading="lazy"
width="{{ section.settings.cover_image.width }}"
height="{{ section.settings.cover_image.height }}"
>
{%- else -%}
{{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
<span class="deferred-media__poster-button motion-reduce">
{%- render 'icon-play' -%}
</span>
</button>
<template>
{%- if section.settings.video_url.type == 'youtube' -%}
<iframe src="https://www.youtube.com/embed/{{ section.settings.video_url.id }}?enablejsapi=1" class="js-youtube" allow="autoplay; encrypted-media" allowfullscreen title="{{ section.settings.description | escape }}"></iframe>
{%- else -%}
<iframe src="https://player.vimeo.com/video/{{ section.settings.video_url.id }}" class="js-vimeo" allow="autoplay; encrypted-media" allowfullscreen title="{{ section.settings.description | escape }}"></iframe>
{%- endif -%}
</template>
</deferred-media>
<span class="deferred-media__poster-button motion-reduce">
{%- render 'icon-play' -%}
</span>
</button>
<template>
{%- if section.settings.video_url.type == 'youtube' -%}
<iframe src="https://www.youtube.com/embed/{{ section.settings.video_url.id }}?enablejsapi=1" class="js-youtube" allow="autoplay; encrypted-media" allowfullscreen title="{{ section.settings.description | escape }}"></iframe>
{%- else -%}
<iframe src="https://player.vimeo.com/video/{{ section.settings.video_url.id }}" class="js-vimeo" allow="autoplay; encrypted-media" allowfullscreen title="{{ section.settings.description | escape }}"></iframe>
{%- endif -%}
</template>
</deferred-media>
</div>
</div>

{% schema %}
Expand Down Expand Up @@ -136,6 +138,35 @@
"label": "t:sections.video.settings.full_width.label",
"default": false
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label",
"info": "t:sections.all.colors.has_cards_info"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
Expand Down

0 comments on commit 600ab4f

Please sign in to comment.