lsm/initializr
1
0
Fork 0
mirror of https://gitee.com/dcren/initializr.git synced 2026-02-25 21:22:58 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add version range support in web UI

Browse Source 
This commit introduces zepto.js as a minimal front-end library to
manipulate the DOM and a lightweight library `Versions` to parse and
compare version ranges (OSGI style).

With this change, only Boot starter dependencies that are compatible
with the selected Boot version should be displayed in the UI.

Partial fix for #62
This commit is contained in:
Brian Clozel
2015-01-30 15:09:02 +01:00
committed by Stephane Nicoll
parent 5a4a2b9f81
commit 8c0dc68a51
3 changed files with 83 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
initializr/src/main/resources/static/js/start.js Normal file
View File

@@ -0,0 +1,61 @@
(function() {
Versions = function() {};
var strict_range = /\[(.*),(.*)\]/;
var halfopen_right_range = /\[(.*),(.*)\)/;
var halfopen_left_range = /\((.*),(.*)\]/;
var qualifiers = ['M', 'RC', 'BUILD-SNAPSHOT', 'RELEASE'];
Versions.prototype.matchRange = function(range) {
var strict_match = range.match(strict_range);
if(strict_match) {
return function(version) {
return compareVersions(strict_match[1], version) <= 0
&& compareVersions(strict_match[2], version) >= 0;
}
}
var hor_match = range.match(halfopen_right_range);
if(hor_match) {
return function(version) {
return compareVersions(hor_match[1], version) <= 0
&& compareVersions(hor_match[2], version) > 0;
}
}
var hol_match = range.match(halfopen_left_range);
if(hol_match) {
return function(version) {
return compareVersions(hol_match[1], version) < 0
&& compareVersions(hol_match[2], version) >= 0;
}
}
return function(version) {
return compareVersions(range, version) <= 0;
}
};
function parseQualifier(version) {
var qual = version.replace(/\d+/g,"");
return qualifiers.indexOf(qual) != -1 ? qual : "RELEASE";
}
function compareVersions(a, b) {
var result;
var versionA = a.split(".");
var versionB = b.split(".");
for(var i=0; i < 3; i++) {
result = parseInt(versionA[i], 10) - parseInt(versionB[i], 10);
if (result != 0) { return result;}
}
var aqual = parseQualifier(versionA[3]);
var bqual = parseQualifier(versionB[3]);
result = qualifiers.indexOf(aqual) - qualifiers.indexOf(bqual);
if(result != 0) {
return result;
}
return versionA[3].localeCompare(versionB[3]);
}
}());

2
initializr/src/main/resources/static/js/zepto.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

33
initializr/src/main/resources/templates/home.html
View File

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<title>Spring Initializr</title>
<link href="https://fonts.googleapis.com/css?family=Varela+Round|Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Varela+Round|Montserrat:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="/css/spring.css"/>
@@ -39,7 +39,7 @@
<div class="form-group">
<label for="artifactId" class="col-md-3 control-label">Artifact</label>
<div class="col-md-8">
<input id="artifactId" class="form-control" type="text" value="${defaults.artifactId}" name="artifactId" onchange="javascript:updateBaseDir()">
<input id="artifactId" class="form-control" type="text" value="${defaults.artifactId}" name="artifactId">
</div>
</div>
<div class="form-group">
@@ -63,7 +63,7 @@
<div class="form-group">
<label for="type" class="col-md-3 control-label">Type</label>
<div class="col-md-8">
<select class="form-control" id="type" name="type" onchange="javascript:updateAction(this)">
<select class="form-control" id="type" name="type">
<% types.each { %>
<option data-action="${it.action}" value="${it.id}" ${it.default==true ? ' selected' : ''}>${it.name}</option>
<% } %>
@@ -111,13 +111,13 @@
</div>
</div>
</div>
<div class="col-sm-6">
<div id="dependencies" class="col-sm-6">
<h3>Project dependencies</h3>
<% dependencies.each { %>
<div class="form-group col-xs-6">
<h4>${it.name}</h4>
<% it.content.each { %>
<div class="checkbox">
<div class="checkbox" data-range="${it.versionRange}">
<label>
<input type="checkbox" name="style" value="${it.id}">
${it.name}
@@ -162,16 +162,23 @@
</div>
</form>
</div>
<script src="/js/zepto.min.js"></script>
<script src="/js/start.js"></script>
<script>
var updateAction = function(sel) {
var selected = sel.options[sel.selectedIndex];
sel.form.action = selected.getAttribute("data-action");
var refreshDependencies = function(versionRange) {
var versions = new Versions();
\$("#dependencies div.checkbox").forEach(function(item) {
if(!\$(item).data('range') || versions.matchRange(\$(item).data('range'))(versionRange)) {
\$(item).show();
} else {
\$(item).hide();
}
});
};
var updateBaseDir = function() {
var artifactId = document.getElementById("artifactId");
var baseDir = document.getElementById("baseDir");
baseDir.value = artifactId.value
}
refreshDependencies(\$("#bootVersion").attr('value'));
\$("#type").on('change', function() {\$("#form").attr('action', \$(this.options[this.selectedIndex]).data('action'))});
\$("#artifactId").on('change', function() {\$("#baseDir").attr('value', this.value)});
\$("#bootVersion").on("change", function(e){refreshDependencies(this.value);});
</script>
</body>
</html>