2
\$\begingroup\$

I wrote it more for educational reasons and less as something that can compete with existing alternatives.

But I enjoyed writing it and wish to get some feedback, JavaScript is my second language :)

(I hope the main issue is lack of comments, but I wonder if there is anything else hairy about the code)

Here is the main plugin code:

(function ($) {
  'use strict';

  /*
   * Base function for all transformations
   */
  function base(property, transformer, params) {

    var value = $.map(params, function (item, index) {
      return transformer.call(this, item);
    }).join(", ");

    return this.each(function () {
      var $this = $(this);
      var existingTransformation = $this.css("transform");
      if (existingTransformation === 'none') {
        existingTransformation = '';
      }
      if (existingTransformation !== '') {
        existingTransformation += ' ';
      }
      $this.css({
        transform: existingTransformation + property + "(" + value + ")"
      });
    });
  };

  /*
   * Numeric to string conversion internal helper functions
   */

  function suffixNumber(param, suffix){
    if (typeof param === "number") {
      param += suffix;
    }        
    return param;
  };
  function toDeg(param){
    return suffixNumber(param, "deg");
  }

  function toPx(param){
    return suffixNumber(param, "px");
  }

  function toPc(param){
    return suffixNumber(param, "%");
  }

  function toStr(param){
    return suffixNumber(param, "");
  }

 /*
  * The plugin's outer world functions
  */

  var functionParamTypes = {
    number:toStr,
    length:toPx,
    angle:toDeg
  }

  var functionNames = [
    {
      "name":"matrix",
      "type":functionParamTypes.length
    },
    {
      "name":"translate",
      "type": functionParamTypes.length
    },
    {
      "name":"translateX",
      "type": functionParamTypes.length
    },
    {
      "name":"translateY",
      "type": functionParamTypes.length
    },
    {
      "name":"scale",
      "type": functionParamTypes.number
    },
    {
      "name":"scaleX",
      "type": functionParamTypes.number
    },
    {
      "name":"scaleY",
      "type": functionParamTypes.number
    },
    {
      "name":"rotate",
      "type": functionParamTypes.angle
    },
    {
      "name":"skew",
      "type": functionParamTypes.angle
    },
    {
      "name":"skewX",
      "type": functionParamTypes.angle
    },
    {
      "name":"skewY",
      "type": functionParamTypes.angle
    },
    {
      "name":"matrix3d",
      "type": functionParamTypes.length
    },
    {
      "name":"translate3d",
      "type": functionParamTypes.length
    },
    {
      "name":"translateZ",
      "type": functionParamTypes.length
    },
    {
      "name":"scale3d",
      "type": functionParamTypes.length
    },
    {
      "name":"scaleZ",
      "type": functionParamTypes.length
    },
    {
      "name":"rotate3d",
      "type": functionParamTypes.angle
    },
    {
      "name":"rotateX",
      "type": functionParamTypes.angle
    },
    {
      "name":"rotateY",
      "type": functionParamTypes.angle
    },
    {
      "name":"rotateZ",
      "type": functionParamTypes.angle
    },
    {
      "name":"perspective",
      "type": functionParamTypes.angle
    }
  ];

  $.each(functionNames,function(index, item){
    var name = item.name, type = item.type;
    $.fn[name] = function () {
      return base.call(this, name, type, arguments);  
    }
  });


})(jQuery);
  • Latest version can be found here

  • Live demo can be found here

  • Usage example can be found here

\$\endgroup\$
2
\$\begingroup\$

I like the demo, from a once over:

  • the functionNames make my eyes glaze over, data tables variables should be sorted and tabbed in my mind:

      var functionNames = [                                   
        { name: "matrix",      type: functionParamTypes.length}, 
        { name: "matrix3d",    type: functionParamTypes.length}, 
        { name: "perspective", type: functionParamTypes.angle },
        { name: "rotate",      type: functionParamTypes.angle }, 
        { name: "rotate3d",    type: functionParamTypes.angle }, 
        { name: "rotateX",     type: functionParamTypes.angle }, 
        { name: "rotateY",     type: functionParamTypes.angle }, 
        { name: "rotateZ",     type: functionParamTypes.angle },
        { name: "scale",       type: functionParamTypes.number}, 
        { name: "scale3d",     type: functionParamTypes.length}, 
        { name: "scaleX",      type: functionParamTypes.number}, 
        { name: "scaleY",      type: functionParamTypes.number},
        { name: "scaleZ",      type: functionParamTypes.length},             
        { name: "skew",        type: functionParamTypes.angle }, 
        { name: "skewX",       type: functionParamTypes.angle }, 
        { name: "skewY",       type: functionParamTypes.angle }, 
        { name: "translate",   type: functionParamTypes.length}, 
        { name: "translate3d", type: functionParamTypes.length}, 
        { name: "translateX",  type: functionParamTypes.length}, 
        { name: "translateY",  type: functionParamTypes.length}, 
        { name: "translateZ",  type: functionParamTypes.length} 
      ];                                
    
  • It is preferred to have 1 single comma-separated var statement:

    var $this = $(this),
        existingTransformation = $this.css("transform");
    
  • It is preferred to have either all single or all double quoted strings, I would suggest single quoted strings
  • You have some missing and some unnecessary semicolons, please check out http://jshint.com/
  • Other than that, a fun piece of code
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.