Added selectize lib for creating taggable input field.

Author: jozefizso

src/Properties/launchSettings.json

@@ -2,9 +2,8 @@
   "profiles": {
     "IIS Express": {
       "commandName": "IISExpress",
-      "launchBrowser": true,
       "environmentVariables": {
-        "ASPNET_ENV": "dev"
+        "ASPNET_ENV": "prod"
       }
     }
   }

src/Views/Home/Index.cshtml

@@ -3,3 +3,16 @@
 }
 
 <p>Create <code>.gitattributes</code> files for your project.</p>
+
+<p>
+  <input type="text" id="select">
+</p>
+
+<script>
+  $(document).ready(function() {
+    $('#select').selectize({
+      plugins: ['restore_on_backspace', 'remove_button'],
+      delimiter: ','
+    });
+  })
+</script>

src/Views/Shared/_Layout.cshtml

@@ -7,6 +7,10 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>@AppSettings.Options.SiteTitle - @ViewBag.Title</title>
+  <link rel="stylesheet" type="text/css" href="~/lib/selectize/css/selectize.css">
+  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+  <script type="text/javascript" src="~/lib/selectize/js/selectize.js"></script>
+
   <environment names="prod">
     @Html.ApplicationInsightsJavaScript(TelemetryConfiguration)
   </environment>

src/bower.json

@@ -2,5 +2,14 @@
   "name": "gitattributes.io",
   "private": true,
   "dependencies": {
+    "selectize": "0.12.1"
+  },
+  "overrides": {
+    "selectize": {
+      "main": [
+        "./dist/css/*",
+        "./dist/js/standalone/*"
+      ]
+    }
   }
 }

src/gulpfile.js

@@ -3,6 +3,8 @@
 var gulp = require("gulp"),
   del = require("del"),
   fs = require("fs");
+var bower = require("main-bower-files");
+var bowerNormalize = require("gulp-bower-normalize");
 
 eval("var project = " + fs.readFileSync("./project.json"));
 
@@ -17,6 +19,10 @@ gulp.task("clean", function (cb) {
 });
 
 gulp.task("copy", ["clean"], function () {
-  return gulp.src('./data/gitattributes/*.gitattributes')
-    .pipe(gulp.dest(paths.data));
+  gulp.src('./data/gitattributes/*.gitattributes')
+   .pipe(gulp.dest(paths.data));
+
+  return gulp.src(bower(), { base: paths.bower })
+    .pipe(bowerNormalize())
+    .pipe(gulp.dest(paths.lib));
 });

src/package.json

@@ -4,6 +4,8 @@
   "devDependencies": {
     "del": "^1.1.1",
     "gulp": "3.8.11",
-    "rimraf": "^2.3.3"
+    "rimraf": "^2.3.3",
+    "gulp-bower-normalize": "^1.0.5",
+    "main-bower-files": "^2.7.0"
   }
 }

src/wwwroot/_references.js

@@ -1,2 +1,3 @@
 /// <autosync enabled="true" />
 /// <reference path="../gulpfile.js" />
+/// <reference path="lib/selectize/js/selectize.js" />