#74 fully adding tags

src/main/resources/public/css/tasks.css

@@ -1,24 +1,65 @@
-.bootstrap-tagsinput{
+.tags-container {
-
     width: 100%;
     padding: .375rem .75rem;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    display: inline-block;
+    color: #555;
+    vertical-align: middle;
+    border-radius: 4px;
+    max-width: 100%;
+    line-height: 22px;
+    cursor: text;
 }
 
-.bootstrap-tagsinput .label{
+.input-tag-name {
-
+    border: none;
-       display: inline;
+    box-shadow: none;
-       padding: .2em .6em .3em;
+    outline: none;
-       font-size: 75%;
+    background-color: transparent;
-       font-weight: 700;
+    padding: 0 6px;
-       line-height: 2.5;
+    margin: 0;
-       color: #fff;
+    width: auto;
-       text-align: center;
+    max-width: inherit;
-       white-space: nowrap;
-       vertical-align: baseline;
-       border-radius: .25em;
 }
 
-.bootstrap-tagsinput .label-info{
+.tag {
+    display: inline-block;
+    padding: .2em .6em .3em;
+    background-color: orange;
+    border-radius: .25em;
+    margin-right: 4px;
+    margin-bottom: 4px;
+
+        font-size: 75%;
+        font-weight: 700;
+        line-height: 1.5;
+        color: #fff;
+}
+
+.tag-name span[data-role="remove"] {
+    margin-left: 8px;
+    cursor: pointer;
+}
+
+.tag-name span[data-role="remove"]:after {
+    content: "x";
+    padding: 0px 2px;
+}
+
+.tag-name input[type="text"] {
+    background: transparent;
+    border: none;
+    display: inline-flex;
+    font-size: 100%;
+    font-weight: 700;
+    line-height: 1.5;
+    color: #fff;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    outline: none;
+    cursor: default;
 
-       background-color: orange;
 }

src/main/resources/public/js/tasks.js

@@ -1,5 +1,75 @@
 /*<![CDATA[*/
 $(document).ready(function () {
+
+    $("#tags .tag .tag-name input[type=text]").each(function() {
+            $(this).attr("size", $(this).val().length)
+        });
+
+
+    $("#task-form").keydown(function(event){
+        if(event.keyCode == 13) {
+          event.preventDefault();
+          return false;
+      }
+    });
+
+    function removeTag () {
+       $(this).parent().parent().remove();
+    }
+
+
+    $("#input-tag").keyup(function (event) {
+        if(event.keyCode == 13 || event.keyCode == 188) {
+            var tagNumber = $("#tags .tag").length;
+            var tagName = $.trim($(this).val());
+            var addTag = true;
+            // проверка, добавлен ли этот тег
+            $("#tags .tag .tag-name input[type=text]").each(function() {
+                    if(tagName === $(this).val()) {
+                        addTag = false;
+                        return;
+                    }
+                });
+            // если тег не добавлен
+            if(addTag) {
+                // контейнер тега
+                var newTagRow = $("<div/>")
+                    .attr("id", 'tags' + tagNumber)
+                    .addClass("tag");
+                // контейнер id
+                var idInput = $("<input/>")
+                    .attr("type", "hidden")
+                    .attr("id", "tags" + tagNumber + ".id")
+                    .attr("name", "tags[" + tagNumber + "].id")
+                    .attr("value", '');
+                // контейнер текста
+                var conDiv = $("<div/>")
+                    .addClass("tag-name");
+                // текст тега
+                var nameInput = $("<input/>")
+                    .attr("type", "text")
+                    .attr("id", "tags" + tagNumber + ".tagName")
+                    .attr("name", "tags[" + tagNumber + "].tagName")
+                    .attr("value", tagName)
+                    .attr("readonly", "true")
+                    .attr("size", tagName.length);
+                // кнопка удалить тег
+                var removeSpan = $("<span/>")
+                    .attr("data-role", "remove")
+                    .bind("click", removeTag);
+
+                conDiv.append(nameInput);
+                conDiv.append(removeSpan);
+                newTagRow.append(idInput);
+                newTagRow.append(conDiv);
+                $(this).before(newTagRow);
+            }
+
+            $(this).val('');
+        }
+    });
+
+    $("span[data-role=remove]").click(removeTag);
     $(".task-row").mouseenter(function (event) {
         var taskRow = $(event.target).closest(".task-row");
         $(taskRow).css("background-color", "#f8f9fa");

src/main/resources/templates/students/task.html

@@ -53,8 +53,18 @@
 
                                 <div class="form-group">
                                     <label for="tags">Теги:</label>
-                                    <input class="form-control" placeholder="Теги задачи" data-role="tagsinput"
+                                    <div class="tags-container" id="tags">
-                                           id="tags" name="tags"/>
+                                        <div class="tag" th:each="tag, rowStat : *{tags}">
+                                            <input type="hidden" th:field="*{tags[__${rowStat.index}__].id}"/>
+                                            <div class="tag-name">
+                                                <input type="text" readonly="true"
+                                                       th:field="*{tags[__${rowStat.index}__].tagName}"/>
+                                                <span data-role="remove"></span>
+                                            </div>
+                                        </div>
+                                        <input class="input-tag-name" type="text" placeholder="Теги задачи"
+                                               id="input-tag"/>
+                                    </div>
                                 </div>
                                 <div class="form-group">
                                     <label>Дедлайны задачи:</label>
@@ -131,7 +141,6 @@
         </div>
         <script src="/js/tasks.js"></script>
     </section>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
 </div>
 </body>
 </html>