@total_onion/onion-library 3.2.0 → 3.2.2

package/components/block-scrolling-banner-v3/scrolling-banner-v3.js

@@ -0,0 +1,144 @@
+export default function scrollingbannerv3Js(options = {}) {
+	try {
+		const {block} = options;
+		scrollingbannerJs(block);
+	} catch (error) {
+		console.error(error);
+	}
+}
+
+function scrollingbannerJs(block) {
+	if (!block) {
+		return;
+	}
+
+	const bannerElement =
+		block.querySelector('.scrolling-banner-v3__banner-container') ??
+		block.querySelector('.scrolling-banner-v3');
+
+	if (!bannerElement) {
+		return;
+	}
+	const initializedBanners = new WeakMap();
+
+	try {
+		if (!initializedBanners.has(bannerElement)) {
+			bannerInit(bannerElement, initializedBanners, block);
+		}
+
+		const wrapper = bannerElement.querySelector(
+			'.scrolling-banner-v3__wrapper'
+		);
+
+		if (window.ResizeObserver) {
+			const resizeObserver = new ResizeObserver(() => {
+				resetBanner(bannerElement, initializedBanners);
+				bannerInit(bannerElement, initializedBanners, block);
+			});
+			resizeObserver.observe(wrapper);
+		} else {
+			window.addEventListener('resize', () => {
+				resetBanner(bannerElement, initializedBanners);
+				bannerInit(bannerElement, initializedBanners, block);
+			});
+		}
+	} catch (error) {
+		console.error(error);
+	}
+}
+function bannerInit(bannerElement, initializedBanners, block) {
+	if (initializedBanners.has(bannerElement)) {
+		return;
+	}
+
+	const container = bannerElement.querySelector(
+		'.scrolling-banner-v3__container'
+	);
+	const wrapper = bannerElement.querySelector(
+		'.scrolling-banner-v3__wrapper'
+	);
+	const inner = bannerElement.querySelector('.scrolling-banner-v3__inner');
+	const speed = bannerElement.dataset.speed ?? 3;
+
+	const wrapperWidth = wrapper.clientWidth;
+	const innerContentWidth = inner.clientWidth;
+	if (innerContentWidth == 0) {
+		return;
+	}
+	const multiplier = Number(Math.round(wrapperWidth / innerContentWidth));
+
+	for (let index = 0; index < multiplier; index++) {
+		const newInner = inner.cloneNode(true);
+		newInner.classList.add('clone');
+		container.appendChild(newInner);
+	}
+
+	const containerHeight = inner.clientHeight;
+	wrapper.setAttribute('style', `min-height: ${containerHeight}px`);
+
+	const newTickerContainer = container.cloneNode(true);
+	newTickerContainer.classList.add('clone');
+	wrapper.appendChild(newTickerContainer);
+
+	const animation1 = [
+		{transform: 'translateX(0%)'},
+		{transform: 'translateX(-100%)'}
+	];
+	const animation2 = [
+		{transform: 'translateX(100%)'},
+		{transform: 'translateX(0%)'}
+	];
+
+	const bannerLength = Math.floor(container.getBoundingClientRect().width);
+	const singleBannerCycleTime = (bannerLength * 100) / speed;
+
+	let timing = {
+		duration: singleBannerCycleTime,
+		iterations: Infinity,
+		fill: 'both'
+	};
+	let timing2 = timing;
+	const containers = bannerElement.querySelectorAll(
+		'.scrolling-banner-v3__container'
+	);
+
+	containers[0].style.transform = 'translateX(0%)';
+	containers[1].style.transform = 'translateX(100%)';
+	containers[0].offsetWidth;
+
+	const anim1 = containers[0].animate(animation1, timing);
+	const anim2 = containers[1].animate(animation2, timing2);
+
+	initializedBanners.set(bannerElement, {anim1, anim2});
+	function pauseAnimations() {
+		anim1.pause();
+		anim2.pause();
+	}
+	function resumeAnimations() {
+		anim1.play();
+		anim2.play();
+	}
+	if (bannerElement.querySelector('a')) {
+		block.addEventListener('mouseover', pauseAnimations);
+		block.addEventListener('mouseleave', resumeAnimations);
+	}
+}
+
+function resetBanner(bannerElement, initializedBanners) {
+	const data = initializedBanners.get(bannerElement);
+	if (data) {
+		data.anim1?.cancel();
+		data.anim2?.cancel();
+		initializedBanners.delete(bannerElement);
+	}
+
+	bannerElement
+		.querySelectorAll(
+			'.scrolling-banner-v3__container.clone, .scrolling-banner-v3__inner.clone'
+		)
+		.forEach((el) => el.remove());
+
+	bannerElement
+		.querySelector('.scrolling-banner-v3__wrapper')
+		.removeAttribute('style');
+}

package/components/block-scrolling-banner-v3/scrolling-banner-v3.scss

