itmar-block-packages 1.10.0 → 2.0.0

package/src/hslToRgb.js

@@ -1,162 +0,0 @@
-const createRGB = (inputStr) => {
-	//１６進数変換の関数
-	function componentToHex(c) {
-		const hex = parseInt(c, 10).toString(16);
-		return hex.length === 1 ? "0" + hex : hex;
-	}
-
-	let resultStr;
-	let rgb = [];
-
-	// #000000 形式の場合
-	if (/^#[0-9a-fA-F]{6}$/.test(inputStr)) {
-		rgb = [
-			inputStr.slice(1, 3),
-			inputStr.slice(3, 5),
-			inputStr.slice(5, 7)
-		];
-	}
-	// rgb(0,0,0) 形式の場合
-	else if ((resultStr = inputStr.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/))) {
-		rgb = [
-			componentToHex(resultStr[1]),
-			componentToHex(resultStr[2]),
-			componentToHex(resultStr[3])
-		];
-	} else {
-		// サポートされていない形式の場合はデフォルトの値を設定する
-		rgb = ["ff", "ff", "ff"];
-	}
-	return rgb;
-}
-
-export function hslToRgb16(hue, saturation, lightness) {
-	var result = false;
-
-	if (((hue || hue === 0) && hue <= 360) && ((saturation || saturation === 0) && saturation <= 100) && ((lightness || lightness === 0) && lightness <= 100)) {
-		var red = 0,
-			green = 0,
-			blue = 0,
-			q = 0,
-			p = 0,
-			hueToRgb;
-
-		hue = Number(hue) / 360;
-		saturation = Number(saturation) / 100;
-		lightness = Number(lightness) / 100;
-
-		if (saturation === 0) {
-			red = lightness;
-			green = lightness;
-			blue = lightness;
-		} else {
-			hueToRgb = function (p, q, t) {
-				if (t < 0) t += 1;
-				if (t > 1) t -= 1;
-
-				if (t < 1 / 6) {
-					p += (q - p) * 6 * t;
-				} else if (t < 1 / 2) {
-					p = q;
-				} else if (t < 2 / 3) {
-					p += (q - p) * (2 / 3 - t) * 6;
-				}
-
-				return p;
-			};
-
-			if (lightness < 0.5) {
-				q = lightness * (1 + saturation);
-			} else {
-				q = lightness + saturation - lightness * saturation;
-			}
-			p = 2 * lightness - q;
-
-			red = hueToRgb(p, q, hue + 1 / 3);
-			green = hueToRgb(p, q, hue);
-			blue = hueToRgb(p, q, hue - 1 / 3);
-		}
-
-		result = `#${Math.round(red * 255).toString(16).padStart(2, '0')}${Math.round(green * 255).toString(16).padStart(2, '0')}${Math.round(blue * 255).toString(16).padStart(2, '0')}`;
-
-	}
-
-	return result;
-};
-
-export function rgb16ToHsl(strRgb16) {
-	let rgb = createRGB(strRgb16);
-	let red = rgb[0];
-	let green = rgb[1];
-	let blue = rgb[2];
-	let result = false;
-
-	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))) {
-		let hue = 0,
-			saturation = 0,
-			lightness = 0,
-			max = 0,
-			min = 0,
-			diff = 0;
-
-		red = parseInt(red, 16) / 255;
-		green = parseInt(green, 16) / 255;
-		blue = parseInt(blue, 16) / 255;
-		max = Math.max(red, green, blue);
-		min = Math.min(red, green, blue);
-		lightness = (max + min) / 2;
-
-		if (max !== min) {
-			diff = max - min;
-
-			if (lightness > 0.5) {
-				saturation = diff / (2 - max - min);
-			} else {
-				saturation = diff / (max + min);
-			}
-
-			if (max === red) {
-				hue = (green - blue) / diff;
-			} else if (max === green) {
-				hue = 2 + (blue - red) / diff;
-			} else {
-				hue = 4 + (red - green) / diff;
-			}
-
-			hue /= 6;
-		}
-
-		result = {
-			hue: Math.round(hue * 360),
-			saturation: Math.round(saturation * 100),
-			lightness: Math.round(lightness * 100)
-		};
-	}
-
-	return result;
-};
-
-export function HexToRGB(strRgb16) {
-	let rgb = createRGB(strRgb16);
-	let red = rgb[0];
-	let green = rgb[1];
-	let blue = rgb[2];
-	let result = false;
-
-	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))) {
-
-
-		red = parseInt(red, 16);
-		green = parseInt(green, 16);
-		blue = parseInt(blue, 16);
-
-
-		result = {
-			red: Math.round(red),
-			green: Math.round(green),
-			blue: Math.round(blue)
-		};
-	}
-
-	return result;
-};

