@total_onion/onion-library 3.0.19 → 3.0.22

package/components/block-video-content-v3/video-content-v3.twig

@@ -12,97 +12,13 @@
 		{{sectionStyles}}
 	}
 </style>
-<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{classNameEntryPoint}} lazy-fade {{block.id}}" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
-	{% set videoEnabled = fields.enable_video %}
-	{% set renderDynamic = fields.child_pattern_settings.render_dynamic|default(0) %}
-	{% set videoPlayingZindexClass = fields.video_playing_high_z_index ? 'video-playing--high-z-index' : '' %}
-	{% if videoEnabled %}
-		{% set videoType = fields.video_type|ru %}
-		{% set youtubeEmbed = fields.youtube_embed|default(false) %}
-		{% if 'data-src="' in youtubeEmbed %}
-			{% set youtubeDesktopParts = youtubeEmbed|split('data-src="') %}
-		{% elseif 'src="' in youtubeEmbed %}
-			{% set youtubeDesktopParts = youtubeEmbed|split('src="') %}
-		{% endif %}
-		{% set youtubeDesktopUrl = youtubeDesktopParts[1]|split('"')[0] %}
-		{% set youtubeDesktopId = youtubeDesktopUrl|split('/embed/')|last|split('?')|first %}
-		{% set youtubeMobile = fields.youtube_mobile %}
-		{% if 'data-src="' in youtubeMobile %}
-			{% set youtubeMobileParts = youtubeMobile|split('data-src="') %}
-		{% elseif 'src="' in youtubeMobile %}
-			{% set youtubeMobileParts = youtubeMobile|split('src="') %}
-		{% endif %}
-		{% set youtubeMobileUrl = youtubeMobileParts[1]|split('"')[0] %}
-		{% set youtubeMobileId = youtubeMobileUrl|split('/embed/')|last|split('?')|first|default(youtubeDesktopId) %}
-		{% set vimeoEmbed = fields.vimeo_embed|default(false) %}
-		{% if 'data-src="' in vimeoEmbed %}
-			{% set vimeoDesktopParts = vimeoEmbed|split('data-src="') %}
-		{% elseif 'src="' in vimeoEmbed %}
-			{% set vimeoDesktopParts = vimeoEmbed|split('src="') %}
-		{% endif %}
-		{% set vimeoDesktopUrl = vimeoDesktopParts[1]|split('"')[0] %}
-		{% set vimeoDesktopId = vimeoDesktopUrl|split('/video/')|last|split('?')|first %}
-		{% set vimeoMobile = fields.vimeo_mobile %}
-		{% if 'data-src="' in vimeoMobile %}
-			{% set vimeoMobileParts = vimeoMobile|split('data-src="') %}
-		{% elseif 'src="' in vimeoMobile %}
-			{% set vimeoMobileParts = vimeoMobile|split('src="') %}
-		{% endif %}
-		{% set vimeoMobileUrl = vimeoMobileParts[1]|split('"')[0] %}
-		{% set vimeoMobileId = vimeoMobileUrl|split('/video/')|last|split('?')|first|default(vimeoDesktopId) %}
-		{% set videoDesktop = fields.video_desktop|default(false) %}
-		{% set videoMobile = fields.video_mobile|default(false) %}
-		{% set autoplayVideo = fields.autoplay %}
-		{% set autoplayVideoMobile = fields.mobile_autoplay %}
-		{% if autoplayVideo == false %}
-			{% set autoplayVideo = 0 %}
-			{% set autoplayVideoMobile = 0 %}
-		{% endif %}
-		{% if autoplayVideoMobile == false and autoplayVideoMobile is not null %}
-			{% set autoplayVideoMobile = 0 %}
-		{% endif %}
-		{% if autoplayVideo == true and autoplayVideoMobile is null %}
-			{% set autoplayVideoMobile = 1 %}
-		{% endif %}
-		{% set fullscreen = fields.fullscreen %}
-		{% set loopVideo = fields.loop %}
-		{% set controls = fields.controls ? 1 : 0 %}
-		{% set modal = fields.modal %}
-		{% set playsInModal = fields.modal %}
-		{% set muted = fields.muted %}
-		{% set lockVideoAspectToImage = fields.lock_video_aspect_to_image ? 'lock-video-aspect-to-image' : '' %}
-		{% set setVideoToCover = fields.set_video_to_cover ? 'set-video-to-cover' : '' %}
-		{% set videoId = block.videoIdPrefix ~ fields.video_trigger_id %}
-		{% set captionsEnabled = fields.enable_captions|default(false) %}
-		{% set captions = fields.captions %}
-		{% set captionsFile = fields.captions.0.captions_file %}
-		{% set noAudioCaptions = fields.enable_no_audio_captions %}
+<section
+	{{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{classNameEntryPoint}} lazy-fade {{block.id}}" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
 
-		<div data-videoid="{{videoId}}" data-datalayerpush="{{fields.data_layer_push}}" data-videocontainerid="{{fields.video_trigger_id}}" data-desktopvideo="{{gt_video_mainsrc(videoDesktop['url'])}}" data-youtubedesktop="{{youtubeDesktopId}}" data-youtubemobile="{{youtubeMobileId}}" data-vimeo-desktop-url="{{vimeoDesktopUrl}}" data-vimeo-mobile-url="{{vimeoMobileUrl}}" data-vimeodesktopid="{{vimeoDesktopId}}" data-vimeomobileid="{{vimeoMobileId}}" data-mobilevideo="{{gt_video_mainsrc(videoMobile['url'])}}" class="{{blockClassName}}__video-container cblvc-video-container {{lockVideoAspectToImage}} {{videoPlayingZindexClass}} {{setVideoToCover}}" data-videotype="{{videoType}}" data-loop="{{loopVideo}}" data-modal="{{modal}}" data-controls="{{controls}}" data-autoplay="{{autoplayVideo}}" data-autoplay-mobile="{{autoplayVideoMobile}}" data-fullscreen="{{fullscreen}}" data-muted="{{muted}}" data-videoenabled="{{videoEnabled}}" data-pattern-dynamic="1">
-			<div class="{{blockClassName}}__video-inner-container cblvc-video-container__video-inner-container" data-pattern-type>
-				{% if videoType == 'upload' %}
-					<video class="{{blockClassName}}__video-player cblvc-video-container__video-player" {{muted ? 'muted' : ''}} playsinline width='{{videoDesktop.width}}' height='{{videoDesktop.height}}'>
-						<source src="" type="video/mp4">
-						{% if captionsEnabled == true and noAudioCaptions %}
-							<track src={{ asset('no-audio.vtt') }} srclang="en" label="english" kind="captions"/>
+	<!--pattern-replace-start:component/video-component-v3 -->
+	{{include('components/video-component-v3.twig',{ fields, block, blockClassName }, with_context = false)}}
+	<!--pattern-replace-end:component/video-component-v3 -->
 
-						{% elseif captionsEnabled == true and not noAudioCaptions and captions is not empty %}
-							{% for caption in captions %}
-								<track src="{{ caption.captions_file.url }}" srclang="{{ caption.language_code }}" label="{{ caption.caption_label }}" kind="captions"/>
-							{% endfor %}
-						{% endif %}
-
-					</video>
-				{% endif %}
-				{% if videoType == 'youtube' %}
-					<div id="yt-{{videoId}}"></div>
-				{% endif %}
-				{% if videoType == 'vimeo' %}
-					<div id="vimeo-{{videoId}}-{{vimeoDesktopId}}" style="width: 100%"></div>
-				{% endif %}
-			</div>
-		</div>
-	{% endif %}
 	{% if fields.animations.enable_animations %}
 		{{ include('components/animations-style-v3.twig', { fields, block, blockClassName }, with_context = false) }}
 	{% endif %}

package/components/component-video-component-v3/video-component-v3.twig

@@ -57,13 +57,13 @@
 	{% set muted = fields.muted %}
 	{% set lockVideoAspectToImage = fields.lock_video_aspect_to_image ? 'lock-video-aspect-to-image' : '' %}
 	{% set setVideoToCover = fields.set_video_to_cover ? 'set-video-to-cover' : '' %}
+	{% set videoId = block.videoIdPrefix ~ fields.video_trigger_id %}
 	{% set captionsEnabled = fields.enable_captions|default(false) %}
 	{% set captions = fields.captions %}
-	{% set videoId = block.videoIdPrefix ~ fields.video_trigger_id %}
 	{% set captionsFile = fields.captions.0.captions_file %}
 	{% set noAudioCaptions = fields.enable_no_audio_captions %}
 
-	<div data-videoid="{{videoId}}" data-videocontainerid="{{fields.video_trigger_id}}" data-desktopvideo="{{gt_video_mainsrc(videoDesktop['url'])}}" data-youtubedesktop="{{youtubeDesktopId}}" data-youtubemobile="{{youtubeMobileId}}" data-vimeo-desktop-url="{{vimeoDesktopUrl}}" data-vimeo-mobile-url="{{vimeoMobileUrl}}" data-vimeodesktopid="{{vimeoDesktopId}}" data-vimeomobileid="{{vimeoMobileId}}" data-mobilevideo="{{gt_video_mainsrc(videoMobile['url'])}}" class="{{blockClassName}}__video-container cblvc-video-container {{lockVideoAspectToImage}} {{videoPlayingZindexClass}} {{setVideoToCover}}" data-videotype="{{videoType}}" data-loop="{{loopVideo}}" data-modal="{{modal}}" data-controls="{{controls}}" data-autoplay="{{autoplayVideo}}" data-autoplay-mobile="{{autoplayVideoMobile}}" data-fullscreen="{{fullscreen}}" data-muted="{{muted}}" data-videoenabled="{{videoEnabled}}" data-pattern-dynamic="1">
+	<div data-videoid="{{videoId}}" data-datalayerpush="{{fields.data_layer_push}}" data-videocontainerid="{{fields.video_trigger_id}}" data-desktopvideo="{{gt_video_mainsrc(videoDesktop['url'])}}" data-youtubedesktop="{{youtubeDesktopId}}" data-youtubemobile="{{youtubeMobileId}}" data-vimeo-desktop-url="{{vimeoDesktopUrl}}" data-vimeo-mobile-url="{{vimeoMobileUrl}}" data-vimeodesktopid="{{vimeoDesktopId}}" data-vimeomobileid="{{vimeoMobileId}}" data-mobilevideo="{{gt_video_mainsrc(videoMobile['url'])}}" class="{{blockClassName}}__video-container cblvc-video-container {{lockVideoAspectToImage}} {{videoPlayingZindexClass}} {{setVideoToCover}}" data-videotype="{{videoType}}" data-loop="{{loopVideo}}" data-modal="{{modal}}" data-controls="{{controls}}" data-autoplay="{{autoplayVideo}}" data-autoplay-mobile="{{autoplayVideoMobile}}" data-fullscreen="{{fullscreen}}" data-muted="{{muted}}" data-videoenabled="{{videoEnabled}}" data-pattern-dynamic="1">
 		<div class="{{blockClassName}}__video-inner-container cblvc-video-container__video-inner-container" data-pattern-type>
 			{% if videoType == 'upload' %}
 				<video class="{{blockClassName}}__video-player cblvc-video-container__video-player" {{muted ? 'muted' : ''}} playsinline width='{{videoDesktop.width}}' height='{{videoDesktop.height}}'>

package/duplicateBlock.js

@@ -1,27 +1,30 @@
 require('dotenv').config();
 const fs = require('fs');
-const { globSync } = require('glob');
+const path = require('path');
+const {globSync} = require('glob');
 const yargs = require('yargs');
 const compressing = require('compressing');
-const { log } = require('console');
 const templateOptions = yargs.argv._;
 const themePath =
 	process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
 const srcPathJs = `${themePath}/assets/js/blocks`;
 const srcPathScss = `${themePath}/assets/scss/blocks`;
 const srcPathTwig = `${themePath}/views/blocks`;
-const srcPathPhp = `${themePath}/inc/acf-blocks`;
-const srcPathVue = `${themePath}/assets/vue/blocks`;
-const destPath = '../../../../exported-blocks';
+const srcPathBlockJson = `${themePath}/inc/acf-blocks`;
+// exported-blocks lives at the project root, relative to cwd (the theme dir)
+const destPath =
+	process.env.EXPORTED_BLOCKS_PATH ||
+	path.resolve(process.cwd(), '../../../../exported-blocks');
 const newName = templateOptions[1];
 
-const exisitingBlockNames = globSync(`${themePath}/assets/js/blocks/*.js`)
-	.map((path) => {
-		const assetKey = path
-			.replace('assets/js/blocks/', '')
-			.replace('.js', '');
-		return assetKey;
-	});
+const exisitingBlockNames = [
+	...globSync(`${themePath}/assets/js/blocks/*.js`).map((p) =>
+		path.basename(p, '.js')
+	),
+	...globSync(`${themePath}/inc/acf-blocks/*/block.json`).map((p) =>
+		path.basename(path.dirname(p))
+	)
+];
 
 const blockName = templateOptions[0];
 
@@ -54,162 +57,72 @@ if (exisitingBlockNames.includes(blockName)) {
 	}
 	fs.mkdirSync(dir);
 	if (fs.existsSync(`${srcPathJs}/${blockName}.js`)) {
-		fs.readFile(
+		const contents = fs.readFileSync(
 			`${srcPathJs}/${blockName}.js`,
-			'utf-8',
-			(err, contents) => {
-				if (err) throw err;
-				const regEx = RegExp(
-					String.raw`(${blockName.replaceAll(/( |-)/g, '')})`,
-					'gi'
-				);
-
-				const replaced = contents
-					.replaceAll(
-						regEx,
-						`${newName.toLowerCase().replaceAll(/( |-)/g, '')}`
-					)
-					.replaceAll(`blocks/${blockName}`, `blocks/${newName}`);
-				fs.writeFile(
-					`${dir}/${newName}.js`,
-					replaced,
-					'utf-8',
-					function (err) {
-						if (err) throw err;
-						console.log(
-							`👑👑\x1b[32m Successfully duplicated the js file! 👑👑`
-						);
-					}
-				);
-			}
+			'utf-8'
+		);
+		const regEx = RegExp(
+			String.raw`(${blockName.replaceAll(/( |-)/g, '')})`,
+			'gi'
 		);
+		const replaced = contents
+			.replaceAll(
+				regEx,
+				`${newName.toLowerCase().replaceAll(/( |-)/g, '')}`
+			)
+			.replaceAll(`blocks/${blockName}`, `blocks/${newName}`);
+		fs.writeFileSync(`${dir}/${newName}.js`, replaced, 'utf-8');
+		console.log(`👑👑\x1b[32m Successfully duplicated the js file! 👑👑`);
 	}
 	if (fs.existsSync(`${srcPathScss}/${blockName}.scss`)) {
-		fs.readFile(
+		const contents = fs.readFileSync(
 			`${srcPathScss}/${blockName}.scss`,
-			'utf-8',
-			(err, contents) => {
-				if (err) throw err;
-				const replaced = contents.replaceAll(
-					`${blockName}`,
-					`${newName}`
-				);
-				fs.writeFile(
-					`${dir}/${newName}.scss`,
-					replaced,
-					'utf-8',
-					function (err) {
-						if (err) throw err;
-						console.log(
-							`👑👑\x1b[32m Successfully duplicated the scss file! 👑👑`
-						);
-					}
-				);
-			}
+			'utf-8'
 		);
+		const replaced = contents.replaceAll(`${blockName}`, `${newName}`);
+		fs.writeFileSync(`${dir}/${newName}.scss`, replaced, 'utf-8');
+		console.log(`👑👑\x1b[32m Successfully duplicated the scss file! 👑👑`);
 	}
 	if (fs.existsSync(`${srcPathTwig}/${blockName}.twig`)) {
-		fs.readFile(
+		const contents = fs.readFileSync(
 			`${srcPathTwig}/${blockName}.twig`,
-			'utf-8',
-			(err, contents) => {
-				if (err) throw err;
-				const regEx = RegExp(String.raw`(\"${blockName}) `, 'gi');
-				const replaced = contents.replaceAll(regEx, `"${newName} `);
-				const regEx2 = RegExp(
-					String.raw`([\"|\']${blockName}[\"|\'])`,
-					'gi'
-				);
-				const replaced2 = replaced.replaceAll(regEx2, `"${newName}"`);
-				fs.writeFile(
-					`${dir}/${newName}.twig`,
-					replaced2,
-					'utf-8',
-					function (err) {
-						if (err) throw err;
-						console.log(
-							`👑👑\x1b[32m Successfully duplicated the twig file! 👑👑`
-						);
-					}
-				);
-			}
+			'utf-8'
 		);
+		const regEx = RegExp(String.raw`(\"${blockName}) `, 'gi');
+		const replaced = contents.replaceAll(regEx, `"${newName} `);
+		const regEx2 = RegExp(String.raw`([\"|\']${blockName}[\"|\'])`, 'gi');
+		const replaced2 = replaced.replaceAll(regEx2, `"${newName}"`);
+		fs.writeFileSync(`${dir}/${newName}.twig`, replaced2, 'utf-8');
+		console.log(`👑👑\x1b[32m Successfully duplicated the twig file! 👑👑`);
 	}
-	if (fs.existsSync(`${srcPathPhp}/${blockName}.php`)) {
-		fs.readFile(
-			`${srcPathPhp}/${blockName}.php`,
-			'utf-8',
-			(err, contents) => {
-				if (err) throw err;
-				const replaced = contents.replaceAll(
-					`${blockName}`,
-					`${newName}`
-				);
-				const regEx = RegExp(
-					String.raw`${blockName.replaceAll('-', ' ')}`,
-					'gi'
-				);
-				const replaced2 = replaced.replaceAll(
-					regEx,
-					`${newName.slice(0, 1).toUpperCase()}${newName
-						.replaceAll('-', ' ')
-						.slice(1)}`
-				);
-				const regEx2 = RegExp(
-					String.raw`${blockName.replaceAll('-', '_')}`,
-					'gi'
-				);
-				const replaced3 = replaced2.replaceAll(
-					regEx2,
-					`${newName.replaceAll('-', '_')}`
-				);
-				fs.writeFile(
-					`${dir}/${newName}.php`,
-					replaced3,
-					'utf-8',
-					function (err) {
-						if (err) throw err;
-						console.log(
-							`👑👑\x1b[32m Successfully duplicated the php file! 👑👑`
-						);
-					}
-				);
-			}
+	if (fs.existsSync(`${srcPathBlockJson}/${blockName}/block.json`)) {
+		const contents = fs.readFileSync(
+			`${srcPathBlockJson}/${blockName}/block.json`,
+			'utf-8'
 		);
-	}
-	if (fs.existsSync(`${srcPathVue}/${blockName}.vue`)) {
-		fs.readFile(
-			`${srcPathVue}/${blockName}.vue`,
-			'utf-8',
-			(err, contents) => {
-				if (err) throw err;
-				const replaced = contents.replaceAll(
-					`${blockName}`,
-					`${newName}`
-				);
-				fs.writeFile(
-					`${dir}/${newName}.vue`,
-					replaced,
-					'utf-8',
-					function (err) {
-						if (err) throw err;
-						console.log(
-							`👑👑\x1b[32m Successfully duplicated the vue file! 👑👑`
-						);
-					}
-				);
-			}
+		const data = JSON.parse(contents);
+		data.name = `acf/${newName}`;
+		data.title = newName
+			.split('-')
+			.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+			.join(' ');
+		if (data.description) {
+			data.description = data.description.replaceAll(blockName, newName);
+		}
+		fs.writeFileSync(
+			`${dir}/block.json`,
+			JSON.stringify(data, null, '\t'),
+			'utf-8'
+		);
+		console.log(
+			`👑👑\x1b[32m Successfully duplicated the block.json file! 👑👑`
 		);
 	}
-	const handleError = (err) => console.error(err);
-	const compressDone = () => {
-		fs.rmSync(`../../../../exported-blocks/${newName}`, {recursive: true});
-	};
-
-	setTimeout(() => {
-		compressing.zip
-			.compressDir(`${dir}`, `${dir}.zip`)
-			.then(compressDone)
-			.catch(handleError);
-	}, 100);
+	compressing.zip
+		.compressDir(`${dir}`, `${dir}.zip`)
+		.then(() => {
+			fs.rmSync(`${destPath}/${newName}`, {recursive: true});
+			console.log(`\x1b[32m 🎉 Zip created at ${dir}.zip \x1b[0m`);
+		})
+		.catch((err) => console.error(err));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@total_onion/onion-library",
-	"version": "3.0.19",
+	"version": "3.0.22",
 	"description": "Component library",
 	"main": "index.js",
 	"scripts": {