pict-section-form 1.0.114 → 1.0.116

package/example_applications/simple_form/Simple-Form_Default_Manifest.json

@@ -20,8 +20,11 @@
 					"ITDRO = Height * Width",
 					"ITPRO = Height * Width",
 					"LoggedValues = logvalues(\"ITPRO\", ITPRO)",
-					"VisibleMarshalingGroup = SetGroupVisibility(\"Area\", \"Help\", if(Height,\"GT\", 99, \"\", 1))",
-					"VisibleMarshalingSection = SetSectionVisibility(\"Marshaling\", if(ITPRO,\"LT\", 10000, \"\", 1))"
+					"SetGroupVisibility(\"Area\", \"Help\", if(Height,\"GT\", 99, 0, 1))",
+					"SetSectionVisibility(\"Marshaling\", if(ITPRO,\"LT\", 10000, 0, 1))",
+					"ColorSectionBackground(\"Marshaling\",\"#FF00FF\", 1)",
+					"ColorGroupBackground(\"Area\", \"Help\", ContentBackgroundColor, 1)"
+					
 				],
 			"MetaTemplates":
 				[
@@ -99,6 +102,15 @@
 					"Default": "<p>To calculate the area of a rectangle, you multiply its length by its width. The length is one side of the rectangle, and the width is the adjacent side at a right angle. Since a rectangle has opposite sides that are equal and all angles are right angles, this simple multiplication gives the total space inside the rectangle, expressed in square units.</p>"
 					,"PictForm": { "InputType": "HTML", "Section":"Area", "Group":"Help" }
 				},
