/series/add: use selectize.js for choosing country.

Author: php-coder

pom.xml

@@ -41,6 +41,7 @@
 		-->
 		<bootstrap.version>3.3.5</bootstrap.version>
 		<jquery.version>1.9.1</jquery.version>
+		<selectizejs.version>0.12.1</selectizejs.version>
 
 		<testng.version>6.8.8</testng.version>
 		<cglib.version>2.2.2</cglib.version>
@@ -319,6 +320,13 @@
 			<scope>runtime</scope>
 		</dependency>
 
+		<dependency>
+			<groupId>org.webjars</groupId>
+			<artifactId>selectize.js</artifactId>
+			<version>${selectizejs.version}</version>
+			<scope>runtime</scope>
+		</dependency>
+		
 		<dependency>
 			<groupId>org.projectlombok</groupId>
 			<artifactId>lombok</artifactId>

src/main/java/ru/mystamps/web/Url.java

@@ -83,11 +83,18 @@ public final class Url {
 	public static final String BOOTSTRAP_JS           = "/public/bootstrap/js/bootstrap.min.js";
 	public static final String JQUERY_JS              = "/public/jquery/jquery.min.js";
 
-	// see also pom.xml and ru.mystamps.web.config.MvcConfig#addResourceHandlers()
 	// CheckStyle: ignore LineLength for next 3 lines
+	// TODO: use minimal version of CSS file when it will be available (https://github.com/webjars/selectize.js/issues/3)
+	public static final String SELECTIZE_CSS          = "/public/selectize/css/selectize.bootstrap3.css";
+	public static final String SELECTIZE_JS           = "/public/selectize/js/standalone/selectize.min.js";
+	
+	// see also pom.xml and ru.mystamps.web.config.MvcConfig#addResourceHandlers()
+	// CheckStyle: ignore LineLength for next 5 lines
 	public static final String BOOTSTRAP_CSS_CDN     = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css";
 	public static final String BOOTSTRAP_JS_CDN      = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js";
 	public static final String JQUERY_JS_CDN         = "http://yandex.st/jquery/1.9.1/jquery.min.js";
+	public static final String SELECTIZE_CSS_CDN     = "http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.bootstrap3.min.css";
+	public static final String SELECTIZE_JS_CDN      = "http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min.js";
 
 	// see also ru.mystamps.web.support.togglz.TogglzConfig#getTogglzConsole()
 	public static final String TOGGLZ_CONSOLE_PAGE    = "/togglz";
@@ -119,6 +126,8 @@ public static Map<String, String> asMap(boolean serveContentFromSingleHost) {
 			map.put("BOOTSTRAP_CSS", BOOTSTRAP_CSS);
 			map.put("BOOTSTRAP_JS", BOOTSTRAP_JS);
 			map.put("JQUERY_JS", JQUERY_JS);
+			map.put("SELECTIZE_CSS", SELECTIZE_CSS);
+			map.put("SELECTIZE_JS", SELECTIZE_JS);
 			map.put("GET_IMAGE_PAGE", GET_IMAGE_PAGE);
 			map.put("FAVICON_ICO", FAVICON_ICO);
 			map.put("MAIN_CSS", MAIN_CSS);
@@ -134,6 +143,8 @@ public static Map<String, String> asMap(boolean serveContentFromSingleHost) {
 			map.put("BOOTSTRAP_CSS", BOOTSTRAP_CSS_CDN);
 			map.put("BOOTSTRAP_JS", BOOTSTRAP_JS_CDN);
 			map.put("JQUERY_JS", JQUERY_JS_CDN);
+			map.put("SELECTIZE_CSS", SELECTIZE_CSS_CDN);
+			map.put("SELECTIZE_JS", SELECTIZE_JS_CDN);
 		}
 
 		return map;

src/main/java/ru/mystamps/web/config/MvcConfig.java

@@ -69,6 +69,8 @@ public void addResourceHandlers(ResourceHandlerRegistry registry) {
 			.addResourceLocations("classpath:/META-INF/resources/webjars/bootstrap/3.3.5/");
 		registry.addResourceHandler("/public/jquery/**")
 			.addResourceLocations("classpath:/META-INF/resources/webjars/jquery/1.9.1/");
+		registry.addResourceHandler("/public/selectize/**")
+			.addResourceLocations("classpath:/META-INF/resources/webjars/selectize.js/0.12.1/");
 	}
 
 	@Override

src/main/webapp/WEB-INF/views/series/add.html

@@ -11,6 +11,7 @@
 		<link rel="shortcut icon" type="image/x-icon" href="../../../favicon.ico" th:href="${FAVICON_ICO}" />
 		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" th:href="${BOOTSTRAP_CSS}" />
 		<link rel="stylesheet" href="../../static/styles/main.css" th:href="${MAIN_CSS}" />
+		<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.bootstrap3.min.css" th:href="${SELECTIZE_CSS}" />
 	</head>
 	<body lang="en" th:lang="${#locale.language == 'ru' ? 'ru' : 'en'}">
 		<div class="container-fluid">
@@ -408,11 +409,14 @@ <h3 th:text="#{t_add_series_ucfirst}">
 		<!-- Placed at the end of the document so the pages load faster -->
 		<script src="http://yandex.st/jquery/1.9.1/jquery.min.js" th:src="${JQUERY_JS}"></script>
 		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" th:src="${BOOTSTRAP_JS}"></script>
+		<script src="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min.js" th:src="${SELECTIZE_JS}"></script>
 
 		<script src="../../../../javascript/CatalogUtils.js" th:src="${CATALOG_UTILS_JS}"></script>
 
 		<script>
 			$(function() {
+				$('#country').selectize();
+				
 				$('.js-catalog-numbers').on('blur', function() {
 					$(this).val(function(idx, val) {
 						return CatalogUtils.expandNumbers(val);