@creative-web-solution/front-library 6.1.3 → 6.2.9

package/Helpers/TransitionHelpers.js

@@ -0,0 +1,95 @@
+import onTransitionEnd    from '../Events/OnTransitionEnd';
+import onAnimationEnd     from '../Events/OnAnimationEnd';
+import { wait }           from './Wait';
+
+
+const KEY = Symbol( 'TransitionHelper' );
+
+
+function addWatcher( $element, styleChange, isAnimation, options = {} ) {
+    if ( $element[ KEY ] ) {
+        $element[ KEY ].off();
+    }
+
+    if ( typeof options.delay !== undefined ) {
+        options.delay = 'idle'
+    }
+
+    $element[ KEY ] = isAnimation ?
+                        onAnimationEnd( $element, {
+                            "animationName": options.animationName,
+                            "pseudoElement": options.pseudoElement
+                        } ) :
+                        onTransitionEnd( $element, {
+                            "property":      options.property,
+                            "pseudoElement": options.pseudoElement
+                        } );
+
+    wait( options.delay ).then( () => styleChange( $element ) );
+
+    $element[ KEY ].then( () => {
+        $element[ KEY ] = null;
+        return $element;
+    } );
+
+    return $element[ KEY ];
+}
+
+
+/**
+ * @param styleChange - Change the style of $element inside this function by adding a class or set a style property
+ * @param delay - Delay betwwen the add of the listener and call of styleChange.
+ *
+ * delay = 'idle' : window.requestIdleCallback
+ * delay < 0 : window.requestAnimationFrame
+ * delay >= 0 : setTimeout
+ *
+ * @example
+ * ```js
+ * // Watch for the end of the transition of the property "opacity" on the pseudo element ::after on $element
+ *
+ * const myWatcher = transitionWatcher( $elment, () => $element.classList.add('some-class'), {
+ *  "pseudoElement": "after",
+ *  "property":     "opacity"
+ * } );
+ * ```
+ */
+export function transitionWatcher( $element, styleChange, options ) {
+    return addWatcher( $element, styleChange, false, options );
+}
+
+
+/**
+ * @param animationStart - Start the animation of $element inside this function by adding a class or set a style property
+ * @param delay - Delay betwwen the add of the listener and call of animationStart.
+ *
+ * delay = 'idle' : window.requestIdleCallback
+ * delay < 0 : window.requestAnimationFrame
+ * delay >= 0 : setTimeout
+ *
+ * @example
+ * ```js
+ * //Watch for the end of the animation "my-animation" on the pseudo element ::after on $element
+ *
+ * const myWatcher = animationWatcher( $elment, () => $element.classList.add('some-class'), {
+ *  "pseudoElement": "after",
+ *  "animationName": ["my-animation"]
+ * } );
+ * ```
+ */
+ export function animationWatcher( $element, animationStart, options ) {
+    return addWatcher( $element, animationStart, true, options );
+}
+
+
+/**
+ * @example Kill a transition or animation watcher on $element
+ *
+ * killWatcher( $elment )
+ */
+export function killWatcher( $element ) {
+    if ( $element[ KEY ] ) {
+        $element[ KEY ].off();
+        $element[ KEY ] = null;
+    }
+}

package/Helpers/extend.js

@@ -1,4 +1,4 @@
-import { isFunction, isArray, isPlainObject } from 'front-library/Helpers/Type';
+import { isFunction, isArray, isPlainObject } from '@creative-web-solution/front-library/Helpers/Type';
 
 
 /**

package/Helpers/getValue.js

@@ -1,4 +1,4 @@
-import { isString, isNumber } from 'front-library/Helpers/Type';
+import { isString, isNumber } from '@creative-web-solution/front-library/Helpers/Type';
 
 
 function cleanFieldsValue( value ) {

package/Helpers/sequential.js

@@ -1,4 +1,4 @@
-import { isArray } from 'front-library/Helpers/Type';
+import { isArray } from '@creative-web-solution/front-library/Helpers/Type';
 
 /**
  * Create a sequential list of promises (which resolves one after another)

package/Helpers/wait.js

@@ -1,4 +1,4 @@
-import { defer } from 'front-library/Helpers/defer';
+import { defer } from '@creative-web-solution/front-library/Helpers/defer';
 
 /**
  * Return a promise and wait for 'waitFor' millisecond to resolve it.

package/ModernizrAddons/css-var-support.js

@@ -0,0 +1,3 @@
+Modernizr.addTest( 'cssvars', function() {
+    return window.CSS && CSS.supports('color', 'var(--fake-var)');;
+} );

package/ModernizrAddons/touchdevice.js

@@ -1,4 +1,4 @@
 /*dependencies: addons::mobile,addons::touchpad */
 Modernizr.addTest( 'touchdevice', function() {
-    return Modernizr.mobile || Modernizr.touchpad;
+    return window.matchMedia('(hover: none)').matches;
 } );