@@ -0,0 +1,104 @@
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../../breakpoints';
+
+@layer base-styles {
+	.scrolling-banner-v3 {
+		display: flex;
+		overflow-x: hidden;
+		flex-wrap: nowrap;
+		&__banner-container,
+		> .scrolling-banner-v3 {
+			overflow-x: hidden;
+			color: var(--banner-text-colour);
+			font-weight: var(--weight-extra-bold);
+			width: 100%;
+			display: flex;
+			flex-wrap: nowrap;
+			line-height: 1;
+			text-transform: uppercase;
+			height: auto;
+			z-index: 99;
+			place-self: var(--position);
+		}
+
+		&__wrapper {
+			display: grid;
+			grid-template: 'main' / 1fr;
+			width: 100%;
+			height: auto;
+		}
+
+		&__container {
+			width: auto;
+			display: flex;
+			justify-content: flex-start;
+			grid-area: main;
+			position: absolute;
+			left: 0;
+			height: auto;
+		}
+
+		&__inner {
+			width: auto;
+			height: auto;
+			overflow-y: hidden;
+			display: flex;
+			flex-wrap: nowrap;
+			align-items: center;
+			align-self: flex-start;
+			white-space: nowrap;
+			font-size: core-functions-v3.fontSize(var(--text-size-mobile));
+
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				font-size: core-functions-v3.fontSize(
+					var(--text-size-portrait),
+					'portrait'
+				);
+			}
+
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				font-size: core-functions-v3.fontSize(
+					var(--text-size-desktop),
+					'desktop'
+				);
+			}
+		}
+
+		&__separator {
+			margin: auto core-functions-v3.fluidSize(25, 'mobile');
+			position: relative;
+			height: 0.3em;
+			width: 0.3em;
+			display: grid;
+
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				margin: auto core-functions-v3.fluidSize(25, 'portrait');
+			}
+
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				margin: auto core-functions-v3.fluidSize(25, 'desktop');
+			}
+
+			&::before {
+				content: '';
+				background-color: var(--banner-text-colour);
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				display: grid;
+				z-index: 1;
+				place-self: center;
+				border-radius: 50%;
+			}
+		}
+		&__separator--image {
+			width: var(--separator-image-width, 1.5em);
+			height: auto;
+		}
+
+		&--text-shadow {
+			@include core-mixins-v3.textShadow();
+		}
+	}
+}

package/components/block-scrolling-banner-v3/scrolling-banner-v3.twig

@@ -0,0 +1,72 @@
+{% set blockClassName = "scrolling-banner-v3" %}
+{% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields: fields, block: block }, with_context = false) %}
+{% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields: fields, block: block }, with_context = false) %}
+{% set styleEntryPoint = include('entry-points/entry-point-style-v3.twig', { fields: fields, block: block, 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 %}
+
+{{previewEntryPoint}}
+<style>
+	.{{blockClassName}}.{{block.id}}{
+		{{sectionStyles}}
+	}
+</style>
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
+
+	{% set bannerSpeed = fields.scrolling_banner_speed %}
+	{% set separatorAsImage = fields.separator_as_image %}
+	{% set separatorImage = get_image(fields.separator_image) %}
+	{% set separatorImageWidth = '--separator-image-width: ' ~ fields.separator_image_width ~ 'em;' %}
+	{% set positioning = '--position:' ~ fields.positioning|ru ~ ';' %}
+	{% set textSizeDesktop = '--text-size-desktop:' ~ fields.font_size_desktop ~ ';' %}
+	{% set textSizePortrait = '--text-size-portrait:' ~ fields.font_size_portrait ~ ';' %}
+	{% set textSizeMobile = '--text-size-mobile:' ~ fields.font_size_mobile ~ ';' %}
+	{% set textColour = '--banner-text-colour:' ~ fields.text_colour ~ ';' %}
+	{% set bannerTextStyles =  textSizeDesktop ~ textSizePortrait ~ textSizeMobile ~ positioning ~ textColour ~ separatorImageWidth %}
+
+
+	{% if fields.enable_text_shadow %}
+		{% set textShadowClassName = blockClassName ~ "--text-shadow" %}
+		{% set textShadowStyle = "--text-shadow-offset-x:" ~ (fields.text_shadow_horizontal_offset|default(0)) ~ "; --text-shadow-offset-y: " ~ (fields.text_shadow_vertical_offset|default(0)) ~ "; --text-shadow-blur: " ~ (fields.text_shadow_blur|default(0)) ~ "; --text-shadow-colour: " ~ (fields.text_shadow_colour|default("#000000")) ~ ";" %}
+	{% endif %}
+
+	{% if fields.enable_scrolling_banner %}
+		<style>
+			.{{blockClassName}}__banner-container.{{block.id}}{
+				{{bannerTextStyles}}
+				{{textShadowStyle}}
+			}
+		</style>
+		<div class="{{blockClassName}}__banner-container {{block.id}}" data-speed="{{bannerSpeed}}">
+			<div class="{{blockClassName}}__wrapper">
+				<div class="{{blockClassName}}__container">
+					<div class="{{blockClassName}}__inner">
+						{% for item in fields.scrolling_banner_texts %}
+							{% if item.single_separator_image != null %}
+								{% set singleSeparatorImage = get_image(item.single_separator_image) %}
+								{% set singleSeparatorImageWidth = '--separator-image-width: ' ~ item.single_separator_image_width ~ 'em;' %}
+								<style>
+									.{{blockClassName}}__separator--image-single-{{loop.index}}{
+										{{singleSeparatorImageWidth}}
+									}
+								</style>
+								<img class="{{blockClassName}}__separator {{blockClassName}}__separator--image {{blockClassName}}__separator--image-single-{{loop.index}}" src="{{gt_image_mainsrc(singleSeparatorImage)}}">
+							{% elseif separatorAsImage != null %}
+								<img class="{{blockClassName}}__separator {{blockClassName}}__separator--image" src="{{gt_image_mainsrc(separatorImage)}}">
+							{% else %}
+								<span class="{{blockClassName}}__separator"></span>
+							{% endif %}
+							{% set elementType = item.text_link ? 'a href="' ~ item.text_link.url ~ '"' : 'span' %}
+							<{{elementType}} class="{{blockClassName}}__text {{textShadowClassName}}">{{item.scrolling_banner_text}}</{{elementType}}>
+						{% endfor %}
+					</div>
+				</div>
+			</div>
+		</div>
+	{% endif %}
+	{% if fields.animations.enable_animations %}
+		{{ include('components/animations-style-v3.twig', { fields, block, blockClassName }, with_context = false) }}
+	{% endif %}
+
+</section>