MSTR-228: Allow app custom routing

docs/mkdocs/mkdocs.yml

@@ -90,6 +90,7 @@ nav:
       - 'docs/monster-util/isReseller().md'
       - 'docs/monster-util/isSuperDuper().md'
       - 'docs/monster-util/isWhitelabeling().md'
+      - 'docs/monster-util/parseQueryString().md'
       - 'docs/monster-util/protectSensitivePhoneNumbers().md'
       - 'docs/monster-util/randomString().md'
       - 'docs/monster-util/toFriendlyDate().md'

docs/monster-util/parseQueryString().md

@@ -0,0 +1,40 @@
+title: parseQueryString()
+
+# monster.util.parseQueryString()
+
+## Syntax
+```javascript
+monster.util.parseQueryString(queryString);
+```
+
+### Parameters
+Key | Description | Type | Default | Required
+:-: | --- | :-: | :-: | :-:
+`queryString` | Query string to be parsed as an object. | `String` | | `true`
+
+### Return value
+An `Object` representation of the query string parameters.
+
+## Description
+This method parses a query string into an object representation of its parameters.
+
+All of the parameter values are converted to strings.
+
+If the parameter key ends with a pair of square brackets, it is interpreted as an array. If an index is specified between the brackets, then the value is added in the specified position. If no index is specified, then the value is added at the end of the array.
+
+Also, if a parameter key has no square braces, but it is repeated more than once in the query string, it is also interpreted as an array, whose values will be added in the same order as they appear in the string.
+
+These are valid query string representations of the same array:
+
+* `'colors=red&colors=blue&colors=yellow'`
+* `'colors[]=red&colors[]=blue&colors[]=yellow'`
+* `'colors[0]=red&colors[1]=blue&colors[2]=yellow'`
+
+## Example
+```javascript
+monster.util.parseQueryString('param1=22&param2=false&param3=hello')
+// output: { param1: "22", param2: "false", param3: "hello" }
+
+monster.util.parseQueryString('palette=basic&colors[]=red&colors[]=blue&colors[]=yellow')
+// output: { palette: "basic", colors: [ "red", "blue", "yellow" ] }
+```

src/js/lib/monster.routing.js

