Demo entry 5590929

Highlihter

   

Submitted by Khaerul Amin on Jul 03, 2016 at 23:26
Language: JavaScript. Code size: 4.6 kB.

(function (global, util, undef) {
 "use strict";

 var Current = Animation.Current = {};
 var Step = Animation.Step = {};
 var Ease = Animation.Easing = {};
 
 var DEFAULT = {
  duration: 500,
  easing  : "swing"
 };
 
 function Animation(config) {
  config = util.extend({}, DEFAULT, config);

  var elem = config.elem,
      style = elem.style,

      data = new Data(elem),

      prop = config.prop,
      duration = config.duration,
      easing = config.easing,

      /** State of current animation */
      state = data.get("state"),
      queue = data.get("queue"),

      ID, START, RUNNING,

      /** Step & Current Function */
      step, ease, frt,

      /** Position of element */
      From, To, Dist,

      ret = {};

  if (!queue) {
   queue = data.set("queue", []);
  }

  if (!state) {
   state = data.set("state", {});
  }

  if ((RUNNING = state.running) === undef) {
   RUNNING = state.running = false;
  }
  
  if ((START = state.start) === undef) {
   START = state.start = 0;
  }
  
  if ((ID = state.id) === undef) {
   ID = state.id = 0;
  }

  step = Step[prop];
  ease = Ease[easing];

  /** Set logic for every function */
  ret.run = function (to) {
   if (!RUNNING) {
    To = to;
    
    if (frt === undef) {
     frt = Current[prop](elem, true);
    }
    
    From = Current[prop](elem);
    Dist = To - From;
    
    RUNNING = state.running = true;
    START = state.start = Date.now();
    ID = state.id = global.setInterval(function () {
    
     var now = Date.now() - START;
     var ellapsed = now / duration;
     
     if (ellapsed >= 1) {
      step(style, To);
      ret.stop();
      return true;
     }
     
     // Get currenr percentage progress
     var progress = ease(ellapsed, ellapsed * duration, 0, 1, duration);

     // Set current progress to style
     step(style, Dist, From, progress);
    }, 15);
   }
  };
  
  ret.start = function (to) {
   if (!RUNNING) {
    ret.run(to);
   } else {
    queue.push(
     (function (t) {
      return function () {
       ret.run(t);
      };
     }(to))
    );
   }
  };
  
  ret.stop = function () {
    clearInterval(ID);
    RUNNING = state.running = false;

    if (queue.length) {
     queue.shift()();
    }
  };
  
  return ret;
 }
 
 util.each( ("top right bottom left width height").split(" "), function (prop) {
  Step[prop] = function (style, to, from,percentage) {
   if (from !== undef) {
    style[prop] = percentage * to + from + "px";
   } else {
    style[prop] = to + "px";
   }
  };
 });
 
 Step.opacity = function (style, to, from, perc) {
  if (from !== undef) {
   style.opacity = perc * to + from;
  } else {
   style.opacity = to;
  }
 };
 
 util.extend(Current, {

   left: function (elem, first) {
    var style = util.getStyle(elem, ["left","position"]),
        pos = style.position,
        left = style.left,
        offsetLeft;

   if (left.slice(-2).toLowerCase() !== "px") {
     offsetLeft = util.posLeft(elem);
     if (/(?:absolute|fixed)/i.test(left)) {
      if (first) {
       elem.style.left = offsetLeft + "px";
       return true;
      }
     } else {
      if (first) {
       elem.style.left = "0px";
       return true;
      }
     }
    } else {
     if (first) {
      elem.style.left = left;
      return true;
     }
    }
    return parseInt(left, 10);
   },

   top: function (elem, first) {
    var style = util.getStyle(elem, ["top", "position"]),
        top = style.top,
        pos = style.position,
        offsetTop;

    if (top.slice(-2).toLowerCase() !== "px") {
     offsetTop = util.posTop(elem);
     if (/(?:absolute|fixed)/i.test(pos)) {
      if (first) {
       elem.style.top = offsetTop + "px";
       return true;
      }
     } else {
      if (first) {
       elem.style.top = "0px";
       return true;
      }
     }
    } else {
     if (first) {
      elem.style.top = top;
      return true;
     }
    }

    return parseInt(top, 10);
   },

   width: function (elem, first) {
    var /*style = util.getStyle(elem, [
     "box-sizing"
    ]), */
        width = util.fullWidth(elem);
        //boxSizing = style.boxSizing;

    return width;
   },

   height: function (elem) {
    return util.fullHeight(elem);
   },

   opacity: function (elem) {
    return util.getOpacity(elem);
   }
  }); 
 
 global.Animation = Animation;
 
}(this, util));

This snippet took 0.01 seconds to highlight.

Back to the Entry List or Home.

Delete this entry (admin only).