amotify 0.0.3 → 0.0.4

package/src/Functions/Cropper/style.module.scss

@@ -0,0 +1,62 @@
+@use '@uniVar' as *;
+.Wrap {
+  &.Use_ {
+    &profile {
+      max-width: calc($unit1 * 38);
+    }
+    &head {
+      max-width: calc($unit1 * 72);
+    }
+  }
+}
+.Canvas {
+  width: 100%;
+  cursor: move;
+  overflow: hidden;
+  // user-select: none !important;
+}
+.Preview {
+  display: none;
+}
+.ToneBall {
+  & {
+    position: relative;
+    width: $unit1-5;
+    height: $unit1-5;
+    border-radius: 50%;
+    background-color: gray;
+    &:before {}
+  }
+  &_ {
+    &1 {
+      background-color: rgb(255, 165, 0);
+    }
+    &2 {
+      background-color: rgb(150, 150, 255);
+    }
+    &3 {
+      background-color: rgb(240, 200, 145);
+    }
+    &4 {
+      background-color: rgb(0, 255, 255);
+    }
+    &5 {
+      background-color: rgb(255, 0, 255);
+    }
+    &6 {
+      background-color: rgb(255, 255, 0);
+    }
+    &7 {
+      background-color: rgb(40, 158, 169);
+    }
+    &8 {
+      background-color: rgb(90, 112, 162);
+    }
+    &9 {
+      background-color: rgb(50, 192, 87);
+    }
+    &10 {
+      background-color: rgb(246, 20, 140);
+    }
+  }
+}

package/src/Functions/Effects/Fade.tsx

@@ -0,0 +1,81 @@
+import {
+  React
+} from '@global';
+import {
+  Box
+} from '@atoms';
+
+const {
+  useState,
+  useEffect
+} = React;
+
+export const FadeEffects: amotify.fn.Effects.Methods = {
+  ...{} as any,
+  FadeIn: ( params ) => {
+    let {
+      animationDelay = 100,
+      animationTime = 300,
+      componentID = $.uuidGen(),
+      ...others
+    } = params;
+    let [ val_componentID ] = useState( componentID );
+
+    useEffect( () => {
+      setTimeout( () => {
+        let Element = $( '[data-component-id="' + val_componentID + '"]' );
+        if ( !Element[ 0 ] ) return;
+        Element.css( {
+          transition: animationTime + 'ms'
+        } )
+          .await( 1 )
+          .css( {
+            opacity: 1
+          } );
+      },animationDelay );
+    },[] );
+
+    return ( <Box
+      { ...others }
+      freeCSS={ {
+        ...others.freeCSS,
+        opacity: 0,
+      } }
+      componentID={ val_componentID }
+    /> );
+  },
+  FadeUp: ( params ) => {
+    let {
+      animationDelay = 100,
+      animationTime = 300,
+      componentID = $.uuidGen(),
+      ...others
+    } = params;
+    let [ val_componentID ] = useState( componentID );
+
+    useEffect( () => {
+      setTimeout( () => {
+        let Element = $( '[data-component-id="' + val_componentID + '"]' );
+        if ( !Element[ 0 ] ) return;
+        Element.css( {
+          transition: animationTime + 'ms'
+        } )
+          .await( 1 )
+          .css( {
+            opacity: 1,
+            paddingTop: 0
+          } );
+      },animationDelay );
+    },[] );
+
+    return ( <Box
+      paddingTop={ 2 }
+      { ...others }
+      freeCSS={ {
+        ...others.freeCSS,
+        opacity: 0,
+      } }
+      componentID={ val_componentID }
+    /> );
+  }
+}

package/src/Functions/Effects/Ripple.tsx

