itmar-block-packages 1.0.0 → 1.0.1

package/src/ShadowElm.js

@@ -0,0 +1,235 @@
+import { __ } from "@wordpress/i18n";
+import { dispatch } from "@wordpress/data";
+import { hslToRgb16, HexToRGB, rgb16ToHsl } from "./hslToRgb";
+
+//方向と距離
+const dirctionDigit = (direction, distance) => {
+  let destTopLeft, destTopRight, destBottomLeft, destBottomRight;
+  switch (direction) {
+    case "top_left":
+      destTopLeft = distance;
+      destTopRight = distance;
+      destBottomLeft = distance * -1;
+      destBottomRight = distance * -1;
+      break;
+    case "top_right":
+      destTopLeft = distance * -1;
+      destTopRight = distance;
+      destBottomLeft = distance;
+      destBottomRight = distance * -1;
+      break;
+    case "bottom_left":
+      destTopLeft = distance;
+      destTopRight = distance * -1;
+      destBottomLeft = distance * -1;
+      destBottomRight = distance;
+      break;
+    case "bottom_right":
+      destTopLeft = distance * -1;
+      destTopRight = distance * -1;
+      destBottomLeft = distance;
+      destBottomRight = distance;
+      break;
+    case "right_bottom":
+      destTopLeft = distance;
+      destTopRight = distance * -1;
+      destBottomLeft = distance * -1;
+      destBottomRight = distance;
+      break;
+    case "top":
+      destTopLeft = 0;
+      destTopRight = 0;
+      destBottomLeft = distance * -1;
+      destBottomRight = distance;
+      break;
+  }
+  return {
+    topLeft: destTopLeft,
+    topRight: destTopRight,
+    bottomLeft: destBottomLeft,
+    bottmRight: destBottomRight,
+  };
+};
+
+// グラデーションの色値は通常'linear-gradient'または'radial-gradient'で始まるので、
+// これらのキーワードを探すことでグラデーションかどうかを判断します。
+function isGradient(colorValue) {
+  return (
+    colorValue.includes("linear-gradient") ||
+    colorValue.includes("radial-gradient")
+  );
+}
+
+export const ShadowElm = (shadowState) => {
+  //let baseColor;
+  const {
+    shadowType,
+    spread,
+    lateral,
+    longitude,
+    nomalBlur,
+    shadowColor,
+    blur,
+    intensity,
+    distance,
+    newDirection,
+    clayDirection,
+    embos,
+    opacity,
+    depth,
+    bdBlur,
+    expand,
+    glassblur,
+    glassopa,
+    hasOutline,
+    baseColor,
+  } = shadowState;
+
+  //ノーマル
+  if (shadowType === "nomal") {
+    //boxshadowの生成
+    const ShadowStyle =
+      embos === "dent"
+        ? {
+            style: {
+              boxShadow: `${lateral}px ${longitude}px ${nomalBlur}px ${spread}px transparent, inset ${lateral}px ${longitude}px ${nomalBlur}px ${spread}px ${shadowColor}`,
+            },
+          }
+        : {
+            style: {
+              boxShadow: `${lateral}px ${longitude}px ${nomalBlur}px ${spread}px ${shadowColor}, inset ${lateral}px ${longitude}px ${nomalBlur}px ${spread}px transparent`,
+            },
+          };
+    //Shadowのスタイルを返す
+    return ShadowStyle;
+  }
+  //ニューモフィズム
+  else if (shadowType === "newmor") {
+    //背景がグラデーションのときはセットしない
+    if (isGradient(baseColor)) {
+      dispatch("core/notices").createNotice(
+        "error",
+        __(
+          "Neumorphism cannot be set when the background color is a gradient. ",
+          "itmar_guest_contact_block"
+        ),
+        { type: "snackbar", isDismissible: true }
+      );
+      return null;
+    }
+    //ボタン背景色のHSL値
+    const hslValue = rgb16ToHsl(baseColor);
+    //影の明るさを変更
+    const lightVal =
+      hslValue.lightness + intensity < 100
+        ? hslValue.lightness + intensity
+        : 100;
+    const darkVal =
+      hslValue.lightness - intensity > 0 ? hslValue.lightness - intensity : 0;
+    const lightValue = hslToRgb16(hslValue.hue, hslValue.saturation, lightVal);
+    const darkValue = hslToRgb16(hslValue.hue, hslValue.saturation, darkVal);
+    //boxshadowの生成
+    //立体の方向
+    const dircObj = dirctionDigit(newDirection, distance);
+
+    const baseStyle = {
+      style: {
+        border: "none",
+        background: baseColor,
+      },
+    };
+
+    const newmorStyle =
+      embos === "swell"
+        ? {
+            style: {
+              ...baseStyle.style,
+              boxShadow: `${dircObj.topLeft}px ${dircObj.topRight}px ${blur}px ${darkValue}, ${dircObj.bottomLeft}px ${dircObj.bottmRight}px ${blur}px ${lightValue}, inset ${dircObj.topLeft}px ${dircObj.topRight}px ${blur}px transparent, inset ${dircObj.bottomLeft}px ${dircObj.bottmRight}px ${blur}px transparent`,
+            },
+          }
+        : {
+            style: {
+              ...baseStyle.style,
+              boxShadow: `${dircObj.topLeft}px ${dircObj.topRight}px ${blur}px transparent, ${dircObj.bottomLeft}px ${dircObj.bottmRight}px ${blur}px transparent, inset ${dircObj.topLeft}px ${dircObj.topRight}px ${blur}px ${darkValue}, inset ${dircObj.bottomLeft}px ${dircObj.bottmRight}px ${blur}px ${lightValue}`,
+            },
+          };
+
+    //Shadowのスタイルを返す
+    return newmorStyle;
+  }
+
+  //クレイモーフィズム
+  else if (shadowType === "claymor") {
+    //背景がグラデーションのときはセットしない
+    if (isGradient(baseColor)) {
+      dispatch("core/notices").createNotice(
+        "error",
+        __(
+          "claymorphism cannot be set when the background color is a gradient. ",
+          "itmar_guest_contact_block"
+        ),
+        { type: "snackbar", isDismissible: true }
+      );
+      return null;
+    }
+    const rgbValue = HexToRGB(baseColor);
+    const outsetObj = dirctionDigit(clayDirection, expand);
+    const insetObj = dirctionDigit(clayDirection, depth);
+    const baseStyle = {
+      style: {
+        background: `rgba(255, 255, 255, ${opacity})`,
+        backdropFilter: `blur(${bdBlur}px)`,
+        border: "none",
+      },
+    };
+    const claymorStyle = {
+      ...baseStyle,
+      style: {
+        ...baseStyle.style,
+        boxShadow: `${outsetObj.topLeft}px ${outsetObj.bottmRight}px ${
+          expand * 2
+        }px 0px rgba(${rgbValue.red}, ${rgbValue.green}, ${
+          rgbValue.blue
+        }, 0.5), inset ${insetObj.topRight}px ${
+          insetObj.bottomLeft
+        }px 16px 0px rgba(${rgbValue.red}, ${rgbValue.green}, ${
+          rgbValue.blue
+        }, 0.6), inset 0px 11px 28px 0px rgb(255, 255, 255)`,
+      },
+    };
+    //attributesに保存
+    return claymorStyle;
+  }
+
+  //グラスモーフィズム
+  else if (shadowType === "glassmor") {
+    const baseStyle = {
+      style: {
+        backgroundColor: `rgba(255, 255, 255, ${glassopa})`,
+        ...(hasOutline ? { border: `1px solid rgba(255, 255, 255, 0.4)` } : {}),
+        borderRightColor: `rgba(255, 255, 255, 0.2)`,
+        borderBottomColor: `rgba(255, 255, 255, 0.2)`,
+        backdropFilter: `blur( ${glassblur}px )`,
+      },
+    };
+    const glassmorStyle =
+      embos === "swell"
+        ? {
+            ...baseStyle,
+            style: {
+              ...baseStyle.style,
+              boxShadow: `0 8px 12px 0 rgba( 31, 38, 135, 0.37 ), inset 0 8px 12px 0 transparent`,
+            },
+          }
+        : {
+            ...baseStyle,
+            style: {
+              ...baseStyle.style,
+              boxShadow: `0 8px 12px 0 transparent, inset 0 8px 12px 0 rgba( 31, 38, 135, 0.37 )`,
+            },
+          };
+
+    //attributesに保存
+    return glassmorStyle;
+  }
+};

