#74 fully adding tags

This commit is contained in:
ASH 2019-04-14 21:24:22 +04:00
parent d6a11a5902
commit 1f36e04cd3
3 changed files with 139 additions and 19 deletions

View File

@ -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{
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 2.5;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
.input-tag-name {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0 6px;
margin: 0;
width: auto;
max-width: inherit;
}
.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;
}

View File

@ -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");

View File

@ -53,8 +53,18 @@
<div class="form-group">
<label for="tags">Теги:</label>
<input class="form-control" placeholder="Теги задачи" data-role="tagsinput"
id="tags" name="tags"/>
<div class="tags-container" id="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>