@@ -0,0 +1,141 @@
+import style from './style.module.scss';
+
+type InfoProps = {
+  RippleElement: Jsmin.Method
+  startedAt: number
+  size: number
+}
+
+new class {
+  constructor() {
+    this.UserEvent();
+  }
+  UserEvent() {
+    let RippleElementClassName = 'eff_ripple';
+    const EffectStart = ( event: Event ) => {
+      let startedAt = $.Time().time;
+      let target: HTMLElement = event.target as any;
+
+      let RippleElement = $( target.closest( '.' + RippleElementClassName ) );
+      let Color = RippleElement.findClass( /^eff_ripple-/ )[ 0 ].split( '-' )[ 1 ];
+
+      let
+        ID = 'RippleWrap-' + $.uuidGen(),
+        {
+          left,
+          top,
+          height,
+          width
+        } = RippleElement.position(),
+        {
+          pageXOffset,
+          pageYOffset
+        } = $.getScreenSize(),
+        {
+          x: cursorX,
+          y: cursorY
+        } = $.getCursor( event ),
+        size = Math.min( width * 1.5,300 ),
+        x = Math.max( cursorX - ( left + pageXOffset ),0 ),
+        y = Math.max( cursorY - ( top + pageYOffset ),0 );
+
+      let effectInfo: InfoProps = {
+        RippleElement,
+        startedAt,
+        size
+      }
+
+      $( document ).addEvent( {
+        eventID: 'RippleMouseUp',
+        eventType: 'mouseup',
+        callback: () => {
+          EffectEnd( effectInfo );
+        }
+      } ).addEvent( {
+        eventID: 'RippleTouchEnd',
+        eventType: 'touchend',
+        callback: () => {
+          setTimeout( () => {
+            EffectEnd( effectInfo );
+          },20 );
+        }
+      } )
+
+      $( RippleElement )
+        .addClass( [
+          style.RippleElement,
+          style[ 'Color_' + Color ]
+        ] )
+        .append( `<div class="${ style.RippleWrap }" id="${ ID }">
+            <div class="${ style.Wave }" />
+          </div>` )
+        .addEvent( {
+          eventID: 'RippleMouseOut',
+          eventType: 'mouseout',
+          callback: ( event ) => {
+            EffectEnd( effectInfo );
+          }
+        } )
+        .find( '#' + ID )
+        .find( '.' + style.Wave )
+        .css( { left: x,top: y } )
+        .await( 10 )
+        .css( {
+          height: size,
+          width: size,
+          opacity: '.3',
+          transition: '.25s'
+        } );
+    }
+    const EffectEnd = ( effectInfo: InfoProps ) => {
+      let {
+        RippleElement,
+        startedAt,
+        size
+      } = effectInfo;
+
+      let processTime = $.Time().time - startedAt;
+      let transition = processTime <= 400 ? '.75s' : '.55s';
+      let diameter = size * 2.5;
+
+      $( document ).removeEvent( [
+        'RippleMouseUp',
+        'RippleTouchMove',
+        'RippleTouchEnd',
+      ] );
+
+      RippleElement
+        .removeEvent( [ 'RippleMouseOut' ] )
+
+        .find( '.' + style.Wave )
+        .css( {
+          height: diameter,
+          width: diameter,
+          opacity: '0',
+          transition: transition
+        } )
+        .await( 750 )
+        .parent()
+        .callback( ( Parent ) => {
+          Parent.remove();
+        } );
+    }
+
+    $( document )
+      .addEvent( {
+        eventType: 'touchstart',
+        target: '.' + RippleElementClassName,
+        callback: ( event ) => {
+          EffectStart( event );
+        }
+      } )
+      .addEvent( {
+        eventType: 'mousedown',
+        target: '.' + RippleElementClassName,
+        callback: ( event ) => {
+          if ( amotify.config.device.isTouchDevice ) return;
+          EffectStart( event );
+        }
+      } );
+  }
+}

package/src/Functions/Effects/_.tsx

@@ -0,0 +1,33 @@
+import './Ripple';
+import style from './style.module.scss';
+
+import { FadeEffects } from './Fade';
+
+const Effects: amotify.fn.Effects.Methods = {
+  ...FadeEffects,
+}
+export {
+  Effects
+}
+
+
+/** PuddingEffect */
+new class {
+  constructor() {
+    this.UserEvent();
+  }
+  UserEvent() {
+    $( document ).addEvent( {
+      eventType: 'click',
+      target: '.eff_pudding',
+      callback: function () {
+        $( this )
+          .removeClass( style.PuddingEffect )
+          .await( 1 )
+          .addClass( style.PuddingEffect )
+          .await( 510 )
+          .removeClass( style.PuddingEffect );
+      }
+    } )
+  }
+}

package/src/Functions/Effects/style.module.scss

@@ -0,0 +1,83 @@
+@use '@uniVar' as *;
+.Ripple {
+  &Element {
+    transition: $animation-time-short;
+    position: relative;
+    -webkit-user-select: none;
+    user-select: none;
+    &.Color_ {
+      &white .RippleWrap {}
+      &cloud .RippleWrap .Wave {
+        background-color: rgba(var(--color-dark-rgb), .4) !important;
+      }
+      &theme .RippleWrap .Wave {
+        background-color: $color-theme-lighter !important;
+        opacity: .4;
+      }
+    }
+  }
+  &Wrap {
+    position: absolute !important;
+    z-index: 100 !important;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    overflow: hidden;
+    border-radius: inherit;
+    pointer-events: none !important;
+    .Wave {
+      position: absolute;
+      overflow: hidden;
+      top: 0;
+      left: 0;
+      width: 0;
+      height: 0;
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+      transition: 1s;
+      transition-timing-function: $animation-style1;
+      background-color: rgba(white, .75);
+    }
+  }
+}
+//
+.PuddingEffect {
+  animation: pdAnm .5s ease;
+  position: relative;
+}
+@keyframes pdAnm {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+  10% {
+    transform: scale3d(1.1, 0.75, 1);
+  }
+  20% {
+    transform: scale3d(0.85, 1.15, 1);
+  }
+  30% {
+    transform: scale3d(1.05, 0.85, 1);
+  }
+  45% {
+    transform: scale3d(.95, 1.05, 1);
+  }
+  75% {
+    transform: scale3d(1.02, .95, 1);
+  }
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}
+:global {
+  .eff_ {
+    &expand:active {
+      transition: $animation-time-short;
+      transform: scale(1.05);
+    }
+    &shrink:active {
+      transition: $animation-time-short;
+      transform: scale(0.97);
+    }
+  }
+}