mirror of
https://gitee.com/dcren/initializr.git
synced 2025-09-19 01:58:16 +08:00
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
This commit is contained in:
Sebastien Deleuze
committed by
Stephane Nicoll
Stephane Nicoll
parent
072a14d5ef
commit
d1fb4ad2d6
13
README.adoc
13
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
|
||||
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@@ -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 { %>
|
||||
|
||||
Reference in New Issue
Block a user