Improve new design proposal

* remove previous application header (title, baseline)
* replace it with project type + boot version + generate button
* add keyboard shortcut to generate project with mousetrap
* reinitialize search engine when Boot version changes in order to only
search in compatbile dependencies
* replace standard bootstrap with custom built version
* fix generate shortcut not working in autocomplete

See gh-145
This commit is contained in:
Brian Clozel
2015-09-29 15:42:40 +02:00
committed by Stephane Nicoll
parent 8187ced611
commit d70ca8a6f0
8 changed files with 581 additions and 138 deletions

View File

@@ -16,11 +16,6 @@
package io.spring.initializr.web
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry
import org.springframework.web.servlet.resource.VersionResourceResolver
import javax.servlet.http.HttpServletRequest
import org.springframework.http.HttpHeaders
import org.springframework.http.MediaType
import org.springframework.web.HttpMediaTypeNotAcceptableException
@@ -30,6 +25,8 @@ import org.springframework.web.servlet.config.annotation.ContentNegotiationConfi
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter
import org.springframework.web.util.UrlPathHelper
import javax.servlet.http.HttpServletRequest
/**
* Spring Initializr web configuration.
*

View File

@@ -0,0 +1,401 @@
{
"vars": {
"@gray-base": "#000",
"@gray-darker": "lighten(@gray-base, 13.5%)",
"@gray-dark": "lighten(@gray-base, 20%)",
"@gray": "lighten(@gray-base, 33.5%)",
"@gray-light": "lighten(@gray-base, 46.7%)",
"@gray-lighter": "lighten(@gray-base, 93.5%)",
"@brand-primary": "#6db33f",
"@brand-success": "#5cb85c",
"@brand-info": "#5bc0de",
"@brand-warning": "#f0ad4e",
"@brand-danger": "#d9534f",
"@body-bg": "#fff",
"@text-color": "@gray-dark",
"@link-color": "@brand-primary",
"@link-hover-color": "darken(@link-color, 15%)",
"@link-hover-decoration": "underline",
"@font-family-sans-serif": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
"@font-family-serif": "Georgia, \"Times New Roman\", Times, serif",
"@font-family-monospace": "Menlo, Monaco, Consolas, \"Courier New\", monospace",
"@font-family-base": "@font-family-sans-serif",
"@font-size-base": "14px",
"@font-size-large": "ceil((@font-size-base * 1.25))",
"@font-size-small": "ceil((@font-size-base * 0.85))",
"@font-size-h1": "floor((@font-size-base * 2.6))",
"@font-size-h2": "floor((@font-size-base * 2.15))",
"@font-size-h3": "ceil((@font-size-base * 1.7))",
"@font-size-h4": "ceil((@font-size-base * 1.25))",
"@font-size-h5": "@font-size-base",
"@font-size-h6": "ceil((@font-size-base * 0.85))",
"@line-height-base": "1.428571429",
"@line-height-computed": "floor((@font-size-base * @line-height-base))",
"@headings-font-family": "inherit",
"@headings-font-weight": "500",
"@headings-line-height": "1.1",
"@headings-color": "inherit",
"@icon-font-path": "\"../fonts/\"",
"@icon-font-name": "\"glyphicons-halflings-regular\"",
"@icon-font-svg-id": "\"glyphicons_halflingsregular\"",
"@padding-base-vertical": "6px",
"@padding-base-horizontal": "12px",
"@padding-large-vertical": "10px",
"@padding-large-horizontal": "16px",
"@padding-small-vertical": "5px",
"@padding-small-horizontal": "10px",
"@padding-xs-vertical": "1px",
"@padding-xs-horizontal": "5px",
"@line-height-large": "1.3333333",
"@line-height-small": "1.5",
"@border-radius-base": "4px",
"@border-radius-large": "6px",
"@border-radius-small": "3px",
"@component-active-color": "#fff",
"@component-active-bg": "@brand-primary",
"@caret-width-base": "4px",
"@caret-width-large": "5px",
"@table-cell-padding": "8px",
"@table-condensed-cell-padding": "5px",
"@table-bg": "transparent",
"@table-bg-accent": "#f9f9f9",
"@table-bg-hover": "#f5f5f5",
"@table-bg-active": "@table-bg-hover",
"@table-border-color": "#ddd",
"@btn-font-weight": "normal",
"@btn-default-color": "#333",
"@btn-default-bg": "#fff",
"@btn-default-border": "#ccc",
"@btn-primary-color": "#fff",
"@btn-primary-bg": "@brand-primary",
"@btn-primary-border": "darken(@btn-primary-bg, 5%)",
"@btn-success-color": "#fff",
"@btn-success-bg": "@brand-success",
"@btn-success-border": "darken(@btn-success-bg, 5%)",
"@btn-info-color": "#fff",
"@btn-info-bg": "@brand-info",
"@btn-info-border": "darken(@btn-info-bg, 5%)",
"@btn-warning-color": "#fff",
"@btn-warning-bg": "@brand-warning",
"@btn-warning-border": "darken(@btn-warning-bg, 5%)",
"@btn-danger-color": "#fff",
"@btn-danger-bg": "@brand-danger",
"@btn-danger-border": "darken(@btn-danger-bg, 5%)",
"@btn-link-disabled-color": "@gray-light",
"@btn-border-radius-base": "@border-radius-base",
"@btn-border-radius-large": "@border-radius-large",
"@btn-border-radius-small": "@border-radius-small",
"@input-bg": "#fff",
"@input-bg-disabled": "@gray-lighter",
"@input-color": "@gray",
"@input-border": "#ccc",
"@input-border-radius": "@border-radius-base",
"@input-border-radius-large": "@border-radius-large",
"@input-border-radius-small": "@border-radius-small",
"@input-border-focus": "#66afe9",
"@input-color-placeholder": "#999",
"@input-height-base": "(@line-height-computed + (@padding-base-vertical * 2) + 2)",
"@input-height-large": "(ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2)",
"@input-height-small": "(floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2)",
"@form-group-margin-bottom": "15px",
"@legend-color": "@gray-dark",
"@legend-border-color": "#e5e5e5",
"@input-group-addon-bg": "@gray-lighter",
"@input-group-addon-border-color": "@input-border",
"@cursor-disabled": "not-allowed",
"@dropdown-bg": "#fff",
"@dropdown-border": "rgba(0,0,0,.15)",
"@dropdown-fallback-border": "#ccc",
"@dropdown-divider-bg": "#e5e5e5",
"@dropdown-link-color": "@gray-dark",
"@dropdown-link-hover-color": "darken(@gray-dark, 5%)",
"@dropdown-link-hover-bg": "#f5f5f5",
"@dropdown-link-active-color": "@component-active-color",
"@dropdown-link-active-bg": "@component-active-bg",
"@dropdown-link-disabled-color": "@gray-light",
"@dropdown-header-color": "@gray-light",
"@dropdown-caret-color": "#000",
"@screen-xs": "480px",
"@screen-xs-min": "@screen-xs",
"@screen-phone": "@screen-xs-min",
"@screen-sm": "768px",
"@screen-sm-min": "@screen-sm",
"@screen-tablet": "@screen-sm-min",
"@screen-md": "992px",
"@screen-md-min": "@screen-md",
"@screen-desktop": "@screen-md-min",
"@screen-lg": "1200px",
"@screen-lg-min": "@screen-lg",
"@screen-lg-desktop": "@screen-lg-min",
"@screen-xs-max": "(@screen-sm-min - 1)",
"@screen-sm-max": "(@screen-md-min - 1)",
"@screen-md-max": "(@screen-lg-min - 1)",
"@grid-columns": "12",
"@grid-gutter-width": "30px",
"@grid-float-breakpoint": "@screen-sm-min",
"@grid-float-breakpoint-max": "(@grid-float-breakpoint - 1)",
"@container-tablet": "(720px + @grid-gutter-width)",
"@container-sm": "@container-tablet",
"@container-desktop": "(940px + @grid-gutter-width)",
"@container-md": "@container-desktop",
"@container-large-desktop": "(1140px + @grid-gutter-width)",
"@container-lg": "@container-large-desktop",
"@navbar-height": "50px",
"@navbar-margin-bottom": "@line-height-computed",
"@navbar-border-radius": "@border-radius-base",
"@navbar-padding-horizontal": "floor((@grid-gutter-width / 2))",
"@navbar-padding-vertical": "((@navbar-height - @line-height-computed) / 2)",
"@navbar-collapse-max-height": "340px",
"@navbar-default-color": "#777",
"@navbar-default-bg": "#f8f8f8",
"@navbar-default-border": "darken(@navbar-default-bg, 6.5%)",
"@navbar-default-link-color": "#777",
"@navbar-default-link-hover-color": "#333",
"@navbar-default-link-hover-bg": "transparent",
"@navbar-default-link-active-color": "#555",
"@navbar-default-link-active-bg": "darken(@navbar-default-bg, 6.5%)",
"@navbar-default-link-disabled-color": "#ccc",
"@navbar-default-link-disabled-bg": "transparent",
"@navbar-default-brand-color": "@navbar-default-link-color",
"@navbar-default-brand-hover-color": "darken(@navbar-default-brand-color, 10%)",
"@navbar-default-brand-hover-bg": "transparent",
"@navbar-default-toggle-hover-bg": "#ddd",
"@navbar-default-toggle-icon-bar-bg": "#888",
"@navbar-default-toggle-border-color": "#ddd",
"@navbar-inverse-color": "lighten(@gray-light, 15%)",
"@navbar-inverse-bg": "#222",
"@navbar-inverse-border": "darken(@navbar-inverse-bg, 10%)",
"@navbar-inverse-link-color": "lighten(@gray-light, 15%)",
"@navbar-inverse-link-hover-color": "#fff",
"@navbar-inverse-link-hover-bg": "transparent",
"@navbar-inverse-link-active-color": "@navbar-inverse-link-hover-color",
"@navbar-inverse-link-active-bg": "darken(@navbar-inverse-bg, 10%)",
"@navbar-inverse-link-disabled-color": "#444",
"@navbar-inverse-link-disabled-bg": "transparent",
"@navbar-inverse-brand-color": "@navbar-inverse-link-color",
"@navbar-inverse-brand-hover-color": "#fff",
"@navbar-inverse-brand-hover-bg": "transparent",
"@navbar-inverse-toggle-hover-bg": "#333",
"@navbar-inverse-toggle-icon-bar-bg": "#fff",
"@navbar-inverse-toggle-border-color": "#333",
"@nav-link-padding": "10px 15px",
"@nav-link-hover-bg": "@gray-lighter",
"@nav-disabled-link-color": "@gray-light",
"@nav-disabled-link-hover-color": "@gray-light",
"@nav-tabs-border-color": "#ddd",
"@nav-tabs-link-hover-border-color": "@gray-lighter",
"@nav-tabs-active-link-hover-bg": "@body-bg",
"@nav-tabs-active-link-hover-color": "@gray",
"@nav-tabs-active-link-hover-border-color": "#ddd",
"@nav-tabs-justified-link-border-color": "#ddd",
"@nav-tabs-justified-active-link-border-color": "@body-bg",
"@nav-pills-border-radius": "@border-radius-base",
"@nav-pills-active-link-hover-bg": "@component-active-bg",
"@nav-pills-active-link-hover-color": "@component-active-color",
"@pagination-color": "@link-color",
"@pagination-bg": "#fff",
"@pagination-border": "#ddd",
"@pagination-hover-color": "@link-hover-color",
"@pagination-hover-bg": "@gray-lighter",
"@pagination-hover-border": "#ddd",
"@pagination-active-color": "#fff",
"@pagination-active-bg": "@brand-primary",
"@pagination-active-border": "@brand-primary",
"@pagination-disabled-color": "@gray-light",
"@pagination-disabled-bg": "#fff",
"@pagination-disabled-border": "#ddd",
"@pager-bg": "@pagination-bg",
"@pager-border": "@pagination-border",
"@pager-border-radius": "15px",
"@pager-hover-bg": "@pagination-hover-bg",
"@pager-active-bg": "@pagination-active-bg",
"@pager-active-color": "@pagination-active-color",
"@pager-disabled-color": "@pagination-disabled-color",
"@jumbotron-padding": "30px",
"@jumbotron-color": "inherit",
"@jumbotron-bg": "@gray-lighter",
"@jumbotron-heading-color": "inherit",
"@jumbotron-font-size": "ceil((@font-size-base * 1.5))",
"@jumbotron-heading-font-size": "ceil((@font-size-base * 4.5))",
"@state-success-text": "#3c763d",
"@state-success-bg": "#dff0d8",
"@state-success-border": "darken(spin(@state-success-bg, -10), 5%)",
"@state-info-text": "#31708f",
"@state-info-bg": "#d9edf7",
"@state-info-border": "darken(spin(@state-info-bg, -10), 7%)",
"@state-warning-text": "#8a6d3b",
"@state-warning-bg": "#fcf8e3",
"@state-warning-border": "darken(spin(@state-warning-bg, -10), 5%)",
"@state-danger-text": "#a94442",
"@state-danger-bg": "#f2dede",
"@state-danger-border": "darken(spin(@state-danger-bg, -10), 5%)",
"@tooltip-max-width": "200px",
"@tooltip-color": "#fff",
"@tooltip-bg": "#000",
"@tooltip-opacity": ".9",
"@tooltip-arrow-width": "5px",
"@tooltip-arrow-color": "@tooltip-bg",
"@popover-bg": "#fff",
"@popover-max-width": "276px",
"@popover-border-color": "rgba(0,0,0,.2)",
"@popover-fallback-border-color": "#ccc",
"@popover-title-bg": "darken(@popover-bg, 3%)",
"@popover-arrow-width": "10px",
"@popover-arrow-color": "@popover-bg",
"@popover-arrow-outer-width": "(@popover-arrow-width + 1)",
"@popover-arrow-outer-color": "fadein(@popover-border-color, 5%)",
"@popover-arrow-outer-fallback-color": "darken(@popover-fallback-border-color, 20%)",
"@label-default-bg": "@gray-light",
"@label-primary-bg": "@brand-primary",
"@label-success-bg": "@brand-success",
"@label-info-bg": "@brand-info",
"@label-warning-bg": "@brand-warning",
"@label-danger-bg": "@brand-danger",
"@label-color": "#fff",
"@label-link-hover-color": "#fff",
"@modal-inner-padding": "15px",
"@modal-title-padding": "15px",
"@modal-title-line-height": "@line-height-base",
"@modal-content-bg": "#fff",
"@modal-content-border-color": "rgba(0,0,0,.2)",
"@modal-content-fallback-border-color": "#999",
"@modal-backdrop-bg": "#000",
"@modal-backdrop-opacity": ".5",
"@modal-header-border-color": "#e5e5e5",
"@modal-footer-border-color": "@modal-header-border-color",
"@modal-lg": "900px",
"@modal-md": "600px",
"@modal-sm": "300px",
"@alert-padding": "15px",
"@alert-border-radius": "@border-radius-base",
"@alert-link-font-weight": "bold",
"@alert-success-bg": "@state-success-bg",
"@alert-success-text": "@state-success-text",
"@alert-success-border": "@state-success-border",
"@alert-info-bg": "@state-info-bg",
"@alert-info-text": "@state-info-text",
"@alert-info-border": "@state-info-border",
"@alert-warning-bg": "@state-warning-bg",
"@alert-warning-text": "@state-warning-text",
"@alert-warning-border": "@state-warning-border",
"@alert-danger-bg": "@state-danger-bg",
"@alert-danger-text": "@state-danger-text",
"@alert-danger-border": "@state-danger-border",
"@progress-bg": "#f5f5f5",
"@progress-bar-color": "#fff",
"@progress-border-radius": "@border-radius-base",
"@progress-bar-bg": "@brand-primary",
"@progress-bar-success-bg": "@brand-success",
"@progress-bar-warning-bg": "@brand-warning",
"@progress-bar-danger-bg": "@brand-danger",
"@progress-bar-info-bg": "@brand-info",
"@list-group-bg": "#fff",
"@list-group-border": "#ddd",
"@list-group-border-radius": "@border-radius-base",
"@list-group-hover-bg": "#f5f5f5",
"@list-group-active-color": "@component-active-color",
"@list-group-active-bg": "@component-active-bg",
"@list-group-active-border": "@list-group-active-bg",
"@list-group-active-text-color": "lighten(@list-group-active-bg, 40%)",
"@list-group-disabled-color": "@gray-light",
"@list-group-disabled-bg": "@gray-lighter",
"@list-group-disabled-text-color": "@list-group-disabled-color",
"@list-group-link-color": "#555",
"@list-group-link-hover-color": "@list-group-link-color",
"@list-group-link-heading-color": "#333",
"@panel-bg": "#fff",
"@panel-body-padding": "15px",
"@panel-heading-padding": "10px 15px",
"@panel-footer-padding": "@panel-heading-padding",
"@panel-border-radius": "@border-radius-base",
"@panel-inner-border": "#ddd",
"@panel-footer-bg": "#f5f5f5",
"@panel-default-text": "@gray-dark",
"@panel-default-border": "#ddd",
"@panel-default-heading-bg": "#f5f5f5",
"@panel-primary-text": "#fff",
"@panel-primary-border": "@brand-primary",
"@panel-primary-heading-bg": "@brand-primary",
"@panel-success-text": "@state-success-text",
"@panel-success-border": "@state-success-border",
"@panel-success-heading-bg": "@state-success-bg",
"@panel-info-text": "@state-info-text",
"@panel-info-border": "@state-info-border",
"@panel-info-heading-bg": "@state-info-bg",
"@panel-warning-text": "@state-warning-text",
"@panel-warning-border": "@state-warning-border",
"@panel-warning-heading-bg": "@state-warning-bg",
"@panel-danger-text": "@state-danger-text",
"@panel-danger-border": "@state-danger-border",
"@panel-danger-heading-bg": "@state-danger-bg",
"@thumbnail-padding": "4px",
"@thumbnail-bg": "@body-bg",
"@thumbnail-border": "#ddd",
"@thumbnail-border-radius": "@border-radius-base",
"@thumbnail-caption-color": "@text-color",
"@thumbnail-caption-padding": "9px",
"@well-bg": "#f5f5f5",
"@well-border": "darken(@well-bg, 7%)",
"@badge-color": "#fff",
"@badge-link-hover-color": "#fff",
"@badge-bg": "@gray-light",
"@badge-active-color": "@link-color",
"@badge-active-bg": "#fff",
"@badge-font-weight": "bold",
"@badge-line-height": "1",
"@badge-border-radius": "10px",
"@breadcrumb-padding-vertical": "8px",
"@breadcrumb-padding-horizontal": "15px",
"@breadcrumb-bg": "#f5f5f5",
"@breadcrumb-color": "#ccc",
"@breadcrumb-active-color": "@gray-light",
"@breadcrumb-separator": "\"/\"",
"@carousel-text-shadow": "0 1px 2px rgba(0,0,0,.6)",
"@carousel-control-color": "#fff",
"@carousel-control-width": "15%",
"@carousel-control-opacity": ".5",
"@carousel-control-font-size": "20px",
"@carousel-indicator-active-bg": "#fff",
"@carousel-indicator-border-color": "#fff",
"@carousel-caption-color": "#fff",
"@close-font-weight": "bold",
"@close-color": "#000",
"@close-text-shadow": "0 1px 0 #fff",
"@code-color": "#c7254e",
"@code-bg": "#f9f2f4",
"@kbd-color": "#fff",
"@kbd-bg": "#333",
"@pre-bg": "#f5f5f5",
"@pre-color": "@gray-dark",
"@pre-border-color": "#ccc",
"@pre-scrollable-max-height": "340px",
"@component-offset-horizontal": "180px",
"@text-muted": "@gray-light",
"@abbr-border-color": "@gray-light",
"@headings-small-color": "@gray-light",
"@blockquote-small-color": "@gray-light",
"@blockquote-font-size": "(@font-size-base * 1.25)",
"@blockquote-border-color": "@gray-lighter",
"@page-header-border-color": "@gray-lighter",
"@dl-horizontal-offset": "@component-offset-horizontal",
"@hr-border": "@gray-lighter"
},
"css": [
"print.less",
"type.less",
"code.less",
"grid.less",
"tables.less",
"forms.less",
"buttons.less",
"responsive-utilities.less",
"glyphicons.less",
"button-groups.less",
"input-groups.less",
"labels.less",
"alerts.less",
"close.less"
],
"js": [],
"customizerUrl": "http://getbootstrap.com/customize/?id=f0735eb36e5ceeea4c3b"
}

11
initializr/src/main/resources/static/css/bootstrap-theme.min.css vendored Normal file → Executable file

File diff suppressed because one or more lines are too long

11
initializr/src/main/resources/static/css/bootstrap.min.css vendored Normal file → Executable file

File diff suppressed because one or more lines are too long

View File

@@ -4,37 +4,57 @@ body, h1, h2, h3 {
}
.start-header {
color: #f1f1f1;
background-color: #6db33f;
color: #eee;
background-color: #34302d;
height: auto;
padding: 30px;
background-size: 300px;
padding: 1.5em 0 0 0;
font-size: 20px;
margin-bottom: 40px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
font-size: 25px;
text-align: center;
}
.start-header h1 {
font-family: Montserrat, sans-serif;
font-size: 40px;
line-height: 30px;
margin-bottom: 20px;
text-transform: uppercase;
.start-header select {
font-size: 18px;
}
@media (min-width: 768px) {
.start-header {
background: #6db33f 90% 50% no-repeat;
.start-header .help-block {
font-size: 0.6em;
}
.start-header kbd {
color: #333;
background-color: #ddd;
}
.start-header button {
margin-top: 1em;
}
@media (min-width: 992px) {
.start-header button {
margin-top: 0;
}
}
.baseline {
font-size: 32px;
text-align: center;
margin-bottom: 1em;
.start-main {
margin-top: 300px;
}
.baseline select {
font-size: 20px;
@media (min-width: 768px) {
.start-main {
margin-top: 210px;
}
}
@media (min-width: 992px) {
.start-main {
margin-top: 140px;
}
}
input[type=text] {
@@ -57,14 +77,6 @@ input[type=text] {
margin-left: 0.2em;
}
#starters-list {
margin-top: 8em;
}
.generate {
margin-top: 3em;
}
/* autocomplete */
#autocomplete, .twitter-typeahead, .tt-hint {

