update: bootstrap 4.5.3, feature: add tag on blur

erwinheldy · Nov 3, 2020 · 46e3f70 · 46e3f70
1 parent ce866b9
commit 46e3f70
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 30 deletions.
diff --git a/dist/css/tagin.css.map b/dist/css/tagin.css.map
diff --git a/dist/index.html b/dist/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <link rel="stylesheet" href="https://unpkg.com/[email protected].0/dist/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://unpkg.com/[email protected].3/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="css/tagin.min.css">
   <title>Tagin</title>
 </head>

diff --git a/dist/js/tagin.js b/dist/js/tagin.js
@@ -59,18 +59,11 @@ function tagin(el, option = {}) {
 
   // Adding tag
   input.addEventListener('input', () => {
-    const value = transform(input.value.replace(new RegExp(escapeRegex(separator), 'g'), '').trim())
-    if (value === '') { input.value = '' }
-    if (input.value.includes(separator)) {
-      if (getTags().includes(value) && duplicate === 'false') {
-        alertExist(value)
-      } else {
-        input.insertAdjacentHTML('beforebegin', templateTag(value))
-        updateValue()
-      }
-      input.value = ''
-      input.removeAttribute('style')
-    }
+    addTag()
+    autowidth()
+  })
+  input.addEventListener('blur', () => {
+    addTag(true)
     autowidth()
   })
   autowidth()
@@ -84,6 +77,20 @@ function tagin(el, option = {}) {
     input.style.setProperty('width', Math.ceil(window.getComputedStyle(fakeEl).width.replace('px', '')) + 1 + 'px')
     fakeEl.remove()
   }
+  function addTag(force = false) {
+    const value = transform(input.value.replace(new RegExp(escapeRegex(separator), 'g'), '').trim())
+    if (value === '') { input.value = '' }
+    if (input.value.includes(separator) || (force && input.value != '')) {
+      if (getTags().includes(value) && duplicate === 'false') {
+        alertExist(value)
+      } else {
+        input.insertAdjacentHTML('beforebegin', templateTag(value))
+        updateValue()
+      }
+      input.value = ''
+      input.removeAttribute('style')
+    }
+  }
   function alertExist(value) {
     for (const el of wrapper.getElementsByClassName(classTag)) {
       if (el.textContent === value) {

diff --git a/dist/js/tagin.min.js b/dist/js/tagin.min.js
diff --git a/js/tagin.js b/js/tagin.js
@@ -59,18 +59,11 @@ function tagin(el, option = {}) {
 
   // Adding tag
   input.addEventListener('input', () => {
-    const value = transform(input.value.replace(new RegExp(escapeRegex(separator), 'g'), '').trim())
-    if (value === '') { input.value = '' }
-    if (input.value.includes(separator)) {
-      if (getTags().includes(value) && duplicate === 'false') {
-        alertExist(value)
-      } else {
-        input.insertAdjacentHTML('beforebegin', templateTag(value))
-        updateValue()
-      }
-      input.value = ''
-      input.removeAttribute('style')
-    }
+    addTag()
+    autowidth()
+  })
+  input.addEventListener('blur', () => {
+    addTag(true)
     autowidth()
   })
   autowidth()
@@ -84,6 +77,20 @@ function tagin(el, option = {}) {
     input.style.setProperty('width', Math.ceil(window.getComputedStyle(fakeEl).width.replace('px', '')) + 1 + 'px')
     fakeEl.remove()
   }
+  function addTag(force = false) {
+    const value = transform(input.value.replace(new RegExp(escapeRegex(separator), 'g'), '').trim())
+    if (value === '') { input.value = '' }
+    if (input.value.includes(separator) || (force && input.value != '')) {
+      if (getTags().includes(value) && duplicate === 'false') {
+        alertExist(value)
+      } else {
+        input.insertAdjacentHTML('beforebegin', templateTag(value))
+        updateValue()
+      }
+      input.value = ''
+      input.removeAttribute('style')
+    }
+  }
   function alertExist(value) {
     for (const el of wrapper.getElementsByClassName(classTag)) {
       if (el.textContent === value) {

diff --git a/package.json b/package.json
@@ -1,19 +1,19 @@
 {
   "name": "tagin",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "index.js",
   "repository": "https://github.com/erwinheldy/tagin.git",
   "author": "Erwin Heldy G <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "bootstrap": "4.5.2"
+    "bootstrap": "4.5.3"
   },
   "devDependencies": {
     "gulp": "4.0.2",
     "gulp-autoprefixer": "7.0.1",
     "gulp-clean-css": "4.3.0",
     "gulp-rename": "2.0.0",
     "gulp-sass": "4.1.0",
-    "gulp-terser": "1.4.0"
+    "gulp-terser": "1.4.1"
   }
 }