Action manager: adding action to select input by default

wet-boew · Oct 25, 2023 · f5d693a · f5d693a
1 parent 9321dab
commit f5d693a
Show file tree

Hide file tree

Showing 10 changed files with 536 additions and 35 deletions.
diff --git a/_data/components.json b/_data/components.json
@@ -1132,6 +1132,16 @@
 				"language": "fr",
 				"path": "patches-fr.html"
 			},
+			{
+				"title": "Select input",
+				"language": "en",
+				"path": "selectinput-en.html"
+			},
+			{
+				"title": "Sélectionner un champ de saisie",
+				"language": "fr",
+				"path": "selectinput-fr.html"
+			},
 			{
 				"title": "Geomap",
 				"language": "en",

diff --git a/_data/design-patterns.json b/_data/design-patterns.json
@@ -0,0 +1 @@
+[]
diff --git a/_data/sites.json b/_data/sites.json
diff --git a/_data/wet-boew.json b/_data/wet-boew.json
@@ -92,4 +92,4 @@
 		]
 	}
 }
-]
+]
diff --git a/components/wb-actionmng/actionmng.js b/components/wb-actionmng/actionmng.js
@@ -33,6 +33,7 @@ var $document = wb.doc,
 		"removeClass",
 		"tblfilter",
 		"withInput",
+		"selectInput",
 		"run"
 	].join( "." + actionEvent + " " ) + "." + actionEvent,
 
@@ -416,6 +417,20 @@ var $document = wb.doc,
 		}
 
 	},
