@total_onion/onion-library 3.0.49 → 3.2.0

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

@@ -1,144 +0,0 @@
-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

@@ -1,104 +0,0 @@
-@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

@@ -1,72 +0,0 @@
-{% 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>