UNPKG

materialize-tags

Version:

A jQuery tags input plugin based on Materialize

11 lines (10 loc) 9.15 kB
/** * materialize-tags - A jQuery tags input plugin based on Materialize * @version v1.2.1 * @link https://github.com/henrychavez/materialize-tags * @license MIT * @author Henry Chávez <henry19.chavez@gmail.com> * @maintainer Jonathan Dekhtiar <contact@jonathandekhtiar.eu> */ !function(t){"use strict";var e={tagClass:function(t){return"chip"},itemValue:function(t){return t?t.toString():t},itemText:function(t){return this.itemValue(t)},itemTitle:function(t){return null},freeInput:!0,addOnBlur:!0,maxTags:void 0,maxChars:void 0,confirmKeys:[9,13,44,188],onTagExists:function(t,e){e.hide().fadeIn()},trimValue:!0,allowDuplicates:!1,allowTabOnEmpty:!1,deleteTagsOnBackspace:!0,deleteTagsOnDeleteKey:!0,MoveTagOnLeftArrow:!0,MoveTagOnRightArrow:!0,autoselect:!1,CapitalizeFirstLetterOnly:!1};function i(e,i){this.itemsArray=[],this.$element=t(e),this.$element.hide(),this.objectItems=i&&i.itemValue,this.placeholderText=e.hasAttribute("placeholder")?this.$element.attr("placeholder"):"",this.inputSize=Math.max(1,this.placeholderText.length),this.$container=t('<div class="materialize-tags"></div>'),this.$input=t('<input type="text" class="n-tag" placeholder="'+this.placeholderText+'"/>').appendTo(this.$container),this.$label=this.$element.parent().find("label"),this.$element.before(this.$container),this.build(i),this.$label.on("click",function(){t(this).addClass("active"),t(this).addClass("infocus"),t(this).next(".materialize-tags").find("input.n-tag").focus()}),this.$input.on("focus",function(){var e=t(this).parents(".materialize-tags").parent().find("label");t(this).parents(".materialize-tags").addClass("active"),+!e.hasClass("infocus")&&e.addClass("infocus"),e.hasClass("active")||e.addClass("active")}).on("focusout",function(){var e=t(this).parents(".materialize-tags"),i=e.find("span.chip");e.removeClass("active"),e.parent().find("label").removeClass("infocus"),0==i.length&&0==t(this).val().length&&e.parent().find("label").removeClass("active")})}i.prototype={constructor:i,add:function(e,i,a){var n=this;if(!(n.options.maxTags&&n.itemsArray.length>=n.options.maxTags)&&(!1===e||e)){if("string"==typeof e&&n.options.trimValue&&(e=t.trim(e)),"string"==typeof e&&n.options.CapitalizeFirstLetterOnly&&(e=e.charAt(0).toUpperCase()+e.slice(1)),"object"==typeof e&&!n.objectItems)throw"Can't add objects when itemValue option is not set";if(!e.toString().match(/^\s*$/)){if("string"==typeof e&&"INPUT"===this.$element[0].tagName){var s=e.split(",");if(s.length>1){for(var o=0;o<s.length;o++)this.add(s[o],!0);return void(i||n.pushVal())}}var l=n.options.itemValue(e),p=n.options.itemText(e),u=n.options.tagClass(e),c=n.options.itemTitle(e);if(""!=p&&void 0!=p){var h=t.grep(n.itemsArray,function(t){return n.options.itemValue(t)===l})[0];if(!h||n.options.allowDuplicates){if(!(n.items().toString().length+e.length+1>n.options.maxInputLength)){var m=t.Event("beforeItemAdd",{item:e,cancel:!1,options:a});if(n.$element.trigger(m),!m.cancel){n.itemsArray.push(e);var f=t('<span class="'+r(u)+(null!==c?'" title="'+c:"")+'">'+r(p)+'<i class="material-icons" data-role="remove">close</i></span>');f.data("item",e),n.findInputWrapper().before(f),f.after(" "),i||n.pushVal(),n.options.maxTags!==n.itemsArray.length&&n.items().toString().length!==n.options.maxInputLength||(n.$container.addClass("materialize-tags-max"),n.$input.blur(),n.$input.prop("readOnly",!0)),n.$element.trigger(t.Event("itemAdded",{item:e,options:a}))}}}else if(n.options.onTagExists){var d=t(".tag",n.$container).filter(function(){return t(this).data("item")===h});n.options.onTagExists(e,d)}}}}},remove:function(e,i,a){var n=this;if(n.objectItems&&(e=(e="object"==typeof e?t.grep(n.itemsArray,function(t){return n.options.itemValue(t)==n.options.itemValue(e)}):t.grep(n.itemsArray,function(t){return n.options.itemValue(t)==e}))[e.length-1]),e){var r=t.Event("beforeItemRemove",{item:e,cancel:!1,options:a});if(n.$element.trigger(r),r.cancel)return;t(".chip",n.$container).filter(function(){return t(this).data("item")===e}).remove(),-1!==t.inArray(e,n.itemsArray)&&n.itemsArray.splice(t.inArray(e,n.itemsArray),1)}i||n.pushVal(),n.options.maxTags>n.itemsArray.length&&(n.$container.removeClass("materialize-tags-max"),n.$input.prop("readOnly",!1)),0==n.itemsArray.length&&n.$input.siblings("label").first().removeClass("active"),n.$input.blur(),n.$element.trigger(t.Event("itemRemoved",{item:e,options:a}))},removeAll:function(){for(t(".chip",this.$container).remove();this.itemsArray.length>0;)this.itemsArray.pop();this.pushVal(),this.$container.removeClass("materialize-tags-max"),this.$input.siblings("label").first().removeClass("active"),this.$input.prop("readOnly",!1),this.$input.blur()},refresh:function(){var e=this;t(".chip",e.$container).each(function(){var i=t(this),a=i.data("item"),n=(e.options.itemValue(a),e.options.itemText(a)),s=e.options.tagClass(a);i.attr("class",null),i.addClass("tag "+r(s)),i.contents().filter(function(){return 3==this.nodeType})[0].nodeValue=r(n)})},items:function(){return this.itemsArray},pushVal:function(){var e=this,i=t.map(e.items(),function(t){return e.options.itemValue(t).toString()});e.$element.val(i,!0).trigger("change"),e.$input.typeahead("val","")},build:function(i){var n=this;if(n.options=t.extend({},e,i),n.objectItems&&(!0===n.options.freeInput?n.options.freeInput=!0:n.options.freeInput=!1),a(n.options,"itemValue"),a(n.options,"itemText"),function(t,e){if("function"!=typeof t[e]){var i=t[e];t[e]=function(){return i}}}(n.options,"tagClass"),n.options.typeaheadjs){var r=null,o={},l=n.options.typeaheadjs;t.isArray(l)?(r=l[0],o=l[1]):o=l,n.$input.typeahead(r,o).on("typeahead:selected",t.proxy(function(t,e){o.valueKey?n.add(e[o.valueKey]):n.add(e),n.$input.typeahead("val","")},n))}n.$container.on("click",t.proxy(function(t){n.$element.attr("disabled")||n.$input.removeAttr("disabled"),n.$input.focus()},n)),n.options.addOnBlur&&n.options.freeInput&&n.$input.on("focusout",t.proxy(function(t){n.add(n.$input.val()),n.$input.val("")},n)),n.$container.on("keydown","input",t.proxy(function(e){var i=t(e.target),a=n.findInputWrapper();if(n.$element.attr("disabled"))n.$input.attr("disabled","disabled");else{switch(e.which){case 8:if(n.options.deleteTagsOnBackspace&&0===s(i[0])){var r=a.prev();r&&n.remove(r.data("item"))}break;case 46:if(n.options.deleteTagsOnDeleteKey&&0===s(i[0])){var o=a.next();o&&n.remove(o.data("item"))}break;case 37:var l=a.prev();n.options.MoveTagOnLeftArrow&&0===i.val().length&&l[0]&&(l.before(a),i.focus());break;case 39:var p=a.next();n.options.MoveTagOnRightArrow&&0===i.val().length&&p[0]&&(p.after(a),i.focus())}var u=i.val().length;Math.ceil(u/5);i.attr("size",Math.max(this.inputSize,i.val().length))}},n)),n.$container.on("keydown","input",t.proxy(function(e){var i=t(e.target);if(n.$element.attr("disabled"))n.$input.attr("disabled","disabled");else{var a=i.val(),r=n.options.maxChars&&a.length>=n.options.maxChars;if(!n.options.allowTabOnEmpty||(s=a,0!==s.length)||9!==e.which){var s;n.options.freeInput&&(function(e,i){var a=!1;return t.each(i,function(t,i){if("number"==typeof i&&e.which===i)return a=!0,!1;if(e.which===i.which){var n=!i.hasOwnProperty("altKey")||e.altKey===i.altKey,r=!i.hasOwnProperty("shiftKey")||e.shiftKey===i.shiftKey,s=!i.hasOwnProperty("ctrlKey")||e.ctrlKey===i.ctrlKey;if(n&&r&&s)return a=!0,!1}}),a}(e,n.options.confirmKeys)||r)&&(n.add(r?a.substr(0,n.options.maxChars):a),i.val(""),n.$input.typeahead&&n.$input.typeahead("val",""),e.preventDefault());var o=i.val().length;Math.ceil(o/5);i.attr("size",Math.max(this.inputSize,i.val().length))}}},n)),n.$container.on("click","[data-role=remove]",t.proxy(function(e){n.$element.attr("disabled")||n.remove(t(e.target).closest(".chip").data("item"))},n)),n.options.itemValue===e.itemValue&&"INPUT"===n.$element[0].tagName&&n.add(n.$element.val())},destroy:function(){this.$container.off("keydown","input"),this.$container.off("click","[role=remove]"),this.$container.remove(),this.$element.removeData("materialtags"),this.$element.show()},focus:function(){this.$input.focus()},input:function(){return this.$input},findInputWrapper:function(){for(var e=this.$input[0],i=this.$container[0];e&&e.parentNode!==i;)e=e.parentNode;return t(e)}},t.fn.materialtags=function(e,a,n){var r=[];return this.each(function(){var s=t(this).data("materialtags");if(s)if(e||a){if(void 0!==s[e]){if(3===s[e].length&&void 0!==n)var o=s[e](a,null,n);else o=s[e](a);void 0!==o&&r.push(o)}}else r.push(s);else s=new i(this,e),t(this).data("materialtags",s),r.push(s),t(this).val(t(this).val())}),"string"==typeof e?r.length>1?r:r[0]:r},t.fn.materialtags.defaults=e,t.fn.materialtags.Constructor=i;function a(t,e){if("function"!=typeof t[e]){var i=t[e];t[e]=function(t){return t[i]}}}var n=t("<div />");function r(t){return t?n.text(t).html():""}function s(t){var e=0;if(document.selection){t.focus();var i=document.selection.createRange();i.moveStart("character",-t.value.length),e=i.text.length}else(t.selectionStart||"0"==t.selectionStart)&&(e=t.selectionStart);return e}t(function(){t("input[data-role=materialtags]").materialtags()})}(window.jQuery); //# sourceMappingURL=materialize-tags.min.js.map