itmar-block-packages 1.0.1 → 1.2.0

package/src/ShadowStyle.js

@@ -0,0 +1,463 @@
+
+import { __ } from '@wordpress/i18n';
+import {
+  __experimentalPanelColorGradientSettings as PanelColorGradientSettings,
+} from '@wordpress/block-editor';
+import {
+  PanelBody,
+  PanelRow,
+  ToggleControl,
+  RangeControl,
+  RadioControl
+} from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+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;
+  }
+}
+
+const ShadowStyle = ({ shadowStyle, onChange }) => {
+  const [shadowState, setShadowState] = useState(shadowStyle);
+
+  const {
+    shadowType,
+    spread,
+    lateral,
+    longitude,
+    nomalBlur,
+    shadowColor,
+    blur,
+    intensity,
+    distance,
+    newDirection,
+    clayDirection,
+    embos,
+    opacity,
+    depth,
+    bdBlur,
+    expand,
+    glassblur,
+    glassopa,
+    hasOutline
+  } = shadowState;
+
+  //シャドーのスタイル変更と背景色変更に伴う親コンポーネントの変更
+  useEffect(() => {
+    const shadowElm = ShadowElm(shadowState);
+    if (shadowElm) onChange(shadowElm, shadowState)
+  }, [shadowState]);
+
+  return (
+    <>
+      <PanelBody title={__("Shadow Type", 'block-collections')} initialOpen={true}>
+        <div className="itmar_shadow_type">
+          <RadioControl
+            selected={shadowType}
+            options={[
+              { label: __("Nomal", 'block-collections'), value: 'nomal' },
+              { label: __("Neumorphism", 'block-collections'), value: 'newmor' },
+              { label: __("Claymorphism", 'block-collections'), value: 'claymor' },
+              { label: __("Grassmophism", 'block-collections'), value: 'glassmor' },
+            ]}
+            onChange={(changeOption) => setShadowState({ ...shadowState, shadowType: changeOption })}
+          />
+        </div>
+        {(shadowType !== 'claymor') &&
+          <div className="embos">
+            <RadioControl
+              label={__("unevenness", 'block-collections')}
+              selected={embos}
+              options={[
+                { value: 'swell' },
+                { value: 'dent' },
+
+              ]}
+              onChange={(changeOption) => setShadowState({ ...shadowState, embos: changeOption })}
+            />
+          </div>
+        }
+      </PanelBody>
+
+      {shadowType === 'nomal' &&
+        <PanelBody title={__("Nomal settings", 'block-collections')} initialOpen={false}>
+          <RangeControl
+            value={spread}
+            label={__("Spread", 'block-collections')}
+            max={50}
+            min={0}
+            onChange={(val) => setShadowState({ ...shadowState, spread: val })}
+            withInputField={false}
+          />
+          <RangeControl
+            value={lateral}
+            label={__("Lateral direction", 'block-collections')}
+            max={50}
+            min={0}
+            onChange={(val) => setShadowState({ ...shadowState, lateral: val })}
+            withInputField={false}
+          />
+          <RangeControl
+            value={longitude}
+            label={__("Longitudinal direction", 'block-collections')}
+            max={50}
+            min={0}
+            onChange={(val) => setShadowState({ ...shadowState, longitude: val })}
+            withInputField={false}
+          />
+          <RangeControl
+            value={nomalBlur}
+            label={__("Blur", 'block-collections')}
+            max={20}
+            min={0}
+            onChange={(val) => setShadowState({ ...shadowState, nomalBlur: val })}
+            withInputField={false}
+          />
+          <PanelColorGradientSettings
+            title={__("Shadow Color Setting", 'block-collections')}
+            settings={[
+              {
+                colorValue: shadowColor,
+                label: __("Choose Shadow color", 'block-collections'),
+                onColorChange: (newValue) => setShadowState({ ...shadowState, shadowColor: newValue }),
+              },
+            ]}
+          />
+
+        </PanelBody>
+      }
+
+      {shadowType === 'newmor' &&
+        <PanelBody title={__("Neumorphism settings", 'block-collections')} initialOpen={false}>
+          <RangeControl
+            value={distance}
+            label={__("Distance", 'block-collections')}
+            max={50}
+            min={0}
+            onChange={(val) => setShadowState({ ...shadowState, distance: val })}
+            withInputField={false}
+          />
+          <RangeControl
+            value={intensity}
+            label={__("Intensity", 'block-collections')}
+            max={100}
+            min={0}
+            onChange={(val) => setShadowState({ ...shadowState, intensity: val })}
+            withInputField={false}
+          />
+          <RangeControl
+            value={blur}
+            label={__("Blur", 'block-collections')}
+            max={20}
+            min={0}
+            onChange={(val) => setShadowState({ ...shadowState, blur: val })}
+            withInputField={false}
+          />
+          <PanelRow>
+            <div className="light_direction">
+              <RadioControl
+                selected={newDirection}
+                options={[
+                  { value: 'top_left' },
+                  { value: 'top_right' },
+                  { value: 'bottom_left' },
+                  { value: 'bottom_right' },
+                ]}
+                onChange={(changeOption) => setShadowState({ ...shadowState, newDirection: changeOption })}
+              />
+            </div>
+
+          </PanelRow>
+
+        </PanelBody>
+
+      }
+      {shadowType === 'claymor' &&
+
+        <PanelBody title={__("Claymorphism settings", 'block-collections')} initialOpen={false}>
+          <RangeControl
+            value={opacity}
+            label={__("Opacity", 'block-collections')}
+            max={1}
+            min={0}
+            step={.1}
+            onChange={(val) => setShadowState({ ...shadowState, opacity: val })}
+            withInputField={false}
+          />
+          <RangeControl
+            value={depth}
+            label="Depth"
+            max={20}
+            min={0}
+            onChange={(val) => setShadowState({ ...shadowState, depth: val })}
+            withInputField={false}
+          />
+          <RangeControl
+            value={expand}
+            label="Expand"
+            max={50}
+            min={0}
+            onChange={(val) => setShadowState({ ...shadowState, expand: val })}
+            withInputField={false}
+          />
+          <RangeControl
+            value={bdBlur}
+            label="Background Blur"
+            max={10}
+            min={0}
+            onChange={(val) => setShadowState({ ...shadowState, bdBlur: val })}
+            withInputField={false}
+          />
+          <div className="light_direction claymor">
+            <RadioControl
+              selected={clayDirection}
+              options={[
+                { value: 'right_bottom' },
+                { value: 'top_right' },
+                { value: 'top' },
+              ]}
+              onChange={(changeOption) => setShadowState({ ...shadowState, clayDirection: changeOption })}
+            />
+          </div>
+        </PanelBody>
+      }
+
+      {shadowType === 'glassmor' &&
+        <PanelBody title={__("Grassmophism settings", 'block-collections')} initialOpen={false}>
+          <RangeControl
+            value={glassblur}
+            label={__("Glass blur", 'block-collections')}
+            max={20}
+            min={0}
+            onChange={(val) => setShadowState({ ...shadowState, glassblur: val })}
+            withInputField={false}
+          />
+          <RangeControl
+            value={glassopa}
+            label={__("Glass Opacity", 'block-collections')}
+            max={1}
+            min={0}
+            step={.1}
+            onChange={(val) => setShadowState({ ...shadowState, glassopa: val })}
+            withInputField={false}
+          />
+          <fieldset>
+            <ToggleControl
+              label={__("Show outline", 'block-collections')}
+              checked={hasOutline}
+              onChange={() => setShadowState({ ...shadowState, hasOutline: !hasOutline })}
+            />
+          </fieldset>
+        </PanelBody>
+      }
+    </>
+
+  );
+};
+export default ShadowStyle;
+

