comparison core/misc/states.es6.js @ 4:a9cd425dd02b

Update, including to Drupal core 8.6.10

 /**
  * @file
  * Drupal's states library.
  */
 
-(function ($, Drupal) {
+(function($, Drupal) {
   /**
    * The base States namespace.
    *
    * Having the local states variable allows us to use the States namespace
    * without having to always declare "Drupal.states".
    *
    * @namespace Drupal.states
    */
   const states = {
-
     /**
      * An array of functions that should be postponed.
      */
     postponed: [],
   };
 
   Drupal.states = states;
+
+  /**
+   * Inverts a (if it's not undefined) when invertState is true.
+   *
+   * @function Drupal.states~invert
+   *
+   * @param {*} a
+   *   The value to maybe invert.
+   * @param {bool} invertState
+   *   Whether to invert state or not.
+   *
+   * @return {bool}
+   *   The result.
+   */
+  function invert(a, invertState) {
+    return invertState && typeof a !== 'undefined' ? !a : a;
+  }
+
+  /**
+   * Compares two values while ignoring undefined values.
+   *
+   * @function Drupal.states~compare
+   *
+   * @param {*} a
+   *   Value a.
+   * @param {*} b
+   *   Value b.
+   *
+   * @return {bool}
+   *   The comparison result.
+   */
+  function compare(a, b) {
+    if (a === b) {
+      return typeof a === 'undefined' ? a : true;
+    }
+
+    return typeof a === 'undefined' || typeof b === 'undefined';
+  }
+
+  /**
+   * Bitwise AND with a third undefined state.
+   *
+   * @function Drupal.states~ternary
+   *
+   * @param {*} a
+   *   Value a.
+   * @param {*} b
+   *   Value b
+   *
+   * @return {bool}
+   *   The result.
+   */
+  function ternary(a, b) {
+    if (typeof a === 'undefined') {
+      return b;
+    }
+    if (typeof b === 'undefined') {
+      return a;
+    }
+
+    return a && b;
+  }
 
   /**
    * Attaches the states.
    *
    * @type {Drupal~behavior}

   Drupal.behaviors.states = {
     attach(context, settings) {
       const $states = $(context).find('[data-drupal-states]');
       const il = $states.length;
       for (let i = 0; i < il; i++) {
-        const config = JSON.parse($states[i].getAttribute('data-drupal-states'));
-        Object.keys(config || {}).forEach((state) => {
+        const config = JSON.parse(
+          $states[i].getAttribute('data-drupal-states'),
+        );
+        Object.keys(config || {}).forEach(state => {
           new states.Dependent({
             element: $($states[i]),
             state: states.State.sanitize(state),
             constraints: config[state],
           });
         });
       }
 
       // Execute all postponed functions now.
       while (states.postponed.length) {
-        (states.postponed.shift())();
+        states.postponed.shift()();
       }
     },
   };
 
   /**

    * @param {object} args.constraints
    *   An object with dependency specifications. Lists all elements that this
    *   element depends on. It can be nested and can contain
    *   arbitrary AND and OR clauses.
    */
-  states.Dependent = function (args) {
+  states.Dependent = function(args) {
     $.extend(this, { values: {}, oldValue: null }, args);
 
     this.dependees = this.getDependees();
-    Object.keys(this.dependees || {}).forEach((selector) => {
+    Object.keys(this.dependees || {}).forEach(selector => {
       this.initializeDependee(selector, this.dependees[selector]);
     });
   };
 
   /**

       // If "reference" is a number and "value" is a string, then cast
       // reference as a string before applying the strict comparison in
       // compare().
       // Otherwise numeric keys in the form's #states array fail to match
       // string values returned from jQuery's val().
-      return (typeof value === 'string') ? compare(reference.toString(), value) : compare(reference, value);
+      return typeof value === 'string'
+        ? compare(reference.toString(), value)
+        : compare(reference, value);
     },
   };
 
   states.Dependent.prototype = {
-
     /**
      * Initializes one of the elements this dependent depends on.
      *
      * @memberof Drupal.states.Dependent#
      *

      * @param {object} dependeeStates
      *   The list of states that have to be monitored for tracking the
      *   dependee's compliance status.
      */
     initializeDependee(selector, dependeeStates) {
-      let state;
-      const self = this;
-
-      function stateEventHandler(e) {
-        self.update(e.data.selector, e.data.state, e.value);
-      }
-
       // Cache for the states of this dependee.
       this.values[selector] = {};
 
-      // eslint-disable-next-line no-restricted-syntax
-      for (const i in dependeeStates) {
-        if (dependeeStates.hasOwnProperty(i)) {
-          state = dependeeStates[i];
-          // Make sure we're not initializing this selector/state combination
-          // twice.
-          if ($.inArray(state, dependeeStates) === -1) {
-            continue;
-          }
-
-          state = states.State.sanitize(state);
-
-          // Initialize the value of this state.
-          this.values[selector][state.name] = null;
-
-          // Monitor state changes of the specified state for this dependee.
-          $(selector).on(`state:${state}`, { selector, state }, stateEventHandler);
-
-          // Make sure the event we just bound ourselves to is actually fired.
-          new states.Trigger({ selector, state });
+      Object.keys(dependeeStates).forEach(i => {
+        let state = dependeeStates[i];
+        // Make sure we're not initializing this selector/state combination
+        // twice.
+        if ($.inArray(state, dependeeStates) === -1) {
+          return;
         }
-      }
+
+        state = states.State.sanitize(state);
+
+        // Initialize the value of this state.
+        this.values[selector][state.name] = null;
+
+        // Monitor state changes of the specified state for this dependee.
+        $(selector).on(`state:${state}`, { selector, state }, e => {
+          this.update(e.data.selector, e.data.state, e.value);
+        });
+
+        // Make sure the event we just bound ourselves to is actually fired.
+        new states.Trigger({ selector, state });
+      });
     },
 
     /**
      * Compares a value with a reference value.
      *

      */
     compare(reference, selector, state) {
       const value = this.values[selector][state.name];
       if (reference.constructor.name in states.Dependent.comparisons) {
         // Use a custom compare function for certain reference value types.
-        return states.Dependent.comparisons[reference.constructor.name](reference, value);
-      }
-
-        // Do a plain comparison otherwise.
+        return states.Dependent.comparisons[reference.constructor.name](
+          reference,
+          value,
+        );
+      }
+
+      // Do a plain comparison otherwise.
       return compare(reference, value);
     },
 
     /**
      * Update the value of a dependee's state.

         // Normalize the value to match the normalized state name.
         value = invert(value, this.state.invert);
 
         // By adding "trigger: true", we ensure that state changes don't go into
         // infinite loops.
-        this.element.trigger({ type: `state:${this.state}`, value, trigger: true });
+        this.element.trigger({
+          type: `state:${this.state}`,
+          value,
+          trigger: true,
+        });
       }
     },
 
     /**
      * Evaluates child constraints to determine if a constraint is satisfied.

         // This constraint is an array (OR or XOR).
         const hasXor = $.inArray('xor', constraints) === -1;
         const len = constraints.length;
         for (let i = 0; i < len; i++) {
           if (constraints[i] !== 'xor') {
-            const constraint = this.checkConstraints(constraints[i], selector, i);
+            const constraint = this.checkConstraints(
+              constraints[i],
+              selector,
+              i,
+            );
             // Return if this is OR and we have a satisfied constraint or if
             // this is XOR and we have a second satisfied constraint.
             if (constraint && (hasXor || result)) {
               return hasXor;
             }

       else if ($.isPlainObject(constraints)) {
         // This constraint is an object (AND).
         // eslint-disable-next-line no-restricted-syntax
         for (const n in constraints) {
           if (constraints.hasOwnProperty(n)) {
-            result = ternary(result, this.checkConstraints(constraints[n], selector, n));
+            result = ternary(
+              result,
+              this.checkConstraints(constraints[n], selector, n),
+            );
             // False and anything else will evaluate to false, so return when
             // any false condition is found.
             if (result === false) {
               return false;
             }

      *   true or false, depending on whether this constraint is satisfied.
      */
     checkConstraints(value, selector, state) {
       // Normalize the last parameter. If it's non-numeric, we treat it either
       // as a selector (in case there isn't one yet) or as a trigger/state.
-      if (typeof state !== 'string' || (/[0-9]/).test(state[0])) {
+      if (typeof state !== 'string' || /[0-9]/.test(state[0])) {
         state = null;
-      }
-      else if (typeof selector === 'undefined') {
+      } else if (typeof selector === 'undefined') {
         // Propagate the state to the selector when there isn't one yet.
         selector = state;
         state = null;
       }
 

         // Constraints is the actual constraints of an element to check for.
         state = states.State.sanitize(state);
         return invert(this.compare(value, selector, state), state.invert);
       }
 
-        // Resolve this constraint as an AND/OR operator.
+      // Resolve this constraint as an AND/OR operator.
       return this.verifyConstraints(value, selector);
     },
 
     /**
      * Gathers information about all required triggers.

     getDependees() {
       const cache = {};
       // Swivel the lookup function so that we can record all available
       // selector- state combinations for initialization.
       const _compare = this.compare;
-      this.compare = function (reference, selector, state) {
+      this.compare = function(reference, selector, state) {
         (cache[selector] || (cache[selector] = [])).push(state.name);
         // Return nothing (=== undefined) so that the constraint loops are not
         // broken.
       };
 

    * @constructor Drupal.states.Trigger
    *
    * @param {object} args
    *   Trigger arguments.
    */
-  states.Trigger = function (args) {
+  states.Trigger = function(args) {
     $.extend(this, args);
 
     if (this.state in states.Trigger.states) {
       this.element = $(this.selector);
 

       }
     }
   };
 
   states.Trigger.prototype = {
-
     /**
      * @memberof Drupal.states.Trigger#
      */
     initialize() {
       const trigger = states.Trigger.states[this.state];
 
       if (typeof trigger === 'function') {
         // We have a custom trigger initialization function.
         trigger.call(window, this.element);
-      }
-      else {
-        Object.keys(trigger || {}).forEach((event) => {
+      } else {
+        Object.keys(trigger || {}).forEach(event => {
           this.defaultTrigger(event, trigger[event]);
         });
       }
 
       // Mark this trigger as initialized for this element.

      */
     defaultTrigger(event, valueFn) {
       let oldValue = valueFn.call(this.element);
 
       // Attach the event callback.
-      this.element.on(event, $.proxy(function (e) {
-        const value = valueFn.call(this.element, e);
-        // Only trigger the event if the value has actually changed.
-        if (oldValue !== value) {
-          this.element.trigger({ type: `state:${this.state}`, value, oldValue });
-          oldValue = value;
-        }
-      }, this));
-
-      states.postponed.push($.proxy(function () {
-        // Trigger the event once for initialization purposes.
-        this.element.trigger({ type: `state:${this.state}`, value: oldValue, oldValue: null });
-      }, this));
+      this.element.on(
+        event,
+        $.proxy(function(e) {
+          const value = valueFn.call(this.element, e);
+          // Only trigger the event if the value has actually changed.
+          if (oldValue !== value) {
+            this.element.trigger({
+              type: `state:${this.state}`,
+              value,
+              oldValue,
+            });
+            oldValue = value;
+          }
+        }, this),
+      );
+
+      states.postponed.push(
+        $.proxy(function() {
+          // Trigger the event once for initialization purposes.
+          this.element.trigger({
+            type: `state:${this.state}`,
+            value: oldValue,
+            oldValue: null,
+          });
+        }, this),
+      );
     },
   };
 
   /**
    * This list of states contains functions that are used to monitor the state

       change() {
         // prop() and attr() only takes the first element into account. To
         // support selectors matching multiple checkboxes, iterate over all and
         // return whether any is checked.
         let checked = false;
-        this.each(function () {
+        this.each(function() {
           // Use prop() here as we want a boolean of the checkbox state.
           // @see http://api.jquery.com/prop/
           checked = $(this).prop('checked');
           // Break the each() loop if this is checked.
           return !checked;

       },
     },
 
     collapsed: {
       collapsed(e) {
-        return (typeof e !== 'undefined' && 'value' in e) ? e.value : !this.is('[open]');
+        return typeof e !== 'undefined' && 'value' in e
+          ? e.value
+          : !this.is('[open]');
       },
     },
   };
 
   /**

    * @constructor Drupal.states.State
    *
    * @param {string} state
    *   The name of the state.
    */
-  states.State = function (state) {
+  states.State = function(state) {
     /**
      * Original unresolved name.
      */
     this.pristine = state;
     this.name = state;

       }
 
       // Replace the state with its normalized name.
       if (this.name in states.State.aliases) {
         this.name = states.State.aliases[this.name];
-      }
-      else {
+      } else {
         process = false;
       }
     } while (process);
   };
 

    *   A state object or the name of a state.
    *
    * @return {Drupal.states.state}
    *   A state object.
    */
-  states.State.sanitize = function (state) {
+  states.State.sanitize = function(state) {
     if (state instanceof states.State) {
       return state;
     }
 
     return new states.State(state);

     closed: 'collapsed',
     readwrite: '!readonly',
   };
 
   states.State.prototype = {
-
     /**
      * @memberof Drupal.states.State#
      */
     invert: false,
 

    * bubble up to these handlers. We use this system so that themes and modules
    * can override these state change handlers for particular parts of a page.
    */
 
   const $document = $(document);
-  $document.on('state:disabled', (e) => {
+  $document.on('state:disabled', e => {
     // Only act when this change was triggered by a dependency and not by the
     // element monitoring itself.
     if (e.trigger) {
       $(e.target)
         .prop('disabled', e.value)

       // Note: WebKit nightlies don't reflect that change correctly.
       // See https://bugs.webkit.org/show_bug.cgi?id=23789
     }
   });
 
-  $document.on('state:required', (e) => {
+  $document.on('state:required', e => {
     if (e.trigger) {
       if (e.value) {
         const label = `label${e.target.id ? `[for=${e.target.id}]` : ''}`;
-        const $label = $(e.target).attr({ required: 'required', 'aria-required': 'aria-required' }).closest('.js-form-item, .js-form-wrapper').find(label);
+        const $label = $(e.target)
+          .attr({ required: 'required', 'aria-required': 'aria-required' })
+          .closest('.js-form-item, .js-form-wrapper')
+          .find(label);
         // Avoids duplicate required markers on initialization.
         if (!$label.hasClass('js-form-required').length) {
           $label.addClass('js-form-required form-required');
         }
-      }
-      else {
+      } else {
         $(e.target)
           .removeAttr('required aria-required')
           .closest('.js-form-item, .js-form-wrapper')
           .find('label.js-form-required')
           .removeClass('js-form-required form-required');
       }
     }
   });
 
-  $document.on('state:visible', (e) => {
+  $document.on('state:visible', e => {
     if (e.trigger) {
-      $(e.target).closest('.js-form-item, .js-form-submit, .js-form-wrapper').toggle(e.value);
+      $(e.target)
+        .closest('.js-form-item, .js-form-submit, .js-form-wrapper')
+        .toggle(e.value);
     }
   });
 
-  $document.on('state:checked', (e) => {
+  $document.on('state:checked', e => {
     if (e.trigger) {
       $(e.target).prop('checked', e.value);
     }
   });
 
-  $document.on('state:collapsed', (e) => {
+  $document.on('state:collapsed', e => {
     if (e.trigger) {
       if ($(e.target).is('[open]') === e.value) {
-        $(e.target).find('> summary').trigger('click');
+        $(e.target)
+          .find('> summary')
+          .trigger('click');
       }
     }
   });
-
-  /**
-   * These are helper functions implementing addition "operators" and don't
-   * implement any logic that is particular to states.
-   */
-
-  /**
-   * Bitwise AND with a third undefined state.
-   *
-   * @function Drupal.states~ternary
-   *
-   * @param {*} a
-   *   Value a.
-   * @param {*} b
-   *   Value b
-   *
-   * @return {bool}
-   *   The result.
-   */
-  function ternary(a, b) {
-    if (typeof a === 'undefined') {
-      return b;
-    }
-    else if (typeof b === 'undefined') {
-      return a;
-    }
-
-    return a && b;
-  }
-
-  /**
-   * Inverts a (if it's not undefined) when invertState is true.
-   *
-   * @function Drupal.states~invert
-   *
-   * @param {*} a
-   *   The value to maybe invert.
-   * @param {bool} invertState
-   *   Whether to invert state or not.
-   *
-   * @return {bool}
-   *   The result.
-   */
-  function invert(a, invertState) {
-    return (invertState && typeof a !== 'undefined') ? !a : a;
-  }
-
-  /**
-   * Compares two values while ignoring undefined values.
-   *
-   * @function Drupal.states~compare
-   *
-   * @param {*} a
-   *   Value a.
-   * @param {*} b
-   *   Value b.
-   *
-   * @return {bool}
-   *   The comparison result.
-   */
-  function compare(a, b) {
-    if (a === b) {
-      return typeof a === 'undefined' ? a : true;
-    }
-
-    return typeof a === 'undefined' || typeof b === 'undefined';
-  }
-}(jQuery, Drupal));
+})(jQuery, Drupal);