2454 lines
82 KiB
JavaScript
2454 lines
82 KiB
JavaScript
/**
|
||
* inputfields.js - JS specific to behavior of ProcessWire Inputfield forms.
|
||
*
|
||
* REQUIREMENTS
|
||
* ============
|
||
* - ProcessWire or a module that uses its Inputfield Forms
|
||
* - One or more form.InputfieldForm elements
|
||
* - jQuery is used throughout
|
||
*
|
||
* PUBLIC API (3.0.144+)
|
||
* ==========
|
||
* Note: any 'f' below arguments may be an Inputfield $element, "#id" string, ".class" string or field name.
|
||
* Many of the functions also support extra arguments such as a callback function, see Inputfields variable
|
||
* definition for more details on arguments. For functions that show “…” as the arguments, see the full
|
||
* function definition for details.
|
||
*
|
||
* - Inputfields.open(f): Open the given Inputfield if not already open.
|
||
* - Inputfields.close(f): Close the given Inputfield if not already closed.
|
||
* - Inputfields.toggle(f): Find and toggle the open/closed state of given Inputfield.
|
||
* - Inputfields.find(f): Find and highlight the given Inputfield (at any depth, in any tab).
|
||
* - Inputfields.focus(f): Find the given Inputfield and focus its input element (at any depth, in any tab).
|
||
* - Inputfields.highlight(f): Temporarily highlight the given Inputfield with a background color.
|
||
* - Inputfields.reload(f): Force given Inputfield to reload via ajax (if supported).
|
||
* - Inputfields.redraw(…): Redraw Inputfields after a visibility or width change.
|
||
* - Inputfields.inView(f): Is the Inputfield currently in the user’s viewable area?
|
||
* - Inputfields.hidden(f): Does the given Inputfield currently have a hidden state?
|
||
* - Inputfields.changed(f): Has given Inputfield changed? (or use 2nd argument to set)
|
||
* - Inputfields.columnWidth(f): Get the column width percent of Inputfield (between 1-100)
|
||
* - Inputfields.columnWidth(f, w): Set the column width percent of Inputfield, where w is percent width between 1-100.
|
||
* - Inputfields.name(f): Get the name of the given Inputfield
|
||
* - Inputfields.label(f): Get the text label of the given Inputfield
|
||
* - Inputfields.input(f): Get the input element(s) within the given Inputfield
|
||
* - Inputfields.insertBefore(f, ff): Insert Inputfield 'f' before Inputfield 'ff'.
|
||
* - Inputfields.insertAfter(f, ff): Insert Inputfield 'f' after Inputfield 'ff'.
|
||
* - Inputfields.startSpinner(f): Start spinner for Inputfield.
|
||
* - Inputfields.stopSpinner(f): Stop spinner for Inputfield.
|
||
* - Inputfields.init(target): Manually initialize all .Inputfield elements within target.
|
||
* Calling init() is only necessary for Inputfields not present during page load.
|
||
* - This file also contains lots of other functions, but they are not part of the public API.
|
||
*
|
||
* CLASSES
|
||
* =======
|
||
* Form classes:
|
||
* - InputfieldForm: Class assigned to all Inputfield forms.
|
||
* - InputfieldFormConfirm: Form that will warn the user if they attempt to navigate away before submit.
|
||
* - InputfieldFormSubmitted: Class assigned to form when the submit button has been pressed.
|
||
* - InputfieldFormFocusFirst: Class assigned to form that should focus the first field.
|
||
* - InputfieldFormNoDependencies: Form with dependencies disabled.
|
||
* - InputfieldFormNoWidths: Form with column widths disabled (or handled elsewhere).
|
||
* - InputfieldFormNoHeights: Form where matching of column heights is disabled (or handled elsewhere).
|
||
* - InputfieldFormNoFocus: Form where automatic focus of first field is specificallyl disabled.
|
||
* - nosubmit: Internal class assigned when submit of form is temporarily disabled due to other events.
|
||
*
|
||
* Form field (Inputfield) classes:
|
||
* - Inputfield: Assigned to all Inputfield elements.
|
||
* - Inputfield[Type]: Class where [Type] is replaced by Inputfield type, i.e. "Radios", "Select", etc.
|
||
* - InputfieldWrapper: Assigned to Inputfields that can contain other Inputfield elements.
|
||
* - InputfieldStateHidden: Item that is current in a hidden state (not visible to user).
|
||
* - InputfieldStateRequired: Item that requires a value in at least one of its inputs.
|
||
* - InputfieldStateChanged: Item that has changed.
|
||
* - InputfieldStateShowIf: Item that contains a show-if dependency via a 'data-show-if' attribute.
|
||
* - InputfieldStateRequiredIf: Item that contains a required-if dependency via a 'data-required-if' attribute.
|
||
* - InputfieldStateCollapsed: Item that is collapsed and must be clicked to be opened.
|
||
* - InputfieldStateWasCollapsed: Item that was previously collapsed.
|
||
* - InputfieldStateToggling: Item that is currently between an open and collapsed state.
|
||
* - InputfieldColumnWidth: Item that has some column width smaller than 100%.
|
||
* - InputfieldColumnWidthFirst: Item that has column width < 100% and is the first in a row of columns.
|
||
* - InputfieldColumnWidthFirstTmp: Temporary/runtime class for column width used internally.
|
||
* - InputfieldNoFocus: Item that should not have its input element automatically focused.
|
||
* - InputfieldAjaxLoading: Item that is currently loading from an ajax request.
|
||
* - InputfieldIgnoreChanges: Item that should not be tracked for changes to value.
|
||
* - InputfieldHasUpload: Item that has a file upload input within it.
|
||
* - InputfieldIsOffset: Item that is offset from others (not supported by all admin themes).
|
||
* - InputfieldRepeaterItem: Item that represents a Repeater item.
|
||
* - collapsed9: Item that is not collapsible (always open).
|
||
* - collapsed10: Item that is collapsed and dynamically loaded by AJAX when opened.
|
||
* - collapsed11: Item that is collapsed only when blank, and dynamically loaded by AJAX when opened.
|
||
*
|
||
* Children of Inputfield elements have these classes:
|
||
* - InputfieldHeader: Assigned to the header of an Inputfield, typically the <label> element. Always visible.
|
||
* - InputfieldHeaderHidden: When paired with InputfieldHeader classs, indicate header is hidden.
|
||
* - InputfieldStateToggle: Assigned to element that toggles open/collapsed state (typically InputfieldHeader).
|
||
* - InputfieldContent: Assigned to the content of the Inputfield, wraps any <input> elements. Hidden when collapsed.
|
||
*
|
||
* Other classes:
|
||
* - Inputfields: Class <ul> or other element that contains .Inputfield children.
|
||
* - body.InputfieldColumnWidthsInit: Class assigned to body element when column widths initialized.
|
||
* - i.toggle-icon: Assigned to icon that also works as an .InputfieldStateToggle element.
|
||
* - maxColHeightSpacer: Used internally for aligning the height of a row of columns, when applicable.
|
||
*
|
||
* EVENTS
|
||
* ======
|
||
* Dependency events:
|
||
* - showInputfield: Inputfield is shown as a result of field dependencies, triggered on document element, receives $inputfield as argument.
|
||
* - hideInputfield: Inputfield is hidden as a result of field dependencies, triggered on document element, receives $inputfield as argument.
|
||
*
|
||
* Visibility events:
|
||
* - openReady: Called right before Inputfield is opened, triggered on .Inputfield element.
|
||
* - opened: Called after Inputfield is opened, triggered on .Inputfield element.
|
||
* - closeReady: Called before Inputfield is closed/collapsed, triggered on .Inputfield element.
|
||
* - closed: Called after Inputfield is closed/collapsed, triggered on .Inputfield element.
|
||
* - reload: Can be triggered on an .Inputfield element to force it to reload via ajax (where supported).
|
||
* - reloaded: Triggered on an .Inputfield element after it has reloaded via ajax.
|
||
* - resized: Triggered on an .Inputfield element after something has caused it to resize.
|
||
* - columnWidth: Triggered on .Inputfield when an API call to set column width, receives width percent after event argument.
|
||
*
|
||
* Other events:
|
||
* - changed: Triggered on an .Inputfield that has an input element within it changed (3.0.184+)
|
||
* - AjaxUploadDone: Triggered on an .Inputfield element after a file has been ajax-uploaded within it.
|
||
*
|
||
* ATTRIBUTES
|
||
* ==========
|
||
* Form attributes:
|
||
* - data-colspacing: form elements may have a "data-colspacing" attribute with a 0 or 1 value that indicates space between Inputfield columns.
|
||
* - data-confirm: form.InputfieldFormConfirm elements have this attribute with an alert message to display when appropriate.
|
||
* - data-uploading: form elements may have this to indicate a message shown when an action can abort a file that is uploading.
|
||
*
|
||
* Inputfield attributes:
|
||
* - data-show-if: Contains the selector for a "show if" condition when Inputfield has InputfieldStateShowIf class.
|
||
* - data-required-if: Contains the selector for a "required if" condition when Inputfield has InputfieldStateRequiredIf class.
|
||
* - data-colwidth: Contains the specified column width for the field (percentage) if Inputfield has an InputfieldColumnWidth class.
|
||
* - data-original-width: Used internally to remember the original value of data-colwidth when dependencies change the equation.
|
||
* - id: The Inputfield elements can have an "id" attribute of "wrap_Inputfield_[name]" where [name] is the input name.
|
||
* This is only the case if a different "id" attribute has not been specifically assigned to it.
|
||
*
|
||
*/
|
||
|
||
/**
|
||
* Inputfields public API variable
|
||
*
|
||
* ProcessWire 3.0.144+
|
||
*
|
||
*/
|
||
var Inputfields = {
|
||
|
||
/**
|
||
* Are we currently in debug mode?
|
||
*
|
||
*/
|
||
debug: false,
|
||
|
||
/**
|
||
* Are we currently processing dependencies?
|
||
*
|
||
*/
|
||
processingIfs: false,
|
||
|
||
/**
|
||
* Are we currently toggling collapsed state or visibility?
|
||
*
|
||
*/
|
||
toggling: false,
|
||
|
||
/**
|
||
* Toggle behavior (0=standard, 1=consistent)
|
||
*
|
||
*/
|
||
toggleBehavior: 0,
|
||
|
||
/**
|
||
* Default duration (in MS) for certain visual animations
|
||
*
|
||
*/
|
||
defaultDuration: 0,
|
||
|
||
/**
|
||
* Initialize all Inputfields located within $target
|
||
*
|
||
* @param $target
|
||
*
|
||
*/
|
||
init: function($target) {
|
||
InputfieldsInit($target);
|
||
},
|
||
|
||
/**
|
||
* Toggle the given $inputfield open or closed
|
||
*
|
||
* Also triggers these events on $inputfield: openReady, closeReady, opened, closed
|
||
*
|
||
* @param object|string $inputfield Inputfield to toggle, or some element within it, or field name
|
||
* @param bool open Boolean true to open, false to close, or null (or omit) for opposite of current state (default=opposite of current state)
|
||
* @param int duration How many milliseconds for animation? (default=100)
|
||
* @param function callback Optional function to call upon completion, receives Inputfield object, open and duration as arguments (default=none)
|
||
* @returns Returns Inputfield element
|
||
*
|
||
*/
|
||
toggle: function($inputfield, open, duration, callback) {
|
||
|
||
$inputfield = this.inputfield($inputfield);
|
||
if(!$inputfield.length) return $inputfield;
|
||
|
||
var $header = $inputfield.children('.InputfieldHeader, .ui-widget-header');
|
||
var $content = $inputfield.children('.InputfieldContent, .ui-widget-content');
|
||
var $toggleIcon = $header.find('.toggle-icon');
|
||
var isCollapsed = $inputfield.hasClass('InputfieldStateCollapsed');
|
||
var isAjax = $inputfield.hasClass('collapsed10') || $inputfield.hasClass('collapsed11');
|
||
var Inputfields = this;
|
||
var $siblings = null;
|
||
|
||
if($inputfield.hasClass('InputfieldAjaxLoading')) return $inputfield;
|
||
if($inputfield.hasClass('InputfieldStateToggling')) return $inputfield;
|
||
|
||
if(!isAjax && !this.toggling && $inputfield.hasClass('InputfieldColumnWidth')) {
|
||
var $siblings = Inputfields.getAllInRow($inputfield);
|
||
if($siblings.length < 2) $siblings = null;
|
||
}
|
||
|
||
if(typeof open == "undefined" || open === null) open = isCollapsed;
|
||
if(typeof duration == "undefined") duration = this.defaultDuration;
|
||
|
||
function completed() {
|
||
if(Inputfields.toggling === $inputfield.prop('id')) {
|
||
if($siblings && $siblings.length) {
|
||
//Inputfields.toggle($siblings, open, duration, callback);
|
||
$siblings.each(function() {
|
||
Inputfields.toggle(jQuery(this), open, 0);
|
||
});
|
||
}
|
||
setTimeout(function() { Inputfields.toggling = false; }, 100);
|
||
$siblings = null;
|
||
}
|
||
if(typeof callback != "undefined") callback($inputfield, open, duration);
|
||
}
|
||
|
||
function toggled() {
|
||
// jQuery seems to add overflow:hidden, and this interferes with outline CSS property on Inputfields
|
||
if($inputfield.css('overflow') == 'hidden') $inputfield.css('overflow', '');
|
||
$toggleIcon.toggleClass($toggleIcon.attr('data-to')); // data-to=classes to toggle
|
||
$inputfield.removeClass('InputfieldStateToggling');
|
||
Inputfields.redraw($inputfield, 500);
|
||
// setTimeout('InputfieldColumnWidths()', 500);
|
||
completed();
|
||
}
|
||
|
||
function opened() {
|
||
$inputfield.trigger('opened', $inputfield);
|
||
if($inputfield.hasClass('InputfieldColumnWidth')) {
|
||
$inputfield.children('.InputfieldContent').show();
|
||
}
|
||
if($inputfield.prop('id') === Inputfields.toggling && !$inputfield.hasClass('InputfieldNoFocus')) {
|
||
Inputfields.focus($inputfield);
|
||
}
|
||
toggled();
|
||
}
|
||
|
||
function closed() {
|
||
if($inputfield.css('overflow') == 'hidden') $inputfield.css('overflow', '');
|
||
$inputfield.trigger('closed', $inputfield);
|
||
if($inputfield.hasClass('InputfieldColumnWidth')) {
|
||
$inputfield.children('.InputfieldContent').hide();
|
||
}
|
||
toggled();
|
||
}
|
||
|
||
// check if we need to open parent inputfields first
|
||
if(open && !$inputfield.is(':visible')) {
|
||
// if Inputfield is in a non-visible tab, open the tab
|
||
var $tabContent = $inputfield.parents('.InputfieldWrapper').last();
|
||
if($tabContent.length && !$tabContent.is(':visible')) {
|
||
var $tabButton = jQuery('#_' + $tabContent.attr('id'));
|
||
if($tabButton.length) {
|
||
$tabContent.show();
|
||
setTimeout(function() { $tabButton.trigger('click'); }, 25);
|
||
}
|
||
}
|
||
// inputfield is not visible likely due to parents being hidden
|
||
var $collapsedParent = $inputfield.closest('.InputfieldStateCollapsed:not([id=' + $inputfield.attr('id') + '])');
|
||
if($collapsedParent.length) {
|
||
Inputfields.toggle($collapsedParent, true, duration, function($in) {
|
||
Inputfields.toggle($in, true, duration, callback);
|
||
});
|
||
}
|
||
}
|
||
|
||
// if open requested and inputfield already open, no action is needed
|
||
if(open && !isCollapsed) {
|
||
completed();
|
||
return $inputfield;
|
||
}
|
||
|
||
// if close requested and inputfield already closed, no action is needed
|
||
if(!open && isCollapsed) {
|
||
completed();
|
||
return $inputfield;
|
||
}
|
||
|
||
// if ajax loaded, force InputfieldStates() click handler to open this one
|
||
if(isCollapsed && isAjax && !$inputfield.hasClass('InputfieldStateWasCollapsed')) {
|
||
$toggleIcon.trigger('click');
|
||
return $inputfield;
|
||
}
|
||
|
||
if(!this.toggling) this.toggling = $inputfield.prop('id');
|
||
|
||
// handle either open or close
|
||
if(open && isCollapsed) {
|
||
$inputfield.addClass('InputfieldStateToggling').trigger('openReady', $inputfield);
|
||
if(duration && jQuery.ui) {
|
||
$inputfield.toggleClass('InputfieldStateCollapsed', duration, opened);
|
||
} else {
|
||
$inputfield.removeClass('InputfieldStateCollapsed');
|
||
opened();
|
||
}
|
||
} else if(!open && !isCollapsed) {
|
||
$inputfield.addClass('InputfieldStateToggling').trigger('closeReady', $inputfield);
|
||
if(duration && jQuery.ui) {
|
||
$inputfield.toggleClass('InputfieldStateCollapsed', duration, closed);
|
||
} else {
|
||
$inputfield.addClass('InputfieldStateCollapsed');
|
||
closed();
|
||
}
|
||
}
|
||
|
||
return $inputfield;
|
||
},
|
||
|
||
/**
|
||
* Toggle all given $inputfields open or closed
|
||
*
|
||
* Also triggers these events on each $inputfield: openReady, closeReady, opened, closed
|
||
*
|
||
* @param object $inputfields jQuery object of one or more Inputfields or selector string that matches Inputfields
|
||
* @param bool open Boolean true to open, false to close, or null (or omit) for opposite of current state (default=opposite of current state)
|
||
* @param int duration How many milliseconds for animation? (default=100)
|
||
* @param function callback Optional function to call upon completion, receives Inputfield object, open and duration as arguments (default=none)
|
||
* @returns Returns jQuery object of Inputfields
|
||
* @since 3.0.178
|
||
*
|
||
*/
|
||
toggleAll: function($inputfields, open, duration, callback) {
|
||
if(typeof $inputfields === "string") $inputfields = jQuery($inputfields);
|
||
var Inputfields = this;
|
||
$($inputfields.get().reverse()).each(function(i, el) {
|
||
Inputfields.toggle($(el), open, duration, callback);
|
||
});
|
||
return $inputfields;
|
||
},
|
||
|
||
/**
|
||
* Open a collapsed Inputfield
|
||
*
|
||
* @param $inputfield
|
||
* @param duration Optional number of milliseconds for animation or 0 for none (default=100)
|
||
* @param function callback Optional function to call upon completion, receives Inputfield object as argument (default=none)
|
||
* @return Inputfield
|
||
*
|
||
*/
|
||
open: function($inputfield, duration, callback) {
|
||
return this.toggle($inputfield, true, duration);
|
||
},
|
||
|
||
/**
|
||
* Close/collapse an open Inputfield
|
||
*
|
||
* @param $inputfield
|
||
* @param duration Optional number of milliseconds for animation or 0 for none (default=100)
|
||
* @param function callback Optional function to call upon completion, receives Inputfield object as argument (default=none)
|
||
* @return Inputfield
|
||
*
|
||
*/
|
||
close: function($inputfield, duration, callback) {
|
||
return this.toggle($inputfield, false, duration);
|
||
},
|
||
|
||
/**
|
||
* Show a currently hidden Inputfield
|
||
*
|
||
* @param $inputfield
|
||
* @return Returns the Inputfield element
|
||
*
|
||
*/
|
||
show: function($inputfield) {
|
||
$inputfield = this.inputfield($inputfield);
|
||
if(!this.hidden($inputfield)) return $inputfield; // already visible
|
||
$inputfield.removeClass('InputfieldStateHidden').show();
|
||
jQuery(document).trigger('showInputfield', $inputfield);
|
||
this.redraw(null, 50);
|
||
return $inputfield;
|
||
},
|
||
|
||
/**
|
||
* Hide a currently visible Inputfield
|
||
*
|
||
* @param $inputfield
|
||
* @return Returns the Inputfield element
|
||
*
|
||
*/
|
||
hide: function($inputfield) {
|
||
$inputfield = this.inputfield($inputfield);
|
||
if(this.hidden($inputfield)) return $inputfield;
|
||
$inputfield.addClass('InputfieldStateHidden').hide();
|
||
jQuery(document).trigger('hideInputfield', $inputfield);
|
||
this.redraw(null, 50);
|
||
return $inputfield;
|
||
},
|
||
|
||
/**
|
||
* Redraw Inputfield elements within $target element, adjusting any widths as necessary
|
||
*
|
||
* @param $target Target within this element or omit for all Inputfields in document
|
||
* @param int $delay Optionally delay this many ms (default=0)
|
||
*
|
||
*/
|
||
redraw: function($target, delay) {
|
||
if(typeof delay == "undefined") delay = 0;
|
||
setTimeout(function() {
|
||
if(typeof $target != "undefined" && $target && $target.length) {
|
||
if($target.hasClass('Inputfield')) $target = $target.closest('Inputfields');
|
||
InputfieldColumnWidths($target);
|
||
// jQuery(document).trigger('redrawInputfields', $target);
|
||
} else {
|
||
InputfieldColumnWidths();
|
||
// jQuery(document).trigger('redrawInputfields', null);
|
||
}
|
||
jQuery(window).trigger('resize'); // trigger for FormBuilder or similar
|
||
}, delay);
|
||
},
|
||
|
||
/**
|
||
* Reload an Inputfield with an ajax request (when/where supported)
|
||
*
|
||
* @param $inputfield
|
||
* @param function callback Optional function to call upon completion
|
||
* @return Returns the Inputfield element
|
||
*
|
||
*/
|
||
reload: function($inputfield, callback) {
|
||
$inputfield = this.inputfield($inputfield);
|
||
if($inputfield.length) {
|
||
if(typeof callback != "undefined") $inputfield.one('reloaded', callback);
|
||
$inputfield.trigger('reload');
|
||
}
|
||
return $inputfield;
|
||
},
|
||
|
||
/**
|
||
* Focus the Inputfield
|
||
*
|
||
* If the Inputfield is not visible, this method will track it down and reveal it.
|
||
* If the Inputfield is collapsed, this method will open it.
|
||
* If the Inputfield has an input that can be focused, it will be focused.
|
||
*
|
||
* @param $inputfield
|
||
* @param function callback Optional function to call upon completion
|
||
* @return Returns the Inputfield element
|
||
*
|
||
*/
|
||
focus: function($inputfield, callback) {
|
||
|
||
$inputfield = this.inputfield($inputfield);
|
||
if(!$inputfield.length) return $inputfield;
|
||
var Inputfields = this;
|
||
|
||
if($inputfield.hasClass('InputfieldStateCollapsed') || !$inputfield.is(':visible')) {
|
||
Inputfields.toggle($inputfield, true, 0, function($in, open, duration) {
|
||
Inputfields.focus($in, callback);
|
||
});
|
||
return $inputfield;
|
||
}
|
||
|
||
var $input;
|
||
var focused = false;
|
||
var showOnly = false;
|
||
|
||
if($inputfield.hasClass('InputfieldNoFocus')) {
|
||
// class indicates does not support focusing
|
||
showOnly = true;
|
||
}
|
||
|
||
if(showOnly) {
|
||
$input = jQuery([]);
|
||
} else {
|
||
// find input element within Inputfield
|
||
$input = $inputfield.find(":input:visible:enabled:not(button):not(.InputfieldNoFocus)").first();
|
||
// do not attempt to focus absolute positioned inputs or button elements
|
||
if($input.css('position') == 'absolute' || $input.is('button')) $input = jQuery([]);
|
||
}
|
||
|
||
if($input.length) {
|
||
var t = $input.attr('type');
|
||
if($input.is('textarea') || t == 'text' || t == 'email' || t == 'url' || t == 'number') {
|
||
$input.trigger('focus');
|
||
focused = true;
|
||
}
|
||
}
|
||
|
||
if(focused) {
|
||
if(typeof callback != "undefined") callback($inputfield);
|
||
} else if(!this.inView($inputfield)) {
|
||
// item could not be directly focused, see if we can make make it visible
|
||
Inputfields.find($inputfield, false, callback);
|
||
}
|
||
|
||
return $inputfield;
|
||
},
|
||
|
||
/**
|
||
* Find the Inputfield and put it in view and open it (if not already)
|
||
*
|
||
* If the Inputfield is not visible, this method will track it down and reveal it.
|
||
* If the Inputfield is collapsed, this method will open it.
|
||
*
|
||
* @param $inputfield
|
||
* @param bool highlight Highlight temporily once found? (default=true)
|
||
* @param function callback Optional function to call upon completion
|
||
* @param int level Recursion level (do not specify, for internal use only)
|
||
* @return Returns the Inputfield element
|
||
*
|
||
*/
|
||
find: function($inputfield, highlight, callback, level) {
|
||
|
||
$inputfield = this.inputfield($inputfield);
|
||
if(!$inputfield.length) return $inputfield;
|
||
if(typeof highlight == "undefined") highlight = true;
|
||
if(typeof level == "undefined") level = 0;
|
||
|
||
// locate the Inputfield
|
||
if($inputfield.hasClass('InputfieldStateCollapsed') || !$inputfield.is(':visible')) {
|
||
var hasNoFocus = $inputfield.hasClass('InputfieldNoFocus');
|
||
// Inputfields.toggle() can call Inputfields.focus(), so prevent the focus by adding this class
|
||
if(!hasNoFocus) $inputfield.addClass('InputfieldNoFocus');
|
||
if($inputfield.hasClass('WireTab') && !$inputfield.is(':visible')) $inputfield = $inputfield.find('.Inputfield');
|
||
this.toggle($inputfield, true, 0, function($in, open, duration) {
|
||
if(level > 9) return;
|
||
var timeout = level > 0 ? 10 * level : 0;
|
||
setTimeout(function() { Inputfields.find($inputfield, highlight, callback, level + 1); }, timeout);
|
||
});
|
||
// remove the class we added
|
||
if(!hasNoFocus) $inputfield.removeClass('InputfieldNoFocus');
|
||
return $inputfield;
|
||
}
|
||
|
||
var completed = function() {
|
||
if(highlight) Inputfields.highlight($inputfield);
|
||
if(typeof callback != "undefined") callback($inputfield);
|
||
}
|
||
|
||
setTimeout(function() {
|
||
if(false && Inputfields.inView($inputfield)) {
|
||
completed();
|
||
} else {
|
||
var properties = {
|
||
scrollTop: $inputfield.offset().top - 10
|
||
};
|
||
var options = {
|
||
duration: 100,
|
||
complete: completed
|
||
};
|
||
// scroll to Inputfield
|
||
jQuery('html, body').animate(properties, options);
|
||
}
|
||
}, 100);
|
||
|
||
return $inputfield;
|
||
},
|
||
|
||
/**
|
||
* Highlight an Inputfield
|
||
*
|
||
* @param $inputfield
|
||
* @param duration Optionally specify how long to highlight for in ms? (default=1000, 0=forever)
|
||
* @param cls Optional class to use as highlight class
|
||
* @return Inputfield
|
||
*
|
||
*/
|
||
highlight: function($inputfield, duration, cls) {
|
||
$inputfield = this.inputfield($inputfield);
|
||
if(typeof cls == "undefined") {
|
||
cls = $inputfield.hasClass('InputfieldIsHighlight') ? 'InputfieldIsPrimary' : 'InputfieldIsHighlight';
|
||
}
|
||
if(typeof duration == "undefined") {
|
||
duration = 1000;
|
||
}
|
||
$inputfield.addClass(cls);
|
||
if(duration > 0) {
|
||
setTimeout(function() {
|
||
$inputfield.removeClass(cls);
|
||
}, duration);
|
||
}
|
||
return $inputfield;
|
||
},
|
||
|
||
/**
|
||
* Is the Inputfield currently viewable in the user’s viewable area?
|
||
*
|
||
* @param $inputfield
|
||
* @return bool
|
||
*
|
||
*/
|
||
inView: function($inputfield) {
|
||
$inputfield = this.inputfield($inputfield);
|
||
if(!$inputfield.is(':visible')) return false;
|
||
var pageTop = jQuery(window).scrollTop();
|
||
var pageBottom = pageTop + jQuery(window).height();
|
||
var inputTop = $inputfield.offset().top;
|
||
var inputBottom = inputTop + $inputfield.height();
|
||
var inView = ((inputTop <= pageBottom) && (inputBottom >= pageTop));
|
||
// var fullyInView = ((pageTop < inputTop) && (pageBottom > inputBottom));
|
||
return inView;
|
||
},
|
||
|
||
/**
|
||
* Get or set column width (perentage) of Inputfield
|
||
*
|
||
* Triggers a 'columnWidth' event on Inputfield element, function receives the width to set as an argument.
|
||
*
|
||
* @param $inputfield
|
||
* @param int value Optionally specify a width to set between 10 and 100 (percent)
|
||
* @returns {number}|{object} Returns Inputfield when setting width or current width (percent) when getting
|
||
*
|
||
*/
|
||
columnWidth: function($inputfield, value) {
|
||
|
||
$inputfield = this.inputfield($inputfield);
|
||
if(!$inputfield.length) return 0;
|
||
|
||
if(typeof value != "undefined" && value) {
|
||
// set width
|
||
if(value > 100 || value < 1) value = 100;
|
||
if(value < 100 && !$inputfield.hasClass('InputfieldColumnWidth')) {
|
||
$inputfield.addClass('InputfieldColumnWidth');
|
||
}
|
||
var w = this.columnWidth($inputfield);
|
||
if(w != value) {
|
||
if(!$inputfield.attr('data-original-width')) {
|
||
// remember original width, if there was one
|
||
$inputfield.attr('data-original-width', w);
|
||
}
|
||
$inputfield.attr('data-colwidth', value);
|
||
// delegate actual setting of width to event handler
|
||
$inputfield.trigger('columnWidth', value);
|
||
}
|
||
return $inputfield;
|
||
|
||
} else {
|
||
// get width
|
||
if(!$inputfield.hasClass('InputfieldColumnWidth')) return 100;
|
||
var pct = $inputfield.attr('data-colwidth'); // colwidth tracked when NoWidths mode enabled
|
||
if(typeof pct == "undefined" || !pct.length) {
|
||
var style = $inputfield.attr('style');
|
||
if(typeof style == "undefined" || !style) return 100;
|
||
pct = parseInt(style.match(/width:\s*(\d+)/i)[1]);
|
||
} else {
|
||
pct = parseInt(pct);
|
||
}
|
||
// store the original width in another attribute, in case it is needed later
|
||
if(!$inputfield.attr('data-original-width')) {
|
||
$inputfield.attr('data-original-width', pct);
|
||
}
|
||
if(pct < 1) pct = 100;
|
||
return pct;
|
||
}
|
||
},
|
||
|
||
/**
|
||
* Start a spinner for Inputfield
|
||
*
|
||
* @param $inputfield
|
||
*
|
||
*/
|
||
startSpinner: function($inputfield) {
|
||
|
||
$inputfield = this.inputfield($inputfield);
|
||
if(!$inputfield.length) return;
|
||
|
||
var id = $inputfield.attr('id') + '-spinner';
|
||
var $spinner = $('#' + id);
|
||
var $header = $inputfield.children('.InputfieldHeader');
|
||
|
||
if(!$spinner.length) {
|
||
$spinner = $("<i class='InputfieldSpinner fa fa-spin fa-spinner'></i>");
|
||
$spinner.attr('id', id);
|
||
}
|
||
|
||
$spinner.css({
|
||
float: 'right',
|
||
marginRight: '30px',
|
||
marginTop: '3px'
|
||
});
|
||
|
||
$header.append($spinner.hide());
|
||
$spinner.fadeIn();
|
||
},
|
||
|
||
/**
|
||
* Stop a spinner for Inputfield
|
||
*
|
||
* @param $inputfield
|
||
*
|
||
*/
|
||
stopSpinner: function($inputfield) {
|
||
$inputfield = this.inputfield($inputfield);
|
||
if(!$inputfield.length) return;
|
||
var $spinner = $('#' + $inputfield.attr('id') + '-spinner');
|
||
if($spinner.length) $spinner.fadeOut('fast', function() { $spinner.remove(); });
|
||
},
|
||
|
||
/**
|
||
* Does the given Inputfield have a hidden state?
|
||
*
|
||
* Note: if you want to hide an Inputfield, use the hide() method
|
||
*
|
||
* @param $inputfield
|
||
* @return bool
|
||
*
|
||
*/
|
||
hidden: function($inputfield) {
|
||
$inputfield = this.inputfield($inputfield);
|
||
return $inputfield.hasClass('InputfieldStateHidden');
|
||
},
|
||
|
||
/**
|
||
* Get or set the changed state of the Inputfield
|
||
*
|
||
* @param $inputfield
|
||
* @param bool value Specify true to indicate as changed, false if not. Or omit to only get current changed state.
|
||
* @return bool
|
||
*
|
||
*/
|
||
changed: function($inputfield, value) {
|
||
$inputfield = this.inputfield($inputfield);
|
||
if($inputfield.hasClass('InputfieldIgnoreChanges')) return false;
|
||
var changed = $inputfield.hasClass('InputfieldStateChanged');
|
||
if(typeof value == "undefined") return changed;
|
||
if(value && !changed) {
|
||
$inputfield.addClass('InputfieldStateChanged').trigger('change');
|
||
return true;
|
||
} else if(changed) {
|
||
$inputfield.removeClass('InputfieldStateChanged');
|
||
return false;
|
||
}
|
||
},
|
||
|
||
/**
|
||
* Get name attribute for given inputfield
|
||
*
|
||
* @param $inputfield
|
||
* @returns string
|
||
*
|
||
*/
|
||
name: function($inputfield) {
|
||
$inputfield = this.inputfield($inputfield);
|
||
if(!$inputfield.length) return '';
|
||
var name = $inputfield.attr('data-name');
|
||
if(typeof name != "undefined" && name && name.length) return name;
|
||
name = '';
|
||
var id = $inputfield.prop('id');
|
||
if(id.indexOf('wrap_Inputfield_') === 0) {
|
||
name = id.replace('wrap_Inputfield_', '');
|
||
} else if(id.indexOf('wrap_') === 0) {
|
||
name = id.substring(5);
|
||
} else {
|
||
var classes = $inputfield.attr('class').split(' ');
|
||
for(var n = 0; n < classes.length; n++) {
|
||
if(classes[n].indexOf('Inputfield_') !== 0) continue;
|
||
name = classes[n].substring(11);
|
||
break;
|
||
}
|
||
}
|
||
if(name.length) $inputfield.attr('data-name', name);
|
||
return name;
|
||
},
|
||
|
||
/**
|
||
* Get header label for given Inputfield
|
||
*
|
||
* @param $inputfield
|
||
* @return string
|
||
*
|
||
*/
|
||
label: function($inputfield) {
|
||
$inputfield = this.inputfield($inputfield);
|
||
if(!$inputfield.length) return '';
|
||
var label = $inputfield.attr('data-label');
|
||
if(typeof label != "undefined" && label && label.length) return label;
|
||
var $header = $inputfield.children('.InputfieldHeader');
|
||
if(!$header.length) return '';
|
||
label = $header.text();
|
||
if(label.length) label = label.toString().trim();
|
||
return label;
|
||
},
|
||
|
||
/**
|
||
* Get the input element(s) for the current Inputfield
|
||
*
|
||
* @param $inputfield
|
||
*
|
||
*/
|
||
input: function($inputfield) {
|
||
|
||
var $input = jQuery([]);
|
||
$inputfield = this.inputfield($inputfield);
|
||
if(!$inputfield.length) return $input;
|
||
|
||
var $header = $inputfield.children('.InputfieldHeader');
|
||
var attrFor = $header.attr('for');
|
||
|
||
if(attrFor) {
|
||
$input = $inputfield.find(':input[id="' + attrFor + '"]');
|
||
if($input.length) return $input;
|
||
}
|
||
|
||
var name = this.name($inputfield);
|
||
if(name.length) $input = $inputfield.find(':input[name="' + name + '"]');
|
||
|
||
return $input;
|
||
},
|
||
|
||
/**
|
||
* Move an Inputfield by inserting it before another
|
||
*
|
||
* @param $insertInputfield Inputfield to move
|
||
* @param $beforeInputfield Move before this Inputfield
|
||
* @returns Inputfield
|
||
*
|
||
*/
|
||
insertBefore: function($insertInputfield, $beforeInputfield) {
|
||
$insertInputfield = this.inputfield($insertInputfield);
|
||
$beforeInputfield = this.inputfield($beforeInputfield);
|
||
$beforeInputfield.before($insertInputfield);
|
||
return $insertInputfield;
|
||
},
|
||
|
||
/**
|
||
* Move an Inputfield by inserting it after another
|
||
*
|
||
* @param $insertInputfield Inputfield to move
|
||
* @param $afterInputfield Move after this Inputfield
|
||
* @returns Inputfield
|
||
*
|
||
*/
|
||
insertAfter: function($insertInputfield, $afterInputfield) {
|
||
$insertInputfield = this.inputfield($insertInputfield);
|
||
$afterInputfield = this.inputfield($afterInputfield);
|
||
$afterInputfield.after($insertInputfield);
|
||
return $insertInputfield;
|
||
},
|
||
|
||
/**
|
||
* Ensure given argument resolves to an .Inputfield element and return it
|
||
*
|
||
* @param $inputfield
|
||
* @returns object
|
||
*
|
||
*/
|
||
inputfield: function($inputfield) {
|
||
if(typeof $inputfield == "string") {
|
||
if($inputfield.indexOf('#') !== 0 && $inputfield.indexOf('.') !== 0) {
|
||
var $in = jQuery(':input[name=' + $inputfield + ']');
|
||
if(!$in.length) $in = jQuery(':input[id=' + $inputfield + ']');
|
||
if(!$in.length) $in = jQuery(':input[name="' + $inputfield + '[]"]'); // array name
|
||
if(!$in.length) $in = jQuery('#' + $inputfield + '.Inputfield');
|
||
$inputfield = $in;
|
||
} else {
|
||
$inputfield = jQuery($inputfield)
|
||
}
|
||
}
|
||
if(!$inputfield.length) return jQuery([]); // empty jQuery object (length=0)
|
||
if(!$inputfield.hasClass('Inputfield')) {
|
||
$inputfield = $inputfield.closest('.Inputfield');
|
||
}
|
||
return $inputfield;
|
||
},
|
||
|
||
/**
|
||
* Execute find, focus or highlight action from URL fragment/hash
|
||
*
|
||
* #find-field_name
|
||
* #focus-field_name
|
||
* #highlight-field_name
|
||
*
|
||
* @param hash
|
||
* @since 3.0.151
|
||
*
|
||
*/
|
||
hashAction: function(hash) {
|
||
|
||
var pos, action, name;
|
||
|
||
if(hash.indexOf('#') === 0) hash = hash.substring(1);
|
||
pos = hash.indexOf('-');
|
||
if(pos < 3 || hash.length < pos + 2) return;
|
||
if(jQuery('#' + hash).length) return; // maps to existing element ID attribute
|
||
|
||
action = hash.substring(0, pos);
|
||
name = hash.substring(pos + 1);
|
||
|
||
if(action === 'find') {
|
||
Inputfields.find(name);
|
||
} else if(action === 'focus') {
|
||
Inputfields.focus(name);
|
||
} else if(action === 'highlight') {
|
||
Inputfields.highlight(name);
|
||
} else {
|
||
// some other action we do not recognize
|
||
}
|
||
},
|
||
|
||
/**
|
||
* Get first Inputfield in row that $inputfield appears in
|
||
*
|
||
* @param $inputfield
|
||
* @returns object
|
||
* @since 3.0.170
|
||
*
|
||
*/
|
||
getFirstInRow: function($inputfield) {
|
||
$inputfield = this.inputfield($inputfield);
|
||
if(!$inputfield.length) return $inputfield;
|
||
if(!$inputfield.hasClass('InputfieldColumnWidth')) return $inputfield;
|
||
if($inputfield.hasClass('InputfieldColumnWidthFirst')) return $inputfield;
|
||
var $col = $inputfield;
|
||
do {
|
||
$col = $col.prev('.Inputfield');
|
||
if($col.hasClass('InputfieldColumnWidthFirst')) break; // found it
|
||
} while($col.length && $col.hasClass('InputfieldColumnWidth'));
|
||
return $col.hasClass('InputfieldColumnWidthFirst') ? $col : $inputfield;
|
||
},
|
||
|
||
/**
|
||
* Get all siblings of $inputfield in an InputfieldColumnWidth width row
|
||
*
|
||
* @param $inputfield
|
||
* @param bool andSelf Specify true to also include $inputfield, or omit argument to exclude $inputfield (default=false)
|
||
* @param bool andHidden Include hidden inputfields also? (default=false)
|
||
* @returns object
|
||
* @since 3.0.170
|
||
*
|
||
*/
|
||
getSiblingsInRow: function($inputfield, andSelf, andHidden) {
|
||
$inputfield = this.inputfield($inputfield);
|
||
if(!$inputfield.length) return $inputfield;
|
||
if(typeof andSelf === "undefined") andSelf = false;
|
||
if(typeof andHidden === "undefined") andHidden = false;
|
||
var pct = this.columnWidth($inputfield);
|
||
if(pct < 1 || pct > 99) return jQuery([]);
|
||
var $col = this.getFirstInRow($inputfield);
|
||
var sel = '';
|
||
while($col.length) {
|
||
if($col.hasClass('InputfieldStateHidden') && !andHidden) {
|
||
// skip hidden inputfield
|
||
} else if(andSelf || $col.prop('id') !== $inputfield.prop('id')) {
|
||
// add inputfield
|
||
sel += (sel.length ? ',' : '') + '#' + $col.prop('id');
|
||
}
|
||
$col = $col.next('.InputfieldColumnWidth');
|
||
if($col.hasClass('InputfieldColumnWidthFirst')) break;
|
||
}
|
||
return sel.length ? jQuery(sel) : $inputfield;
|
||
},
|
||
|
||
/**
|
||
* Get all Inputfields in row occupied by given $inputfield
|
||
*
|
||
* @param $inputfield
|
||
* @returns object
|
||
* @since 3.0.170
|
||
*
|
||
*/
|
||
getAllInRow: function($inputfield, andHidden) {
|
||
if(typeof andHidden === "undefined") andHidden = false;
|
||
return this.getSiblingsInRow($inputfield, true, andHidden);
|
||
}
|
||
|
||
};
|
||
|
||
/*******************************************************************************************/
|
||
|
||
/**
|
||
* Console logging for For debug mode
|
||
*
|
||
* @param note
|
||
*
|
||
*/
|
||
function consoleLog(note) {
|
||
// uncomment the line below to enable debugging console
|
||
if(Inputfields.debug) console.log(note);
|
||
}
|
||
|
||
/******************************************************************************************
|
||
* Setup Inputfield dependencies, to be called once at document.ready
|
||
*
|
||
* @constructor
|
||
*
|
||
*/
|
||
function InputfieldDependencies($target) {
|
||
var $ = jQuery;
|
||
// var allConditions = {};
|
||
|
||
if(Inputfields.processingIfs) return;
|
||
|
||
if(typeof $target == "undefined") {
|
||
$target = $(".InputfieldForm:not(.InputfieldFormNoDependencies)");
|
||
} else if($target.hasClass('InputfieldForm')) {
|
||
if($target.hasClass('InputfieldFormNoDependencies')) return;
|
||
} else {
|
||
if($target.closest('.InputfieldFormNoDependencies').length > 0) return;
|
||
}
|
||
|
||
/**
|
||
* Trim quotes and spaces from the given value
|
||
*
|
||
* @param value
|
||
* @returns string
|
||
*
|
||
*/
|
||
function trimValue(value) {
|
||
value = value.toString().trim();
|
||
var first = value.substring(0,1);
|
||
var last = value.substring(value.length-1, value.length);
|
||
if((first == '"' || first == "'") && first == last) value = value.substring(1, value.length-1);
|
||
return value;
|
||
}
|
||
|
||
/**
|
||
* Remove quotes from value (if present)
|
||
*
|
||
* @param value
|
||
* @return string
|
||
*
|
||
*/
|
||
function trimParseValue(value) {
|
||
// determine if we need to trim off quotes
|
||
return parseValue(trimValue(value));
|
||
}
|
||
|
||
function extractFieldAndSubfield(field) {
|
||
// extract subfield, if there is one
|
||
var subfield = '';
|
||
var dot = field.indexOf('.');
|
||
if(dot > 0) {
|
||
subfield = field.substring(dot+1);
|
||
field = field.substring(0, dot);
|
||
}
|
||
return { field: field, subfield: subfield }
|
||
}
|
||
|
||
/**
|
||
* Convert string value to integer or float when appropriate
|
||
*
|
||
* @param str string
|
||
* @param str2 string Optional second value for context
|
||
* @return string|int|float
|
||
*
|
||
*/
|
||
function parseValue(str, str2) {
|
||
|
||
if(typeof str === 'undefined') return '';
|
||
str = str.toString().trim();
|
||
|
||
if(str.length > 0) {
|
||
if(/^-?\d[\d.]*$/.test(str)) {
|
||
// isNumeric
|
||
} else {
|
||
return str;
|
||
}
|
||
}
|
||
|
||
if(str.length == 0) {
|
||
// empty value: should it be a blank or a 0?
|
||
var t = typeof str2;
|
||
if(t != "undefined") {
|
||
// str2 is present for context
|
||
if(t == "integer") return 0;
|
||
if(t == "float") return 0.0;
|
||
return str;
|
||
} else {
|
||
// no context, assume blank
|
||
return str;
|
||
}
|
||
}
|
||
|
||
var dot1 = str.indexOf('.');
|
||
var dot2 = str.lastIndexOf('.');
|
||
|
||
if(dot1 == -1 && /^-?\d+$/.test(str)) {
|
||
// no dot present, and all numbers so must be integer
|
||
return parseInt(str);
|
||
}
|
||
|
||
if(dot2 > -1 && dot1 != dot2) {
|
||
// more than one dot, can't be a float
|
||
return str;
|
||
}
|
||
|
||
if(/^-?[\d.]+$/.test(str)) {
|
||
// looks to be a float
|
||
return parseFloat(str);
|
||
}
|
||
|
||
return str;
|
||
}
|
||
|
||
/**
|
||
* Returns whether or not value matched
|
||
*
|
||
* @param field Name of field
|
||
* @param operator
|
||
* @param value value to match for
|
||
* @param conditionValue
|
||
* @return int 0=value didn't match, 1=value matched
|
||
*
|
||
*/
|
||
function matchValue(field, operator, value, conditionValue) {
|
||
var matched = 0;
|
||
|
||
switch(operator) {
|
||
case '=': if(value === conditionValue) matched++; break;
|
||
case '!=': if(value !== conditionValue) matched++; break;
|
||
case '>': if(value > conditionValue) matched++; break;
|
||
case '<': if(value < conditionValue) matched++; break;
|
||
case '>=': if(value >= conditionValue) matched++; break;
|
||
case '<=': if(value <= conditionValue) matched++; break;
|
||
case '*=':
|
||
case '%=': if(value.indexOf(conditionValue) > -1) matched++; break;
|
||
}
|
||
|
||
consoleLog('Field ' + field + ' - Current value: ' + value);
|
||
consoleLog('Field ' + field + ' - Matched? ' + (matched > 0 ? 'YES' : 'NO'));
|
||
|
||
return matched;
|
||
}
|
||
|
||
/**
|
||
* Find and return a checkbox or radios field named by conditionField
|
||
*
|
||
* Returns null if it was unable to locate the field
|
||
*
|
||
* @param condition
|
||
* @param conditionField
|
||
* @returns {*} Includes field, value and condition properties, or returns null on fail
|
||
*
|
||
*/
|
||
function getCheckboxFieldAndValue(condition, conditionField, conditionSubfield) {
|
||
// if field isn't present by #id it may be present by #id+value as a checkbox/radio field is
|
||
|
||
var $field = null;
|
||
var value;
|
||
|
||
consoleLog('getCheckboxFieldAndValue(see-next-line, ' + conditionField + ', ' + conditionSubfield + ')');
|
||
consoleLog(condition)
|
||
|
||
// first check if we've got a count subfield, because we'll be counting checked inputs for
|
||
// those rather than checking the actual values
|
||
|
||
if(conditionSubfield == 'count' || conditionSubfield == 'count-checkbox') {
|
||
// count number of matching checked inputs
|
||
consoleLog('Using count checkbox condition');
|
||
$field = $("#wrap_Inputfield_" + conditionField + " :input");
|
||
if($field.length) {
|
||
value = $("#wrap_Inputfield_" + conditionField + " :checked").length;
|
||
condition.subfield = 'count-checkbox';
|
||
return { field: $field, value: value, condition: condition };
|
||
}
|
||
return null;
|
||
}
|
||
|
||
// we'll be looking for a specific value in the checkboxes/radios
|
||
consoleLog('Using checkbox value or label comparison option');
|
||
value = [];
|
||
|
||
// for loop in case there is a multi-value OR condition
|
||
for(var i = 0; i < condition.values.length; i++) {
|
||
|
||
var _conditionValue = new String(condition.values[i]); // original
|
||
var conditionValue = trimValue(_conditionValue.replace(/\s/g, '_')); // spaces converted to "_"
|
||
var fieldID = "#Inputfield_" + conditionField + "_" + conditionValue; // i.e. "Inputfield_mycheckbox_1"
|
||
|
||
$field = $(fieldID);
|
||
if(!$field.length) {
|
||
fieldID = '#' + conditionField + "_" + conditionValue; // i.e. "mycheckbox_1" (alternate)
|
||
$field = $(fieldID);
|
||
}
|
||
|
||
consoleLog('Required condition value: ' + conditionValue);
|
||
|
||
if($field.length) {
|
||
// found a matching checkbox/radio field
|
||
var inputType = $field.attr('type');
|
||
var val = '';
|
||
consoleLog("Found " + inputType + " via value " + fieldID);
|
||
if($field.is(":checked")) {
|
||
// checkbox or radio IS checked
|
||
val = $field.val();
|
||
consoleLog(inputType + " IS checked: " + fieldID);
|
||
} else if($field.attr('type') == 'radio') {
|
||
// radio: one we are looking for is NOT checked, but determine which one is checked
|
||
consoleLog(inputType + " is NOT checked: " + fieldID);
|
||
var $checkedField = $field.closest('form').find("input[name=\"" + $field.attr('name') + "\"]:checked");
|
||
if($checkedField.length) {
|
||
val = $checkedField.val();
|
||
consoleLog("Checked value is: " + val);
|
||
}
|
||
} else {
|
||
// checkbox: if the field is not checked then we assume a blank value
|
||
consoleLog(inputType + " is NOT checked: " + fieldID);
|
||
}
|
||
if(val.length) {
|
||
consoleLog('Pushing checked value: ' + val);
|
||
value.push(val);
|
||
}
|
||
continue;
|
||
}
|
||
|
||
if(conditionValue.length == 0 || conditionValue.match(/^[0-9]+$/)) {
|
||
// condition value is numeric (like page ID) and didn't match above, so we're going to give up on it
|
||
consoleLog('Unable to locate checkbox ' + fieldID + ', skipping')
|
||
continue;
|
||
}
|
||
|
||
// if the above didn't find a checkbox, try to find it by label value
|
||
consoleLog('Attempting to find checkbox by label: ' + conditionValue);
|
||
// note $field now becomes a wrapper rather than an input. We're ok with that.
|
||
$field = $("#wrap_Inputfield_" + conditionField);
|
||
var $checkboxes = $field.find("input:checked");
|
||
for(var cn = 0; cn < $checkboxes.length; cn++) {
|
||
var $checkbox = $checkboxes.eq(cn);
|
||
var $label = $checkbox.closest('label');
|
||
if($label.length) {
|
||
var label = $label.text().trim();
|
||
if(label == _conditionValue) {
|
||
consoleLog('Matching checked label found: ' + _conditionValue);
|
||
value.push(label);
|
||
} else {
|
||
consoleLog('Matching checked label not found: ' + _conditionValue);
|
||
}
|
||
}
|
||
}
|
||
} // foreach condition.values
|
||
|
||
if($field) return {
|
||
field: $field,
|
||
value: value,
|
||
condition: condition
|
||
}
|
||
|
||
return null;
|
||
}
|
||
|
||
/**
|
||
* Called when targeted Inputfield has changed
|
||
*
|
||
* @param conditions
|
||
* @param $fieldToShow
|
||
*
|
||
*/
|
||
function inputfieldChange(conditions, $fieldToShow) {
|
||
|
||
Inputfields.processingIfs = true;
|
||
|
||
// Name of the field contained by $fieldToShow
|
||
var fieldNameToShow = $fieldToShow.attr('id').replace(/wrap_Inputfield_/, '');
|
||
|
||
if(Inputfields.debug) {
|
||
consoleLog('-------------------------------------------------------------------');
|
||
consoleLog('Field "' + fieldNameToShow + '" detected a change to a dependency field! Beginning dependency checks...');
|
||
}
|
||
|
||
// number of changes that were actually made to field visibility
|
||
var numVisibilityChanges = 0;
|
||
var show = true;
|
||
var requiredMatches = 0;
|
||
var notRequiredMatches = 0;
|
||
|
||
for(var c = 0; c < conditions.length; c++) {
|
||
|
||
// current condition we are checking in this iteration
|
||
var condition = conditions[c];
|
||
|
||
if(Inputfields.debug) {
|
||
consoleLog('----');
|
||
consoleLog('Start Dependency ' + c);
|
||
consoleLog('Condition type: ' + condition.type);
|
||
consoleLog('Field: ' + condition.field);
|
||
if (condition.subfield.length > 0) consoleLog('Subfield: ' + condition.subfield);
|
||
consoleLog('Operator: ' + condition.operator);
|
||
consoleLog('Required value: ' + condition.value);
|
||
}
|
||
|
||
// matched contains positive value when condition matches
|
||
var matched = 0;
|
||
|
||
// iterate through all OR fields (this will most often just be 1 field)
|
||
for(var fn = 0; fn < condition.fields.length; fn++) {
|
||
|
||
var fieldAndSubfield = extractFieldAndSubfield(condition.fields[fn]);
|
||
var conditionField = fieldAndSubfield.field;
|
||
var conditionSubfield = fieldAndSubfield.subfield;
|
||
var value = null;
|
||
var $field = $("#Inputfield_" + conditionField);
|
||
var hasCheckboxes = false;
|
||
|
||
// in case they manually specified id property
|
||
if($field.length == 0) $field = $("#" + conditionField);
|
||
|
||
if($field.length == 0) {
|
||
// field still not found, perhaps this is a checkbox/radio field which have id properties
|
||
// that contain the values in them as well
|
||
|
||
consoleLog('Detected possible checkbox or radio: ' + condition.field + condition.operator + condition.value);
|
||
var fieldAndValue = getCheckboxFieldAndValue(condition, conditionField, conditionSubfield);
|
||
if(fieldAndValue) {
|
||
$field = fieldAndValue.field;
|
||
value = fieldAndValue.value;
|
||
condition = fieldAndValue.condition;
|
||
hasCheckboxes = true;
|
||
}
|
||
|
||
} // identification of checkbox/radio fields
|
||
|
||
// if we haven't matched a field by now, skip over it
|
||
if($field.length == 0) {
|
||
consoleLog("Unable to locate field: " + conditionField);
|
||
continue;
|
||
}
|
||
|
||
var $inputfield = $field.closest('.Inputfield');
|
||
|
||
// value of the dependency field we are checking (if not already populated above)
|
||
if (value === null) {
|
||
if($field.attr('type') == 'checkbox') {
|
||
value = $field.is(":checked") ? $field.val() : null;
|
||
} else {
|
||
value = $field.val();
|
||
}
|
||
}
|
||
|
||
// value will be placed in values so we can handle multiple value checks
|
||
var values = [];
|
||
|
||
// prefer blank to null for our checks
|
||
if (value == null) value = '';
|
||
|
||
// special case for 'count' subfield condition,
|
||
// where we take the value's length rather than the value
|
||
if (condition.subfield == 'count') value = value.length;
|
||
|
||
// if value is an object, make it in array
|
||
// in either case, convert value to an array called values
|
||
if (typeof value == 'object') {
|
||
// object, convert to array
|
||
values = jQuery.makeArray(value);
|
||
} else if(typeof value == 'array') {
|
||
// array, already
|
||
values = value;
|
||
} else if(typeof value == "string" && $inputfield.hasClass('InputfieldPage') && value.indexOf(',') > -1 && value.match(/^[,0-9]+$/)) {
|
||
// CSV string of page IDs
|
||
values = value.split(',');
|
||
} else {
|
||
// string: single value array
|
||
values[0] = value;
|
||
}
|
||
|
||
// determine how many matches will be required
|
||
var numMatchesRequired = 1;
|
||
if (condition.operator == '!=') numMatchesRequired = (values.length * condition.values.length);
|
||
// consoleLog([values, condition.values, numMatchesRequired]);
|
||
|
||
// also allow for matching a "0" as an unchecked value, but only if there's isn't already an input with that value
|
||
if(($field.attr('type') == 'checkbox' || $field.attr('type') == 'radio') && !$field.is(":checked")) {
|
||
if($("#Inputfield_" + conditionField + "_0").length == 0 && $('#' + conditionField + '_0').length == 0) {
|
||
values[1] = '0';
|
||
}
|
||
}
|
||
|
||
// cycle through the values (most of the time, just 1 value).
|
||
// increment variable 'show' each time a condition matches
|
||
for (var n = 0; n < values.length; n++) {
|
||
for (var i = 0; i < condition.values.length; i++) {
|
||
var v = parseValue(values[n], condition.values[i]);
|
||
matched += matchValue(conditionField, condition.operator, v, condition.values[i]);
|
||
}
|
||
}
|
||
|
||
// if requirements met exit the loop
|
||
if(matched >= numMatchesRequired) break;
|
||
|
||
} // foreach fields
|
||
|
||
consoleLog('----');
|
||
|
||
// determine whether to show or hide the field
|
||
if(condition.type == 'show') {
|
||
if(matched >= numMatchesRequired) {
|
||
// show it, which is the default behavior
|
||
} else {
|
||
show = false;
|
||
}
|
||
|
||
} else if(condition.type == 'required') {
|
||
if(matched >= numMatchesRequired) {
|
||
// make it required
|
||
requiredMatches++;
|
||
} else {
|
||
notRequiredMatches++;
|
||
}
|
||
}
|
||
|
||
} // foreach(conditions)
|
||
|
||
// consoleLog('Summary (required/matched): ' + conditions.length + ' / ' + show);
|
||
|
||
var required = requiredMatches > 0 && notRequiredMatches == 0;
|
||
|
||
if(show) {
|
||
consoleLog('Determined that field "' + fieldNameToShow + '" should be visible.');
|
||
if(Inputfields.hidden($fieldToShow)) {
|
||
Inputfields.show($fieldToShow);
|
||
numVisibilityChanges++;
|
||
consoleLog('Field is now visible.');
|
||
} else {
|
||
consoleLog('Field is already visible.');
|
||
}
|
||
} else {
|
||
consoleLog('Determined that field "' + fieldNameToShow + '" should be hidden.');
|
||
// hide it
|
||
if(Inputfields.hidden($fieldToShow)) {
|
||
consoleLog('Field is already hidden.');
|
||
} else {
|
||
Inputfields.hide($fieldToShow);
|
||
consoleLog('Field is now hidden.');
|
||
numVisibilityChanges++;
|
||
}
|
||
if(required) {
|
||
consoleLog('Field is required but cancelling that since it is not visible.');
|
||
required = false;
|
||
}
|
||
}
|
||
|
||
if(required && requiredMatches > 0) {
|
||
consoleLog('Determined that field "' + fieldNameToShow + '" should be required.');
|
||
$fieldToShow.addClass('InputfieldStateRequired').find(":input:visible[type!=hidden]").addClass('required'); // may need to focus a specific input?
|
||
|
||
} else if(!required && notRequiredMatches > 0) {
|
||
consoleLog('Determined that field "' + fieldNameToShow + '" should not be required.');
|
||
$fieldToShow.removeClass('InputfieldStateRequired').find(":input.required").removeClass('required');
|
||
}
|
||
|
||
if(numVisibilityChanges > 0) {
|
||
consoleLog(numVisibilityChanges + ' visibility changes were made.');
|
||
// Inputfields.redraw(0);
|
||
}
|
||
|
||
Inputfields.processingIfs = false;
|
||
|
||
} // END inputfieldChange()
|
||
|
||
|
||
/**
|
||
* Get the conditions for the given condition type 'show' or 'required'
|
||
*
|
||
* This is called only at startup/initialization
|
||
*
|
||
* @param conditionType
|
||
* @param array conditions
|
||
* @param $fieldToShow
|
||
* @returns []
|
||
*
|
||
*/
|
||
function setupConditions(conditionType, conditions, $fieldToShow) {
|
||
|
||
// find attribute data-show-if or data-required-if
|
||
var selector = $fieldToShow.attr('data-' + conditionType + '-if');
|
||
|
||
// if attribute wasn't present, skip...
|
||
if(!selector || selector.length < 1) {
|
||
// consoleLog('#' + $fieldToShow.attr('id') + '.data-' + conditionType + '-if is empty or not present');
|
||
return conditions;
|
||
}
|
||
|
||
// un-encode entities in the data attribute value (selector)
|
||
selector = $("<div />").html(selector).text();
|
||
|
||
consoleLog('-------------------------------------------------------------------');
|
||
consoleLog('Analyzing "' + conditionType + '" selector: ' + selector);
|
||
|
||
var fieldNameToShow = $fieldToShow.attr('id').replace('wrap_Inputfield_', '');
|
||
|
||
// separate each key=value component in the selector to parts array
|
||
var parts = selector.match(/(^|,)([^,]+)/g);
|
||
|
||
for(var n = 0; n < parts.length; n++) {
|
||
|
||
// separate out the field, operator and value
|
||
var part = parts[n];
|
||
var match = part.match(/^[,\s]*([_.|a-zA-Z0-9]+)(=|!=|<=|>=|<|>|%=)([^,]+),?$/);
|
||
if(!match) continue;
|
||
var field = match[1];
|
||
var operator = match[2];
|
||
var value = match[3];
|
||
var subfield = '';
|
||
var fields = []; // if multiple
|
||
var values = [];
|
||
|
||
// detect OR selector in field
|
||
if(field.indexOf("|") > -1) {
|
||
consoleLog("OR field dependency: " + field);
|
||
fields = field.split("|");
|
||
} else {
|
||
fields = [field];
|
||
}
|
||
|
||
var fieldAndSubfield = extractFieldAndSubfield(field);
|
||
field = fieldAndSubfield.field;
|
||
subfield = fieldAndSubfield.subfield;
|
||
|
||
// if(subfield.length && fields.length > 1) {
|
||
// consoleLog('Error: subfield with OR condition not supported');
|
||
// }
|
||
|
||
if(Inputfields.debug) {
|
||
consoleLog("Field: " + field);
|
||
if (subfield.length) consoleLog("Subfield: " + subfield);
|
||
consoleLog("Operator: " + operator);
|
||
consoleLog("value: " + value);
|
||
}
|
||
|
||
// detect OR selector | in value
|
||
if(value.indexOf("|") > -1){
|
||
consoleLog("OR value dependency: " + value);
|
||
values = value.split("|");
|
||
for(var i = 0; i < values.length; i++) {
|
||
values[i] = trimParseValue(values[i]);
|
||
}
|
||
} else {
|
||
values = [ trimParseValue([value]) ];
|
||
}
|
||
|
||
var op = operator === '=' ? '==' : operator;
|
||
var info = 'if(' + fields.join('|') + ' ' + op + ' ' + values.join('|') + ') ' + conditionType + ' ' + fieldNameToShow;
|
||
|
||
// build the condition
|
||
var condition = {
|
||
'type': conditionType,
|
||
'field': field,
|
||
'fields': fields, // if multiple
|
||
'subfield': subfield, // @todo determine if this is needed anymore
|
||
'operator': operator,
|
||
'value': value,
|
||
'values': values, // if multiple
|
||
'info': info
|
||
};
|
||
|
||
// append to conditions array
|
||
conditions[conditions.length] = condition;
|
||
|
||
// attach change event handler to all applicable fields
|
||
for(var fn = 0; fn < fields.length; fn++) {
|
||
|
||
fieldAndSubfield = extractFieldAndSubfield(fields[fn]);
|
||
var f = fieldAndSubfield.field;
|
||
|
||
// locate the dependency inputfield
|
||
var $inputfield = $("#Inputfield_" + f);
|
||
if($inputfield.length == 0) {
|
||
consoleLog("Unable to find inputfield by: #Inputfield_" + f);
|
||
$inputfield = $("#" + f);
|
||
if($inputfield.length == 0) consoleLog("Unable to find inputfield by: #" + f);
|
||
}
|
||
|
||
// if the dependency inputfield isn't found, locate its wrapper..
|
||
if($inputfield.length == 0) {
|
||
// use any inputs within the wrapper
|
||
$inputfield = $("#wrap_Inputfield_" + f).find(":input");
|
||
if($inputfield.length == 0) consoleLog("Unable to find inputfield by: #wrap_Inputfield_" + f + " :input");
|
||
}
|
||
|
||
// if the dependency inputfield isn't found, locate its wrapper..
|
||
if($inputfield.length == 0) {
|
||
// use any inputs within the wrapper
|
||
$inputfield = $("#wrap_" + f).find(":input");
|
||
if($inputfield.length == 0) consoleLog("Unable to find inputfield by: #wrap_" + f + " :input");
|
||
}
|
||
|
||
// attach change event to dependency inputfield
|
||
if($inputfield.length) {
|
||
consoleLog('Attaching change event for: ' + $inputfield.attr('name'));
|
||
$inputfield.on('change', function() {
|
||
inputfieldChange(conditions, $fieldToShow);
|
||
});
|
||
} else {
|
||
consoleLog('Failed to find inputfield, no change event attached');
|
||
}
|
||
}
|
||
}
|
||
|
||
// allConditions[fieldNameToShow] = conditions;
|
||
|
||
return conditions;
|
||
}
|
||
|
||
/**
|
||
* Setup dependencies for the given field
|
||
*
|
||
* Process an individual Inputfield.InputfieldShowStateIf and build a list of conditions for $fieldToShow
|
||
*
|
||
* @param $fieldToShow Wrapper of field we are operating on (i.e. #wrap_Inputfield_[name]
|
||
*
|
||
*/
|
||
function setupDependencyField($fieldToShow) {
|
||
// Array of conditions required to show a field
|
||
var conditions = [];
|
||
conditions = setupConditions('show', conditions, $fieldToShow);
|
||
conditions = setupConditions('required', conditions, $fieldToShow);
|
||
// run the event for the first time to initalize the field
|
||
inputfieldChange(conditions, $fieldToShow);
|
||
}
|
||
|
||
/*** Start InputfieldDependencies *************************************************/
|
||
|
||
Inputfields.processingIfs = true;
|
||
$target.each(function() {
|
||
$(this).find(".InputfieldStateShowIf, .InputfieldStateRequiredIf").each(function() {
|
||
setupDependencyField($(this));
|
||
});
|
||
});
|
||
Inputfields.processingIfs = false;
|
||
}
|
||
|
||
|
||
/************************************************************************************************
|
||
* Adjust inputfield column widths to fill out each row
|
||
*
|
||
*/
|
||
|
||
function InputfieldColumnWidths($target) {
|
||
|
||
var $ = jQuery;
|
||
var hasTarget = true;
|
||
if(typeof $target == "undefined") {
|
||
hasTarget = false;
|
||
$target = $("form.InputfieldForm");
|
||
}
|
||
|
||
var colspacing = null;
|
||
var useHeights = null;
|
||
|
||
/**
|
||
* Return the current with of $item based on its "style" attribute
|
||
*
|
||
*/
|
||
function getWidth($item) {
|
||
if($item.hasClass('InputfieldStateHidden')) return 0;
|
||
var pct = $item.attr('data-colwidth'); // colwidth tracked when NoWidths mode enabled
|
||
if(typeof pct == "undefined" || !pct.length) {
|
||
var style = $item.attr('style');
|
||
if(typeof style == "undefined" || !style) return $item.width();
|
||
pct = parseInt(style.match(/width:\s*(\d+)/i)[1]);
|
||
} else {
|
||
pct = parseInt(pct);
|
||
}
|
||
// store the original width in another attribute, for later retrieval
|
||
if(!$item.attr('data-original-width')) $item.attr('data-original-width', pct);
|
||
// consoleLog('getWidth(' + $item.attr('id') + '): ' + pct + '%');
|
||
return pct;
|
||
}
|
||
|
||
/**
|
||
* Retrieve the original width of $item
|
||
*
|
||
*/
|
||
function getOriginalWidth($item) {
|
||
var w = parseInt($item.attr('data-original-width'));
|
||
if(w == 0) w = getWidth($item);
|
||
return w;
|
||
}
|
||
|
||
/**
|
||
* Set the width of $item to a given percent
|
||
*
|
||
* @param $item
|
||
* @param pct Percentage (10-100)
|
||
* @param animate Whether to animate the change (bool)
|
||
*
|
||
*/
|
||
function setWidth($item, pct, animate) {
|
||
|
||
$item.width(pct + "%");
|
||
|
||
if(animate) {
|
||
$item.css('opacity', 0.5);
|
||
$item.animate( { opacity: 1.0 }, 150, function() { });
|
||
}
|
||
|
||
consoleLog('setWidth(' + $item.attr('id') + ': ' + pct + '%');
|
||
}
|
||
|
||
function getHeight($item) {
|
||
return $item.height();
|
||
}
|
||
|
||
function setHeight($item, maxColHeight) {
|
||
var h = getHeight($item);
|
||
consoleLog("setHeight: " + $item.find("label").text() + " >> " + maxColHeight + ' (' + h + ')');
|
||
if(h == maxColHeight) return;
|
||
if($item.hasClass('InputfieldStateCollapsed')) return;
|
||
var pad = maxColHeight-h;
|
||
if(pad < 0) pad = 0;
|
||
var $container = $item.children('.InputfieldContent, .ui-widget-content');
|
||
if(pad == 0) {
|
||
// do nothing, already the right height
|
||
} else {
|
||
consoleLog('Adjusting ' + $item.attr('id') + ' from ' + h + ' to ' + maxColHeight);
|
||
var $spacer = $("<div class='maxColHeightSpacer'></div>");
|
||
$container.append($spacer);
|
||
// $container.hide(); // removed per #124
|
||
$spacer.height(pad);
|
||
// $container.show(); // removed per #124
|
||
}
|
||
}
|
||
|
||
function updateInputfieldRow($firstItem) {
|
||
|
||
// find all columns in this row that aren't hidden
|
||
// note that $items excludes $firstItem
|
||
var $items = $firstItem.nextUntil('.InputfieldColumnWidthFirst', '.InputfieldColumnWidth:not(.InputfieldStateHidden)');
|
||
var firstItemHidden = $firstItem.hasClass('InputfieldStateHidden');
|
||
|
||
// initalize rowWidth with the width of the first item
|
||
var rowWidth = firstItemHidden ? 0 : getWidth($firstItem);
|
||
var $item = firstItemHidden ? null : $firstItem;
|
||
var itemWidth = $item == null ? 0 : rowWidth;
|
||
var numItems = $items.length;
|
||
var $leadItem;
|
||
|
||
if(firstItemHidden) {
|
||
numItems--;
|
||
// item that leads the list, even though it may not be the first (first could be hidden)
|
||
$leadItem = $items.eq(0);
|
||
} else {
|
||
// lead item is first item
|
||
$leadItem = $firstItem;
|
||
}
|
||
|
||
if(useHeights) {
|
||
// remove any spacers already present for adjusting height
|
||
$leadItem.find(".maxColHeightSpacer").remove();
|
||
$items.find(".maxColHeightSpacer").remove();
|
||
}
|
||
|
||
// subtract the quantity of items from the maxRowWidth since each item has a 1% margin
|
||
var maxRowWidth = 100 - (numItems * colspacing);
|
||
|
||
// keep track of the max column height
|
||
var maxColHeight = useHeights ? getHeight($leadItem) : 0;
|
||
|
||
// if our temporary class is in any of the items, remove it
|
||
$items.removeClass("InputfieldColumnWidthFirstTmp");
|
||
|
||
// determine the total row width
|
||
// note that rowWidth is already initalized with the $firstItem width
|
||
$items.each(function() {
|
||
$item = $(this);
|
||
itemWidth = getWidth($item);
|
||
rowWidth += itemWidth;
|
||
if(useHeights) {
|
||
var h = getHeight($item);
|
||
if (h > maxColHeight) maxColHeight = h;
|
||
}
|
||
});
|
||
|
||
if(useHeights) {
|
||
// ensure that all columns in the same row share the same height
|
||
if(Inputfields.debug) {
|
||
var lab = $leadItem.find("label").text();
|
||
consoleLog('maxColHeight: ' + lab + ' = ' + maxColHeight);
|
||
}
|
||
|
||
if(maxColHeight > 0) {
|
||
setHeight($leadItem, maxColHeight);
|
||
$items.each(function() {
|
||
setHeight($(this), maxColHeight);
|
||
});
|
||
}
|
||
}
|
||
|
||
var originalWidth = 0;
|
||
var leftoverWidth = 0;
|
||
|
||
// if the current rowWidth is less than the full width, expand the last item as needed to fill the row
|
||
if(rowWidth < maxRowWidth) {
|
||
consoleLog("Expand width of row because rowWidth < maxRowWidth (" + rowWidth + " < " + maxRowWidth + ')');
|
||
leftoverWidth = (maxRowWidth - rowWidth);
|
||
consoleLog('leftoverWidth: ' + leftoverWidth);
|
||
itemWidth = itemWidth + leftoverWidth;
|
||
if($item == null && !firstItemHidden) $item = $firstItem;
|
||
if($item) {
|
||
originalWidth = getOriginalWidth($item);
|
||
// if the determined width is still less than the original width, then use the original width instead
|
||
if(originalWidth > 0 && itemWidth < originalWidth) itemWidth = originalWidth;
|
||
setWidth($item, itemWidth, true);
|
||
}
|
||
|
||
} else if(rowWidth > maxRowWidth) {
|
||
// reduce width of row
|
||
consoleLog("Reduce width of row because rowWidth > maxRowWidth (" + rowWidth + " > " + maxRowWidth + ')');
|
||
if(!firstItemHidden) $items = $firstItem.add($items); // $items.add($firstItem);
|
||
rowWidth = 0;
|
||
$items.each(function() {
|
||
// restore items in row to original width
|
||
$item = $(this);
|
||
itemWidth = getOriginalWidth($item);
|
||
if(itemWidth > 0) setWidth($item, itemWidth, false);
|
||
rowWidth += itemWidth;
|
||
});
|
||
// reduce width of last item as needed
|
||
leftoverWidth = maxRowWidth - rowWidth;
|
||
itemWidth += leftoverWidth;
|
||
originalWidth = getOriginalWidth($item);
|
||
if(originalWidth > 0 && itemWidth < originalWidth) itemWidth = originalWidth;
|
||
setWidth($item, itemWidth, false);
|
||
}
|
||
|
||
if(firstItemHidden) {
|
||
// If the first item is not part of the row, setup a temporary class to let the
|
||
// $leadItem behave in the same way as the first item
|
||
$leadItem.addClass("InputfieldColumnWidthFirstTmp");
|
||
}
|
||
|
||
} // updateInputfield
|
||
|
||
var numForms = 0;
|
||
$target.each(function() {
|
||
|
||
var $form = $(this);
|
||
if(!$form.hasClass('InputfieldForm')) {
|
||
var $_form = $form.closest('.InputfieldForm');
|
||
if($_form.length) $form = $_form;
|
||
}
|
||
if($form.hasClass('InputfieldFormNoWidths')) {
|
||
return; // column widths not necessary
|
||
}
|
||
|
||
colspacing = $form.attr('data-colspacing');
|
||
if(typeof colspacing == 'undefined') {
|
||
colspacing = 1;
|
||
} else {
|
||
colspacing = parseInt(colspacing);
|
||
}
|
||
|
||
// if no borders, we don't worry about keeping heights aligned since they won't be seen
|
||
useHeights = $form.hasClass('InputfieldFormNoHeights') ? false : true;
|
||
|
||
// for columns that don't have specific widths defined, add the InputfieldColumnWidthFirst
|
||
// class to them which more easily enables us to exclude them from our operations below
|
||
$(".Inputfield:not(.InputfieldColumnWidth)", $form).addClass("InputfieldColumnWidthFirst");
|
||
|
||
// cycle through all first columns in a multi-column row
|
||
$(".InputfieldColumnWidthFirst.InputfieldColumnWidth:visible", $form).each(function() {
|
||
updateInputfieldRow($(this));
|
||
});
|
||
|
||
numForms++;
|
||
});
|
||
|
||
if(!numForms) {
|
||
// no need to do anything further
|
||
|
||
} else if(!$('body').hasClass('InputfieldColumnWidthsInit')) {
|
||
// initialize monitoring events on first run
|
||
$('body').addClass('InputfieldColumnWidthsInit');
|
||
$(document).on('columnWidth', '.Inputfield', function(e, w) {
|
||
setWidth($inputfield, w, $(this));
|
||
return false;
|
||
});
|
||
|
||
/*
|
||
var changeTimeout = null;
|
||
var checkInputfieldHeightChange = function() {
|
||
var $this = $(this);
|
||
var checkNow = function() {
|
||
var $item = $this.hasClass('InputfieldColumnWidth') ? $this : $this.closest('.InputfieldColumnWidth');
|
||
var $firstItem = $item.hasClass('InputfieldColumnWidthFirst') ? $item : $item.prev(".InputfieldColumnWidthFirst");
|
||
if($firstItem.length) updateInputfieldRow($firstItem);
|
||
}
|
||
if($this.is(':input')) {
|
||
if(changeTimeout) clearTimeout(changeTimeout);
|
||
changeTimeout = setTimeout(checkNow, 1000);
|
||
} else {
|
||
checkNow();
|
||
}
|
||
};
|
||
|
||
$(document).on('change', '.InputfieldColumnWidth :input', checkInputfieldHeightChange);
|
||
$(document).on('AjaxUploadDone', '.InputfieldFileList', checkInputfieldHeightChange);
|
||
$(document).on('heightChanged', '.InputfieldColumnWidth', checkInputfieldHeightChange);
|
||
*/
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Event to call before a page is unloaded (beforeunload event)
|
||
*
|
||
* If window should not be unloaded, it returns a string of text with reason why.
|
||
*
|
||
*/
|
||
function InputfieldFormBeforeUnloadEvent(e) {
|
||
var $ = jQuery;
|
||
var $changes = $(".InputfieldFormConfirm:not(.InputfieldFormSubmitted) .InputfieldStateChanged");
|
||
if($changes.length == 0) return;
|
||
var msg = $('.InputfieldFormConfirm').eq(0).attr('data-confirm') + "\n";
|
||
$changes.each(function() {
|
||
var $header = $(this).find('.InputfieldHeader').eq(0);
|
||
if($header.length) {
|
||
name = $header.text();
|
||
} else {
|
||
name = $(this).attr('data-label');
|
||
if(!name || !name.length) {
|
||
name = $(this).find(':input').attr('name');
|
||
}
|
||
}
|
||
if(name.length) msg += "\n• " + name.trim();
|
||
});
|
||
(e || window.event).returnValue = msg; // Gecko and Trident
|
||
return msg; // Gecko and WebKit
|
||
}
|
||
|
||
/**
|
||
* Focus the Inputfield
|
||
*
|
||
* If the Inputfield is not visible, this method will track it down and reveal it.
|
||
* If the Inputfield is collapsed, this method will open it.
|
||
* If the Inputfield has an input that can be focused, it will be focused.
|
||
* If the Inputfield does not support focus, it will just be ensured to be visible.
|
||
*
|
||
* @param $inputfield
|
||
* @param function completedCallback Optional callback function to call at completion (since 3.0.144)
|
||
*
|
||
*/
|
||
function InputfieldFocus($inputfield, completedCallback) {
|
||
Inputfields.focus($inputfield, completedCallback);
|
||
}
|
||
|
||
/**
|
||
* Toggle the given $inputfield open or closed
|
||
*
|
||
* Also triggers these events on $inputfield: openReady, closeReady, opened, closed
|
||
*
|
||
* @param $inputfield Inputfield to toggle, or some element within it
|
||
* @param open Boolean true to open, false to close, or null (or omit) for opposite of current state (default=opposite of current state)
|
||
* @param duration How many milliseconds for animation? (default=100)
|
||
* @param completedCallback Optional function to call upon completion, receives 3 arguments: $inputfield, open and duration
|
||
* @returns Returns Inputfield element
|
||
*
|
||
*/
|
||
function InputfieldToggle($inputfield, open, duration, completedCallback) {
|
||
Inputfields.toggle($inputfield, open, duration, completedCallback);
|
||
}
|
||
|
||
/**
|
||
* Open a collapsed Inputfield
|
||
*
|
||
* @param $inputfield
|
||
* @param duration Optional number of milliseconds for animation or 0 for none (default=100)
|
||
*
|
||
*/
|
||
function InputfieldOpen($inputfield, duration) {
|
||
Inputfields.toggle($inputfield, true, duration);
|
||
}
|
||
|
||
/**
|
||
* Close/collapse an open Inputfield
|
||
*
|
||
* @param $inputfield
|
||
* @param duration Optional number of milliseconds for animation or 0 for none (default=100)
|
||
*
|
||
*/
|
||
function InputfieldClose($inputfield, duration) {
|
||
Inputfields.toggle($inputfield, false, duration);
|
||
}
|
||
|
||
/*****************************************************************************************************
|
||
* Setup the toggles for Inputfields and the animations that occur between opening and closing
|
||
*
|
||
*/
|
||
function InputfieldStates($target) {
|
||
|
||
var hasTarget = true;
|
||
var $ = jQuery;
|
||
|
||
if(typeof $target == "undefined") {
|
||
$target = $("body");
|
||
hasTarget = false;
|
||
}
|
||
|
||
function InputfieldStateAjaxClick($li) {
|
||
|
||
function headerHighlightEffect($header, $li) {
|
||
|
||
var $spinner = $("<i class='fa fa-spin fa-spinner'></i>");
|
||
var offset = $header.offset();
|
||
var interval;
|
||
var maxRuns = 10;
|
||
var runs = 0;
|
||
var hAdjust = 0.8;
|
||
|
||
$("body").append($spinner.hide());
|
||
|
||
if($header.is('a') && $header.closest('ul').hasClass('uk-tab')) hAdjust = 0.1;
|
||
|
||
$spinner.css({
|
||
position: 'absolute',
|
||
top: offset.top - ($spinner.height() + 5),
|
||
left: offset.left + ($header.width() / 2) + ($spinner.width() * hAdjust)
|
||
}).fadeIn();
|
||
|
||
interval = setInterval(function() {
|
||
if(++runs > maxRuns || !$li.hasClass('InputfieldAjaxLoading')) {
|
||
clearInterval(interval);
|
||
$spinner.fadeOut('normal', function() {
|
||
$spinner.remove();
|
||
});
|
||
}
|
||
}, 500);
|
||
}
|
||
|
||
// check for ajax rendered Inputfields
|
||
var $parent = $li.children('.InputfieldContent').children('.renderInputfieldAjax');
|
||
var isTab = false;
|
||
if(!$parent.length) {
|
||
$parent = $li.children('.renderInputfieldAjax'); // WireTab
|
||
isTab = true;
|
||
}
|
||
|
||
var ajaxURL = $parent.children('input').attr('value');
|
||
if(typeof ajaxURL == "undefined" || ajaxURL.length < 1) return false;
|
||
var $spinner = null;
|
||
var $header;
|
||
|
||
if(isTab) {
|
||
$header = $('#_' + $li.attr('id')); // WireTab
|
||
headerHighlightEffect($header, $li);
|
||
} else {
|
||
$header = $li.children(".InputfieldHeader");
|
||
$spinner = $("<i class='fa fa-spin fa-spinner'></i>");
|
||
$spinner.css('margin-left', '0.5em');
|
||
$header.append($spinner);
|
||
}
|
||
|
||
$li.removeClass('collapsed10 collapsed11').addClass('InputfieldAjaxLoading');
|
||
|
||
$.get(ajaxURL, function(data) {
|
||
$li.removeClass('InputfieldAjaxLoading InputfieldStateCollapsed');
|
||
var $icon = $li.children('.InputfieldHeader').find('.toggle-icon');
|
||
if($icon.length) $icon.toggleClass($icon.attr('data-to'));
|
||
$parent.replaceWith($(data)).hide();
|
||
$parent.slideDown();
|
||
var $inputfields = $li.find('.Inputfield');
|
||
if($inputfields.length) {
|
||
$inputfields.trigger('reloaded', [ 'InputfieldAjaxLoad' ]);
|
||
InputfieldStates($li);
|
||
InputfieldRequirements($li);
|
||
InputfieldColumnWidths();
|
||
} else {
|
||
$li.trigger('reloaded', [ 'InputfieldAjaxLoad' ]);
|
||
InputfieldColumnWidths();
|
||
}
|
||
if($li.closest('.InputfieldFormNoDependencies').length == 0) {
|
||
InputfieldDependencies($li.parent());
|
||
}
|
||
setTimeout(function() {
|
||
if($spinner) $spinner.fadeOut('fast', function() {
|
||
$spinner.remove();
|
||
});
|
||
if(isTab) {
|
||
$header.effect('highlight', 500);
|
||
} else if(Inputfields.toggleBehavior < 1) {
|
||
$header.trigger('click');
|
||
}
|
||
}, 500);
|
||
}, 'html');
|
||
|
||
return true;
|
||
}
|
||
|
||
$(".Inputfield:not(.collapsed9) > .InputfieldHeader, .Inputfield:not(.collapsed9) > .ui-widget-header", $target)
|
||
.addClass("InputfieldStateToggle");
|
||
|
||
// use different icon for open and closed
|
||
var $icon = $(".Inputfields .InputfieldStateCollapsed > .InputfieldHeader i.toggle-icon, .Inputfields .InputfieldStateCollapsed > .ui-widget-header i.toggle-icon", $target);
|
||
if($icon.length && typeof $icon.attr('data-to') !== 'undefined') $icon.toggleClass($icon.attr('data-to'));
|
||
|
||
// display a detail with the HTML field name when the toggle icon is hovered
|
||
if(typeof ProcessWire != "undefined") {
|
||
var config = ProcessWire.config;
|
||
}
|
||
if(typeof config !== "undefined" && config.debug) {
|
||
$('.InputfieldHeader > i.toggle-icon', $target).on('mouseenter', function() {
|
||
var $label = $(this).parent('label');
|
||
if($label.length == 0) return;
|
||
var forId = $label.attr('for');
|
||
if(!forId) forId = $label.parent().attr('id');
|
||
if(!forId) return;
|
||
var text = forId.replace(/^Inputfield_|wrap_Inputfield_|wrap_/, '');
|
||
if(text.length) {
|
||
var $tip = $("<small class='InputfieldNameTip ui-priority-secondary'> " + text + " </small>");
|
||
$tip.css('float', 'right');
|
||
$label.append($tip);
|
||
}
|
||
|
||
}).on('mouseleave', function() {
|
||
var $label = $(this).parent('label');
|
||
if($label.length == 0) return;
|
||
$label.find('.InputfieldNameTip').remove();
|
||
});
|
||
}
|
||
|
||
// no need to apply anything further for ajax-loaded inputfields
|
||
if(hasTarget) return;
|
||
|
||
$(document).on('wiretabclick', function(e, $newTab, $oldTab) {
|
||
if($newTab.hasClass('collapsed10')) InputfieldStateAjaxClick($newTab);
|
||
});
|
||
|
||
$(document).on('click', '.InputfieldStateToggle, .toggle-icon', function(event, data) {
|
||
|
||
var $t = $(this);
|
||
var $li = $t.closest('.Inputfield');
|
||
var isIcon = $t.hasClass('toggle-icon');
|
||
var $icon = isIcon ? $t : $li.children('.InputfieldHeader, .ui-widget-header').find('.toggle-icon');
|
||
var isCollapsed = $li.hasClass("InputfieldStateCollapsed");
|
||
var wasCollapsed = $li.hasClass("InputfieldStateWasCollapsed");
|
||
var duration = 100;
|
||
var isAjax = $li.hasClass('collapsed10') || $li.hasClass('collapsed11');
|
||
|
||
if(!$li.length) return;
|
||
if($li.hasClass('InputfieldAjaxLoading')) return false;
|
||
if($li.hasClass('InputfieldStateToggling')) return false;
|
||
|
||
if(typeof data != "undefined") {
|
||
if(typeof data.duration != "undefined") duration = data.duration;
|
||
}
|
||
|
||
if(isCollapsed && isAjax) {
|
||
if(InputfieldStateAjaxClick($li)) return false;
|
||
}
|
||
|
||
if(isCollapsed || wasCollapsed || isIcon) {
|
||
$li.addClass('InputfieldStateWasCollapsed'); // this class only used here
|
||
Inputfields.toggle($li, null, duration);
|
||
} else if(Inputfields.toggleBehavior === 1) {
|
||
// open/close implied by header label click
|
||
$icon.trigger('click');
|
||
} else {
|
||
// Inputfield not collapsible unless toggle icon clicked, so pulsate the toggle icon and focus any inputs
|
||
if(typeof jQuery.ui != 'undefined') {
|
||
var color1 = $icon.css('color');
|
||
var color2 = $li.children('.InputfieldHeader, .ui-widget-header').css('color');
|
||
$icon.css('color', color2);
|
||
$icon.effect('pulsate', 300, function () {
|
||
$icon.css('color', color1);
|
||
});
|
||
}
|
||
Inputfields.focus($li);
|
||
}
|
||
|
||
return false;
|
||
});
|
||
|
||
// Make the first field in any form have focus, if it is a text field that is blank
|
||
var $focusInputs = $('input.InputfieldFocusFirst'); // input elements only
|
||
if(!$focusInputs.length) {
|
||
$focusInputs = $('#content .InputfieldFormFocusFirst:not(.InputfieldFormNoFocus)').find('input[type=text]:enabled').first();
|
||
if($focusInputs.hasClass('hasDatepicker') || $focusInputs.hasClass('InputfieldNoFocus')) $focusInputs = null;
|
||
}
|
||
if($focusInputs !== null && $focusInputs.length) {
|
||
$focusInputs.each(function() {
|
||
var $t = $(this);
|
||
// jump to first input, if it happens to be blank
|
||
if($t.val()) return;
|
||
// avoid jumping to inputs that fall "below the fold"
|
||
if($t.offset().top < $(window).height()) {
|
||
window.setTimeout(function() {
|
||
if($t.is(":visible")) $t.trigger('focus');
|
||
}, 250);
|
||
}
|
||
});
|
||
}
|
||
|
||
// confirm changed forms that user navigates away from before submitting
|
||
$(document).on('change', '.InputfieldForm :input, .InputfieldForm .Inputfield', function() {
|
||
var $this = $(this);
|
||
if($this.hasClass('Inputfield')) {
|
||
// an .Inputfield element
|
||
if($this.hasClass('InputfieldIgnoreChanges')) return false;
|
||
$this.addClass('InputfieldStateChanged').trigger('changed');
|
||
// .InputfieldFormConfirm forms stop change at parent .Inputfield element
|
||
if($this.closest('.InputfieldFormConfirm').length > 0) return false;
|
||
} else {
|
||
// an :input element
|
||
if($this.hasClass('InputfieldIgnoreChanges') || $this.closest('.InputfieldIgnoreChanges').length) return false;
|
||
$this.closest('.Inputfield').addClass('InputfieldStateChanged').trigger('changed');
|
||
}
|
||
});
|
||
|
||
$(document).on('submit', '.InputfieldFormConfirm', function() {
|
||
$(this).addClass('InputfieldFormSubmitted');
|
||
});
|
||
|
||
// open Inputfields supporting uploads when file dragged in, per @Toutouwai #242
|
||
$(document).on('dragenter', '.InputfieldHasUpload.InputfieldStateCollapsed', function(e) {
|
||
var dt = e.originalEvent.dataTransfer;
|
||
if(dt.types && (dt.types.indexOf ? dt.types.indexOf('Files') !== -1 : dt.types.contains('Files'))) {
|
||
InputfieldOpen($(this));
|
||
}
|
||
});
|
||
|
||
window.addEventListener("beforeunload", InputfieldFormBeforeUnloadEvent);
|
||
}
|
||
|
||
/*********************************************************************************************
|
||
|
||
function overflowAdjustments() {
|
||
// ensures an overflow-y scroll is set when the content height is less than window height
|
||
// this makes a permanently visible scrollbar, preventing jumps in ui-menus
|
||
var $body = $("body");
|
||
var documentHeight = $(document).height();
|
||
var windowHeight = $(window).height();
|
||
|
||
consoleLog('documentHeight=' + documentHeight + ', windowHeight=' + windowHeight);
|
||
|
||
if(documentHeight > windowHeight) {
|
||
// there is already a scrollbar
|
||
if($body.css('overflow-y') == 'scroll') {
|
||
$body.css('overflow-y', 'visible');
|
||
consoleLog("Setting overflow-y to visible");
|
||
}
|
||
} else {
|
||
// force a scrollbar
|
||
$body.css('overflow-y', 'scroll');
|
||
consoleLog("Setting overflow-y to scroll");
|
||
}
|
||
}
|
||
|
||
*********************************************************************************************/
|
||
|
||
/***********************************************************************************************
|
||
* Adjustments for unintended actions, like hitting enter in a text field in a multi-button form
|
||
*
|
||
*/
|
||
function InputfieldIntentions() {
|
||
var $ = jQuery;
|
||
|
||
// adjustments for unintended actions, like hitting enter in a text field in a multi-button form
|
||
$(".InputfieldForm").each(function() {
|
||
var $form = $(this);
|
||
var numButtons = null;
|
||
var $input = null;
|
||
|
||
$form.on('submit', function() {
|
||
if(!$(this).hasClass('nosubmit')) return;
|
||
if(!$input) return;
|
||
|
||
var $buttons = null;
|
||
var $inputfields = $input.closest(".Inputfields");
|
||
|
||
do {
|
||
// find nearest visible submit button
|
||
$buttons = $inputfields.find("input[type=submit]:visible, button[type=submit]:visible");
|
||
if($buttons.length > 0) break;
|
||
$inputfields = $inputfields.parent().closest(".Inputfields");
|
||
} while($inputfields.length > 0);
|
||
|
||
// scroll to first found button and focus it
|
||
if($buttons.length > 0) {
|
||
var $button = $buttons.eq(0);
|
||
$('html, body').animate({ scrollTop: $button.offset().top }, 'fast');
|
||
$button.trigger('focus');
|
||
}
|
||
|
||
return false;
|
||
|
||
}).on("focus", "input, select", function() {
|
||
// if more than 1 submit button, prevent form submission while text input or select is focused
|
||
if(numButtons === null) numButtons = $form.find("input[type=submit], button[type=submit]").length;
|
||
if(numButtons < 2) return;
|
||
$form.addClass('nosubmit');
|
||
$input = $(this);
|
||
|
||
}).on("blur", "input, select", function() {
|
||
// allow submissions again once they are out of the field
|
||
$form.removeClass('nosubmit');
|
||
});
|
||
});
|
||
|
||
// prevent dragged in files from loading in the browser (does not interfere with other drag/drop handlers)
|
||
if($("input[type=file]").length) {
|
||
$(document).on({
|
||
dragover: function() {
|
||
if($(this).is("input[type=file]")) return;
|
||
return false;
|
||
},
|
||
drop: function() {
|
||
if($(this).is("input[type=file]")) return;
|
||
return false;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
/***********************************************************************************/
|
||
|
||
var InputfieldWindowResizeQueued = false;
|
||
|
||
function InputfieldWindowResizeActions1() {
|
||
consoleLog('InputfieldWindowResizeActions1()');
|
||
// notify all Inputfields that they have been resized
|
||
// note: event is not triggered at ready() so Inputfield should trigger its own
|
||
// resize event if it needs this as part of setup
|
||
jQuery(".Inputfield").trigger('resized');
|
||
}
|
||
|
||
function InputfieldWindowResizeActions2() {
|
||
consoleLog('InputfieldWindowResizeActions2()');
|
||
InputfieldColumnWidths();
|
||
InputfieldWindowResizeQueued = false;
|
||
}
|
||
|
||
/**
|
||
* Manage required attributes on Inputfields
|
||
*
|
||
*/
|
||
function InputfieldRequirements($target) {
|
||
// show tab that input[required] is in, via @Toutouwai
|
||
jQuery(':input[required]', $target).on('invalid', function() {
|
||
var $input = jQuery(this);
|
||
Inputfields.focus($input);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Event handler called when 'reload' event is triggered on an Inputfield
|
||
*
|
||
*/
|
||
function InputfieldReloadEvent(event, extraData) {
|
||
var $t = $(this);
|
||
var $form = $t.closest('form');
|
||
var fieldName = $t.attr('id').replace('wrap_Inputfield_', '');
|
||
var fnsx = ''; // field name suffix
|
||
var url = $form.attr('action');
|
||
if(fieldName.indexOf('_repeater') > 0) {
|
||
var $repeaterItem = $t.closest('.InputfieldRepeaterItem');
|
||
var pageID = $repeaterItem.attr('data-page');
|
||
url = url.replace(/\?id=\d+/, '?id=' + pageID);
|
||
fnsx = $repeaterItem.attr('data-fnsx');
|
||
fieldName = fieldName.replace(/_repeater\d+$/, '');
|
||
}
|
||
url += url.indexOf('?') > -1 ? '&' : '?';
|
||
url += 'field=' + fieldName + '&reloadInputfieldAjax=' + fieldName;
|
||
if(fnsx.length) url += '&fnsx=' + fnsx;
|
||
if(typeof extraData != "undefined") {
|
||
if(typeof extraData['queryString'] != "undefined") {
|
||
url += '&' + extraData['queryString'];
|
||
}
|
||
}
|
||
consoleLog('Inputfield reload: ' + fieldName);
|
||
$.get(url, function(data) {
|
||
var id = $t.attr('id');
|
||
var $content;
|
||
if(data.indexOf('{') === 0) {
|
||
data = JSON.parse(data);
|
||
console.log(data);
|
||
$content = '';
|
||
} else {
|
||
$content = jQuery(data).find("#" + id).children(".InputfieldContent");
|
||
if(!$content.length && id.indexOf('_repeater') > -1) {
|
||
id = 'wrap_Inputfield_' + fieldName;
|
||
$content = jQuery(data).find("#" + id).children(".InputfieldContent");
|
||
if(!$content.length) {
|
||
console.log("Unable to find #" + $t.attr('id') + " in response from " + url);
|
||
}
|
||
}
|
||
}
|
||
if($content.length) {
|
||
$t.children(".InputfieldContent").html($content.html());
|
||
//InputfieldStates($t);
|
||
InputfieldsInit($t);
|
||
$t.trigger('reloaded', ['reload']);
|
||
}
|
||
});
|
||
event.stopPropagation();
|
||
}
|
||
|
||
/**
|
||
* Function for external initialization of new Inputfields content (perhaps ajax loaded)
|
||
*
|
||
*/
|
||
function InputfieldsInit($target) {
|
||
InputfieldStates($target);
|
||
InputfieldDependencies($target);
|
||
InputfieldRequirements($target);
|
||
setTimeout(function() { InputfieldColumnWidths(); }, 100);
|
||
}
|
||
|
||
/***********************************************************************************/
|
||
|
||
jQuery(document).ready(function($) {
|
||
|
||
InputfieldStates();
|
||
|
||
InputfieldDependencies($(".InputfieldForm:not(.InputfieldFormNoDependencies)"));
|
||
|
||
InputfieldIntentions();
|
||
|
||
setTimeout(function() { InputfieldColumnWidths(); }, 100);
|
||
|
||
var windowResized = function() {
|
||
if(InputfieldWindowResizeQueued) return;
|
||
InputfieldWindowResizeQueued = true;
|
||
setTimeout('InputfieldWindowResizeActions1()', 1000);
|
||
setTimeout('InputfieldWindowResizeActions2()', 2000);
|
||
};
|
||
|
||
$(window).on('resize', windowResized);
|
||
|
||
$("ul.WireTabs > li > a").on('click', function() {
|
||
if(InputfieldWindowResizeQueued) return;
|
||
InputfieldWindowResizeQueued = true;
|
||
setTimeout('InputfieldWindowResizeActions1()', 250);
|
||
setTimeout('InputfieldWindowResizeActions2()', 500);
|
||
return true;
|
||
});
|
||
|
||
InputfieldRequirements($('.InputfieldForm'));
|
||
|
||
$(document).on('reload', '.Inputfield', InputfieldReloadEvent);
|
||
|
||
|
||
if($('.InputfieldForm:not(.InputfieldFormNoWidths)').length) {
|
||
$(document).on('change', '.InputfieldColumnWidth :input', function() {
|
||
InputfieldColumnWidths(); // For fields with immediate height change (e.g. AsmSelect)
|
||
setTimeout(InputfieldColumnWidths, 300); // For fields with delayed height change (e.g. Files delete)
|
||
});
|
||
$(document).on('AjaxUploadDone', '.InputfieldFileList', function() {
|
||
InputfieldColumnWidths();
|
||
});
|
||
$(document).on('heightChanged', '.InputfieldColumnWidth', function() {
|
||
// deprecated, no longer used (?)
|
||
InputfieldColumnWidths();
|
||
});
|
||
}
|
||
|
||
if(window.location.hash) {
|
||
Inputfields.hashAction(window.location.hash.substring(1));
|
||
}
|
||
|
||
/*
|
||
// for testing:
|
||
$(document).on('reloaded', '.Inputfield', function(event) {
|
||
console.log($(this).attr('id'));
|
||
});
|
||
*/
|
||
});
|