piotrkabacinski
2/10/2016 - 2:44 PM

Values live fix | directive value edit update

Values live fix | directive value edit update

/**
 * Removes unwanted characteres from input while typing/pasting
 *
 * @directive valuesLiveFix
 *
 * <input type="text" valueslivefix="amountFixer" />
 *
 */
app.directive( 'valueslivefix', [ function() {

  "use strict";

  return {

    restrict: "A",
    require: 'ngModel',
    scope: {
      t: "@valueslivefix" // read attribute value for switching models of values fixing
    },
    link: function( scope, element , attrubite , model ) {

        var filtered,
        start,
        end,
        /**
         * Executes filter function
         *
         * @function appendFilter
         * @param {filter} filter callback
         */
        appendFilter = function( filter ) {

          start = element[0].selectionStart;
          end = element[0].selectionEnd;
          filtered = filter( element[0].value );

          if( model ) {

            model.$setViewValue( filtered.value );
            model.$render();

          } else {

            element[0].value = filtered.value;

          }

          element[0].setSelectionRange(start, end - filtered.position );

          return;

        },
        /**
         * @function amountFixer
         * @param {String} value string to be parsed
         * @return {Object} Returns object with two properties: parsed value and variable for setting cursor position
         */
        amountFixer = function( value ) {

          var regEx = /[^0-9,.\s ]/ig,
              position = ( regEx.test( value ) ) ? 1 : 0; // Variable for setting cursors position expression

          return {
            value : value.replace( regEx , ''),
            position: position
          };

        },
        dateFilter = function( value ) {

          var regEx = /\D/g,
              position = ( regEx.test( value ) ) ? 1 : 0;

          value = value.replace( regEx , '');

          // date can has only 4 numbers
          if( value.length > 4 ) {
            value = value.slice( 0 , - value.length + 4 );
          }

          return {
            value : value,
            position: position
          };

        },
        declaration = function( value ) {

          var regEx = /\D/g,
              position = ( regEx.test( value ) ) ? 1 : 0;

          return {
            value : value.replace( regEx , ''),
            position: position
          };

        },
        /**
         * Adds mutiple events listeners
         *
         * @function setEvents
         * @param {Object} element  directives element object
         * @param {Array} array of events to be created
         * @callback {Function} callback function for the events
         */
        setEvents = function( element , events , filterCallback ) {

            for( var i = 0, l = events.length; i < l; i++ ) {

                element.bind( events[i] , function( e ) {
                  appendFilter( filterCallback );
                });

            }

          return;

        };

        console.log( scope.t );

        switch( scope.t ) {

          case "amountFixer":
            setEvents( element , [ "keyup" , "paste"  ] , amountFixer );
          break;

          case "date":
            setEvents( element , [ "keyup" , "paste"  ] , dateFilter );
          break;

          case "declaration":
            setEvents( element , [ "keyup" , "paste"  ] , declaration );
          break;

          default:
            setEvents( element , [ "keyup" , "paste"  ] , amountFixer );

        }
    }

  };

}]);