Added tags input field

2026-05-26 13:51:13 +00:00 · 2019-08-22 13:44:55 +03:00
parent 49942a13dd
commit a6a225ded0
9 changed files with 176 additions and 9 deletions
@@ -5,7 +5,98 @@
        {
            selector: 'data-forms-tags',
            controller: function(element) {
+                let array   = [];
+                let tags    = window.document.createElement('div');
+                let preview = window.document.createElement('ul');
+                let add     = window.document.createElement('input');
                
+                tags.className = 'tags';
+                
+                preview.className = 'tags-list';
+
+                add.type = 'text';
+                add.className = 'add';
+                
+                //add.required = element.required;
+
+                tags.addEventListener('click', function() {
+                    add.focus();
+                });
+
+                add.addEventListener('keydown', function(event) {
+                    if (((event.key === "Enter" || event.key === " ")) && (add.value.length > 0)) {
+                        array.push(add.value);
+                        
+                        add.value = '';
+                        
+                        element.value = JSON.stringify(array);
+                        
+                        check();
+
+                        event.preventDefault();
+                    }
+                    if (((event.key === "Backspace" || event.key === "Delete")) && (add.value === '')) {
+                        array.splice(-1, 1)
+                        
+                        element.value = JSON.stringify(array);
+                        
+                        check();
+                    }
+
+                    return false;
+                });
+
+                let check = function() {
+                    try {
+                        array = JSON.parse(element.value) || [];
+                    }
+                    catch(error) {
+                        console.log('error', element.value);
+                        array = [];
+                    }
+
+                    if(!Array.isArray(array)) {
+                        array = [];
+                    }
+
+                    preview.innerHTML = '';
+
+                    for (let index = 0; index < array.length; index++) {
+                        let value = array[index];
+                        let tag = window.document.createElement('li');
+
+                        tag.className = 'tag';
+                        tag.textContent = value;
+
+                        tag.addEventListener('click', function () {
+                            console.log(index);
+                            
+                            array.splice(index, 1);
+
+                            element.value = JSON.stringify(array);
+
+                            check();
+                        });
+
+                        preview.appendChild(tag);
+                    }
+
+                    if(element.required && array.length === 0) {
+                        add.setCustomValidity('Please add permissions');
+                    }
+                    else {
+                        add.setCustomValidity('');
+                    }
+                };
+
+                tags.appendChild(preview);
+                tags.appendChild(add);
+
+                element.parentNode.insertBefore(tags, element);
+
+                element.addEventListener('change', check);
+
+                check();
            }
        }
    );