Club Drupal

(function ($) {

/**

 * The base States namespace.

 *

 * Having the local states variable allows us to use the States namespace

 * without having to always declare "Drupal.states".

 */

var states = Drupal.states = {

  // An array of functions that should be postponed.

  postponed: []

};

/**

 * Attaches the states.

 */

Drupal.behaviors.states = {

  attach: function (context, settings) {

    var $context = $(context);

    for (var selector in settings.states) {

      for (var state in settings.states[selector]) {

        new states.Dependent({

          element: $context.find(selector),

          state: states.State.sanitize(state),

          constraints: settings.states[selector][state]

        });

      }

    }

    // Execute all postponed functions now.

    while (states.postponed.length) {

      (states.postponed.shift())();

    }

  }

};

/**

 * Object representing an element that depends on other elements.

 *

 * @param args

 *   Object with the following keys (all of which are required):

 *   - element: A jQuery object of the dependent element

 *   - state: A State object describing the state that is dependent

 *   - 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) {

  $.extend(this, { values: {}, oldValue: null }, args);

  this.dependees = this.getDependees();

  for (var selector in this.dependees) {

    this.initializeDependee(selector, this.dependees[selector]);

  }

};

/**

 * Comparison functions for comparing the value of an element with the

 * specification from the dependency settings. If the object type can't be

 * found in this list, the === operator is used by default.

 */

states.Dependent.comparisons = {

  'RegExp': function (reference, value) {

    return reference.test(value);

  },

  'Function': function (reference, value) {

    // The "reference" variable is a comparison function.

    return reference(value);

  },

  'Number': function (reference, value) {

    // 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);

  }

};

states.Dependent.prototype = {

  /**

   * Initializes one of the elements this dependent depends on.

   *

   * @param selector

   *   The CSS selector describing the dependee.

   * @param dependeeStates

   *   The list of states that have to be monitored for tracking the

   *   dependee's compliance status.

   */

  initializeDependee: function (selector, dependeeStates) {

    var state;

    // Cache for the states of this dependee.

    this.values[selector] = {};

    for (var 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).bind('state:' + state, $.proxy(function (e) {

          this.update(selector, state, e.value);

        }, this));

        // Make sure the event we just bound ourselves to is actually fired.

        new states.Trigger({ selector: selector, state: state });

      }

    }

  },

  /**

   * Compares a value with a reference value.

   *

   * @param reference

   *   The value used for reference.

   * @param selector

   *   CSS selector describing the dependee.

   * @param state

   *   A State object describing the dependee's updated state.

   *

   * @return

   *   true or false.

   */

  compare: function (reference, selector, state) {

    var 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);

    }

    else {

      // Do a plain comparison otherwise.

      return compare(reference, value);

    }

  },

  /**

   * Update the value of a dependee's state.

   *

   * @param selector

   *   CSS selector describing the dependee.

   * @param state

   *   A State object describing the dependee's updated state.

   * @param value

   *   The new value for the dependee's updated state.

   */

  update: function (selector, state, value) {

    // Only act when the 'new' value is actually new.

    if (value !== this.values[selector][state.name]) {

      this.values[selector][state.name] = value;

      this.reevaluate();

    }

  },

  /**

   * Triggers change events in case a state changed.

   */

  reevaluate: function () {

    // Check whether any constraint for this dependent state is satisifed.

    var value = this.verifyConstraints(this.constraints);

    // Only invoke a state change event when the value actually changed.

    if (value !== this.oldValue) {

      // Store the new value so that we can compare later whether the value

      // actually changed.

      this.oldValue = value;

      // 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: value, trigger: true });

    }

  },

  /**

   * Evaluates child constraints to determine if a constraint is satisfied.

   *

   * @param constraints

   *   A constraint object or an array of constraints.

   * @param selector

   *   The selector for these constraints. If undefined, there isn't yet a

   *   selector that these constraints apply to. In that case, the keys of the

   *   object are interpreted as the selector if encountered.

   *

   * @return

   *   true or false, depending on whether these constraints are satisfied.

   */

  verifyConstraints: function(constraints, selector) {

    var result;

    if ($.isArray(constraints)) {

      // This constraint is an array (OR or XOR).

      var hasXor = $.inArray('xor', constraints) === -1;

      for (var i = 0, len = constraints.length; i < len; i++) {

        if (constraints[i] != 'xor') {

          var 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;

          }

          result = result || constraint;

        }

      }

    }

    // Make sure we don't try to iterate over things other than objects. This

    // shouldn't normally occur, but in case the condition definition is bogus,

    // we don't want to end up with an infinite loop.

    else if ($.isPlainObject(constraints)) {

      // This constraint is an object (AND).

      for (var n in constraints) {

        if (constraints.hasOwnProperty(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; }

        }

      }

    }

    return result;

  },

  /**

   * Checks whether the value matches the requirements for this constraint.

   *

   * @param value

   *   Either the value of a state or an array/object of constraints. In the

   *   latter case, resolving the constraint continues.

   * @param selector

   *   The selector for this constraint. If undefined, there isn't yet a

   *   selector that this constraint applies to. In that case, the state key is

   *   propagates to a selector and resolving continues.

   * @param state

   *   The state to check for this constraint. If undefined, resolving

   *   continues.

   *   If both selector and state aren't undefined and valid non-numeric

   *   strings, a lookup for the actual value of that selector's state is

   *   performed. This parameter is not a State object but a pristine state

   *   string.

   *

   * @return

   *   true or false, depending on whether this constraint is satisfied.

   */

  checkConstraints: function(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])) {

      state = null;

    }

    else if (typeof selector === 'undefined') {

      // Propagate the state to the selector when there isn't one yet.

      selector = state;

      state = null;

    }

    if (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);

    }

    else {

      // Resolve this constraint as an AND/OR operator.

      return this.verifyConstraints(value, selector);

    }

  },

  /**

   * Gathers information about all required triggers.

   */

  getDependees: function() {

    var cache = {};

    // Swivel the lookup function so that we can record all available selector-

    // state combinations for initialization.

    var _compare = this.compare;

    this.compare = function(reference, selector, state) {

      (cache[selector] || (cache[selector] = [])).push(state.name);

      // Return nothing (=== undefined) so that the constraint loops are not

      // broken.

    };

    // This call doesn't actually verify anything but uses the resolving

    // mechanism to go through the constraints array, trying to look up each

    // value. Since we swivelled the compare function, this comparison returns

    // undefined and lookup continues until the very end. Instead of lookup up

    // the value, we record that combination of selector and state so that we

    // can initialize all triggers.

    this.verifyConstraints(this.constraints);

    // Restore the original function.

    this.compare = _compare;

    return cache;

  }

};

