forminput.min.js

"use strict";angular.module("jackrabbitsgroup.angular-forminput",[]).directive("jrgForminput",["$timeout",function($timeout){return{restrict:"A",scope:{ngModel:"=",opts:"=?",valsAutocomplete:"=",selectOpts:"=",optsDatetime:"=?",validateDatetime:"&?",onchangeDatetime:"&?",ngClick:"&?",ngBlur:"&?",loadMore:"&?"},require:"?^form",replace:!0,template:function(element,attrs){attrs.type||(attrs.type="text");var defaults={noLabel:0};for(var xx in defaults)void 0===attrs[xx]&&(attrs[xx]=defaults[xx]);for(var attrsToInt=["noLabel"],ii=0;ii<attrsToInt.length;ii++)attrs[attrsToInt[ii]]=parseInt(attrs[attrsToInt[ii]],10);var placeholder=(attrs.class||"",attrs.placeholder||attrs.label||""),label=attrs.label||attrs.placeholder||"",hint=attrs.hint||"",html={label:"",input:"",hint:"",validation:"",character_count:""};label&&!attrs.noLabel&&(html.label="<label>"+label+"</label>"),hint&&(html.hint="<div class='jrg-forminput-hint'>"+hint+"</div>");var customAttrs="",skipAttrs=["jrgForminput","ngModel","label","type","placeholder","hint","opts","name","optsDatetime","validateDatetime","onchangeDatetime","checkboxVals","ngClick","ngBlur","charCount"];angular.forEach(attrs,function(value,key){"$"!==key.charAt(0)&&-1===skipAttrs.indexOf(key)&&(customAttrs+=attrs.$attr[key],attrs[key]&&(customAttrs+="ngTrueValue"==key||"ngFalseValue"==key?attrs[key].indexOf('"')>-1?"='"+attrs[key]+"'":'="'+attrs[key]+'"':"="+attrs[key]),customAttrs+=" ")});var uniqueName="jrgFormInput"+attrs.type+Math.random().toString(36).substring(7),elementTag="input",elementTagEvt="input";"text"==attrs.type||"email"==attrs.type||"tel"==attrs.type||"number"==attrs.type||"url"==attrs.type?(html.input="<input class='jrg-forminput-input' name='"+uniqueName+"' ng-model='ngModel' ng-change='onchange({})' type='"+attrs.type+"' placeholder='"+placeholder+"' "+customAttrs+" ","email"==attrs.type&&(html.input+="ng-pattern='/[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z0-9]{2,4}/' "),attrs.ngClick&&(html.input+="ng-click='ngClick()' "),attrs.ngBlur&&(html.input+="ng-blur='ngBlur()' "),html.input+="/>"):"password"==attrs.type?(html.input="<input class='jrg-forminput-input' name='"+uniqueName+"' ng-model='ngModel' ng-change='onchange({})' type='password' placeholder='"+placeholder+"' "+customAttrs+" ",attrs.ngClick&&(html.input+="ng-click='ngClick()' "),attrs.ngBlur&&(html.input+="ng-blur='ngBlur()' "),html.input+="/>"):"textarea"==attrs.type?(elementTag="textarea",elementTagEvt="textarea",html.input="<textarea class='jrg-forminput-input' name='"+uniqueName+"' ng-model='ngModel' ng-change='onchange({})'  placeholder='"+placeholder+"' "+customAttrs+" ",attrs.ngClick&&(html.input+="ng-click='ngClick()' "),attrs.ngBlur&&(html.input+="ng-blur='ngBlur()' "),html.input+="></textarea>"):"checkbox"==attrs.type?(html.input="<div class='jrg-forminput-input jrg-forminput-input-checkbox-cont'><input class='jrg-forminput-input-checkbox' name='"+uniqueName+"' ng-model='ngModel' ng-change='onchange({})' type='checkbox' placeholder='"+placeholder+"' "+customAttrs+" ",attrs.ngClick&&(html.input+="ng-click='ngClick()' "),attrs.ngBlur&&(html.input+="ng-blur='ngBlur()' "),html.input+="/></div>"):"autocomplete"==attrs.type?(elementTag="div",html.input="<div class='jrg-forminput-input'><div name='"+uniqueName+"' jrg-autocomplete ng-change='onchange({})' ng-model='ngModel' vals='valsAutocomplete' placeholder='"+placeholder+"' config='opts' "+customAttrs+" ",attrs.ngClick&&(html.input+="ng-click='ngClick()' "),attrs.ngBlur&&(html.input+="ng-blur='ngBlur()' "),html.input+="></div></div>"):"select"==attrs.type?(elementTag="select",elementTagEvt="select",html.input="<select class='jrg-forminput-input' name='"+uniqueName+"' ng-model='ngModel' ng-change='onchange({})' "+customAttrs+" ng-options='opt.val as opt.name for opt in selectOpts' ",attrs.ngClick&&(html.input+="ng-click='ngClick()' "),attrs.ngBlur&&(html.input+="ng-blur='ngBlur()' "),html.input+=">",placeholder&&placeholder.length>0&&(html.input+="<option value='' disabled selected>"+placeholder+"</option>"),html.input+="</select>"):"multi-select"==attrs.type?(elementTag="div",html.input="<div class='jrg-forminput-input'><div name='"+uniqueName+"' jrg-multiselect select-opts='selectOpts' ng-model='ngModel' config='opts' ",attrs.ngClick&&(html.input+="ng-click='ngClick()' "),attrs.ngBlur&&(html.input+="ng-blur='ngBlur()' "),attrs.loadMore&&(html.input+="load-more='loadMoreWrapper' "),attrs.onChangeEvt=uniqueName+"MultiSelectOnChange",html.input+="on-change-evt='"+attrs.onChangeEvt+"' ",html.input+="></div></div>"):("date"==attrs.type||"datetime"==attrs.type)&&(elementTag="div",html.input="<div class='jrg-forminput-input' name='"+uniqueName+"' jrg-datetimepicker opts='optsDatetime' ng-model='ngModel'  placeholder='"+placeholder+"' "+customAttrs,attrs.validateDatetime&&(html.input+="validate='validateDatetime' "),attrs.onchangeDatetime&&(html.input+="onchange='onchangeDatetime' "),attrs.ngClick&&(html.input+="ng-click='ngClick()' "),attrs.ngBlur&&(html.input+="ng-blur='ngBlur()' "),html.input+=">",html.input+="</div>"),attrs.charCount&&(html.character_count="<div class = 'jrg-forminput-char-count'>"+attrs.charCount.replace("$$length","{{ngModel.length || '0'}}")+"</div>"),html.validation="<div class='jrg-forminput-validation text-error' ng-repeat='(key, error) in field.$error track by $id($index)' ng-show='error && field.$dirty' class='help-inline'>{{opts1.validationMessages[key]}} <span ng-show='!opts1.validationMessages[key]'>Invalid</span></div>";var htmlFull="<div class='jrg-forminput-cont {{classes.focus}} {{classes.ngValidation}}'><div class='jrg-forminput'>"+html.label+html.input+"</div>"+html.character_count+html.hint+html.validation+"</div>";return attrs.elementTag=elementTag,attrs.elementTagEvt=elementTagEvt,attrs.uniqueName=uniqueName,htmlFull},link:function(scope,element,attrs,formCtrl){function setNgValidationClasses(){var classes=angular.element(element.find(selectorEvt)).attr("class"),classesArr=classes.match(/ng-(\S+)/g);classesArr||(classesArr=[]),classes=classesArr.join(" "),scope.classes.ngValidation=classes}void 0===attrs.id&&(attrs.id="jrgFormInput"+attrs.type+Math.random().toString(36).substring(7)),attrs.name||(attrs.name=attrs.id),scope.id=attrs.id,scope.name=attrs.name;var selector=attrs.elementTag+".jrg-forminput-input";selector=attrs.elementTag,element.find(selector).attr("name",attrs.name),scope.classes={focus:"",ngValidation:""};var selectorEvt=attrs.elementTagEvt;angular.element(element.find(selectorEvt)).on("focus",function(){scope.$apply(function(){scope.classes.focus="focused"})}),element.find(selectorEvt).bind("blur",function(){scope.$apply(function(){scope.classes.focus=""})}),angular.element(element).on("click",function(){element.find(selectorEvt)[0]&&element.find(selectorEvt)[0].focus&&element.find(selectorEvt)[0].focus()}),angular.element(element).on("touch",function(){element.find(selectorEvt)[0]&&element.find(selectorEvt)[0].focus&&element.find(selectorEvt)[0].focus()}),angular.element(element.find(selectorEvt)).on("keyup",function(){scope.$apply(function(){setNgValidationClasses({})})}),setNgValidationClasses({}),"checkbox"==attrs.type&&void 0!==scope.ngModel&&(scope.ngModel=scope.ngModel.toString()),formCtrl&&(formCtrl[attrs.name]=formCtrl[attrs.uniqueName],delete formCtrl[attrs.uniqueName],scope.field=formCtrl[attrs.name],scope.$watch("ngModel",function(newVal,oldVal){if(!angular.equals(oldVal,newVal)){var xx,valid=!0;for(xx in formCtrl)if("$"!==xx[0]&&void 0!==formCtrl[xx].$valid&&formCtrl[xx].$valid!==!0){valid=!1;break}formCtrl.$valid=valid,formCtrl.$invalid=!valid}}))},controller:function($scope,$element,$attrs){function init(){("select"==$attrs.type||"multiSelect"==$attrs.type)&&initSelect({})}function initSelect(){initSelectModel({}),initSelectOpts({})}function initSelectModel(){void 0!==$scope.ngModel&&"string"!=typeof $scope.ngModel&&($scope.ngModel=$scope.ngModel.toString())}function initSelectOpts(){var ii;for(ii=0;ii<$scope.selectOpts.length;ii++)if("number"==typeof $scope.selectOpts[ii].val)$scope.selectOpts[ii].val=$scope.selectOpts[ii].val.toString();else;}$scope.opts1={};var defaultOpts={validationMessages:{required:"Required!",minlength:"Too short!",maxlength:"Too long!",pattern:"Invalid characters!",email:"Invalid email",number:"Must be a number!"}};if("number"==$attrs.type&&(defaultOpts.validationMessages.required="Must be a valid number!"),$scope.opts&&void 0!==$scope.opts){var xx;for(xx in defaultOpts)$scope.opts1[xx]=$scope.opts[xx]&&void 0!==$scope.opts[xx]?angular.extend(defaultOpts[xx],$scope.opts[xx]):defaultOpts[xx]}else $scope.opts1=defaultOpts;$scope.opts&&$scope.opts.ngChange&&($scope.onchange=function(){$timeout(function(){$scope.opts.ngChange()},50)},$attrs.onChangeEvt&&$scope.$on($attrs.onChangeEvt,function(){$scope.opts.ngChange()})),("date"==$attrs.type||"datetime"==$attrs.type)&&(void 0!==$scope.optsDatetime&&$scope.optsDatetime||($scope.optsDatetime={pikaday:{}}),"datetime"==$attrs.type&&($scope.optsDatetime.pikaday.showTime=!0)),"multi-select"==$attrs.type&&void 0!==$scope.loadMore&&($scope.loadMoreWrapper=function(params,callback){$scope.loadMore()(params,callback)}),$scope.$watch("ngModel",function(newVal,oldVal){angular.equals(oldVal,newVal)||("select"==$attrs.type||"multiSelect"==$attrs.type)&&initSelectModel({})}),init({})}}}]);