Pre-fill form based on URL hashbang parameters

This commit makes it possible to customize and display automatically form
inputs with this kind of hashbang parameters:
https://start.spring.io/#!language=groovy&name=Groovy%20Sample

type, groupId, artifactId, name, description, packageName,
packaging, javaVersion and language parameters are supported.

Closes gh-107

README.adoc

@@ -80,6 +80,19 @@ a compressed tarball instead.
 You could use this infrastructure to create your own client since the project is generated
 via a plain HTTP call.
 
+[[customize-form]]
+== Customize form inputs
+
+You can share or bookmark URL that will customize automatically form inputs with this kind of hashbang parameters:
+
+[source,bash]
+----
+https://start.spring.io/#!language=groovy&name=Groovy%20Sample
+----
+
+`type`, `groupId`, `artifactId`, `name`, `description`, `packageName`,
+`packaging`, `javaVersion` and `language` parameters are supported.
+
 [[meta-data]]
 == Service meta-data
 

initializr/src/main/resources/static/js/start.js

@@ -61,6 +61,55 @@
         return versionA[3].localeCompare(versionB[3]);
     }
 
+    /**
+     * Parse hash bang parameters from a URL as key value object.
+     * For repeated parameters the last parameter is effective.
+     * If = syntax is not used the value is set to null.
+     * #!x&y=3 -> { x:null, y:3 }
+     * @param url URL to parse or null if window.location is used
+     * @return Object of key -> value mappings.
+     * @source https://gist.github.com/zaus/5201739
+     */
+    hashbang = function (url, i, hash) {
+        url = url || window.location.href;
+
+        var pos = url.indexOf('#!');
+        if( pos < 0 ) return [];
+        var vars = [], hashes = url.slice(pos + 2).split('&');
+
+        for(i = hashes.length; i--;) {
+            hash = hashes[i].split('=');
+
+            vars.push({ name: hash[0], value: hash.length > 1 ? hash[1] : null});
+        }
+
+        return vars;
+    }
+
+    applyParams = function() {
+        var params = hashbang();
+        $.each(params, function( index, param ) {
+            var value = decodeURIComponent(param.value);
+            switch(param.name)  {
+                case 'type':
+                case 'packaging':
+                case 'javaVersion':
+                case 'language':
+                    $('.' + param.name.toLowerCase() + '-form-group').removeClass("hidden");
+                    $('#' + param.name+ ' option[value="' + value + '"]').prop('selected', true);
+                    break;
+                case 'groupId':
+                case 'artifactId':
+                case 'name':
+                case 'description':
+                case 'packageName':
+                    $('.' + param.name.toLowerCase() + '-form-group').removeClass("hidden");
+                    $('#' + param.name).val(value);
+                    break;
+            }
+        });
+    }
+
 }());
 
 $(function () {
@@ -124,6 +173,7 @@ $(function () {
         $(".full").addClass("hidden");
         $(".tofullversion").removeClass("hidden");
         $(".tosimpleversion").addClass("hidden");
+        applyParams();
         $("body").scrollTop(0);
         return false;
     });
@@ -201,4 +251,15 @@ $(function () {
             e.returnValue = false;
         }
     });
+
+    applyParams();
+    if ("onhashchange" in window) {
+        window.onhashchange = function() {
+            $(".full").addClass("hidden");
+            $(".tofullversion").removeClass("hidden");
+            $(".tosimpleversion").addClass("hidden");
+            applyParams();
+        }
+    }
+
 });

initializr/src/main/resources/templates/home.html

@@ -46,34 +46,34 @@
 
                     <p>Artifact coordinates</p>
 
-                    <div class="form-group">
+                    <div class="form-group groupid-form-group">
                         <label for="groupId" class="control-label">${groupId.title}</label>
                         <input tabindex="3" id="groupId" class="form-control" type="text" value="${groupId.content}"
                                name="groupId">
                     </div>
-                    <div class="form-group">
+                    <div class="form-group artifactid-form-group">
                         <label for="artifactId" class="control-label">${artifactId.title}</label>
                         <input tabindex="4" id="artifactId" class="form-control" type="text"
                                value="${artifactId.content}"
                                name="artifactId">
                     </div>
-                    <div class="form-group full hidden">
+                    <div class="form-group full hidden name-form-group">
                         <label for="name" class="control-label">${name.title}</label>
                         <input tabindex="5" id="name" class="form-control" type="text" value="${name.content}"
                                name="name">
                     </div>
-                    <div class="form-group full hidden">
+                    <div class="form-group full hidden description-form-group">
                         <label for="description" class="control-label">${description.title}</label>
                         <input tabindex="6" id="description" class="form-control" type="text"
                                value="${description.content}" name="description">
                     </div>
-                    <div class="form-group full hidden">
+                    <div class="form-group full hidden packagename-form-group">
                         <label for="packageName" class="control-label">${packageName.title}</label>
                         <input tabindex="7" id="packageName" class="form-control" type="text"
                                value="${packageName.content}"
                                name="packageName">
                     </div>
-                    <div class="form-group full hidden">
+                    <div class="form-group full hidden packaging-form-group">
                         <label for="packaging" class="control-label">${packagings.title}</label>
                         <select tabindex="8" class="form-control" id="packaging" name="packaging">
                             <% packagings.content.each { %>
@@ -82,7 +82,7 @@
                             <% } %>
                         </select>
                     </div>
-                    <div class="form-group full hidden">
+                    <div class="form-group full hidden javaversion-form-group">
                         <label for="javaVersion" class="control-label">${javaVersions.title}</label>
                         <select tabindex="9" class="form-control" name="javaVersion" id="javaVersion">
                             <% javaVersions.content.each { %>
@@ -91,7 +91,7 @@
                             <% } %>
                         </select>
                     </div>
-                    <div class="form-group full hidden">
+                    <div class="form-group full hidden language-form-group">
                         <label for="language" class="control-label">${languages.title}</label>
                         <select tabindex="10" class="form-control" name="language" id="language">
                             <% languages.content.each { %>