9 lines
8.0 KiB
JavaScript
Executable File
9 lines
8.0 KiB
JavaScript
Executable File
/*
|
|
* popselect - v0.1.14
|
|
* Replaces traditional <select> with a options from popover
|
|
* http://jquer.in/popselect
|
|
*
|
|
* Made by Jay Kanakiya
|
|
* Under MIT License
|
|
*/
|
|
!function(a,b,c){"use strict";function d(b,c){this.element=b,this.settings=a.extend({},o,c),this._defaults=o,this._name=n,this.init()}function e(a,b){for(var c in b)a=a.replace(new RegExp("{"+c+"}","g"),b[c]);return a}function f(a){return"."+a}function g(a){return a?'<div class="{'+a+'}"></div>':'<div class="{wrapper}"></div>'}function h(a){for(var b="",c=0;c<a.length;c++)a[c].selected&&(b+=j(a[c].val,a[c].text));return b}function i(a,b){return e('<div class="{tagWrapper}"><textarea class="{selectTextarea}"></textarea><ul class="{selectTags}">{tags}</ul><div class="{placeholderText}">{text}</div></div>',{tags:h(b),text:a,placeholderText:p.placeholderText,tagWrapper:p.tagWrapper,selectTextarea:p.selectTextarea,selectTags:p.selectTags})}function j(a,b){return e('<li class="{tag}" data-value="{val}" data-text="{text}"><span class="{popoverClose}">×</span>{text}</li>',{text:b,val:a,tag:p.tag,popoverClose:p.popoverClose})}function k(a,b){return e('<li data-value="{val}" data-text="{text}">{text}</li>',{val:a,text:b})}function l(){return e('<li class="{placeholder}"><div><input type="text" readonly="true"></div></li>',{placeholder:p.placeholder})}function m(a,b){return e('<div class="{popoverSelect} {top}">'+(b.showTitle?'<h3 class="{selectTitle}">{title}</h3>':"")+'<div class="{popoverBody}"><ul class="{selectList}">{list}</ul></div><div class="{arrow}"></div></div>',{title:b.title,list:a,arrow:p.arrow,popoverSelect:p.popoverSelect,popoverBody:p.popoverBody,selectList:p.selectList,top:b.position,selectTitle:p.selectTitle})}var n="popSelect",o={position:"top",showTitle:!0,autoIncrease:!0,title:"Select Multiple Options",debug:!1,maxAllowed:0,placeholderText:"Click to Add Values",autofocus:!1},p={tag:"tag",arrow:"arrow",selectWrapper:"popover-select-wrapper",tagWrapper:"popover-tag-wrapper",popoverSelect:"popover-select",popoverBody:"popover-select-body",selectTextarea:"popover-select-textarea",selectTags:"popover-select-tags",popoverClose:"popSelect-close",selectList:"popover-select-list",popoverDisabled:"disabled",placeholder:"placeholder",placeholderInput:"placeholder input",placeholderText:"placeholder-text",selectTitle:"popover-select-title",top:"top"},q={popoverGenerated:"PopSelect Code Generated",closeClicked:"Close button clicked",noElem:"No element to be removed",unSupported:"Not Supported",posChanged:"Position changed"},r={option:"option",blur:"blur",click:"click",mousedown:"mousedown",li:"li",attrVal:"data-value",attrText:"data-text",body:"BODY"};a.extend(d.prototype,{init:function(){var b=this;this.$elem=a(this.element),this.$options=this.$elem.children(r.option).map(function(b,c){return{val:a(c).val(),text:a(c).text(),selected:a(c).attr("selected")}}),this.$elem.wrap(e(g(),{wrapper:p.selectWrapper}));var c=this.getPosition(this.$elem);this.elemPos=c,this.$elem.parent(f(p.selectWrapper)).css({width:this.settings.width||c.width,height:c.height});var d=this.generatePopover(this.$options);b.log(q.popoverGenerated,d),this.$elem.after(d),this.$popover=this.$elem.next(f(p.popoverSelect)),this.$popover.css({top:0,left:0}),this.$elem.after(i(this.settings.placeholderText,this.$options)),this.$tagWrapper=this.$elem.next(f(p.tagWrapper)),this.baseHeight=this.$tagWrapper.height(),this.$inputTagField=this.$tagWrapper.find(f(p.selectTextarea)),this.$inputTagField.on(r.blur,function(){b.$popover.hide()}),this.$tags=this.$tagWrapper.find(f(p.selectTags)),this.$tags.on(r.click,this.initializePopover.bind(this)),this.$tags.next(f(p.placeholderText)).on(r.click,this.initializePopover.bind(this)),this.$tags.on(r.click,f(p.popoverClose),function(){b.inputToPopover(a(this))}),this.$popover.find(f(p.selectList)).on(r.mousedown,function(a){a.preventDefault()}).on(r.click,r.li,function(){b.popoverToInput(a(this))}),this.$elem.hide(),this.checkNumberOfTags(),this.changeSize(),this.$elem.trigger("popselect:init"),this.settings.autofocus&&this.initializePopover()},inputToPopover:function(a){var b=a.parent();this.log(q.closeClicked,b);var c=b.attr(r.attrVal),d=b.attr(r.attrText);this.appendToPopup(c,d),b.remove(),this.setPlaceholder(),this.focus(),this.changeSize(),this.checkNumberOfTags(),this.$elem.trigger("popselect:remove",[c,d])},enablePopover:function(){this.$popover.find(f(p.selectList)+" li").removeClass(p.popoverDisabled)},disablePopover:function(){this.$popover.find(f(p.selectList)+" li").addClass(p.popoverDisabled)},checkNumberOfTags:function(){var a=this.$tags.find(f(p.tag)).length;0===a?this.enablePlaceHolderText():this.disablePlaceHolderText(),0!==this.settings.maxAllowed&&(this.settings.maxAllowed>a?this.enablePopover():this.disablePopover()),this.syncWithSelect()},popoverToInput:function(a){var b=a.attr(r.attrVal),c=a.text(),d=j(b,c);this.$tags.append(d),a.remove(),this.setPlaceholder(),this.focus(),this.popoverShow(),this.changePosition(),this.changeSize(),this.checkNumberOfTags(),this.$elem.trigger("popselect:add",[b,c])},popoverShow:function(){this.$popover.find(f(p.selectList)+" li").length?this.$popover.show():this.$popover.hide()},initializePopover:function(){this.popoverShow(),this.changePosition(),this.setPlaceholder(),this.focus()},enablePlaceHolderText:function(){this.$tags.next(f(p.placeholderText)).show()},disablePlaceHolderText:function(){this.$tags.next(f(p.placeholderText)).hide()},focus:function(){var a=this;this.$tags.find(f(p.placeholderInput)).focus(),this.$tags.find(f(p.placeholderInput)).on(r.blur,function(){a.$popover.hide()})},setPlaceholder:function(){this.$tags.children(f(p.placeholder)).length&&this.$tags.children(f(p.placeholder)).remove(),this.$tags.append(l()),this.disableInput()},disableInput:function(){var b=this;this.$tags.find(f(p.placeholderInput)).keyup(function(c){a(this).val(""),(8===c.which||46===c.which||c.ctrlKey&&88===c.which)&&b.removeLastElem()})},changeSize:function(){if(this.settings.autoIncrease){var b=0,c=this.settings.width||this.elemPos.width;this.$tags.find(f(p.tag)).each(function(c,d){b+=a(d).outerWidth()+20});var d=Math.floor(b/c);this.$tags.height((d+1)*this.baseHeight)}},removeLastElem:function(){var b=this.$tags.find(f(p.tag));if(b.length){var c=a(b[b.length-1]),d=c.attr(r.attrVal),e=c.attr(r.attrText);this.appendToPopup(d,e),c.remove(),this.changePosition(),this.setPlaceholder(),this.focus(),this.changeSize(),this.checkNumberOfTags()}else this.log(q.noElem)},setTitle:function(a){this.settings.showTitle&&this.$popover.find(f(p.selectTitle)).text(a)},getPosition:function(d){d=d||this.$element;var e=d[0],f=e.tagName===r.body,g=e.getBoundingClientRect();if(null==g.width){var h=g.right-g.left,i=g.bottom-g.top;g=a.extend({},g,{width:h,height:i})}var j=f?{top:0,left:0}:d.offset(),k={scroll:f?c.documentElement.scrollTop||c.body.scrollTop:d.scrollTop()},l=f?{width:a(b).width(),height:a(b).height()}:null;return a.extend({},g,k,l,j)},syncWithSelect:function(){var b=this.$tags.find(f(p.tag)).map(function(b,c){return a(c).attr("data-value")}).toArray();this.$elem.children(r.option).each(function(c,d){b.indexOf(a(d).val())<0?a(d).removeAttr("selected"):a(d).attr("selected","selected")})},appendToPopup:function(a,b){var c=k(a,b);this.$popover.find(f(p.selectList)).append(c)},generatePopover:function(a){for(var b="",c=0;c<a.length;c++)a[c].selected||(b+=k(a[c].val,a[c].text));var d=m(b,this.settings);return d},changePosition:function(){var a,b=this.getPosition(this.$popover),c=this.getPosition(this.$tagWrapper),d=(this.settings.width||this.elemPos.width)/2-b.width/2;a="top"===this.settings.position?-b.height:c.height,this.log("popPos.width",b.width),this.log(q.posChanged,a,d),this.$popover.css({top:a,left:d})},log:function(){this.settings.debug&&console.log.apply(console,arguments)}}),a.fn.popSelect=function(b){return"string"!=typeof b?this.each(function(){a.data(this,"plugin_"+n)||a.data(this,"plugin_"+n,new d(this,b))}):"value"===b?this.next(f(p.tagWrapper)).find(f(p.tag)).map(function(b,c){return a(c).attr(r.attrVal)}):void console.warn(q.unSupported)}}(jQuery,window,document); |