code-boxx/0-JS-TAG.MD

## 0-JS-TAG.MD

      
    Raw
  

              0-JS-TAG.MD
            
          
    JAVASCRIPT TAGGING WIDGET

https://code-boxx.com/simple-javascript-tagging/
LICENSE

Copyright by Code Boxx
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

  
## 1-tag.html
<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Tagging</title>

    <!-- (A) JS & CSS -->
    <script src="2-tag.js"></script>
    <link rel="stylesheet" href="3-tag.css">
  </head>
  <body>
    <!-- (B) ATTACH TAGGING HERE -->
    <div id="demo"></div>
    <small>Hit enter or comma to add a tag.</small>

    <!-- (C) THE JAVASCRIPT -->
    <script>
    // (C1) TO ATTACH TAGGER
    taggr.attach({
      target : document.getElementById("demo"), // required, target <div>
      tags : ["Doge", "Cate"], // optional, default tags
      maxLength : 12, // optional, max tag characters
      maxTags : 3 // optional, max number of tags
    });

    // (C2) TO GET TAGS
    // var tags = document.getElementById("demo").getTags()
    </script>
  </body>
</html>

## 2-tag.js
var taggr = {
  // (A) ATTACH TAGGING
  len : 0, // track number of characters for "backspace remove tag"
  attach : instance => {
    // (A1) TAGS WRAPPER
    instance.target.classList.add("tagwrap");

    // (A2) ATTACH INPUT FIELD
    instance.tagin = document.createElement("input");
    instance.tagin.type = "text";
    instance.tagin.className = "tagin";
    if (instance.maxLength !== undefined) { instance.tagin.maxLength = instance.maxLength; }
    instance.target.appendChild(instance.tagin);

    // (A3) KEY LISTEN
    instance.tagin.onkeydown = evt => taggr.len = instance.tagin.value.length;
    instance.tagin.onkeyup = evt => {
      // (A3-1) COMMA OR ENTER TO ADD TAG
      if (evt.code=="Comma" || evt.code=="Enter") {
        if (instance.tagin.value=="," || instance.tagin.value=="") {
          instance.tagin.value = "";
        } else {
          taggr.add(instance, instance.tagin.value.replace(/,/g, ""));
        }
      }

      // (A3-2) BACKSPACE TO REMOVE LAST TAG (IF CURRENT VALUE IS EMPTY)
      if (evt.code=="Backspace" && taggr.len == 0) {
        let last = instance.target.querySelectorAll(".tag");
        if (last.length>0) { last[last.length - 1].remove(); }
      }
    };

    // (A4) ATTACH DEFAULT TAGS
    if (instance.tags !== undefined) {
      instance.tags.forEach((name, i) => taggr.add(instance, name));
    }

    // (A5) GET TAGS
    instance.target.getTags = () => {
      let tags = [];
      Array.from(instance.target.querySelectorAll(".tag"))
      .forEach(tag => tags.push(tag.innerHTML));
      return tags;
    };
  },

  // (B) ADD A NEW TAG
  add : (instance, name) => {
    // (B1) CHECK MAX TAGS
    if (instance.maxTags !== undefined) {
      let count = instance.target.querySelectorAll(".tag").length;
      if (count >= instance.maxTags) {
        alert(`Maximum ${instance.maxTags} tags allowed.`);
        return;
      }
    }

    // (B2) CREATE & APPEND NEW TAG
    let tag = document.createElement("div");
    tag.className = "tag";
    tag.innerHTML = name;
    tag.onclick = () => tag.remove();
    instance.target.insertBefore(tag, instance.tagin);

    // (B3) EMPTY TAG INPUT
    instance.tagin.value = "";
  }
};

## 3-tag.css
/* (A) WRAPPER */
.tagwrap {
  display: flex;
  border: 2px solid #aaa;
}

/* (B) SHARED TAGS */
.tagwrap .tag, .tagwrap .tagin {
  margin: 10px 5px;
  padding: 10px;
}

/* (C) TAGS */
.tagwrap .tag {
  color: #fff;
  background: #2d7dc1;
  cursor: pointer;
}
.tagwrap .tag::after {
  content: "X";
  padding-left: 20px;
}

/* (D) TAG INPUT */
.tagwrap .tagin {
  flex-grow: 1;
  background: none;
  border: 0;
}
.tagwrap .tagin:focus {
  outline-width: 0;
  outline: none;
}

