@total_onion/onion-library 1.0.3 → 1.0.5

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

@@ -1,324 +0,0 @@
-{# 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>