@opentech0/dom-animations 1.0.1

package/.github/ISSUE_TEMPLATE/BUG_REPORT.md

@@ -0,0 +1,39 @@
+---
+name: "🐞 Rapport de bug"
+about: Créez un rapport de bug
+title: ''
+labels: ['bug', 'status:Unconfirmed']
+assignees: 'Androlax2'
+
+---
+
+<!--- Fournir un résumé général du problème dans le titre ci-dessus -->
+
+## Description
+<!--- Fournissez une introduction plus détaillée au problème lui-même, et pourquoi vous considérez qu'il s'agit d'un bug -->
+
+## Comportement attendu
+<!--- Dites-nous ce qu'il devrait se passer -->
+
+## Comportement réel
+<!--- Dites-nous ce qu'il se passe à la place -->
+
+## Correction possible
+<!--- Non obligatoire, mais suggérez un correctif ou une raison pour le bug -->
+
+## Étapes à reproduire
+<!--- Fournissez un lien vers un exemple vivant, ou un ensemble non ambigu d'étapes pour reproduire ce bug. Inclure le code à reproduire, le cas échéant -->
+1.
+2.
+3.
+4.
+
+## Contexte
+<!--- Comment ce bug vous a-t-il affecté ? Qu'essayiez-vous d'accomplir ? -->
+
+## Votre environnement
+<!--- Incluez autant de détails pertinents sur l'environnement dans lequel vous avez rencontré le bug -->
+* Version utilisée :
+* Nom et version de l'environnement (par exemple, Chrome 39, node.js 5.4) :
+* Système d'exploitation et version (bureau ou mobile) :
+* Lien vers votre projet :

package/.github/ISSUE_TEMPLATE/DOCUMENTATION.md

@@ -0,0 +1,30 @@
+---
+name: "📚 Documentation"
+about: Suggérer des modifications pour la documentation.
+title: ''
+labels: 'documentation'
+assignees: 'Androlax2'
+
+---
+
+<!--
+  Résumez le changement de documentation que vous suggérez dans le titre du problème.
+-->
+
+### Section pertinente de la documentation. 
+
+<!--
+  Copiez le lien de la section ici.
+-->
+
+### Détails
+
+<!--
+  Fournissez une description claire et concise de ce que vous voulez qu'il se passe.
+-->
+
+(Écrivez votre réponse ici.)
+
+<!--
+  Si vous suggérez un changement très spécifique à la documentation, n'hésitez pas à soumettre directement une pull request.
+-->

package/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md

@@ -0,0 +1,20 @@
+---
+name: "🚀 Demande de fonctionnalité"
+about: Suggérer une idée pour améliorer le produit.
+title: ''
+labels: 'enhancement'
+assignees: 'Androlax2'
+
+---
+
+<!--- Fournir un résumé général du problème dans le titre ci-dessus -->
+
+## Description détaillée
+<!--- Fournissez une description détaillée du changement ou de l'ajout que vous proposez -->
+
+## Contexte
+<!--- Pourquoi ce changement est-il important pour vous ? Comment l'utiliseriez-vous ? -->
+<!--- Comment peut-il bénéficier aux autres utilisateurs ? -->
+
+## Mise en œuvre possible
+<!--- Non obligatoire, mais suggérez une idée pour mettre en œuvre l'ajout ou le changement -->

package/.github/PULL_REQUEST_TEMPLATE.MD

@@ -0,0 +1,34 @@
+<!--- Fournissez un résumé général de vos changements dans le titre ci-dessus -->
+
+## Description
+<!--- Décrivez vos changements en détail -->
+
+## Motivation et contexte
+<!--- Pourquoi ce changement est-il nécessaire ? Quel problème résout-il ? -->
+<!--- Si elle corrige un problème ouvert, veuillez établir un lien vers ce problème ici. -->
+
+## Comment cela a-t-il été testé ?
+<!--- Veuillez décrire en détail comment vous avez testé vos modifications. -->
+<!--- Incluez les détails de votre environnement de test, et les tests que vous avez exécutés pour -->
+<!--- voir comment votre changement affecte d'autres zones du code, etc. -->
+
+## Captures d'écran (le cas échéant) :
+
+## Types de changements
+<!--- Quels types de changements votre code introduit-il ? Mettez un `x` dans toutes les cases qui s'appliquent : -->
+- [ ] Correction de bug (changement non cassant qui corrige un problème).
+- [ ] Nouvelle fonctionnalité (changement non cassant qui ajoute une fonctionnalité)
+- [ ] Breaking change (correction ou fonctionnalité qui entraînerait un changement des fonctionnalités existante)
+
+## Liste de contrôle :
+<!--- Passez en revue tous les points suivants, et mettez un `x` dans toutes les cases qui s'appliquent. -->
+<!--- Si vous n'êtes pas sûr de l'un de ces points, n'hésitez pas à demander. Nous sommes là pour vous aider ! -->
+- [ ] Mon code suit le style de code de ce projet.
+- [ ] Mon changement nécessite une modification de la documentation.
+- [ ] J'ai mis à jour la documentation en conséquence.
+- [ ] J'ai linter mon code 
+  - [ ] composer lint
+  - [ ] yarn eslint
+  - [ ] yarn stylelint
+- [ ] J'ai ajouté des tests pour couvrir mes changements. <!--- Dans le cas où le projet contient des tests --->
+- [ ] Tous les tests nouveaux et existants sont passés. <!--- Dans le cas où le projet contient des tests --->

