@total_onion/onion-library 1.0.0

package/components/block-animated-sections/animated-sections.twig

@@ -0,0 +1,324 @@
+{# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
+{% set blockClassName = 'animated-sections' %}
+{% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields, block }, with_context = false) %}
+{% set htmlEntryPoint = include('entry-points/entry-point-html.twig', { fields, block, blockClassName, options, environment, is_preview, nav_menus }, with_context = false) %}
+{% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields, block }, with_context = false) %}
+{% set styleEntryPoint = include('entry-points/entry-point-style.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
+{% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
+
+
+{% set sectionStyles =  styleEntryPoint %}
+
+{% set groups = [] %}
+{% for group in fields.asset_groups %}
+	{% set grouping = [] %}
+	{% set grouping = grouping|merge({  'group_title' : group.group_name|replace({' ':'-'})|lower  }) %}
+	{% set grouping = grouping|merge({  'group_assets' : group.group_assets|lower|replace({' ':'-'})|split(',')  }) %}
+	{% set groups = groups|merge([grouping]) %}
+{% endfor %}
+
+{% set timeline_ids_to_hide = [] %}
+{% for slide in fields.slides_to_hide_from_navigation %}
+	{% set timeline_ids_to_hide = timeline_ids_to_hide|merge([slide.timeline_id]) %}
+{% endfor %}
+
+{% set slides_to_have_back_button = [] %}
+{% for slide in fields.slides_to_have_back_button %}
+	{% set slides_to_have_back_button = slides_to_have_back_button|merge([slide.timeline_id]) %}
+{% endfor %}
+
+{% set activeSlides = [] %}
+{% for slide in fields.swiper_active_slides %}
+	{% set activeSlides = activeSlides|merge([slide.slide_id]) %}
+{% endfor %}
+
+
+{% set fullscreen_lock = fields.enable_fullscreen %}
+
+<section data-eager="true" {{ block.anchor ? 'id=' ~ block.anchor : '' }} class='{{ blockClassName }} {{block.className}} {{ classNameEntryPoint }} lazy-fade {{ block.id }}' {{ dataAttributeEntryPoint }} style='--section-background-url: url({{fields.background_image.url}});--section-background-colour: {{fields.background_colour}};--scale-factor: 1; --figma-desktop-height:{{ fields.desktop_figma_screen_settings.height }}; --figma-desktop-width: {{ fields.desktop_figma_screen_settings.width }}; --figma-mobile-height:{{ fields.mobile_figma_screen_settings.height }}; --figma-mobile-width: {{ fields.mobile_figma_screen_settings.width }}; {{ sectionStyles }}' data-assetkey='animated-sections' data-desktop-height='{{ fields.desktop_figma_screen_settings.height }}' data-desktop-width='{{ fields.desktop_figma_screen_settings.width }}' data-desktop-offset='{{ fields.desktop_figma_screen_settings.offset }}' data-mobile-height='{{ fields.mobile_figma_screen_settings.height }}' data-mobile-width='{{ fields.mobile_figma_screen_settings.width }}' data-mobile-offset='{{ fields.mobile_figma_screen_settings.offset }}' data-loop-back-slide='{{ fields.final_slide_loop_back_location }}' data-hide-from-nav-slides='{{timeline_ids_to_hide|json_encode_2()}}' data-slides-to-have-back-button='{{slides_to_have_back_button|json_encode_2() }}' data-fullscreen='{{fullscreen_lock}}' data-enable-scroll-out="{{fields.enable_scroll_out}}" data-scroll-out-delay="{{fields.scroll_out_delay}}" data-transform-origin="{{fields.animation_transform_origin}}" data-swiper-enabled="{{(fields.enable_swiper == true) ? 'true' : 'false'}}">
+
+
+	<div class="{{blockClassName}}__transition-overlay"></div>
+
+	<div class='{{blockClassName}}__progress-inner'>
+		<div class='{{blockClassName}}__progress-bar'></div>
+	</div>
+
+	<div class='{{blockClassName}}__content-wrapper'>
+		{% for content in fields.content %}
+			{% set contentActiveSlides = [] %}
+			{% for slide in content.active_slides %}
+				{% set contentActiveSlides = contentActiveSlides|merge([slide.slide_id]) %}
+			{% endfor %}
+
+			<div class='{{blockClassName}}__content-element {{blockClassName}}__content-element-{{ content.slide_type|ru }} {{(content.slide_from_right ? blockClassName ~ '__content-element--from-right' : '' )}}' data-slide-id='{{ contentActiveSlides|json_encode_2() }}' data-slide-delay='{{content.slide_delay}}'>
+
+
+				<div class='{{blockClassName}}__content-overlay {{blockClassName}}__content-overlay-{{ content.slide_type|ru }}'></div>
+				<div class='{{blockClassName}}__content-inner {{blockClassName}}__content-inner-{{ content.slide_type|ru }}'>
+					{% if content.slide_type|ru == 'intro-slide' %}
+						{% if content.enable_eyebrow_heading %}
+							<h3 class='{{blockClassName}}__content-eyebrow {{blockClassName}}__content-eyebrow-{{ content.slide_type|ru }}'>{{ content.eyebrow_heading }}</h3>
+						{% endif %}
+						{% if content.enable_heading %}
+							<h2 class='{{blockClassName}}__content-title {{blockClassName}}__content-title-{{ content.slide_type|ru }}'>{{ content.heading }}</h2>
+						{% endif %}
+						{% if content.enable_slide_wysiwyg %}
+							<div class='{{blockClassName}}__content-text {{blockClassName}}__content-text-{{ content.slide_type|ru }}'>{{ content.slide_text }}</div>
+						{% endif %}
+						{% if content.enable_slide_button %}
+							<div class='{{blockClassName}}__content-button {{blockClassName}}__content-button-{{ content.slide_type|ru }}' data-content-button='{{ content.slide_link|ru }}'>{{ content.slide_button_label }}</div>
+						{% endif %}
+					{% elseif content.slide_type|ru == 'info-slide' %}
+						{% if content.enable_info_page_svgs %}
+							{% for infoImage in content.info_page_svgs %}
+								<img class='{{blockClassName}}__content-text--icon {{blockClassName}}__content-text-{{ content.slide_type|ru }}--icon' src="{{get_image(infoImage.svg).src }}" alt="">
+							{% endfor %}
+						{% endif %}
+						<div class='{{blockClassName}}__content-text {{blockClassName}}__content-text-{{ content.slide_type|ru }}'>{{ content.slide_text }}</div>
+					{% elseif content.slide_type|ru == 'inline-slide' %}
+						<div class='{{blockClassName}}__content-text {{blockClassName}}__content-text-{{ content.slide_type|ru }}'>{{ content.slide_text }}</div>
+					{% elseif content.slide_type|ru == 'content-slide' %}
+
+						<h2 class='{{blockClassName}}__content-title {{blockClassName}}__content-title-{{ content.slide_type|ru }}'>{{ content.heading }}</h2>
+						<div class='{{blockClassName}}__content-text {{blockClassName}}__content-text-{{ content.slide_type|ru }}'>{{ content.slide_text }}</div>
+						{% if content.button_type|ru == 'page' %}
+							{% if content.slide_button_link %}
+								<a target='{{ content.slide_button_link.target }}' href='{{ content.slide_button_link.url }}' class='{{blockClassName}}__content-button'>-
+									{{ content.slide_button_label }}</a>
+							{% endif %}
+						{% elseif content.button_type|ru == 'slide' %}
+							<div class='{{blockClassName}}__content-button' data-content-button='{{ content.slide_link|ru }}'>-
+								{{ content.slide_button_label }}</div>
+						{% endif %}
+					{% endif %}
+				</div>
+			</div>
+		{% endfor %}
+	</div>
+
+	{% if fields.enable_swiper == true %}
+
+		<div class='{{blockClassName}}__swiper-content-wrapper' data-swiper-active-slides='{{activeSlides|json_encode_2()}}' data-swiper-delay='{{fields.swiper_slide_in_delay}}'>
+			<div class='{{blockClassName}}__swiper-content-overlay'></div>
+			<div class='{{blockClassName}}__swiper-container swiper-container'>
+				<div class='{{blockClassName}}__swiper-wrapper swiper-wrapper'>
+					{% for content in fields.swiper_content %}
+						<div class='{{blockClassName}}__swiper-slide swiper-slide' data-color='{{content.slide_colour}}' data-slide-id='{{content.slide_id}}' data-swiper-slide-id="{{loop.index}}">
+							<div class='{{blockClassName}}__swiper-slide-inner'>
+								<h3 class='{{blockClassName}}__slide-eyebrow-text'>{{content.slide_eyebrow_title}}</h3>
+								<h1 class='{{blockClassName}}__slide-title'>{{content.slide_title}}</h1>
+								<div class='{{blockClassName}}__slide-wysiwyg'>{{content.slide_text}}</div>
+							</div>
+						</div>
+					{% endfor %}
+				</div>
+			</div>
+			<div class='{{blockClassName}}__swiper-content-pagination swiper-pagination'></div>
+		</div>
+
+
+	{% endif %}
+
+
+	<div class='{{blockClassName}}__canvas {{blockClassName}}__canvas--{{fullscreen_lock ? 'fullscreen-lock' : 'fullscreen-unlocked' }}'>
+		<div class='{{blockClassName}}__canvas-inner {{blockClassName}}__canvas-inner--{{fullscreen_lock ? 'fullscreen-lock' : 'fullscreen-unlocked' }}'>
+
+			{% set reverse_urls = [] %}
+			{% for item in fields.desktop_foreground_assets_reverse %}
+				{% set file_title = item.title %}
+				{% set file_src = item.url %}
+				{% set reverse_urls = reverse_urls|merge([{ 'title': file_title, 'src': file_src }]) %}
+			{% endfor %}
+
+			{% set reverse_urls_safari = [] %}
+			{% for item in fields.desktop_foreground_assets_reverse_safari %}
+
+				{% set file_title_safari = item.title %}
+				{% set file_src_safari = item.url %}
+				{% set reverse_urls_safari = reverse_urls_safari|merge([{ 'title': file_title_safari, 'src': file_src_safari }]) %}
+			{% endfor %}
+
+			{% set mobile_reverse_urls = [] %}
+			{% for item in fields.mobile_foreground_assets_reverse %}
+				{% set file_title = item.title %}
+				{% set file_src = item.url %}
+				{% set mobile_reverse_urls = mobile_reverse_urls|merge([{ 'title': file_title, 'src': file_src }]) %}
+
+			{% endfor %}
+
+			{% set mobile_reverse_urls_safari = [] %}
+			{% for item in fields.mobile_foreground_assets_reverse_safari %}
+
+				{% set file_title_safari = item.title %}
+				{% set file_src_safari = item.url %}
+				{% set mobile_reverse_urls_safari = mobile_reverse_urls_safari|merge([{ 'title': file_title_safari, 'src': file_src_safari }]) %}
+
+			{% endfor %}
+
+			{% for key, desktop_background in fields.desktop_background_assets %}
+				{% set image = get_attachment(desktop_background) %}
+
+				{% set image_meta = function('wp_get_attachment_metadata', image.id) %}
+				{% set base_title = image.title|replace({' ':'-'})|lower %}
+				{% set safari_image = get_image(fields.desktop_background_assets_safari[key]) %}
+				{% set safari_video_url = safari_image.src %}
+
+				{% set reverse_video_url = '' %}
+				{% set reverse_video_url_safari = '' %}
+				{% for reverse_video in reverse_urls %}
+					{% if reverse_video.title|replace({'_reverse': ''})|replace({' ':'-'})|lower == base_title %}
+						{% set reverse_video_url = reverse_video.src %}
+					{% endif %}
+				{% endfor %}
+
+				{% for reverse_video_safari in reverse_urls_safari %}
+					{% if reverse_video_safari.title|replace({'_reverse': ''})|replace({' ':'-'})|lower == base_title %}
+						{% set reverse_video_url_safari = reverse_video_safari.src %}
+					{% endif %}
+				{% endfor %}
+
+
+				{% if (image.post_mime_type != 'video/mp4') and (image.post_mime_type != 'video/webm') %}
+					<img class='{{blockClassName}}__background-element {{blockClassName}}__background-element--desktop {{blockClassName}}__background-element--{{fields.animation_transform_origin|ru}}' data-asset-name='{{ base_title }}' loading='lazy' src='{{ image.src }}' alt='{{ image.alt }}' width='{{image.width}}' height='{{image.height}}'>
+
+				{% else %}
+					<video muted playsinline preload='auto' width='{{image_meta.width}}' height='{{image_meta.height}}' class='{{blockClassName}}__background-element {{blockClassName}}__background-element--desktop video' data-original-source='{{ image.src }}' data-safari-source='{{ safari_video_url }}' data-reverse-source='{{ reverse_video_url }}' data-reverse-source-safari='{{ reverse_video_url_safari }}' data-asset-name='{{ base_title }}'></video>
+				{% endif %}
+			{% endfor %}
+			{% for key, desktop_foreground in fields.desktop_foreground_assets %}
+				{% set image = get_attachment(desktop_foreground) %}
+
+				{% set image_meta = function('wp_get_attachment_metadata', image.id) %}
+				{% set base_title = image.title|replace({' ':'-'})|lower %}
+				{% set safari_image = get_image(fields.desktop_foreground_assets_safari[key]) %}
+				{% set safari_video_url = safari_image.src %}
+
+				{% set reverse_video_url = '' %}
+				{% set reverse_video_url_safari = '' %}
+				{% for reverse_video in reverse_urls %}
+					{% if reverse_video.title|replace({'_reverse': ''})|replace({' ':'-'})|lower == base_title %}
+						{% set reverse_video_url = reverse_video.src %}
+					{% endif %}
+				{% endfor %}
+
+				{% for reverse_video_safari in reverse_urls_safari %}
+					{% if reverse_video_safari.title|replace({'_reverse': ''})|replace({' ':'-'})|lower == base_title %}
+						{% set reverse_video_url_safari = reverse_video_safari.src %}
+					{% endif %}
+				{% endfor %}
+
+
+				{% if (image.post_mime_type != 'video/mp4') and (image.post_mime_type != 'video/webm') %}
+					<img class='{{blockClassName}}__foreground-element {{blockClassName}}__foreground-element--desktop {{blockClassName}}__foreground-element--{{fields.animation_transform_origin|ru}}' data-asset-name='{{ base_title }}' loading='lazy' src='{{ image.src }}' alt='{{ image.alt }}' width='{{image.width}}' height='{{image.height}}'>
+
+
+				{% else %}
+					<video muted playsinline preload='auto' width='{{image_meta.width}}' height='{{image_meta.height}}' class='{{blockClassName}}__foreground-element {{blockClassName}}__foreground-element--desktop video' data-original-source='{{ image.src }}' data-safari-source='{{ safari_video_url }}' data-reverse-source='{{ reverse_video_url }}' data-reverse-source-safari='{{ reverse_video_url_safari }}' data-asset-name='{{ base_title }}'></video>
+				{% endif %}
+			{% endfor %}
+
+			{% for key, mobile_foreground in fields.mobile_foreground_assets %}
+				{% set image = get_image(mobile_foreground) %}
+				{% set image_meta = function('wp_get_attachment_metadata', image.id) %}
+				{% set base_title = image.title|replace({' ':'-'})|lower %}
+				{% set base_title = base_title|replace({'_mobile': ''}) %}
+
+				{% set safari_image = get_image(fields.mobile_foreground_assets_safari[key]) %}
+				{% set safari_video_url = safari_image.src %}
+
+				{% set reverse_video_url = '' %}
+				{% set reverse_video_url_safari = '' %}
+				{% for reverse_video in mobile_reverse_urls %}
+					{% if reverse_video.title|replace({'_reverse_mobile': ''})|replace({' ':'-'})|lower == base_title %}
+						{% set reverse_video_url = reverse_video.src %}
+					{% endif %}
+				{% endfor %}
+
+				{% for reverse_video_safari in mobile_reverse_urls_safari %}
+					{% if reverse_video_safari.title|replace({'_reverse_mobile': ''})|replace({' ':'-'})|lower == base_title %}
+						{% set reverse_video_url_safari = reverse_video_safari.src %}
+					{% endif %}
+				{% endfor %}
+				{% if (image.post_mime_type != 'video/mp4') and (image.post_mime_type != 'video/webm') %}
+					<img class='{{blockClassName}}__foreground-element {{blockClassName}}__foreground-element--mobile' data-asset-name='{{ base_title }}' loading='lazy' src='{{ image.src }}' alt='{{ image.alt }}' style='width: {{image.width}}; height: {{image.height}};'>
+				{% else %}
+					<video muted playsinline preload='auto' width='{{image_meta.width}}' height='{{image_meta.height}}' class='{{blockClassName}}__foreground-element {{blockClassName}}__foreground-element--mobile video' data-original-source='{{ image.src }}' data-safari-source='{{ safari_video_url }}' data-reverse-source='{{ reverse_video_url }}' data-reverse-source-safari='{{ reverse_video_url_safari }}' data-asset-name='{{ base_title }}'></video>
+
+				{% endif %}
+			{% endfor %}
+
+		</div>
+	</div>
+
+	<div class='{{blockClassName}}__steps-wrapper'>
+		{% for desktop_timelines in fields.desktop_timelines %}
+			{% set animations = [] %}
+			{% for tween in desktop_timelines.tweens %}
+				{% set animation = [] %}
+				{% set animation = animation|merge({ 'name' : tween.link_asset_name|replace({' ':'-'})|lower }) %}
+				{% set animation = animation|merge({ 'x' : tween.position_x }) %}
+				{% set animation = animation|merge({ 'y' : tween.position_y }) %}
+				{% set animation = animation|merge({ 'width' : tween.width }) %}
+				{% set animation = animation|merge({ 'height' : tween.height }) %}
+				{% set animation = animation|merge({ 'opacity' : tween.opacity }) %}
+				{% set animation = animation|merge({ 'duration' : tween.duration }) %}
+				{% set animation = animation|merge({ 'autoplay' : tween.autoplay}) %}
+				{% set animation = animation|merge({ 'loop' : tween.loop}) %}
+				{% set animation = animation|merge({ 'startpos' : tween.video_start_time}) %}
+				{% set animation = animation|merge({ 'endpos' : tween.video_end_time}) %}
+				{% set animation = animation|merge({ 'playbackSpeed' : 1}) %}
+
+				{% set animations = animations|merge([animation]) %}
+			{% endfor %}
+			<div class='{{blockClassName}}__timeline--desktop' data-enable-back='{{ desktop_timelines.enable_back_button }}' data-step-title='{{ desktop_timelines.timeline_title }}' data-animation='{{ animations|json_encode_2() }}' data-step-id='{{ loop.index }}'></div>
+		{% endfor %}
+
+		{% for tablet_mobile_timelines in fields.tablet_mobile_timelines %}
+			{% set animations = [] %}
+			{% for tween in tablet_mobile_timelines.tweens %}
+				{% set animation = [] %}
+
+				{% set animation = animation|merge({ 'name' : tween.link_asset_name|replace({' ':'-'})|lower }) %}
+				{% set animation = animation|merge({ 'x' : tween.position_x }) %}
+				{% set animation = animation|merge({ 'y' : tween.position_y }) %}
+				{% set animation = animation|merge({ 'width' : tween.width }) %}
+				{% set animation = animation|merge({ 'height' : tween.height }) %}
+				{% set animation = animation|merge({ 'opacity' : tween.opacity }) %}
+				{% set animation = animation|merge({ 'duration' : tween.duration }) %}
+				{% set animation = animation|merge({ 'autoplay' : tween.autoplay}) %}
+				{% set animation = animation|merge({ 'loop' : tween.loop}) %}
+				{% set animation = animation|merge({ 'startpos' : tween.video_start_time}) %}
+				{% set animation = animation|merge({ 'endpos' : tween.video_end_time}) %}
+				{% set animation = animation|merge({ 'playbackSpeed' : 1}) %}
+
+
+				{% set animations = animations|merge([animation]) %}
+			{% endfor %}
+			<div class='{{blockClassName}}__timeline--tablet-mobile' data-step-title='{{ tablet_mobile_timelines.timeline_title }}' data-step-title='{{ desktop_timelines.timeline_title }}' data-animation='{{ animations|json_encode_2() }}' data-step-id='{{ loop.index }}'></div>
+		{% endfor %}
+	</div>
+
+	<div class='{{blockClassName}}__ui-element-back-button' data-back-button='{{ fields.back_button_location }}'>Back</div>
+	<div class='{{blockClassName}}__ui-element-down-arrow'></div>
+	<div class='{{blockClassName}}__ui-element-timeline-nav-wrapper'>
+		<div class='{{blockClassName}}__ui-element-timeline-nav'>
+			<div class='{{blockClassName}}__ui-element-timeline-dots-container'>
+				{% for desktop_timelines in fields.desktop_timelines %}
+					<div class='{{blockClassName}}__ui-element-timeline-dot' data-step='{{ loop.index }}'></div>
+				{% endfor %}
+			</div>
+			<div class='{{blockClassName}}__ui-element-timeline-names-container'>
+				{% for desktop_timelines in fields.desktop_timelines %}
+					<div class='{{blockClassName}}__ui-element-timeline-name' {% if loop.index > 3 %} style='display: none' {% endif %} data-step='{{ loop.index }}'>
+						<div class='{{blockClassName}}__ui-element-timeline-name--title'>{{ desktop_timelines.timeline_title }}</div>
+						<i class='{{blockClassName}}__ui-element-timeline-name--icon'></i>
+					</div>
+				{% endfor %}
+			</div>
+		</div>
+	</div>
+
+
+	{{ htmlEntryPoint }}
+</section>