+	selectInputAct = function( event, data ) {
+		var sourceElm = document.querySelector( data.source ) || event.currentTarget,
+			inputs;
+
+		inputs = sourceElm.querySelectorAll( "[value=\"" + data.value + "\"]" );
+
+		inputs.forEach( input => {
+			if ( input.nodeName === "OPTION" ) {
+				input.setAttribute( "selected", true );
+			} else if ( input.nodeName === "INPUT" ) {
+				input.setAttribute( "checked", true );
+			}
+		} );
+	},
 	patchFixArray = function( patchArray, val, basePointer ) {
 
 		var i, i_len = patchArray.length, i_cache,
@@ -582,6 +597,9 @@ $document.on( actionMngEvent, selector, function( event, data ) {
 		case "patch":
 			patchAct( event, data );
 			break;
+		case "selectInput":
+			selectInputAct( event, data );
+			break;
 		case "mapfilter":
 			geomapAOIAct( event, data );
 			break;

diff --git a/components/wb-urlmapping/index.json-ld b/components/wb-urlmapping/index.json-ld
@@ -49,6 +49,16 @@
 				"language": "fr",
 				"path": "patches-fr.html"
 			},
+			{
+				"title": "Select input",
+				"language": "en",
+				"path": "selectinput-en.html"
+			},
+			{
+				"title": "Sélectionner un champ de saisie",
+				"language": "fr",
+				"path": "selectinput-fr.html"
+			},
 			{
 				"title": "Geomap",
 				"language": "en",

diff --git a/components/wb-urlmapping/selectinput-en.html b/components/wb-urlmapping/selectinput-en.html
@@ -0,0 +1,224 @@
+---
+{
+	"title": "URL Mapping - Select input",
+	"language": "en",
+	"category": "Plugins",
+	"description": "Select inputs by default based on url query string.",
+	"tag": "urlmapping",
+	"parentdir": "urlmapping",
+	"altLangPage": "selectinput-fr.html",
+	"dateModified": "2023-10-24"
+}
+---
+<ul class="list-inline">
+	<li><a class="btn btn-primary" href="urlmapping-doc-en.html">Documentation</a></li>
+	<li><a class="btn btn-primary" href="https://github.com/wet-boew/GCWeb/issues/new?title=UrlMapping+tblFilter">Questions or comments?</a></li>
+</ul>
+
+<p>Select inputs by default based on url query string.</p>
+
+<div class="wb-prettify all-pre"></div>
+
+<ul>
+	<li><a href="?">Empty <code>?</code></a></li>
+	<li><a href="?f=b">Bananas <code>?f=b"</code></a></li>
+	<li><a href="?f=g">Grapes <code>?f=g"</code></a></li>
+</ul>
+
+<section>
+	<h2>Example with <code>source</code></h2>
+	<div data-wb-urlmapping='{
+		"f=b": {
+			"action": "selectInput",
+			"source": "#fruitsOptions",
+			"value": "Bananas"
+		}
+	}'></div>
+
+	<form id="fruitsOptions">
+		<label for="fruitsSelect">Choose a fruit</label>
+		<select name="fruitsSelect" id="fruitsSelect" class="form-control mrgn-bttm-lg">
+			<option value="all">All</option>
+			<option value="Bananas">Bananas</option>
+			<option value="Oranges">Oranges</option>
+			<option value="Apples">Apples</option>
+		</select>
+
+		<fieldset class="gc-chckbxrdio form-inline mrgn-bttm-lg">
+			<legend>Choose a fruit</legend>
+			<div class="checkbox label-inline">
+				<input type="checkbox" name="fruitsCheckboxes" id="BananasCheckbox" value="Bananas"><label for="BananasCheckbox">Bananas</label>
+			</div>
+			<div class="checkbox label-inline">
+				<input type="checkbox" name="fruitsCheckboxes" id="OrangesCheckbox" value="Oranges"><label for="OrangesCheckbox">Oranges</label>
+			</div>
+			<div class="checkbox label-inline">
+				<input type="checkbox" name="fruitsCheckboxes" id="ApplesCheckbox" value="Apples"><label for="ApplesCheckbox">Apples</label>
+			</div>
+		</fieldset>
+
+		<fieldset class="gc-chckbxrdio form-inline">
+			<legend>Choose a fruit</legend>
+			<div class="radio label-inline">
+				<input type="radio" name="fruitsRadios" id="BananasRadio" value="Bananas"><label for="BananasRadio">Bananas</label>
+			</div>
+			<div class="radio label-inline">
+				<input type="radio" name="fruitsRadios" id="OrangesRadio" value="Oranges"><label for="OrangesRadio">Oranges</label>
+			</div>
+			<div class="radio label-inline">
+				<input type="radio" name="fruitsRadios" id="ApplesRadio" value="Apples"><label for="ApplesRadio">Apples</label>
+			</div>
+		</fieldset>
+	</form>
+
+	<details class="mrgn-tp-lg">
+		<summary>Source code</summary>
+		<pre><code>&lt;div data-wb-urlmapping='{
+	"f=b": {
+		"action": "selectInput",
+		"source": "#fruitsOptions",
+		"value": "Bananas"
+	}
+}'>&lt;/div>
+
+&lt;form id="fruitsOptions">
+	&lt;label for="fruitsSelect">Choose a fruit&lt;/label>
+	&lt;select name="fruitsSelect" id="fruitsSelect" class="form-control mrgn-bttm-lg">
+		&lt;option value="all">All&lt;/option>
+		&lt;option value="Bananas">Bananas&lt;/option>
+		&lt;option value="Oranges">Oranges&lt;/option>
+		&lt;option value="Apples">Apples&lt;/option>
+	&lt;/select>
+
+	&lt;fieldset class="gc-chckbxrdio form-inline mrgn-bttm-lg">
+		&lt;legend>Choose a fruit&lt;/legend>
+		&lt;div class="checkbox label-inline">
+			&lt;input type="checkbox" name="fruitsCheckboxes" id="BananasCheckbox" value="Bananas">&lt;label for="BananasCheckbox">Bananas&lt;/label>
+		&lt;/div>
+		&lt;div class="checkbox label-inline">
+			&lt;input type="checkbox" name="fruitsCheckboxes" id="OrangesCheckbox" value="Oranges">&lt;label for="OrangesCheckbox">Oranges&lt;/label>
+		&lt;/div>
+		&lt;div class="checkbox label-inline">
+			&lt;input type="checkbox" name="fruitsCheckboxes" id="ApplesCheckbox" value="Apples">&lt;label for="ApplesCheckbox">Apples&lt;/label>
+		&lt;/div>
+	&lt;/fieldset>
+
+	&lt;fieldset class="gc-chckbxrdio form-inline">
+		&lt;legend>Choose a fruit&lt;/legend>
+		&lt;div class="radio label-inline">
+			&lt;input type="radio" name="fruitsRadios" id="BananasRadio" value="Bananas">&lt;label for="BananasRadio">Bananas&lt;/label>
+		&lt;/div>
+		&lt;div class="radio label-inline">
+			&lt;input type="radio" name="fruitsRadios" id="OrangesRadio" value="Oranges">&lt;label for="OrangesRadio">Oranges&lt;/label>
+		&lt;/div>
+		&lt;div class="radio label-inline">
+			&lt;input type="radio" name="fruitsRadios" id="ApplesRadio" value="Apples">&lt;label for="ApplesRadio">Apples&lt;/label>
+		&lt;/div>
+	&lt;/fieldset>
+&lt;/form></code></pre>
+	</details>
+</section>
+
+<section>
+	<h2>Example without source</h2>
+	<label for="fruitsSelect2">Select a fruit</label>
+	<select id="fruitsSelect2" class="form-control" data-wb-urlmapping='{
+		"f=g": {
+			"action": "selectInput",
+			"value": "Grapes"
+		}
+	}'>
+		<option value="all">All</option>
+		<option value="Oranges">Oranges</option>
+		<option value="Apples">Apples</option>
+		<option value="Grapes">Grapes</option>
+	</select>
+
+	<fieldset class="gc-chckbxrdio form-inline mrgn-bttm-lg" data-wb-urlmapping='{
+		"f=g": {
+			"action": "selectInput",
+			"value": "Grapes"
+		}
+	}'>
+		<legend>Choose a fruit</legend>
+		<div class="checkbox label-inline">
+			<input type="checkbox" name="fruitsCheckboxes2" id="BananasCheckbox2" value="Bananas"><label for="BananasCheckbox2">Bananas</label>
+		</div>
+		<div class="checkbox label-inline">
+			<input type="checkbox" name="fruitsCheckboxes2" id="OrangesCheckbox2" value="Oranges"><label for="OrangesCheckbox2">Oranges</label>
+		</div>
+		<div class="checkbox label-inline">
+			<input type="checkbox" name="fruitsCheckboxes2" id="GrapesCheckbox2" value="Grapes"><label for="GrapesCheckbox2">Grapes</label>
+		</div>
+	</fieldset>
+
+	<fieldset class="gc-chckbxrdio form-inline" data-wb-urlmapping='{
+		"f=g": {
+			"action": "selectInput",
+			"value": "Grapes"
+		}
+	}'>
+		<legend>Choose a fruit</legend>
+		<div class="radio label-inline">
+			<input type="radio" name="fruitsRadios2" id="BananasRadio2" value="Bananas"><label for="BananasRadio2">Bananas</label>
+		</div>
+		<div class="radio label-inline">
+			<input type="radio" name="fruitsRadios2" id="OrangesRadio2" value="Oranges"><label for="OrangesRadio2">Oranges</label>
+		</div>
+		<div class="radio label-inline">
+			<input type="radio" name="fruitsRadios2" id="GrapesRadio2" value="Grapes"><label for="GrapesRadio2">Grapes</label>
+		</div>
+	</fieldset>
+
+	<details class="mrgn-tp-lg">
+		<summary>Source code</summary>
+		<pre><code>&lt;label for="fruitsSelect2">Select a fruit&lt;/label>
+&lt;select id="fruitsSelect2" class="form-control" data-wb-urlmapping='{
+	"f=g": {
+		"action": "selectInput",
+		"value": "Grapes"
+	}
+}'>
+	&lt;option value="all">All&lt;/option>
+	&lt;option value="Oranges">Oranges&lt;/option>
+	&lt;option value="Apples">Apples&lt;/option>
+	&lt;option value="Grapes">Grapes&lt;/option>
+&lt;/select>
+
+&lt;fieldset class="gc-chckbxrdio form-inline mrgn-bttm-lg" data-wb-urlmapping='{
+	"f=g": {
+		"action": "selectInput",
+		"value": "Grapes"
+	}
+}'>
+	&lt;legend>Choose a fruit&lt;/legend>
+	&lt;div class="checkbox label-inline">
+		&lt;input type="checkbox" name="fruitsCheckboxes2" id="BananasCheckbox2" value="Bananas">&lt;label for="BananasCheckbox2">Bananas&lt;/label>
+	&lt;/div>
+	&lt;div class="checkbox label-inline">
+		&lt;input type="checkbox" name="fruitsCheckboxes2" id="OrangesCheckbox2" value="Oranges">&lt;label for="OrangesCheckbox2">Oranges&lt;/label>
+	&lt;/div>
+	&lt;div class="checkbox label-inline">
+		&lt;input type="checkbox" name="fruitsCheckboxes2" id="GrapesCheckbox2" value="Grapes">&lt;label for="GrapesCheckbox2">Grapes&lt;/label>
+	&lt;/div>
+&lt;/fieldset>
+
+&lt;fieldset class="gc-chckbxrdio form-inline" data-wb-urlmapping='{
+	"f=g": {
+		"action": "selectInput",
+		"value": "Grapes"
+	}
+}'>
+	&lt;legend>Choose a fruit&lt;/legend>
+	&lt;div class="radio label-inline">
+		&lt;input type="radio" name="fruitsRadios2" id="BananasRadio2" value="Bananas">&lt;label for="BananasRadio2">Bananas&lt;/label>
+	&lt;/div>
+	&lt;div class="radio label-inline">
+		&lt;input type="radio" name="fruitsRadios2" id="OrangesRadio2" value="Oranges">&lt;label for="OrangesRadio2">Oranges&lt;/label>
+	&lt;/div>
+	&lt;div class="radio label-inline">
+		&lt;input type="radio" name="fruitsRadios2" id="GrapesRadio2" value="Grapes">&lt;label for="GrapesRadio2">Grapes&lt;/label>
+	&lt;/div>
+&lt;/fieldset></code></pre>
+	</details>
+</section>
-Original file line number
+Diff line change
@@ Expand Up / @@ -92,4 +92,4 @@ @@
     		]
     	}
     }
-    ]
+    ]