package/src/draggingFook.js

@@ -0,0 +1,88 @@
+import { useEffect, useRef } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+
+export const useDraggingMove = (
+  isMovable,
+  blockRef,
+  position,
+  onPositionChange
+) => {
+  const elmposition = useRef({ x: 0, y: 0 });
+  const isDragging = useRef(false);
+  const mousePosition = useRef({ x: 0, y: 0 });
+
+  useEffect(() => {
+    const element = blockRef.current;
+
+    if (!isMovable) {
+      if (element) {
+        element.classList.remove("itmar_isDraggable"); //移動カーソル表示クラス削除
+      }
+      return; // 移動許可がある場合のみ、後続のロジックを実行
+    }
+    //positionの変化に合わせて現在位置を変更
+    const pos_value_x = position.x.match(/(-?\d+)([%a-zA-Z]+)/);
+    const pos_value_y = position.y.match(/(-?\d+)([%a-zA-Z]+)/);
+    elmposition.current = {
+      x: parseInt(pos_value_x[1]),
+      y: parseInt(pos_value_y[1]),
+    };
+
+    //イベントハンドラ
+    const handleMouseDown = (event) => {
+      // 移動カーソル表示クラス名を追加します。
+      element.classList.add("itmar_isDraggable");
+      //ドラッグの開始フラグオン
+      isDragging.current = true;
+      //ドラッグ開始の絶対位置
+      mousePosition.current = { x: event.clientX, y: event.clientY };
+    };
+
+    const handleMouseMove = (event) => {
+      if (!isDragging.current) return; //ドラッグ中でなければ処理を中止
+      const dx = event.clientX - mousePosition.current.x;
+      const dy = event.clientY - mousePosition.current.y;
+      //ドラッグ後の位置を保存
+      const newPosition = {
+        x: elmposition.current.x + dx,
+        y: elmposition.current.y + dy,
+      };
+      elmposition.current = newPosition;
+      mousePosition.current = { x: event.clientX, y: event.clientY }; //マウス位置の保存
+      //ドラッグによるブロックの一時的移動
+      element.style.transform = `translate(${elmposition.current.x}px, ${elmposition.current.y}px)`;
+    };
+
+    const handleMouseUp = () => {
+      isDragging.current = false;
+      element.style.transform = null;
+      //呼出しもとに要素の位置を返す
+      onPositionChange({
+        x: `${elmposition.current.x}px`,
+        y: `${elmposition.current.y}px`,
+      });
+    };
+    const handleMouseLeave = () => {
+      isDragging.current = false;
+    };
+
+    if (element) {
+      // クラス名を追加します。
+      element.classList.add("itmar_isDraggable");
+    }
+    // イベントハンドラを追加します。
+    element.addEventListener("mousedown", handleMouseDown);
+    element.addEventListener("mousemove", handleMouseMove);
+    element.addEventListener("mouseup", handleMouseUp);
+    element.addEventListener("mouseleave", handleMouseLeave);
+
+    // イベントリスナーを削除するクリーンアップ関数を返します。
+    return () => {
+      element.removeEventListener("mousedown", handleMouseDown);
+      element.removeEventListener("mousemove", handleMouseMove);
+      element.removeEventListener("mouseup", handleMouseUp);
+      element.removeEventListener("mouseleave", handleMouseLeave);
+      element.style.transform = null;
+    };
+  }, [isMovable, blockRef, position, onPositionChange]); // 依存配列に isMovable を含めます
+};

package/{index.js → src/index.js}

@@ -8,28 +8,31 @@ export {
   useFontawesomeIframe,
 } from "./customFooks";
 
-//styled-componet用のcssプロパティ生成関数
-export {
-  radius_prm,
-  space_prm,
-  max_width_prm,
-  width_prm,
-  align_prm,
-  convertToScss,
-  borderProperty,
-} from "./cssPropertes";
+//ボックスシャドーを設定するコントロール
+export { ShadowElm } from "./ShadowElm";
+export { default as ShadowCtrl } from "./ShadowCtrl";
 
 //疑似要素を設定するコントロール
-export { default as PseudoElm, Arrow } from "./pseudo";
+export { Arrow } from "./Arrow";
+export { default as PseudoElm } from "./PseudoElm";
 
 //メディアライブラリから複数の画像を選択するコントロール
 export { MultiImageSelect } from "./mediaUpload";
 
-//ボックスシャドーを設定するコントロール
-export { default as ShadowStyle, ShadowElm } from "./ShadowStyle";
-
 //ブロックのドラッガブルを設定するコントロール
-export { default as DraggableBox, useDraggingMove } from "./DraggableBox";
+export { default as DraggableBox } from "./DraggableBox";
+export { useDraggingMove } from "./draggingFook";
 
 //ブロックをlazy Loadさせるためのラッパーモジュール
 export { default as BlockEditWrapper } from "./BlockEditWrapper";
