input-bubbles/dist/js/input-bubbles.min.js

Adding text bubbles into HTML elements with typesetting

!function(a){function b(a){return 1==a.nodeType?!e(d,a.nodeName):!1}function c(a){for(var b=a.lastChild;b&&1!=b.nodeType&&b.previousSibling;)b=b.previousSibling;return b}var d=["AREA","BASE","BR","COL","EMBED","HR","IMG","INPUT","KEYGEN","LINK","MENUITEM","META","PARAM","SOURCE","TRACK","WBR","BASEFONT","BGSOUND","FRAME","ISINDEX"],e=function(a,b){for(var c=a.length;c--;)if(a[c]===b)return!0;return!1};a.setEndOfContenteditable=function(a){for(;c(a)&&b(c(a));)a=c(a);var d,e;document.createRange?(d=document.createRange(),d.selectNodeContents(a),d.collapse(!1),e=window.getSelection(),e.removeAllRanges(),e.addRange(d)):document.selection&&(d=document.body.createTextRange(),d.moveToElementText(a),d.collapse(!1),d.select())},a.getCaretPosition=function(a){for(;c(a)&&b(c(a));)a=c(a);var d,e,f=0;if(window.getSelection)d=window.getSelection(),d.rangeCount&&(e=d.getRangeAt(0),e.commonAncestorContainer.parentNode==a&&(f=e.endOffset));else if(document.selection&&document.selection.createRange&&(e=document.selection.createRange(),e.parentElement()==a)){var g=document.createElement("span");a.insertBefore(g,a.firstChild);var h=e.duplicate();h.moveToElementText(g),h.setEndPoint("EndToEnd",e),f=h.text.length}return f}}(window.cursorManager=window.cursorManager||{}),function(){function a(){function a(a){if(null===a||"undefined"==typeof a)throw new Error("Initialization without options!");if("undefined"!=typeof a.childNodes)this.options={element:a};else{if("Object"!=={}.toString.call(a).slice(8,-1))throw new Error('Invalid parameter "options"');if("undefined"!=typeof a.id)return this.initialized[a.id];if(this.options=a,null===this.options.element||"undefined"==typeof this.options.element)throw new Error("Initializing without element or element was not found!")}for(var b in this.options)this.options[b]&&"function"==typeof this.options[b]&&(this[b]=this.options[b],delete this.options[b]);this.element=this.options.element,this.options.height=this.options.height||30,this.options.width=this.options.width||370,this.element.style.minHeight=this.options.height+"px",this.element.style.width=this.options.width+"px",i.call(this),"undefined"!=typeof a.placeholder&&("undefined"!=typeof a.placeholderClass?j.call(this,a.placeholder,a.placeholderClass):j.call(this,a.placeholder)),k.call(this),this.innerElement.addEventListener("keyup",e.bind(this)),this.innerElement.addEventListener("keydown",d.bind(this)),this.innerElement.addEventListener("paste",g.bind(this)),this.innerElement.addEventListener("input",h.bind(this));var c=n();return this.initialized[c]=this,this.element.setAttribute("data-input-bundles",c),this}function b(a){return'<span class="ui-bubble-content" title="'+a+'" style="'+(this.options.bubbleTextWidth?"max-width: "+this.options.bubbleTextWidth+"px":"")+'">'+a+'</span><span class="ui-bubble-remove">x</span>'}function c(a){a.stopPropagation();var b=a.currentTarget.parentNode;this.removeBubble(b)}function d(a){f.call(this),13===a.keyCode&&a.preventDefault()}function e(a){var b=cursorManager.getCaretPosition(this.innerElement),c=this.innerElement.textContent;if(32===a.keyCode&&!this.options.allowSpaces&&c.length>=b||13===a.keyCode&&!this.options.allowEnter)this.addBubble();else if(8===a.keyCode&&this.toDeleteFlag)this.removeLastBubble();else if(this.options.separator&&c.length>=b)for(var d=0;d<this.options.separator.length;++d)if(-1!==c.indexOf(this.options.separator[d])){var e=c.replace(this.options.separator[d],"");e?this.addBubble(c.replace(this.options.separator[d],"")):(this.innerElement.textContent="",this.innerElement.focus());break}c=this.innerElement.textContent.trim(),c&&0!==b?this.toDeleteFlag=!1:this.toDeleteFlag=!0,f.call(this),(this.keyup||"function"==typeof this.keyup)&&this.keyup(a)}function f(){var a=this.innerElement.textContent.trim();"undefined"!=typeof this.placeholderElement&&(a||p.length?this.placeholderElement.style.display="none":this.placeholderElement.style.display="block")}function g(){setTimeout(function(){this.addBubble(m(this.innerElement.textContent))}.bind(this),0)}function h(){f.call(this)}function i(){for(;this.element.firstChild;)this.element.removeChild(this.element.firstChild)}function j(a,b){this.placeholderElement=document.createElement("div"),this.placeholderElement.className="input-bubbles-placeholder "+("undefined"!=typeof b?b:""),this.placeholderElement.textContent=a,this.element.appendChild(this.placeholderElement)}function k(){this.element.setAttribute("tabindex",1),this.innerElement=document.createElement("div"),this.innerElement.setAttribute("contenteditable","true"),this.innerElement.className="ui-inner-editable",this.element.appendChild(this.innerElement),this.element.addEventListener("focus",function(){this.innerElement.focus(),cursorManager.setEndOfContenteditable(this.innerElement)}.bind(this)),this.innerElement.addEventListener("click",function(){0===cursorManager.getCaretPosition(this.innerElement)?this.toDeleteFlag=!0:this.toDeleteFlag=!1}.bind(this))}function l(){for(var a=[],b=this.element.childNodes,c=0;c<b.length;++c)1!=b[c].nodeType||b[c].getAttribute("contenteditable")&&"false"!==b[c].getAttribute("contenteditable")||a.push(b[c]);return a}function m(a){return a.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}function n(){function a(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}return a()+a()+"-"+a()+"-"+a()+"-"+a()+"-"+a()+a()+a()}var o=[],p=[];return this.get=function(a){if("string"!=typeof a)throw new Error("Invalid option!");return this[a]},this.set=function(a,b){if("string"!=typeof a)throw new Error("Invalid option!");this[a]=b},this.on=function(a,b){if("string"!=typeof a||"function"!=typeof b)throw new Error("Invalid operation!");this[a]=b},this.trigger=function(a){if("string"!=typeof a)throw new Error("Invalid operation!");if(!this[a])throw new Error('Action "'+a+'" was not defined!');if(arguments.length>1){var b=[].slice.call(arguments);this[a].apply(this,b.splice(1,b.length))}else this[a]()},this.addBubble=function(a){var d=(a?a:this.innerElement.textContent).trim();if(d){var e=document.createElement("div");e.className="js-bubble-item ui-bubble",e.innerHTML=b.call(this,d),this.element.insertBefore(e,this.innerElement),o.push(d),p.push(e),e.querySelector(".ui-bubble-remove").addEventListener("click",c.bind(this)),this.innerElement.textContent="",this.innerElement.focus(),(this.add||"function"==typeof this.add)&&this.add(e,d),(this.click||"function"==typeof this.click)&&e.addEventListener("click",this.click)}},this.removeBubble=function(a){(this.remove||"function"==typeof this.remove)&&this.remove(a),this.element.removeChild(a),this.refreshData()},this.removeLastBubble=function(){if(p.length){o.pop();var a=p.pop();(this.remove||"function"==typeof this.remove)&&this.remove(a),this.element.removeChild(a)}},this.clearAll=function(){for(var a=l.call(this),b=0;b<a.length;++b)(this.remove||"function"==typeof this.remove)&&this.remove(a[b]),this.element.removeChild(a[b]);o=[],p=[],(this.clear||"function"==typeof this.clear)&&this.clear()},this.values=function(){return o},this.nodes=function(){return p},this.refreshData=function(){o=[],p=[];for(var a=l.call(this),b=0;b<a.length;++b)-1===a[b].className.indexOf("input-bubbles-placeholder")&&(p.push(a[b]),o.push(a[b].querySelector(".ui-bubble-content").textContent));f.call(this)},function(b){return a.call(this,b)}.bind(this)}a.prototype.initialized={},window.inputBubbles=new a}(),function(){if("undefined"!==window.jQuery){if("undefined"==typeof $)return;if("undefined"==typeof window.inputBubbles)throw new Error("InputBubbles native was not loaded!");$.fn.inputBubbles=function(a){if(this.length){if("string"==typeof a){var b=this.data("input-bundles");if(!b)throw new Error("Trying to call inputBubble plugins methods on element without initialization!");var c=window.inputBubbles({id:b});if("undefined"==typeof c)throw new Error("Error! Instance was initialized with errors or was not initialized.");if(arguments.length>1){var d=[].slice.call(arguments);return c[a].apply(c,d.splice(1,d.length))}return c[a]()}var e=a?a:{};return e.element=this[0],window.inputBubbles(e),this}}}}();