link option #3

jcubic · Jul 4, 2019 · edf8fd2 · edf8fd2
1 parent 7782b59
commit edf8fd2
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -3,11 +3,11 @@
  |_   _|___ ___ ___ ___ ___
    | | | .'| . | . | -_|  _|
    |_| |__,|_  |_  |___|_|
-           |___|___|   version 0.1.3
+           |___|___|   version 0.2.0
 ```
 ## Tagger - Vanilla JavaScript Tag Editor
 
-[![npm](https://img.shields.io/badge/npm-0.1.3-blue.svg)](https://www.npmjs.com/package/@jcubic/tagger)
+[![npm](https://img.shields.io/badge/npm-0.2.0-blue.svg)](https://www.npmjs.com/package/@jcubic/tagger)
 
 Usage:
 
@@ -29,6 +29,15 @@ tagger(document.querySelector('[name="tags"]'), {allow_spaces: false});
 * allow_duplicates (default fasle)
 * allow_spaces (default true)
 * completion object `{list: string[], delay: miliseconds, min_length: number}`
+* link `function(name): string|false` it should return what should be in href attribute or false
+
+
+## Changelog
+* 0.2.0 - link option
+* 0.1.3 - fix inialization in UMD
+* 0.1.2 - fix bug in adding tags
+* 0.1.1 - fix initalization of tags from input
+* 0.1.0 - inital version
 
 ## License
 

diff --git a/demo.html b/demo.html
@@ -1,21 +1,40 @@
-<!doctype html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<title>Tagger Example</title>
-<link href="tagger.css" rel="stylesheet">
-</head>
-<body>
-  <h1>Tagger Example</h1>
-  <input type="text" value="charles,louis,michel" name="tags" />
-<script src="tagger.js"></script>
-<script>
-  var t = tagger(document.querySelector('[name="tags"]'), {
-    allow_duplicates: false,
-    allow_spaces: true
-  });
-</script>
-</body>
-</html>
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<title>Tagger Example</title>
+<link href="tagger.css" rel="stylesheet">
+<style>
+.tagger + .tagger {
+  margin-top: 10px;
+}
+</style>
+</head>
+<body>
+  <h1>Tagger Example</h1>
+  <input type="text" value="charles,louis,michel" name="tags" />
+  <input type="text" value="charles,louis,michel" name="tags2" />
+  <input type="text" value="charles,louis,michel" name="tags3" />
+<script src="tagger.js"></script>
+<script>
+  var t1 = tagger(document.querySelector('[name="tags"]'), {
+    allow_duplicates: false,
+    allow_spaces: true
+  });
+  var t2 = tagger(document.querySelector('[name="tags2"]'), {
+    allow_duplicates: false,
+    allow_spaces: true,
+    link: function() { return false; }
+  });
+  var t3 = tagger(document.querySelector('[name="tags3"]'), {
+    allow_duplicates: false,
+    allow_spaces: true,
+    link: function(name) {
+      return `javascript:alert('${name}');`;
+    }
+  });
+</script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jcubic/tagger",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Vanilla JavaScript tag editor",
   "main": "tagger.js",
   "scripts": {

diff --git a/tagger.css b/tagger.css
@@ -3,7 +3,7 @@
  * |_   _|___ ___ ___ ___ ___
  *   | | | .'| . | . | -_|  _|
  *   |_| |__,|_  |_  |___|_|
- *           |___|___|   version 0.1.3
+ *           |___|___|   version 0.2.0
  *
  * Tagger - Vanilla JavaScript Tag Editor
  *
@@ -34,7 +34,7 @@
 .tagger li:not(.tagger-new) a {
     color: black;
 }
-.tagger li:not(.tagger-new) > a {
+.tagger li:not(.tagger-new) > a, .tagger li:not(.tagger-new) > span {
     padding: 4px 4px 4px 8px;
     background: #B1C3D7;
     border: 1px solid #4181ed;

diff --git a/tagger.js b/tagger.js
@@ -3,7 +3,7 @@
  * |_   _|___ ___ ___ ___ ___
  *   | | | .'| . | . | -_|  _|
  *   |_| |__,|_  |_  |___|_|
- *           |___|___|   version 0.1.3
+ *           |___|___|   version 0.2.0
  *
  * Tagger - Vanilla JavaScript Tag Editor
  *
@@ -90,6 +90,9 @@
             list: [],
             delay: 400,
             min_length: 2
+        },
+        link: function(name) {
+            return '/tag/' + name;
         }
     };
     // ------------------------------------------------------------------------------------------
@@ -152,8 +155,14 @@
         },
         _new_tag: function(name) {
             var close = ['a', {href: '#', 'class': 'close'}, ['\u00D7']];
-            var a_atts = {href: '/tag/' + name, target: '_black'};
-            var li = create('li', {}, [['a', a_atts, [['span', {}, [name]], close]]]);
+            var href = this._settings.link(name);
+            var li;
+            if (href === false) {
+                li = create('li', {}, [['span', {}, [['span', {}, [name]], close]]]);
+            } else {
+                var a_atts = {href: href, target: '_black'};
+                li = create('li', {}, [['a', a_atts, [['span', {}, [name]], close]]]);
+            }
             this._ul.insertBefore(li, this._new_input_tag.parentNode);
         },
         add_tag: function(name) {