Issue/24 (#26)

* issue/24 added elementDisplayStyle

* Release 3.2.4

README.md

@@ -15,12 +15,34 @@ The library **calculates everything**. The library uses the [requestAnimationFra
  toggle(
   selector: string | HTMLElement,
   options: {
+    // animation time
+    // OPTIONAL
+    // default value - 200
     miliseconds: number,
+    // animation transition function
+    // OPTIONAL
+    // default value - linear
     transitionFunction: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' | 'cubic-bezier(...your custom arguments)',
+    // callback to notify that animation has started
+    // OPTIONAL
     onAnimationStart: () => void,
+    // callback to notify that animation has ended
+    // OPTIONAL
     onAnimationEnd: () => void,
-    onOpen: () => void, // only with toggle()
-    onClose: () => void // only with toggle()
+    // callback to notify that element has 100% height
+    // works only with toggle()
+    // OPTIONAL
+    onOpen: () => void, 
+    // callback to notify that element has 0% height
+    // works only with toggle()
+    // OPTIONAL
+    onClose: () => void,
+    // when we are done showing the element
+    // we set this value as the display property
+    // works only with toggle(), show()
+    // OPTIONAL
+    // default value - block
+    elementDisplayStyle: string 
   },
  )
 ```
@@ -60,7 +82,8 @@ btn.addEventListener('click', () => {
     },
     onClose: () => { // This function is only possible with toggle
       console.log('Only with toggle - when element has 0%');
-    }
+    },
+    elementDisplayStyle: 'inline-block' 
   });
 });
 ```
@@ -81,6 +104,7 @@ btn.addEventListener('click', () => {
         onAnimationEnd: () => {
           console.log('animation ended');
         },
+        elementDisplayStyle: 'flex'
       });
     });
   </script>

example/package.json

@@ -27,6 +27,6 @@
     "webpack-dev-server": "^3.11.1"
   },
   "dependencies": {
-    "slidetoggle": "^3.2.2"
+    "slidetoggle": "^3.2.4"
   }
 }

example/scripts/index.ts

@@ -9,7 +9,7 @@ Events.on('button.toggle', 'click', () => {
 
   toggle(element, {
     miliseconds: 400,
-    transitionFunction: 'ease-in'
+    transitionFunction: 'ease-in',
   });
 });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidetoggle",
-  "version": "3.2.3",
+  "version": "3.2.4",
   "description": "Small library that replaces the so-loved jQuery function",
   "main": "dist/slidetoggle.js",
   "module": "dist/index.js",

src/common/show.ts

@@ -7,6 +7,6 @@ namespace Show {
   };
 }
 
-export const show = (element: Element.ElementType, options: Types.Options) => {
+export const show = (element: Element.ElementType, options: Types.ShowOptions) => {
   Show.on(Element.getElement(element), options);
 };

src/common/types.ts

@@ -6,8 +6,12 @@ export namespace Types {
     transitionFunction?: string;
   };
 
+  export type ShowOptions = {
+    elementDisplayStyle?: CSSStyleDeclaration['display'];
+  } & Options;
+
   export type ToggleOptions = {
     onOpen?: () => void;
     onClose?: () => void;
-  } & Options
+  } & ShowOptions
 }

src/utils/Animate.ts

@@ -68,16 +68,18 @@ export namespace Animate {
     Element.setAttribute(element, slideToggleAttribute, 'false');
   };
 
-  export const show = (element: HTMLElement, options: Types.Options) => {
+  export const show = (element: HTMLElement, options: Types.ShowOptions) => {
     if (isShown(element)) {
       return;
     }
 
+    const { elementDisplayStyle = 'block' } = options;
+
     options.onAnimationStart?.();
 
     Element.setStyles(element, {
       transition: '',
-      display: 'block',
+      display: elementDisplayStyle,
       height: 'auto',
       paddingTop: '',
       paddingBottom: '',
@@ -93,7 +95,7 @@ export namespace Animate {
 
     onRequestAnimationFrame(() => {
       Element.setStyles(element, {
-        display: 'block',
+        display: elementDisplayStyle,
         overflow: 'hidden',
         height: '0',
         paddingTop: '0',

webpack.config.js

@@ -15,6 +15,9 @@ module.exports = {
     rules: [
       {
         exclude: /\.spec.tsx?$/,
+        include: [
+          path.resolve(__dirname, "src")
+        ],
         test: /\.(ts|tsx)$/,
         loader: 'ts-loader',
         options: {
@@ -23,6 +26,9 @@ module.exports = {
       },
       {
         enforce: 'pre',
+        include: [
+          path.resolve(__dirname, "src")
+        ],
         test: /\.js$/,
         loader: 'source-map-loader',
       },