mirror of
https://github.com/yogeshojha/rengine.git
synced 2026-09-18 15:57:44 +02:00
Removed tag input plugin
This commit is contained in:
Yogesh Ojha
@@ -1,51 +0,0 @@
|
||||
/*
|
||||
===============================
|
||||
@Import Function
|
||||
===============================
|
||||
*/
|
||||
/*
|
||||
===============================
|
||||
@Import Mixins
|
||||
===============================
|
||||
*/
|
||||
.tags-input-wrapper {
|
||||
background: transparent;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tags-input-wrapper input {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
border: 1px solid #bfc9d4;
|
||||
color: #3b3f5c;
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
background-clip: padding-box;
|
||||
border-radius: .25rem;
|
||||
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
||||
height: auto;
|
||||
font-size: 15px;
|
||||
padding: 8px 10px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.tags-input-wrapper input:focus {
|
||||
box-shadow: 0 0 5px 2px rgba(194, 213, 255, 0.619608);
|
||||
border-color: #1b55e2;
|
||||
color: #3b3f5c; }
|
||||
.tags-input-wrapper .tag {
|
||||
display: inline-block;
|
||||
background-color: #2196f3;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
padding: 4px 3px 3px 7px;
|
||||
margin-right: 15px;
|
||||
margin-bottom: 7px;
|
||||
box-shadow: 0 5px 15px -2px rgba(43, 80, 237, 0.35);
|
||||
}
|
||||
.tags-input-wrapper .tag a {
|
||||
margin: 0 7px 3px;
|
||||
display: inline-block;
|
||||
cursor: pointer; }
|
||||
@@ -1,195 +0,0 @@
|
||||
/*
|
||||
==================
|
||||
Pollyfills
|
||||
==================
|
||||
*/
|
||||
|
||||
/* Object.assign() Pollyfill */
|
||||
"function"!=typeof Object.assign&&Object.defineProperty(Object,"assign",{value:function(e,t){"use strict";if(null==e)throw new TypeError("Cannot convert undefined or null to object");for(var n=Object(e),r=1;r<arguments.length;r++){var o=arguments[r];if(null!=o)for(var c in o)Object.prototype.hasOwnProperty.call(o,c)&&(n[c]=o[c])}return n},writable:!0,configurable:!0});
|
||||
|
||||
/* append() Pollyfill */
|
||||
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
|
||||
[Element.prototype,Document.prototype,DocumentFragment.prototype].forEach(function(e){e.hasOwnProperty("append")||Object.defineProperty(e,"append",{configurable:!0,enumerable:!0,writable:!0,value:function(){var e=Array.prototype.slice.call(arguments),t=document.createDocumentFragment();e.forEach(function(e){var n=e instanceof Node;t.appendChild(n?e:document.createTextNode(String(e)))}),this.appendChild(t)}})});
|
||||
|
||||
/*
|
||||
==================
|
||||
Plugin code
|
||||
==================
|
||||
*/
|
||||
|
||||
(function( factory){
|
||||
|
||||
if(typeof module == 'object' && typeof module.exports == 'object' )
|
||||
module.exports = factory();
|
||||
else if( typeof window == 'object')
|
||||
window.TagsInput = factory();
|
||||
else
|
||||
console.error('To use this library you need to either use browser or node.js [require()]');
|
||||
|
||||
})(function(){
|
||||
"use strict"
|
||||
|
||||
var initialized = false
|
||||
|
||||
// Plugin Constructor
|
||||
var TagsInput = function(opts){
|
||||
this.options = Object.assign(TagsInput.defaults , opts);
|
||||
this.init();
|
||||
}
|
||||
|
||||
// Initialize the plugin
|
||||
TagsInput.prototype.init = function(opts){
|
||||
this.options = opts ? Object.assign(this.options, opts) : this.options;
|
||||
|
||||
if(initialized)
|
||||
this.destroy();
|
||||
|
||||
if(!(this.orignal_input = document.getElementById(this.options.selector)) ){
|
||||
console.error("tags-input couldn't find an element with the specified ID");
|
||||
return this;
|
||||
}
|
||||
|
||||
this.arr = [];
|
||||
this.wrapper = document.createElement('div');
|
||||
this.input = document.createElement('input');
|
||||
this.input.placeholder = 'Enter interesting keywords'
|
||||
init(this);
|
||||
initEvents(this);
|
||||
|
||||
initialized = true;
|
||||
return this;
|
||||
}
|
||||
|
||||
// Add Tags
|
||||
TagsInput.prototype.addTag = function(string){
|
||||
|
||||
if(this.anyErrors(string))
|
||||
return ;
|
||||
|
||||
this.arr.push(string);
|
||||
var tagInput = this;
|
||||
|
||||
var tag = document.createElement('span');
|
||||
tag.className = this.options.tagClass;
|
||||
tag.innerText = string;
|
||||
|
||||
var closeIcon = document.createElement('a');
|
||||
closeIcon.innerHTML = '×';
|
||||
|
||||
// delete the tag when icon is clicked
|
||||
closeIcon.addEventListener('click' , function(e){
|
||||
e.preventDefault();
|
||||
var tag = this.parentNode;
|
||||
|
||||
for(var i =0 ;i < tagInput.wrapper.childNodes.length ; i++){
|
||||
if(tagInput.wrapper.childNodes[i] == tag)
|
||||
tagInput.deleteTag(tag , i);
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
tag.appendChild(closeIcon);
|
||||
this.wrapper.insertBefore(tag , this.input);
|
||||
this.orignal_input.value = this.arr.join(',');
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
// Delete Tags
|
||||
TagsInput.prototype.deleteTag = function(tag , i){
|
||||
tag.remove();
|
||||
this.arr.splice( i , 1);
|
||||
this.orignal_input.value = this.arr.join(',');
|
||||
return this;
|
||||
}
|
||||
|
||||
// Make sure input string have no error with the plugin
|
||||
TagsInput.prototype.anyErrors = function(string){
|
||||
if( this.options.max != null && this.arr.length >= this.options.max ){
|
||||
console.log('max tags limit reached');
|
||||
return true;
|
||||
}
|
||||
|
||||
if(!this.options.duplicate && this.arr.indexOf(string) != -1 ){
|
||||
console.log('duplicate found " '+string+' " ')
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// Add tags programmatically
|
||||
TagsInput.prototype.addData = function(array){
|
||||
var plugin = this;
|
||||
|
||||
array.forEach(function(string){
|
||||
plugin.addTag(string);
|
||||
})
|
||||
return this;
|
||||
}
|
||||
|
||||
// Get the Input String
|
||||
TagsInput.prototype.getInputString = function(){
|
||||
return this.arr.join(',');
|
||||
}
|
||||
|
||||
|
||||
// destroy the plugin
|
||||
TagsInput.prototype.destroy = function(){
|
||||
this.orignal_input.removeAttribute('hidden');
|
||||
|
||||
delete this.orignal_input;
|
||||
var self = this;
|
||||
|
||||
Object.keys(this).forEach(function(key){
|
||||
if(self[key] instanceof HTMLElement)
|
||||
self[key].remove();
|
||||
|
||||
if(key != 'options')
|
||||
delete self[key];
|
||||
});
|
||||
|
||||
initialized = false;
|
||||
}
|
||||
|
||||
// Private function to initialize the tag input plugin
|
||||
function init(tags){
|
||||
tags.wrapper.append(tags.input);
|
||||
tags.wrapper.classList.add(tags.options.wrapperClass);
|
||||
tags.orignal_input.setAttribute('hidden' , 'true');
|
||||
tags.orignal_input.parentNode.insertBefore(tags.wrapper , tags.orignal_input);
|
||||
}
|
||||
|
||||
// initialize the Events
|
||||
function initEvents(tags){
|
||||
tags.wrapper.addEventListener('click' ,function(){
|
||||
tags.input.focus();
|
||||
});
|
||||
|
||||
|
||||
tags.input.addEventListener('keydown' , function(e){
|
||||
|
||||
var str = tags.input.value.trim();
|
||||
|
||||
if( !!(~[9 , 13 , 188].indexOf( e.keyCode )) )
|
||||
{
|
||||
tags.input.value = "";
|
||||
if(str != "")
|
||||
tags.addTag(str);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Set All the Default Values
|
||||
TagsInput.defaults = {
|
||||
selector : '',
|
||||
wrapperClass : 'tags-input-wrapper',
|
||||
tagClass : 'tag',
|
||||
max : null,
|
||||
duplicate: false
|
||||
}
|
||||
|
||||
return TagsInput;
|
||||
});
|
||||
Reference in New Issue
Block a user