Add the app!!!
[src/app-framework-demo.git] / afb-client / app / Frontend / widgets / FormInput / InputText.js
1
2 /* 
3  * Copyright (C) 2015 "IoT.bzh"
4  * Author "Fulup Ar Foll"
5  *
6  * This program is free software: you can redistribute it and/or modify
7  * it under the terms of the GNU General Public License as published by
8  * the Free Software Foundation, either version 3 of the License, or
9  * (at your option) any later version.
10  *
11  * This program is distributed in the hope that it will be useful,
12  * but WITHOUT ANY WARRANTY; without even the implied warranty of
13  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
14  * GNU General Public License for more details..
15  */
16
17
18
19 (function() {
20 'use strict';
21
22 var tmpl = '<tip-modal tip="tip"></tip-modal>' +
23            '<label for="{{name}}-intext">{{label}} <i ng-show="required" ng-click="ToBeDefined" ' +
24            'class="required {{status}} fi-checkbox" title="Free Value But Mandatory Argument" alt="?"> &nbsp; </i></label>'+          
25            '<input '+
26            ' type="{{type}}" id="{{name}}-intext" placeholder="{{placeholder}}"  class="status-{{status}}"'+
27            ' ng-model="value" ng-blur="validate()" ng-focus="selected()" '+
28            ' ng-model-options="{ updateOn: \'default blur\', debounce: {default: 500, blur: 0} }"' +
29            '><alert data-ng-show="!valid&&errmsg">{{errmsg}}</alert>';
30
31 var emailpatern = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
32
33 angular.module('InputText',['JQueryEmu'])
34
35 .directive('inputText', function(JQemu) {
36     function mymethods(scope, elem, attrs) {
37     
38     // default value at 1st rendering
39     scope.error  = false;
40     scope.valid  = false;
41     scope.status = 'untouch';
42    
43     scope.input = elem.find ("input");
44     scope.required = 0;
45     
46     // requirer is use to increment requested counter
47     if ("required" in attrs) {
48         scope.required = 1;
49         elem.addClass ("required");
50     }
51        
52      // user enter input reset error status
53      scope.selected = function () {
54         scope.error=false; 
55         scope.errmsg=false; 
56         scope.status = 'touch';
57      };   
58             
59      scope.validate = function () {
60          
61          // get value from input field bypassing Angular ng-model
62          console.log ("Clicked InputText name=%s value=%s valid=%s", scope.name, scope.value, scope.valid);        
63
64          // form is not untouched anymore
65          scope.parent.removeClass ("ng-pristine");
66
67          // if value not null clean up string
68          if (scope.value) {
69              scope.error=false; 
70             // remove leading and trailling space
71             scope.value = scope.value.trim();
72          
73             // remove any space is not allowed
74             if ('nospace' in attrs) {
75                scope.value=scope.value.replace(/\s/g, '');    
76             }
77          
78             if ('lowercase' in attrs) {
79                scope.value = scope.value.toLowerCase();
80             }
81          
82             // check minimum lenght
83             if ("minlen" in attrs) {
84               if (scope.value.length < attrs.minlen) {
85                  scope.status='invalid';
86                  scope.errmsg=scope.name + ': Mininum Lengh= ' + attrs.minlen + ' Characters';
87                  scope.error=true;
88               }
89             }
90             
91             if ('email' in attrs) {
92             if (!emailpatern.test (scope.value)) {
93                 scope.status='invalid';
94                 scope.errmsg='invalid email address';
95                 scope.error=true;
96             }
97          }
98          
99         } else {
100             if (scope.required) {
101                  scope.status='invalid';
102                  scope.errmsg=scope.name + ': Required Attribute';
103                  scope.error=true; 
104             }
105         }
106                            
107          // If local control fail let's refuse input
108          if (scope.error) {
109              if (scope.required && scope.valid) {
110                  scope.valid = false;
111                  if (scope.l4acounter.validated > 0) scope.l4acounter.validated --;
112              } 
113              // use call to update form scope on form completeness
114              scope.callback (attrs.name, null, scope.done);
115          } else { 
116              // localcheck is OK backup may nevertheless change status to false
117             if (scope.required  && !scope.valid) scope.l4acounter.validated ++;
118             scope.status='valid';
119             scope.valid=true;
120             scope.callback (attrs.name, scope.value, scope.done);
121          }
122           
123      };
124      
125      // this method can be called from controller to update widget status
126      scope.done=function (data) {
127        console.log ("Text-Input Callback ID="+ attrs.name + " data=", data);
128        for (var i in data) scope[i] = data[i];         
129      };
130      
131      // Export some attributes within directive scope for template
132      scope.label       = attrs.label;
133      scope.name        = attrs.name;
134      scope.placeholder = attrs.placeholder;
135      scope.type        = attrs.type || "text";
136      scope.tip         = attrs.tip;
137
138      // search for form within parent elemnts
139      scope.parent = JQemu.parent (elem, "FORM");
140
141      // email enforce lowercase and nospace   
142      if ("email" in attrs) {
143         attrs.lowercase=true; 
144         attrs.nospace=true; 
145         attrs.minlen=6; 
146      }
147
148      if (scope.required) {
149          scope.l4acounter = scope.parent.data ("l4acounter");
150          if (!scope.l4acounter) { 
151             scope.l4acounter =  {required:1, validated:0};
152             console.log("Field "+scope.name+" is required (1st)");
153             scope.parent.data ("l4acounter", scope.l4acounter); 
154          } else {
155              console.log("Field "+scope.name+" is required");
156              scope.l4acounter.required ++;
157          }
158      }
159          
160      // refresh validation each time controler update value
161      scope.$watch ('value', function(){
162          if(scope.value) scope.validate(); }
163      );
164     
165     }
166     
167     return {
168         restrict: 'E',
169         template: tmpl,
170         link: mymethods,
171         scope: {
172             callback : '=',
173             value: '='
174         }
175     };
176 });
177
178 console.log ("InputText Loaded");
179 })();