Merge pull request #2285 from vektor-inc/add/outer/divider-book

【二人目確認待ち】[ Outer ] 区切りに本とピラミッドを追加
vektor-inc · Oct 28, 2024 · 5f9c5a9 · 5f9c5a9
2 parents 27edf89 + ddb5050
commit 5f9c5a9
Show file tree

Hide file tree

Showing 12 changed files with 1,136 additions and 29 deletions.
diff --git a/readme.txt b/readme.txt
@@ -106,6 +106,7 @@ e.g.
 
 == Changelog ==
 
+[ Add function ][ Outer (Pro) ] Add book and pyramid in divider style.
 [ Bug fix ][ Slider ] Add alert message.
 
 = 1.89.0 =

diff --git a/src/blocks/_pro/outer/component-divider.js b/src/blocks/_pro/outer/component-divider.js
@@ -187,6 +187,95 @@ const componentDivider = (
 		);
 	};
 
+	// eslint-disable-next-line no-shadow
+	const bookSectionStyle = (level, color) => {
+		const absLevel = Math.abs(level);
+		let pathData;
+
+		if (level > 0) {
+			const controlPoint1X = 40;
+			const controlPoint1Y = 100 - level * 0.1;
+			const peakX = 50;
+			const peakY = 100 - level;
+			const controlPoint2X = 60;
+			const controlPoint2Y = 100 - level * 0.1;
+
+			pathData = `M0,100 H0 C${controlPoint1X},${controlPoint1Y} ${peakX},${peakY} ${peakX},${peakY} C${peakX},${peakY} ${controlPoint2X},${controlPoint2Y} 100,100 H100 V100 H0 Z`;
+		} else if (level === 0) {
+			const controlPoint1X = 40;
+			const controlPoint1Y = 100;
+			const peakX = 50;
+			const peakY = 100;
+			const controlPoint2X = 60;
+			const controlPoint2Y = 100;
+
+			pathData = `M0,100 H0 C${controlPoint1X},${controlPoint1Y} ${peakX},${peakY} ${peakX},${peakY} C${peakX},${peakY} ${controlPoint2X},${controlPoint2Y} 100,100 H100 V100 H0 Z`;
+		} else {
+			const controlPoint1X = 40;
+			const controlPoint1Y = absLevel === 100 ? 30 : 100 - absLevel * 0.9;
+			const peakX = 50;
+			const peakY = 100;
+			const controlPoint2X = 60;
+			const controlPoint2Y = absLevel === 100 ? 30 : 100 - absLevel * 0.9;
+			const startY = absLevel === 100 ? 0 : 100 - absLevel;
+
+			pathData = `M0,${startY} H0 C${controlPoint1X},${controlPoint1Y} ${peakX},${peakY} ${peakX},${peakY} C${peakX},${peakY} ${controlPoint2X},${controlPoint2Y} 100,${startY} H100 V100 H0 Z`;
+		}
+
+		return (
+			<path
+				d={pathData}
+				strokeWidth="0"
+				fill={isHexColor(color) ? color : 'currentColor'}
+				className={classnames({
+					[`has-text-color`]: color !== undefined,
+					[`has-${color}-color`]: color !== undefined && !isHexColor(color),
+				})}
+			/>
+		);
+	};
+
+	// eslint-disable-next-line no-shadow
+	const pyramidSectionStyle = (level, color) => {
+		const absLevel = Math.abs(level);
+		let pathData;
+
+		if (level < 0) {
+			const firstPeakX = 25;
+			const firstPeakY = 100 - absLevel * 0.6;
+			const dipX = 40;
+			const dipY = 100 - absLevel * 0.2;
+			const secondPeakX = 75;
+			const secondPeakY = 100 - absLevel;
+			const rightEndY = 100 - absLevel * 0.5;
+
+			pathData = `M0,100 H0 L${firstPeakX},${firstPeakY} ${dipX},${dipY} ${secondPeakX},${secondPeakY} 100,${rightEndY} H100 V100 H0 Z`;
+		} else if (level === 0) {
+			pathData = `M0,100 H0 L0,100 35,100 65,100 85,100 100,100 H100 V100 H0 Z`;
+		} else {
+			const firstPeakX = 75;
+			const firstPeakY = 100 - level * 0.6;
+			const dipX = 60;
+			const dipY = 100 - level * 0.2;
+			const secondPeakX = 25;
+			const secondPeakY = 100 - level;
+			const leftEndY = 100 - level * 0.5;
+
+			pathData = `M0,${leftEndY} H0 L${secondPeakX},${secondPeakY} ${dipX},${dipY} ${firstPeakX},${firstPeakY} 100,100 H100 V100 H0 Z`;
+		}
+
+		return (
+			<path
+				d={pathData}
+				strokeWidth="0"
+				fill={isHexColor(color) ? color : 'currentColor'}
+				className={classnames({
+					[`has-text-color`]: color !== undefined,
+					[`has-${color}-color`]: color !== undefined && !isHexColor(color),
+				})}
+			/>
+		);
+	};
 	//背景色をクリアした時は、白に変更
 	if (!color) {
 		color = '#fff';
@@ -212,6 +301,12 @@ const componentDivider = (
 		} else if (dividerType === 'serrated') {
 			sectionPadding = 10;
 			return serratedSectionStyle(lvl, color);
+		} else if (dividerType === 'book') {
+			sectionPadding = Math.abs(lvl);
+			return bookSectionStyle(lvl, color);
+		} else if (dividerType === 'pyramid') {
+			sectionPadding = Math.abs(lvl);
+			return pyramidSectionStyle(lvl, color);
 		}
 	};
 