+			"ContentBackgroundColor":
+				{
+					"Name":"Content Background Color",
+					"Hash":"ContentBackgroundColor",
+					"DataType":"String",
+					"Default": "#FFFFEE"
+					,"PictForm": { "InputType": "Color", "Section":"Area", "Group":"Help", "Row":2 }
+				},
+
 
 
 			"DTPN":

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-form",
-    "version": "1.0.114",
+    "version": "1.0.116",
     "description": "Pict dynamic form sections",
     "main": "source/Pict-Section-Form.js",
     "directories": {
@@ -31,8 +31,8 @@
         "browser-env": "^3.3.0",
         "eslint": "^9.36.0",
         "jquery": "^3.7.1",
-        "pict": "^1.0.302",
-        "pict-application": "^1.0.27",
+        "pict": "^1.0.304",
+        "pict-application": "^1.0.29",
         "pict-service-commandlineutility": "^1.0.15",
         "quackage": "^1.0.42",
         "tui-grid": "^4.21.22",

package/source/providers/Pict-Provider-DynamicFormSolverBehaviors.js

@@ -73,8 +73,16 @@ class PictDynamicFormsSolverBehaviors extends libPictProvider
 	{
 		// Wire up the solver functions.
 		this.addSolverFunction(pExpressionParser, 'logValues', 'fable.providers.DynamicFormSolverBehaviors.logValues', 'Logs a set of values to the console and returns the last one.');
+
 		this.addSolverFunction(pExpressionParser, 'setSectionVisibility', 'fable.providers.DynamicFormSolverBehaviors.setSectionVisibility', 'Sets a sections visiblity to true or fales based on the second parameter.');
 		this.addSolverFunction(pExpressionParser, 'setGroupVisibility', 'fable.providers.DynamicFormSolverBehaviors.setGroupVisibility', 'Sets a group visiblity to true or fales based on the third parameter.');
+
+		this.addSolverFunction(pExpressionParser, 'generateHTMLHexColor', 'fable.providers.DynamicFormSolverBehaviors.generateHTMLHexColor', 'Generates a HTML hex color from three integer parameters (red, green, blue).');
+
+		this.addSolverFunction(pExpressionParser, 'colorSectionBackground', 'fable.providers.DynamicFormSolverBehaviors.colorSectionBackground', 'Colors a section background with a HTML hex color (e.g. #FF0000 for red).');
+		this.addSolverFunction(pExpressionParser, 'colorGroupBackground', 'fable.providers.DynamicFormSolverBehaviors.colorGroupBackground', 'Colors a group background with a HTML hex color (e.g. #FF0000 for red).');
+		this.addSolverFunction(pExpressionParser, 'colorInputBackground', 'fable.providers.DynamicFormSolverBehaviors.colorInputBackground', 'Colors an input background with a HTML hex color (e.g. #FF0000 for red).');
+
 		return false;
 	}
 
@@ -85,7 +93,7 @@ class PictDynamicFormsSolverBehaviors extends libPictProvider
 
 	setSectionVisibility(pSectionHash, pVisible)
 	{
-		if (pVisible)
+		if (pVisible != "0")
 		{
 			return this.showSection(pSectionHash);
 		}
@@ -189,6 +197,123 @@ class PictDynamicFormsSolverBehaviors extends libPictProvider
 		return true;
 	}
 
+	generateHTMLHexColor(pRed, pGreen, pBlue)
+	{
+		let tmpRed = (parseInt(pRed) || 0);
+		let tmpGreen = (parseInt(pGreen) || 0);
+		let tmpBlue = (parseInt(pBlue) || 0);
+
+		if (tmpRed < 0) { tmpRed = 0; }
+		if (tmpRed > 255) { tmpRed = 255; }
+		if (tmpGreen < 0) { tmpGreen = 0; }
+		if (tmpGreen > 255) { tmpGreen = 255; }
+		if (tmpBlue < 0) { tmpBlue = 0; }
+		if (tmpBlue > 255) { tmpBlue = 255; }
+
+		let tmpRedHex = tmpRed.toString(16).toUpperCase();
+		if (tmpRedHex.length < 2) { tmpRedHex = `0${tmpRedHex}`; }
+		let tmpGreenHex = tmpGreen.toString(16).toUpperCase();
+		if (tmpGreenHex.length < 2) { tmpGreenHex = `0${tmpGreenHex}`; }
+		let tmpBlueHex = tmpBlue.toString(16).toUpperCase();
+		if (tmpBlueHex.length < 2) { tmpBlueHex = `0${tmpBlueHex}`; }
+
+		return `#${tmpRedHex}${tmpGreenHex}${tmpBlueHex}`;
+	}
+
+	colorSectionBackground(pSectionHash, pColor, pApplyChange)
+	{
+		if (pApplyChange == "0")
+		{
+			return true;
+		}
+
+		let tmpSectionView = this.pict.views.PictFormMetacontroller.getSectionViewFromHash(pSectionHash)
+		if (!tmpSectionView)
+		{
+			this.log.warn(`PictDynamicFormsInformary: colorSection could not find section with hash [${pSectionHash}].`);
+			return false;
+		}
+
+		let tmpElementSet = this.pict.ContentAssignment.getElement(this.getSectionSelector(tmpSectionView.formID));
+
+		if (tmpElementSet.length < 1)
+		{
+			this.log.warn(`PictDynamicFormsInformary: colorSection could not find section element with hash [${pSectionHash}] selector [${this.getSectionSelector(tmpSectionView.formID)}].`);
+			return false;
+		}
+
+		let tmpElement = tmpElementSet[0];
+
+		tmpElement.style.backgroundColor = pColor;
+
+		return true;
+	}
+
+	colorGroupBackground(pSectionHash, pGroupHash, pColor, pApplyChange)
+	{
+		if (pApplyChange == "0")
+		{
+			return true;
+		}
+
+		let tmpGroupView = this.pict.views.PictFormMetacontroller.getSectionViewFromHash(pSectionHash)
+		if (!tmpGroupView)
+		{
+			this.log.warn(`PictDynamicFormsInformary: colorGroup could not find group with section hash [${pSectionHash}] group [${pGroupHash}].`);
+			return false;
+		}
+
+		let tmpElementSet = this.pict.ContentAssignment.getElement(this.getGroupSelector(tmpGroupView.formID, pGroupHash));
+		
+		if (tmpElementSet.length < 1)
+		{
+			this.log.warn(`PictDynamicFormsInformary: colorGroup could not find group element with section hash [${pSectionHash}] group [${pGroupHash}] selector [${this.getGroupSelector(tmpGroupView.formID, pGroupHash)}].`);
+			return false;
+		}
+
+		let tmpElement = tmpElementSet[0];
+		tmpElement.style.backgroundColor = pColor;
+
+		return true;
+	}
+
+	colorInputBackground(pSectionHash, pInputHash, pColor, pApplyChange)
+	{
+		if (pApplyChange == "0")
+		{
+			return true;
+		}
+
+		let tmpInputView = this.pict.views.PictFormMetacontroller.getInputViewFromHash(pSectionHash)
+
+		if (!tmpInputView)
+		{
+			this.log.warn(`PictDynamicFormsInformary: colorInput could not find input with section hash [${pSectionHash}] input [${pInputHash}].`);
+			return false;
+		}
+
+		let tmpInput = tmpInputView.getInputFromHash(pInputHash);
+
+		if (!tmpInput)
+		{
+			this.log.warn(`PictDynamicFormsInformary: colorInput could not find input with section hash [${pSectionHash}] input [${pInputHash}].`);
+			return false;
+		}
+
+		let tmpElementSet = this.pict.ContentAssignment.getElement(`#INPUT-${tmpInput.formID}`);
+
+		if (tmpElementSet.length < 1)
+		{
+			this.log.warn(`PictDynamicFormsInformary: colorInput could not find input element with section hash [${pSectionHash}] input [${pInputHash}] selector [#INPUT-${tmpInput.formID}].`);
+			return false;
+		}
+
+		let tmpElement = tmpElementSet[0];
+		tmpElement.style.backgroundColor = pColor;
+
+		return true;
+	}
+
 	logValues()
 	{
 		let tmpLastValue = null;

package/source/providers/dynamictemplates/Pict-DynamicTemplates-DefaultFormTemplates.js

@@ -218,6 +218,20 @@ Glug glug glug Oo... -->
 					<!-- DataType DateTime {~D:Record.Hash~} {~D:Record.DataType~} -->
 					<input type="hidden" {~D:Record.Macro.InputFullProperties~} value="">
 					<span>{~D:Record.Name~}:</span> <input id="DATETIME-INPUT-FOR-{~D:Record.Macro.RawHTMLID~}" onchange="{~D:Record.Macro.DataRequestFunction~}" type="datetime-local" value="" />
+`
+		},
+		{
+			"HashPostfix": "-Template-Input-InputType-Color",
+			"Template": /*HTML*/`
+					<!-- InputType Color {~D:Record.Hash~} {~D:Record.DataType~} -->
+					<span>{~D:Record.Name~}:</span> <input type="color" {~D:Record.Macro.InputFullProperties~} {~D:Record.Macro.InputChangeHandler~} />
+`
+		},
+		{
+			"HashPostfix": "-Template-Input-InputType-DisplayOnly",
+			"Template": /*HTML*/`
+					<!-- InputType DisplayOnly {~D:Record.Hash~} {~D:Record.DataType~} -->
+					<span>{~D:Record.Name~}:</span> <span {~D:Record.Macro.InputFullProperties~}></span>
 `
 		},
 		{
@@ -375,6 +389,28 @@ Glug glug glug Oo... -->
 					<span>{~D:Record.PictForm.ExtraDescription~}</span>
 					<input id="DATETIME-INPUT-FOR-{~D:Record.Macro.RawHTMLID~}" onchange="{~D:Record.Macro.DataRequestFunction~}" type="datetime-local" value="" />
 				</div>
+`
+		},
+		{
+			"HashPostfix": "-VerticalTemplate-Input-InputType-Color",
+			"Template": /*HTML*/`
+					<!-- InputType Color {~D:Record.Hash~} {~D:Record.DataType~} -->
+				<div class="pict-form-vertical-input">
+					<span>{~D:Record.Name~}:</span>
+					<span>{~D:Record.PictForm.ExtraDescription~}</span>
+					<input type="color" {~D:Record.Macro.InputFullProperties~} {~D:Record.Macro.InputChangeHandler~} />
+				</div>
+`
+		},
+		{
+			"HashPostfix": "-VerticalTemplate-Input-InputType-DisplayOnly",
+			"Template": /*HTML*/`
+					<!-- InputType DisplayOnly {~D:Record.Hash~} {~D:Record.DataType~} -->
+				<div class="pict-form-vertical-input">
+					<span>{~D:Record.Name~}:</span>
+					<span>{~D:Record.PictForm.ExtraDescription~}</span>
+					<span {~D:Record.Macro.InputFullProperties~}></span>
+				</div>
 `
 		},
 		{
@@ -896,6 +932,30 @@ Glug glug glug Oo... -->
 `
 		},
 
+		{
+			"HashPostfix": "-TabularTemplate-Begin-Input-InputType-Color",
+			"Template": /*HTML*/`
+					<!-- InputType Color {~D:Record.Hash~} {~D:Record.DataType~} -->
+					<span>{~D:Record.Name~}:</span> <input type="color" {~D:Record.Macro.InputFullProperties~} {~D:Record.Macro.InputChangeHandler~} {~D:Record.Macro.InformaryTabular~}`
+		},
+		{
+			"HashPostfix": "-TabularTemplate-End-Input-InputType-Color",
+			"Template": /*HTML*/` />
+`
+		},
+
+		{
+			"HashPostfix": "-TabularTemplate-Begin-Input-InputType-DisplayOnly",
+			"Template": /*HTML*/`
+					<!-- InputType DisplayOnly {~D:Record.Hash~} {~D:Record.DataType~} -->
+					<span>{~D:Record.Name~}:</span> <span {~D:Record.Macro.InputFullProperties~} {~D:Record.Macro.InformaryTabular~}`
+		},
+		{
+			"HashPostfix": "-TabularTemplate-End-Input-InputType-DisplayOnly",
+			"Template": /*HTML*/` ></span>
+`
+		},
+
 		{
 			"HashPostfix": "-TabularTemplate-Begin-Input-InputType-ReadOnly",
 			"Template": /*HTML*/`