package/src/index.js

@@ -1,131 +0,0 @@
-//カスタムフック（一般）
-export {
-  useIsIframeMobile,
-  useElementBackgroundColor,
-  useElementStyleObject,
-  useElementWidth,
-  useIsMobile,
-  useDeepCompareEffect,
-  useFontawesomeIframe,
-  useBlockAttributeChanges,
-  useDuplicateBlockRemove,
-} from "./customFooks";
-
-//WordPressデータを取得するためのRestAPI
-export {
-  fetchPagesOptions,
-  fetchArchiveOptions,
-  restFetchData,
-  restTaxonomies,
-  restFieldes,
-  termToDispObj,
-  PageSelectControl,
-  ArchiveSelectControl,
-  TermChoiceControl,
-  FieldChoiceControl,
-} from "./wordpressApi";
-
-//styled-componet用のcssプロパティ生成関数
-export {
-  space_prm,
-  max_width_prm,
-  width_prm,
-  height_prm,
-  align_prm,
-  position_prm,
-  radius_prm,
-  convertToScss,
-  borderProperty,
-  radiusProperty,
-  marginProperty,
-  paddingProperty,
-} from "./cssPropertes";
-
-//ボックスシャドーを設定するコントロール
-export { default as ShadowStyle, ShadowElm } from "./ShadowStyle";
-
-//疑似要素を設定するコントロール
-export { default as PseudoElm, Arrow } from "./PseudoElm";
-
-//メディアライブラリから複数の画像を選択するコントロール
-export {
-  SingleImageSelect,
-  MultiImageSelect,
-  getMediaType,
-  getImageAspectRatio,
-  getVideoAspectRatio,
-} from "./mediaUpload";
-
-//ブロックのドラッガブルを設定するコントロール
-export { default as DraggableBox, useDraggingMove } from "./DraggableBox";
-
-//アニメーションを設定するコントロール
-export { default as AnimationBlock, anime_comp } from "./AnimationBlock";
-
-//ブロックの配置を設定するコントロール
-export { default as BlockPlace, BlockWidth, BlockHeight } from "./BlockPlace";
-export { default as GridControls } from "./GridControls";
-
-//DOM要素の表示を反転させるコントロール
-export { default as ToggleElement } from "./ToggleElement";
-
-//タイポグラフィーの設定をするコントロール
-export { default as TypographyControls } from "./TypographyControls";
-
-//アイコンの表示を設定するコントロール
-export { default as IconSelectControl } from "./IconSelectControl";
-
-//ブロックをlazy Loadさせるためのラッパーモジュール
-export { default as BlockEditWrapper } from "./BlockEditWrapper";
-
-//色コードの変換関数
-export { hslToRgb16, rgb16ToHsl, HexToRGB } from "./hslToRgb";
-
-//日付関連の関数、コントロール
-export {
-  generateDateArray,
-  generateMonthCalendar,
-  PeriodCtrl,
-  getPeriodQuery,
-  getTodayYearMonth,
-  getTodayYear,
-  getTodayMonth,
-  generateGridAreas,
-  JapaneseHolidays,
-} from "./DateElm";
-
-//インナーブロック関連の関数
-export {
-  flattenBlocks,
-  useTargetBlocks,
-  serializeBlockTree,
-  createBlockTree,
-} from "./blockStore";
-
-//バリデーションチェック関連の関数
-export { isValidUrlWithUrlApi } from "./validationCheck";
-
-//特定の投稿タイプの投稿に含まれる本ブロックの属性を書き換える
-export { default as UpdateAllPostsBlockAttributes } from "./UpdateAllPostsBlockAttributes";
-
-//住所変換関連の関数
-export { fetchZipToAddress } from "./ZipAddress";
-
-//書式設定用のコンポーネント
-export { FormatSelectControl, displayFormated } from "./formatCreate";
-
-//ShopifyAPI関連のコンポーネント
-export {
-  checkCustomerLoginState,
-  redirectCustomerAuthorize,
-  sendRegistrationRequest,
-} from "./shopfiApi";
-
-//インナーブロック挿入のカスタムフック
-export { useRebuildChangeField } from "./BrockInserter";
-
-//Masonry グリッドを初期化する共通関数
-export { default as MasonryControl } from "./MasonryControl";
-
-//インナーブロック挿入のカスタムフック
-export { slideBlockSwiperInit } from "./SwiperControl";

