From 3c5205721b3ffc3745a68bd31868728251df8a03 Mon Sep 17 00:00:00 2001 From: Ryan Cramer Date: Fri, 24 May 2024 14:42:23 -0400 Subject: [PATCH] Add support for PHP-defined header actions for Inputfields as requested by @Toutouwai. These work the same as those defined in JS via Inputfields.addHeaderAction() except the method can now also be called from Inputfield objects in PHP. Also added support for 'link' type actions that open a link in either the current or a modal window. --- wire/core/Inputfield.php | 64 ++++++++++++++- wire/core/InputfieldWrapper.php | 52 ++++++++++++- wire/templates-admin/scripts/inputfields.js | 77 +++++++++++++++---- .../scripts/inputfields.min.js | 2 +- 4 files changed, 177 insertions(+), 18 deletions(-) diff --git a/wire/core/Inputfield.php b/wire/core/Inputfield.php index eacf5655..7e2c4d2a 100644 --- a/wire/core/Inputfield.php +++ b/wire/core/Inputfield.php @@ -3,7 +3,7 @@ /** * ProcessWire Inputfield - base class for Inputfield modules. * - * ProcessWire 3.x, Copyright 2021 by Ryan Cramer + * ProcessWire 3.x, Copyright 2024 by Ryan Cramer * https://processwire.com * * An Inputfield for an actual form input field widget, and this is provided as the base class @@ -397,6 +397,14 @@ abstract class Inputfield extends WireData implements Module { */ protected $editable = true; + /** + * Header icon definitions + * + * @var array + * + */ + protected $headerActions = array(); + /** * Construct the Inputfield, setting defaults for all properties * @@ -2081,6 +2089,60 @@ abstract class Inputfield extends WireData implements Module { return $this->editable; } + /** + * Add header action + * + * This adds a clickable icon to the right side of the Inputfield header. + * There are three types of actions: 'click', 'toggle' and 'link'. The 'click' + * action simply triggers your JS event whenever it is clicked. The 'toggle' action + * has an on/off state, and you can specify the JS event to trigger for each. + * This function will automatically figure out whether you want a `click`, + * `toggle` or 'link' action based on what you provide in the $settings argument. + * Below is a summary of these settings: + * + * Settings for 'click' or 'link' type actions: + * + * - `icon` (string): Name of font-awesome icon to use. + * - `tooltip` (string): Optional tooltip text to display when icon hovered. + * - `event` (string): Event name to trigger in JS when clicked ('click' actions only). + * - `href` (string): URL to open ('link' actions only). + * - `modal` (bool): Specify true to open link in modal ('link' actions only). + * + * Settings for 'toggle' (on/off) type actions: + * + * - `on` (bool): Start with the 'on' state? (default=false) + * - `onIcon` (string): Name of font-awesome icon to show for on state. + * - `onEvent` (string): JS event name to trigger when toggled on. + * - `onTooltip` (string): Tooltip text to show when on icon is hovered. + * - `offIcon` (string): Name of font-awesome icon to show for off state. + * - `offEvent` (string): JS event name to trigger when toggled off. + * - `offTooltip` (string): Tooltip text to show when off icon is hovered. + * + * Other/optional settings (applies to all types): + * + * - `name` (string): Name of this action (-_a-zA-Z0-9). + * - `overIcon` (string): Name of font-awesome icon to show when hovered. + * - `overEvent` (string): JS event name to trigger when mouse is over the icon. + * - `cursor` (string): CSS cursor name to show when mouse is over the icon. + * - `setAll` (array): Set all of the header actions in one call, replaces any existing. + * Note: to get all actions, call the method and omit the $settings argument. + * + * @param array $settings Specify array containing the appropriate settings above. + * @return array Returns all currently added actions. + * @since 3.0.240 + * + */ + public function addHeaderAction(array $settings = array()) { + if(!empty($settings['setAll'])) { + if(is_array($settings['setAll'])) { + $this->headerActions = array_values($settings['setAll']); + } + } else { + $this->headerActions[] = $settings; // add new action + } + return $this->headerActions; // return all + } + /** * debugInfo PHP 5.6+ magic method * diff --git a/wire/core/InputfieldWrapper.php b/wire/core/InputfieldWrapper.php index fb3d891e..907b1c70 100644 --- a/wire/core/InputfieldWrapper.php +++ b/wire/core/InputfieldWrapper.php @@ -3,7 +3,7 @@ /** * ProcessWire InputfieldWrapper * - * ProcessWire 3.x, Copyright 2022 by Ryan Cramer + * ProcessWire 3.x, Copyright 2024 by Ryan Cramer * https://processwire.com * * About InputfieldWrapper @@ -885,6 +885,10 @@ class InputfieldWrapper extends Inputfield implements \Countable, \IteratorAggre if($toggle && strpos($toggle, 'title=') === false) { $toggle = str_replace("class=", "title='" . $this->_('Toggle open/close') . "' class=", $toggle); } + $headerActions = $inputfield->addHeaderAction(); + if(count($headerActions)) { + $label .= $this->renderHeaderActions($inputfield, $headerActions); + } if($skipLabel === Inputfield::skipLabelHeader || $quietMode) { // label only shows when field is collapsed $label = str_replace('{out}', $icon . $label . $toggle, $markup['item_label_hidden']); @@ -992,6 +996,52 @@ class InputfieldWrapper extends Inputfield implements \Countable, \IteratorAggre return $out; } + /** + * Render Inputfield header actions + * + * @param Inputfield $inputfield + * @param array $actions + * @return string + * @since 3.0.240 + * + */ + protected function renderHeaderActions(Inputfield $inputfield, array $actions) { + $sanitizer = $this->wire()->sanitizer; + $out = ''; + $modal = false; + foreach($actions as $a) { + $icon = ''; + $type = ''; + if(isset($a['icon'])) { + $icon = $a['icon']; + if(isset($a['href'])) { + $type = 'link'; + if(!empty($a['modal'])) $modal = true; + } else { + $type = 'click'; + } + } else if(isset($a['offIcon'])) { + $type = 'toggle'; + if(!isset($a['onIcon'])) $a['onIcon'] = $a['offIcon']; + } else if(isset($a['onIcon'])) { + $type = 'toggle'; + $a['offIcon'] = $a['onIcon']; + } + if($type === 'toggle') $icon = $a['on'] ? $a['onIcon'] : $a['offIcon']; + if(empty($icon) || empty($type)) continue; + $a['type'] = $type; + if(strpos($icon, 'fa-') !== 0) $icon = "fa-$icon"; + $data = $sanitizer->entities(json_encode($a)); + $out .= ""; + } + if($modal) { + /** @var JqueryUI $jQueryUI */ + $jQueryUI = $this->wire()->modules->get('JqueryUI'); + $jQueryUI->use('modal'); + } + return $out; + } + /** * Render the output of this Inputfield and its children, showing values only (no inputs) * diff --git a/wire/templates-admin/scripts/inputfields.js b/wire/templates-admin/scripts/inputfields.js index 4acee86f..0d70192d 100644 --- a/wire/templates-admin/scripts/inputfields.js +++ b/wire/templates-admin/scripts/inputfields.js @@ -1067,25 +1067,31 @@ var Inputfields = { * Add an Inputfield header icon action * * This adds a clickable icon to the right side of the Inputfield header. - * There are two types of actions: 'click' and 'toggle'. The 'click' action + * There are three types of actions: 'click', 'toggle' and 'link'. The 'click' action * simply executes your callback whenever it is clicked. The 'toggle' action * has an on/off state, and you can provide callbacks and icons for either. - * This function will automatically figure out whether you want a `click` - * or `toggle` action based on what you provide in the settings argument. + * This function will automatically figure out whether you want a `click`, + * `toggle` or 'link' action based on what you provide in the settings argument. * Below is a summary of these settings: * - * Settings for 'click' type actions: + * Settings for 'click' and 'link' type actions: * - `icon` (string): Class to use for icon, i.e. 'fa-cog'. * - `callback` (function): Callback function when action icon is clicked. - * - `tooltip` (string): Optional tooltip to describe what the action does. - * + * - `event` (string): Event name to trigger in JS when clicked ('click' actions only). + * - `tooltip` (string): Optional tooltip to describe what the action does. + * - `href` (string): URL to open ('link' actions only). + * - `modal` (bool): Specify true to make a link open in a modal window ('link' actions only). + * (requires that /wire/modules/JqueryUI/JqueryUI/modal.js is loaded) + * * Settings for 'toggle' (on/off) type actions: * - `on` (bool): True if action is currently ON, false if not (default=false). * - `onIcon` (string): Icon class when action is ON and clicking would toggle OFF, i.e. 'fa-toggle-off'. * - `onCallback` (function): Callback function when action is clicked to turn ON. + * - `onEvent` (string): JS event name to trigger when toggled ON (alternative to onCallback). * - `onTooltip` (string): Optional tooltip text for when action is ON. * - `offIcon` (string): Icon class when action is OFF and clicking would toggle ON, i.e. 'fa-toggle-on'. * - `offCallback` (function): Callback function when action is clicked to turn OFF. + * - `offEvent` (string): JS event name to trigger when toggled OFF (alternative to offCallback). * - `offTooltip` (string): Optional tooltip text for when action is OFF. * - Note that if 'offIcon' or 'offTooltip' are omitted, they will use their 'on' equivalent. * @@ -1140,43 +1146,60 @@ var Inputfields = { icon: '', callback: null, tooltip: '', + event: '', + // for link actions (addable from PHP side only): + href: '', + target: '', + modal: false, // for toggle actions: on: false, onIcon: '', onCallback: null, onTooltip: '', + onEvent: '', offIcon: '', offCallback: null, offTooltip: '', + offEvent: '', // for optional mouseover state: overIcon: '', overCallback: null, + overEvent: '', cursor: '', // other name: '', iconTag: '', + // icon element if already present + $iconElement: null, }; settings = $.extend(defaults, settings); var $header = this.header($inputfield); - var $icon = $(settings.iconTag); + var $icon = settings.$iconElement ? settings.$iconElement : $(settings.iconTag); var cls, tooltip, actionType = 'click'; var useFA = $icon.hasClass('fa') function fa(cls) { return (useFA && cls.indexOf('fa-') !== 0 ? 'fa-' + cls : cls); } - - $icon.addClass('InputfieldHeaderAction') + + $icon.addClass('InputfieldHeaderAction').removeClass('_InputfieldHeaderAction') .css({ float: 'right', lineHeight: $header.css('line-height') }); if(settings.onIcon.length) actionType = 'toggle'; + if(settings.href.length) actionType = 'link'; if(settings.name.length) $icon.addClass('InputfieldHeaderAction-' + settings.name); if(settings.cursor.length) $icon.css('cursor', settings.cursor); + if(actionType === 'link') { + if(!settings.tooltip.length) { + settings.tooltip = settings.href; + } + } + if(actionType === 'toggle') { - if(!settings.offIcon.length) settings.offIcon= settings.onIcon; + if(!settings.offIcon.length) settings.offIcon = settings.onIcon; if(!settings.offTooltip.length) settings.offTooltip = settings.onTooltip; if(settings.on) { $icon.addClass(fa(settings.onIcon)).data('on', true); @@ -1194,31 +1217,41 @@ var Inputfields = { if(tooltip.length) $icon.attr('title', tooltip); $icon.on('click', function() { - if(actionType === 'toggle') { + if(actionType === 'link') { + if(settings.modal) { + pwModalWindow(settings.href); + } else { + window.location.href = settings.href; + } + } else if(actionType === 'toggle') { if($icon.data('on')) { $icon.removeClass(fa(settings.onIcon)).addClass(fa(settings.offIcon)) if(settings.offTooltip.length) $icon.attr('title', settings.offTooltip); if(settings.offCallback) settings.offCallback($icon); $icon.data('on', false); + if(settings.offEvent) $icon.trigger(settings.offEvent, [ $icon ]); } else { $icon.removeClass(fa(settings.offIcon)).addClass(fa(settings.onIcon)); if(settings.onTooltip.length) $icon.attr('title', settings.onTooltip); if(settings.onCallback) settings.onCallback($icon); $icon.data('on', true); + if(settings.onEvent) $icon.trigger(settings.onEvent, [ $icon ]); } } else { if(settings.callback) settings.callback($icon); + if(settings.event) settings.trigger(settings.event, [ $icon ]); } return false; }); - if(settings.overIcon.length || settings.overCallback) { + if(settings.overIcon.length || settings.overCallback || settings.overEvent) { $icon.on('mouseover', function() { if(settings.overIcon.length) { var cls = $icon.data('on') ? settings.onIcon : settings.offIcon; $icon.removeClass(fa(cls)).addClass(fa(settings.overIcon)); } if(settings.overCallback) settings.overCallback($icon); + if(settings.overEvent) $icon.trigger(settings.overEvent, [ $icon ]); }); if(settings.overIcon.length) { $icon.on('mouseout', function() { @@ -1227,8 +1260,9 @@ var Inputfields = { }); } } - + $header.append($icon); + if($icon.prop('hidden')) $icon.prop('hidden', false); return $icon; }, @@ -2648,6 +2682,16 @@ function InputfieldRequirements($target) { }); } +function InputfieldHeaderActions($target) { + jQuery('._InputfieldHeaderAction', $target).each(function() { + var $i = $(this); + var data = JSON.parse($i.attr('data-action')); + data.$iconElement = $i; + var $inputfield = $i.closest('.Inputfield'); + Inputfields.addHeaderAction($inputfield, data); + }); +} + /** * Event handler called when 'reload' event is triggered on an Inputfield * @@ -2709,6 +2753,7 @@ function InputfieldsInit($target) { InputfieldStates($target); InputfieldDependencies($target); InputfieldRequirements($target); + InputfieldHeaderActions($target); setTimeout(function() { InputfieldColumnWidths(); }, 100); } @@ -2740,8 +2785,10 @@ jQuery(document).ready(function($) { setTimeout(InputfieldWindowResizeActions2, 500); return true; }); - - InputfieldRequirements($('.InputfieldForm')); + + var $form = $('.InputfieldForm'); + InputfieldRequirements($form); + InputfieldHeaderActions($form); $(document).on('reload', '.Inputfield', InputfieldReloadEvent); diff --git a/wire/templates-admin/scripts/inputfields.min.js b/wire/templates-admin/scripts/inputfields.min.js index 60c345ff..1648bf73 100644 --- a/wire/templates-admin/scripts/inputfields.min.js +++ b/wire/templates-admin/scripts/inputfields.min.js @@ -1 +1 @@ -var Inputfields={debug:false,processingIfs:false,toggling:false,toggleBehavior:0,defaultDuration:0,init:function($target){InputfieldsInit($target)},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){$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(){if($inputfield.css("overflow")=="hidden")$inputfield.css("overflow","");$toggleIcon.toggleClass($toggleIcon.attr("data-to"));$inputfield.removeClass("InputfieldStateToggling");Inputfields.redraw($inputfield,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()}if(open&&!$inputfield.is(":visible")){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)}}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&&!isCollapsed){completed();return $inputfield}if(!open&&isCollapsed){completed();return $inputfield}if(isCollapsed&&isAjax&&!$inputfield.hasClass("InputfieldStateWasCollapsed")){$toggleIcon.trigger("click");return $inputfield}if(!this.toggling)this.toggling=$inputfield.prop("id");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},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:function($inputfield,duration,callback){return this.toggle($inputfield,true,duration)},close:function($inputfield,duration,callback){return this.toggle($inputfield,false,duration)},show:function($inputfield){$inputfield=this.inputfield($inputfield);if(!this.hidden($inputfield))return $inputfield;$inputfield.removeClass("InputfieldStateHidden").show();jQuery(document).trigger("showInputfield",$inputfield);this.redraw(null,50);return $inputfield},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: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)}else{InputfieldColumnWidths()}jQuery(window).trigger("resize")},delay)},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: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")){showOnly=true}if(showOnly){$input=jQuery([])}else{$input=$inputfield.find(":input:visible:enabled:not(button):not(.InputfieldNoFocus)").first();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)){Inputfields.find($inputfield,false,callback)}return $inputfield},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;if($inputfield.hasClass("InputfieldStateCollapsed")||!$inputfield.is(":visible")){var hasNoFocus=$inputfield.hasClass("InputfieldNoFocus");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)});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};jQuery("html, body").animate(properties,options)}},100);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=1e3}$inputfield.addClass(cls);if(duration>0){setTimeout(function(){$inputfield.removeClass(cls)},duration)}return $inputfield},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;return inView},columnWidth:function($inputfield,value){$inputfield=this.inputfield($inputfield);if(!$inputfield.length)return 0;if(typeof value!="undefined"&&value){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")){$inputfield.attr("data-original-width",w)}$inputfield.attr("data-colwidth",value);$inputfield.trigger("columnWidth",value)}return $inputfield}else{if(!$inputfield.hasClass("InputfieldColumnWidth"))return 100;var pct=$inputfield.attr("data-colwidth");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)}if(!$inputfield.attr("data-original-width")){$inputfield.attr("data-original-width",pct)}if(pct<1)pct=100;return pct}},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=$("");$spinner.attr("id",id)}$spinner.css({float:"right",marginRight:"30px",marginTop:"3px"});$header.append($spinner.hide());$spinner.fadeIn()},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()})},hidden:function($inputfield){$inputfield=this.inputfield($inputfield);return $inputfield.hasClass("InputfieldStateHidden")},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}},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");if(typeof icon==="string"){if(icon.indexOf("fa-")!==0)icon="fa-"+icon;$icon.attr("class","fa fa-fw "+icon)}if($prevIcon.length){$prevIcon.replaceWith($icon)}else{$header.prepend(" ").prepend($icon)}return $icon},hashAction:function(hash){var pos,action,name;if(hash.indexOf("#")===0)hash=hash.substring(1);pos=hash.indexOf("-");if(pos<3||hash.length99)return jQuery([]);var $col=this.getFirstInRow($inputfield);var sel="";while($col.length){if($col.hasClass("InputfieldStateHidden")&&!andHidden){}else if(andSelf||$col.prop("id")!==$inputfield.prop("id")){sel+=(sel.length?",":"")+"#"+$col.prop("id")}$col=$col.next(".InputfieldColumnWidth");if($col.hasClass("InputfieldColumnWidthFirst"))break}return sel.length?jQuery(sel):$inputfield},getAllInRow:function($inputfield,andHidden){if(typeof andHidden==="undefined")andHidden=false;return this.getSiblingsInRow($inputfield,true,andHidden)},addHeaderAction:function($inputfield,settings){var $=jQuery;var defaults={icon:"",callback:null,tooltip:"",on:false,onIcon:"",onCallback:null,onTooltip:"",offIcon:"",offCallback:null,offTooltip:"",overIcon:"",overCallback:null,cursor:"",name:"",iconTag:''};settings=$.extend(defaults,settings);var $header=this.header($inputfield);var $icon=$(settings.iconTag);var cls,tooltip,actionType="click";var useFA=$icon.hasClass("fa");function fa(cls){return useFA&&cls.indexOf("fa-")!==0?"fa-"+cls:cls}$icon.addClass("InputfieldHeaderAction").css({float:"right",lineHeight:$header.css("line-height")});if(settings.onIcon.length)actionType="toggle";if(settings.name.length)$icon.addClass("InputfieldHeaderAction-"+settings.name);if(settings.cursor.length)$icon.css("cursor",settings.cursor);if(actionType==="toggle"){if(!settings.offIcon.length)settings.offIcon=settings.onIcon;if(!settings.offTooltip.length)settings.offTooltip=settings.onTooltip;if(settings.on){$icon.addClass(fa(settings.onIcon)).data("on",true);tooltip=settings.onTooltip}else{$icon.addClass(fa(settings.offIcon)).data("on",false);tooltip=settings.offTooltip}}else{$icon.addClass(fa(settings.icon)).data("on",true);settings.onIcon=settings.icon;tooltip=settings.tooltip}if(tooltip.length)$icon.attr("title",tooltip);$icon.on("click",function(){if(actionType==="toggle"){if($icon.data("on")){$icon.removeClass(fa(settings.onIcon)).addClass(fa(settings.offIcon));if(settings.offTooltip.length)$icon.attr("title",settings.offTooltip);if(settings.offCallback)settings.offCallback($icon);$icon.data("on",false)}else{$icon.removeClass(fa(settings.offIcon)).addClass(fa(settings.onIcon));if(settings.onTooltip.length)$icon.attr("title",settings.onTooltip);if(settings.onCallback)settings.onCallback($icon);$icon.data("on",true)}}else{if(settings.callback)settings.callback($icon)}return false});if(settings.overIcon.length||settings.overCallback){$icon.on("mouseover",function(){if(settings.overIcon.length){var cls=$icon.data("on")?settings.onIcon:settings.offIcon;$icon.removeClass(fa(cls)).addClass(fa(settings.overIcon))}if(settings.overCallback)settings.overCallback($icon)});if(settings.overIcon.length){$icon.on("mouseout",function(){var cls=$icon.data("on")?settings.onIcon:settings.offIcon;$icon.removeClass(fa(settings.overIcon)).addClass(fa(cls))})}}$header.append($icon);return $icon},getHeaderAction:function($inputfield,name){var $header=this.header($inputfield);var cls=".InputfieldHeaderAction";var $a=$header.find(cls+"-"+name);if(!$a.length)$a=$header.find(cls+"."+name);if(!$a.length)$a=$header.find(cls+".fa-"+name);return $a}};function consoleLog(note){if(Inputfields.debug)console.log(note)}function InputfieldDependencies($target){var $=jQuery;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}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}function trimParseValue(value){return parseValue(trimValue(value))}function extractFieldAndSubfield(field){var subfield="";var dot=field.indexOf(".");if(dot>0){subfield=field.substring(dot+1);field=field.substring(0,dot)}return{field:field,subfield:subfield}}function parseValue(str,str2){if(typeof str==="undefined")return"";str=str.toString().trim();if(str.length>0){if(/^-?\d[\d.]*$/.test(str)){}else{return str}}if(str.length==0){var t=typeof str2;if(t!="undefined"){if(t=="integer")return 0;if(t=="float")return 0;return str}else{return str}}var dot1=str.indexOf(".");var dot2=str.lastIndexOf(".");if(dot1==-1&&/^-?\d+$/.test(str)){return parseInt(str)}if(dot2>-1&&dot1!=dot2){return str}if(/^-?[\d.]+$/.test(str)){return parseFloat(str)}return str}function matchValue(field,operator,value,conditionValue,$inputfield){var matched=0;if(operator==="="||operator==="!="){if($inputfield.attr("class").indexOf("InputfieldPage")>-1){var v=trimValue(value.toString()+conditionValue.toString());if(v==="0"||v==="")value=conditionValue=""}}switch(operator){case"=":if(value===conditionValue)matched++;break;case"!=":if(value!==conditionValue)matched++;break;case">":if(value>conditionValue)matched++;break;case"<":if(value=":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}function getCheckboxFieldAndValue(condition,conditionField,conditionSubfield){var $field=null;var value;consoleLog("getCheckboxFieldAndValue(see-next-line, "+conditionField+", "+conditionSubfield+")");consoleLog(condition);if(conditionSubfield===""&&trimValue(condition.value)===""){conditionSubfield="count"}if(conditionSubfield=="count"||conditionSubfield=="count-checkbox"){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}consoleLog("Using checkbox value or label comparison option");value=[];for(var i=0;i0)consoleLog("Subfield: "+condition.subfield);consoleLog("Operator: "+condition.operator);consoleLog("Required value: "+condition.value)}var matched=0;for(var fn=0;fn-1&&value.indexOf(",")>-1&&value.match(/^[,0-9]+$/)){values=value.split(",")}else{values[0]=value}var numMatchesRequired=1;if(condition.operator=="!=")numMatchesRequired=values.length*condition.values.length;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"}}for(var n=0;n=numMatchesRequired)break}consoleLog("----");if(condition.type=="show"){if(matched>=numMatchesRequired){}else{show=false}}else if(condition.type=="required"){if(matched>=numMatchesRequired){requiredMatches++}else{notRequiredMatches++}}}var required=requiredMatches>0&¬RequiredMatches==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.');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")}else if(!required&¬RequiredMatches>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.processingIfs=false}function setupConditions(conditionType,conditions,$fieldToShow){var selector=$fieldToShow.attr("data-"+conditionType+"-if");if(!selector||selector.length<1){return conditions}selector=$("
").html(selector).text();consoleLog("-------------------------------------------------------------------");consoleLog('Analyzing "'+conditionType+'" selector: '+selector);var fieldNameToShow=$fieldToShow.attr("id").replace("wrap_Inputfield_","");var parts=selector.match(/(^|,)([^,]+)/g);for(var n=0;n=|<|>|%=)([^,]+),?$/);if(!match)continue;var field=match[1];var operator=match[2];var value=match[3];var subfield="";var fields=[];var values=[];if(field.indexOf("forpage.")===0){field=field.replace("forpage.","").replace(/\_repeater\d+/g,"")}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(Inputfields.debug){consoleLog("Field: "+field);if(subfield.length)consoleLog("Subfield: "+subfield);consoleLog("Operator: "+operator);consoleLog("value: "+value)}if(value.indexOf("|")>-1){consoleLog("OR value dependency: "+value);values=value.split("|");for(var i=0;i> "+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){}else{consoleLog("Adjusting "+$item.attr("id")+" from "+h+" to "+maxColHeight);var $spacer=$("
");$container.append($spacer);$spacer.height(pad)}}function updateInputfieldRow($firstItem){var $items=$firstItem.nextUntil(".InputfieldColumnWidthFirst",".InputfieldColumnWidth:not(.InputfieldStateHidden)");var firstItemHidden=$firstItem.hasClass("InputfieldStateHidden");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--;$leadItem=$items.eq(0)}else{$leadItem=$firstItem}if(useHeights){$leadItem.find(".maxColHeightSpacer").remove();$items.find(".maxColHeightSpacer").remove()}var maxRowWidth=100-numItems*colspacing;var maxColHeight=useHeights?getHeight($leadItem):0;$items.removeClass("InputfieldColumnWidthFirstTmp");$items.each(function(){$item=$(this);itemWidth=getWidth($item);rowWidth+=itemWidth;if(useHeights){var h=getHeight($item);if(h>maxColHeight)maxColHeight=h}});if(useHeights){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(rowWidth0&&itemWidthmaxRowWidth){consoleLog("Reduce width of row because rowWidth > maxRowWidth ("+rowWidth+" > "+maxRowWidth+")");if(!firstItemHidden)$items=$firstItem.add($items);rowWidth=0;$items.each(function(){$item=$(this);itemWidth=getOriginalWidth($item);if(itemWidth>0)setWidth($item,itemWidth,false);rowWidth+=itemWidth});leftoverWidth=maxRowWidth-rowWidth;itemWidth+=leftoverWidth;originalWidth=getOriginalWidth($item);if(originalWidth>0&&itemWidth