bulma-extensions/bulma-tagsinput/dist/bulma-tagsinput.min.js

Set of extensions for Bulma.io CSS Framework

"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function _createClass(e,t,i){return t&&_defineProperties(e.prototype,t),i&&_defineProperties(e,i),e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0,"function"!=typeof Object.assign&&Object.defineProperty(Object,"assign",{value:function(e,t){if(null==e)throw new TypeError("Cannot convert undefined or null to object");for(var i=Object(e),n=1;n<arguments.length;n++){var s=arguments[n];if(null!=s)for(var a in s)Object.prototype.hasOwnProperty.call(s,a)&&(i[a]=s[a])}return i},writable:!0,configurable:!0});var MOUSE_EVENTS=["click","touchstart"],KEY_BACKSPACE=8,KEY_TAB=9,KEY_ENTER=13,KEY_LEFT=37,KEY_RIGHT=39,KEY_DELETE=46,KEY_COMMA=188,Tagify=function(){function e(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};_classCallCheck(this,e);this.element=t,this.options=Object.assign({},{disabled:!1,delimiter:",",allowDelete:!0,lowercase:!1,uppercase:!1,duplicates:!0},i),this.init()}return _createClass(e,[{key:"init",value:function(){if(!this.options.disabled){this.tags=[],this.container=document.createElement("div"),this.container.className="tagsinput",this.container.classList.add("field"),this.container.classList.add("is-grouped"),this.container.classList.add("is-grouped-multiline"),this.container.classList.add("input");var e=this.element.getAttribute("type");e&&"tags"!==e||(e="text"),this.input=document.createElement("input"),this.input.setAttribute("type",e),this.element.getAttribute("placeholder")?this.input.setAttribute("placeholder",this.element.getAttribute("placeholder")):this.input.setAttribute("placeholder","Add a Tag"),this.container.appendChild(this.input);var t=this.element.nextSibling;this.element.parentNode[t?"insertBefore":"appendChild"](this.container,t),this.element.style.cssText="position:absolute;left:0;top:0;width:1px;height:1px;opacity:0.01;",this.element.tabIndex=-1,this.enable()}}},{key:"enable",value:function(){var e=this;this.enabled||this.options.disabled||(this.element.addEventListener("focus",function(){e.container.classList.add("is-focused"),e.select(Array.prototype.slice.call(e.container.querySelectorAll(".tag:not(.is-delete)")).pop())}),this.input.addEventListener("focus",function(){e.container.classList.add("is-focused"),e.select(Array.prototype.slice.call(e.container.querySelectorAll(".tag:not(.is-delete)")).pop())}),this.input.addEventListener("blur",function(){e.container.classList.remove("is-focused"),e.select(Array.prototype.slice.call(e.container.querySelectorAll(".tag:not(.is-delete)")).pop()),e.savePartial()}),this.input.addEventListener("keydown",function(t){var i,n=t.charCode||t.keyCode||t.which,s=e.container.querySelector(".tag.is-active"),a=Array.prototype.slice.call(e.container.querySelectorAll(".tag:not(.is-delete)")).pop(),r=e.caretAtStart(e.input);if(s&&(i=e.container.querySelector('[data-tag="'+s.innerHTML.trim()+'"]')),e.setInputWidth(),n===KEY_ENTER||n===e.options.delimiter.charCodeAt(0)||n===KEY_COMMA||n===KEY_TAB){if(!e.input.value&&(n!==e.options.delimiter.charCodeAt(0)||n===KEY_COMMA))return;e.savePartial()}else if(n===KEY_DELETE&&i)i.nextSibling?e.select(i.nextSibling.querySelector(".tag")):i.previousSibling&&e.select(i.previousSibling.querySelector(".tag")),e.container.removeChild(i),delete e.tags[e.tags.indexOf(i.getAttribute("data-tag"))],e.setInputWidth(),e.save();else if(n===KEY_BACKSPACE)if(i)i.previousSibling?e.select(i.previousSibling.querySelector(".tag")):i.nextSibling&&e.select(i.nextSibling.querySelector(".tag")),e.container.removeChild(i),delete e.tags[e.tags.indexOf(i.getAttribute("data-tag"))],e.setInputWidth(),e.save();else{if(!a||!r)return;e.select(a)}else if(n===KEY_LEFT)if(i)i.previousSibling&&e.select(i.previousSibling.querySelector(".tag"));else{if(!r)return;e.select(a)}else{if(n!==KEY_RIGHT)return e.select();if(!i)return;e.select(i.nextSibling.querySelector(".tag"))}return t.preventDefault(),!1}),this.input.addEventListener("input",function(){e.element.value=e.getValue(),e.element.dispatchEvent(new Event("input"))}),this.input.addEventListener("paste",function(){return setTimeout(savePartial,0)}),this.container.addEventListener("mousedown",function(t){e.refocus(t)}),this.container.addEventListener("touchstart",function(t){e.refocus(t)}),this.savePartial(this.element.value),this.enabled=!0)}},{key:"disable",value:function(){this.enabled&&!this.options.disabled&&(this.reset(),this.enabled=!1)}},{key:"select",value:function(e){var t=this.container.querySelector(".is-active");t&&t.classList.remove("is-active"),e&&e.classList.add("is-active")}},{key:"addTag",value:function(e){var t=this;if(~e.indexOf(this.options.delimiter)&&(e=e.split(this.options.delimiter)),Array.isArray(e))return e.forEach(function(e){t.addTag(e)});var i=e&&e.trim();if(!i)return!1;if((this.element.getAttribute("lowercase")||"true"==this.options.lowercase)&&(i=i.toLowerCase()),(this.element.getAttribute("uppercase")||"true"==this.options.uppercase)&&(i=i.toUpperCase()),"true"==this.element.getAttribute("duplicates")||this.options.duplicates||-1===this.tags.indexOf(i)){this.tags.push(i);var n=document.createElement("div");n.className="control",n.setAttribute("data-tag",i);var s=document.createElement("div");s.className="tags",s.classList.add("has-addons");var a=document.createElement("span");if(a.className="tag",a.classList.add("is-active"),this.select(a),a.innerHTML=i,s.appendChild(a),this.options.allowDelete){var r=document.createElement("a");r.className="tag",r.classList.add("is-delete"),MOUSE_EVENTS.forEach(function(e){r.addEventListener(e,function(e){var i,n=e.target.parentNode,s=Array.prototype.slice.call(t.container.querySelectorAll(".tag")).pop(),a=t.caretAtStart(t.input);if(n&&(i=t.container.querySelector('[data-tag="'+n.innerText.trim()+'"]')),i)t.select(i.previousSibling),t.container.removeChild(i),delete t.tags[t.tags.indexOf(i.getAttribute("data-tag"))],t.setInputWidth(),t.save();else{if(!s||!a)return;t.select(s)}})}),s.appendChild(r)}n.appendChild(s),this.container.insertBefore(n,this.input)}}},{key:"getValue",value:function(){return this.tags.join(this.options.delimiter)}},{key:"setValue",value:function(e){var t=this;Array.prototype.slice.call(this.container.querySelectorAll(".tag")).forEach(function(e){delete t.tags[t.tags.indexOf(e.innerHTML)],t.container.removeChild(e)}),this.savePartial(e)}},{key:"setInputWidth",value:function(){var e=Array.prototype.slice.call(this.container.querySelectorAll(".control")).pop();this.container.offsetWidth&&(this.input.style.width=Math.max(this.container.offsetWidth-(e?e.offsetLeft+e.offsetWidth:30)-30,this.container.offsetWidth/4)+"px")}},{key:"savePartial",value:function(e){"string"==typeof e||Array.isArray(e)||(e=this.input.value),!1!==this.addTag(e)&&(this.input.value="",this.save(),this.setInputWidth())}},{key:"save",value:function(){this.element.value=this.tags.join(this.options.delimiter),this.element.dispatchEvent(new Event("change"))}},{key:"caretAtStart",value:function(e){try{return 0===e.selectionStart&&0===e.selectionEnd}catch(t){return""===e.value}}},{key:"refocus",value:function(e){return e.target.classList.contains("tag")&&this.select(e.target),e.target===this.input?this.select():(this.input.focus(),e.preventDefault(),!1)}},{key:"reset",value:function(){this.tags=[]}},{key:"destroy",value:function(){this.disable(),this.reset(),this.element=null}}]),e}();exports.default=Tagify,document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll('input[type="tags"]');[].forEach.call(e,function(e){new Tagify(e)})});