ax5ui-picker
Version:
A picker plugin that works with Bootstrap & jQuery
3 lines (2 loc) • 19.6 kB
JavaScript
"use strict";!function(){var t=ax5.ui,e=ax5.util,i=void 0;t.addClass({className:"picker"},function(){return function(){var t=this,n=void 0;this.instanceId=ax5.getGuid(),this.config={clickEventName:"click",theme:"default",title:"",lang:{ok:"ok",cancel:"cancel"},animateTime:100,calendar:{multipleSelect:!1,control:{left:ax5.def.picker.date_leftArrow||"←",yearTmpl:ax5.def.picker.date_yearTmpl||"%s",monthTmpl:ax5.def.picker.date_monthTmpl||"%s",right:ax5.def.picker.date_rightArrow||"→",yearFirst:!0}},palette:{}},this.queue=[],this.activePicker=null,this.activePickerQueueIndex=-1,this.openTimer=null,this.closeTimer=null,n=this.config;var a=function(t,e){return t&&t.onStateChanged?t.onStateChanged.call(e,e):this.onStateChanged&&this.onStateChanged.call(e,e),!0},l=function(){var t={focus:function(t,e){this.open(t)},click:function(t,e){this.open(t)}},i={"@fn":function(t,e){var i=this.queue[t],a=e.length,l={inputLength:a||1};a>1&&(l.btns={ok:{label:n.lang.ok,theme:n.theme}}),this.queue[t]=jQuery.extend(!0,l,i),l=null,a=null},date:function(t,e){var i=this.queue[t],a=i.content?i.content.width||270:270,l=i.content?i.content.margin||5:5,u=e.length,c={contentWidth:a*u+(u-1)*l,content:{width:a,margin:l},inputLength:u||1};u>1&&!i.btns&&(c.btns={ok:{label:n.lang.ok,theme:n.theme}}),this.queue[t]=jQuery.extend(!0,c,i),a=null,l=null,c=null,u=null},"secure-num":function(t,e){var i=this.queue[t],n=e.length,a={inputLength:n||1};this.queue[t]=jQuery.extend(!0,a,i),a=null,n=null},keyboard:function(t,e){var i=this.queue[t],n=e.length,a={inputLength:n||1};this.queue[t]=jQuery.extend(!0,a,i),a=null,n=null},numpad:function(t,e){var i=this.queue[t],n=e.length,a={inputLength:n||1};this.queue[t]=jQuery.extend(!0,a,i),a=null,n=null},color:function(t,i){var a=this.queue[t],l=a.content?a.content.width||270:270,u=a.content?a.content.margin||5:5,c=i.length,r={contentWidth:l*c+(c-1)*u,content:{width:l,margin:u},inputLength:c||1},s=a.$target.find('[data-ax5picker-color="preview"]');s.get(0)&&(s.css({"background-color":"#"+e.color(i.val()||"#000000").getHexValue()}),i.on("change",function(){s.css({"background-color":"#"+e.color(this.value||"#000000").getHexValue()})})),c>1&&!a.btns&&(r.btns={ok:{label:n.lang.ok,theme:n.theme}}),this.queue[t]=jQuery.extend(!0,r,a),l=null,u=null,r=null,c=null}};return function(n){var a=this.queue[n],l=void 0;if(!a.content)return console.log(ax5.info.getError("ax5picker","501","bind")),this;if(l="INPUT"==a.$target.get(0).tagName.toUpperCase()?a.$target:a.$target.find("input[type]"),e.isFunction(a.content))i["@fn"].call(this,n,l);else for(var u in i)if(a.content.type==u){i[u].call(this,n,l);break}return l.unbind("focus.ax5picker").unbind("click.ax5picker").bind("focus.ax5picker",t.focus.bind(this,n)).bind("click.ax5picker",t.click.bind(this,n)),a.$target.find(".input-group-addon").unbind("click.ax5picker").bind("click.ax5picker",t.click.bind(this,n)),a.content.formatter&&ax5.ui.formatter&&l.ax5formatter(a.content.formatter),l=null,a=null,n=null,this}}(),u=function(t){if(!this.activePicker)return this;var e=function(e){var i,n=jQuery(window),a=jQuery(document.body),l={},u=12,c={},r={};l=e.$target.offset(),c={width:e.$target.outerWidth(),height:e.$target.outerHeight()},r={winWidth:Math.max(n.width(),a.width()),winHeight:Math.max(n.height(),a.height()),width:this.activePicker.outerWidth(),height:this.activePicker.outerHeight()},e.direction&&""!==e.direction&&"auto"!==e.direction?i=e.direction:(i="top",l.top-r.height-u<0?i="top":l.top+c.height+r.height+u>r.winHeight&&(i="bottom")),t&&this.activePicker.addClass("direction-"+i);var s=function(){var t={left:0,top:0};switch(i){case"top":t.left=l.left+c.width/2-r.width/2,t.top=l.top+c.height+u;break;case"bottom":t.left=l.left+c.width/2-r.width/2,t.top=l.top-r.height-u;break;case"left":t.left=l.left+c.width+u,t.top=l.top-r.height/2+c.height/2;break;case"right":t.left=l.left-r.width-u,t.top=l.top-r.height/2+c.height/2}return t}();(function(){"top"!=i&&"bottom"!=i||(s.left<0?(s.left=u,this.activePickerArrow.css({left:l.left+c.width/2-s.left})):s.left+r.width>r.winWidth&&(s.left=r.winWidth-r.width-u,this.activePickerArrow.css({left:l.left+c.width/2-s.left})))}).call(this),this.activePicker.css(s)},i=this.queue[this.activePickerQueueIndex];t&&(this.activePicker.css({top:-999}),jQuery(document.body).append(this.activePicker)),setTimeout(function(){e.call(this,i)}.bind(this))},c=function(t,i){if(!this.activePicker)return this;var n=this.queue[this.activePickerQueueIndex];return i=e.findParentNode(t.target,function(t){return!!t.getAttribute("data-picker-els")||(n.$target.get(0)==t||void 0)}),i?this:(this.close(),this)},r=function(t,i){if(t.srcElement&&(t.target=t.srcElement),i=e.findParentNode(t.target,function(t){if(t.getAttribute("data-picker-btn"))return!0})){var n=this.queue[this.activePickerQueueIndex],a=i.getAttribute("data-picker-btn");if(n.btns&&n.btns[a].onClick){var l={key:a,value:n.btns[a],self:this,item:n};n.btns[a].onClick.call(l,a)}else this.close()}},s=function(t){t.keyCode==ax5.info.eventKeys.ESC&&this.close()},o=function(t){return e.isString(t)||(t=jQuery(t).data("data-axpicker-id")),e.isString(t)?e.search(this.queue,function(){return this.id==t}):void console.log(ax5.info.getError("ax5picker","402","getQueIdx"))};this.init=function(){this.onStateChanged=n.onStateChanged},this.bind=function(t){var i={},a=void 0;return t=jQuery.extend(!0,i,n,t),t.target?(t.$target=jQuery(t.target),t.$target.get(0)?(t.id||(t.id=t.$target.data("data-axpicker-id")),t.id||(t.id="ax5-picker-"+ax5.getGuid(),t.$target.data("data-axpicker-id",t.id)),a=e.search(this.queue,function(){return this.id==t.id}),a===-1?(this.queue.push(t),l.call(this,this.queue.length-1)):(this.queue[a]=jQuery.extend(!0,{},this.queue[a],t),l.call(this,a)),i=null,a=null,this):(console.log(ax5.info.getError("ax5picker","401","bind")),this)):(console.log(ax5.info.getError("ax5picker","401","bind")),this)},this.setContentValue=function(){var i={date:function(t,e,i){var n,a,l,u=[];return"INPUT"!==t.$target.get(0).tagName.toUpperCase()&&t.$target.find("input[type]").each(function(){u.push(this.value)}),0==e?(u.length>1&&""!==u[1]?(n=ax5.util.dday(u[1],{today:u[0]}),n<0&&(l=i)):l=i,l&&(t.pickerCalendar[1].ax5uiInstance.setSelection([l],!1).changeMode("d",l),this.setContentValue(t.id,1,l)),i):1==e?(u.length>1&&(n=ax5.util.dday(u[1],{today:u[0]}),n<0&&(a=u[1])),a&&(t.pickerCalendar[0].ax5uiInstance.setSelection([a],!1).changeMode("d",a),this.setContentValue(t.id,0,a)),i):void 0}};return function(n,l,u,c){var r=e.isNumber(n)?n:o.call(this,n),s=this.queue[r],h=void 0;if(c||(c={}),s){if(h="INPUT"==s.$target.get(0).tagName.toUpperCase()?s.$target:jQuery(s.$target.find("input[type]").get(l)),h.val(u),s.disableChangeTrigger){var d=s.$target.find('[data-ax5picker-color="preview"]');d.get(0)&&d.css({"background-color":u})}else h.trigger("change");s.inputLength>1&&i[s.content.type]&&(u=i[s.content.type].call(this,s,l,u));var f={self:t,state:"changeValue",item:s,inputIndex:l,value:u,values:[u]};"INPUT"!==s.$target.get(0).tagName.toUpperCase()&&(f.values=[],s.$target.find("input[type]").each(function(){f.values.push(this.value)})),a.call(this,s,f),1!=s.inputLength||c.doNotClose||this.close()}return s=null,n=null,l=null,u=null,this}}(),this.getContentValue=function(){return function(t,i){var n=e.isNumber(t)?t:o.call(this,t),a=this.queue[n],l=void 0;return a?(l="INPUT"==a.$target.get(0).tagName.toUpperCase()?a.$target:jQuery(a.$target.find("input[type]").get(i)),l.val()):(a=null,t=null,i=null,this)}}(),this.open=function(){var l={"@fn":function(t,e){var i=this.queue[t];return i.content.call(i,function(t){e(t)}),!0},date:function(i){for(var a=this.queue[i],l=[],u=jQuery.extend({},n.calendar,{displayDate:new Date}),c="INPUT"==a.$target.get(0).tagName.toUpperCase()?a.$target:a.$target.find("input[type]"),r=0;r<a.inputLength;r++)l.push('<div style="width:'+e.cssNumber(a.content.width)+';float:left;" class="ax-picker-content-box" data-calendar-target="'+r+'"></div>'),r<a.inputLength-1&&l.push('<div style="width:'+a.content.margin+'px;float:left;height: 5px;"></div>');l.push('<div style="clear:both;"></div>'),a.pickerContent.html(l.join("")),a.pickerCalendar=[],a.pickerContent.find("[data-calendar-target]").each(function(){var e=this.getAttribute("data-calendar-target"),i=c.get(e).value,n=ax5.util.date(i),l={year:function(t){return ax5.util.date(t,{return:"yyyy"})},month:function(t){return ax5.util.date(t,{return:"yyyy-MM"})},day:function(t){return t}};u.displayDate=n,i&&(u.selection=[n]),u=jQuery.extend(!0,u,a.content.config||{}),u.target=this,u.onClick=function(){t.setContentValue(a.id,e,l[u.selectMode||"day"](this.date))},a.pickerCalendar.push({itemId:a.id,inputIndex:e,ax5uiInstance:new ax5.ui.calendar(u)})})},"secure-num":function(i){for(var n=this.queue[i],l=[],u=0;u<n.inputLength;u++)l.push('<div style="width:'+e.cssNumber(n.content.width)+';float:left;" class="ax-picker-content-box" data-secure-num-target="'+u+'"></div>'),u<n.inputLength-1&&l.push('<div style="width:'+n.content.margin+'px;float:left;height: 5px;"></div>');l.push('<div style="clear:both;"></div>'),n.pickerContent.html(l.join("")),n.pickerContent.find("[data-secure-num-target]").each(function(){var e=this.getAttribute("data-secure-num-target"),i=[],l=function(t){var e,i,n;for(n=t.length;n;n-=1)e=Math.floor(Math.random()*n),i=t[n-1],t[n-1]=t[e],t[e]=i;return t}([0,1,2,3,4,5,6,7,8,9]),u=[{label:"←",fn:"back"},{label:"C",fn:"clear"}];l.forEach(function(t){i.push('<div style="float:left;'+n.content.config.btnWrapStyle+'">'),i.push('<button class="btn btn-default btn-'+n.content.config.btnTheme+'" style="'+n.content.config.btnStyle+'" data-secure-num-value="'+t+'">'+t+"</button>"),i.push("</div>")}),u.forEach(function(t){i.push('<div style="float:left;'+n.content.config.btnWrapStyle+'">'),i.push('<button class="btn btn-default btn-'+n.content.config.specialBtnTheme+'" style="'+n.content.config.btnStyle+'" data-secure-num-value="'+t.fn+'">'+t.label+"</button>"),i.push("</div>")}),i.push('<div style="clear:both;"></div>'),$(this).html(i.join("")).on("click","[data-secure-num-value]",function(){var i=this.getAttribute("data-secure-num-value"),l="INPUT"==n.$target.get(0).tagName.toUpperCase()?n.$target:jQuery(n.$target.find("input[type]").get(e)),u=l.val();"back"==i?l.val(u.substring(0,u.length-1)):"clear"==i?l.val(""):l.val(u+i),a.call(this,n,{self:t,state:"changeValue",item:n,value:l.val()})})})},keyboard:function(i){for(var n=this.queue[i],l=[],u=0;u<n.inputLength;u++)l.push('<div style="width:'+e.cssNumber(n.content.width)+';float:left;" class="ax-picker-content-box" data-keyboard-target="'+u+'"></div>'),u<n.inputLength-1&&l.push('<div style="width:'+n.content.margin+'px;float:left;height: 5px;"></div>');l.push('<div style="clear:both;"></div>'),n.pickerContent.html(l.join(""));var c=[[{value:"`",shiftValue:"~"},{value:"1",shiftValue:"!"},{value:"2",shiftValue:"@"},{value:"3",shiftValue:"#"},{value:"4",shiftValue:"$"},{value:"5",shiftValue:"%"},{value:"6",shiftValue:"^"},{value:"7",shiftValue:"&"},{value:"8",shiftValue:"*"},{value:"9",shiftValue:"("},{value:"0",shiftValue:")"},{value:"-",shiftValue:"_"},{value:"=",shiftValue:"+"},{label:"←",fn:"back"}],[{value:"q",shiftValue:"Q"},{value:"w",shiftValue:"W"},{value:"e",shiftValue:"E"},{value:"r",shiftValue:"R"},{value:"t",shiftValue:"T"},{value:"y",shiftValue:"Y"},{value:"u",shiftValue:"U"},{value:"i",shiftValue:"I"},{value:"o",shiftValue:"O"},{value:"p",shiftValue:"P"},{value:"[",shiftValue:"{"},{value:"]",shiftValue:"}"},{value:"\\",shiftValue:"|"}],[{label:"Clear",fn:"clear"},{value:"a",shiftValue:"A"},{value:"s",shiftValue:"S"},{value:"d",shiftValue:"D"},{value:"f",shiftValue:"F"},{value:"g",shiftValue:"G"},{value:"h",shiftValue:"H"},{value:"j",shiftValue:"J"},{value:"k",shiftValue:"K"},{value:"l",shiftValue:"L"},{value:";",shiftValue:":"},{value:"'",shiftValue:'"'}],[{label:"Shift",fn:"shift"},{value:"z",shiftValue:"Z"},{value:"x",shiftValue:"X"},{value:"c",shiftValue:"C"},{value:"v",shiftValue:"V"},{value:"b",shiftValue:"B"},{value:"n",shiftValue:"N"},{value:"m",shiftValue:"M"},{value:",",shiftValue:"<"},{value:".",shiftValue:">"},{value:"/",shiftValue:"?"},{label:"Close",fn:"close"}]],r=function(t){var e=[];return c.forEach(function(i){e.push('<div style="display: table;margin:0 auto;">'),i.forEach(function(i){var a,l,u,c,r;i.fn?(a=i.fn,l=i.label,u=n.content.config.specialBtnWrapStyle,c=n.content.config.specialBtnTheme,r=n.content.config.specialBtnStyle):(l=a=t?i.shiftValue:i.value,u=n.content.config.btnWrapStyle,c=n.content.config.btnTheme,r=n.content.config.btnStyle),e.push('<div style="display: table-cell;'+u+'">'),e.push('<button class="btn btn-default btn-'+c+'" style="'+r+'" data-keyboard-value="'+a+'">'+l+"</button>"),e.push("</div>")}),e.push("</div>")}),e.join("")};n.pickerContent.find("[data-keyboard-target]").each(function(){var e=this.getAttribute("data-keyboard-target"),i=$(this),l=!1,u=function(){l=!l,i.html(r(l))};i.html(r(l)).on("mousedown","[data-keyboard-value]",function(){var i=this.getAttribute("data-keyboard-value"),l="INPUT"==n.$target.get(0).tagName.toUpperCase()?n.$target:jQuery(n.$target.find("input[type]").get(e)),c=l.val();switch(i){case"back":l.val(c.substring(0,c.length-1));break;case"clear":l.val("");break;case"shift":return u(),!1;case"close":return t.close(),!1;default:l.val(c+i)}a.call(this,n,{self:t,state:"changeValue",item:n,value:l.val()})})})},numpad:function(i){for(var n=this.queue[i],l=[],u=0;u<n.inputLength;u++)l.push('<div style="width:'+e.cssNumber(n.content.width)+';float:left;" class="ax-picker-content-box" data-numpad-target="'+u+'"></div>'),u<n.inputLength-1&&l.push('<div style="width:'+n.content.margin+'px;float:left;height: 5px;"></div>');l.push('<div style="clear:both;"></div>'),n.pickerContent.html(l.join("")),n.pickerContent.find("[data-numpad-target]").each(function(){var e=this.getAttribute("data-numpad-target"),i=[],l=n.content.config.keyArray||[{value:"7"},{value:"8"},{value:"9"},{label:"BS",fn:"back"},{value:"4"},{value:"5"},{value:"6"},{label:"CLS",fn:"clear"},{value:"1"},{value:"2"},{value:"3"},{value:""},{value:"."},{value:"0"},{value:""},{label:"OK",fn:"enter"}];l.forEach(function(t){var e=void 0,a=void 0,l=void 0,u=void 0,c=void 0;t.fn?(e=t.fn,a=t.label,u=n.content.config.specialBtnTheme,l=n.content.config.specialBtnWrapStyle,c=n.content.config.specialBtnStyle):(a=e=t.value,u=e?n.content.config.btnTheme:"",l=n.content.config.btnWrapStyle,c=n.content.config.btnStyle),i.push('<div style="float:left;'+l+'">'),i.push('<button class="btn btn-default btn-'+u+'" style="'+c+'" data-numpad-value="'+e+'">'+(a||" ")+"</button>"),i.push("</div>")}),i.push('<div style="clear:both;"></div>'),$(this).html(i.join("")).on("mousedown","[data-numpad-value]",function(){var i=this.getAttribute("data-numpad-value"),l="INPUT"==n.$target.get(0).tagName.toUpperCase()?n.$target:jQuery(n.$target.find("input[type]").get(e)),u=l.val(),c="";switch(i){case"back":c="changeValue",l.val(u.substring(0,u.length-1));break;case"clear":c="changeValue",l.val("");break;case"enter":return t.close(n,"enter"),!1;case"close":return t.close(),!1;default:c="changeValue",l.val(u+i)}a.call(this,n,{self:t,state:c,item:n,value:l.val()})})})},color:function(i){for(var a=this.queue[i],l=[],u=jQuery.extend({},n.palette),c="INPUT"==a.$target.get(0).tagName.toUpperCase()?a.$target:a.$target.find("input[type]"),r=0;r<a.inputLength;r++)l.push('<div style="padding: 5px;width:'+e.cssNumber(a.content.width)+';float:left;" class="ax-picker-content-box" data-palette-target="'+r+'" data-ax5palette="ax5picker-'+a.id+'"></div>'),r<a.inputLength-1&&l.push('<div style="width:'+a.content.margin+'px;float:left;height: 5px;"></div>');l.push('<div style="clear:both;"></div>'),a.pickerContent.html(l.join("")),a.pickerPalette=[],a.pickerContent.find("[data-palette-target]").each(function(){var e=this.getAttribute("data-palette-target"),i=c.get(e).value;u.selectedColor=i,u=jQuery.extend(!0,u,a.content.config||{}),u.target=this,u.onClick=function(i){t.setContentValue(a.id,e,i)},u.onUpdateColor=function(i){t.setContentValue(a.id,e,i,{doNotClose:!0})},a.pickerPalette.push({itemId:a.id,inputIndex:e,ax5uiInstance:new ax5.ui.palette(u)})})}};return function(t,h){var d=e.isNumber(t)?t:o.call(this,t),f=this.queue[d];return this.openTimer&&clearTimeout(this.openTimer),this.activePicker?this.activePickerQueueIndex==d?this:h>2?this:(this.close(),this.openTimer=setTimeout(function(){this.open(d,(h||0)+1)}.bind(this),n.animateTime),this):(this.activePicker=jQuery(i.tmpl.get.call(this,"pickerTmpl",f)),this.activePickerArrow=this.activePicker.find(".ax-picker-arrow"),this.activePickerQueueIndex=d,f.pickerContent=this.activePicker.find('[data-picker-els="content"]'),e.isFunction(f.content)?(f.pickerContent.html("Loading.."),l["@fn"].call(this,d,function(t){f.pickerContent.html(t)})):f.content.type in l&&l[f.content.type].call(this,d),this.activePicker.find("[data-picker-btn]").on(n.clickEventName,function(t){r.call(this,t||window.event,d)}.bind(this)),u.call(this,"append"),jQuery(window).bind("resize.ax5picker",function(){u.call(this)}.bind(this)),jQuery(window).bind("keyup.ax5picker",function(t){t=t||window.event,s.call(this,t),e.stopEvent(t)}.bind(this)),jQuery(window).bind("click.ax5picker",function(t){t=t||window.event,c.call(this,t),e.stopEvent(t)}.bind(this)),a.call(this,f,{self:this,state:"open",item:f}),this)}}(),this.close=function(t,e){return this.closeTimer&&clearTimeout(this.closeTimer),this.activePicker?(t=this.queue[this.activePickerQueueIndex],this.activePicker.addClass("destroy"),jQuery(window).unbind("resize.ax5picker"),jQuery(window).unbind("click.ax5picker"),jQuery(window).unbind("keyup.ax5picker"),this.closeTimer=setTimeout(function(){this.activePicker&&this.activePicker.remove(),this.activePicker=null,this.activePickerQueueIndex=-1,a.call(this,t,{self:this,state:e||"close"})}.bind(this),n.animateTime),this):this},this.main=function(){arguments&&e.isObject(arguments[0])&&this.setConfig(arguments[0])}.apply(this,arguments)}}()),i=ax5.ui.picker}(),function(){var t=ax5.ui.picker,e=(ax5.util,function(){return'\n<div class="ax5-ui-picker {{theme}}" id="{{id}}" data-picker-els="root" {{#zIndex}}style="z-index:{{zIndex}};"{{/zIndex}}>\n {{#title}}\n <div class="ax-picker-heading">{{title}}</div>\n {{/title}}\n <div class="ax-picker-body">\n <div class="ax-picker-content" data-picker-els="content" style="width:{{contentWidth}}px;"></div>\n {{#btns}}\n <div class="ax-picker-buttons">\n {{#btns}}\n {{#@each}}\n <button data-picker-btn="{{@key}}" class="btn btn-default {{@value.theme}}">{{@value.label}}</button>\n {{/@each}}\n {{/btns}}\n </div>\n {{/btns}}\n </div>\n <div class="ax-picker-arrow"></div>\n</div>\n'});t.tmpl={pickerTmpl:e,get:function(e,i,n){return ax5.mustache.render(t.tmpl[e].call(this,n),i)}}}(),ax5&&ax5.ui&&ax5.ui.picker&&(ax5.ui.picker_instance=new ax5.ui.picker,jQuery.fn.ax5picker=function(){return function(t){if(ax5.util.isString(arguments[0])){var e=arguments[0];switch(e){case"open":return ax5.ui.picker_instance.open(this);case"close":return ax5.ui.picker_instance.close(this);case"setValue":return ax5.ui.picker_instance.setContentValue(this,arguments[1],arguments[2]);default:return this}}else"undefined"==typeof t&&(t={}),jQuery.each(this,function(){var e={target:this};t=jQuery.extend(!0,t,e),ax5.ui.picker_instance.bind(t)});return this}}());
//# sourceMappingURL=ax5picker.min.js.map