package/src/mediaUpload.js

@@ -1,178 +0,0 @@
-import { MediaUpload, MediaUploadCheck } from "@wordpress/block-editor";
-import { __ } from "@wordpress/i18n";
-import { Button, PanelBody } from "@wordpress/components";
-
-export function SingleImageSelect(props) {
-  const { attributes } = props;
-  const { mediaID, media } = attributes;
-
-  //URL の配列から画像を生成
-  const getImage = (image) => {
-    //メディアオブジェクトの配列をループ処理
-    return (
-      <figure>
-        <img src={image.url} className="image" alt="アップロード画像" />
-      </figure>
-    );
-  };
-
-  //メディアライブラリを開くボタンをレンダリングする関数
-  const getImageButton = (open) => {
-    if (media) {
-      return (
-        <div onClick={open} className="block-container">
-          {getImage(media)}
-        </div>
-      );
-    } else {
-      return (
-        <div className="button-container">
-          <Button onClick={open} className="button button-large">
-            {__("Sel", "itmar_mv_blocks")}
-          </Button>
-        </div>
-      );
-    }
-  };
-
-  return (
-    <MediaUploadCheck>
-      <MediaUpload
-        onSelect={(media) => props.onSelectChange(media)}
-        allowedTypes={["image"]}
-        value={mediaID}
-        render={({ open }) => getImageButton(open)}
-      />
-    </MediaUploadCheck>
-  );
-}
-
-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>
-  );
-}
-
-//静止画か動画かを判定する関数
-export function getMediaType(url) {
-  const imageExtensions = [
-    ".jpg",
-    ".jpeg",
-    ".png",
-    ".gif",
-    ".webp",
-    ".bmp",
-    ".svg",
-  ];
-  const videoExtensions = [".mp4", ".webm", ".ogg", ".mov", ".m4v"];
-
-  // クエリストリング（?以降）を除去
-  const cleanUrl = url.split("?")[0].toLowerCase();
-
-  const isImage = imageExtensions.some((ext) => cleanUrl.endsWith(ext));
-  const isVideo = videoExtensions.some((ext) => cleanUrl.endsWith(ext));
-
-  if (isImage) {
-    return "image";
-  } else if (isVideo) {
-    return "video";
-  } else {
-    // 拡張子で判別できない → HEADリクエストでContent-Type判定 or fallback
-    return undefined;
-  }
-}
-//静止画のアスペクト比を返す関数
-export function getImageAspectRatio(url) {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.onload = function () {
-      const aspectRatio = img.naturalWidth / img.naturalHeight;
-      resolve(aspectRatio);
-    };
-    img.onerror = function () {
-      reject(new Error("画像の読み込みに失敗しました: " + url));
-    };
-    img.src = url;
-  });
-}
-//動画のアスペクト比を返す関数
-export function getVideoAspectRatio(url) {
-  return new Promise((resolve, reject) => {
-    const video = document.createElement("video");
-
-    video.preload = "metadata";
-    video.src = url;
-    video.muted = true; // 一部のブラウザで安全に動作させるため
-    video.playsInline = true;
-
-    video.onloadedmetadata = function () {
-      const aspectRatio = video.videoWidth / video.videoHeight;
-      resolve(aspectRatio);
-    };
-
-    video.onerror = function () {
-      reject(new Error("動画の読み込みに失敗しました: " + url));
-    };
-  });
-}