@@ -104,12 +104,21 @@ define(function(require) {
 		},
 
 		addDefaultRoutes: function() {
-			this.add('apps/{appName}:?query:', function(appName, query) {
+			this.add(/^apps\/([a-z]+(?:-[a-z]+)?)(\/[^?]*)?\??(.*)?$/, function(appName, restSegment, queryString) {
 				// not logged in, do nothing to preserve potentially valid route to load after successful login
 				if (!monster.util.isLoggedIn()) {
 					return;
 				}
-				var availableApps = monster.util.listAppStoreMetadata('user');
+
+				var isActiveApp = monster.apps.getActiveApp() === appName,
+					hasCustomRouting = !_.isEmpty(restSegment);
+
+				if (isActiveApp && hasCustomRouting) {
+					return;
+				}
+
+				var availableApps = monster.util.listAppStoreMetadata('user'),
+					query = monster.util.parseQueryString(queryString);
 
 				// try loading the requested app
 				if (isAppLoadable(appName, availableApps)) {

src/js/lib/monster.util.js

@@ -64,6 +64,7 @@ define(function(require) {
 		listAppsMetadata: listAppsMetadata,
 		listAppStoreMetadata: listAppStoreMetadata,
 		listAppLinks: listAppLinks,
+		parseQueryString: parseQueryString,
 		protectSensitivePhoneNumbers: protectSensitivePhoneNumbers,
 		randomString: randomString,
 		reload: reload,
@@ -1211,73 +1212,6 @@ define(function(require) {
 
 			return search;
 		};
-		/**
-		 * @param  {String} queryString
-		 * @return {Object}
-		 */
-		var parseQueryString = function(queryString) {
-			var pair;
-			var paramKey;
-			var paramValue;
-
-			// if query string is empty exit early
-			if (!queryString) {
-				return {};
-			}
-
-			return _
-				.chain(queryString)
-				// anything after # is not part of the query string, so get rid of it
-				.split('#', 1)
-				.toString()
-				// split our query string into its component parts
-				.split('&')
-				// prase query string key/value pairs
-				.transform(function(acc, component) {
-					// separate each component in key/value pair
-					pair = component.split('=');
-
-					// set parameter name and value (use 'true' if empty)
-					paramKey = pair[0];
-					paramValue = _.isUndefined(pair[1]) ? true : pair[1];
-
-					// if the paramKey ends with square brackets, e.g. colors[] or colors[2]
-					if (paramKey.match(/\[(\d+)?\]$/)) {
-						// create key if it doesn't exist
-						var key = paramKey.replace(/\[(\d+)?\]/, '');
-						if (!acc[key]) {
-							acc[key] = [];
-						}
-
-						// if it's an indexed array e.g. colors[2]
-						if (paramKey.match(/\[\d+\]$/)) {
-							// get the index value and add the entry at the appropriate position
-							var index = /\[(\d+)\]/.exec(paramKey)[1];
-							acc[key][index] = paramValue;
-						} else {
-							// otherwise add the value to the end of the array
-							acc[key].push(paramValue);
-						}
-					} else {
-						// we're dealing with a string
-						if (!acc[paramKey]) {
-							// if it doesn't exist, create property
-							acc[paramKey] = paramValue;
-						} else if (
-							acc[paramKey]
-							&& _.isString(acc[paramKey])
-						) {
-							// if property does exist and it's a string, convert it to an array
-							acc[paramKey] = [acc[paramKey]];
-							acc[paramKey].push(paramValue);
-						} else {
-							// otherwise add the property
-							acc[paramKey].push(paramValue);
-						}
-					}
-				}, {})
-				.value();
-		};
 		/**
 		 * @param  {Object} params
 		 * @return {Object|Array|String|undefined}
@@ -1632,6 +1566,75 @@ define(function(require) {
 			.value();
 	}
 
+	/**
+	 * Parses a query string into an object
+	 * @param  {String} queryString Query string to be parsed
+	 * @return {Object}             Object representation of the query string parameters
+	 */
+	function parseQueryString(queryString) {
+		var pair;
+		var paramKey;
+		var paramValue;
+
+		// if query string is empty exit early
+		if (!queryString) {
+			return {};
+		}
+
+		return _
+			.chain(queryString)
+			// anything after # is not part of the query string, so get rid of it
+			.split('#', 1)
+			.toString()
+			// split our query string into its component parts
+			.split('&')
+			// prase query string key/value pairs
+			.transform(function(acc, component) {
+				// separate each component in key/value pair
+				pair = component.split('=');
+
+				// set parameter name and value (use 'true' if empty)
+				paramKey = pair[0];
+				paramValue = _.isUndefined(pair[1]) ? true : pair[1];
+
+				// if the paramKey ends with square brackets, e.g. colors[] or colors[2]
+				if (paramKey.match(/\[(\d+)?\]$/)) {
+					// create key if it doesn't exist
+					var key = paramKey.replace(/\[(\d+)?\]/, '');
+					if (!acc[key]) {
+						acc[key] = [];
+					}
+
+					// if it's an indexed array e.g. colors[2]
+					if (paramKey.match(/\[\d+\]$/)) {
+						// get the index value and add the entry at the appropriate position
+						var index = /\[(\d+)\]/.exec(paramKey)[1];
+						acc[key][index] = paramValue;
+					} else {
+						// otherwise add the value to the end of the array
+						acc[key].push(paramValue);
+					}
+				} else {
+					// we're dealing with a string
+					if (!acc[paramKey]) {
+						// if it doesn't exist, create property
+						acc[paramKey] = paramValue;
+					} else if (
+						acc[paramKey]
+						&& _.isString(acc[paramKey])
+					) {
+						// if property does exist and it's a string, convert it to an array
+						acc[paramKey] = [acc[paramKey]];
+						acc[paramKey].push(paramValue);
+					} else {
+						// otherwise add the property
+						acc[paramKey].push(paramValue);
+					}
+				}
+			}, {})
+			.value();
+	};
+
 	/**
 	 * Function used to replace displayed phone numbers by "fake" numbers.
 	 * Can be useful to generate marketing documents or screenshots with lots of data without