Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

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

share|improve this question

1 Answer 1

up vote 2 down vote accepted

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
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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