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 })();