itmar-block-packages 2.1.2 → 3.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -4
- package/build/cjs/AnimationBlock.js +61 -92
- package/build/cjs/AnimationBlock.js.map +1 -1
- package/build/cjs/BlockEditWrapper.js +3 -10
- package/build/cjs/BlockEditWrapper.js.map +1 -1
- package/build/cjs/BlockPlace.js +277 -482
- package/build/cjs/BlockPlace.js.map +1 -1
- package/build/cjs/BrockInserter.js +195 -191
- package/build/cjs/BrockInserter.js.map +1 -1
- package/build/cjs/DateElm.js +254 -281
- package/build/cjs/DateElm.js.map +1 -1
- package/build/cjs/DraggableBox.js +99 -129
- package/build/cjs/DraggableBox.js.map +1 -1
- package/build/cjs/GridControls.js +292 -392
- package/build/cjs/GridControls.js.map +1 -1
- package/build/cjs/IconSelectControl.js +65 -156
- package/build/cjs/IconSelectControl.js.map +1 -1
- package/build/cjs/JapaneseHolidays.js +67 -76
- package/build/cjs/JapaneseHolidays.js.map +1 -1
- package/build/cjs/MasonryControl.js +95 -100
- package/build/cjs/MasonryControl.js.map +1 -1
- package/build/cjs/PseudoElm.js +37 -50
- package/build/cjs/PseudoElm.js.map +1 -1
- package/build/cjs/ShadowStyle.js +216 -430
- package/build/cjs/ShadowStyle.js.map +1 -1
- package/build/cjs/SwiperControl.js +240 -241
- package/build/cjs/SwiperControl.js.map +1 -1
- package/build/cjs/ToggleElement.js +17 -9
- package/build/cjs/ToggleElement.js.map +1 -1
- package/build/cjs/TypographyControls.js +73 -139
- package/build/cjs/TypographyControls.js.map +1 -1
- package/build/cjs/UpdateAllPostsBlockAttributes.js +102 -119
- package/build/cjs/UpdateAllPostsBlockAttributes.js.map +1 -1
- package/build/cjs/ZipAddress.js +27 -23
- package/build/cjs/ZipAddress.js.map +1 -1
- package/build/cjs/blockStore.js +42 -47
- package/build/cjs/blockStore.js.map +1 -1
- package/build/cjs/cssPropertes.js +165 -117
- package/build/cjs/cssPropertes.js.map +1 -1
- package/build/cjs/customHooks.js +277 -0
- package/build/cjs/customHooks.js.map +1 -0
- package/build/cjs/formatCreate.js +115 -145
- package/build/cjs/formatCreate.js.map +1 -1
- package/build/cjs/hslToRgb.js +112 -116
- package/build/cjs/hslToRgb.js.map +1 -1
- package/build/cjs/index.js +15 -11
- package/build/cjs/index.js.map +1 -1
- package/build/cjs/mediaUpload.js +95 -158
- package/build/cjs/mediaUpload.js.map +1 -1
- package/build/cjs/node_modules/swiper/shared/ssr-window.esm.js +144 -0
- package/build/cjs/node_modules/swiper/shared/ssr-window.esm.js.map +1 -0
- package/build/cjs/node_modules/swiper/shared/swiper-core.js +3925 -0
- package/build/cjs/node_modules/swiper/shared/swiper-core.js.map +1 -0
- package/build/cjs/node_modules/swiper/shared/utils.js +294 -0
- package/build/cjs/node_modules/swiper/shared/utils.js.map +1 -0
- package/build/cjs/pickupStore.js +56 -54
- package/build/cjs/pickupStore.js.map +1 -1
- package/build/cjs/shopfiApi.js +127 -138
- package/build/cjs/shopfiApi.js.map +1 -1
- package/build/cjs/types/AnimationBlock.d.ts +22 -0
- package/build/cjs/types/BlockEditWrapper.d.ts +7 -0
- package/build/cjs/types/BlockPlace.d.ts +49 -0
- package/build/cjs/types/BrockInserter.d.ts +6 -0
- package/build/cjs/types/DateElm.d.ts +69 -0
- package/build/cjs/types/DraggableBox.d.ts +19 -0
- package/build/cjs/types/GridControls.d.ts +27 -0
- package/build/cjs/types/IconSelectControl.d.ts +17 -0
- package/build/cjs/types/JapaneseHolidays.d.ts +6 -0
- package/build/cjs/types/MasonryControl.d.ts +35 -0
- package/build/cjs/types/PseudoElm.d.ts +11 -0
- package/build/cjs/types/ShadowStyle.d.ts +33 -0
- package/build/cjs/types/SwiperControl.d.ts +12 -0
- package/build/cjs/types/ToggleElement.d.ts +13 -0
- package/build/cjs/types/TypographyControls.d.ts +17 -0
- package/build/cjs/types/UpdateAllPostsBlockAttributes.d.ts +10 -0
- package/build/cjs/types/ZipAddress.d.ts +18 -0
- package/build/cjs/types/blockStore.d.ts +15 -0
- package/build/cjs/types/cssPropertes.d.ts +53 -0
- package/build/cjs/types/customHooks.d.ts +11 -0
- package/build/cjs/types/formatCreate.d.ts +18 -0
- package/build/cjs/types/hslToRgb.d.ts +23 -0
- package/build/cjs/types/index.d.ts +31 -0
- package/build/cjs/types/mediaUpload.d.ts +29 -0
- package/build/cjs/types/pickupStore.d.ts +39 -0
- package/build/cjs/types/shopfiApi.d.ts +18 -0
- package/build/cjs/types/validationCheck.d.ts +5 -0
- package/build/cjs/types/wordpressApi.d.ts +99 -0
- package/build/cjs/validationCheck.js +15 -9
- package/build/cjs/validationCheck.js.map +1 -1
- package/build/cjs/wordpressApi.js +364 -576
- package/build/cjs/wordpressApi.js.map +1 -1
- package/build/esm/AnimationBlock.d.ts +22 -0
- package/build/esm/AnimationBlock.js +61 -92
- package/build/esm/AnimationBlock.js.map +1 -1
- package/build/esm/BlockEditWrapper.d.ts +7 -0
- package/build/esm/BlockEditWrapper.js +4 -11
- package/build/esm/BlockEditWrapper.js.map +1 -1
- package/build/esm/BlockPlace.d.ts +49 -0
- package/build/esm/BlockPlace.js +279 -484
- package/build/esm/BlockPlace.js.map +1 -1
- package/build/esm/BrockInserter.d.ts +6 -0
- package/build/esm/BrockInserter.js +195 -191
- package/build/esm/BrockInserter.js.map +1 -1
- package/build/esm/DateElm.d.ts +69 -0
- package/build/esm/DateElm.js +254 -281
- package/build/esm/DateElm.js.map +1 -1
- package/build/esm/DraggableBox.d.ts +19 -0
- package/build/esm/DraggableBox.js +99 -129
- package/build/esm/DraggableBox.js.map +1 -1
- package/build/esm/GridControls.d.ts +27 -0
- package/build/esm/GridControls.js +294 -394
- package/build/esm/GridControls.js.map +1 -1
- package/build/esm/IconSelectControl.d.ts +17 -0
- package/build/esm/IconSelectControl.js +65 -156
- package/build/esm/IconSelectControl.js.map +1 -1
- package/build/esm/JapaneseHolidays.d.ts +6 -0
- package/build/esm/JapaneseHolidays.js +67 -76
- package/build/esm/JapaneseHolidays.js.map +1 -1
- package/build/esm/MasonryControl.d.ts +35 -0
- package/build/esm/MasonryControl.js +95 -100
- package/build/esm/MasonryControl.js.map +1 -1
- package/build/esm/PseudoElm.d.ts +11 -0
- package/build/esm/PseudoElm.js +37 -50
- package/build/esm/PseudoElm.js.map +1 -1
- package/build/esm/ShadowStyle.d.ts +33 -0
- package/build/esm/ShadowStyle.js +217 -431
- package/build/esm/ShadowStyle.js.map +1 -1
- package/build/esm/SwiperControl.d.ts +12 -0
- package/build/esm/SwiperControl.js +240 -241
- package/build/esm/SwiperControl.js.map +1 -1
- package/build/esm/ToggleElement.d.ts +13 -0
- package/build/esm/ToggleElement.js +17 -9
- package/build/esm/ToggleElement.js.map +1 -1
- package/build/esm/TypographyControls.d.ts +17 -0
- package/build/esm/TypographyControls.js +73 -139
- package/build/esm/TypographyControls.js.map +1 -1
- package/build/esm/UpdateAllPostsBlockAttributes.d.ts +10 -0
- package/build/esm/UpdateAllPostsBlockAttributes.js +103 -120
- package/build/esm/UpdateAllPostsBlockAttributes.js.map +1 -1
- package/build/esm/ZipAddress.d.ts +18 -0
- package/build/esm/ZipAddress.js +27 -23
- package/build/esm/ZipAddress.js.map +1 -1
- package/build/esm/blockStore.d.ts +15 -0
- package/build/esm/blockStore.js +42 -47
- package/build/esm/blockStore.js.map +1 -1
- package/build/esm/cssPropertes.d.ts +53 -0
- package/build/esm/cssPropertes.js +165 -117
- package/build/esm/cssPropertes.js.map +1 -1
- package/build/esm/customHooks.d.ts +11 -0
- package/build/esm/customHooks.js +267 -0
- package/build/esm/customHooks.js.map +1 -0
- package/build/esm/formatCreate.d.ts +18 -0
- package/build/esm/formatCreate.js +115 -145
- package/build/esm/formatCreate.js.map +1 -1
- package/build/esm/hslToRgb.d.ts +23 -0
- package/build/esm/hslToRgb.js +112 -116
- package/build/esm/hslToRgb.js.map +1 -1
- package/build/esm/index.d.ts +27 -0
- package/build/esm/index.js +8 -1
- package/build/esm/index.js.map +1 -1
- package/build/esm/mediaUpload.d.ts +29 -0
- package/build/esm/mediaUpload.js +95 -158
- package/build/esm/mediaUpload.js.map +1 -1
- package/build/esm/node_modules/swiper/shared/ssr-window.esm.js +141 -0
- package/build/esm/node_modules/swiper/shared/ssr-window.esm.js.map +1 -0
- package/build/esm/node_modules/swiper/shared/swiper-core.js +3922 -0
- package/build/esm/node_modules/swiper/shared/swiper-core.js.map +1 -0
- package/build/esm/node_modules/swiper/shared/utils.js +274 -0
- package/build/esm/node_modules/swiper/shared/utils.js.map +1 -0
- package/build/esm/pickupStore.d.ts +39 -0
- package/build/esm/pickupStore.js +56 -54
- package/build/esm/pickupStore.js.map +1 -1
- package/build/esm/shopfiApi.d.ts +18 -0
- package/build/esm/shopfiApi.js +127 -138
- package/build/esm/shopfiApi.js.map +1 -1
- package/build/esm/types/AnimationBlock.d.ts +22 -0
- package/build/esm/types/BlockEditWrapper.d.ts +7 -0
- package/build/esm/types/BlockPlace.d.ts +49 -0
- package/build/esm/types/BrockInserter.d.ts +6 -0
- package/build/esm/types/DateElm.d.ts +69 -0
- package/build/esm/types/DraggableBox.d.ts +19 -0
- package/build/esm/types/GridControls.d.ts +27 -0
- package/build/esm/types/IconSelectControl.d.ts +17 -0
- package/build/esm/types/JapaneseHolidays.d.ts +6 -0
- package/build/esm/types/MasonryControl.d.ts +35 -0
- package/build/esm/types/PseudoElm.d.ts +11 -0
- package/build/esm/types/ShadowStyle.d.ts +33 -0
- package/build/esm/types/SwiperControl.d.ts +12 -0
- package/build/esm/types/ToggleElement.d.ts +13 -0
- package/build/esm/types/TypographyControls.d.ts +17 -0
- package/build/esm/types/UpdateAllPostsBlockAttributes.d.ts +10 -0
- package/build/esm/types/ZipAddress.d.ts +18 -0
- package/build/esm/types/blockStore.d.ts +15 -0
- package/build/esm/types/cssPropertes.d.ts +53 -0
- package/build/esm/types/customHooks.d.ts +11 -0
- package/build/esm/types/formatCreate.d.ts +18 -0
- package/build/esm/types/hslToRgb.d.ts +23 -0
- package/build/esm/types/index.d.ts +31 -0
- package/build/esm/types/mediaUpload.d.ts +29 -0
- package/build/esm/types/pickupStore.d.ts +39 -0
- package/build/esm/types/shopfiApi.d.ts +18 -0
- package/build/esm/types/validationCheck.d.ts +5 -0
- package/build/esm/types/wordpressApi.d.ts +99 -0
- package/build/esm/validationCheck.d.ts +5 -0
- package/build/esm/validationCheck.js +15 -9
- package/build/esm/validationCheck.js.map +1 -1
- package/build/esm/wordpressApi.d.ts +99 -0
- package/build/esm/wordpressApi.js +365 -577
- package/build/esm/wordpressApi.js.map +1 -1
- package/package.json +29 -7
- package/build/cjs/_virtual/_rollupPluginBabelHelpers.js +0 -117
- package/build/cjs/_virtual/_rollupPluginBabelHelpers.js.map +0 -1
- package/build/cjs/customFooks.js +0 -300
- package/build/cjs/customFooks.js.map +0 -1
- package/build/esm/_virtual/_rollupPluginBabelHelpers.js +0 -107
- package/build/esm/_virtual/_rollupPluginBabelHelpers.js.map +0 -1
- package/build/esm/customFooks.js +0 -290
- package/build/esm/customFooks.js.map +0 -1
|
@@ -1,144 +1,192 @@
|
|
|
1
1
|
// sideの最初の文字を大文字にする関数
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
const capitalizeFirstLetter = (string) => {
|
|
3
|
+
return string.charAt(0).toUpperCase() + string.slice(1);
|
|
4
4
|
};
|
|
5
5
|
// objectかどうか判定する関数
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
const isObject = (value) => {
|
|
7
|
+
return value !== null && typeof value === "object" && !Array.isArray(value);
|
|
8
8
|
};
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
9
|
+
const radius_prm = (radius) => {
|
|
10
|
+
// radius が存在しない場合は空文字を返す
|
|
11
|
+
if (!radius)
|
|
12
|
+
return "";
|
|
13
|
+
const ret_radius_prm = Object.keys(radius).length === 1 && radius.value
|
|
14
|
+
? radius.value
|
|
15
|
+
: `${radius.topLeft || ""} ${radius.topRight || ""} ${radius.bottomRight || ""} ${radius.bottomLeft || ""}`;
|
|
16
|
+
return ret_radius_prm.trim(); // 余計な空白を削除して返す
|
|
14
17
|
};
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
18
|
+
const space_prm = (space) => {
|
|
19
|
+
// spaceが存在しない、または空の場合は空文字を返す
|
|
20
|
+
if (!space)
|
|
21
|
+
return "";
|
|
22
|
+
// 各値が undefined の場合に備えてデフォルト値("0" など)を置くのが安全です
|
|
23
|
+
const { top = "0", right = "0", bottom = "0", left = "0" } = space;
|
|
24
|
+
return `${top} ${right} ${bottom} ${left}`;
|
|
19
25
|
};
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
26
|
+
const position_prm = (pos, type) => {
|
|
27
|
+
// 値がオブジェクト(詳細設定)の場合
|
|
28
|
+
if (isObject(pos)) {
|
|
29
|
+
const p = pos; // 型を確定させる
|
|
30
|
+
const resetVertBase = p.vertBase === "top" ? "bottom" : "top";
|
|
31
|
+
const resetHorBase = p.horBase === "left" ? "right" : "left";
|
|
32
|
+
const centerVert = "50%";
|
|
33
|
+
const centerHor = "50%";
|
|
34
|
+
const centerTrans = p.isVertCenter && p.isHorCenter
|
|
35
|
+
? "transform: translate(-50%, -50%);"
|
|
36
|
+
: p.isVertCenter
|
|
37
|
+
? "transform: translateY(-50%);"
|
|
38
|
+
: p.isHorCenter
|
|
39
|
+
? "transform: translateX(-50%);"
|
|
40
|
+
: "";
|
|
41
|
+
const isValidType = type === "absolute" || type === "fixed" || type === "sticky";
|
|
42
|
+
if (isValidType) {
|
|
43
|
+
return `
|
|
44
|
+
${p.vertBase}: ${p.isVertCenter ? centerVert : p.vertValue};
|
|
45
|
+
${p.horBase}: ${p.isHorCenter ? centerHor : p.horValue};
|
|
46
|
+
${centerTrans}
|
|
47
|
+
${resetVertBase}: auto;
|
|
48
|
+
${resetHorBase}: auto;
|
|
49
|
+
${type === "fixed" || type === "sticky"
|
|
50
|
+
? "margin-block-start:0;z-index: 50;"
|
|
51
|
+
: "z-index: auto;"}
|
|
52
|
+
`;
|
|
53
|
+
}
|
|
54
|
+
return "";
|
|
55
|
+
// オブジェクトではないが値がある場合(簡易的な中央揃えフラグなど)
|
|
56
|
+
}
|
|
57
|
+
else if (pos) {
|
|
58
|
+
return "top:50%;left: 50%;transform: translate(-50%, -50%);";
|
|
59
|
+
}
|
|
60
|
+
return null;
|
|
37
61
|
};
|
|
38
62
|
//ブロック幅を返す
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
63
|
+
const max_width_prm = (width, free_val) => {
|
|
64
|
+
const ret_width_prm = width === "wideSize"
|
|
65
|
+
? "max-width: var(--wp--style--global--wide-size);"
|
|
66
|
+
: width === "contentSize"
|
|
67
|
+
? "max-width: var(--wp--style--global--content-size);"
|
|
68
|
+
: width === "free"
|
|
69
|
+
? `max-width: ${free_val};`
|
|
70
|
+
: width === "full"
|
|
71
|
+
? "max-width: 100%;"
|
|
72
|
+
: "max-width: fit-content;";
|
|
73
|
+
return ret_width_prm;
|
|
42
74
|
};
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
75
|
+
const width_prm = (width, free_val) => {
|
|
76
|
+
const ret_width_prm = width === "wideSize"
|
|
77
|
+
? " width: var(--wp--style--global--wide-size);"
|
|
78
|
+
: width === "contentSize"
|
|
79
|
+
? " width: var(--wp--style--global--content-size);"
|
|
80
|
+
: width === "free"
|
|
81
|
+
? ` width: ${free_val}; `
|
|
82
|
+
: width === "full"
|
|
83
|
+
? " width: 100%;"
|
|
84
|
+
: width === "fit"
|
|
85
|
+
? " width: fit-content;"
|
|
86
|
+
: " width: auto;";
|
|
87
|
+
return ret_width_prm;
|
|
46
88
|
};
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
89
|
+
const height_prm = (height, free_val) => {
|
|
90
|
+
const ret_height_prm = height === "fit"
|
|
91
|
+
? " height: fit-content;"
|
|
92
|
+
: height === "full"
|
|
93
|
+
? ` height: 100%; `
|
|
94
|
+
: height === "free"
|
|
95
|
+
? ` height: ${free_val}; `
|
|
96
|
+
: "height: auto;";
|
|
97
|
+
return ret_height_prm;
|
|
50
98
|
};
|
|
51
99
|
//配置を返す
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
100
|
+
const align_prm = (align, camelFLg = false) => {
|
|
101
|
+
//css用
|
|
102
|
+
const ret_align_prm = align === "center"
|
|
103
|
+
? "margin-left: auto; margin-right: auto;"
|
|
104
|
+
: align === "right"
|
|
105
|
+
? "margin-left: auto; margin-right: 0;"
|
|
106
|
+
: "margin-right: auto; margin-left: 0;";
|
|
107
|
+
//インナースタイル用
|
|
108
|
+
const camel_align_prm = align === "center"
|
|
109
|
+
? { marginLeft: "auto", marginRight: "auto" }
|
|
110
|
+
: align === "right"
|
|
111
|
+
? { marginLeft: "auto" }
|
|
112
|
+
: {};
|
|
113
|
+
return camelFLg ? camel_align_prm : ret_align_prm;
|
|
64
114
|
};
|
|
65
|
-
|
|
66
115
|
//スタイルオブジェクト変換関数
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
116
|
+
const convertToScss = (styleObject) => {
|
|
117
|
+
let scss = "";
|
|
118
|
+
for (const prop in styleObject) {
|
|
119
|
+
if (styleObject.hasOwnProperty(prop)) {
|
|
120
|
+
const scssProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
|
|
121
|
+
scss += `${scssProp}: ${styleObject[prop]};\n`;
|
|
122
|
+
}
|
|
73
123
|
}
|
|
74
|
-
|
|
75
|
-
return scss;
|
|
124
|
+
return scss;
|
|
76
125
|
};
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
var doesKeyExist = keys.some(key => key in borderObj);
|
|
83
|
-
if (doesKeyExist) {
|
|
84
|
-
//'top', 'bottom', 'left', 'right'が別設定
|
|
85
|
-
var cssObj = {};
|
|
86
|
-
for (var side in borderObj) {
|
|
87
|
-
var sideData = borderObj[side];
|
|
88
|
-
var startsWithZero = String(sideData.width || "").match(/^0/);
|
|
89
|
-
if (startsWithZero) {
|
|
90
|
-
//widthが0ならCSS設定しない
|
|
91
|
-
continue;
|
|
92
|
-
}
|
|
93
|
-
var border_style = sideData.style || "solid";
|
|
94
|
-
var camelCaseSide = "border".concat(capitalizeFirstLetter(side));
|
|
95
|
-
cssObj[camelCaseSide] = "".concat(sideData.width, " ").concat(border_style, " ").concat(sideData.color);
|
|
96
|
-
}
|
|
97
|
-
ret_prop = cssObj;
|
|
98
|
-
return ret_prop;
|
|
99
|
-
} else {
|
|
100
|
-
//同一のボーダー
|
|
101
|
-
var _startsWithZero = String(borderObj.width || "").match(/^0/);
|
|
102
|
-
if (_startsWithZero) {
|
|
103
|
-
//widthが0ならnullを返す
|
|
126
|
+
/**
|
|
127
|
+
* ボーダー設定オブジェクトをCSSプロパティオブジェクトに変換する
|
|
128
|
+
*/
|
|
129
|
+
const borderProperty = (borderObj) => {
|
|
130
|
+
if (!borderObj)
|
|
104
131
|
return null;
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
132
|
+
const sides = ["top", "bottom", "left", "right"];
|
|
133
|
+
// 指定されたキーのいずれかが存在するかチェック
|
|
134
|
+
const hasSideSettings = sides.some((side) => side in borderObj);
|
|
135
|
+
if (hasSideSettings) {
|
|
136
|
+
// 1. Record<string, string> と定義することで、動的なキー代入を許可します
|
|
137
|
+
const cssObj = {};
|
|
138
|
+
for (const side in borderObj) {
|
|
139
|
+
const sideData = borderObj[side];
|
|
140
|
+
// 幅が 0(0px, 0remなど)で始まる場合はスキップ
|
|
141
|
+
if (String(sideData?.width || "").startsWith("0")) {
|
|
142
|
+
continue;
|
|
143
|
+
}
|
|
144
|
+
const borderStyle = sideData?.style || "solid";
|
|
145
|
+
// 2. キーを camelCase に変換(例: top -> borderTop)
|
|
146
|
+
const camelCaseSide = `border${capitalizeFirstLetter(side)}`;
|
|
147
|
+
cssObj[camelCaseSide] =
|
|
148
|
+
`${sideData.width} ${borderStyle} ${sideData.color}`;
|
|
149
|
+
}
|
|
150
|
+
// すべての辺が幅0で cssObj が空になった場合は null を返す
|
|
151
|
+
return Object.keys(cssObj).length > 0 ? cssObj : null;
|
|
152
|
+
}
|
|
153
|
+
else {
|
|
154
|
+
// 同一のボーダー設定の場合
|
|
155
|
+
if (String(borderObj.width || "").startsWith("0")) {
|
|
156
|
+
return null;
|
|
157
|
+
}
|
|
158
|
+
const borderStyle = borderObj.style || "solid";
|
|
159
|
+
return {
|
|
160
|
+
border: `${borderObj.width} ${borderStyle} ${borderObj.color}`,
|
|
161
|
+
};
|
|
111
162
|
}
|
|
112
|
-
} else {
|
|
113
|
-
return null;
|
|
114
|
-
}
|
|
115
163
|
};
|
|
116
|
-
|
|
117
164
|
//角丸の設定
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
165
|
+
const radiusProperty = (radiusObj) => {
|
|
166
|
+
if (!radiusObj)
|
|
167
|
+
return {};
|
|
168
|
+
const ret_prop = radiusObj && Object.keys(radiusObj).length === 1
|
|
169
|
+
? radiusObj.value
|
|
170
|
+
: `${(radiusObj && radiusObj.topLeft) || ""} ${(radiusObj && radiusObj.topRight) || ""} ${(radiusObj && radiusObj.bottomRight) || ""} ${(radiusObj && radiusObj.bottomLeft) || ""}`;
|
|
171
|
+
const ret_val = { borderRadius: ret_prop };
|
|
172
|
+
return ret_val;
|
|
124
173
|
};
|
|
125
|
-
|
|
126
174
|
//マージンの設定
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
175
|
+
const marginProperty = (marginObj) => {
|
|
176
|
+
if (!marginObj)
|
|
177
|
+
return {};
|
|
178
|
+
const ret_prop = `${marginObj.top} ${marginObj.right} ${marginObj.bottom} ${marginObj.left}`;
|
|
179
|
+
const ret_val = { margin: ret_prop };
|
|
180
|
+
return ret_val;
|
|
133
181
|
};
|
|
134
182
|
//パディングの設定
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
}
|
|
183
|
+
const paddingProperty = (paddingObj) => {
|
|
184
|
+
if (!paddingObj)
|
|
185
|
+
return {};
|
|
186
|
+
const ret_prop = `${paddingObj.top} ${paddingObj.right} ${paddingObj.bottom} ${paddingObj.left}`;
|
|
187
|
+
const ret_val = { padding: ret_prop };
|
|
188
|
+
return ret_val;
|
|
189
|
+
};
|
|
142
190
|
|
|
143
191
|
export { align_prm, borderProperty, convertToScss, height_prm, marginProperty, max_width_prm, paddingProperty, position_prm, radiusProperty, radius_prm, space_prm, width_prm };
|
|
144
192
|
//# sourceMappingURL=cssPropertes.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cssPropertes.js","sources":["../../src/cssPropertes.js"],"sourcesContent":["// sideの最初の文字を大文字にする関数\nconst capitalizeFirstLetter = (string) => {\n return string.charAt(0).toUpperCase() + string.slice(1);\n};\n// objectかどうか判定する関数\nconst isObject = (value) => {\n return value !== null && typeof value === \"object\" && !Array.isArray(value);\n};\n\n//角丸のパラメータを返す\nexport const radius_prm = (radius) => {\n const ret_radius_prm =\n radius && Object.keys(radius).length === 1\n ? radius.value\n : `${(radius && radius.topLeft) || \"\"} ${\n (radius && radius.topRight) || \"\"\n } ${(radius && radius.bottomRight) || \"\"} ${\n (radius && radius.bottomLeft) || \"\"\n }`;\n return ret_radius_prm;\n};\n//スペースのパラメータを返す\nexport const space_prm = (space) => {\n const ret_space_prm = space\n ? `${space.top} ${space.right} ${space.bottom} ${space.left}`\n : \"\";\n return ret_space_prm;\n};\n//positionのオブジェクトを返します\nexport const position_prm = (pos, type) => {\n //値でポジションを設定\n if (isObject(pos)) {\n const resetVertBase = pos.vertBase === \"top\" ? \"bottom\" : \"top\";\n const resetHorBase = pos.horBase === \"left\" ? \"right\" : \"left\";\n const centerVert = \"50%\";\n const centerHor = \"50%\";\n const centerTrans =\n pos.isVertCenter && pos.isHorCenter\n ? \"transform: translate(-50%, -50%);\"\n : pos.isVertCenter\n ? \"transform: translateY(-50%);\"\n : pos.isHorCenter\n ? \"transform: translateX(-50%);\"\n : \"\";\n const ret_pos_prm =\n pos && (type === \"absolute\" || type === \"fixed\" || type === \"sticky\")\n ? `\n ${pos.vertBase}: ${pos.isVertCenter ? centerVert : pos.vertValue}; \n ${pos.horBase}: ${pos.isHorCenter ? centerHor : pos.horValue};\n ${centerTrans}\n ${resetVertBase}: auto;\n ${resetHorBase}: auto;\n ${\n type === \"fixed\" || type === \"sticky\"\n ? \"margin-block-start:0;z-index: 50;\"\n : \"z-index: auto;\"\n }\n `\n : \"\";\n return ret_pos_prm;\n //縦横中央揃え\n } else if (pos) {\n const ret_pos_prm = \"top:50%;left: 50%;transform: translate(-50%, -50%);\";\n return ret_pos_prm;\n }\n return null;\n};\n//ブロック幅を返す\nexport const max_width_prm = (width, free_val) => {\n const ret_width_prm =\n width === \"wideSize\"\n ? \"max-width: var(--wp--style--global--wide-size);\"\n : width === \"contentSize\"\n ? \"max-width: var(--wp--style--global--content-size);\"\n : width === \"free\"\n ? `max-width: ${free_val};`\n : width === \"full\"\n ? \"max-width: 100%;\"\n : \"max-width: fit-content;\";\n return ret_width_prm;\n};\n\nexport const width_prm = (width, free_val) => {\n const ret_width_prm =\n width === \"wideSize\"\n ? \" width: var(--wp--style--global--wide-size);\"\n : width === \"contentSize\"\n ? \" width: var(--wp--style--global--content-size);\"\n : width === \"free\"\n ? ` width: ${free_val}; `\n : width === \"full\"\n ? \" width: 100%;\"\n : width === \"fit\"\n ? \" width: fit-content;\"\n : \" width: auto;\";\n return ret_width_prm;\n};\n\nexport const height_prm = (height, free_val) => {\n const ret_height_prm =\n height === \"fit\"\n ? \" height: fit-content;\"\n : height === \"full\"\n ? ` height: 100%; `\n : height === \"free\"\n ? ` height: ${free_val}; `\n : \"height: auto;\";\n return ret_height_prm;\n};\n//配置を返す\nexport const align_prm = (align, camelFLg = false) => {\n //css用\n const ret_align_prm =\n align === \"center\"\n ? \"margin-left: auto; margin-right: auto;\"\n : align === \"right\"\n ? \"margin-left: auto; margin-right: 0;\"\n : \"margin-right: auto; margin-left: 0;\";\n //インナースタイル用\n const camel_align_prm =\n align === \"center\"\n ? { marginLeft: \"auto\", marginRight: \"auto\" }\n : align === \"right\"\n ? { marginLeft: \"auto\" }\n : {};\n\n return camelFLg ? camel_align_prm : ret_align_prm;\n};\n\n//スタイルオブジェクト変換関数\nexport const convertToScss = (styleObject) => {\n let scss = \"\";\n for (const prop in styleObject) {\n if (styleObject.hasOwnProperty(prop)) {\n const scssProp = prop.replace(/([A-Z])/g, \"-$1\").toLowerCase();\n scss += `${scssProp}: ${styleObject[prop]};\\n`;\n }\n }\n return scss;\n};\n\nexport const borderProperty = (borderObj) => {\n if (borderObj) {\n //borderObjがundefinedでない\n let keys = [\"top\", \"bottom\", \"left\", \"right\"];\n let ret_prop = null;\n let doesKeyExist = keys.some((key) => key in borderObj);\n if (doesKeyExist) {\n //'top', 'bottom', 'left', 'right'が別設定\n let cssObj = {};\n for (let side in borderObj) {\n const sideData = borderObj[side];\n const startsWithZero = String(sideData.width || \"\").match(/^0/);\n if (startsWithZero) {\n //widthが0ならCSS設定しない\n continue;\n }\n const border_style = sideData.style || \"solid\";\n let camelCaseSide = `border${capitalizeFirstLetter(side)}`;\n cssObj[\n camelCaseSide\n ] = `${sideData.width} ${border_style} ${sideData.color}`;\n }\n ret_prop = cssObj;\n return ret_prop;\n } else {\n //同一のボーダー\n const startsWithZero = String(borderObj.width || \"\").match(/^0/);\n if (startsWithZero) {\n //widthが0ならnullを返す\n return null;\n }\n const border_style = borderObj.style || \"solid\";\n ret_prop = {\n border: `${borderObj.width} ${border_style} ${borderObj.color}`,\n };\n\n return ret_prop;\n }\n } else {\n return null;\n }\n};\n\n//角丸の設定\nexport const radiusProperty = (radiusObj) => {\n const ret_prop =\n radiusObj && Object.keys(radiusObj).length === 1\n ? radiusObj.value\n : `${(radiusObj && radiusObj.topLeft) || \"\"} ${\n (radiusObj && radiusObj.topRight) || \"\"\n } ${(radiusObj && radiusObj.bottomRight) || \"\"} ${\n (radiusObj && radiusObj.bottomLeft) || \"\"\n }`;\n const ret_val = { borderRadius: ret_prop };\n return ret_val;\n};\n\n//マージンの設定\nexport const marginProperty = (marginObj) => {\n const ret_prop = `${marginObj.top} ${marginObj.right} ${marginObj.bottom} ${marginObj.left}`;\n\n const ret_val = { margin: ret_prop };\n return ret_val;\n};\n//パディングの設定\nexport function paddingProperty(paddingObj) {\n const ret_prop = `${paddingObj.top} ${paddingObj.right} ${paddingObj.bottom} ${paddingObj.left}`;\n\n const ret_val = { padding: ret_prop };\n return ret_val;\n}\n"],"names":["capitalizeFirstLetter","string","charAt","toUpperCase","slice","isObject","value","Array","isArray","radius_prm","radius","ret_radius_prm","Object","keys","length","concat","topLeft","topRight","bottomRight","bottomLeft","space_prm","space","ret_space_prm","top","right","bottom","left","position_prm","pos","type","resetVertBase","vertBase","resetHorBase","horBase","centerVert","centerHor","centerTrans","isVertCenter","isHorCenter","ret_pos_prm","vertValue","horValue","max_width_prm","width","free_val","ret_width_prm","width_prm","height_prm","height","ret_height_prm","align_prm","align","camelFLg","arguments","undefined","ret_align_prm","camel_align_prm","marginLeft","marginRight","convertToScss","styleObject","scss","prop","hasOwnProperty","scssProp","replace","toLowerCase","borderProperty","borderObj","ret_prop","doesKeyExist","some","key","cssObj","side","sideData","startsWithZero","String","match","border_style","style","camelCaseSide","color","border","radiusProperty","radiusObj","ret_val","borderRadius","marginProperty","marginObj","margin","paddingProperty","paddingObj","padding"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"cssPropertes.js","sources":["../../src/cssPropertes.ts"],"sourcesContent":[null],"names":[],"mappings":"AAEA;AACA,MAAM,qBAAqB,GAAG,CAAC,MAAc,KAAI;AAC/C,IAAA,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AACzD,CAAC;AACD;AACA,MAAM,QAAQ,GAAG,CAAC,KAAc,KAAkC;AAChE,IAAA,OAAO,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AAC7E,CAAC;AAWM,MAAM,UAAU,GAAG,CAAC,MAAgC,KAAY;;AAErE,IAAA,IAAI,CAAC,MAAM;AAAE,QAAA,OAAO,EAAE;AAEtB,IAAA,MAAM,cAAc,GAClB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,CAAC;UACvC,MAAM,CAAC;UACP,CAAA,EAAG,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA,CAAA,EAAI,MAAM,CAAC,QAAQ,IAAI,EAAE,IAAI,MAAM,CAAC,WAAW,IAAI,EAAE,CAAA,CAAA,EAAI,MAAM,CAAC,UAAU,IAAI,EAAE,CAAA,CAAE;AAE/G,IAAA,OAAO,cAAc,CAAC,IAAI,EAAE,CAAC;AAC/B;AASO,MAAM,SAAS,GAAG,CAAC,KAA8B,KAAY;;AAElE,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,EAAE;;AAGrB,IAAA,MAAM,EAAE,GAAG,GAAG,GAAG,EAAE,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,IAAI,GAAG,GAAG,EAAE,GAAG,KAAK;IAElE,OAAO,CAAA,EAAG,GAAG,CAAA,CAAA,EAAI,KAAK,IAAI,MAAM,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE;AAC5C;MAea,YAAY,GAAG,CAC1B,GAAyB,EACzB,IAAkB,KACD;;AAEjB,IAAA,IAAI,QAAQ,CAAC,GAAG,CAAC,EAAE;AACjB,QAAA,MAAM,CAAC,GAAG,GAAqB,CAAC;AAEhC,QAAA,MAAM,aAAa,GAAG,CAAC,CAAC,QAAQ,KAAK,KAAK,GAAG,QAAQ,GAAG,KAAK;AAC7D,QAAA,MAAM,YAAY,GAAG,CAAC,CAAC,OAAO,KAAK,MAAM,GAAG,OAAO,GAAG,MAAM;QAC5D,MAAM,UAAU,GAAG,KAAK;QACxB,MAAM,SAAS,GAAG,KAAK;QAEvB,MAAM,WAAW,GACf,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC;AAClB,cAAE;cACA,CAAC,CAAC;AACF,kBAAE;kBACA,CAAC,CAAC;AACF,sBAAE;sBACA,EAAE;AAEZ,QAAA,MAAM,WAAW,GACf,IAAI,KAAK,UAAU,IAAI,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,QAAQ;QAE9D,IAAI,WAAW,EAAE;YACf,OAAO;AACH,QAAA,EAAA,CAAC,CAAC,QAAQ,CAAA,EAAA,EAAK,CAAC,CAAC,YAAY,GAAG,UAAU,GAAG,CAAC,CAAC,SAAS,CAAA;AACxD,QAAA,EAAA,CAAC,CAAC,OAAO,CAAA,EAAA,EAAK,CAAC,CAAC,WAAW,GAAG,SAAS,GAAG,CAAC,CAAC,QAAQ,CAAA;UACpD,WAAW;UACX,aAAa,CAAA;UACb,YAAY,CAAA;AAEZ,QAAA,EAAA,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK;AAC3B,kBAAE;AACF,kBAAE,gBACN;OACD;QACH;AACA,QAAA,OAAO,EAAE;;IAGX;SAAO,IAAI,GAAG,EAAE;AACd,QAAA,OAAO,qDAAqD;IAC9D;AAEA,IAAA,OAAO,IAAI;AACb;AAOA;MACa,aAAa,GAAG,CAAC,KAAgB,EAAE,QAAiB,KAAY;AAC3E,IAAA,MAAM,aAAa,GACjB,KAAK,KAAK;AACR,UAAE;UACA,KAAK,KAAK;AACV,cAAE;cACA,KAAK,KAAK;kBACR,CAAA,WAAA,EAAc,QAAQ,CAAA,CAAA;kBACtB,KAAK,KAAK;AACV,sBAAE;sBACA,yBAAyB;AACrC,IAAA,OAAO,aAAa;AACtB;MAEa,SAAS,GAAG,CAAC,KAAgB,EAAE,QAAiB,KAAY;AACvE,IAAA,MAAM,aAAa,GACjB,KAAK,KAAK;AACR,UAAE;UACA,KAAK,KAAK;AACV,cAAE;cACA,KAAK,KAAK;kBACR,CAAA,QAAA,EAAW,QAAQ,CAAA,EAAA;kBACnB,KAAK,KAAK;AACV,sBAAE;sBACA,KAAK,KAAK;AACV,0BAAE;0BACA,eAAe;AAC7B,IAAA,OAAO,aAAa;AACtB;MAEa,UAAU,GAAG,CAAC,MAAkB,EAAE,QAAiB,KAAY;AAC1E,IAAA,MAAM,cAAc,GAClB,MAAM,KAAK;AACT,UAAE;UACA,MAAM,KAAK;AACX,cAAE,CAAA,eAAA;cACA,MAAM,KAAK;kBACT,CAAA,SAAA,EAAY,QAAQ,CAAA,EAAA;kBACpB,eAAe;AACzB,IAAA,OAAO,cAAc;AACvB;AACA;AACO,MAAM,SAAS,GAAG,CACvB,KAAgB,EAChB,QAAA,GAAoB,KAAK,KACC;;AAE1B,IAAA,MAAM,aAAa,GACjB,KAAK,KAAK;AACR,UAAE;UACA,KAAK,KAAK;AACV,cAAE;cACA,qCAAqC;;AAE7C,IAAA,MAAM,eAAe,GACnB,KAAK,KAAK;UACN,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM;UACzC,KAAK,KAAK;AACV,cAAE,EAAE,UAAU,EAAE,MAAM;cACpB,EAAE;IAEV,OAAO,QAAQ,GAAG,eAAe,GAAG,aAAa;AACnD;AAEA;AACO,MAAM,aAAa,GAAG,CAC3B,WAA4C,KAClC;IACV,IAAI,IAAI,GAAG,EAAE;AACb,IAAA,KAAK,MAAM,IAAI,IAAI,WAAW,EAAE;AAC9B,QAAA,IAAI,WAAW,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE;AACpC,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE;YAC9D,IAAI,IAAI,GAAG,QAAQ,CAAA,EAAA,EAAK,WAAW,CAAC,IAAI,CAAC,CAAA,GAAA,CAAK;QAChD;IACF;AACA,IAAA,OAAO,IAAI;AACb;AAEA;;AAEG;AACI,MAAM,cAAc,GAAG,CAC5B,SAAc,KACmB;AACjC,IAAA,IAAI,CAAC,SAAS;AAAE,QAAA,OAAO,IAAI;IAE3B,MAAM,KAAK,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC;;AAEhD,IAAA,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,IAAI,SAAS,CAAC;IAE/D,IAAI,eAAe,EAAE;;QAEnB,MAAM,MAAM,GAA2B,EAAE;AAEzC,QAAA,KAAK,MAAM,IAAI,IAAI,SAAS,EAAE;AAC5B,YAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,CAAC;;AAGhC,YAAA,IAAI,MAAM,CAAC,QAAQ,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;gBACjD;YACF;AAEA,YAAA,MAAM,WAAW,GAAG,QAAQ,EAAE,KAAK,IAAI,OAAO;;YAE9C,MAAM,aAAa,GAAG,CAAA,MAAA,EAAS,qBAAqB,CAAC,IAAI,CAAC,EAAE;YAE5D,MAAM,CAAC,aAAa,CAAC;gBACnB,CAAA,EAAG,QAAQ,CAAC,KAAK,CAAA,CAAA,EAAI,WAAW,IAAI,QAAQ,CAAC,KAAK,CAAA,CAAE;QACxD;;AAGA,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,IAAI;IACvD;SAAO;;AAEL,QAAA,IAAI,MAAM,CAAC,SAAS,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;AACjD,YAAA,OAAO,IAAI;QACb;AAEA,QAAA,MAAM,WAAW,GAAG,SAAS,CAAC,KAAK,IAAI,OAAO;QAC9C,OAAO;YACL,MAAM,EAAE,CAAA,EAAG,SAAS,CAAC,KAAK,CAAA,CAAA,EAAI,WAAW,CAAA,CAAA,EAAI,SAAS,CAAC,KAAK,CAAA,CAAE;SAC/D;IACH;AACF;AAeA;AACO,MAAM,cAAc,GAAG,CAC5B,SAAiC,KAChB;AACjB,IAAA,IAAI,CAAC,SAAS;AAAE,QAAA,OAAO,EAAE;AACzB,IAAA,MAAM,QAAQ,GACZ,SAAS,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,KAAK;UAC3C,SAAS,CAAC;AACZ,UAAE,CAAA,EAAG,CAAC,SAAS,IAAI,SAAS,CAAC,OAAO,KAAK,EAAE,CAAA,CAAA,EACvC,CAAC,SAAS,IAAI,SAAS,CAAC,QAAQ,KAAK,EACvC,CAAA,CAAA,EAAI,CAAC,SAAS,IAAI,SAAS,CAAC,WAAW,KAAK,EAAE,CAAA,CAAA,EAC5C,CAAC,SAAS,IAAI,SAAS,CAAC,UAAU,KAAK,EACzC,EAAE;AACR,IAAA,MAAM,OAAO,GAAG,EAAE,YAAY,EAAE,QAAQ,EAAE;AAC1C,IAAA,OAAO,OAAO;AAChB;AAEA;AACO,MAAM,cAAc,GAAG,CAC5B,SAAiC,KAChB;AACjB,IAAA,IAAI,CAAC,SAAS;AAAE,QAAA,OAAO,EAAE;AACzB,IAAA,MAAM,QAAQ,GAAG,CAAA,EAAG,SAAS,CAAC,GAAG,IAAI,SAAS,CAAC,KAAK,CAAA,CAAA,EAAI,SAAS,CAAC,MAAM,CAAA,CAAA,EAAI,SAAS,CAAC,IAAI,EAAE;AAE5F,IAAA,MAAM,OAAO,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE;AACpC,IAAA,OAAO,OAAO;AAChB;AACA;AACO,MAAM,eAAe,GAAG,CAC7B,UAAkC,KACjB;AACjB,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,EAAE;AAC1B,IAAA,MAAM,QAAQ,GAAG,CAAA,EAAG,UAAU,CAAC,GAAG,IAAI,UAAU,CAAC,KAAK,CAAA,CAAA,EAAI,UAAU,CAAC,MAAM,CAAA,CAAA,EAAI,UAAU,CAAC,IAAI,EAAE;AAEhG,IAAA,MAAM,OAAO,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE;AACrC,IAAA,OAAO,OAAO;AAChB;;;;"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { RefObject } from "@wordpress/element";
|
|
2
|
+
import { DependencyList, EffectCallback } from "react";
|
|
3
|
+
export declare function useElementWidth(): (number | import("react").MutableRefObject<null>)[];
|
|
4
|
+
export declare function useIsMobile(): boolean;
|
|
5
|
+
export declare function useIsIframeMobile(): boolean;
|
|
6
|
+
export declare function useElementBackgroundColor(blockRef: RefObject<HTMLElement>, style: React.CSSProperties): string;
|
|
7
|
+
export declare function useElementStyleObject(blockRef: RefObject<HTMLElement>, style: React.CSSProperties): string;
|
|
8
|
+
export declare function useDeepCompareEffect(callback: EffectCallback, dependencies: DependencyList): void;
|
|
9
|
+
export declare function useFontawesomeIframe(): void;
|
|
10
|
+
export declare function useBlockAttributeChanges(clientId: string, blockName: string, className: string, modFlg?: boolean, excludeAttributes?: Record<string, any>): any;
|
|
11
|
+
export declare function useDuplicateBlockRemove(clientId: string, blockNames: string[]): void;
|
|
@@ -0,0 +1,267 @@
|
|
|
1
|
+
import { useRef, useState, useEffect } from '@wordpress/element';
|
|
2
|
+
import { useDispatch, useSelect } from '@wordpress/data';
|
|
3
|
+
import isEqual from 'lodash/isEqual';
|
|
4
|
+
import { __ } from '@wordpress/i18n';
|
|
5
|
+
|
|
6
|
+
//useRefで参照したDOM要素の大きさを取得するカスタムフック
|
|
7
|
+
function useElementWidth() {
|
|
8
|
+
const ref = useRef(null);
|
|
9
|
+
const [width, setWidth] = useState(0);
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
const resizeObserver = new ResizeObserver((entries) => {
|
|
12
|
+
for (let entry of entries) {
|
|
13
|
+
setWidth(entry.contentRect.width);
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
if (ref.current) {
|
|
17
|
+
resizeObserver.observe(ref.current);
|
|
18
|
+
}
|
|
19
|
+
return () => {
|
|
20
|
+
resizeObserver.disconnect();
|
|
21
|
+
};
|
|
22
|
+
}, []);
|
|
23
|
+
return [ref, width];
|
|
24
|
+
}
|
|
25
|
+
//ViewPortの大きさでモバイルを判断(767px以下がモバイル)するカスタムフック
|
|
26
|
+
function useIsMobile() {
|
|
27
|
+
const [isMobile, setIsMobile] = useState(false);
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
if (typeof window !== "undefined") {
|
|
30
|
+
const handleResize = () => {
|
|
31
|
+
setIsMobile(window.innerWidth <= 767);
|
|
32
|
+
};
|
|
33
|
+
window.addEventListener("resize", handleResize);
|
|
34
|
+
return () => {
|
|
35
|
+
window.removeEventListener("resize", handleResize);
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
}, []);
|
|
39
|
+
return isMobile;
|
|
40
|
+
}
|
|
41
|
+
//モバイル表示か否かを判定するフック
|
|
42
|
+
function useIsIframeMobile() {
|
|
43
|
+
const [isMobile, setIsMobile] = useState(false);
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
// iframeのcontentWindowを監視する関数
|
|
46
|
+
const checkIframeSize = () => {
|
|
47
|
+
const iframeInstance = document.getElementsByName("editor-canvas")[0];
|
|
48
|
+
if (iframeInstance && iframeInstance.contentWindow) {
|
|
49
|
+
setIsMobile(iframeInstance.contentWindow.innerWidth <= 767);
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
// iframeのcontentWindowのリサイズイベントにリスナーを追加
|
|
53
|
+
const iframeInstance = document.getElementsByName("editor-canvas")[0];
|
|
54
|
+
if (iframeInstance && iframeInstance.contentWindow) {
|
|
55
|
+
iframeInstance.contentWindow.addEventListener("resize", checkIframeSize);
|
|
56
|
+
}
|
|
57
|
+
// 初期チェックを実行
|
|
58
|
+
checkIframeSize();
|
|
59
|
+
// クリーンアップ関数
|
|
60
|
+
return () => {
|
|
61
|
+
if (iframeInstance && iframeInstance.contentWindow) {
|
|
62
|
+
iframeInstance.contentWindow.removeEventListener("resize", checkIframeSize);
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
}, []);
|
|
66
|
+
return isMobile;
|
|
67
|
+
}
|
|
68
|
+
//ブロックの背景色を取得するカスタムフック
|
|
69
|
+
function useElementBackgroundColor(blockRef, style) {
|
|
70
|
+
const [baseColor, setBaseColor] = useState("");
|
|
71
|
+
useEffect(() => {
|
|
72
|
+
if (blockRef.current && style) {
|
|
73
|
+
if (style.backgroundColor &&
|
|
74
|
+
!style.backgroundColor.startsWith("var(--wp")) {
|
|
75
|
+
//backgroundColorが設定されており、それがカスタムプロパティでない
|
|
76
|
+
setBaseColor(style.backgroundColor);
|
|
77
|
+
}
|
|
78
|
+
else {
|
|
79
|
+
//レンダリング結果から背景色を取得
|
|
80
|
+
if (blockRef.current) {
|
|
81
|
+
const computedStyles = getComputedStyle(blockRef.current);
|
|
82
|
+
setBaseColor(computedStyles.backgroundColor);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}, [style, blockRef]);
|
|
87
|
+
return baseColor;
|
|
88
|
+
}
|
|
89
|
+
//ブロックのスタイルを取得し、コールバック関数を返すカスタムフック
|
|
90
|
+
function useElementStyleObject(blockRef, style) {
|
|
91
|
+
const [styleObject, setStyleObject] = useState("");
|
|
92
|
+
useEffect(() => {
|
|
93
|
+
if (blockRef.current && style) {
|
|
94
|
+
//レンダリング結果に基づくスタイルの取得
|
|
95
|
+
const computedStyles = getComputedStyle(blockRef.current);
|
|
96
|
+
// styleオブジェクトのキーに基づいてnewStyleObjectを生成
|
|
97
|
+
const newStyleObject = Object.keys(style).reduce((acc, key) => {
|
|
98
|
+
// key を keyof typeof computedStyles とみなす、あるいは単純に文字列としてアクセスを許可する
|
|
99
|
+
const styleKey = key;
|
|
100
|
+
if (computedStyles[styleKey]) {
|
|
101
|
+
// computedStylesにキーが存在するか確認
|
|
102
|
+
acc[key] = computedStyles[styleKey];
|
|
103
|
+
}
|
|
104
|
+
return acc;
|
|
105
|
+
}, {});
|
|
106
|
+
setStyleObject(JSON.stringify(newStyleObject));
|
|
107
|
+
}
|
|
108
|
+
}, [blockRef, style]);
|
|
109
|
+
// styleObjectをオブジェクトとして返す
|
|
110
|
+
return styleObject;
|
|
111
|
+
}
|
|
112
|
+
//たくさんの要素をもつオブジェクトや配列の内容の変化で発火するuseEffect
|
|
113
|
+
function useDeepCompareEffect(callback, dependencies) {
|
|
114
|
+
const dependenciesRef = useRef(undefined);
|
|
115
|
+
if (!isEqual(dependencies, dependenciesRef.current)) {
|
|
116
|
+
dependenciesRef.current = dependencies;
|
|
117
|
+
}
|
|
118
|
+
useEffect(() => {
|
|
119
|
+
return callback();
|
|
120
|
+
}, [dependenciesRef.current]);
|
|
121
|
+
}
|
|
122
|
+
function useFontawesomeIframe() {
|
|
123
|
+
//iframeにfontawesomeを読み込む
|
|
124
|
+
useEffect(() => {
|
|
125
|
+
const iframeInstance = document.getElementsByName("editor-canvas")[0];
|
|
126
|
+
if (iframeInstance) {
|
|
127
|
+
const iframeDocument = iframeInstance.contentDocument ||
|
|
128
|
+
iframeInstance.contentWindow?.document;
|
|
129
|
+
if (!iframeDocument) {
|
|
130
|
+
// 存在しない場合はここで終了(ガード)
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
const scriptElement = iframeDocument.createElement("script");
|
|
134
|
+
scriptElement.setAttribute("src", "../../../assets/fontawesome.js");
|
|
135
|
+
//scriptElement.setAttribute("crossorigin", "anonymous");
|
|
136
|
+
iframeDocument.body.appendChild(scriptElement);
|
|
137
|
+
// Return a cleanup function to remove the script tag
|
|
138
|
+
return () => {
|
|
139
|
+
iframeDocument.body?.removeChild(scriptElement);
|
|
140
|
+
};
|
|
141
|
+
}
|
|
142
|
+
}, []);
|
|
143
|
+
}
|
|
144
|
+
//ネストしたブロックを平坦化
|
|
145
|
+
const getFlattenBlocks = (blocks) => {
|
|
146
|
+
return blocks.reduce((acc, block) => {
|
|
147
|
+
acc.push(block);
|
|
148
|
+
if (block.innerBlocks && block.innerBlocks.length > 0) {
|
|
149
|
+
acc.push(...getFlattenBlocks(block.innerBlocks));
|
|
150
|
+
}
|
|
151
|
+
return acc;
|
|
152
|
+
}, []);
|
|
153
|
+
};
|
|
154
|
+
//指定されたブロック名とクラス名を含むブロックの属性が更新されたときその更新内容をかえすフック
|
|
155
|
+
function useBlockAttributeChanges(clientId, blockName, className, modFlg = false, excludeAttributes = {}) {
|
|
156
|
+
const [latestAttributes, setLatestAttributes] = useState(null);
|
|
157
|
+
//const [idleFlg, setIdleFlg] = useState(null);
|
|
158
|
+
const prevBlocksRef = useRef({});
|
|
159
|
+
//属性変更関数を取得
|
|
160
|
+
const { updateBlockAttributes } = useDispatch("core/block-editor");
|
|
161
|
+
//インナーブロックを平坦化する関数
|
|
162
|
+
const flattenedBlocks = useSelect((select) => {
|
|
163
|
+
const { getBlock } = select("core/block-editor");
|
|
164
|
+
const rootBlock = getBlock(clientId);
|
|
165
|
+
return rootBlock ? getFlattenBlocks([rootBlock]) : [];
|
|
166
|
+
}, [clientId]);
|
|
167
|
+
const targetBlocks = flattenedBlocks.filter((block) => block.name === blockName &&
|
|
168
|
+
block.attributes.className?.includes(className));
|
|
169
|
+
useEffect(() => {
|
|
170
|
+
//平坦化されたブロックを調査
|
|
171
|
+
for (const block of targetBlocks) {
|
|
172
|
+
const prevAttributes = prevBlocksRef.current[block.clientId]?.attributes || {};
|
|
173
|
+
//既に先に記録された属性があることをチェック
|
|
174
|
+
if (Object.keys(prevAttributes).length > 0) {
|
|
175
|
+
// 除外する属性を取り除いた属性オブジェクトを作成
|
|
176
|
+
const filteredCurrentAttributes = Object.keys(block.attributes).reduce((acc, key) => {
|
|
177
|
+
if (!(key in excludeAttributes)) {
|
|
178
|
+
acc[key] = block.attributes[key];
|
|
179
|
+
}
|
|
180
|
+
return acc;
|
|
181
|
+
}, {});
|
|
182
|
+
const filteredPrevAttributes = Object.keys(prevAttributes).reduce((acc, key) => {
|
|
183
|
+
if (!(key in excludeAttributes)) {
|
|
184
|
+
acc[key] = prevAttributes[key];
|
|
185
|
+
}
|
|
186
|
+
return acc;
|
|
187
|
+
}, {});
|
|
188
|
+
//属性の変化を比較
|
|
189
|
+
if (JSON.stringify(filteredCurrentAttributes) !==
|
|
190
|
+
JSON.stringify(filteredPrevAttributes)) {
|
|
191
|
+
//確認ダイアログが出ている状態か否かで状態変数を変化させる
|
|
192
|
+
// if (block.attributes.isIdle) {
|
|
193
|
+
// setIdleFlg(true);
|
|
194
|
+
// } else {
|
|
195
|
+
// setIdleFlg(false);
|
|
196
|
+
// }
|
|
197
|
+
//呼び出し元に返すための更新後の属性オブジェクトを格納
|
|
198
|
+
setLatestAttributes(JSON.stringify(filteredCurrentAttributes));
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
// 現在のブロック状態を保存(除外属性も含めて保存)
|
|
202
|
+
prevBlocksRef.current[block.clientId] = { ...block };
|
|
203
|
+
}
|
|
204
|
+
}, [targetBlocks, blockName, className]);
|
|
205
|
+
//innerFlattenedBlocks内の同一種のブロックに対して属性をセットする;
|
|
206
|
+
useEffect(() => {
|
|
207
|
+
//確認ダイアログが処理されたことを確認してからこちらの処理を進める
|
|
208
|
+
if (latestAttributes && modFlg) {
|
|
209
|
+
// const latestAttrObj = JSON.parse(latestAttributes);
|
|
210
|
+
// const setObj = {
|
|
211
|
+
// ...latestAttrObj,
|
|
212
|
+
// className: `auto_attr_change ${latestAttrObj.className}`,
|
|
213
|
+
// };
|
|
214
|
+
targetBlocks.forEach((block) => {
|
|
215
|
+
updateBlockAttributes(block.clientId, JSON.parse(latestAttributes));
|
|
216
|
+
});
|
|
217
|
+
}
|
|
218
|
+
}, [latestAttributes]);
|
|
219
|
+
// 安全なパース処理
|
|
220
|
+
try {
|
|
221
|
+
return latestAttributes ? JSON.parse(latestAttributes) : null;
|
|
222
|
+
}
|
|
223
|
+
catch (e) {
|
|
224
|
+
return null;
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
//インナーブロックが挿入されたとき、指定されたブロック名が存在れば、挿入されたブロックを削除するフック
|
|
228
|
+
function useDuplicateBlockRemove(clientId, blockNames) {
|
|
229
|
+
const { removeBlock } = useDispatch("core/block-editor");
|
|
230
|
+
const { createNotice } = useDispatch("core/notices");
|
|
231
|
+
// clientIdに対応するインナーブロックを取得
|
|
232
|
+
const innerBlocks = useSelect((select) => {
|
|
233
|
+
const { getBlocks } = select("core/block-editor");
|
|
234
|
+
return getBlocks(clientId);
|
|
235
|
+
}, [clientId]);
|
|
236
|
+
// 前回の innerBlocks を保存するための ref
|
|
237
|
+
const prevInnerBlocksRef = useRef(innerBlocks);
|
|
238
|
+
useEffect(() => {
|
|
239
|
+
const prevInnerBlocks = prevInnerBlocksRef.current;
|
|
240
|
+
//先に保存したインナーブロックの中に対象となるブロックが存在しなければ何もしない
|
|
241
|
+
const result = prevInnerBlocks.some((block) => blockNames.includes(block.name));
|
|
242
|
+
if (result) {
|
|
243
|
+
// ブロックが挿入されているか確認(前回と比較)
|
|
244
|
+
if (innerBlocks.length > prevInnerBlocks.length) {
|
|
245
|
+
// 新しく挿入されたブロックを特定
|
|
246
|
+
const newlyInsertedBlock = innerBlocks.find((block) => !prevInnerBlocks.some((prevBlock) => prevBlock.clientId === block.clientId));
|
|
247
|
+
// 新しいブロックが blockNames に含まれている場合、削除
|
|
248
|
+
if (newlyInsertedBlock &&
|
|
249
|
+
blockNames.includes(newlyInsertedBlock.name)) {
|
|
250
|
+
removeBlock(newlyInsertedBlock.clientId);
|
|
251
|
+
// 通知を作成
|
|
252
|
+
createNotice("error", // 通知のタイプ(エラー)
|
|
253
|
+
__("A new block cannot be inserted because a block has already been placed.", "block-collections"), // メッセージ
|
|
254
|
+
{
|
|
255
|
+
type: "snackbar", // 通知のスタイル
|
|
256
|
+
isDismissible: true, // 通知を閉じることができるか
|
|
257
|
+
});
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
// 現在の innerBlocks を次回用に保存
|
|
262
|
+
prevInnerBlocksRef.current = innerBlocks;
|
|
263
|
+
}, [innerBlocks, blockNames, removeBlock, createNotice]);
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
export { useBlockAttributeChanges, useDeepCompareEffect, useDuplicateBlockRemove, useElementBackgroundColor, useElementStyleObject, useElementWidth, useFontawesomeIframe, useIsIframeMobile, useIsMobile };
|
|
267
|
+
//# sourceMappingURL=customHooks.js.map
|