package/src/ToggleElement.js

@@ -0,0 +1,18 @@
+
+export default function ToggleElement(props) {
+
+
+  const toggleOpen = () => {
+    props.onToggle && props.onToggle(!props.openFlg);
+  };
+
+  return (
+    <div
+      className={`${props.className} ${props.openFlg ? 'open' : ''}`}
+      style={props.style}
+      onClick={toggleOpen}
+    >
+      {props.children}
+    </div>
+  )
+}

package/src/TypographyControls.js

@@ -0,0 +1,113 @@
+import {
+  PanelBody,
+  PanelRow,
+  RadioControl,
+  ToggleControl,
+  __experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+
+import Select from 'react-select';
+import { __ } from '@wordpress/i18n';
+
+const TypographyControls = ({ title, fontStyle, initialOpen, isMobile, onChange }) => {
+  const {
+    default_fontSize,
+    mobile_fontSize,
+    fontSize,
+    fontFamily,
+    fontWeight,
+    isItalic
+  } = fontStyle;
+
+  const fontFamilyOptions = [
+    { value: 'Arial, sans-serif', label: 'Arial', fontFamily: 'Arial, sans-serif' },
+    { value: 'Courier New, monospace', label: 'Courier New', fontFamily: 'Courier New, monospace' },
+    { value: 'Georgia, serif', label: 'Georgia', fontFamily: 'Georgia, serif' },
+    { label: 'Noto Sans JP', value: 'Noto Sans JP, sans-serif', fontFamily: 'Noto Sans JP, sans-serif' },
+    { label: 'Texturina', value: 'Texturina, serif', fontFamily: 'Texturina, serif' },
+  ];
+
+  const units = [
+    { value: 'px', label: 'px' },
+    { value: 'em', label: 'em' },
+    { value: 'rem', label: 'rem' },
+  ];
+
+  const customStyles = {
+    option: (provided, state) => ({
+      ...provided,
+      fontFamily: state.data.fontFamily,
+    }),
+  };
+
+  const FontSelect = ({ label, value, onChange }) => (
+    <>
+      {label && <label className="components-base-control__label">{label}</label>}
+      <Select
+        options={fontFamilyOptions}
+        value={fontFamilyOptions.find((option) => option.value === value)}
+        onChange={(newValue) => {
+          onChange(newValue.value);
+        }}
+        styles={customStyles}
+      />
+    </>
+  );
+
+  return (
+    <PanelBody title={title} initialOpen={initialOpen} >
+      <UnitControl
+        dragDirection="e"
+        onChange={(newValue) => {
+          newValue = newValue != '' ? newValue : '0px'
+          const set_size = !isMobile ? { default_fontSize: newValue } : { mobile_fontSize: newValue };
+          const newStyle = { ...fontStyle, ...set_size };
+          onChange(newStyle);
+        }}
+        label={!isMobile ?
+          __("Size(desk top)", 'block-collections')
+          : __("Size(mobile)", 'block-collections')}
+        value={!isMobile ? default_fontSize : mobile_fontSize}
+        units={units}
+      />
+
+      <FontSelect
+        label={__("font family", 'block-collections')}
+        value={fontFamily}
+        onChange={(newValue) => {
+          const newStyle = { ...fontStyle, fontFamily: newValue };
+          onChange(newStyle);
+        }}
+      />
+
+      <label className="components-base-control__label">{__('font weight', 'block-collections')}</label>
+      <PanelRow className='itmar_weight_row'>
+        <RadioControl
+          selected={fontWeight}
+          options={[
+            { label: 'LIGHT', value: "300" },
+            { label: 'REGULAR', value: "400" },
+            { label: 'MEDIUM', value: "500" },
+            { label: 'S-BOLD', value: "600" },
+            { label: 'BOLD', value: "700" },
+            { label: 'BLACK', value: "900" },
+          ]}
+          onChange={(newValue) => {
+            const newStyle = { ...fontStyle, fontWeight: newValue };
+            onChange(newStyle);
+          }}
+        />
+      </PanelRow>
+
+      <label className="components-base-control__label">{__('Italic display', 'block-collections')}</label>
+      <ToggleControl
+        checked={isItalic}
+        onChange={(newValue) => {
+          const newStyle = { ...fontStyle, isItalic: newValue };
+          onChange(newStyle);
+        }}
+      />
+    </PanelBody>
+  );
+};
+export default TypographyControls;