package/.github/workflows/push.yml

@@ -0,0 +1,22 @@
+name: Create a Release
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Release
+        uses: justincy/github-action-npm-release@2.0.2
+        id: release
+      - name: Print release output
+        if: ${{ steps.release.outputs.released == 'true' }}
+        run: echo Release ID ${{ steps.release.outputs.release_id }}

package/.github/workflows/release.yml

@@ -0,0 +1,24 @@
+name: Publish the package to NPM
+
+on:
+  release:
+    types: [created]
+  workflow_run:
+    workflows: ["Create a Release"]
+    types:
+      - completed
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "12.x"
+          registry-url: "https://registry.npmjs.org"
+      - run: npm install
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/DOMAnimations.js

@@ -0,0 +1,145 @@
+/**
+ * DOM Animations
+ */
+ export default class DOMAnimations {
+
+	/**
+	 * SlideUp
+	 *
+	 * @param {HTMLElement} element
+	 * @param {Number} duration
+	 * @returns {Promise<boolean>}
+	 */
+	static slideUp(element, duration = 500) {
+		return new Promise(resolve => {
+			element.style.height = element.getAttribute('data-height') + 'px';
+			element.style.transitionDuration = duration + 'ms';
+			element.offsetHeight;
+			element.style.height = '0px';
+			element.style.paddingTop = '0px';
+			element.style.paddingBottom = '0px';
+			element.style.marginTop = '0px';
+			element.style.marginBottom = '0px';
+
+			setTimeout(() => {
+				element.removeAttribute('style');
+				resolve(false);
+			}, duration);
+		});
+	}
+
+	/**
+	 * SlideDown
+	 *
+	 * @param {HTMLElement} element
+	 * @param {Number} duration
+	 * @returns {Promise<boolean>}
+	 */
+	static slideDown(element, duration = 500) {
+		return new Promise(resolve => {
+			const displayBefore = window.getComputedStyle(element).display;
+
+			if (displayBefore !== 'none') return;
+
+			element.style.display = 'block';
+			const height = element.offsetHeight;
+			element.style.overflow = 'hidden';
+			element.style.height = '0px';
+			element.style.paddingTop = '0px';
+			element.style.paddingBottom = '0px';
+			element.style.marginTop = '0px';
+			element.style.marginBottom = '0px';
+			element.offsetHeight;
+			element.style.boxSizing = 'border-box';
+			element.style.transitionProperty = 'height, margin, padding';
+			element.style.transitionDuration = duration + 'ms';
+			element.style.height = height + 'px';
+			element.style.removeProperty('padding-top');
+			element.style.removeProperty('padding-bottom');
+			element.style.removeProperty('margin-top');
+			element.style.removeProperty('margin-bottom');
+
+			setTimeout(() => {
+				element.setAttribute('data-height', height);
+				element.style.height = 'auto';
+				resolve(true);
+			}, duration);
+		});
+	}
+
+	/**
+	 * SlideToggle
+	 *
+	 * @param {HTMLElement} element
+	 * @param {Number} duration
+	 * @returns {Promise<boolean>}
+	 */
+	static slideToggle(element, duration = 500) {
+		if (window.getComputedStyle(element).display === 'none') {
+			return this.slideDown(element, duration);
+		} else {
+			return this.slideUp(element, duration);
+		}
+	}
+
+	/**
+	 * Fade in an element
+	 *
+	 * @param element
+	 * @param display
+	 */
+	static fadeIn(element, display) {
+		element.style.opacity = 0;
+		element.style.display = display || 'block';
+
+		(
+			function fade() {
+				let val = parseFloat(element.style.opacity);
+				if (!(
+					(
+						val += .1
+					) > 1
+				)) {
+					element.style.opacity = val;
+					requestAnimationFrame(fade);
+				}
+			}
+		)();
+	}
+
+	/**
+	 * Fade out an element
+	 *
+	 * @param element
+	 */
+	static fadeOut(element) {
+		element.style.opacity = 1;
+
+		(
+			function fade() {
+				//@formatter:off
+				if ((element.style.opacity -= .1) < 0) {
+					element.style.display = 'none';
+				} else {
+					requestAnimationFrame(fade);
+				}
+				//@formatter:on
+			}
+		)();
+	}
+
+	/**
+	 * Fade toggle
+	 *
+	 * @param element
+	 * @param display
+	 */
+	static fadeToggle(element, display) {
+		if (window.getComputedStyle(element).display === 'none') {
+			return this.fadeIn(element, display);
+		} else {
+			return this.fadeOut(element);
+		}
+	}
+
+}

package/README.md

@@ -0,0 +1,7 @@
+DOMAnimations
+
+Javascript class to manage DOM Animations.
+
+```bash
+yarn add @opentech0/dom-animations
+```"# DOMAnimations" 

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@opentech0/dom-animations",
+  "version": "1.0.1",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/opentech0/DOMAnimations.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/opentech0/DOMAnimations/issues"
+  },
+  "homepage": "https://github.com/opentech0/DOMAnimations#readme",
+  "description": ""
+}