+
+//styled-componet用のcssプロパティ生成関数
+export {
+  radius_prm,
+  space_prm,
+  max_width_prm,
+  width_prm,
+  align_prm,
+  convertToScss,
+  borderProperty,
+} from "./cssPropertes";

package/src/mediaUpload.js

@@ -0,0 +1,70 @@
+import { MediaUpload, MediaUploadCheck } from "@wordpress/block-editor";
+import { __ } from "@wordpress/i18n";
+import { Button, PanelBody } from "@wordpress/components";
+
+export function MultiImageSelect(props) {
+  const { attributes, label } = props;
+  const { mediaID, media } = attributes;
+
+  //URL の配列から画像を生成
+  const getImages = (media) => {
+    //メディアオブジェクトの配列をループ処理
+    let imagesArray = media.map((image, index) => {
+      return (
+        <figure key={index}>
+          <img src={image.url} className="image" alt="アップロード画像" />
+          <figcaption className="block-image-caption">
+            {image.caption ? image.caption : ""}
+          </figcaption>
+        </figure>
+      );
+    });
+    return imagesArray;
+  };
+
+  //メディアライブラリを開くボタンをレンダリングする関数
+  const getImageButton = (open) => {
+    if (media.length > 0) {
+      return (
+        <div key="media-container" onClick={open} className="block-container">
+          {getImages(media)}
+        </div>
+      );
+    } else {
+      return (
+        <div key="media-container" className="button-container">
+          <Button onClick={open} className="button button-large">
+            {__("Image Upload", "slide-blocks")}
+          </Button>
+        </div>
+      );
+    }
+  };
+
+  return (
+    <PanelBody title={label} initialOpen={true} className="itmar_image_display">
+      <MediaUploadCheck>
+        <MediaUpload
+          multiple={true}
+          gallery={true} //追加
+          onSelect={(media) => props.onSelectChange(media)}
+          allowedTypes={["image"]}
+          value={mediaID}
+          render={({ open }) => getImageButton(open)}
+        />
+      </MediaUploadCheck>
+      {media.length != 0 && ( //メディアオブジェクト（配列の長さ）で判定
+        <MediaUploadCheck>
+          <Button
+            onClick={() => props.onAllDelete()}
+            variant="secondary"
+            isDestructive
+            className="removeImage"
+          >
+            {__("Delete All", "slide-blocks")}
+          </Button>
+        </MediaUploadCheck>
+      )}
+    </PanelBody>
+  );
+}

