From 06de1eeae772fd062ee43786e25f2f66af1f661c Mon Sep 17 00:00:00 2001 From: Illimar Tambek Date: Mon, 2 Dec 2013 17:02:33 +0200 Subject: [PATCH] Improve docs & bump version number --- README.md | 7 +++++++ bootstrap-tokenfield.jquery.json | 2 +- bootstrap-tokenfield/bootstrap-tokenfield.js | 2 +- bootstrap-tokenfield/bootstrap-tokenfield.min.js | 2 +- bower.json | 2 +- index.html | 8 ++++---- 6 files changed, 15 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 099e137..a66e0c8 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,13 @@ Check out the [demo and docs](http://sliptree.github.io/bootstrap-tokenfield/) ### Changelog +0.10.0 + +* Fixed: Entering a duplicate token does not submit the underlying form anymore +* Fixed: Selecting a duplicate token from autocomplete or typeahead suggestions no longer clears the input +* Improved: Trying to enter a duplicate tag now animates the existing tag for a little while +* Changed: `triggerKeys` has been renamed to `delimiter` and accepts a single or an array of characters instead of character codes. + 0.9.9-1 * Fixed: setTokens now respects `triggerKeys` option diff --git a/bootstrap-tokenfield.jquery.json b/bootstrap-tokenfield.jquery.json index 8e5369b..7ee7f10 100644 --- a/bootstrap-tokenfield.jquery.json +++ b/bootstrap-tokenfield.jquery.json @@ -1,6 +1,6 @@ { "name": "bootstrap-tokenfield", - "version": "0.9.9-2", + "version": "0.10.0", "title": "Bootstrap Tokenfield", "author": { "name": "Illimar Tambek" diff --git a/bootstrap-tokenfield/bootstrap-tokenfield.js b/bootstrap-tokenfield/bootstrap-tokenfield.js index 7805858..bfe3abf 100644 --- a/bootstrap-tokenfield/bootstrap-tokenfield.js +++ b/bootstrap-tokenfield/bootstrap-tokenfield.js @@ -1,5 +1,5 @@ /* ============================================================ - * bootstrap-tokenfield.js v0.9.9-2 + * bootstrap-tokenfield.js v0.10.0 * ============================================================ * * Copyright 2013 Sliptree diff --git a/bootstrap-tokenfield/bootstrap-tokenfield.min.js b/bootstrap-tokenfield/bootstrap-tokenfield.min.js index 3633e81..13ecc9c 100644 --- a/bootstrap-tokenfield/bootstrap-tokenfield.min.js +++ b/bootstrap-tokenfield/bootstrap-tokenfield.min.js @@ -1 +1 @@ -!function($){"use strict";var Tokenfield=function(element,options){var _self=this;this.$element=$(element),this.options=$.extend({},$.fn.tokenfield.defaults,{tokens:this.$element.val()},options),this._delimiters="string"==typeof this.options.delimiter?[this.options.delimiter]:this.options.delimiter,this._triggerKeys=$.map(this._delimiters,function(delimiter){return delimiter.charCodeAt(0)});var elCSSWidth,elRules="function"==typeof window.getMatchedCSSRules?window.getMatchedCSSRules(element):null,elStyleWidth=element.style.width,elWidth=this.$element.width();elRules&&$.each(elRules,function(i,rule){rule.style.width&&(elCSSWidth=rule.style.width)}),this.$element.css({position:"absolute",left:"-10000px"}).prop("tabindex",-1),this.$wrapper=$('
'),this.$element.hasClass("input-lg")&&this.$wrapper.addClass("input-lg"),this.$element.hasClass("input-sm")&&this.$wrapper.addClass("input-sm");var id=this.$element.prop("id")||(new Date).getTime()+""+Math.floor(100*(1+Math.random()));this.$input=$('').appendTo(this.$wrapper).prop("placeholder",this.$element.prop("placeholder")).prop("id",id+"-tokenfield");var $label=$('label[for="'+this.$element.prop("id")+'"]');if($label.length&&$label.prop("for",this.$input.prop("id")),this.$copyHelper=$('').css({position:"absolute",left:"-10000px"}).prop("tabindex",-1).prependTo(this.$wrapper),elStyleWidth?this.$wrapper.css("width",elStyleWidth):elCSSWidth?this.$wrapper.css("width",elCSSWidth):this.$element.parents(".form-inline").length&&this.$wrapper.width(elWidth),(this.$element.prop("disabled")||this.$element.parents("fieldset[disabled]").length)&&this.disable(),this.$mirror=$(''),this.$input.css("min-width",this.options.minWidth+"px"),$.each(["fontFamily","fontSize","fontWeight","fontStyle","letterSpacing","textTransform","wordSpacing","textIndent"],function(i,val){_self.$mirror[0].style[val]=_self.$input.css(val)}),this.$mirror.appendTo("body"),this.$wrapper.insertBefore(this.$element),this.$element.prependTo(this.$wrapper),this.update(),this.setTokens(this.options.tokens,!1,!1),this.listen(),!$.isEmptyObject(this.options.autocomplete)){var autocompleteOptions=$.extend({},this.options.autocomplete,{minLength:this.options.showAutocompleteOnFocus?0:null,position:{my:"left top",at:"left bottom",of:this.$wrapper}});this.$input.autocomplete(autocompleteOptions)}if(!$.isEmptyObject(this.options.typeahead)){var typeaheadOptions=$.extend({},this.options.typeahead,{});this.$input.typeahead(typeaheadOptions),this.typeahead=!0}};Tokenfield.prototype={constructor:Tokenfield,createToken:function(attrs,triggerChange){"string"==typeof attrs&&(attrs={value:attrs,label:attrs}),"undefined"==typeof triggerChange&&(triggerChange=!0);var _self=this,value=$.trim(attrs.value),label=attrs.label.length?$.trim(attrs.label):value;if(value.length&&label.length&&!(value.length').attr("data-value",value).append('').append('×');this.$input.hasClass("tt-query")?this.$input.parent().before(token):this.$input.before(token),this.$input.css("width",this.options.minWidth+"px");var tokenLabel=token.find(".token-label"),closeButton=token.find(".close");this.maxTokenWidth||(this.maxTokenWidth=this.$wrapper.width()-closeButton.outerWidth()-parseInt(closeButton.css("margin-left"),10)-parseInt(closeButton.css("margin-right"),10)-parseInt(token.css("border-left-width"),10)-parseInt(token.css("border-right-width"),10)-parseInt(token.css("padding-left"),10)-parseInt(token.css("padding-right"),10),parseInt(tokenLabel.css("border-left-width"),10)-parseInt(tokenLabel.css("border-right-width"),10)-parseInt(tokenLabel.css("padding-left"),10)-parseInt(tokenLabel.css("padding-right"),10),parseInt(tokenLabel.css("margin-left"),10)-parseInt(tokenLabel.css("margin-right"),10)),tokenLabel.text(label).css("max-width",this.maxTokenWidth),token.on("mousedown",function(){return _self.disabled?!1:(_self.preventDeactivation=!0,void 0)}).on("click",function(e){return _self.disabled?!1:(_self.preventDeactivation=!1,e.ctrlKey||e.metaKey?(e.preventDefault(),_self.toggle(token)):(_self.activate(token,e.shiftKey,e.shiftKey),void 0))}).on("dblclick",function(){return _self.disabled?!1:(_self.edit(token),void 0)}),closeButton.on("click",$.proxy(this.remove,this));var afterCreateEvent=$.Event("afterCreateToken");afterCreateEvent.token=beforeCreateEvent.token,afterCreateEvent.relatedTarget=token.get(0),this.$element.trigger(afterCreateEvent);var changeEvent=$.Event("change");return changeEvent.initiator="tokenfield",triggerChange&&this.$element.val(this.getTokensList()).trigger(changeEvent),this.update(),this.$input.get(0)}}},setTokens:function(tokens,add,triggerChange){if(tokens){add||this.$wrapper.find(".token").remove(),"undefined"==typeof triggerChange&&(triggerChange=!0),"string"==typeof tokens&&(tokens=this._delimiters.length?tokens.split(new RegExp("["+this._delimiters.join("")+"]")):[tokens]);var _self=this;return $.each(tokens,function(i,token){_self.createToken(token,triggerChange)}),this.$element.get(0)}},getTokenData:function(token){var data=token.map(function(){var $token=$(this);return{value:$token.attr("data-value")||$token.find(".token-label").text(),label:$token.find(".token-label").text()}}).get();return 1==data.length&&(data=data[0]),data},getTokens:function(active){var self=this,tokens=[],activeClass=active?".active":"";return this.$wrapper.find(".token"+activeClass).each(function(){tokens.push(self.getTokenData($(this)))}),tokens},getTokensList:function(delimiter,beautify,active){delimiter=delimiter||this._delimiters[0],beautify="undefined"!=typeof beautify&&null!==beautify?beautify:this.options.beautify;var separator=delimiter+(beautify&&" "!==delimiter?" ":"");return $.map(this.getTokens(active),function(token){return token.value}).join(separator)},getInput:function(){return this.$input.val()},listen:function(){var _self=this;this.$element.on("change",$.proxy(this.change,this)),this.$wrapper.on("mousedown",$.proxy(this.focusInput,this)),this.$input.on("focus",$.proxy(this.focus,this)).on("blur",$.proxy(this.blur,this)).on("paste",$.proxy(this.paste,this)).on("keydown",$.proxy(this.keydown,this)).on("keypress",$.proxy(this.keypress,this)).on("keyup",$.proxy(this.keyup,this)),this.$copyHelper.on("focus",$.proxy(this.focus,this)).on("blur",$.proxy(this.blur,this)).on("keydown",$.proxy(this.keydown,this)).on("keyup",$.proxy(this.keyup,this)),this.$input.on("keypress",$.proxy(this.update,this)).on("keyup",$.proxy(this.update,this)),this.$input.on("autocompletecreate",function(){var $_menuElement=$(this).data("ui-autocomplete").menu.element,minWidth=_self.$wrapper.outerWidth()-parseInt($_menuElement.css("border-left-width"),10)-parseInt($_menuElement.css("border-right-width"),10);$_menuElement.css("min-width",minWidth+"px")}).on("autocompleteselect",function(e,ui){return _self.createToken(ui.item)&&(_self.$input.val(""),_self.$input.data("edit")&&_self.unedit(!0)),!1}).on("typeahead:selected",function(e,datum,dataset){var valueKey="value";$.each(_self.$input.data("ttView").datasets,function(i,set){set.name===dataset&&(valueKey=set.valueKey)}),_self.createToken(datum[valueKey])&&(_self.$input.typeahead("setQuery",""),_self.$input.data("edit")&&_self.unedit(!0))}).on("typeahead:autocompleted",function(){_self.createToken(_self.$input.val()),_self.$input.typeahead("setQuery",""),_self.$input.data("edit")&&_self.unedit(!0)}),$(window).on("resize",$.proxy(this.update,this))},keydown:function(e){if(this.focused){switch(e.keyCode){case 8:if(!this.$input.is(document.activeElement))break;this.lastInputValue=this.$input.val();break;case 37:if(this.$input.is(document.activeElement)){if(this.$input.val().length>0)break;var prev=this.$input.hasClass("tt-query")?this.$input.parent().prevAll(".token:first"):this.$input.prevAll(".token:first");if(!prev.length)break;this.preventInputFocus=!0,this.preventDeactivation=!0,this.activate(prev),e.preventDefault()}else this.prev(e.shiftKey),e.preventDefault();break;case 38:if(!e.shiftKey)return;if(this.$input.is(document.activeElement)){if(this.$input.val().length>0)break;var prev=this.$input.hasClass("tt-query")?this.$input.parent().prevAll(".token:last"):this.$input.prevAll(".token:last");if(!prev.length)return;this.activate(prev)}var _self=this;this.firstActiveToken.nextAll(".token").each(function(){_self.deactivate($(this))}),this.activate(this.$wrapper.find(".token:first"),!0,!0),e.preventDefault();break;case 39:if(this.$input.is(document.activeElement)){if(this.$input.val().length>0)break;var next=this.$input.hasClass("tt-query")?this.$input.parent().nextAll(".token:first"):this.$input.nextAll(".token:first");if(!next.length)break;this.preventInputFocus=!0,this.preventDeactivation=!0,this.activate(next),e.preventDefault()}else this.next(e.shiftKey),e.preventDefault();break;case 40:if(!e.shiftKey)return;if(this.$input.is(document.activeElement)){if(this.$input.val().length>0)break;var next=this.$input.hasClass("tt-query")?this.$input.parent().nextAll(".token:first"):this.$input.nextAll(".token:first");if(!next.length)return;this.activate(next)}var _self=this;this.firstActiveToken.prevAll(".token").each(function(){_self.deactivate($(this))}),this.activate(this.$wrapper.find(".token:last"),!0,!0),e.preventDefault();break;case 65:if(this.$input.val().length>0||!e.ctrlKey&&!e.metaKey)break;this.activateAll(),e.preventDefault();break;case 9:case 13:if(this.$input.data("ui-autocomplete")&&this.$input.data("ui-autocomplete").menu.element.find("li:has(a.ui-state-focus)").length)break;if(this.$input.hasClass("tt-query")&&this.$wrapper.find(".tt-is-under-cursor").length)break;if(this.$input.hasClass("tt-query")&&this.$wrapper.find(".tt-hint").val().length)break;if(this.$input.is(document.activeElement)&&this.$input.val().length||this.$input.data("edit"))return this.createTokensFromInput(e,this.$input.data("edit"));if(13===e.keyCode){if(!this.$copyHelper.is(document.activeElement)||1!==this.$wrapper.find(".token.active").length)break;this.edit(this.$wrapper.find(".token.active"))}}this.lastKeyDown=e.keyCode}},keypress:function(e){return this.lastKeyPressCode=e.keyCode,this.lastKeyPressCharCode=e.charCode,-1!==$.inArray(e.charCode,this._triggerKeys)&&this.$input.is(document.activeElement)?(this.$input.val()&&this.createTokensFromInput(e),!1):void 0},keyup:function(e){if(this.preventInputFocus=!1,this.focused){switch(e.keyCode){case 8:if(this.$input.is(document.activeElement)){if(this.$input.val().length||this.lastInputValue.length&&8===this.lastKeyDown)break;this.preventDeactivation=!0;var prev=this.$input.hasClass("tt-query")?this.$input.parent().prevAll(".token:first"):this.$input.prevAll(".token:first");if(!prev.length)break;this.activate(prev)}else this.remove(e);break;case 46:this.remove(e,"next")}this.lastKeyUp=e.keyCode}},focus:function(){this.focused=!0,this.$wrapper.addClass("focus"),this.$input.is(document.activeElement)&&(this.$wrapper.find(".active").removeClass("active"),this.firstActiveToken=null,this.options.showAutocompleteOnFocus&&this.search())},blur:function(e){this.focused=!1,this.$wrapper.removeClass("focus"),this.preventDeactivation||this.$element.is(document.activeElement)||(this.$wrapper.find(".active").removeClass("active"),this.firstActiveToken=null),!this.preventCreateTokens&&(this.$input.data("edit")&&!this.$input.is(document.activeElement)||this.options.createTokensOnBlur)&&this.createTokensFromInput(e),this.preventDeactivation=!1,this.preventCreateTokens=!1},paste:function(e){var _self=this;setTimeout(function(){_self.createTokensFromInput(e)},1)},change:function(e){"tokenfield"!==e.initiator&&this.setTokens(this.$element.val())},createTokensFromInput:function(e,focus){if(!(this.$input.val().lengththis.firstActiveToken.index():!1;if(deactivate)return this.deactivate(lastActive)}var active=this.$wrapper.find(".active:first"),prev=active.prevAll(".token:first");return prev.length||(prev=this.$wrapper.find(".token:first")),prev.length||add?(this.activate(prev,add),void 0):(this.$input.focus(),void 0)},activate:function(token,add,multi,remember){if(token&&this.$wrapper.find(".token.active").length!==this.$wrapper.find(".token").length){if("undefined"==typeof remember)var remember=!0;if(multi)var add=!0;if(this.$copyHelper.focus(),add||(this.$wrapper.find(".active").removeClass("active"),remember?this.firstActiveToken=token:delete this.firstActiveToken),multi&&this.firstActiveToken){var i=this.firstActiveToken.index()-2,a=token.index()-2,_self=this;this.$wrapper.find(".token").slice(Math.min(i,a)+1,Math.max(i,a)).each(function(){_self.activate($(this),!0)})}token.addClass("active"),this.$copyHelper.val(this.getTokensList(null,null,!0)).select()}},activateAll:function(){var _self=this;this.$wrapper.find(".token").each(function(i){_self.activate($(this),0!==i,!1,!1)})},deactivate:function(token){token&&(token.removeClass("active"),this.$copyHelper.val(this.getTokensList(null,null,!0)).select())},toggle:function(token){token&&(token.toggleClass("active"),this.$copyHelper.val(this.getTokensList(null,null,!0)).select())},edit:function(token){if(token){var value=token.data("value"),label=token.find(".token-label").text(),beforeEditEvent=$.Event("beforeEditToken");if(beforeEditEvent.token={value:value,label:label},beforeEditEvent.relatedTarget=token.get(0),this.$element.trigger(beforeEditEvent),beforeEditEvent.token){value=beforeEditEvent.token.value,label=beforeEditEvent.token.label,token.find(".token-label").text(value);var tokenWidth=token.outerWidth(),$_input=this.$input.hasClass("tt-query")?this.$input.parent():this.$input;token.replaceWith($_input),this.preventCreateTokens=!0,this.$input.val(value).select().data("edit",!0).width(tokenWidth)}}},unedit:function(focus){var $_input=this.$input.hasClass("tt-query")?this.$input.parent():this.$input;if($_input.appendTo(this.$wrapper),this.$input.data("edit",!1),this.update(),focus){var _self=this;setTimeout(function(){_self.$input.focus()},1)}},remove:function(e,direction){if(!this.$input.is(document.activeElement)&&!this.disabled){var token="click"===e.type?$(e.target).closest(".token"):this.$wrapper.find(".token.active");if("click"!==e.type){if(!direction)var direction="prev";if(this[direction](),"prev"===direction)var firstToken=0===token.first().prevAll(".token:first").length}var removeEvent=$.Event("removeToken");removeEvent.token=this.getTokenData(token);var changeEvent=$.Event("change");changeEvent.initiator="tokenfield",token.remove(),this.$element.val(this.getTokensList()).trigger(removeEvent).trigger(changeEvent),(!this.$wrapper.find(".token").length||"click"===e.type||firstToken)&&this.$input.focus(),this.$input.css("width",this.options.minWidth+"px"),this.update(),e.preventDefault(),e.stopPropagation()}},update:function(){var value=this.$input.val();if(this.$input.data("edit")){if(value||(value=this.$input.prop("placeholder")),value===this.$mirror.text())return;this.$mirror.text(value);var mirrorWidth=this.$mirror.width()+10;if(mirrorWidth>this.$wrapper.width())return this.$input.width(this.$wrapper.width());this.$input.width(mirrorWidth)}else this.$input.css("width",this.options.minWidth+"px"),this.$input.width(this.$wrapper.offset().left+this.$wrapper.width()-this.$input.offset().left+5)},focusInput:function(e){if(!$(e.target).closest(".token").length&&!$(e.target).closest(".token-input").length){var _self=this;setTimeout(function(){_self.$input.focus()},0)}},search:function(){this.$input.data("ui-autocomplete")&&this.$input.autocomplete("search")},disable:function(){this.disabled=!0,this.$input.prop("disabled",!0),this.$element.prop("disabled",!0),this.$wrapper.addClass("disabled")},enable:function(){this.disabled=!1,this.$input.prop("disabled",!1),this.$element.prop("disabled",!1),this.$wrapper.removeClass("disabled")}};var old=$.fn.tokenfield;$.fn.tokenfield=function(option){var value,args=[];Array.prototype.push.apply(args,arguments);var elements=this.each(function(){var $this=$(this),data=$this.data("bs.tokenfield"),options="object"==typeof option&&option;"string"==typeof option&&data&&data[option]?(args.shift(),value=data[option].apply(data,args)):data||$this.data("bs.tokenfield",data=new Tokenfield(this,options))});return"undefined"!=typeof value?value:elements},$.fn.tokenfield.defaults={minWidth:60,minLength:0,allowDuplicates:!1,autocomplete:{},typeahead:{},showAutocompleteOnFocus:!1,createTokensOnBlur:!1,delimiter:",",beautify:!0},$.fn.tokenfield.Constructor=Tokenfield,$.fn.tokenfield.noConflict=function(){return $.fn.tokenfield=old,this}}(window.jQuery); \ No newline at end of file +!function(root,factory){"function"==typeof define&&define.amd?define(["jquery"],factory):root.Tokenfield=factory(root.jQuery)}(this,function($){"use strict";var Tokenfield=function(element,options){var _self=this;this.$element=$(element),this.options=$.extend({},$.fn.tokenfield.defaults,{tokens:this.$element.val()},options),this._delimiters="string"==typeof this.options.delimiter?[this.options.delimiter]:this.options.delimiter,this._triggerKeys=$.map(this._delimiters,function(delimiter){return delimiter.charCodeAt(0)});var elCSSWidth,elRules="function"==typeof window.getMatchedCSSRules?window.getMatchedCSSRules(element):null,elStyleWidth=element.style.width,elWidth=this.$element.width();elRules&&$.each(elRules,function(i,rule){rule.style.width&&(elCSSWidth=rule.style.width)}),this.$element.css({position:"absolute",left:"-10000px"}).prop("tabindex",-1),this.$wrapper=$('
'),this.$element.hasClass("input-lg")&&this.$wrapper.addClass("input-lg"),this.$element.hasClass("input-sm")&&this.$wrapper.addClass("input-sm");var id=this.$element.prop("id")||(new Date).getTime()+""+Math.floor(100*(1+Math.random()));this.$input=$('').appendTo(this.$wrapper).prop("placeholder",this.$element.prop("placeholder")).prop("id",id+"-tokenfield");var $label=$('label[for="'+this.$element.prop("id")+'"]');if($label.length&&$label.prop("for",this.$input.prop("id")),this.$copyHelper=$('').css({position:"absolute",left:"-10000px"}).prop("tabindex",-1).prependTo(this.$wrapper),elStyleWidth?this.$wrapper.css("width",elStyleWidth):elCSSWidth?this.$wrapper.css("width",elCSSWidth):this.$element.parents(".form-inline").length&&this.$wrapper.width(elWidth),(this.$element.prop("disabled")||this.$element.parents("fieldset[disabled]").length)&&this.disable(),this.$mirror=$(''),this.$input.css("min-width",this.options.minWidth+"px"),$.each(["fontFamily","fontSize","fontWeight","fontStyle","letterSpacing","textTransform","wordSpacing","textIndent"],function(i,val){_self.$mirror[0].style[val]=_self.$input.css(val)}),this.$mirror.appendTo("body"),this.$wrapper.insertBefore(this.$element),this.$element.prependTo(this.$wrapper),this.update(),this.setTokens(this.options.tokens,!1,!1),this.listen(),!$.isEmptyObject(this.options.autocomplete)){var autocompleteOptions=$.extend({},this.options.autocomplete,{minLength:this.options.showAutocompleteOnFocus?0:null,position:{my:"left top",at:"left bottom",of:this.$wrapper}});this.$input.autocomplete(autocompleteOptions)}if(!$.isEmptyObject(this.options.typeahead)){var typeaheadOptions=$.extend({},this.options.typeahead,{});this.$input.typeahead(typeaheadOptions),this.typeahead=!0}};Tokenfield.prototype={constructor:Tokenfield,createToken:function(attrs,triggerChange){"string"==typeof attrs&&(attrs={value:attrs,label:attrs}),"undefined"==typeof triggerChange&&(triggerChange=!0);var _self=this,value=$.trim(attrs.value),label=attrs.label.length?$.trim(attrs.label):value;if(value.length&&label.length&&!(value.length').attr("data-value",value).append('').append('×');this.$input.hasClass("tt-query")?this.$input.parent().before(token):this.$input.before(token),this.$input.css("width",this.options.minWidth+"px");var tokenLabel=token.find(".token-label"),closeButton=token.find(".close");this.maxTokenWidth||(this.maxTokenWidth=this.$wrapper.width()-closeButton.outerWidth()-parseInt(closeButton.css("margin-left"),10)-parseInt(closeButton.css("margin-right"),10)-parseInt(token.css("border-left-width"),10)-parseInt(token.css("border-right-width"),10)-parseInt(token.css("padding-left"),10)-parseInt(token.css("padding-right"),10),parseInt(tokenLabel.css("border-left-width"),10)-parseInt(tokenLabel.css("border-right-width"),10)-parseInt(tokenLabel.css("padding-left"),10)-parseInt(tokenLabel.css("padding-right"),10),parseInt(tokenLabel.css("margin-left"),10)-parseInt(tokenLabel.css("margin-right"),10)),tokenLabel.text(label).css("max-width",this.maxTokenWidth),token.on("mousedown",function(){return _self.disabled?!1:(_self.preventDeactivation=!0,void 0)}).on("click",function(e){return _self.disabled?!1:(_self.preventDeactivation=!1,e.ctrlKey||e.metaKey?(e.preventDefault(),_self.toggle(token)):(_self.activate(token,e.shiftKey,e.shiftKey),void 0))}).on("dblclick",function(){return _self.disabled?!1:(_self.edit(token),void 0)}),closeButton.on("click",$.proxy(this.remove,this));var afterCreateEvent=$.Event("afterCreateToken");afterCreateEvent.token=beforeCreateEvent.token,afterCreateEvent.relatedTarget=token.get(0),this.$element.trigger(afterCreateEvent);var changeEvent=$.Event("change");return changeEvent.initiator="tokenfield",triggerChange&&this.$element.val(this.getTokensList()).trigger(changeEvent),this.update(),this.$input.get(0)}}},setTokens:function(tokens,add,triggerChange){if(tokens){add||this.$wrapper.find(".token").remove(),"undefined"==typeof triggerChange&&(triggerChange=!0),"string"==typeof tokens&&(tokens=this._delimiters.length?tokens.split(new RegExp("["+this._delimiters.join("")+"]")):[tokens]);var _self=this;return $.each(tokens,function(i,token){_self.createToken(token,triggerChange)}),this.$element.get(0)}},getTokenData:function(token){var data=token.map(function(){var $token=$(this);return{value:$token.attr("data-value")||$token.find(".token-label").text(),label:$token.find(".token-label").text()}}).get();return 1==data.length&&(data=data[0]),data},getTokens:function(active){var self=this,tokens=[],activeClass=active?".active":"";return this.$wrapper.find(".token"+activeClass).each(function(){tokens.push(self.getTokenData($(this)))}),tokens},getTokensList:function(delimiter,beautify,active){delimiter=delimiter||this._delimiters[0],beautify="undefined"!=typeof beautify&&null!==beautify?beautify:this.options.beautify;var separator=delimiter+(beautify&&" "!==delimiter?" ":"");return $.map(this.getTokens(active),function(token){return token.value}).join(separator)},getInput:function(){return this.$input.val()},listen:function(){var _self=this;this.$element.on("change",$.proxy(this.change,this)),this.$wrapper.on("mousedown",$.proxy(this.focusInput,this)),this.$input.on("focus",$.proxy(this.focus,this)).on("blur",$.proxy(this.blur,this)).on("paste",$.proxy(this.paste,this)).on("keydown",$.proxy(this.keydown,this)).on("keypress",$.proxy(this.keypress,this)).on("keyup",$.proxy(this.keyup,this)),this.$copyHelper.on("focus",$.proxy(this.focus,this)).on("blur",$.proxy(this.blur,this)).on("keydown",$.proxy(this.keydown,this)).on("keyup",$.proxy(this.keyup,this)),this.$input.on("keypress",$.proxy(this.update,this)).on("keyup",$.proxy(this.update,this)),this.$input.on("autocompletecreate",function(){var $_menuElement=$(this).data("ui-autocomplete").menu.element,minWidth=_self.$wrapper.outerWidth()-parseInt($_menuElement.css("border-left-width"),10)-parseInt($_menuElement.css("border-right-width"),10);$_menuElement.css("min-width",minWidth+"px")}).on("autocompleteselect",function(e,ui){return _self.createToken(ui.item)&&(_self.$input.val(""),_self.$input.data("edit")&&_self.unedit(!0)),!1}).on("typeahead:selected",function(e,datum,dataset){var valueKey="value";$.each(_self.$input.data("ttView").datasets,function(i,set){set.name===dataset&&(valueKey=set.valueKey)}),_self.createToken(datum[valueKey])&&(_self.$input.typeahead("setQuery",""),_self.$input.data("edit")&&_self.unedit(!0))}).on("typeahead:autocompleted",function(){_self.createToken(_self.$input.val()),_self.$input.typeahead("setQuery",""),_self.$input.data("edit")&&_self.unedit(!0)}),$(window).on("resize",$.proxy(this.update,this))},keydown:function(e){if(this.focused){switch(e.keyCode){case 8:if(!this.$input.is(document.activeElement))break;this.lastInputValue=this.$input.val();break;case 37:if(this.$input.is(document.activeElement)){if(this.$input.val().length>0)break;var prev=this.$input.hasClass("tt-query")?this.$input.parent().prevAll(".token:first"):this.$input.prevAll(".token:first");if(!prev.length)break;this.preventInputFocus=!0,this.preventDeactivation=!0,this.activate(prev),e.preventDefault()}else this.prev(e.shiftKey),e.preventDefault();break;case 38:if(!e.shiftKey)return;if(this.$input.is(document.activeElement)){if(this.$input.val().length>0)break;var prev=this.$input.hasClass("tt-query")?this.$input.parent().prevAll(".token:last"):this.$input.prevAll(".token:last");if(!prev.length)return;this.activate(prev)}var _self=this;this.firstActiveToken.nextAll(".token").each(function(){_self.deactivate($(this))}),this.activate(this.$wrapper.find(".token:first"),!0,!0),e.preventDefault();break;case 39:if(this.$input.is(document.activeElement)){if(this.$input.val().length>0)break;var next=this.$input.hasClass("tt-query")?this.$input.parent().nextAll(".token:first"):this.$input.nextAll(".token:first");if(!next.length)break;this.preventInputFocus=!0,this.preventDeactivation=!0,this.activate(next),e.preventDefault()}else this.next(e.shiftKey),e.preventDefault();break;case 40:if(!e.shiftKey)return;if(this.$input.is(document.activeElement)){if(this.$input.val().length>0)break;var next=this.$input.hasClass("tt-query")?this.$input.parent().nextAll(".token:first"):this.$input.nextAll(".token:first");if(!next.length)return;this.activate(next)}var _self=this;this.firstActiveToken.prevAll(".token").each(function(){_self.deactivate($(this))}),this.activate(this.$wrapper.find(".token:last"),!0,!0),e.preventDefault();break;case 65:if(this.$input.val().length>0||!e.ctrlKey&&!e.metaKey)break;this.activateAll(),e.preventDefault();break;case 9:case 13:if(this.$input.data("ui-autocomplete")&&this.$input.data("ui-autocomplete").menu.element.find("li:has(a.ui-state-focus)").length)break;if(this.$input.hasClass("tt-query")&&this.$wrapper.find(".tt-is-under-cursor").length)break;if(this.$input.hasClass("tt-query")&&this.$wrapper.find(".tt-hint").val().length)break;if(this.$input.is(document.activeElement)&&this.$input.val().length||this.$input.data("edit"))return this.createTokensFromInput(e,this.$input.data("edit"));if(13===e.keyCode){if(!this.$copyHelper.is(document.activeElement)||1!==this.$wrapper.find(".token.active").length)break;this.edit(this.$wrapper.find(".token.active"))}}this.lastKeyDown=e.keyCode}},keypress:function(e){return this.lastKeyPressCode=e.keyCode,this.lastKeyPressCharCode=e.charCode,-1!==$.inArray(e.charCode,this._triggerKeys)&&this.$input.is(document.activeElement)?(this.$input.val()&&this.createTokensFromInput(e),!1):void 0},keyup:function(e){if(this.preventInputFocus=!1,this.focused){switch(e.keyCode){case 8:if(this.$input.is(document.activeElement)){if(this.$input.val().length||this.lastInputValue.length&&8===this.lastKeyDown)break;this.preventDeactivation=!0;var prev=this.$input.hasClass("tt-query")?this.$input.parent().prevAll(".token:first"):this.$input.prevAll(".token:first");if(!prev.length)break;this.activate(prev)}else this.remove(e);break;case 46:this.remove(e,"next")}this.lastKeyUp=e.keyCode}},focus:function(){this.focused=!0,this.$wrapper.addClass("focus"),this.$input.is(document.activeElement)&&(this.$wrapper.find(".active").removeClass("active"),this.firstActiveToken=null,this.options.showAutocompleteOnFocus&&this.search())},blur:function(e){this.focused=!1,this.$wrapper.removeClass("focus"),this.preventDeactivation||this.$element.is(document.activeElement)||(this.$wrapper.find(".active").removeClass("active"),this.firstActiveToken=null),!this.preventCreateTokens&&(this.$input.data("edit")&&!this.$input.is(document.activeElement)||this.options.createTokensOnBlur)&&this.createTokensFromInput(e),this.preventDeactivation=!1,this.preventCreateTokens=!1},paste:function(e){var _self=this;setTimeout(function(){_self.createTokensFromInput(e)},1)},change:function(e){"tokenfield"!==e.initiator&&this.setTokens(this.$element.val())},createTokensFromInput:function(e,focus){if(!(this.$input.val().lengththis.firstActiveToken.index():!1;if(deactivate)return this.deactivate(lastActive)}var active=this.$wrapper.find(".active:first"),prev=active.prevAll(".token:first");return prev.length||(prev=this.$wrapper.find(".token:first")),prev.length||add?(this.activate(prev,add),void 0):(this.$input.focus(),void 0)},activate:function(token,add,multi,remember){if(token&&this.$wrapper.find(".token.active").length!==this.$wrapper.find(".token").length){if("undefined"==typeof remember)var remember=!0;if(multi)var add=!0;if(this.$copyHelper.focus(),add||(this.$wrapper.find(".active").removeClass("active"),remember?this.firstActiveToken=token:delete this.firstActiveToken),multi&&this.firstActiveToken){var i=this.firstActiveToken.index()-2,a=token.index()-2,_self=this;this.$wrapper.find(".token").slice(Math.min(i,a)+1,Math.max(i,a)).each(function(){_self.activate($(this),!0)})}token.addClass("active"),this.$copyHelper.val(this.getTokensList(null,null,!0)).select()}},activateAll:function(){var _self=this;this.$wrapper.find(".token").each(function(i){_self.activate($(this),0!==i,!1,!1)})},deactivate:function(token){token&&(token.removeClass("active"),this.$copyHelper.val(this.getTokensList(null,null,!0)).select())},toggle:function(token){token&&(token.toggleClass("active"),this.$copyHelper.val(this.getTokensList(null,null,!0)).select())},edit:function(token){if(token){var value=token.data("value"),label=token.find(".token-label").text(),beforeEditEvent=$.Event("beforeEditToken");if(beforeEditEvent.token={value:value,label:label},beforeEditEvent.relatedTarget=token.get(0),this.$element.trigger(beforeEditEvent),beforeEditEvent.token){value=beforeEditEvent.token.value,label=beforeEditEvent.token.label,token.find(".token-label").text(value);var tokenWidth=token.outerWidth(),$_input=this.$input.hasClass("tt-query")?this.$input.parent():this.$input;token.replaceWith($_input),this.preventCreateTokens=!0,this.$input.val(value).select().data("edit",!0).width(tokenWidth)}}},unedit:function(focus){var $_input=this.$input.hasClass("tt-query")?this.$input.parent():this.$input;if($_input.appendTo(this.$wrapper),this.$input.data("edit",!1),this.update(),focus){var _self=this;setTimeout(function(){_self.$input.focus()},1)}},remove:function(e,direction){if(!this.$input.is(document.activeElement)&&!this.disabled){var token="click"===e.type?$(e.target).closest(".token"):this.$wrapper.find(".token.active");if("click"!==e.type){if(!direction)var direction="prev";if(this[direction](),"prev"===direction)var firstToken=0===token.first().prevAll(".token:first").length}var removeEvent=$.Event("removeToken");removeEvent.token=this.getTokenData(token);var changeEvent=$.Event("change");changeEvent.initiator="tokenfield",token.remove(),this.$element.val(this.getTokensList()).trigger(removeEvent).trigger(changeEvent),(!this.$wrapper.find(".token").length||"click"===e.type||firstToken)&&this.$input.focus(),this.$input.css("width",this.options.minWidth+"px"),this.update(),e.preventDefault(),e.stopPropagation()}},update:function(){var value=this.$input.val();if(this.$input.data("edit")){if(value||(value=this.$input.prop("placeholder")),value===this.$mirror.text())return;this.$mirror.text(value);var mirrorWidth=this.$mirror.width()+10;if(mirrorWidth>this.$wrapper.width())return this.$input.width(this.$wrapper.width());this.$input.width(mirrorWidth)}else this.$input.css("width",this.options.minWidth+"px"),this.$input.width(this.$wrapper.offset().left+this.$wrapper.width()-this.$input.offset().left+5)},focusInput:function(e){if(!$(e.target).closest(".token").length&&!$(e.target).closest(".token-input").length){var _self=this;setTimeout(function(){_self.$input.focus()},0)}},search:function(){this.$input.data("ui-autocomplete")&&this.$input.autocomplete("search")},disable:function(){this.disabled=!0,this.$input.prop("disabled",!0),this.$element.prop("disabled",!0),this.$wrapper.addClass("disabled")},enable:function(){this.disabled=!1,this.$input.prop("disabled",!1),this.$element.prop("disabled",!1),this.$wrapper.removeClass("disabled")}};var old=$.fn.tokenfield;return $.fn.tokenfield=function(option){var value,args=[];Array.prototype.push.apply(args,arguments);var elements=this.each(function(){var $this=$(this),data=$this.data("bs.tokenfield"),options="object"==typeof option&&option;"string"==typeof option&&data&&data[option]?(args.shift(),value=data[option].apply(data,args)):data||$this.data("bs.tokenfield",data=new Tokenfield(this,options))});return"undefined"!=typeof value?value:elements},$.fn.tokenfield.defaults={minWidth:60,minLength:0,allowDuplicates:!1,autocomplete:{},typeahead:{},showAutocompleteOnFocus:!1,createTokensOnBlur:!1,delimiter:",",beautify:!0},$.fn.tokenfield.Constructor=Tokenfield,$.fn.tokenfield.noConflict=function(){return $.fn.tokenfield=old,this},Tokenfield}); \ No newline at end of file diff --git a/bower.json b/bower.json index 2bfbf0f..f60d082 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "bootstrap-tokenfield", - "version": "0.9.9-2", + "version": "0.10.0", "main": ["bootstrap-tokenfield/bootstrap-tokenfield.js","bootstrap-tokenfield/bootstrap-tokenfield.css"], "dependencies": { "jquery": "~1.9.x" diff --git a/index.html b/index.html index 591d097..0ee3f75 100644 --- a/index.html +++ b/index.html @@ -192,10 +192,10 @@ $('.tokenfield').tokenfield() Whether to turn input into tokens when tokenfield loses focus or not. - delimiters - array - [','] - An array of characters that will trigger token creation on keypress event. Defaults to [','] (comma). Note - this does not affect Enter or Tab keys, as they are handled in the keydown event. The first delimiter will be used as a separator when getting the list of tokens or copy-pasting tokens. + delimiter + string, array + ',' + A character or an array of characters that will trigger token creation on keypress event. Defaults to ',' (comma). Note - this does not affect Enter or Tab keys, as they are handled in the keydown event. The first delimiter will be used as a separator when getting the list of tokens or copy-pasting tokens.