Skip to content

Latest commit

 

History

History
129 lines (104 loc) · 3.65 KB

README.md

File metadata and controls

129 lines (104 loc) · 3.65 KB
Raw

GitHub license npm npm bundle size

slideToggle()

Small library that replaces the so-loved jQuery function.

You do not have to worry about styles like: padding, border, height and even display: none; The library calculates everything. The library uses the Animation API.

Link to working demo - Demo

If you have trouble with the API, check the example/scripts/index.ts file.

API

 toggle(
  selector: HTMLElement,
  options: {
    /*
      animation time in miliseconds
    */
    miliseconds?: number = 200,

    /*
      animation transition function
    */
    transitionFunction?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' | 'cubic-bezier(...your custom arguments)' = 'linear',
    
    /*
      callback to notify that animation has started
      elementRef: element that we are animating
    */
    onAnimationStart?: (elementRef: HTMLElement) => void,

    /*
      callback to notify that animation has ended
      elementRef: element that we are animating
    */
    onAnimationEnd?: (elementRef: HTMLElement) => void,

    /*
      callback to notify that element has 100% height ( only in toggle )
      elementRef: element that we are animating
    */
    onOpen?: (elementRef: HTMLElement) => void, 

    /*
      callback to notify that element has 0% height ( only in toggle )
      elementRef: element that we are animating
    */
    onClose?: (elementRef: HTMLElement) => void,

    /*
      when we are done showing the element
      we set this value as the display property
      works only with toggle(), show()
    */
    elementDisplayStyle?: string = 'block'
  },
 )

USAGE

Install package by npm

npm install --save-dev slidetoggle

Install package by yarn

yarn add slidetoggle

Bundler

import { hide, show, toggle } from 'slidetoggle';

const btn = document.querySelector('button.btn');
btn.addEventListener('click', () => {
  toggle('div.toggle-div', {
    miliseconds: 400,
    onAnimationStart: elementRef() => {
      console.log('toggle: START ( onAnimationStart )', elementRef);
    },
    onAnimationEnd: (elementRef) => {
      console.log('toggle: END ( onAnimationEnd )', elementRef);
    },
    onOpen: (elementRef) => {
      console.log('element: VISIBLE ( onOpen )', elementRef);
    },
    onClose: (elementRef) => {
      console.log('element: HIDDEN ( onClose )', elementRef);
    },
    elementDisplayStyle: 'flex',
    transitionFunction: 'ease-in',
  });
});

UMD

<html>
  <script src="<your_directory>/slidetoggle/slidetoggle.js"></script>
  <script>
    document.querySelector('button.btn').addEventListener('click', () => {
      slidetoggle.show(document.querySelector('div.section'), {
        miliseconds: 400,
        onAnimationStart: (elementRef) => {
          console.log('show: START ( onAnimationStart ): ', elementRef);
        },
        onAnimationEnd: (elementRef) => {
          console.log('show: END ( onAnimationEnd ): ', elementRef);
        },
        transitionFunction: 'ease-in',
      });
    });
  </script>
</html>

LICENSE

MIT License