package/src/shopfiApi.js

@@ -1,187 +0,0 @@
-function generateState() {
-  const timestamp = Date.now().toString();
-  const randomString = Math.random().toString(36).substring(2);
-  return timestamp + randomString;
-}
-
-function generateNonce(length = 32) {
-  const characters =
-    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  let nonce = "";
-  for (let i = 0; i < length; i++) {
-    nonce += characters.charAt(Math.floor(Math.random() * characters.length));
-  }
-  return nonce;
-}
-
-function generateCodeVerifier(length = 128) {
-  const charset =
-    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~";
-  let result = "";
-  for (let i = 0; i < length; i++) {
-    result += charset.charAt(Math.floor(Math.random() * charset.length));
-  }
-  return result;
-}
-
-async function generateCodeChallenge(codeVerifier) {
-  const encoder = new TextEncoder();
-  const data = encoder.encode(codeVerifier);
-  const digest = await crypto.subtle.digest("SHA-256", data);
-  return btoa(String.fromCharCode(...new Uint8Array(digest)))
-    .replace(/\+/g, "-")
-    .replace(/\//g, "_")
-    .replace(/=+$/, "");
-}
-
-// ✅ Shopifyへの認証リダイレクト
-export async function redirectCustomerAuthorize(
-  shopId,
-  clientId,
-  userMail,
-  callbackUri,
-  redirectUri
-) {
-  //呼び出し元の戻り先
-  const statePayload = {
-    ts: Date.now(),
-    random: Math.random().toString(36).substring(2),
-    return_url: redirectUri,
-  };
-  //stateで渡しておく
-  const state = btoa(JSON.stringify(statePayload));
-  const nonce = generateNonce();
-  const codeVerifier = generateCodeVerifier();
-  const codeChallenge = await generateCodeChallenge(codeVerifier);
-
-  localStorage.setItem("shopify_code_verifier", codeVerifier);
-  localStorage.setItem("shopify_state", state);
-  localStorage.setItem("shopify_nonce", nonce);
-  localStorage.setItem("shopify_client_id", clientId);
-  localStorage.setItem("shopify_user_mail", userMail);
-  localStorage.setItem("shopify_shop_id", shopId);
-  localStorage.setItem("shopify_redirect_uri", callbackUri); //ログアウトの処理で使用する
-
-  const url = new URL(
-    `https://shopify.com/authentication/${shopId}/oauth/authorize`
-  );
-  url.searchParams.append("scope", "openid email customer-account-api:full");
-  url.searchParams.append("client_id", clientId);
-  url.searchParams.append("response_type", "code");
-  url.searchParams.append("redirect_uri", callbackUri);
-  url.searchParams.append("state", state);
-  url.searchParams.append("nonce", nonce);
-  url.searchParams.append("code_challenge", codeChallenge);
-  url.searchParams.append("code_challenge_method", "S256");
-
-  window.location.href = url.toString();
-}
-
-// ✅ トークンがあれば検証（Storefront API 経由で customer を取得）
-export async function checkCustomerLoginState() {
-  const token = localStorage.getItem("shopify_customer_token");
-
-  if (!token) return false;
-
-  const checkUrl = "/wp-json/itmar-ec-relate/v1/shopify-login-check";
-  const postData = {
-    nonce: itmar_option.nonce,
-    token: JSON.stringify({ token }),
-  };
-  sendRegistrationAjax(checkUrl, postData, true)
-    .done(function (res) {
-      console.log(res);
-    })
-    .fail(function (xhr, status, error) {
-      alert("サーバーエラー: " + error);
-      console.error(xhr.responseText);
-    });
-}
-
-/**
- * @param {string} urlOrPath - RESTは '/itmar-shopify/v1/...' でも '/wp-json/...' でもOK。admin-ajaxは '/wp-admin/admin-ajax.php'
- * @param {object} data - 送信するデータ。nonce は data._wpnonce か data.nonce に入れておけばOK
- * @param {'auto'|'rest'|'ajax'} mode - 既定は 'auto'
- */
-export async function sendRegistrationRequest(
-  urlOrPath,
-  data = {},
-  mode = "auto"
-) {
-  const isRestUrlLike = (u) =>
-    u.startsWith("/wp-json") || !u.startsWith("/wp-admin");
-
-  // 送信先の確定（RESTのときは /wp-json 省略パスでもOKにする）
-  let isRest;
-  if (mode === "auto") {
-    isRest = isRestUrlLike(urlOrPath);
-  } else {
-    isRest = mode === "rest";
-  }
-
-  let url = urlOrPath;
-
-  if (isRest) {
-    // '/itmar-shopify/v1/...' のようなパスだけ渡されたら /wp-json を補う
-    if (!url.startsWith("/wp-json")) {
-      const root =
-        (window.wpApiSettings && window.wpApiSettings.root) || "/wp-json/";
-      url = root.replace(/\/+$/, "/") + url.replace(/^\/+/, "");
-    }
-  } else {
-    // admin-ajax の既定URL
-    if (!url) url = "/wp-admin/admin-ajax.php";
-  }
-
-  const fetchOptions = {
-    method: "POST",
-    credentials: "same-origin", // 同一オリジン Cookie
-    headers: {},
-  };
-
-  // ノンス抽出（_wpnonce を優先）
-  const nonce =
-    data._wpnonce ||
-    data.nonce ||
-    (window.wpApiSettings && window.wpApiSettings.nonce);
-
-  if (isRest) {
-    fetchOptions.headers["Content-Type"] = "application/json";
-    if (nonce) fetchOptions.headers["X-WP-Nonce"] = nonce;
-
-    // nonce系は本文から除く（任意）
-    const { _wpnonce, nonce: _legacyNonce, ...rest } = data;
-    fetchOptions.body = JSON.stringify(rest);
-  } else {
-    // admin-ajax は URLSearchParams で送る
-    const form = new URLSearchParams();
-    Object.entries(data).forEach(([k, v]) => {
-      if (v !== undefined && v !== null) form.append(k, String(v));
-    });
-    // ノンスは _wpnonce に統一
-    if (nonce && !form.has("_wpnonce")) form.append("_wpnonce", nonce);
-    fetchOptions.body = form;
-  }
-
-  const res = await fetch(url, fetchOptions);
-
-  // WP REST はメソッド不一致・ルートなし等でも JSON 返さないことがあるので分岐
-  const contentType = res.headers.get("content-type") || "";
-  const tryJson = contentType.includes("application/json");
-
-  if (!res.ok) {
-    let msg = `HTTP ${res.status}`;
-    if (tryJson) {
-      try {
-        const j = await res.json();
-        msg += j.message ? `: ${j.message}` : "";
-      } catch {}
-    } else {
-      const t = await res.text();
-      if (t) msg += `: ${t.slice(0, 200)}`;
-    }
-    throw new Error(msg);
-  }
-
-  return tryJson ? res.json() : res.text();
-}

package/src/validationCheck.js

@@ -1,10 +0,0 @@
-//URLのバリデーションチェック
-export const isValidUrlWithUrlApi = (string) => {
-  try {
-    const cleanString = string.replace(/<[^>]+>/g, "");
-    new URL(cleanString);
-    return true;
-  } catch (err) {
-    return false;
-  }
-};