/* (X) DOES NOT MATTER */
* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Javascript Tagging</title>

	<!-- (A) JS & CSS -->
	<script src="2-tag.js"></script>
	<link rel="stylesheet" href="3-tag.css">
	</head>
	<body>
	<!-- (B) ATTACH TAGGING HERE -->
	<div id="demo"></div>
	<small>Hit enter or comma to add a tag.</small>

	<!-- (C) THE JAVASCRIPT -->
	<script>
	// (C1) TO ATTACH TAGGER
	taggr.attach({
	target : document.getElementById("demo"), // required, target <div>
	tags : ["Doge", "Cate"], // optional, default tags
	maxLength : 12, // optional, max tag characters
	maxTags : 3 // optional, max number of tags
	});

	// (C2) TO GET TAGS
	// var tags = document.getElementById("demo").getTags()
	</script>
	</body>
	</html>
	var taggr = {
	// (A) ATTACH TAGGING
	len : 0, // track number of characters for "backspace remove tag"
	attach : instance => {
	// (A1) TAGS WRAPPER
	instance.target.classList.add("tagwrap");

	// (A2) ATTACH INPUT FIELD
	instance.tagin = document.createElement("input");
	instance.tagin.type = "text";
	instance.tagin.className = "tagin";
	if (instance.maxLength !== undefined) { instance.tagin.maxLength = instance.maxLength; }
	instance.target.appendChild(instance.tagin);

	// (A3) KEY LISTEN
	instance.tagin.onkeydown = evt => taggr.len = instance.tagin.value.length;
	instance.tagin.onkeyup = evt => {
	// (A3-1) COMMA OR ENTER TO ADD TAG
	if (evt.code=="Comma" \|\| evt.code=="Enter") {
	if (instance.tagin.value=="," \|\| instance.tagin.value=="") {
	instance.tagin.value = "";
	} else {
	taggr.add(instance, instance.tagin.value.replace(/,/g, ""));
	}
	}

	// (A3-2) BACKSPACE TO REMOVE LAST TAG (IF CURRENT VALUE IS EMPTY)
	if (evt.code=="Backspace" && taggr.len == 0) {
	let last = instance.target.querySelectorAll(".tag");
	if (last.length>0) { last[last.length - 1].remove(); }
	}
	};

	// (A4) ATTACH DEFAULT TAGS
	if (instance.tags !== undefined) {
	instance.tags.forEach((name, i) => taggr.add(instance, name));
	}

	// (A5) GET TAGS
	instance.target.getTags = () => {
	let tags = [];
	Array.from(instance.target.querySelectorAll(".tag"))
	.forEach(tag => tags.push(tag.innerHTML));
	return tags;
	};
	},

	// (B) ADD A NEW TAG
	add : (instance, name) => {
	// (B1) CHECK MAX TAGS
	if (instance.maxTags !== undefined) {
	let count = instance.target.querySelectorAll(".tag").length;
	if (count >= instance.maxTags) {
	alert(`Maximum ${instance.maxTags} tags allowed.`);
	return;
	}
	}

	// (B2) CREATE & APPEND NEW TAG
	let tag = document.createElement("div");
	tag.className = "tag";
	tag.innerHTML = name;
	tag.onclick = () => tag.remove();
	instance.target.insertBefore(tag, instance.tagin);

	// (B3) EMPTY TAG INPUT
	instance.tagin.value = "";
	}
	};
	/* (A) WRAPPER */
	.tagwrap {
	display: flex;
	border: 2px solid #aaa;
	}

	/* (B) SHARED TAGS */
	.tagwrap .tag, .tagwrap .tagin {
	margin: 10px 5px;
	padding: 10px;
	}

	/* (C) TAGS */
	.tagwrap .tag {
	color: #fff;
	background: #2d7dc1;
	cursor: pointer;
	}
	.tagwrap .tag::after {
	content: "X";
	padding-left: 20px;
	}

	/* (D) TAG INPUT */
	.tagwrap .tagin {
	flex-grow: 1;
	background: none;
	border: 0;
	}
	.tagwrap .tagin:focus {
	outline-width: 0;
	outline: none;
	}

	/* (X) DOES NOT MATTER */
	* {
	font-family: arial, sans-serif;
	box-sizing: border-box;
	}