View File

@@ -0,0 +1,11 @@
/* mousetrap v1.5.3 craig.is/killing/mice */
(function(C,r,g){function t(a,b,h){a.addEventListener?a.addEventListener(b,h,!1):a.attachEvent("on"+b,h)}function x(a){if("keypress"==a.type){var b=String.fromCharCode(a.which);a.shiftKey||(b=b.toLowerCase());return b}return l[a.which]?l[a.which]:p[a.which]?p[a.which]:String.fromCharCode(a.which).toLowerCase()}function D(a){var b=[];a.shiftKey&&b.push("shift");a.altKey&&b.push("alt");a.ctrlKey&&b.push("ctrl");a.metaKey&&b.push("meta");return b}function u(a){return"shift"==a||"ctrl"==a||"alt"==a||
"meta"==a}function y(a,b){var h,c,e,g=[];h=a;"+"===h?h=["+"]:(h=h.replace(/\+{2}/g,"+plus"),h=h.split("+"));for(e=0;e<h.length;++e)c=h[e],z[c]&&(c=z[c]),b&&"keypress"!=b&&A[c]&&(c=A[c],g.push("shift")),u(c)&&g.push(c);h=c;e=b;if(!e){if(!k){k={};for(var m in l)95<m&&112>m||l.hasOwnProperty(m)&&(k[l[m]]=m)}e=k[h]?"keydown":"keypress"}"keypress"==e&&g.length&&(e="keydown");return{key:c,modifiers:g,action:e}}function B(a,b){return null===a||a===r?!1:a===b?!0:B(a.parentNode,b)}function c(a){function b(a){a=
a||{};var b=!1,n;for(n in q)a[n]?b=!0:q[n]=0;b||(v=!1)}function h(a,b,n,f,c,h){var g,e,l=[],m=n.type;if(!d._callbacks[a])return[];"keyup"==m&&u(a)&&(b=[a]);for(g=0;g<d._callbacks[a].length;++g)if(e=d._callbacks[a][g],(f||!e.seq||q[e.seq]==e.level)&&m==e.action){var k;(k="keypress"==m&&!n.metaKey&&!n.ctrlKey)||(k=e.modifiers,k=b.sort().join(",")===k.sort().join(","));k&&(k=f&&e.seq==f&&e.level==h,(!f&&e.combo==c||k)&&d._callbacks[a].splice(g,1),l.push(e))}return l}function g(a,b,n,f){d.stopCallback(b,
b.target||b.srcElement,n,f)||!1!==a(b,n)||(b.preventDefault?b.preventDefault():b.returnValue=!1,b.stopPropagation?b.stopPropagation():b.cancelBubble=!0)}function e(a){"number"!==typeof a.which&&(a.which=a.keyCode);var b=x(a);b&&("keyup"==a.type&&w===b?w=!1:d.handleKey(b,D(a),a))}function l(a,c,n,f){function e(c){return function(){v=c;++q[a];clearTimeout(k);k=setTimeout(b,1E3)}}function h(c){g(n,c,a);"keyup"!==f&&(w=x(c));setTimeout(b,10)}for(var d=q[a]=0;d<c.length;++d){var p=d+1===c.length?h:e(f||
y(c[d+1]).action);m(c[d],p,f,a,d)}}function m(a,b,c,f,e){d._directMap[a+":"+c]=b;a=a.replace(/\s+/g," ");var g=a.split(" ");1<g.length?l(a,g,b,c):(c=y(a,c),d._callbacks[c.key]=d._callbacks[c.key]||[],h(c.key,c.modifiers,{type:c.action},f,a,e),d._callbacks[c.key][f?"unshift":"push"]({callback:b,modifiers:c.modifiers,action:c.action,seq:f,level:e,combo:a}))}var d=this;a=a||r;if(!(d instanceof c))return new c(a);d.target=a;d._callbacks={};d._directMap={};var q={},k,w=!1,p=!1,v=!1;d._handleKey=function(a,
c,e){var f=h(a,c,e),d;c={};var k=0,l=!1;for(d=0;d<f.length;++d)f[d].seq&&(k=Math.max(k,f[d].level));for(d=0;d<f.length;++d)f[d].seq?f[d].level==k&&(l=!0,c[f[d].seq]=1,g(f[d].callback,e,f[d].combo,f[d].seq)):l||g(f[d].callback,e,f[d].combo);f="keypress"==e.type&&p;e.type!=v||u(a)||f||b(c);p=l&&"keydown"==e.type};d._bindMultiple=function(a,b,c){for(var d=0;d<a.length;++d)m(a[d],b,c)};t(a,"keypress",e);t(a,"keydown",e);t(a,"keyup",e)}var l={8:"backspace",9:"tab",13:"enter",16:"shift",17:"ctrl",18:"alt",
20:"capslock",27:"esc",32:"space",33:"pageup",34:"pagedown",35:"end",36:"home",37:"left",38:"up",39:"right",40:"down",45:"ins",46:"del",91:"meta",93:"meta",224:"meta"},p={106:"*",107:"+",109:"-",110:".",111:"/",186:";",187:"=",188:",",189:"-",190:".",191:"/",192:"`",219:"[",220:"\\",221:"]",222:"'"},A={"~":"`","!":"1","@":"2","#":"3",$:"4","%":"5","^":"6","&":"7","*":"8","(":"9",")":"0",_:"-","+":"=",":":";",'"':"'","<":",",">":".","?":"/","|":"\\"},z={option:"alt",command:"meta","return":"enter",
escape:"esc",plus:"+",mod:/Mac|iPod|iPhone|iPad/.test(navigator.platform)?"meta":"ctrl"},k;for(g=1;20>g;++g)l[111+g]="f"+g;for(g=0;9>=g;++g)l[g+96]=g;c.prototype.bind=function(a,b,c){a=a instanceof Array?a:[a];this._bindMultiple.call(this,a,b,c);return this};c.prototype.unbind=function(a,b){return this.bind.call(this,a,function(){},b)};c.prototype.trigger=function(a,b){if(this._directMap[a+":"+b])this._directMap[a+":"+b]({},a);return this};c.prototype.reset=function(){this._callbacks={};this._directMap=
{};return this};c.prototype.stopCallback=function(a,b){return-1<(" "+b.className+" ").indexOf(" mousetrap ")||B(b,this.target)?!1:"INPUT"==b.tagName||"SELECT"==b.tagName||"TEXTAREA"==b.tagName||b.isContentEditable};c.prototype.handleKey=function(){return this._handleKey.apply(this,arguments)};c.init=function(){var a=c(r),b;for(b in a)"_"!==b.charAt(0)&&(c[b]=function(b){return function(){return a[b].apply(a,arguments)}}(b))};c.init();C.Mousetrap=c;"undefined"!==typeof module&&module.exports&&(module.exports=
c);"function"===typeof define&&define.amd&&define(function(){return c})})(window,document);

