From b07d7341eb03678bb834d4d85c44e22254e87c55 Mon Sep 17 00:00:00 2001 From: Ryan Cramer Date: Tue, 11 Sep 2018 11:31:34 -0400 Subject: [PATCH] Improvements and refactorings to inputfields.js, plus add processwire/processwire-requests#224, and addition of new public API methods: InputfieldFocus($inputfield) which finds, opens and focuses an Inputfield (making it visible) regardless of where it is in the interface; InputfieldOpen($inputfield) which opens a collapsed Inputfield; and InputfieldClose($inputfield) which does the opposite. Thanks to @Toutouwai for the feature request and example code that got this started. --- wire/templates-admin/scripts/inputfields.js | 334 ++++++++++++++---- .../scripts/inputfields.min.js | 2 +- 2 files changed, 265 insertions(+), 71 deletions(-) diff --git a/wire/templates-admin/scripts/inputfields.js b/wire/templates-admin/scripts/inputfields.js index 1278d856..3e1724ee 100644 --- a/wire/templates-admin/scripts/inputfields.js +++ b/wire/templates-admin/scripts/inputfields.js @@ -33,6 +33,7 @@ var InputfieldDependenciesProcessing = false; * */ function InputfieldDependencies($target) { + var $ = jQuery; if(InputfieldDependenciesProcessing) return; @@ -644,6 +645,7 @@ function InputfieldDependencies($target) { function InputfieldColumnWidths($target) { + var $ = jQuery; var hasTarget = true; if(typeof $target == "undefined") { hasTarget = false; @@ -899,6 +901,7 @@ function InputfieldColumnWidths($target) { * */ 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"; @@ -918,9 +921,196 @@ function InputfieldFormBeforeUnloadEvent(e) { 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. + * + * @param $inputfield + * + */ +function InputfieldFocus($inputfield) { + + if(!$inputfield.hasClass('Inputfield')) $inputfield = $inputfield.closest('.Inputfield'); + if(!$inputfield.length) return; + + if($inputfield.hasClass('InputfieldStateCollapsed') || !$inputfield.is(':visible')) { + InputfieldToggle($inputfield, true, 0, function($in, open, duration) { + InputfieldFocus($in); + }); + return; + } + + var focused = false; + if($inputfield.hasClass('InputfieldNoFocus')) { + // does not support focusing + } else { + var $input = $inputfield.find(":input:visible:enabled:not(button):not(.InputfieldNoFocus):first"); + if($input.length) { + if($input.css('position') == 'absolute' || $input.is('button')) { + // do not attempt to focus absolute positioned inputs or button elements + } else { + var t = $input.attr('type'); + if($input.is('textarea') || t == 'text' || t == 'email' || t == 'url' || t == 'number') { + $input.focus(); + focused = true; + } + } + } + } + + if(!focused) { + // item could not be directly focused, see if we can make make it visible + 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)); + if(!inView) setTimeout(function() { + // if the browser couldn't focus the inputfield, at least show where it is + jQuery('html, body').animate({ + scrollTop: $inputfield.offset().top - 10 + }, 100); + }, 100); + } +} + +/** + * 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 for opposite of current state + * @param duration How many milliseconds for animation? (default=100) + * @param completedCallback Optional function to call upon completion, given $inputfield as argument + * @returns {boolean} + * + */ +function InputfieldToggle($inputfield, open, duration, completedCallback) { + + if(!$inputfield.length) return; + if(!$inputfield.hasClass('Inputfield')) $inputfield = $inputfield.closest('.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"); + + if($inputfield.hasClass('InputfieldAjaxLoading')) return false; + if($inputfield.hasClass('InputfieldStateToggling')) return false; + + if(typeof open == "undefined" || open === null) var open = isCollapsed; + if(typeof duration == "undefined") var duration = 100; + + function completed() { + if(typeof completedCallback != "undefined") completedCallback($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'); + setTimeout('InputfieldColumnWidths()', 500); + completed(); + } + + function opened() { + $inputfield.trigger('opened'); + if($inputfield.hasClass('InputfieldColumnWidth')) { + $inputfield.children('.InputfieldContent').show(); + } + if(!$inputfield.hasClass('InputfieldNoFocus')) InputfieldFocus($inputfield); + toggled(); + } + + function closed() { + if($inputfield.css('overflow') == 'hidden') $inputfield.css('overflow', ''); + $inputfield.trigger('closed'); + 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.click(); }, 25); + } + } + // inputfield is not visible likely due to parents being hidden + var $collapsedParent = $inputfield.closest('.InputfieldStateCollapsed'); + if($collapsedParent.length) { + InputfieldToggle($collapsedParent, true, duration, function($in) { + InputfieldToggle($in, true, duration, completedCallback); + }); + // InputfieldToggle($collapsedParent, true, 0); + } + } + + // if open requested and inputfield already open, no action is needed + if(open && !isCollapsed) { + completed(); + return; + } + + // if close requested and inputfield already closed, no action is needed + if(!open && isCollapsed) { + completed(); + return; + } + + // if ajax loaded, force InputfieldStates() click handler to open this one + if(isCollapsed && ($inputfield.hasClass('collapsed10') || $inputfield.hasClass('collapsed11'))) { + $toggleIcon.click(); + return; + } + + // handle either open or close + if(open && isCollapsed) { + $inputfield.addClass('InputfieldStateToggling').trigger('openReady'); + $inputfield.toggleClass('InputfieldStateCollapsed', duration, opened); + } else if(!open && !isCollapsed) { + $inputfield.addClass('InputfieldStateToggling').trigger('closeReady'); + $inputfield.toggleClass('InputfieldStateCollapsed', duration, closed); + } +} + +/** + * Open a collapsed Inputfield + * + * @param $inputfield + * @param duration Optional number of milliseconds for animation or 0 for none (default=100) + * + */ +function InputfieldOpen($inputfield, duration) { + InputfieldToggle($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) { + InputfieldToggle($inputfield, false, duration); +} + /***************************************************************************************************** * Setup the toggles for Inputfields and the animations that occur between opening and closing - * + * */ function InputfieldStates($target) { @@ -997,6 +1187,7 @@ function InputfieldStates($target) { if($inputfields.length) { $inputfields.trigger('reloaded', [ 'InputfieldAjaxLoad' ]); InputfieldStates($li); + InputfieldRequirements($li); InputfieldColumnWidths(); } else { $li.trigger('reloaded', [ 'InputfieldAjaxLoad' ]); @@ -1064,8 +1255,10 @@ function InputfieldStates($target) { var isCollapsed = $li.hasClass("InputfieldStateCollapsed"); var wasCollapsed = $li.hasClass("InputfieldStateWasCollapsed"); var duration = 100; - + + 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; @@ -1077,31 +1270,9 @@ function InputfieldStates($target) { if(isCollapsed || wasCollapsed || isIcon) { $li.addClass('InputfieldStateWasCollapsed'); // this class only used here - $li.trigger(isCollapsed ? 'openReady' : 'closeReady'); - $li.toggleClass('InputfieldStateCollapsed', duration, function() { - // jQuery seems to add overflow:hidden, and this interferes with outline CSS property on Inputfields - if($li.css('overflow') == 'hidden') $li.css('overflow', ''); - if(isCollapsed) { - $li.trigger('opened'); - if($li.hasClass('InputfieldColumnWidth')) $li.children('.InputfieldContent').show(); - if($li.hasClass('InputfieldNoFocus')) return; - var $input = $li.find(":input:visible"); - if($input.length == 1 && !$input.is('button')) { - if($input.css('position') != 'absolute') { - var t = $input.attr('type'); - if($input.is('textarea') || t == 'text' || t == 'email' || t == 'url' || t == 'number') { - $input.focus(); - } - } - } - } else { - $li.trigger('closed'); - if($li.hasClass('InputfieldColumnWidth')) $li.children('.InputfieldContent').hide(); - } - }); - $icon.toggleClass($icon.attr('data-to')); // data-to=classes to toggle - setTimeout('InputfieldColumnWidths()', 500); + InputfieldToggle($li, null, duration); } 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'); @@ -1110,7 +1281,7 @@ function InputfieldStates($target) { $icon.css('color', color1); }); } - if(!$li.hasClass('InputfieldNoFocus')) $li.find(":input:visible:eq(0)").focus(); + InputfieldFocus($li); } return false; @@ -1183,6 +1354,7 @@ function overflowAdjustments() { * */ function InputfieldIntentions() { + var $ = jQuery; // adjustments for unintended actions, like hitting enter in a text field in a multi-button form $(".InputfieldForm").each(function() { @@ -1250,7 +1422,7 @@ function 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 - $(".Inputfield").trigger('resized'); + jQuery(".Inputfield").trigger('resized'); } function InputfieldWindowResizeActions2() { @@ -1259,6 +1431,58 @@ function InputfieldWindowResizeActions2() { 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); + InputfieldFocus(jQuery(this)); + }); +} + +/** + * Event handler called when 'reload' event is triggered on an Inputfield + * + */ +function InputfieldReloadEvent(event, extraData) { + console.log('InputfieldReloadEvent ' + $(this).attr('id')); + var $t = $(this); + var $form = $t.closest('form'); + var fieldName = $t.attr('id').replace('wrap_Inputfield_', ''); + var url = $form.attr('action'); + if(fieldName.indexOf('_repeater') > 0) { + var pageID = $t.closest('.InputfieldRepeaterItem').attr('data-page'); + url = url.replace(/\?id=\d+/, '?id=' + pageID); + fieldName = fieldName.replace(/_repeater\d+$/, ''); + } + url += url.indexOf('?') > -1 ? '&' : '?'; + url += 'field=' + fieldName + '&reloadInputfieldAjax=' + fieldName; + 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 = 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); + } + } + $t.children(".InputfieldContent").html($content.html()); + // if(typeof jQuery.ui != 'undefined') $t.effect("highlight", 1000); + $t.trigger('reloaded', [ 'reload' ]); + }); + event.stopPropagation(); +} + /** * Function for external initialization of new Inputfields content (perhaps ajax loaded) * @@ -1266,6 +1490,7 @@ function InputfieldWindowResizeActions2() { function InputfieldsInit($target) { InputfieldStates($target); InputfieldDependencies($target); + InputfieldRequirements($target); setTimeout(function() { InputfieldColumnWidths(); }, 100); } @@ -1274,7 +1499,9 @@ function InputfieldsInit($target) { jQuery(document).ready(function($) { InputfieldStates(); + InputfieldDependencies($(".InputfieldForm:not(.InputfieldFormNoDependencies)")); + InputfieldIntentions(); setTimeout(function() { InputfieldColumnWidths(); }, 100); @@ -1285,52 +1512,20 @@ jQuery(document).ready(function($) { setTimeout('InputfieldWindowResizeActions1()', 1000); setTimeout('InputfieldWindowResizeActions2()', 2000); }; + + $(window).resize(windowResized); - var tabClicked = function() { + $("ul.WireTabs > li > a").click(function() { if(InputfieldWindowResizeQueued) return; InputfieldWindowResizeQueued = true; setTimeout('InputfieldWindowResizeActions1()', 250); - setTimeout('InputfieldWindowResizeActions2()', 500); - return true; - }; + setTimeout('InputfieldWindowResizeActions2()', 500); + return true; + }); + + InputfieldRequirements($('.InputfieldForm')); - $(window).resize(windowResized); - $("ul.WireTabs > li > a").click(tabClicked); - - $(document).on('reload', '.Inputfield', function(event, extraData) { - var $t = $(this); - var $form = $t.closest('form'); - var fieldName = $t.attr('id').replace('wrap_Inputfield_', ''); - var url = $form.attr('action'); - if(fieldName.indexOf('_repeater') > 0) { - var pageID = $t.closest('.InputfieldRepeaterItem').attr('data-page'); - url = url.replace(/\?id=\d+/, '?id=' + pageID); - fieldName = fieldName.replace(/_repeater\d+$/, ''); - } - url += url.indexOf('?') > -1 ? '&' : '?'; - url += 'field=' + fieldName + '&reloadInputfieldAjax=' + fieldName; - 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 = $(data).find("#" + id).children(".InputfieldContent"); - if(!$content.length && id.indexOf('_repeater') > -1) { - id = 'wrap_Inputfield_' + fieldName; - $content = $(data).find("#" + id).children(".InputfieldContent"); - if(!$content.length) { - console.log("Unable to find #" + $t.attr('id') + " in response from " + url); - } - } - $t.children(".InputfieldContent").html($content.html()); - // if(typeof jQuery.ui != 'undefined') $t.effect("highlight", 1000); - $t.trigger('reloaded', [ 'reload' ]); - }); - event.stopPropagation(); - }); + $(document).on('reload', '.Inputfield', InputfieldReloadEvent); /* // for testing: @@ -1338,5 +1533,4 @@ jQuery(document).ready(function($) { console.log($(this).attr('id')); }); */ - }); diff --git a/wire/templates-admin/scripts/inputfields.min.js b/wire/templates-admin/scripts/inputfields.min.js index ba9f761c..974afa6c 100644 --- a/wire/templates-admin/scripts/inputfields.min.js +++ b/wire/templates-admin/scripts/inputfields.min.js @@ -1 +1 @@ -var InputfieldDebugMode=false;function consoleLog(a){if(InputfieldDebugMode){console.log(a)}}var InputfieldDependenciesProcessing=false;function InputfieldDependencies(d){if(InputfieldDependenciesProcessing){return}if(typeof d=="undefined"){var d=$(".InputfieldForm:not(.InputfieldFormNoDependencies)")}else{if(d.hasClass("InputfieldForm")){if(d.hasClass("InputfieldFormNoDependencies")){return}}else{if(d.closest(".InputfieldFormNoDependencies").length>0){return}}}function h(l){l=jQuery.trim(l);var m=l.substring(0,1);var k=l.substring(l.length-1,l.length);if((m=='"'||m=="'")&&m==k){l=l.substring(1,l.length-1)}return l}function i(k){return g(h(k))}function b(m){var l="";var k=m.indexOf(".");if(k>0){l=m.substring(k+1);m=m.substring(0,k)}return{field:m,subfield:l}}function g(n,l){n=jQuery.trim(n);if(n.length>0&&!jQuery.isNumeric(n)){return n}if(n.length==0){var k=typeof l;if(k!="undefined"){if(k=="integer"){return 0}if(k=="float"){return 0}return n}else{return n}}var o=n.indexOf(".");var m=n.lastIndexOf(".");if(o==-1&&/^-?\d+$/.test(n)){return parseInt(n)}if(m>-1&&o!=m){return n}if(/^-?[\d.]+$/.test(n)){return parseFloat(n)}return n}function c(n,l,m,o){var k=0;switch(l){case"=":if(m==o){k++}break;case"!=":if(m!=o){k++}break;case">":if(m>o){k++}break;case"<":if(m=":if(m>=o){k++}break;case"<=":if(m<=o){k++}break;case"*=":case"%=":if(m.indexOf(o)>-1){k++}break}consoleLog("Field "+n+" - Current value: "+m);consoleLog("Field "+n+" - Matched? "+(k>0?"YES":"NO"));return k}function e(p,s,m){var w=null;var z;consoleLog("getCheckboxFieldAndValue(see-next-line, "+s+", "+m+")");consoleLog(p);if(m=="count"||m=="count-checkbox"){consoleLog("Using count checkbox condition");w=$("#wrap_Inputfield_"+s+" :input");if(w.length){z=$("#wrap_Inputfield_"+s+" :checked").length;p.subfield="count-checkbox";return{field:w,value:z,condition:p}}return null}consoleLog("Using checkbox value or label comparison option");z=[];for(var q=0;q0){consoleLog("Subfield: "+E.subfield)}consoleLog("Operator: "+E.operator);consoleLog("Required value: "+E.value)}var s=0;for(var q=0;q=G){break}}consoleLog("----");if(E.type=="show"){if(s>=G){}else{J=false}}else{if(E.type=="required"){if(s>0){w++}else{u++}}}}var t=w>0&&u==0;if(J){consoleLog('Determined that field "'+C+'" should be visible.');if(y.is(".InputfieldStateHidden")){y.removeClass("InputfieldStateHidden").show();$(document).trigger("showInputfield",y);o++;consoleLog("Field is now visible.")}else{consoleLog("Field is already visible.")}}else{consoleLog('Determined that field "'+C+'" should be hidden.');if(!y.is(".InputfieldStateHidden")){y.addClass("InputfieldStateHidden").hide();$(document).trigger("hideInputfield",y);consoleLog("Field is now hidden.");o++}else{consoleLog("Field is already hidden.")}if(t){consoleLog("Field is required but cancelling that since it is not visible.");t=false}}if(t&&w>0){consoleLog('Determined that field "'+C+'" should be required.');y.addClass("InputfieldStateRequired").find(":input:visible[type!=hidden]").addClass("required")}else{if(!t&&u>0){consoleLog('Determined that field "'+C+'" should not be required.');y.removeClass("InputfieldStateRequired").find(":input.required").removeClass("required")}}if(o>0){consoleLog(o+" visibility changes were made.");InputfieldColumnWidths();$(window).resize()}InputfieldDependenciesProcessing=false}function a(z,m,s){var A=s.attr("data-"+z+"-if");if(!A||A.length<1){return m}A=$("
").html(A).text();consoleLog("-------------------------------------------------------------------");consoleLog('Analyzing "'+z+'" selector: '+A);var v=A.match(/(^|,)([^,]+)/g);for(var w=0;w=|<|>|%=)([^,]+),?$/);if(!o){continue}var k=o[1];var q=o[2];var x=o[3];var r="";var t=[];var l=[];if(k.indexOf("|")>-1){consoleLog("OR field dependency: "+k);t=k.split("|")}else{t=[k]}var D=b(k);k=D.field;r=D.subfield;if(InputfieldDebugMode){consoleLog("Field: "+k);if(r.length){consoleLog("Subfield: "+r)}consoleLog("Operator: "+q);consoleLog("value: "+x)}if(x.indexOf("|")>-1){consoleLog("OR value dependency: "+x);l=x.split("|");for(var B=0;B> "+q+" ("+o+")");if(o==q){return}if(n.hasClass("InputfieldStateCollapsed")){return}var r=q-o;if(r<0){r=0}var s=n.children(".InputfieldContent, .ui-widget-content");if(r==0){}else{consoleLog("Adjusting "+n.attr("id")+" from "+o+" to "+q);var p=$("
");s.append(p);s.hide();p.height(r);s.show()}}function b(r){var v=r.nextUntil(".InputfieldColumnWidthFirst",".InputfieldColumnWidth:not(.InputfieldStateHidden)");var q=r.is(".InputfieldStateHidden")?0:i(r);var y=r.is(".InputfieldStateHidden")?null:r;var w=y==null?0:q;var x=v.length;if(r.is(".InputfieldStateHidden")){x--;var s=v.eq(0)}else{var s=r}if(m){s.find(".maxColHeightSpacer").remove();v.find(".maxColHeightSpacer").remove()}var o=100-(x*l);var n=m?e(s):0;v.removeClass("InputfieldColumnWidthFirstTmp");v.each(function(){y=$(this);w=i(y);q+=w;if(m){var z=e(y);if(z>n){n=z}}});if(m){if(InputfieldDebugMode){var t=s.find("label").text();consoleLog("maxColHeight: "+t+" = "+n)}if(n>0){h(s,n);v.each(function(){h($(this),n)})}}if(q0&&wo){consoleLog("Reduce width of row because rowWidth > maxRowWidth ("+q+" > "+o+")");if(!r.is(".InputfieldStateHidden")){v=r.add(v)}q=0;v.each(function(){y=$(this);w=k(y);if(w>0){f(y,w,false)}q+=w});var u=o-q;w+=u;var p=k(y);if(p>0&&w