@cloudfour/transition-hidden-element - npm Package Compare versions

Comparing version 1.0.5 to 2.0.1

cypress/integration/timeout_spec.js

@@ -6,3 +6,3 @@ const opacityIsTransitioning = element => {
 
-describe('Fade With Timeout HideMode', function() {
+describe('Fade With Timeout waitMode', function() {
   it('Showing', function() {
@@ -9,0 +9,0 @@ cy.visit('/').then(function(contextWindow) {

demo/demo.js

@@ -22,6 +22,8 @@ import { transitionHiddenElement } from '../src/index';
 
+
+
 const fadeIn = transitionHiddenElement({
   element: document.querySelector('.js-fade-in'),
   visibleClass: 'is-shown',
-  hideMode: 'immediate'
+  waitMode: 'immediate'
 });
@@ -41,6 +43,8 @@
 
+
+
 const fadeOutTimeout = transitionHiddenElement({
   element: document.querySelector('.js-fade-out-timeout'),
   visibleClass: 'is-shown',
-  hideMode: 'timeout',
+  waitMode: 'timeout',
   timeoutDuration: 300
@@ -66,1 +70,28 @@ });
   });
+
+
+
+const fadeInOutDisplay = transitionHiddenElement({
+  element: document.querySelector('.js-fade-in-out-display'),
+  visibleClass: 'is-shown',
+  hideMode: 'display',
+  displayValue: 'block'
+});
+
+document
+  .querySelector('.js-show-fade-in-out-display')
+  .addEventListener('click', () => {
+    fadeInOutDisplay.show();
+  });
+
+document
+  .querySelector('.js-hide-fade-in-out-display')
+  .addEventListener('click', () => {
+    fadeInOutDisplay.hide();
+  });
+
+document
+  .querySelector('.js-toggle-fade-in-out-display')
+  .addEventListener('click', () => {
+    fadeInOutDisplay.toggle();
+  });

package.json

 {
   "name": "@cloudfour/transition-hidden-element",
-  "version": "1.0.5",
+  "version": "2.0.1",
   "description": "A JavaScript utility to help you use CSS transitions when showing and hiding elements with the `hidden` attribute.",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

 # Transition Hidden Element
 
-A JavaScript utility to help you use CSS transitions when showing and hiding elements with the `hidden` attribute.
+A JavaScript utility to help you use CSS transitions when showing and hiding elements with the `hidden` attribute or `display: none;`.
 
@@ -8,7 +8,7 @@ ## Demos
 1. [An example](https://codepen.io/phebert/pen/yLybwWY) showing this library in action.
-2. [A more complex example](https://codepen.io/phebert/pen/yLybwWY) showing using this library with staggered child transitions and toggling.
+2. [A more complex example](https://codepen.io/phebert/pen/QWwONMy) showing using this library with staggered child transitions and toggling.
 
 ## Why was this created?
 
-To [properly hide elements from all users including screen reader users](https://cloudfour.com/thinks/see-no-evil-hidden-content-and-accessibility/), elements should be hidden using the `hidden` attribute. However, this prevents elements from being transitioned with CSS. If you'd like to use CSS transitions to show and hide these elements you'll need to use JavaScript to do so. This utility wraps that JavaScript into a small, easy-to-use module. 
+To [properly hide elements from all users including screen reader users](https://cloudfour.com/thinks/see-no-evil-hidden-content-and-accessibility/), elements should be hidden using the `hidden` attribute or `display: none;`. However, this prevents elements from being transitioned with CSS. If you'd like to use CSS transitions to show and hide these elements you'll need to use JavaScript to do so. This utility wraps that JavaScript into a small, easy-to-use module. 
 
@@ -21,3 +21,3 @@ ## How it Works
 
-1. Remove the `hidden` attribute.
+1. Remove the `hidden` attribute (or `display: none;`).
 2. Trigger a browser reflow.
@@ -32,3 +32,3 @@ 3. Apply a class to trigger the transition(s).
 2. Wait for the transition to complete, or wait for a timeout to complete. (Depending on initialization settings.)
-3. Add the `hidden` attribute.
+3. Add the `hidden` attribute (or `display: none;`).
 
@@ -82,3 +82,3 @@ ### Animated Children
 
-When initializing `transitionHiddenElement`, there are two required parameters and two optional parameters:
+When initializing `transitionHiddenElement`, there are two required parameters and four optional parameters:
 
@@ -89,4 +89,6 @@ ```js
   visibleClass: 'is-shown', // Required
-  hideMode: 'transitionend', // Optional — defaults to `'transitionend'`
+  waitMode: 'transitionend', // Optional — defaults to `'transitionend'`
   timeoutDuration: null // Optional — defaults to `null`
+  hideMode: 'hidden', // Optional — defaults to `'hidden'`
+  displayValue: null // Optional — defaults to `'block'`
 });
@@ -97,3 +99,3 @@ ```
 
-`element` should be the primary element we're showing and hiding. It will be the element that we'll be adding and removing classes and the `hidden` attribute from.
+`element` should be the primary element we're showing and hiding. It will be the element that we'll be adding and removing classes and the `hidden` attribute (or `display: none;`) from.
 
@@ -104,5 +106,5 @@ ### visibleClass `{String}`
 
-### hideMode `{String}`
+### waitMode `{String}`
 
-`hideMode` determines when the utility should re-apply the `hidden` attribute. It defaults to `transitionend` but has a few options:
+`waitMode` determines when the utility should re-apply the `hidden` attribute (or `display: none;`) when hiding. It defaults to `transitionend` but has a few options:
 
@@ -117,4 +119,15 @@ 1. `transitionend` — Wait for the `element`'s `transitionend` event to fire. This works if the element has a transition that will be triggered by removing the `visibleClass`.
 
-When using the `timeout` option for `hideMode` you should be sure to pass in the length of the timeout in milliseconds.
+When using the `timeout` option for `waitMode` you should be sure to pass in the length of the timeout in milliseconds.
 
+### hideMode `{String}`
+
+`hideMode` determines whether elements are hidden by applying the `hidden` attribute, or using CSS's `display: none;`. It has two options:
+
+1. `hidden` — use the `hidden` attribute (this is the default)
+1. `display` — use CSS's `display: none;`
+
+### displayValue `{String}`
+
+When using the `display` option for `hideMode`, this option determines what `display` should be set to when showing elements. e.g. `block`, `inline`, `inline-block`, etc.
+
 ## Object Methods
@@ -126,7 +139,7 @@
 
-Shows your `element`. Removes `hidden`, triggers a document reflow, and applies your `visibleClass`.
+Shows your `element`. Removes `hidden`  (or `display: none;`), triggers a document reflow, and applies your `visibleClass`.
 
 ### hide()
 
-Hides your `element`. Removes your `visibleClass` and adds `hidden`.
+Hides your `element`. Removes your `visibleClass` and adds `hidden` (or `display: none;`).
 
@@ -139,3 +152,3 @@ ### toggle()
 
-Returns the current hidden status of your `element`. It returns `true` if the element has the `hidden` attribute or is missing the `visibleClass`.
+Returns the current hidden status of your `element`. It returns `true` if the element has the `hidden` attribute, is `display: none;` or is missing the `visibleClass`.
 
@@ -142,0 +155,0 @@ ## Development

src/index.js

@@ -13,7 +13,14 @@ /**
  * @param {String} opts.visibleClass - The class to add when showing the element
- * @param {String} opts.hideMode - Determine how the library should check that
+ * @param {String} opts.waitMode - Determine how the library should check that
  *  hiding transitions are complete. The options are `'transitionEnd'`,
  *  `'timeout'`, and `'immediate'` (to hide immediately)
- * @param  {Number} opts.timeoutDuration — If `hideMode` is set to `'timeout'`,
+ * @param  {Number} opts.timeoutDuration — If `waitMode` is set to `'timeout'`,
  *  then this determines the length of the timeout.
+ * @param {String} opts.hideMode - Determine how the library should hide
+ *  elements. The options are `hidden` (use the `hidden` attribute), and
+ *  `display` (use the CSS `display` property). Defaults to `hidden`
+ * @param {String} opts.displayValue - When using the `display` `hideMode`, this
+ *  parameter determines what the CSS `display` property should be set to when
+ *  the element is shown. e.g. `block`, `inline`, `inline-block`. Defaults to
+ *  `block`.
  */
@@ -23,8 +30,10 @@ export function transitionHiddenElement({
   visibleClass,
-  hideMode = 'transitionend',
-  timeoutDuration
+  waitMode = 'transitionend',
+  timeoutDuration,
+  hideMode = 'hidden',
+  displayValue = 'block'
 }) {
-  if (hideMode === 'timeout' && typeof timeoutDuration !== 'number') {
+  if (waitMode === 'timeout' && typeof timeoutDuration !== 'number') {
     console.error(`
-      When calling transitionHiddenElement with hideMode set to timeout,
+      When calling transitionHiddenElement with waitMode set to timeout,
       you must pass in a number for timeoutDuration.
@@ -40,3 +49,3 @@ `);
   if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
-    hideMode = 'immediate';
+    waitMode = 'immediate';
   }
@@ -52,3 +61,3 @@
     if (e.target === element) {
-      element.setAttribute('hidden', true);
+      applyHiddenAttributes();
 
@@ -59,2 +68,18 @@ element.removeEventListener('transitionend', listener);
 
+  const applyHiddenAttributes = () => {
+    if(hideMode === 'display') {
+      element.style.display = 'none';
+    } else {
+      element.setAttribute('hidden', true);
+    }
+  }
+
+  const removeHiddenAttributes = () => {
+    if(hideMode === 'display') {
+      element.style.display = displayValue;
+    } else {
+      element.removeAttribute('hidden');
+    }
+  }
+
   return {
@@ -79,3 +104,3 @@ /**
 
-      element.removeAttribute('hidden');
+      removeHiddenAttributes();
 
@@ -95,10 +120,10 @@ /**
     hide() {
-      if (hideMode === 'transitionend') {
+      if (waitMode === 'transitionend') {
         element.addEventListener('transitionend', listener);
-      } else if (hideMode === 'timeout') {
+      } else if (waitMode === 'timeout') {
         this.timeout = setTimeout(() => {
-          element.setAttribute('hidden', true);
+          applyHiddenAttributes();
         }, timeoutDuration);
       } else {
-        element.setAttribute('hidden', true);
+        applyHiddenAttributes();
       }
@@ -131,5 +156,7 @@
 
+      const isDisplayNone = element.style.display === 'none';
+
       const hasVisibleClass = [...element.classList].includes(visibleClass);
 
-      return hasHiddenAttribute || !hasVisibleClass;
+      return hasHiddenAttribute || isDisplayNone || !hasVisibleClass;
     },
@@ -136,0 +163,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38241

increased by22.04%

Number of package files

21

increased by5%

Lines of code

721

increased by23.25%

Number of lines in readme file

163

increased by8.67%

No dependency changes