input2tags 3.0.2 → 3.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/input2tags.esm.min.js +1 -1
- package/dist/input2tags.min.js +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# input2tags
|
|
2
|
-
## Version 3.
|
|
3
|
-
## Supercedes js-
|
|
2
|
+
## Version 3.04
|
|
3
|
+
## Supercedes js-input-tags (v2.01)
|
|
4
4
|
|
|
5
5
|
**Check the CodePen.io [basic example](https://codepen.io/mindflowgo/pen/PwYNQVe); [autocomplete example](https://codepen.io/mindflowgo/pen/MYgyVgg).**
|
|
6
6
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
class
|
|
1
|
+
export default class t{constructor(t,e={}){this.input=t,this.opts={allowDelete:!0,allowDuplicates:!1,allowSpaces:!1,allowCustomKeys:!1,autocomplete:[],initialTags:[],targetEl:null,onAdd:null,onDelete:null,onInput:null,onChange:null,...e},this.tags=[],this.abortController=new AbortController,this.dragAbortController=null,this.dragTarget=null,this.#t()}#t(){const t=this.opts.targetEl;t&&"UL"===t.tagName?(this.list=t,Array.from(this.list.children).forEach(t=>{(t.dataset.tag||t.querySelector("span"))&&t.remove()})):(this.list=document.createElement("ul"),this.list.className="tagsList",this.list.setAttribute("role","list"),t?t.appendChild(this.list):this.input.parentNode.insertBefore(this.list,this.input)),this.placeholder=document.createElement("li"),this.placeholder.className="tagsDragPlaceholder",this.autocomplete=document.createElement("div"),this.autocomplete.className="tagsAutocompleteList",this.autocomplete.style.display="none",this.input.insertAdjacentElement("afterend",this.autocomplete),this.opts.allowCustomKeys||this.input.addEventListener("input",this.#e.bind(this),{signal:this.abortController.signal}),this.input.addEventListener("keydown",this.#s.bind(this),{signal:this.abortController.signal}),this.list.addEventListener("pointerdown",this.#i.bind(this),{signal:this.abortController.signal}),this.#o()}#o(){const t=this.opts.initialTags;if(t&&t.length)return void t.forEach(t=>this.addTag(t.trim()));const e=this.list.querySelectorAll("li");e.forEach(t=>{const e=t.textContent.replace("×","").trim();e&&this.addTag(e,t)}),e&&this.opts.onChange&&this.opts.onChange()}#e(t){let e=t.target.value;this.opts.onInput&&(t.target.value=this.opts.onInput(e)),this.showAutocomplete(e.trim())}#s(t){let e=this.input.value.trim();if(this.opts.onInput&&this.opts.allowCustomKeys)return void this.opts.onInput(e,t);if("Backspace"===t.key&&!e&&this.tags.length)return t.preventDefault(),void this.deleteTag(this.tags.length-1);("Enter"===t.key||!this.opts.allowSpaces&&","===t.key||this.opts.allowSpaces&&" "===t.key&&e.includes(","))&&e&&(t.preventDefault(),this.addTag(e),this.input.value="",this.hideAutocomplete())}showAutocomplete(t){if(!this.opts.autocomplete.length||!t)return void this.hideAutocomplete();const e=this.opts.autocomplete.filter(e=>e.toLowerCase().includes(t.toLowerCase())&&!this.tags.includes(e)).slice(0,8);if(!e.length)return void this.hideAutocomplete();const s=document.createElement("ul");e.forEach(t=>{const e=document.createElement("li");e.textContent=t,e.addEventListener("click",()=>{this.addTag(t),this.input.value="",this.hideAutocomplete()},{signal:this.abortController.signal}),s.appendChild(e)}),this.autocomplete.innerHTML="",this.autocomplete.appendChild(s),this.autocomplete.style.display="block"}hideAutocomplete(){this.autocomplete.style.display="none"}#i(t){const e=t.target.closest("li");e&&e.dataset.tag&&"SPAN"!==t.target.tagName&&(t.preventDefault(),this.dragData={el:e,startIndex:[...this.list.children].indexOf(e)},e.classList.add("tagsDragThis"),e.before(this.placeholder),this.dragAbortController?.abort(),this.dragAbortController=new AbortController,document.addEventListener("pointermove",this.#a.bind(this),{signal:this.dragAbortController.signal}),document.addEventListener("pointerup",this.#l.bind(this),{signal:this.dragAbortController.signal,once:!0}),document.addEventListener("touchend",this.#l.bind(this),{signal:this.dragAbortController.signal,once:!0}))}#a(t){if(!this.dragData)return;const e=document.elementFromPoint(t.clientX,t.clientY)?.closest("li");if(!e||e===this.dragData.el||e===this.placeholder||!e.dataset.tag)return;this.#n();const s=e.getBoundingClientRect(),i=t.clientX<s.left+s.width/2;this.dragTarget=e,e.classList.add("tagsDragOver"),this.list.insertBefore(this.placeholder,i?e:e.nextSibling)}#l(t){if(this.dragData){const{el:t}=this.dragData;this.list.insertBefore(t,this.placeholder)}this.#n(),this.placeholder.remove();const e=this.tags.join("|");this.tags=[];for(const t of this.list.querySelectorAll("li[data-tag]"))this.tags.push(t.dataset.tag),t.classList.remove("tagsDragThis");this.opts.onChange&&e!==this.tags.join("|")&&this.opts.onChange(this.tags),this.dragAbortController?.abort(),this.dragAbortController=null,this.dragData=null,this.input.focus()}#n(){this.dragTarget&&(this.dragTarget.classList.remove("tagsDragOver"),this.dragTarget=null)}#r(t){if(!this.opts.allowDelete)return;const e=document.createElement("span");e.classList.add("tagDelete"),e.innerHTML="×",e.style.cursor="pointer",e.addEventListener("click",e=>{e.stopPropagation(),this.#h(t)},{signal:this.abortController.signal}),t.appendChild(e)}#h(t){const e=t.dataset.tag;if(!(!this.opts.onDelete||this.opts.onDelete(e)))return;t.remove();const s=this.tags.indexOf(e);s>-1&&(this.tags.splice(s,1),this.opts.onChange&&this.opts.onChange(this.tags))}#d(){this.list.querySelectorAll("li").forEach(t=>{t.classList.remove("tagsDragThis","tagsDragOver"),t.dataset.tag&&(t.style.cursor="grab")}),this.placeholder.parentNode&&this.placeholder.remove(),this.dragAbortController?.abort(),this.dragAbortController=null,this.dragData=null,this.dragTarget=null}deleteTag(t){const e=this.list.querySelectorAll("li[data-tag]")[t];e&&this.#h(e)}addTag(t,e){if(!t||!this.opts.allowDuplicates&&this.tags.includes(t))return;if(this.opts.onAdd&&!e&&(t=this.opts.onAdd(t)),!t)return;const s=e||document.createElement("li");s.textContent=t,s.dataset.tag=t,s.setAttribute("role","listitem"),s.setAttribute("tabindex","0"),s.style.cursor="grab",e&&s.querySelector("span")?.remove(),this.#r(s),e||this.list.appendChild(s),this.tags.push(t),this.opts.onChange&&this.opts.onChange(this.tags)}getTags(){return[...this.tags]}setTags(t){this.tags=[],this.list.querySelectorAll("li[data-tag]").forEach(t=>t.remove()),t.forEach(t=>this.addTag(t))}resetDragState(){this.#d()}destroy(){this.#d(),this.abortController.abort(),this.list?.remove(),this.autocomplete?.remove()}}
|
package/dist/input2tags.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
class
|
|
1
|
+
class Cropt t{constructor(t,e={}){this.input=t,this.opts={allowDelete:!0,allowDuplicates:!1,allowSpaces:!1,allowCustomKeys:!1,autocomplete:[],initialTags:[],targetEl:null,onAdd:null,onDelete:null,onInput:null,onChange:null,...e},this.tags=[],this.abortController=new AbortController,this.dragAbortController=null,this.dragTarget=null,this.#t()}#t(){const t=this.opts.targetEl;t&&"UL"===t.tagName?(this.list=t,Array.from(this.list.children).forEach(t=>{(t.dataset.tag||t.querySelector("span"))&&t.remove()})):(this.list=document.createElement("ul"),this.list.className="tagsList",this.list.setAttribute("role","list"),t?t.appendChild(this.list):this.input.parentNode.insertBefore(this.list,this.input)),this.placeholder=document.createElement("li"),this.placeholder.className="tagsDragPlaceholder",this.autocomplete=document.createElement("div"),this.autocomplete.className="tagsAutocompleteList",this.autocomplete.style.display="none",this.input.insertAdjacentElement("afterend",this.autocomplete),this.opts.allowCustomKeys||this.input.addEventListener("input",this.#e.bind(this),{signal:this.abortController.signal}),this.input.addEventListener("keydown",this.#s.bind(this),{signal:this.abortController.signal}),this.list.addEventListener("pointerdown",this.#i.bind(this),{signal:this.abortController.signal}),this.#o()}#o(){const t=this.opts.initialTags;if(t&&t.length)return void t.forEach(t=>this.addTag(t.trim()));const e=this.list.querySelectorAll("li");e.forEach(t=>{const e=t.textContent.replace("×","").trim();e&&this.addTag(e,t)}),e&&this.opts.onChange&&this.opts.onChange()}#e(t){let e=t.target.value;this.opts.onInput&&(t.target.value=this.opts.onInput(e)),this.showAutocomplete(e.trim())}#s(t){let e=this.input.value.trim();if(this.opts.onInput&&this.opts.allowCustomKeys)return void this.opts.onInput(e,t);if("Backspace"===t.key&&!e&&this.tags.length)return t.preventDefault(),void this.deleteTag(this.tags.length-1);("Enter"===t.key||!this.opts.allowSpaces&&","===t.key||this.opts.allowSpaces&&" "===t.key&&e.includes(","))&&e&&(t.preventDefault(),this.addTag(e),this.input.value="",this.hideAutocomplete())}showAutocomplete(t){if(!this.opts.autocomplete.length||!t)return void this.hideAutocomplete();const e=this.opts.autocomplete.filter(e=>e.toLowerCase().includes(t.toLowerCase())&&!this.tags.includes(e)).slice(0,8);if(!e.length)return void this.hideAutocomplete();const s=document.createElement("ul");e.forEach(t=>{const e=document.createElement("li");e.textContent=t,e.addEventListener("click",()=>{this.addTag(t),this.input.value="",this.hideAutocomplete()},{signal:this.abortController.signal}),s.appendChild(e)}),this.autocomplete.innerHTML="",this.autocomplete.appendChild(s),this.autocomplete.style.display="block"}hideAutocomplete(){this.autocomplete.style.display="none"}#i(t){const e=t.target.closest("li");e&&e.dataset.tag&&"SPAN"!==t.target.tagName&&(t.preventDefault(),this.dragData={el:e,startIndex:[...this.list.children].indexOf(e)},e.classList.add("tagsDragThis"),e.before(this.placeholder),this.dragAbortController?.abort(),this.dragAbortController=new AbortController,document.addEventListener("pointermove",this.#a.bind(this),{signal:this.dragAbortController.signal}),document.addEventListener("pointerup",this.#l.bind(this),{signal:this.dragAbortController.signal,once:!0}),document.addEventListener("touchend",this.#l.bind(this),{signal:this.dragAbortController.signal,once:!0}))}#a(t){if(!this.dragData)return;const e=document.elementFromPoint(t.clientX,t.clientY)?.closest("li");if(!e||e===this.dragData.el||e===this.placeholder||!e.dataset.tag)return;this.#n();const s=e.getBoundingClientRect(),i=t.clientX<s.left+s.width/2;this.dragTarget=e,e.classList.add("tagsDragOver"),this.list.insertBefore(this.placeholder,i?e:e.nextSibling)}#l(t){if(this.dragData){const{el:t}=this.dragData;this.list.insertBefore(t,this.placeholder)}this.#n(),this.placeholder.remove();const e=this.tags.join("|");this.tags=[];for(const t of this.list.querySelectorAll("li[data-tag]"))this.tags.push(t.dataset.tag),t.classList.remove("tagsDragThis");this.opts.onChange&&e!==this.tags.join("|")&&this.opts.onChange(this.tags),this.dragAbortController?.abort(),this.dragAbortController=null,this.dragData=null,this.input.focus()}#n(){this.dragTarget&&(this.dragTarget.classList.remove("tagsDragOver"),this.dragTarget=null)}#r(t){if(!this.opts.allowDelete)return;const e=document.createElement("span");e.classList.add("tagDelete"),e.innerHTML="×",e.style.cursor="pointer",e.addEventListener("click",e=>{e.stopPropagation(),this.#h(t)},{signal:this.abortController.signal}),t.appendChild(e)}#h(t){const e=t.dataset.tag;if(!(!this.opts.onDelete||this.opts.onDelete(e)))return;t.remove();const s=this.tags.indexOf(e);s>-1&&(this.tags.splice(s,1),this.opts.onChange&&this.opts.onChange(this.tags))}#d(){this.list.querySelectorAll("li").forEach(t=>{t.classList.remove("tagsDragThis","tagsDragOver"),t.dataset.tag&&(t.style.cursor="grab")}),this.placeholder.parentNode&&this.placeholder.remove(),this.dragAbortController?.abort(),this.dragAbortController=null,this.dragData=null,this.dragTarget=null}deleteTag(t){const e=this.list.querySelectorAll("li[data-tag]")[t];e&&this.#h(e)}addTag(t,e){if(!t||!this.opts.allowDuplicates&&this.tags.includes(t))return;if(this.opts.onAdd&&!e&&(t=this.opts.onAdd(t)),!t)return;const s=e||document.createElement("li");s.textContent=t,s.dataset.tag=t,s.setAttribute("role","listitem"),s.setAttribute("tabindex","0"),s.style.cursor="grab",e&&s.querySelector("span")?.remove(),this.#r(s),e||this.list.appendChild(s),this.tags.push(t),this.opts.onChange&&this.opts.onChange(this.tags)}getTags(){return[...this.tags]}setTags(t){this.tags=[],this.list.querySelectorAll("li[data-tag]").forEach(t=>t.remove()),t.forEach(t=>this.addTag(t))}resetDragState(){this.#d()}destroy(){this.#d(),this.abortController.abort(),this.list?.remove(),this.autocomplete?.remove()}}if(typeof window!=='undefined')window.Cropt=Cropt;else if(typeof module!=='undefined'&&module.exports)module.exports=Cropt; else if(typeof define==='function'&&define.amd)define(()=>Cropt);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "input2tags",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.3",
|
|
4
4
|
"description": "Simple, but powerful vanilla javascript input2tags creator, with autocomplete.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"input",
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
],
|
|
33
33
|
"type": "module",
|
|
34
34
|
"scripts": {
|
|
35
|
-
"build:js:esm": "terser src/input2tags.js -c -m -o dist/input2tags.esm.min.js",
|
|
36
|
-
"build:js:classic": "terser src/input2tags.js -c -m -o dist/input2tags.min.js && node package.mjs dist/input2tags.min.js",
|
|
35
|
+
"build:js:esm": "terser src/input2tags.js --passes=2 --toplevel -c -m -o dist/input2tags.esm.min.js",
|
|
36
|
+
"build:js:classic": "terser src/input2tags.js --passes=2 --toplevel -c -m -o dist/input2tags.min.js && node package.mjs dist/input2tags.min.js",
|
|
37
37
|
"build:css": "postcss src/input2tags.css -u cssnano --no-map -o dist/input2tags.min.css",
|
|
38
38
|
"build": "npm run build:js:esm && npm run build:js:classic && npm run build:css"
|
|
39
39
|
},
|