corpus_parole: comparison cms/drupal/misc/states.js

Mercurial Mercurial > corpus_parole / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

cms/drupal/misc/states.js

changeset 541

e756a8c72c3d

equal deleted inserted replaced

-:07239de796bb
+:e756a8c72c3d
+(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);

corpus_parole