mirror_php/formwork
1
0
Fork 0
mirror of https://github.com/getformwork/formwork.git synced 2025-02-24 09:42:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve tags field

Browse Source
This commit is contained in:
Giuseppe Criscione 2019-10-11 11:55:38 +02:00
parent 6381af3251
commit 9150308ba0
3 changed files with 171 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
admin/assets/js/app.js Normal file → Executable file
View File

@ -1472,62 +1472,59 @@ Formwork.Utils = {
(function ($) {
$.fn.tagInput = function () {
function _update($input) {
var $parent = $input.parent();
$('.tag-hidden-input', $parent).val($parent.data('tags').join(', '));
_placeholder($input);
}
function _placeholder($input) {
var $parent = $input.parent();
var placeholder = $input.data('placeholder');
if (placeholder.length > 0) {
if ($parent.data('tags').length === 0) {
$input.attr('placeholder', placeholder);
$input.prop('size', placeholder.length);
} else {
$input.attr('placeholder', '');
$input.prop('size', 1);
}
}
}
function _createTag($input, value) {
$input.before('\n<span class="tag">' + value + '<i class="tag-remove"></i></span>');
}
function addTag($input, value) {
if ($input.parent().data('tags').indexOf(value) === -1) {
$input.parent().data('tags').push(value);
_createTag($input, value);
_update($input);
}
$input.val('');
}
function removeTag($input, value) {
var tags = $input.parent().data('tags');
var index = tags.indexOf(value);
if (index > -1) {
tags.splice(index, 1);
$input.parent().data('tags', tags);
_update($input);
}
}
this.each(function () {
var $this = $(this);
var $target = $('.tag-hidden-input', $this);
var $input = $('.tag-inner-input', $this);
var tags = [];
function _update() {
$target.val($this.data('tags').join(', '));
_placeholder();
}
function _placeholder() {
var placeholder = $input.data('placeholder');
if (placeholder.length > 0) {
if ($this.data('tags').length === 0) {
$input.attr('placeholder', placeholder);
$input.prop('size', placeholder.length);
} else {
$input.attr('placeholder', '');
$input.prop('size', 1);
}
}
}
function _createTag(value) {
$input.before('\n<span class="tag">' + value + '<i class="tag-remove"></i></span>');
}
function addTag(value) {
if ($this.data('tags').indexOf(value) === -1) {
$this.data('tags').push(value);
_createTag(value);
_update();
}
$input.val('');
}
function removeTag(value) {
var tags = $input.parent().data('tags');
var index = tags.indexOf(value);
if (index > -1) {
tags.splice(index, 1);
$this.data('tags', tags);
_update();
}
}
if ($target.val()) {
tags = $target.val().split(', ');
$.each(tags, function (index, value) {
value = value.trim();
tags[index] = value;
_createTag($input, value);
_createTag(value);
});
}
@ -1535,64 +1532,61 @@ Formwork.Utils = {
.on('mousedown', '.tag-remove', false)
.on('click', '.tag-remove', function () {
var $tag = $(this).parent();
removeTag($input, $tag.text());
removeTag($tag.text());
$tag.remove();
return false;
});
if ($input.attr('placeholder') !== undefined) {
$input.data('placeholder', $input.attr('placeholder'));
_placeholder($input);
_placeholder();
} else {
$input.data('placeholder', '');
}
});
this.on('mousedown', function () {
$('.tag-inner-input', this).trigger('focus');
return false;
});
$('.tag-inner-input', this).on('focus', function () {
$(this).parent().addClass('focused');
}).on('blur', function () {
var $this = $(this);
var value = $this.val().trim();
if (value !== '') {
addTag($this, value);
}
$this.parent().removeClass('focused');
}).on('keydown', function (event) {
var options = {addKeyCodes: [32]};
var $this = $(this);
var value = $this.val().trim();
switch (event.which) {
case 8: // backspace
if (value === '') {
removeTag($this, $this.prev().text());
$this.prev().remove();
return false;
}
$this.prop('size', Math.max($this.val().length, $this.attr('placeholder').length, 1));
return true;
case 13: // enter
case 188: // comma
if (value !== '') {
addTag($this, value);
}
$this.on('mousedown', function () {
$input.trigger('focus');
return false;
default:
if (value !== '' && options.addKeyCodes.indexOf(event.which) > -1) {
addTag($this, value);
return false;
}
if (value.length > 0) {
$this.prop('size', $this.val().length + 2);
}
break;
}
});
$input.on('focus', function () {
$this.addClass('focused');
}).on('blur', function () {
var value = $input.val().trim();
if (value !== '') {
addTag(value);
}
$this.removeClass('focused');
}).on('keydown', function (event) {
var options = {addKeyCodes: [32]};
var value = $input.val().trim();
switch (event.which) {
case 8: // backspace
if (value === '') {
removeTag($input.prev().text());
$input.prev().remove();
return false;
}
$input.prop('size', Math.max($input.val().length, $input.attr('placeholder').length, 1));
return true;
case 13: // enter
case 188: // comma
if (value !== '') {
addTag(value);
}
return false;
default:
if (value !== '' && options.addKeyCodes.indexOf(event.which) > -1) {
addTag(value);
return false;
}
if (value.length > 0) {
$input.prop('size', $input.val().length + 2);
}
break;
}
});
});
};
}(jQuery));

2
admin/assets/js/app.min.js vendored Normal file → Executable file
View File

File diff suppressed because one or more lines are too long

176
admin/assets/js/src/plugins/taginput.js
View File

@ -1,61 +1,58 @@
(function ($) {
$.fn.tagInput = function () {
function _update($input) {
var $parent = $input.parent();
$('.tag-hidden-input', $parent).val($parent.data('tags').join(', '));
_placeholder($input);
}
function _placeholder($input) {
var $parent = $input.parent();
var placeholder = $input.data('placeholder');
if (placeholder.length > 0) {
if ($parent.data('tags').length === 0) {
$input.attr('placeholder', placeholder);
$input.prop('size', placeholder.length);
} else {
$input.attr('placeholder', '');
$input.prop('size', 1);
}
}
}
function _createTag($input, value) {
$input.before('\n<span class="tag">' + value + '<i class="tag-remove"></i></span>');
}
function addTag($input, value) {
if ($input.parent().data('tags').indexOf(value) === -1) {
$input.parent().data('tags').push(value);
_createTag($input, value);
_update($input);
}
$input.val('');
}
function removeTag($input, value) {
var tags = $input.parent().data('tags');
var index = tags.indexOf(value);
if (index > -1) {
tags.splice(index, 1);
$input.parent().data('tags', tags);
_update($input);
}
}
this.each(function () {
var $this = $(this);
var $target = $('.tag-hidden-input', $this);
var $input = $('.tag-inner-input', $this);
var tags = [];
function _update() {
$target.val($this.data('tags').join(', '));
_placeholder();
}
function _placeholder() {
var placeholder = $input.data('placeholder');
if (placeholder.length > 0) {
if ($this.data('tags').length === 0) {
$input.attr('placeholder', placeholder);
$input.prop('size', placeholder.length);
} else {
$input.attr('placeholder', '');
$input.prop('size', 1);
}
}
}
function _createTag(value) {
$input.before('\n<span class="tag">' + value + '<i class="tag-remove"></i></span>');
}
function addTag(value) {
if ($this.data('tags').indexOf(value) === -1) {
$this.data('tags').push(value);
_createTag(value);
_update();
}
$input.val('');
}
function removeTag(value) {
var tags = $input.parent().data('tags');
var index = tags.indexOf(value);
if (index > -1) {
tags.splice(index, 1);
$this.data('tags', tags);
_update();
}
}
if ($target.val()) {
tags = $target.val().split(', ');
$.each(tags, function (index, value) {
value = value.trim();
tags[index] = value;
_createTag($input, value);
_createTag(value);
});
}
@ -63,64 +60,61 @@
.on('mousedown', '.tag-remove', false)
.on('click', '.tag-remove', function () {
var $tag = $(this).parent();
removeTag($input, $tag.text());
removeTag($tag.text());
$tag.remove();
return false;
});
if ($input.attr('placeholder') !== undefined) {
$input.data('placeholder', $input.attr('placeholder'));
_placeholder($input);
_placeholder();
} else {
$input.data('placeholder', '');
}
});
this.on('mousedown', function () {
$('.tag-inner-input', this).trigger('focus');
return false;
});
$('.tag-inner-input', this).on('focus', function () {
$(this).parent().addClass('focused');
}).on('blur', function () {
var $this = $(this);
var value = $this.val().trim();
if (value !== '') {
addTag($this, value);
}
$this.parent().removeClass('focused');
}).on('keydown', function (event) {
var options = {addKeyCodes: [32]};
var $this = $(this);
var value = $this.val().trim();
switch (event.which) {
case 8: // backspace
if (value === '') {
removeTag($this, $this.prev().text());
$this.prev().remove();
return false;
}
$this.prop('size', Math.max($this.val().length, $this.attr('placeholder').length, 1));
return true;
case 13: // enter
case 188: // comma
if (value !== '') {
addTag($this, value);
}
$this.on('mousedown', function () {
$input.trigger('focus');
return false;
default:
if (value !== '' && options.addKeyCodes.indexOf(event.which) > -1) {
addTag($this, value);
return false;
}
if (value.length > 0) {
$this.prop('size', $this.val().length + 2);
}
break;
}
});
$input.on('focus', function () {
$this.addClass('focused');
}).on('blur', function () {
var value = $input.val().trim();
if (value !== '') {
addTag(value);
}
$this.removeClass('focused');
}).on('keydown', function (event) {
var options = {addKeyCodes: [32]};
var value = $input.val().trim();
switch (event.which) {
case 8: // backspace
if (value === '') {
removeTag($input.prev().text());
$input.prev().remove();
return false;
}
$input.prop('size', Math.max($input.val().length, $input.attr('placeholder').length, 1));
return true;
case 13: // enter
case 188: // comma
if (value !== '') {
addTag(value);
}
return false;
default:
if (value !== '' && options.addKeyCodes.indexOf(event.which) > -1) {
addTag(value);
return false;
}
if (value.length > 0) {
$input.prop('size', $input.val().length + 2);
}
break;
}
});
});
};
}(jQuery));