From 397bb0b3820c6c43878860e4f2294ce284ed45c4 Mon Sep 17 00:00:00 2001 From: Ryan Cramer Date: Fri, 10 May 2024 11:58:56 -0400 Subject: [PATCH] Lots of updates to the Inputfield Javascript API (inputfields.js) with several new methods including icon() which can get or set the Inputfield icon, header() which returns the InputfieldHeader element, content() which returns the InputfieldContent element, and addHeaderAction() which lets you add custom icon actions to any Inputfield. Also updated the existing label() method to allow for setting the Inputfield label/header text (previously it could only get). The addHeaderAction() method is the most significant addition, so I'll write more about that in the weekly update. --- wire/templates-admin/scripts/inputfields.js | 320 +++++++++++++++++- .../scripts/inputfields.min.js | 2 +- 2 files changed, 309 insertions(+), 13 deletions(-) diff --git a/wire/templates-admin/scripts/inputfields.js b/wire/templates-admin/scripts/inputfields.js index 8dc28519..4acee86f 100644 --- a/wire/templates-admin/scripts/inputfields.js +++ b/wire/templates-admin/scripts/inputfields.js @@ -29,11 +29,19 @@ * - 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.label(f, 'label text'): Set the label text of the given Inputfield. (3.0.239+) + * - Inputfields.icon(f): Get the $icon element if present, or blank jQuery object if not. (3.0.239+) + * - Inputfields.icon(f, 'life-ring'): Set the icon for the given Inputfield. (3.0.239+) * - 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.inputfield(f): Given a name, id or any element in an Inputfield, return the Inputfield object. + * - Inputfields.header(f): Given a name, id or any element in an Inputfield, return the InputfieldHeader object. (3.0.239+) + * - Inputfields.content(f): Given a name, id or any element in an Inputfield, return the InputfieldContent object. (3.0.239+) + * - Inputfields.addHeaderAction(f, …) Add an Inputfield header icon action. See function for details and examples. (3.0.239+) + * - Inputfields.getHeaderAction(name) Get a previously added Inputfield header icon action by name. (3.0.239+) * - 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. @@ -81,11 +89,20 @@ * - 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 elements. Hidden when collapsed. - * + * + * Children of .InputfieldHeader elements may have these classes: + * - InputfieldHeaderAction: Class for header icon actions added with the Inputfields.addHeaderAction() function. + * - toggle-icon: Assigned to icon that also works as an .InputfieldStateToggle element. + * + * Children of .InputfieldContent elements may often have these classes: + * - description: Class for description text that appears above the input element(s). + * - notes: Class for notes text that appears below the input element(s). + * - detail: Class for additional details text that appears below the input elements(s) and notes. + * - renderInputfieldAjax: Present in a wapping
when Inputfield will be ajax loaded on header click. + * * Other classes: - * - Inputfields: Class