package/Modules/Accordion.js

@@ -1,7 +1,7 @@
-import { aClass, rClass } from 'front-library/DOM/Class';
-import { on, off } from 'front-library/Events/EventsManager';
-import { extend } from 'front-library/Helpers/Extend';
-import { next } from 'front-library/DOM/Traversing';
+import { aClass, rClass } from '@creative-web-solution/front-library/DOM/Class';
+import { on, off } from '@creative-web-solution/front-library/Events/EventsManager';
+import { extend } from '@creative-web-solution/front-library/Helpers/Extend';
+import { next } from '@creative-web-solution/front-library/DOM/Traversing';
 
 const STATUS_ON = 'STATUS_ON';
 const STATUS_OFF = 'STATUS_OFF';
@@ -66,10 +66,10 @@ function Tab( $TAB, options ) {
     function toggleTab( e ) {
         e.preventDefault();
 
-        if( isOpen ) {
+        if( isOpen && ( !options.atLeastOneOpen || options.allowMultipleTab ) ) {
             closeTab();
         }
-        else {
+        else if( !isOpen ) {
             openTab();
         }
     }
@@ -108,6 +108,7 @@ function Tab( $TAB, options ) {
 const DEFAULT_OPTIONS = {
     "tabSelector":      "button[aria-expanded]",
     "allowMultipleTab": false,
+    "atLeastOneOpen":   false,
     "animations": {
         "open": function( $TAB, $TAB_PANNEL ) {
             aClass( [ $TAB, $TAB_PANNEL ], 'on' );
@@ -155,6 +156,7 @@ const DEFAULT_OPTIONS = {
  * @param {Object} [userOptions]
  * @param {String} [userOptions.tabSelector='button[aria-expanded]']
  * @param {Boolean} [userOptions.allowMultipleTab=false]
+ * @param {Boolean} [userOptions.atLeastOneOpen=false]
  * @param {Accordion_callback} [userOptions.onOpenAtStart]
  * @param {Accordion_callback} [userOptions.onOpen]
  * @param {Accordion_callback} [userOptions.onClose]
@@ -166,6 +168,7 @@ const DEFAULT_OPTIONS = {
  * @example new Accordion( document.querySelector( '.accordion' ), {
  *      "tabSelector":     ".tab",
  *      "allowMultipleTab": false,
+ *      "atLeastOneOpen":   false,
  *      "animations": {
  *          "open": function( $tab, $panel ) {
  *              aClass( [ $tab, $panel ], 'on' );
@@ -233,6 +236,7 @@ export function Accordion( $accordionWrapper, userOptions = {} ) {
         if( status === STATUS_ON ){
             return;
         }
+
         status = STATUS_ON;
 
         $tabs.forEach( ( $tab, index ) => {
@@ -254,6 +258,8 @@ export function Accordion( $accordionWrapper, userOptions = {} ) {
         tablist.forEach( tab => {
             tab.destroy();
         } );
+
+        tablist.length = 0;
     }
 
 

package/Modules/Autocomplete.js

@@ -1,10 +1,10 @@
-import { gesture, gestureOff } from 'front-library/Events/Gesture';
-import { extend } from 'front-library/Helpers/Extend';
-import { append, remove } from 'front-library/DOM/Manipulation';
-import { height } from 'front-library/DOM/Size';
-import { offset } from 'front-library/DOM/offset';
-import { outerHeight, outerWidth } from 'front-library/DOM/OuterSize';
-import { position } from 'front-library/DOM/position';
+import { gesture, gestureOff } from '@creative-web-solution/front-library/Events/Gesture';
+import { extend } from '@creative-web-solution/front-library/Helpers/Extend';
+import { append, remove } from '@creative-web-solution/front-library/DOM/Manipulation';
+import { height } from '@creative-web-solution/front-library/DOM/Size';
+import { offset } from '@creative-web-solution/front-library/DOM/offset';
+import { outerHeight, outerWidth } from '@creative-web-solution/front-library/DOM/OuterSize';
+import { position } from '@creative-web-solution/front-library/DOM/position';
 
 /**
  * Autocomplete