diff --git a/src/blocks/_pro/outer/deprecated/hooks/index.js b/src/blocks/_pro/outer/deprecated/hooks/index.js
@@ -7,6 +7,7 @@ import OuterHook0_0_1 from './0.0.1'
 // saveの数分必要
 export default [
 	// 後方互換
+	OuterHook1_60_0, // 1.89.0
 	OuterHook1_60_0, // 1.76.0
 	OuterHook1_60_0, // 1.71.0
 	OuterHook1_60_0, // 1.64.0

diff --git a/src/blocks/_pro/outer/deprecated/save/1.89.0/GenerateBgImage.js b/src/blocks/_pro/outer/deprecated/save/1.89.0/GenerateBgImage.js
@@ -0,0 +1,103 @@
+const GenerateBgImage = (props) => {
+	const { attributes, prefix } = props;
+	const { bgImageMobile, bgImageTablet, bgImage, bgSize, blockId } =
+		attributes;
+
+	const mobileViewport = 'max-width: 575.98px';
+	const tabletViewport = 'min-width: 576px';
+	const pcViewport = 'min-width: 992px';
+	const underPcViewport = 'max-width: 992.98px';
+
+	let backgroundStyle;
+	const backgroundPosition = 'background-position:center!important;';
+	if ('cover' === bgSize) {
+		backgroundStyle = `background-size:${bgSize}!important; ${backgroundPosition}`;
+	} else if ('repeat' === bgSize) {
+		backgroundStyle = `background-repeat:${bgSize}!important; background-size: auto; ${backgroundPosition}`;
+	} else {
+		backgroundStyle = ``;
+	}
+
+	//moible only
+	if (bgImageMobile && !bgImageTablet && !bgImage) {
+		return (
+			<style>{`.${prefix}-${blockId}{background-image: url(${bgImageMobile}); ${backgroundStyle}}`}</style>
+		);
+	}
+	//tablet only
+	if (!bgImageMobile && bgImageTablet && !bgImage) {
+		return (
+			<style>{`.${prefix}-${blockId}{background-image: url(${bgImageTablet}); ${backgroundStyle}}`}</style>
+		);
+	}
+	//pc only
+	if (!bgImageMobile && !bgImageTablet && bgImage) {
+		return (
+			<style>{`.${prefix}-${blockId}{background-image: url(${bgImage}); ${backgroundStyle}}`}</style>
+		);
+	}
+	//pc -mobile
+	if (bgImageMobile && !bgImageTablet && bgImage) {
+		return (
+			<style>
+				{`
+          @media screen and (${underPcViewport}) {
+            .${prefix}-${blockId}{background-image: url(${bgImageMobile}); ${backgroundStyle}}
+         }
+          @media screen and (${pcViewport}) {
+            .${prefix}-${blockId}{background-image: url(${bgImage}); ${backgroundStyle}}
+         }
+          `}
+			</style>
+		);
+	}
+	//pc -tablet
+	if (!bgImageMobile && bgImageTablet && bgImage) {
+		return (
+			<style>
+				{`
+          @media screen and (${underPcViewport}) {
+            .${prefix}-${blockId}{background-image: url(${bgImageTablet}); ${backgroundStyle}}
+         }
+          @media screen and (${pcViewport}) {
+            .${prefix}-${blockId}{background-image: url(${bgImage}); ${backgroundStyle}}
+         }
+          `}
+			</style>
+		);
+	}
+	//tablet - mobile
+	if (bgImageMobile && bgImageTablet && !bgImage) {
+		return (
+			<style>
+				{`
+          @media screen and (${mobileViewport}) {
+            .${prefix}-${blockId}{background-image: url(${bgImageMobile}); ${backgroundStyle}}
+         }
+          @media screen and (${tabletViewport}) {
+            .${prefix}-${blockId}{background-image: url(${bgImageTablet}); ${backgroundStyle}}
+         }
+        `}
+			</style>
+		);
+	}
+	//pc -tablet - mobile
+	if (bgImageMobile && bgImageTablet && bgImage) {
+		return (
+			<style>
+				{`
+        @media screen and (${mobileViewport}) {
+          .${prefix}-${blockId}{background-image: url(${bgImageMobile}); ${backgroundStyle}}
+       }
+        @media screen and (${tabletViewport}) {
+          .${prefix}-${blockId}{background-image: url(${bgImageTablet}); ${backgroundStyle}}
+       }
+        @media screen and (${pcViewport}) {
+          .${prefix}-${blockId}{background-image: url(${bgImage}); ${backgroundStyle}}
+       }
+        `}
+			</style>
+		);
+	}
+};
+export default GenerateBgImage;