Js

modulr-util.js

(function () {
  
  'use strict';
  
  angular
    .module('modulr.utils', [])
    .factory('$modUtil', UtilFactory);
  
  
  /**
   * Modulr Utils Factory
   */
  
  UtilFactory.$inject = [
    '$q', 
    '$document', 
    '$window', 
    '$log'
  ];
  
  /**
   * Utils Factory
   */
  function UtilFactory($q, $document, $window, $log) {
    
    
    var $utils = {
      
      splice:             [].splice,
      slice:              [].slice,
      push:               [].push,
      CAPITAL_LETTERS:    /[A-Z]/g,
      LOWER_LETTERS:      /[a-z]/g,
      WHITE_SPACE:        /[\s]+/g,
      START_WHITE_SPACE:  /^\s+/,
      END_WHITE_SPACE:    /\s+$/,
      toString:           Object.prototype.toString,
      getPrototypeOf:     Object.getPrototypeOf,
      PREFIX:             'mod',
      $body:              $document[0].body,
      
      /*
       * $modUtil: String and Number Helpers
       * @param {type} str
       * @returns {value, boolean}
       */
      
      // converts string to int
      toInt: function(str){
        return parseInt(str, 10);
      },
      
      //removes whitespace at the start of the string
      ltrim: function(str){
        return str.replace(this.START_WHITE_SPACE, '');
      },
      
      // removes whitespace at the end of the string
      rtrim: function(str){
        return str.replace(this.END_WHITE_SPACE, '');
      },
      
      // removes white space at start and the end
      trim: function(str){
        return str.replace(this.START_WHITE_SPACE, '')
                  .replace(this.END_WHITE_SPACE, '');
      },
      
      // formats snake cased strig to a separator 
      snakeCase:  function (name, separator) {
        separator = separator || '_';
          return name.replace(this.CAPITAL_LETTERS, function(letter, pos) {
            return (pos ? separator : '') + letter.toLowerCase();
        });
      },
      
      seperator: function(name, separator){
        separator = separator || '_';
        return  this.trim(name)
                    .replace(this.WHITE_SPACE, separator);
      },
      
      /*
       * $mrUtil: Array
       * @param {type} array
       * @param {type} val
       * @returns {boolean, value, array}
       */
      
      // check if array includes a value
      includes: function(array, val){
        return Array.prototype.indexOf.call(array, val) != -1;
      },
      
      // remove a value from an array
      remove: function (array, value) {
        var index = array.indexOf(value);
        if (index >= 0) {
          this.splice.call(array, index, 1);
        }
        return index;
      },
      
      // concat second to first array starting at the 'startIndex'
      concat: function (array1, array2, startIndex) {
        return array1.concat(this.slice.call(array2, startIndex));
      },
      
      // remove all arguments before startIndex
      popArgs: function (args, startIndex) {
        return this.slice.call(args, startIndex || 0);
      },
      
      /*
       * $mrUtil: Layout
       * @param {type} el
       * @returns {value}
       */
      
      // gets elements clientRect
      clientRect: function(el, offsetParent){
        
        /* angular material clientRect */
        
        var node      = this.getElement(el),
            parent    = this.getElement(offsetParent || node.offsetParent || this.$body),
            nodeRect  = node.getBoundingClientRect() ;
        
        var rect  = parent
                  ? parent.getBoundingClientRect() 
                  : {left: 0, top: 0, width: 0, height: 0};
        return {
          left: nodeRect.left - rect.left,
          top: nodeRect.top - rect.top,
          bottom: rect.height - (nodeRect.height + nodeRect.top),
          width: nodeRect.width,
          height: nodeRect.height
        };
        
      },
      
      // returns a elements height
      height: function(el){
        return this.clientRect(el).height;
      },
      
      // returns a elements width
      width: function(el){
        return this.clientRect(el).width;
      },
      
      /***
       * @param {type} attr
       * @returns {Boolean}
       * e.g: checks a prefix {mod}-attribute
       * <mod-button mod-background></mod-button>
       */
      isValidAttribute: function(attr){
        return (attr.substring(0, 3) == this.PREFIX);
      },
      /*
       * $modUtil: Atribute
       * @param {type} attr
       * @returns {promise}
       */
      attribute: function(attr){
        var cache, p;
        
        return{
          hasVal: function(){
            return $q.when(cache || p || defer());
          },
        }
        function defer(){
          
          var defer = $q.defer();
          
          // ceched prmoise 
          p = defer.promise;
          
          if(attr != undefined && attr != ''){
            defer.resolve(attr);
          }else{
            $q.reject($log.warn('Promise is rejected because attribute has no value'));
          }
          return defer.promise;
          
        }
        
      }, 
      
      /*
       *  @usage: How to use spread with $q
       *  $q.all([func(), func()])
       *    .then($modUtil.spread(function(one, two){
       *     console.log(one);
       *     console.log(two);
       *  });
       */
      
      spread: function spread(func) {
        return function(array){
          func.apply(void 0, array);
        };
      },
      
      // get actual element
      getElement: function(el){
        return el[0] || el;
      },
      
      getStyle: function (el) {
        
        var element = this.getElement(el);
        var out = "";
        var elementStyle = element.style;
        var computedStyle = $window.getComputedStyle(element, null);
        
        for (var prop in elementStyle) {
          if (elementStyle.hasOwnProperty(prop)) {
            out += "  " + prop + " = '" + elementStyle[prop] + "' > '" + computedStyle[prop] + "'\n";
          }
        }
        console.log(out);
      }
      
    };
    
    return $utils;
    
  }
  
    
})();