package/webpack.config.js

@@ -0,0 +1,28 @@
+const defaultConfig = require("@wordpress/scripts/config/webpack.config");
+
+// オリジナルのoptimizationをカスタマイズ
+module.exports = {
+  ...defaultConfig,
+  output: {
+    ...defaultConfig.output,
+    //libraryTarget: "commonjs2",
+    libraryTarget: "umd",
+    //globalObject: "this",
+  },
+  module: {
+    ...defaultConfig.module,
+    rules: [
+      ...defaultConfig.module.rules,
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: ["@babel/preset-react"],
+          },
+        },
+      },
+    ],
+  },
+};

package/DraggableBox.js

@@ -1,139 +0,0 @@
-import { useEffect, useRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-import {
-  Button,
-  PanelBody,
-  PanelRow,
-  __experimentalUnitControl as UnitControl
-} from '@wordpress/components';
-
-export const useDraggingMove = (isMovable, blockRef, position, onPositionChange) => {
-  const elmposition = useRef({ x: 0, y: 0 });
-  const isDragging = useRef(false);
-  const mousePosition = useRef({ x: 0, y: 0 });
-
-  useEffect(() => {
-    const element = blockRef.current;
-
-    if (!isMovable) {
-      if (element) {
-        element.classList.remove('itmar_isDraggable');//移動カーソル表示クラス削除
-      }
-      return; // 移動許可がある場合のみ、後続のロジックを実行
-    }
-    //positionの変化に合わせて現在位置を変更
-    const pos_value_x = position.x.match(/(-?\d+)([%a-zA-Z]+)/);
-    const pos_value_y = position.y.match(/(-?\d+)([%a-zA-Z]+)/);
-    elmposition.current = { x: parseInt(pos_value_x[1]), y: parseInt(pos_value_y[1]) }
-
-    //イベントハンドラ
-    const handleMouseDown = (event) => {
-      // 移動カーソル表示クラス名を追加します。
-      element.classList.add('itmar_isDraggable');
-      //ドラッグの開始フラグオン
-      isDragging.current = true;
-      //ドラッグ開始の絶対位置
-      mousePosition.current = { x: event.clientX, y: event.clientY };
-    };
-
-    const handleMouseMove = (event) => {
-      if (!isDragging.current) return;//ドラッグ中でなければ処理を中止
-      const dx = event.clientX - mousePosition.current.x;
-      const dy = event.clientY - mousePosition.current.y;
-      //ドラッグ後の位置を保存
-      const newPosition = {
-        x: elmposition.current.x + dx,
-        y: elmposition.current.y + dy,
-      };
-      elmposition.current = newPosition;
-      mousePosition.current = { x: event.clientX, y: event.clientY };//マウス位置の保存
-      //ドラッグによるブロックの一時的移動
-      element.style.transform = `translate(${elmposition.current.x}px, ${elmposition.current.y}px)`;
-    };
-
-    const handleMouseUp = () => {
-      isDragging.current = false;
-      element.style.transform = null;
-      //呼出しもとに要素の位置を返す
-      onPositionChange({ x: `${elmposition.current.x}px`, y: `${elmposition.current.y}px` });
-    };
-    const handleMouseLeave = () => {
-      isDragging.current = false;
-    };
-
-    if (element) {
-      // クラス名を追加します。
-      element.classList.add('itmar_isDraggable');
-    }
-    // イベントハンドラを追加します。
-    element.addEventListener('mousedown', handleMouseDown);
-    element.addEventListener('mousemove', handleMouseMove);
-    element.addEventListener('mouseup', handleMouseUp);
-    element.addEventListener('mouseleave', handleMouseLeave);
-
-    // イベントリスナーを削除するクリーンアップ関数を返します。
-    return () => {
-      element.removeEventListener('mousedown', handleMouseDown);
-      element.removeEventListener('mousemove', handleMouseMove);
-      element.removeEventListener('mouseup', handleMouseUp);
-      element.removeEventListener('mouseleave', handleMouseLeave);
-      element.style.transform = null;
-    };
-  }, [isMovable, blockRef, position, onPositionChange]); // 依存配列に isMovable を含めます
-}
-
-export default function DraggableBox(props) {
-
-  const position = props.attributes
-
-  //インスペクター内のコントロールからの移動操作
-  const chagePosition = (value, cordinate) => {
-    if (value) {
-      const newPos = { ...position, [cordinate]: value };
-      props.onPositionChange(newPos);
-    }
-  }
-
-  //リセット
-  const resetPos = () => {
-    const newPos = { "x": "0px", "y": "0px" };
-    props.onPositionChange(newPos);
-  }
-
-  return (
-    <>
-      <PanelBody
-        title={__("Position Setting", 'block-collections')}
-        initialOpen={true}
-      >
-        <PanelRow
-          className='distance_row'
-        >
-          <UnitControl
-            dragDirection="e"
-            onChange={(value) => chagePosition(value, 'x')}
-            label={__("Vertical", 'block-collections')}
-            value={position?.x || 0}
-          />
-          <UnitControl
-            dragDirection="e"
-            onChange={(value) => chagePosition(value, 'y')}
-            label={__("Horizen", 'block-collections')}
-            value={position?.y || 0}
-          />
-        </PanelRow>
-        <PanelRow
-          className='reset_row'
-        >
-          <Button
-            variant="secondary"
-            onClick={() => resetPos()}
-          >
-            {__("Reset", 'block-collections')}
-          </Button>
-        </PanelRow>
-      </PanelBody>
-    </>
-  )
-}

package/mediaUpload.js

@@ -1,90 +0,0 @@
-import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
-import {
-  Button,
-  PanelBody,
-} from '@wordpress/components';
-
-export function MultiImageSelect(props) {
-  const {
-    attributes,
-    label
-  } = props;
-  const {
-    mediaID,
-    media
-  } = attributes;
-
-  //URL の配列から画像を生成
-  const getImages = (media) => {
-    //メディアオブジェクトの配列をループ処理
-    let imagesArray = media.map((image) => {
-      return (
-        <figure>
-          <img
-            src={image.url}
-            className="image"
-            alt="アップロード画像"
-          />
-          <figcaption className="block-image-caption">
-            {image.caption ? image.caption : ''}
-          </figcaption>
-        </figure>
-      );
-    });
-    return imagesArray;
-  }
-
-  //メディアライブラリを開くボタンをレンダリングする関数
-  const getImageButton = (open) => {
-    if (media.length > 0) {
-      return (
-        <div onClick={open} className="block-container">
-          {getImages(media)}
-        </div>
-      )
-    }
-    else {
-      return (
-        <div className="button-container">
-          <Button
-            onClick={open}
-            className="button button-large"
-          >
-            {__("Image Upload", 'slide-blocks')}
-          </Button>
-        </div>
-      );
-    }
-  };
-
-  return (
-    <PanelBody
-      title={label}
-      initialOpen={true}
-      className='itmar_image_display'
-    >
-      <MediaUploadCheck>
-        <MediaUpload
-          multiple={true}
-          gallery={true}  //追加
-          onSelect={(media) => props.onSelectChange(media)}
-          allowedTypes={['image']}
-          value={mediaID}
-          render={({ open }) => getImageButton(open)}
-        />
-      </MediaUploadCheck>
-      {media.length != 0 && //メディアオブジェクト（配列の長さ）で判定
-        <MediaUploadCheck>
-          <Button
-            onClick={() => props.onAllDelete()}
-            variant="secondary"
-            isDestructive
-            className="removeImage">
-            {__("Delete All", 'slide-blocks')}
-          </Button>
-        </MediaUploadCheck>
-      }
-    </PanelBody>
-  );
-}