URL Mapping - Patching - v0.2

Execute pre-configured patched based on url query string

For the purpose of the following working example there is multiple instance of wb-urlmapping but it they can be all included in one instance. Having all of them in one is the recommend approach.

JSON files source code

data-1.json 
{}
data-2.json 
{
	"city": {
		"gat": "Gatineau",
		"ott": "Ottawa",
		"vdm": "Val-des-monts"
	},
	"fruit": "Perry",
	"country": {
		"name": "Canada",
		"province": {
			"qc": "Québec",
			"on": "Ontario",
			"ma": "Manitoba"
		}
	}
}

Applying patches

Results

My city is: somewhere

My fruit is: all of them

The wait configuration is set to true to prevent the json-manager of updating data-json content after the json file has been downloaded. Instead it will wait to receive additional patches from an another plugin communicated through the patches.wb-jsonmanager event.

Source code 
<div data-wb-urlmapping='{
		"example1a": { "action": "patch", "source": "#jmexample1", "patches": [
				{ "op": "add", "path": "/city", "value": "Gatineau" },
				{ "op": "add", "path": "/fruit", "value": "Apple" }
			]
		},
		"example1b": { "action": "patch", "source": "#jmexample1", "patches": [
				{ "op": "add", "path": "/city", "value": "Ottawa" },
				{ "op": "add", "path": "/fruit", "value": "Orange" }
			]
		},
		"example1c": { "action": "patch", "source": "#jmexample1", "patches": [
				{ "op": "add", "path": "/city", "value": "Hull" }
			]
		},
		"example1d": { "action": "patch", "source": "#jmexample1", "patches": [
				{ "op": "add", "path": "/fruit", "value": "Kiwi" }
			]
		},
		"multiplequery": true
	}'></div>

<ul>
	<li><a href="?">Empty <code>?</code></a></li> 
	<li><a href="?example1a">Gatineau and Apple <code>?example1a</code></a></li>
	<li><a href="?example1b">Ottawa and Orange <code>?example1b</code></a></li>
	<li><a href="?example1c&amp;example1d">Hull and Kiwi <code>?example1c&amp;example1d</code></a></li>
</ul>
	
<section class="well" id="jmexample1" data-wb-jsonmanager='{
			"url": "data/data-1.json",
			"name": "example1",
			"wait": true
		}'>
	<h3 class="mrgn-tp-sm">Results</h3>
	<p>My city is: <span data-json-replace="#[example1]/city">somewhere</span></p>
	<p>My fruit is: <span data-json-replace="#[example1]/fruit">all of them</span></p>
</section>

Use the page query for patches

Defaults

It uses the value of the parameter as a key for copying to the parent element.

The city selected is: somewhere

Source code 
<ul data-wb-urlmapping='{ "city" : { "action": "patch", "source": "#jmexample2", "base": "/city", "match": "^[a-z][a-z][a-z]$", "default": "gat" } }'>
	<li><a href="?#ex2">Empty <code>?</code></a></li> 
	<li><a href="?city=gat#ex2">Gatineau <code>?city=gat</code></a></li>
	<li><a href="?city=ott#ex2">Ottawa <code>?city=ott</code></a></li>
	<li><a href="?city=vdm#ex2">Val-des-monts <code>?city=vdm</code></a></li>
	<li><a href="?city=hull#ex2">Hull <code>?city=hull</code></a> (Fallback on default <code>gat</code>)</li>
	<li><a href="?city=hul#ex2">Hull <code>?city=hul</code></a> (Do nothing)</li>
</ul>

<p id="jmexample2" data-wb-jsonmanager='{ "url": "data/data-2.json", "name": "example2", "wait": true }'>The city selected is: <span data-json-replace="#[example2]/city">somewhere</span></p>

Be specific

Defining the following configuration will overwrite/control how the page query could interact with the patches action.

Result:

Source code 
<ul data-wb-urlmapping='{ 
		"ex3a" : { "action": "patch", "source": "#jmexample3", "base": "/city", "match": "^[a-z][a-z][a-z]$", "default": "vdm" },
		"ex3b" : { "action": "patch", "source": "#jmexample3", "base": "/city", "qval": "gat" },
		"ex3c=example" : { "action": "patch", "source": "#jmexample3", "base": "/city", "qval": "ott" },
		"ex3d" : { "action": "patch", "source": "#jmexample3", "base": "/country/province", "match": "^[a-z][a-z]$", "default": "ma" }
	}'>
	<li><a href="?#ex3">Empty <code>?</code></a></li> 
	<li><a href="?ex3a#ex3">base is "/city", fallback on default <code>?ex3a</code></a></li>
	<li><a href="?ex3a=gat#ex3">base is "/city", showing Gatineau <code>?ex3a=gat</code></a></li>
	<li><a href="?ex3a=ott#ex3">base is "/city", showing Ottawa <code>?ex3a=ott</code></a></li>
	<li><a href="?ex3b#ex3">base is "/city" with "gat" set as value, showing Gatineau <code>?ex3b</code></a></li>
	<li><a href="?ex3c=example#ex3">base is "/city" with "ott" set as value, showing Ottawa <code>?ex3c=example</code></a></li>
	<li><a href="?ex3d#ex3">base is "/province" with a base path "/country/", fallback on default <code>?ex3d</code></a></li>
	<li><a href="?ex3d=on#ex3">base is "/province" with a base path "/country/", showing Ontario <code>?ex3d=on</code></a></li>
	<li><a href="?ex3d=qc#ex3">base is "/province" with a base path "/country/", showing Québec <code>?ex3d=qc</code></a></li>
</ul>

<p>Result:</p>
<ul id="jmexample3" data-wb-jsonmanager='{ "url": "data/data-2.json", "name": "example4", "wait": true }'>
	<li>City: <span data-json-replace="#[example4]/city">not defined</span></li>
	<li>Province: <span data-json-replace="#[example4]/country/province">not defined</span></li>
</ul>
Date modified: