itmar-block-packages 1.10.1 → 2.0.0
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 +78 -2
- package/build/cjs/AnimationBlock.js +107 -0
- package/build/cjs/AnimationBlock.js.map +1 -0
- package/build/cjs/BlockEditWrapper.js +20 -0
- package/build/cjs/BlockEditWrapper.js.map +1 -0
- package/build/cjs/BlockPlace.js +509 -0
- package/build/cjs/BlockPlace.js.map +1 -0
- package/build/cjs/BrockInserter.js +204 -0
- package/build/cjs/BrockInserter.js.map +1 -0
- package/build/cjs/DateElm.js +321 -0
- package/build/cjs/DateElm.js.map +1 -0
- package/build/cjs/DraggableBox.js +143 -0
- package/build/cjs/DraggableBox.js.map +1 -0
- package/build/cjs/GridControls.js +421 -0
- package/build/cjs/GridControls.js.map +1 -0
- package/build/cjs/IconSelectControl.js +167 -0
- package/build/cjs/IconSelectControl.js.map +1 -0
- package/build/cjs/JapaneseHolidays.js +99 -0
- package/build/cjs/JapaneseHolidays.js.map +1 -0
- package/build/cjs/MasonryControl.js +124 -0
- package/build/cjs/MasonryControl.js.map +1 -0
- package/build/cjs/PseudoElm.js +66 -0
- package/build/cjs/PseudoElm.js.map +1 -0
- package/build/cjs/ShadowStyle.js +453 -0
- package/build/cjs/ShadowStyle.js.map +1 -0
- package/build/cjs/SwiperControl.js +267 -0
- package/build/cjs/SwiperControl.js.map +1 -0
- package/build/cjs/ToggleElement.js +17 -0
- package/build/cjs/ToggleElement.js.map +1 -0
- package/build/cjs/TypographyControls.js +151 -0
- package/build/cjs/TypographyControls.js.map +1 -0
- package/build/cjs/UpdateAllPostsBlockAttributes.js +137 -0
- package/build/cjs/UpdateAllPostsBlockAttributes.js.map +1 -0
- package/build/cjs/ZipAddress.js +34 -0
- package/build/cjs/ZipAddress.js.map +1 -0
- package/build/cjs/_virtual/_rollupPluginBabelHelpers.js +117 -0
- package/build/cjs/_virtual/_rollupPluginBabelHelpers.js.map +1 -0
- package/build/cjs/blockStore.js +65 -0
- package/build/cjs/blockStore.js.map +1 -0
- package/build/cjs/cssPropertes.js +157 -0
- package/build/cjs/cssPropertes.js.map +1 -0
- package/build/cjs/customFooks.js +300 -0
- package/build/cjs/customFooks.js.map +1 -0
- package/build/cjs/formatCreate.js +160 -0
- package/build/cjs/formatCreate.js.map +1 -0
- package/build/cjs/hslToRgb.js +133 -0
- package/build/cjs/hslToRgb.js.map +1 -0
- package/build/cjs/index.js +115 -0
- package/build/cjs/index.js.map +1 -0
- package/build/cjs/mediaUpload.js +182 -0
- package/build/cjs/mediaUpload.js.map +1 -0
- package/build/cjs/node_modules/nanoid/index.js +30 -0
- package/build/cjs/node_modules/nanoid/index.js.map +1 -0
- package/build/cjs/node_modules/nanoid/url-alphabet/index.js +7 -0
- package/build/cjs/node_modules/nanoid/url-alphabet/index.js.map +1 -0
- package/build/cjs/shopfiApi.js +188 -0
- package/build/cjs/shopfiApi.js.map +1 -0
- package/build/cjs/validationCheck.js +15 -0
- package/build/cjs/validationCheck.js.map +1 -0
- package/build/cjs/wordpressApi.js +631 -0
- package/build/cjs/wordpressApi.js.map +1 -0
- package/build/esm/AnimationBlock.js +102 -0
- package/build/esm/AnimationBlock.js.map +1 -0
- package/build/esm/BlockEditWrapper.js +16 -0
- package/build/esm/BlockEditWrapper.js.map +1 -0
- package/build/esm/BlockPlace.js +503 -0
- package/build/esm/BlockPlace.js.map +1 -0
- package/build/esm/BrockInserter.js +202 -0
- package/build/esm/BrockInserter.js.map +1 -0
- package/build/esm/DateElm.js +309 -0
- package/build/esm/DateElm.js.map +1 -0
- package/build/esm/DraggableBox.js +138 -0
- package/build/esm/DraggableBox.js.map +1 -0
- package/build/esm/GridControls.js +417 -0
- package/build/esm/GridControls.js.map +1 -0
- package/build/esm/IconSelectControl.js +163 -0
- package/build/esm/IconSelectControl.js.map +1 -0
- package/build/esm/JapaneseHolidays.js +97 -0
- package/build/esm/JapaneseHolidays.js.map +1 -0
- package/{src → build/esm}/MasonryControl.js +108 -113
- package/build/esm/MasonryControl.js.map +1 -0
- package/build/esm/PseudoElm.js +61 -0
- package/build/esm/PseudoElm.js.map +1 -0
- package/build/esm/ShadowStyle.js +448 -0
- package/build/esm/ShadowStyle.js.map +1 -0
- package/{src → build/esm}/SwiperControl.js +265 -265
- package/build/esm/SwiperControl.js.map +1 -0
- package/build/esm/ToggleElement.js +13 -0
- package/build/esm/ToggleElement.js.map +1 -0
- package/build/esm/TypographyControls.js +147 -0
- package/build/esm/TypographyControls.js.map +1 -0
- package/build/esm/UpdateAllPostsBlockAttributes.js +133 -0
- package/build/esm/UpdateAllPostsBlockAttributes.js.map +1 -0
- package/build/esm/ZipAddress.js +32 -0
- package/build/esm/ZipAddress.js.map +1 -0
- package/build/esm/_virtual/_rollupPluginBabelHelpers.js +107 -0
- package/build/esm/_virtual/_rollupPluginBabelHelpers.js.map +1 -0
- package/build/esm/blockStore.js +60 -0
- package/build/esm/blockStore.js.map +1 -0
- package/build/esm/cssPropertes.js +144 -0
- package/build/esm/cssPropertes.js.map +1 -0
- package/{src → build/esm}/customFooks.js +290 -337
- package/build/esm/customFooks.js.map +1 -0
- package/build/esm/formatCreate.js +157 -0
- package/build/esm/formatCreate.js.map +1 -0
- package/build/esm/hslToRgb.js +129 -0
- package/build/esm/hslToRgb.js.map +1 -0
- package/build/esm/index.js +27 -0
- package/build/esm/index.js.map +1 -0
- package/build/esm/mediaUpload.js +176 -0
- package/build/esm/mediaUpload.js.map +1 -0
- package/build/esm/node_modules/nanoid/index.js +27 -0
- package/build/esm/node_modules/nanoid/index.js.map +1 -0
- package/build/esm/node_modules/nanoid/url-alphabet/index.js +5 -0
- package/build/esm/node_modules/nanoid/url-alphabet/index.js.map +1 -0
- package/build/esm/shopfiApi.js +184 -0
- package/build/esm/shopfiApi.js.map +1 -0
- package/build/esm/validationCheck.js +13 -0
- package/build/esm/validationCheck.js.map +1 -0
- package/build/esm/wordpressApi.js +618 -0
- package/build/esm/wordpressApi.js.map +1 -0
- package/package.json +22 -6
- package/build/index.asset.php +0 -1
- package/build/index.js +0 -25
- package/css/editor.css +0 -23
- package/css/editor.css.map +0 -1
- package/img/animation.png +0 -0
- package/img/blockplace.png +0 -0
- package/img/grid.png +0 -0
- package/img/iconControl.png +0 -0
- package/img/pseudo.png +0 -0
- package/img/shadow.png +0 -0
- package/img/typography.png +0 -0
- package/src/AnimationBlock.js +0 -112
- package/src/BlockEditWrapper.js +0 -11
- package/src/BlockPlace.js +0 -904
- package/src/BrockInserter.js +0 -247
- package/src/DateElm.js +0 -354
- package/src/DraggableBox.js +0 -143
- package/src/GridControls.js +0 -462
- package/src/IconSelectControl.js +0 -186
- package/src/PseudoElm.js +0 -54
- package/src/ShadowStyle.js +0 -520
- package/src/ToggleElement.js +0 -18
- package/src/TypographyControls.js +0 -145
- package/src/UpdateAllPostsBlockAttributes.js +0 -127
- package/src/ZipAddress.js +0 -35
- package/src/blockStore.js +0 -75
- package/src/cssPropertes.js +0 -212
- package/src/formatCreate.js +0 -179
- package/src/hslToRgb.js +0 -162
- package/src/index.js +0 -131
- package/src/mediaUpload.js +0 -178
- package/src/shopfiApi.js +0 -187
- package/src/validationCheck.js +0 -10
- package/src/wordpressApi.js +0 -707
- package/webpack.config.js +0 -10
|
@@ -0,0 +1,300 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
|
|
4
|
+
var element = require('@wordpress/element');
|
|
5
|
+
var data = require('@wordpress/data');
|
|
6
|
+
var isEqual = require('lodash/isEqual');
|
|
7
|
+
var i18n = require('@wordpress/i18n');
|
|
8
|
+
|
|
9
|
+
//useRefで参照したDOM要素の大きさを取得するカスタムフック
|
|
10
|
+
function useElementWidth() {
|
|
11
|
+
var ref = element.useRef(null);
|
|
12
|
+
var [width, setWidth] = element.useState(0);
|
|
13
|
+
element.useEffect(() => {
|
|
14
|
+
var resizeObserver = new ResizeObserver(entries => {
|
|
15
|
+
for (var entry of entries) {
|
|
16
|
+
setWidth(entry.contentRect.width);
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
if (ref.current) {
|
|
20
|
+
resizeObserver.observe(ref.current);
|
|
21
|
+
}
|
|
22
|
+
return () => {
|
|
23
|
+
resizeObserver.disconnect();
|
|
24
|
+
};
|
|
25
|
+
}, []);
|
|
26
|
+
return [ref, width];
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
//ViewPortの大きさでモバイルを判断(767px以下がモバイル)するカスタムフック
|
|
30
|
+
function useIsMobile() {
|
|
31
|
+
var [isMobile, setIsMobile] = element.useState(false);
|
|
32
|
+
element.useEffect(() => {
|
|
33
|
+
if (typeof window !== "undefined") {
|
|
34
|
+
var handleResize = () => {
|
|
35
|
+
setIsMobile(window.innerWidth <= 767);
|
|
36
|
+
};
|
|
37
|
+
window.addEventListener("resize", handleResize);
|
|
38
|
+
return () => {
|
|
39
|
+
window.removeEventListener("resize", handleResize);
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
}, []);
|
|
43
|
+
return isMobile;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
//モバイル表示か否かを判定するフック
|
|
47
|
+
function useIsIframeMobile() {
|
|
48
|
+
var [isMobile, setIsMobile] = element.useState(false);
|
|
49
|
+
element.useEffect(() => {
|
|
50
|
+
// iframeのcontentWindowを監視する関数
|
|
51
|
+
var checkIframeSize = () => {
|
|
52
|
+
var iframeInstance = document.getElementsByName("editor-canvas")[0];
|
|
53
|
+
if (iframeInstance && iframeInstance.contentWindow) {
|
|
54
|
+
setIsMobile(iframeInstance.contentWindow.innerWidth <= 767);
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
// iframeのcontentWindowのリサイズイベントにリスナーを追加
|
|
59
|
+
var iframeInstance = document.getElementsByName("editor-canvas")[0];
|
|
60
|
+
if (iframeInstance && iframeInstance.contentWindow) {
|
|
61
|
+
iframeInstance.contentWindow.addEventListener("resize", checkIframeSize);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// 初期チェックを実行
|
|
65
|
+
checkIframeSize();
|
|
66
|
+
|
|
67
|
+
// クリーンアップ関数
|
|
68
|
+
return () => {
|
|
69
|
+
if (iframeInstance && iframeInstance.contentWindow) {
|
|
70
|
+
iframeInstance.contentWindow.removeEventListener("resize", checkIframeSize);
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
}, []);
|
|
74
|
+
return isMobile;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
//ブロックの背景色を取得するカスタムフック
|
|
78
|
+
function useElementBackgroundColor(blockRef, style) {
|
|
79
|
+
var [baseColor, setBaseColor] = element.useState("");
|
|
80
|
+
element.useEffect(() => {
|
|
81
|
+
if (blockRef.current && style) {
|
|
82
|
+
if (style.backgroundColor && !style.backgroundColor.startsWith("var(--wp")) {
|
|
83
|
+
//backgroundColorが設定されており、それがカスタムプロパティでない
|
|
84
|
+
setBaseColor(style.backgroundColor);
|
|
85
|
+
} else {
|
|
86
|
+
//レンダリング結果から背景色を取得
|
|
87
|
+
if (blockRef.current) {
|
|
88
|
+
var computedStyles = getComputedStyle(blockRef.current);
|
|
89
|
+
setBaseColor(computedStyles.backgroundColor);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}, [style, blockRef]);
|
|
94
|
+
return baseColor;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
//ブロックのスタイルを取得し、コールバック関数を返すカスタムフック
|
|
98
|
+
function useElementStyleObject(blockRef, style) {
|
|
99
|
+
var [styleObject, setStyleObject] = element.useState("");
|
|
100
|
+
element.useEffect(() => {
|
|
101
|
+
if (blockRef.current && style) {
|
|
102
|
+
//レンダリング結果に基づくスタイルの取得
|
|
103
|
+
var computedStyles = getComputedStyle(blockRef.current);
|
|
104
|
+
// styleオブジェクトのキーに基づいてnewStyleObjectを生成
|
|
105
|
+
var newStyleObject = Object.keys(style).reduce((acc, key) => {
|
|
106
|
+
if (computedStyles[key]) {
|
|
107
|
+
// computedStylesにキーが存在するか確認
|
|
108
|
+
acc[key] = computedStyles[key];
|
|
109
|
+
}
|
|
110
|
+
return acc;
|
|
111
|
+
}, {});
|
|
112
|
+
setStyleObject(JSON.stringify(newStyleObject));
|
|
113
|
+
}
|
|
114
|
+
}, [blockRef, style]);
|
|
115
|
+
// styleObjectをオブジェクトとして返す
|
|
116
|
+
return styleObject;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
//たくさんの要素をもつオブジェクトや配列の内容の変化で発火するuseEffect
|
|
120
|
+
function useDeepCompareEffect(callback, dependencies) {
|
|
121
|
+
var dependenciesRef = element.useRef();
|
|
122
|
+
if (!isEqual(dependencies, dependenciesRef.current)) {
|
|
123
|
+
dependenciesRef.current = dependencies;
|
|
124
|
+
}
|
|
125
|
+
element.useEffect(() => {
|
|
126
|
+
return callback();
|
|
127
|
+
}, [dependenciesRef.current]);
|
|
128
|
+
}
|
|
129
|
+
function useFontawesomeIframe() {
|
|
130
|
+
//iframeにfontawesomeを読み込む
|
|
131
|
+
element.useEffect(() => {
|
|
132
|
+
var iframeInstance = document.getElementsByName("editor-canvas")[0];
|
|
133
|
+
if (iframeInstance) {
|
|
134
|
+
var iframeDocument = iframeInstance.contentDocument || iframeInstance.contentWindow.document;
|
|
135
|
+
var scriptElement = iframeDocument.createElement("script");
|
|
136
|
+
scriptElement.setAttribute("src", "../../../assets/fontawesome.js");
|
|
137
|
+
//scriptElement.setAttribute("crossorigin", "anonymous");
|
|
138
|
+
|
|
139
|
+
iframeDocument.body.appendChild(scriptElement);
|
|
140
|
+
|
|
141
|
+
// Return a cleanup function to remove the script tag
|
|
142
|
+
return () => {
|
|
143
|
+
var _iframeDocument$body;
|
|
144
|
+
(_iframeDocument$body = iframeDocument.body) === null || _iframeDocument$body === void 0 || _iframeDocument$body.removeChild(scriptElement);
|
|
145
|
+
};
|
|
146
|
+
}
|
|
147
|
+
}, []);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
//ネストしたブロックを平坦化
|
|
151
|
+
var getFlattenBlocks = blocks => {
|
|
152
|
+
return blocks.reduce((acc, block) => {
|
|
153
|
+
acc.push(block);
|
|
154
|
+
if (block.innerBlocks && block.innerBlocks.length > 0) {
|
|
155
|
+
acc.push(...getFlattenBlocks(block.innerBlocks));
|
|
156
|
+
}
|
|
157
|
+
return acc;
|
|
158
|
+
}, []);
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
//指定されたブロック名とクラス名を含むブロックの属性が更新されたときその更新内容をかえすフック
|
|
162
|
+
function useBlockAttributeChanges(clientId, blockName, className) {
|
|
163
|
+
var modFlg = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
|
164
|
+
var excludeAttributes = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
|
|
165
|
+
var [latestAttributes, setLatestAttributes] = element.useState(null);
|
|
166
|
+
//const [idleFlg, setIdleFlg] = useState(null);
|
|
167
|
+
var prevBlocksRef = element.useRef({});
|
|
168
|
+
|
|
169
|
+
//属性変更関数を取得
|
|
170
|
+
var {
|
|
171
|
+
updateBlockAttributes
|
|
172
|
+
} = data.useDispatch("core/block-editor");
|
|
173
|
+
//インナーブロックを平坦化する関数
|
|
174
|
+
var flattenedBlocks = data.useSelect(select => {
|
|
175
|
+
var {
|
|
176
|
+
getBlock
|
|
177
|
+
} = select("core/block-editor");
|
|
178
|
+
var rootBlock = getBlock(clientId);
|
|
179
|
+
return rootBlock ? getFlattenBlocks([rootBlock]) : [];
|
|
180
|
+
}, [clientId]);
|
|
181
|
+
var targetBlocks = flattenedBlocks.filter(block => {
|
|
182
|
+
var _block$attributes$cla;
|
|
183
|
+
return block.name === blockName && ((_block$attributes$cla = block.attributes.className) === null || _block$attributes$cla === void 0 ? void 0 : _block$attributes$cla.includes(className));
|
|
184
|
+
});
|
|
185
|
+
element.useEffect(() => {
|
|
186
|
+
var _loop = function _loop(block) {
|
|
187
|
+
var _prevBlocksRef$curren;
|
|
188
|
+
var prevAttributes = ((_prevBlocksRef$curren = prevBlocksRef.current[block.clientId]) === null || _prevBlocksRef$curren === void 0 ? void 0 : _prevBlocksRef$curren.attributes) || {};
|
|
189
|
+
//既に先に記録された属性があることをチェック
|
|
190
|
+
if (Object.keys(prevAttributes).length > 0) {
|
|
191
|
+
// 除外する属性を取り除いた属性オブジェクトを作成
|
|
192
|
+
var filteredCurrentAttributes = Object.keys(block.attributes).reduce((acc, key) => {
|
|
193
|
+
if (!excludeAttributes.hasOwnProperty(key)) {
|
|
194
|
+
acc[key] = block.attributes[key];
|
|
195
|
+
}
|
|
196
|
+
return acc;
|
|
197
|
+
}, {});
|
|
198
|
+
var filteredPrevAttributes = Object.keys(prevAttributes).reduce((acc, key) => {
|
|
199
|
+
if (!excludeAttributes.hasOwnProperty(key)) {
|
|
200
|
+
acc[key] = prevAttributes[key];
|
|
201
|
+
}
|
|
202
|
+
return acc;
|
|
203
|
+
}, {});
|
|
204
|
+
|
|
205
|
+
//属性の変化を比較
|
|
206
|
+
if (JSON.stringify(filteredCurrentAttributes) !== JSON.stringify(filteredPrevAttributes)) {
|
|
207
|
+
//確認ダイアログが出ている状態か否かで状態変数を変化させる
|
|
208
|
+
// if (block.attributes.isIdle) {
|
|
209
|
+
// setIdleFlg(true);
|
|
210
|
+
// } else {
|
|
211
|
+
// setIdleFlg(false);
|
|
212
|
+
// }
|
|
213
|
+
//呼び出し元に返すための更新後の属性オブジェクトを格納
|
|
214
|
+
|
|
215
|
+
setLatestAttributes(JSON.stringify(filteredCurrentAttributes));
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
// 現在のブロック状態を保存(除外属性も含めて保存)
|
|
219
|
+
prevBlocksRef.current[block.clientId] = _rollupPluginBabelHelpers.objectSpread2({}, block);
|
|
220
|
+
};
|
|
221
|
+
//平坦化されたブロックを調査
|
|
222
|
+
for (var block of targetBlocks) {
|
|
223
|
+
_loop(block);
|
|
224
|
+
}
|
|
225
|
+
}, [targetBlocks, blockName, className]);
|
|
226
|
+
|
|
227
|
+
//innerFlattenedBlocks内の同一種のブロックに対して属性をセットする;
|
|
228
|
+
element.useEffect(() => {
|
|
229
|
+
//確認ダイアログが処理されたことを確認してからこちらの処理を進める
|
|
230
|
+
if (latestAttributes && modFlg) {
|
|
231
|
+
// const latestAttrObj = JSON.parse(latestAttributes);
|
|
232
|
+
// const setObj = {
|
|
233
|
+
// ...latestAttrObj,
|
|
234
|
+
// className: `auto_attr_change ${latestAttrObj.className}`,
|
|
235
|
+
// };
|
|
236
|
+
targetBlocks.forEach(block => {
|
|
237
|
+
updateBlockAttributes(block.clientId, JSON.parse(latestAttributes));
|
|
238
|
+
});
|
|
239
|
+
}
|
|
240
|
+
}, [latestAttributes]);
|
|
241
|
+
return JSON.parse(latestAttributes);
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
//インナーブロックが挿入されたとき、指定されたブロック名が存在れば、挿入されたブロックを削除するフック
|
|
245
|
+
function useDuplicateBlockRemove(clientId, blockNames) {
|
|
246
|
+
var {
|
|
247
|
+
removeBlock
|
|
248
|
+
} = data.useDispatch("core/block-editor");
|
|
249
|
+
var {
|
|
250
|
+
createNotice
|
|
251
|
+
} = data.useDispatch("core/notices");
|
|
252
|
+
|
|
253
|
+
// clientIdに対応するインナーブロックを取得
|
|
254
|
+
var innerBlocks = data.useSelect(select => select("core/block-editor").getBlocks(clientId), [clientId]);
|
|
255
|
+
|
|
256
|
+
// 前回の innerBlocks を保存するための ref
|
|
257
|
+
var prevInnerBlocksRef = element.useRef(innerBlocks);
|
|
258
|
+
element.useEffect(() => {
|
|
259
|
+
var prevInnerBlocks = prevInnerBlocksRef.current;
|
|
260
|
+
//先に保存したインナーブロックの中に対象となるブロックが存在しなければ何もしない
|
|
261
|
+
var result = prevInnerBlocks.some(block => blockNames.includes(block.name));
|
|
262
|
+
if (result) {
|
|
263
|
+
// ブロックが挿入されているか確認(前回と比較)
|
|
264
|
+
if (innerBlocks.length > prevInnerBlocks.length) {
|
|
265
|
+
// 新しく挿入されたブロックを特定
|
|
266
|
+
var newlyInsertedBlock = innerBlocks.find(block => !prevInnerBlocks.some(prevBlock => prevBlock.clientId === block.clientId));
|
|
267
|
+
|
|
268
|
+
// 新しいブロックが blockNames に含まれている場合、削除
|
|
269
|
+
if (newlyInsertedBlock && blockNames.includes(newlyInsertedBlock.name)) {
|
|
270
|
+
removeBlock(newlyInsertedBlock.clientId);
|
|
271
|
+
|
|
272
|
+
// 通知を作成
|
|
273
|
+
createNotice("error",
|
|
274
|
+
// 通知のタイプ(エラー)
|
|
275
|
+
i18n.__("A new block cannot be inserted because a block has already been placed.", "block-collections"),
|
|
276
|
+
// メッセージ
|
|
277
|
+
{
|
|
278
|
+
type: "snackbar",
|
|
279
|
+
// 通知のスタイル
|
|
280
|
+
isDismissible: true // 通知を閉じることができるか
|
|
281
|
+
});
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
// 現在の innerBlocks を次回用に保存
|
|
287
|
+
prevInnerBlocksRef.current = innerBlocks;
|
|
288
|
+
}, [innerBlocks, blockNames, removeBlock, createNotice]);
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
exports.useBlockAttributeChanges = useBlockAttributeChanges;
|
|
292
|
+
exports.useDeepCompareEffect = useDeepCompareEffect;
|
|
293
|
+
exports.useDuplicateBlockRemove = useDuplicateBlockRemove;
|
|
294
|
+
exports.useElementBackgroundColor = useElementBackgroundColor;
|
|
295
|
+
exports.useElementStyleObject = useElementStyleObject;
|
|
296
|
+
exports.useElementWidth = useElementWidth;
|
|
297
|
+
exports.useFontawesomeIframe = useFontawesomeIframe;
|
|
298
|
+
exports.useIsIframeMobile = useIsIframeMobile;
|
|
299
|
+
exports.useIsMobile = useIsMobile;
|
|
300
|
+
//# sourceMappingURL=customFooks.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"customFooks.js","sources":["../../src/customFooks.js"],"sourcesContent":["import { useRef, useEffect, useState } from \"@wordpress/element\";\r\nimport { useSelect, useDispatch } from \"@wordpress/data\";\r\nimport isEqual from \"lodash/isEqual\";\r\nimport { __ } from \"@wordpress/i18n\";\r\n\r\n//useRefで参照したDOM要素の大きさを取得するカスタムフック\r\nexport function useElementWidth() {\r\n const ref = useRef(null);\r\n const [width, setWidth] = useState(0);\r\n\r\n useEffect(() => {\r\n const resizeObserver = new ResizeObserver((entries) => {\r\n for (let entry of entries) {\r\n setWidth(entry.contentRect.width);\r\n }\r\n });\r\n\r\n if (ref.current) {\r\n resizeObserver.observe(ref.current);\r\n }\r\n\r\n return () => {\r\n resizeObserver.disconnect();\r\n };\r\n }, []);\r\n\r\n return [ref, width];\r\n}\r\n\r\n//ViewPortの大きさでモバイルを判断(767px以下がモバイル)するカスタムフック\r\nexport function useIsMobile() {\r\n const [isMobile, setIsMobile] = useState(false);\r\n\r\n useEffect(() => {\r\n if (typeof window !== \"undefined\") {\r\n const handleResize = () => {\r\n setIsMobile(window.innerWidth <= 767);\r\n };\r\n\r\n window.addEventListener(\"resize\", handleResize);\r\n\r\n return () => {\r\n window.removeEventListener(\"resize\", handleResize);\r\n };\r\n }\r\n }, []);\r\n\r\n return isMobile;\r\n}\r\n\r\n//モバイル表示か否かを判定するフック\r\nexport function useIsIframeMobile() {\r\n const [isMobile, setIsMobile] = useState(false);\r\n\r\n useEffect(() => {\r\n // iframeのcontentWindowを監視する関数\r\n const checkIframeSize = () => {\r\n const iframeInstance = document.getElementsByName(\"editor-canvas\")[0];\r\n if (iframeInstance && iframeInstance.contentWindow) {\r\n setIsMobile(iframeInstance.contentWindow.innerWidth <= 767);\r\n }\r\n };\r\n\r\n // iframeのcontentWindowのリサイズイベントにリスナーを追加\r\n const iframeInstance = document.getElementsByName(\"editor-canvas\")[0];\r\n if (iframeInstance && iframeInstance.contentWindow) {\r\n iframeInstance.contentWindow.addEventListener(\"resize\", checkIframeSize);\r\n }\r\n\r\n // 初期チェックを実行\r\n checkIframeSize();\r\n\r\n // クリーンアップ関数\r\n return () => {\r\n if (iframeInstance && iframeInstance.contentWindow) {\r\n iframeInstance.contentWindow.removeEventListener(\r\n \"resize\",\r\n checkIframeSize\r\n );\r\n }\r\n };\r\n }, []);\r\n\r\n return isMobile;\r\n}\r\n\r\n//ブロックの背景色を取得するカスタムフック\r\nexport function useElementBackgroundColor(blockRef, style) {\r\n const [baseColor, setBaseColor] = useState(\"\");\r\n\r\n useEffect(() => {\r\n if (blockRef.current && style) {\r\n if (\r\n style.backgroundColor &&\r\n !style.backgroundColor.startsWith(\"var(--wp\")\r\n ) {\r\n //backgroundColorが設定されており、それがカスタムプロパティでない\r\n setBaseColor(style.backgroundColor);\r\n } else {\r\n //レンダリング結果から背景色を取得\r\n if (blockRef.current) {\r\n const computedStyles = getComputedStyle(blockRef.current);\r\n setBaseColor(computedStyles.backgroundColor);\r\n }\r\n }\r\n }\r\n }, [style, blockRef]);\r\n\r\n return baseColor;\r\n}\r\n\r\n//ブロックのスタイルを取得し、コールバック関数を返すカスタムフック\r\nexport function useElementStyleObject(blockRef, style) {\r\n const [styleObject, setStyleObject] = useState(\"\");\r\n\r\n useEffect(() => {\r\n if (blockRef.current && style) {\r\n //レンダリング結果に基づくスタイルの取得\r\n const computedStyles = getComputedStyle(blockRef.current);\r\n // styleオブジェクトのキーに基づいてnewStyleObjectを生成\r\n const newStyleObject = Object.keys(style).reduce((acc, key) => {\r\n if (computedStyles[key]) {\r\n // computedStylesにキーが存在するか確認\r\n acc[key] = computedStyles[key];\r\n }\r\n return acc;\r\n }, {});\r\n\r\n setStyleObject(JSON.stringify(newStyleObject));\r\n }\r\n }, [blockRef, style]);\r\n // styleObjectをオブジェクトとして返す\r\n return styleObject;\r\n}\r\n\r\n//たくさんの要素をもつオブジェクトや配列の内容の変化で発火するuseEffect\r\nexport function useDeepCompareEffect(callback, dependencies) {\r\n const dependenciesRef = useRef();\r\n\r\n if (!isEqual(dependencies, dependenciesRef.current)) {\r\n dependenciesRef.current = dependencies;\r\n }\r\n\r\n useEffect(() => {\r\n return callback();\r\n }, [dependenciesRef.current]);\r\n}\r\n\r\nexport function useFontawesomeIframe() {\r\n //iframeにfontawesomeを読み込む\r\n useEffect(() => {\r\n const iframeInstance = document.getElementsByName(\"editor-canvas\")[0];\r\n\r\n if (iframeInstance) {\r\n const iframeDocument =\r\n iframeInstance.contentDocument || iframeInstance.contentWindow.document;\r\n const scriptElement = iframeDocument.createElement(\"script\");\r\n scriptElement.setAttribute(\"src\", \"../../../assets/fontawesome.js\");\r\n //scriptElement.setAttribute(\"crossorigin\", \"anonymous\");\r\n\r\n iframeDocument.body.appendChild(scriptElement);\r\n\r\n // Return a cleanup function to remove the script tag\r\n return () => {\r\n iframeDocument.body?.removeChild(scriptElement);\r\n };\r\n }\r\n }, []);\r\n}\r\n\r\n//ネストしたブロックを平坦化\r\nconst getFlattenBlocks = (blocks) => {\r\n return blocks.reduce((acc, block) => {\r\n acc.push(block);\r\n if (block.innerBlocks && block.innerBlocks.length > 0) {\r\n acc.push(...getFlattenBlocks(block.innerBlocks));\r\n }\r\n return acc;\r\n }, []);\r\n};\r\n\r\n//指定されたブロック名とクラス名を含むブロックの属性が更新されたときその更新内容をかえすフック\r\nexport function useBlockAttributeChanges(\r\n clientId,\r\n blockName,\r\n className,\r\n modFlg = false,\r\n excludeAttributes = {}\r\n) {\r\n const [latestAttributes, setLatestAttributes] = useState(null);\r\n //const [idleFlg, setIdleFlg] = useState(null);\r\n const prevBlocksRef = useRef({});\r\n\r\n //属性変更関数を取得\r\n const { updateBlockAttributes } = useDispatch(\"core/block-editor\");\r\n //インナーブロックを平坦化する関数\r\n const flattenedBlocks = useSelect(\r\n (select) => {\r\n const { getBlock } = select(\"core/block-editor\");\r\n const rootBlock = getBlock(clientId);\r\n return rootBlock ? getFlattenBlocks([rootBlock]) : [];\r\n },\r\n [clientId]\r\n );\r\n\r\n const targetBlocks = flattenedBlocks.filter(\r\n (block) =>\r\n block.name === blockName &&\r\n block.attributes.className?.includes(className)\r\n );\r\n\r\n useEffect(() => {\r\n //平坦化されたブロックを調査\r\n for (const block of targetBlocks) {\r\n const prevAttributes =\r\n prevBlocksRef.current[block.clientId]?.attributes || {};\r\n //既に先に記録された属性があることをチェック\r\n if (Object.keys(prevAttributes).length > 0) {\r\n // 除外する属性を取り除いた属性オブジェクトを作成\r\n const filteredCurrentAttributes = Object.keys(block.attributes).reduce(\r\n (acc, key) => {\r\n if (!excludeAttributes.hasOwnProperty(key)) {\r\n acc[key] = block.attributes[key];\r\n }\r\n return acc;\r\n },\r\n {}\r\n );\r\n\r\n const filteredPrevAttributes = Object.keys(prevAttributes).reduce(\r\n (acc, key) => {\r\n if (!excludeAttributes.hasOwnProperty(key)) {\r\n acc[key] = prevAttributes[key];\r\n }\r\n return acc;\r\n },\r\n {}\r\n );\r\n\r\n //属性の変化を比較\r\n if (\r\n JSON.stringify(filteredCurrentAttributes) !==\r\n JSON.stringify(filteredPrevAttributes)\r\n ) {\r\n //確認ダイアログが出ている状態か否かで状態変数を変化させる\r\n // if (block.attributes.isIdle) {\r\n // setIdleFlg(true);\r\n // } else {\r\n // setIdleFlg(false);\r\n // }\r\n //呼び出し元に返すための更新後の属性オブジェクトを格納\r\n\r\n setLatestAttributes(JSON.stringify(filteredCurrentAttributes));\r\n }\r\n }\r\n // 現在のブロック状態を保存(除外属性も含めて保存)\r\n prevBlocksRef.current[block.clientId] = { ...block };\r\n }\r\n }, [targetBlocks, blockName, className]);\r\n\r\n //innerFlattenedBlocks内の同一種のブロックに対して属性をセットする;\r\n useEffect(() => {\r\n //確認ダイアログが処理されたことを確認してからこちらの処理を進める\r\n if (latestAttributes && modFlg) {\r\n // const latestAttrObj = JSON.parse(latestAttributes);\r\n // const setObj = {\r\n // ...latestAttrObj,\r\n // className: `auto_attr_change ${latestAttrObj.className}`,\r\n // };\r\n targetBlocks.forEach((block) => {\r\n updateBlockAttributes(block.clientId, JSON.parse(latestAttributes));\r\n });\r\n }\r\n }, [latestAttributes]);\r\n\r\n return JSON.parse(latestAttributes);\r\n}\r\n\r\n//インナーブロックが挿入されたとき、指定されたブロック名が存在れば、挿入されたブロックを削除するフック\r\nexport function useDuplicateBlockRemove(clientId, blockNames) {\r\n const { removeBlock } = useDispatch(\"core/block-editor\");\r\n const { createNotice } = useDispatch(\"core/notices\");\r\n\r\n // clientIdに対応するインナーブロックを取得\r\n const innerBlocks = useSelect(\r\n (select) => select(\"core/block-editor\").getBlocks(clientId),\r\n [clientId]\r\n );\r\n\r\n // 前回の innerBlocks を保存するための ref\r\n const prevInnerBlocksRef = useRef(innerBlocks);\r\n\r\n useEffect(() => {\r\n const prevInnerBlocks = prevInnerBlocksRef.current;\r\n //先に保存したインナーブロックの中に対象となるブロックが存在しなければ何もしない\r\n const result = prevInnerBlocks.some((block) =>\r\n blockNames.includes(block.name)\r\n );\r\n\r\n if (result) {\r\n // ブロックが挿入されているか確認(前回と比較)\r\n if (innerBlocks.length > prevInnerBlocks.length) {\r\n // 新しく挿入されたブロックを特定\r\n const newlyInsertedBlock = innerBlocks.find(\r\n (block) =>\r\n !prevInnerBlocks.some(\r\n (prevBlock) => prevBlock.clientId === block.clientId\r\n )\r\n );\r\n\r\n // 新しいブロックが blockNames に含まれている場合、削除\r\n if (\r\n newlyInsertedBlock &&\r\n blockNames.includes(newlyInsertedBlock.name)\r\n ) {\r\n removeBlock(newlyInsertedBlock.clientId);\r\n\r\n // 通知を作成\r\n createNotice(\r\n \"error\", // 通知のタイプ(エラー)\r\n __(\r\n \"A new block cannot be inserted because a block has already been placed.\",\r\n \"block-collections\"\r\n ), // メッセージ\r\n {\r\n type: \"snackbar\", // 通知のスタイル\r\n isDismissible: true, // 通知を閉じることができるか\r\n }\r\n );\r\n }\r\n }\r\n }\r\n\r\n // 現在の innerBlocks を次回用に保存\r\n prevInnerBlocksRef.current = innerBlocks;\r\n }, [innerBlocks, blockNames, removeBlock, createNotice]);\r\n}\r\n"],"names":["useElementWidth","ref","useRef","width","setWidth","useState","useEffect","resizeObserver","ResizeObserver","entries","entry","contentRect","current","observe","disconnect","useIsMobile","isMobile","setIsMobile","window","handleResize","innerWidth","addEventListener","removeEventListener","useIsIframeMobile","checkIframeSize","iframeInstance","document","getElementsByName","contentWindow","useElementBackgroundColor","blockRef","style","baseColor","setBaseColor","backgroundColor","startsWith","computedStyles","getComputedStyle","useElementStyleObject","styleObject","setStyleObject","newStyleObject","Object","keys","reduce","acc","key","JSON","stringify","useDeepCompareEffect","callback","dependencies","dependenciesRef","isEqual","useFontawesomeIframe","iframeDocument","contentDocument","scriptElement","createElement","setAttribute","body","appendChild","_iframeDocument$body","removeChild","getFlattenBlocks","blocks","block","push","innerBlocks","length","useBlockAttributeChanges","clientId","blockName","className","modFlg","arguments","undefined","excludeAttributes","latestAttributes","setLatestAttributes","prevBlocksRef","updateBlockAttributes","useDispatch","flattenedBlocks","useSelect","select","getBlock","rootBlock","targetBlocks","filter","_block$attributes$cla","name","attributes","includes","_loop","_prevBlocksRef$curren","prevAttributes","filteredCurrentAttributes","hasOwnProperty","filteredPrevAttributes","_objectSpread","forEach","parse","useDuplicateBlockRemove","blockNames","removeBlock","createNotice","getBlocks","prevInnerBlocksRef","prevInnerBlocks","result","some","newlyInsertedBlock","find","prevBlock","__","type","isDismissible"],"mappings":"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"}
|
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
|
|
4
|
+
var i18n = require('@wordpress/i18n');
|
|
5
|
+
var components = require('@wordpress/components');
|
|
6
|
+
var date = require('@wordpress/date');
|
|
7
|
+
|
|
8
|
+
//日付のフォーマット
|
|
9
|
+
var dateFormats = [{
|
|
10
|
+
label: "YYYY-MM-DD HH:mm:ss",
|
|
11
|
+
value: "Y-m-d H:i:s"
|
|
12
|
+
}, {
|
|
13
|
+
label: "MM/DD/YYYY",
|
|
14
|
+
value: "m/d/Y"
|
|
15
|
+
}, {
|
|
16
|
+
label: "DD/MM/YYYY",
|
|
17
|
+
value: "d/m/Y"
|
|
18
|
+
}, {
|
|
19
|
+
label: "MMMM D, YYYY",
|
|
20
|
+
value: "F j, Y"
|
|
21
|
+
}, {
|
|
22
|
+
label: "HH:mm:ss",
|
|
23
|
+
value: "H:i:s"
|
|
24
|
+
}, {
|
|
25
|
+
label: "YYYY.M.D",
|
|
26
|
+
value: "Y.n.j"
|
|
27
|
+
}, {
|
|
28
|
+
label: "Day, MMMM D, YYYY",
|
|
29
|
+
value: "l, F j, Y"
|
|
30
|
+
}, {
|
|
31
|
+
label: "ddd, MMM D, YYYY",
|
|
32
|
+
value: "D, M j, Y"
|
|
33
|
+
}, {
|
|
34
|
+
label: "YYYY年M月D日 (曜日)",
|
|
35
|
+
value: "Y年n月j日 (l)"
|
|
36
|
+
}];
|
|
37
|
+
//プレーンのフォーマット
|
|
38
|
+
var plaineFormats = [{
|
|
39
|
+
key: "str_free",
|
|
40
|
+
label: i18n.__("Free String", "block-collections"),
|
|
41
|
+
value: "%s"
|
|
42
|
+
}, {
|
|
43
|
+
key: "num_comma",
|
|
44
|
+
label: i18n.__("Numbers (comma separated)", "block-collections"),
|
|
45
|
+
value: {
|
|
46
|
+
style: "decimal",
|
|
47
|
+
useGrouping: true // カンマ区切り
|
|
48
|
+
}
|
|
49
|
+
}, {
|
|
50
|
+
key: "num_no_comma",
|
|
51
|
+
label: i18n.__("Numbers (no commas)", "block-collections"),
|
|
52
|
+
value: {
|
|
53
|
+
style: "decimal",
|
|
54
|
+
useGrouping: false
|
|
55
|
+
}
|
|
56
|
+
}, {
|
|
57
|
+
key: "num_amount",
|
|
58
|
+
label: i18n.__("Amount", "block-collections"),
|
|
59
|
+
value: {
|
|
60
|
+
style: "currency",
|
|
61
|
+
currency: "JPY"
|
|
62
|
+
}
|
|
63
|
+
}];
|
|
64
|
+
var FormatSelectControl = _ref => {
|
|
65
|
+
var {
|
|
66
|
+
titleType,
|
|
67
|
+
userFormat,
|
|
68
|
+
freeStrFormat,
|
|
69
|
+
decimal,
|
|
70
|
+
onFormatChange
|
|
71
|
+
} = _ref;
|
|
72
|
+
var isPlaine = titleType === "plaine";
|
|
73
|
+
var isDate = titleType === "date";
|
|
74
|
+
var isUser = titleType === "user";
|
|
75
|
+
|
|
76
|
+
//SelectControlのオプションを生成
|
|
77
|
+
var options = isDate ? dateFormats : plaineFormats.map(f => ({
|
|
78
|
+
label: f.label,
|
|
79
|
+
value: f.key
|
|
80
|
+
}));
|
|
81
|
+
return /*#__PURE__*/React.createElement(components.PanelBody, {
|
|
82
|
+
title: i18n.__("Display Format Setting", "block-collections")
|
|
83
|
+
}, (isPlaine || isDate) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
84
|
+
label: i18n.__("Select Format", "block-collections"),
|
|
85
|
+
value: userFormat,
|
|
86
|
+
options: options,
|
|
87
|
+
onChange: newFormat => onFormatChange({
|
|
88
|
+
userFormat: newFormat,
|
|
89
|
+
freeStrFormat,
|
|
90
|
+
decimal
|
|
91
|
+
})
|
|
92
|
+
}), (userFormat === null || userFormat === void 0 ? void 0 : userFormat.startsWith("str_")) && /*#__PURE__*/React.createElement(components.TextControl, {
|
|
93
|
+
label: i18n.__("String Format", "block-collections"),
|
|
94
|
+
value: freeStrFormat,
|
|
95
|
+
onChange: newFormat => onFormatChange({
|
|
96
|
+
userFormat,
|
|
97
|
+
freeStrFormat: newFormat,
|
|
98
|
+
decimal
|
|
99
|
+
})
|
|
100
|
+
}), (userFormat === null || userFormat === void 0 ? void 0 : userFormat.startsWith("num_")) && /*#__PURE__*/React.createElement(components.PanelRow, {
|
|
101
|
+
className: "itmar_post_blocks_pannel"
|
|
102
|
+
}, /*#__PURE__*/React.createElement(components.RangeControl, {
|
|
103
|
+
value: decimal,
|
|
104
|
+
label: i18n.__("Decimal Num", "query-blocks"),
|
|
105
|
+
max: 5,
|
|
106
|
+
min: 0,
|
|
107
|
+
onChange: val => onFormatChange({
|
|
108
|
+
userFormat,
|
|
109
|
+
freeStrFormat,
|
|
110
|
+
decimal: val
|
|
111
|
+
})
|
|
112
|
+
}))), isUser && /*#__PURE__*/React.createElement(components.TextControl, {
|
|
113
|
+
label: i18n.__("User Format", "block-collections"),
|
|
114
|
+
value: freeStrFormat,
|
|
115
|
+
onChange: newFormat => onFormatChange({
|
|
116
|
+
userFormat: "str_free",
|
|
117
|
+
freeStrFormat: newFormat,
|
|
118
|
+
decimal
|
|
119
|
+
})
|
|
120
|
+
}));
|
|
121
|
+
};
|
|
122
|
+
var displayFormated = (content, userFormat, freeStrFormat, decimal) => {
|
|
123
|
+
var _getSettings$l10n, _plaineFormats$find;
|
|
124
|
+
// 内部で使用するロケール
|
|
125
|
+
var locale = ((_getSettings$l10n = date.getSettings().l10n) === null || _getSettings$l10n === void 0 ? void 0 : _getSettings$l10n.locale) || "en";
|
|
126
|
+
|
|
127
|
+
//日付にフォーマットがあれば、それで書式設定してリターン
|
|
128
|
+
var isDateFormat = dateFormats.find(f => f.value === userFormat);
|
|
129
|
+
if (isDateFormat) {
|
|
130
|
+
var ret_val = date.format(userFormat, content, date.getSettings());
|
|
131
|
+
return ret_val;
|
|
132
|
+
}
|
|
133
|
+
//数値や文字列のフォーマット
|
|
134
|
+
var selectedFormat = (_plaineFormats$find = plaineFormats.find(f => f.key === userFormat)) === null || _plaineFormats$find === void 0 ? void 0 : _plaineFormats$find.value;
|
|
135
|
+
if (typeof selectedFormat === "object") {
|
|
136
|
+
// Intl.NumberFormat オプション
|
|
137
|
+
try {
|
|
138
|
+
var numeric = parseFloat(content);
|
|
139
|
+
// `selectedFormat` を元に新しいフォーマット設定を生成(mutateしない)
|
|
140
|
+
var options = _rollupPluginBabelHelpers.objectSpread2({}, selectedFormat);
|
|
141
|
+
if (typeof decimal === "number" && decimal > 0) {
|
|
142
|
+
options.minimumFractionDigits = decimal;
|
|
143
|
+
options.maximumFractionDigits = decimal;
|
|
144
|
+
}
|
|
145
|
+
var formatter = new Intl.NumberFormat(locale, options);
|
|
146
|
+
return formatter.format(numeric);
|
|
147
|
+
} catch (e) {
|
|
148
|
+
console.warn("Number format failed:", e);
|
|
149
|
+
return content;
|
|
150
|
+
}
|
|
151
|
+
} else if (typeof selectedFormat === "string") {
|
|
152
|
+
return freeStrFormat.replace("%s", content);
|
|
153
|
+
}
|
|
154
|
+
//フォーマットが見つからないときはそのまま返す
|
|
155
|
+
return content;
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
exports.FormatSelectControl = FormatSelectControl;
|
|
159
|
+
exports.displayFormated = displayFormated;
|
|
160
|
+
//# sourceMappingURL=formatCreate.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"formatCreate.js","sources":["../../src/formatCreate.js"],"sourcesContent":["import { __ } from \"@wordpress/i18n\";\r\nimport {\r\n PanelBody,\r\n PanelRow,\r\n RangeControl,\r\n TextControl,\r\n SelectControl,\r\n} from \"@wordpress/components\";\r\nimport { format, getSettings } from \"@wordpress/date\";\r\n\r\n//日付のフォーマット\r\nconst dateFormats = [\r\n { label: \"YYYY-MM-DD HH:mm:ss\", value: \"Y-m-d H:i:s\" },\r\n { label: \"MM/DD/YYYY\", value: \"m/d/Y\" },\r\n { label: \"DD/MM/YYYY\", value: \"d/m/Y\" },\r\n { label: \"MMMM D, YYYY\", value: \"F j, Y\" },\r\n { label: \"HH:mm:ss\", value: \"H:i:s\" },\r\n { label: \"YYYY.M.D\", value: \"Y.n.j\" },\r\n { label: \"Day, MMMM D, YYYY\", value: \"l, F j, Y\" },\r\n { label: \"ddd, MMM D, YYYY\", value: \"D, M j, Y\" },\r\n { label: \"YYYY年M月D日 (曜日)\", value: \"Y年n月j日 (l)\" },\r\n];\r\n//プレーンのフォーマット\r\nconst plaineFormats = [\r\n {\r\n key: \"str_free\",\r\n label: __(\"Free String\", \"block-collections\"),\r\n value: \"%s\",\r\n },\r\n {\r\n key: \"num_comma\",\r\n label: __(\"Numbers (comma separated)\", \"block-collections\"),\r\n value: {\r\n style: \"decimal\",\r\n useGrouping: true, // カンマ区切り\r\n },\r\n },\r\n {\r\n key: \"num_no_comma\",\r\n label: __(\"Numbers (no commas)\", \"block-collections\"),\r\n value: {\r\n style: \"decimal\",\r\n useGrouping: false,\r\n },\r\n },\r\n {\r\n key: \"num_amount\",\r\n label: __(\"Amount\", \"block-collections\"),\r\n value: {\r\n style: \"currency\",\r\n currency: \"JPY\",\r\n },\r\n },\r\n];\r\n\r\nexport const FormatSelectControl = ({\r\n titleType,\r\n userFormat,\r\n freeStrFormat,\r\n decimal,\r\n onFormatChange,\r\n}) => {\r\n const isPlaine = titleType === \"plaine\";\r\n const isDate = titleType === \"date\";\r\n const isUser = titleType === \"user\";\r\n\r\n //SelectControlのオプションを生成\r\n const options = isDate\r\n ? dateFormats\r\n : plaineFormats.map((f) => ({ label: f.label, value: f.key }));\r\n\r\n return (\r\n <PanelBody title={__(\"Display Format Setting\", \"block-collections\")}>\r\n {(isPlaine || isDate) && (\r\n <>\r\n <SelectControl\r\n label={__(\"Select Format\", \"block-collections\")}\r\n value={userFormat}\r\n options={options}\r\n onChange={(newFormat) =>\r\n onFormatChange({\r\n userFormat: newFormat,\r\n freeStrFormat,\r\n decimal,\r\n })\r\n }\r\n />\r\n\r\n {userFormat?.startsWith(\"str_\") && (\r\n <TextControl\r\n label={__(\"String Format\", \"block-collections\")}\r\n value={freeStrFormat}\r\n onChange={(newFormat) =>\r\n onFormatChange({\r\n userFormat,\r\n freeStrFormat: newFormat,\r\n decimal,\r\n })\r\n }\r\n />\r\n )}\r\n {userFormat?.startsWith(\"num_\") && (\r\n <PanelRow className=\"itmar_post_blocks_pannel\">\r\n <RangeControl\r\n value={decimal}\r\n label={__(\"Decimal Num\", \"query-blocks\")}\r\n max={5}\r\n min={0}\r\n onChange={(val) =>\r\n onFormatChange({\r\n userFormat,\r\n freeStrFormat,\r\n decimal: val,\r\n })\r\n }\r\n />\r\n </PanelRow>\r\n )}\r\n </>\r\n )}\r\n\r\n {isUser && (\r\n <TextControl\r\n label={__(\"User Format\", \"block-collections\")}\r\n value={freeStrFormat}\r\n onChange={(newFormat) =>\r\n onFormatChange({\r\n userFormat: \"str_free\",\r\n freeStrFormat: newFormat,\r\n decimal,\r\n })\r\n }\r\n />\r\n )}\r\n </PanelBody>\r\n );\r\n};\r\n\r\nexport const displayFormated = (\r\n content,\r\n userFormat,\r\n freeStrFormat,\r\n decimal\r\n) => {\r\n // 内部で使用するロケール\r\n const locale = getSettings().l10n?.locale || \"en\";\r\n\r\n //日付にフォーマットがあれば、それで書式設定してリターン\r\n const isDateFormat = dateFormats.find((f) => f.value === userFormat);\r\n if (isDateFormat) {\r\n const ret_val = format(userFormat, content, getSettings());\r\n return ret_val;\r\n }\r\n //数値や文字列のフォーマット\r\n const selectedFormat = plaineFormats.find((f) => f.key === userFormat)?.value;\r\n if (typeof selectedFormat === \"object\") {\r\n // Intl.NumberFormat オプション\r\n try {\r\n const numeric = parseFloat(content);\r\n // `selectedFormat` を元に新しいフォーマット設定を生成(mutateしない)\r\n const options = { ...selectedFormat };\r\n\r\n if (typeof decimal === \"number\" && decimal > 0) {\r\n options.minimumFractionDigits = decimal;\r\n options.maximumFractionDigits = decimal;\r\n }\r\n\r\n const formatter = new Intl.NumberFormat(locale, options);\r\n return formatter.format(numeric);\r\n } catch (e) {\r\n console.warn(\"Number format failed:\", e);\r\n return content;\r\n }\r\n } else if (typeof selectedFormat === \"string\") {\r\n return freeStrFormat.replace(\"%s\", content);\r\n }\r\n //フォーマットが見つからないときはそのまま返す\r\n return content;\r\n};\r\n"],"names":["dateFormats","label","value","plaineFormats","key","__","style","useGrouping","currency","FormatSelectControl","_ref","titleType","userFormat","freeStrFormat","decimal","onFormatChange","isPlaine","isDate","isUser","options","map","f","React","createElement","PanelBody","title","Fragment","SelectControl","onChange","newFormat","startsWith","TextControl","PanelRow","className","RangeControl","max","min","val","displayFormated","content","_getSettings$l10n","_plaineFormats$find","locale","getSettings","l10n","isDateFormat","find","ret_val","format","selectedFormat","numeric","parseFloat","_objectSpread","minimumFractionDigits","maximumFractionDigits","formatter","Intl","NumberFormat","e","console","warn","replace"],"mappings":"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"}
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var createRGB = inputStr => {
|
|
4
|
+
//16進数変換の関数
|
|
5
|
+
function componentToHex(c) {
|
|
6
|
+
var hex = parseInt(c, 10).toString(16);
|
|
7
|
+
return hex.length === 1 ? "0" + hex : hex;
|
|
8
|
+
}
|
|
9
|
+
var resultStr;
|
|
10
|
+
var rgb = [];
|
|
11
|
+
|
|
12
|
+
// #000000 形式の場合
|
|
13
|
+
if (/^#[0-9a-fA-F]{6}$/.test(inputStr)) {
|
|
14
|
+
rgb = [inputStr.slice(1, 3), inputStr.slice(3, 5), inputStr.slice(5, 7)];
|
|
15
|
+
}
|
|
16
|
+
// rgb(0,0,0) 形式の場合
|
|
17
|
+
else if (resultStr = inputStr.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)) {
|
|
18
|
+
rgb = [componentToHex(resultStr[1]), componentToHex(resultStr[2]), componentToHex(resultStr[3])];
|
|
19
|
+
} else {
|
|
20
|
+
// サポートされていない形式の場合はデフォルトの値を設定する
|
|
21
|
+
rgb = ["ff", "ff", "ff"];
|
|
22
|
+
}
|
|
23
|
+
return rgb;
|
|
24
|
+
};
|
|
25
|
+
function hslToRgb16(hue, saturation, lightness) {
|
|
26
|
+
var result = false;
|
|
27
|
+
if ((hue || hue === 0) && hue <= 360 && (saturation || saturation === 0) && saturation <= 100 && (lightness || lightness === 0) && lightness <= 100) {
|
|
28
|
+
var red = 0,
|
|
29
|
+
green = 0,
|
|
30
|
+
blue = 0,
|
|
31
|
+
q = 0,
|
|
32
|
+
p = 0,
|
|
33
|
+
hueToRgb;
|
|
34
|
+
hue = Number(hue) / 360;
|
|
35
|
+
saturation = Number(saturation) / 100;
|
|
36
|
+
lightness = Number(lightness) / 100;
|
|
37
|
+
if (saturation === 0) {
|
|
38
|
+
red = lightness;
|
|
39
|
+
green = lightness;
|
|
40
|
+
blue = lightness;
|
|
41
|
+
} else {
|
|
42
|
+
hueToRgb = function hueToRgb(p, q, t) {
|
|
43
|
+
if (t < 0) t += 1;
|
|
44
|
+
if (t > 1) t -= 1;
|
|
45
|
+
if (t < 1 / 6) {
|
|
46
|
+
p += (q - p) * 6 * t;
|
|
47
|
+
} else if (t < 1 / 2) {
|
|
48
|
+
p = q;
|
|
49
|
+
} else if (t < 2 / 3) {
|
|
50
|
+
p += (q - p) * (2 / 3 - t) * 6;
|
|
51
|
+
}
|
|
52
|
+
return p;
|
|
53
|
+
};
|
|
54
|
+
if (lightness < 0.5) {
|
|
55
|
+
q = lightness * (1 + saturation);
|
|
56
|
+
} else {
|
|
57
|
+
q = lightness + saturation - lightness * saturation;
|
|
58
|
+
}
|
|
59
|
+
p = 2 * lightness - q;
|
|
60
|
+
red = hueToRgb(p, q, hue + 1 / 3);
|
|
61
|
+
green = hueToRgb(p, q, hue);
|
|
62
|
+
blue = hueToRgb(p, q, hue - 1 / 3);
|
|
63
|
+
}
|
|
64
|
+
result = "#".concat(Math.round(red * 255).toString(16).padStart(2, '0')).concat(Math.round(green * 255).toString(16).padStart(2, '0')).concat(Math.round(blue * 255).toString(16).padStart(2, '0'));
|
|
65
|
+
}
|
|
66
|
+
return result;
|
|
67
|
+
}
|
|
68
|
+
function rgb16ToHsl(strRgb16) {
|
|
69
|
+
var rgb = createRGB(strRgb16);
|
|
70
|
+
var red = rgb[0];
|
|
71
|
+
var green = rgb[1];
|
|
72
|
+
var blue = rgb[2];
|
|
73
|
+
var result = false;
|
|
74
|
+
if ((red || red === 0) && String(red).match(/^[0-9a-f]{2}$/i) && (green || green === 0) && String(green).match(/^[0-9a-f]{2}$/i) && (blue || blue === 0) && String(blue).match(/^[0-9a-f]{2}$/i)) {
|
|
75
|
+
var hue = 0,
|
|
76
|
+
saturation = 0,
|
|
77
|
+
lightness = 0,
|
|
78
|
+
max = 0,
|
|
79
|
+
min = 0,
|
|
80
|
+
diff = 0;
|
|
81
|
+
red = parseInt(red, 16) / 255;
|
|
82
|
+
green = parseInt(green, 16) / 255;
|
|
83
|
+
blue = parseInt(blue, 16) / 255;
|
|
84
|
+
max = Math.max(red, green, blue);
|
|
85
|
+
min = Math.min(red, green, blue);
|
|
86
|
+
lightness = (max + min) / 2;
|
|
87
|
+
if (max !== min) {
|
|
88
|
+
diff = max - min;
|
|
89
|
+
if (lightness > 0.5) {
|
|
90
|
+
saturation = diff / (2 - max - min);
|
|
91
|
+
} else {
|
|
92
|
+
saturation = diff / (max + min);
|
|
93
|
+
}
|
|
94
|
+
if (max === red) {
|
|
95
|
+
hue = (green - blue) / diff;
|
|
96
|
+
} else if (max === green) {
|
|
97
|
+
hue = 2 + (blue - red) / diff;
|
|
98
|
+
} else {
|
|
99
|
+
hue = 4 + (red - green) / diff;
|
|
100
|
+
}
|
|
101
|
+
hue /= 6;
|
|
102
|
+
}
|
|
103
|
+
result = {
|
|
104
|
+
hue: Math.round(hue * 360),
|
|
105
|
+
saturation: Math.round(saturation * 100),
|
|
106
|
+
lightness: Math.round(lightness * 100)
|
|
107
|
+
};
|
|
108
|
+
}
|
|
109
|
+
return result;
|
|
110
|
+
}
|
|
111
|
+
function HexToRGB(strRgb16) {
|
|
112
|
+
var rgb = createRGB(strRgb16);
|
|
113
|
+
var red = rgb[0];
|
|
114
|
+
var green = rgb[1];
|
|
115
|
+
var blue = rgb[2];
|
|
116
|
+
var result = false;
|
|
117
|
+
if ((red || red === 0) && String(red).match(/^[0-9a-f]{2}$/i) && (green || green === 0) && String(green).match(/^[0-9a-f]{2}$/i) && (blue || blue === 0) && String(blue).match(/^[0-9a-f]{2}$/i)) {
|
|
118
|
+
red = parseInt(red, 16);
|
|
119
|
+
green = parseInt(green, 16);
|
|
120
|
+
blue = parseInt(blue, 16);
|
|
121
|
+
result = {
|
|
122
|
+
red: Math.round(red),
|
|
123
|
+
green: Math.round(green),
|
|
124
|
+
blue: Math.round(blue)
|
|
125
|
+
};
|
|
126
|
+
}
|
|
127
|
+
return result;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
exports.HexToRGB = HexToRGB;
|
|
131
|
+
exports.hslToRgb16 = hslToRgb16;
|
|
132
|
+
exports.rgb16ToHsl = rgb16ToHsl;
|
|
133
|
+
//# sourceMappingURL=hslToRgb.js.map
|