View File

@@ -1,42 +1,43 @@
(function() {
(function () {
Versions = 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) {
Versions.prototype.matchRange = function (range) {
var strict_match = range.match(strict_range);
if(strict_match) {
return function(version) {
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) {
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) {
if (hol_match) {
return function (version) {
return compareVersions(hol_match[1], version) < 0
&& compareVersions(hol_match[2], version) >= 0;
}
}
return function(version) {
return function (version) {
return compareVersions(range, version) <= 0;
}
};
function parseQualifier(version) {
var qual = version.replace(/\d+/g,"");
var qual = version.replace(/\d+/g, "");
return qualifiers.indexOf(qual) != -1 ? qual : "RELEASE";
}
@@ -45,14 +46,16 @@
var versionA = a.split(".");
var versionB = b.split(".");
for(var i=0; i < 3; i++) {
for (var i = 0; i < 3; i++) {
result = parseInt(versionA[i], 10) - parseInt(versionB[i], 10);
if (result != 0) { return result;}
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) {
if (result != 0) {
return result;
}
return versionA[3].localeCompare(versionB[3]);
@@ -61,6 +64,13 @@
}());
$(function () {
if (navigator.appVersion.indexOf("Mac") != -1) {
$("#shortcut").html("or <kbd>command</kbd> + <kbd>enter</kbd>")
}
else {
$("#shortcut").html("or <kbd>ctrl</kbd> + <kbd>enter</kbd>")
}
var refreshDependencies = function (versionRange) {
var versions = new Versions();
$("#dependencies div.checkbox").each(function (idx, item) {
@@ -80,7 +90,13 @@ $(function () {
};
var removeTag = function (id) {
$("#starters div[data-id='" + id + "']").remove();
}
};
var initializeSearchEngine = function (engine, bootVersion) {
$.getJSON("/dependencies.json?version=" + bootVersion, function (data) {
engine.clear();
engine.add(data);
});
};
refreshDependencies($("#bootVersion").val());
$("#type").on('change', function () {
$("#form").attr('action', $(this.options[this.selectedIndex]).attr('data-action'))
@@ -90,31 +106,33 @@ $(function () {
});
$("#bootVersion").on("change", function (e) {
refreshDependencies(this.value);
initializeSearchEngine(starters, this.value);
});
var starters = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name', 'description'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
identify: function (obj) {
return obj.id;
},
cache: false,
//local: startersjson
prefetch: '/dependencies.json'
sorter: function(a,b) {
return 0;
},
cache: false
});
$('#autocomplete').typeahead(null, {
name: 'starters',
display: 'name',
source: starters,
templates: {
suggestion: function (data) {
return "<div><strong>" + data.name + "</strong><br/><small>" + data.description + "</small></div>";
initializeSearchEngine(starters, $("#bootVersion").val());
$('#autocomplete').typeahead(
{
minLength: 2
}, {
name: 'starters',
display: 'name',
source: starters,
templates: {
suggestion: function (data) {
return "<div><strong>" + data.name + "</strong><br/><small>" + data.description + "</small></div>";
}
}
}
});
$('#autocomplete').bind('keypress', function (event) {
return event.keyCode != 13;
});
});
$('#autocomplete').bind('typeahead:select', function (ev, suggestion) {
var versions = new Versions();
var bootVersion = $("#bootVersion").val();
@@ -144,4 +162,20 @@ $(function () {
removeTag(value);
}
});
Mousetrap.bind(['command+enter', 'ctrl+enter'], function (e) {
$("#form").submit();
return false;
});
var autocompleteTrap = new Mousetrap($("#autocomplete").get(0));
autocompleteTrap.bind(['command+enter', 'ctrl+enter'], function (e) {
$("#form").submit();
return false;
});
autocompleteTrap.bind("enter", function(e) {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
});
});

View File

@@ -10,50 +10,39 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="start-header">
<div class="container">
<h1>Spring Initializr</h1>
<p>Bootstrap your application now</p>
</div>
<a href="https://github.com/spring-io/initializr" target="_blank">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png">
</a>
</div>
</div>
<div class="container">
<form id="form" action="/starter.zip" method="get" role="form">
<input id="baseDir" name="baseDir" type="hidden" value="${artifactId.content}">
<div class="row baseline form-inline">
<div class="form-group">Generate a
<select class="form-control" id="type" name="type">
<% types.content.each { %>
<option data-action="${it.action}" value="${it.id}" ${it.default==true ?
' selected' : ''}>${it.name}</option>
<% } %>
</select>
with Spring Boot
<select class="form-control" name="bootVersion" id="bootVersion">
<% bootVersions.content.each { %>
<option value="${it.id}" ${it.default==true ?
' selected' : ''}>${it.name}</option>
<% } %>
</select>
and JDK
<select class="form-control" name="javaVersion" id="javaVersion">
<% javaVersions.content.each { %>
<option value="${it.id}" ${it.default==true ?
' selected' : ''}>${it.name}</option>
<% } %>
</select>
<form id="form" action="/starter.zip" method="get" role="form">
<div class="container-fluid">
<div class="row">
<div class="start-header">
<div class="row baseline form-inline">
<div class="form-group col-md-9">Generate a
<select class="form-control" id="type" name="type">
<% types.content.each { %>
<option data-action="${it.action}" value="${it.id}" ${it.default==true ?
' selected' : ''}>${it.name}</option>
<% } %>
</select>
with Spring Boot
<select class="form-control" name="bootVersion" id="bootVersion">
<% bootVersions.content.each { %>
<option value="${it.id}" ${it.default==true ?
' selected' : ''}>${it.name}</option>
<% } %>
</select>
</div>
<div class="col-md-3">
<button name="generate-project" type="submit" class="btn btn-lg btn-primary" role="button">
<span class="glyphicon glyphicon-download"></span> Generate Project
</button>
<p class="help-block" id="shortcut"></p>
</div>
</div>
</div>
</div>
<div class="container start-main">
<input id="baseDir" name="baseDir" type="hidden" value="${artifactId.content}">
<div class="row">
<h2>Project Metadata</h2>
@@ -94,6 +83,14 @@
<% } %>
</select>
</div>
<div class="form-group">
<label for="javaVersion" class="control-label">${javaVersions.title}</label>
<select class="form-control" name="javaVersion" id="javaVersion">
<% javaVersions.content.each { %>
<option value="${it.id}" ${it.default==true ? ' selected' : ''}>${it.name}</option>
<% } %>
</select>
</div>
<div class="form-group">
<label for="language" class="control-label">${languages.title}</label>
<select class="form-control" name="language" id="language">
@@ -115,14 +112,6 @@
<input id="autocomplete" class="form-control" type="text" placeholder="Search for Starters"
name="autocomplete">
</div>
<div class="message">
<div class="alert alert-warning invisible" role="alert">This dependency is not available for the
chosen Boot version.
</div>
</div>
<p class="text-center">
Or check out <a href="#starters-list">the complete list of dependencies.</a>
</p>
</div>
<div class="form-group col-md-6 col-sm-12">
<div id="starters">
@@ -130,20 +119,7 @@
</div>
</div>
<div class="row">
<p class="text-center">
<button name="generate-project" type="submit" class="btn btn-lg btn-primary generate" role="button">
<span class="glyphicon glyphicon-download"></span> Generate Project
</button>
</p>
</div>
<div class="row">
<div id="starters-list" class="page-header">
<h2>${dependencies.title}</h2>
</div>
<div id="dependencies">
<% dependencies.content.each { %>
<div class="form-group col-sm-6">
<h3>${it.name}</h3>
@@ -160,18 +136,12 @@
<% } %>
</div>
</div>
<div class="row">
<p class="text-center">
<button name="generate-project" type="submit" class="btn btn-lg btn-primary generate" role="button">
<span class="glyphicon glyphicon-download"></span> Generate Project
</button>
</p>
</div>
</form>
</div>
</div>
</div>
</form>
<script src="/js/jquery-1.11.3.min.js"></script>
<script src="/js/typeahead.bundle.min.js"></script>
<script src="/js/mousetrap.min.js"></script>
<script src="/js/start.js"></script>
</body>
</html>