amotify 0.0.4 → 0.0.5

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

@@ -1,62 +0,0 @@
-@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

@@ -1,81 +0,0 @@
-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

@@ -1,141 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,83 +0,0 @@
-@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);
-    }
-  }
-}