states.Trigger = function (args) {

  $.extend(this, args);

  if (this.state in states.Trigger.states) {

    this.element = $(this.selector);

    // Only call the trigger initializer when it wasn't yet attached to this

    // element. Otherwise we'd end up with duplicate events.

    if (!this.element.data('trigger:' + this.state)) {

      this.initialize();

    }

  }

};

states.Trigger.prototype = {

  initialize: function () {

    var trigger = states.Trigger.states[this.state];

    if (typeof trigger == 'function') {

      // We have a custom trigger initialization function.

      trigger.call(window, this.element);

    }

    else {

      for (var event in trigger) {

        if (trigger.hasOwnProperty(event)) {

          this.defaultTrigger(event, trigger[event]);

        }

      }

    }

    // Mark this trigger as initialized for this element.

    this.element.data('trigger:' + this.state, true);

  },

  defaultTrigger: function (event, valueFn) {

    var oldValue = valueFn.call(this.element);

    // Attach the event callback.

    this.element.bind(event, $.proxy(function (e) {

      var 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: value, oldValue: 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

 * of an element. Whenever an element depends on the state of another element,

 * one of these trigger functions is added to the dependee so that the

 * dependent element can be updated.

 */

states.Trigger.states = {

  // 'empty' describes the state to be monitored

  empty: {

    // 'keyup' is the (native DOM) event that we watch for.

    'keyup': function () {

      // The function associated to that trigger returns the new value for the

      // state.

      return this.val() == '';

    }

  },

  checked: {

    'change': function () {

      return this.is(':checked');

    }

  },

  // For radio buttons, only return the value if the radio button is selected.

  value: {

    'keyup': function () {

      // Radio buttons share the same :input[name="key"] selector.

      if (this.length > 1) {

        // Initial checked value of radios is undefined, so we return false.

        return this.filter(':checked').val() || false;

      }

      return this.val();

    },

    'change': function () {

      // Radio buttons share the same :input[name="key"] selector.

      if (this.length > 1) {

        // Initial checked value of radios is undefined, so we return false.

        return this.filter(':checked').val() || false;

      }

      return this.val();

    }

  },

  collapsed: {

    'collapsed': function(e) {

      return (typeof e !== 'undefined' && 'value' in e) ? e.value : this.is('.collapsed');

    }

  }

};

/**

 * A state object is used for describing the state and performing aliasing.

 */

states.State = function(state) {

  // We may need the original unresolved name later.

  this.pristine = this.name = state;

  // Normalize the state name.

  while (true) {

    // Iteratively remove exclamation marks and invert the value.

    while (this.name.charAt(0) == '!') {

      this.name = this.name.substring(1);

      this.invert = !this.invert;

    }

    // Replace the state with its normalized name.

    if (this.name in states.State.aliases) {

      this.name = states.State.aliases[this.name];

    }

    else {

      break;

    }

  }

};

/**

 * Creates a new State object by sanitizing the passed value.

 */

states.State.sanitize = function (state) {

  if (state instanceof states.State) {

    return state;

  }

  else {

    return new states.State(state);

  }

};

/**

 * This list of aliases is used to normalize states and associates negated names

 * with their respective inverse state.

 */

states.State.aliases = {

  'enabled': '!disabled',

  'invisible': '!visible',

  'invalid': '!valid',

  'untouched': '!touched',

  'optional': '!required',

  'filled': '!empty',

  'unchecked': '!checked',

  'irrelevant': '!relevant',

  'expanded': '!collapsed',

  'readwrite': '!readonly'

};

states.State.prototype = {

  invert: false,

  /**

   * Ensures that just using the state object returns the name.

   */

  toString: function() {

    return this.name;

  }

};

/**

 * Global state change handlers. These are bound to "document" to cover all

 * elements whose state changes. Events sent to elements within the page

 * 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.

 */

$(document).bind('state:disabled', function(e) {

  // Only act when this change was triggered by a dependency and not by the

  // element monitoring itself.

  if (e.trigger) {

    $(e.target)

      .attr('disabled', e.value)

        .closest('.form-item, .form-submit, .form-wrapper').toggleClass('form-disabled', e.value)

        .find('select, input, textarea').attr('disabled', e.value);

    // Note: WebKit nightlies don't reflect that change correctly.

    // See https://bugs.webkit.org/show_bug.cgi?id=23789

  }

});

$(document).bind('state:required', function(e) {

  if (e.trigger) {

    if (e.value) {

      var $label = $(e.target).closest('.form-item, .form-wrapper').find('label');

      // Avoids duplicate required markers on initialization.

      if (!$label.find('.form-required').length) {

        $label.append('<span class="form-required">*</span>');

      }

    }

    else {

      $(e.target).closest('.form-item, .form-wrapper').find('label .form-required').remove();

    }

  }

});

$(document).bind('state:visible', function(e) {

  if (e.trigger) {

      $(e.target).closest('.form-item, .form-submit, .form-wrapper').toggle(e.value);

  }

});

$(document).bind('state:checked', function(e) {

  if (e.trigger) {

    $(e.target).attr('checked', e.value);

  }

});

$(document).bind('state:collapsed', function(e) {

  if (e.trigger) {

    if ($(e.target).is('.collapsed') !== e.value) {

      $('> legend a', e.target).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 ternary (a, b) {

  return typeof a === 'undefined' ? b : (typeof b === 'undefined' ? a : a && b);

}

// Inverts a (if it's not undefined) when invert is true.

function invert (a, invert) {

  return (invert && typeof a !== 'undefined') ? !a : a;

}

// Compares two values while ignoring undefined values.

function compare (a, b) {

  return (a === b) ? (typeof a === 'undefined' ? a : true) : (typeof a === 'undefined' || typeof b === 'undefined');

}

})(jQuery);