Jasoop Toolbox

**magicyte** · 10-04-2008, 01:11 AM

I created this toolbox called Jasoop. Jasoop stands for JavaScript Object Oriented Programming Toolbox. I created it and it was originally created for programmers who wanted to animate elements on a webpage (by moving them) easily. Here it is. Anybody on the forums and in the world is allowed to use it. I am not sure it works in some browsers, such as FF, but it works in IE7. Here it is:

Jasoop Toolbox (jasoop.js)

Code:

/******** - IMPORTANT LABEL - ********/
/* Title: Jasoop Toolbox             */
/* Name: jasoop.js                   */
/* Copyright: 2008 Arthur C. Watkins */
/* Noice: This label is to exist in  */
/* this document in order for this   */
/* document to be legal.             */
/******** - IMPORTANT LABEL - ********/

// Start Jasoop Toolbox

var _ = function (a) {
if(document.getElementById()) return document.getElementById(a);
else if(document.layers) return document.layers[a];
else if(document.all) return document.all[a];
}

function Animation (elementName)
{
var animationClass = this;
var animateX = new Array();
var animateY = new Array();
var animateInt = new Array();
var llCounter=0;
var animationCounter=0;
this.pxWidth = function (w) {
  _(elementName).style.width = w;
};
this.pxHeight = function (h) {
  _(elementName).style.height = h;
};
this.backgroundColor = function (bgcol) {
  _(elementName).style.backgroundcolor = bg;
};
this.textColor = function (txtcol) {
  _(elementName).style.color = txtcol;
};
this.moveTo = function (x,y) {
  _(elementName).style.position = "absolute";
  _(elementName).style.left = x;
  _(elementName).style.top = y;
};
this.add = function (x,y,int) {
  animateX[llCounter] = x;
  animateY[llCounter] = y;
  animateInt[llCounter] = int;
  llCounter++;
};
this.animate = function () {
  if(animationCounter < llCounter)
  {
    _(elementName).style.position = "absolute";
    _(elementName).style.left = animateX[animationCounter];
    _(elementName).style.top = animateY[animationCounter];
    animationCounter++;
    setTimeout(function () { animationClass.animate() },animateInt[animationCounter]);
  }
  else if(animationCounter >= llCounter)
  {
    for(i = 0; i <= animationCounter; i++)
    {
       animateX[i]=0;
       animateY[i]=0;
       animateInt[i]=0;
    }
    llCounter=0;
    animationCounter=0;
}
};
this.reset = function () {
  for(i=0; i<=animationCounter; i++)
  {
    animateX[i]=0;
    animateY[i]=0;
    animateInt[i]=0;
  }
  llCounter = 0;
  animationCounter = 0;
};
}

// End Jasoop Toolbox

Here is an example HTML page:

Code:

<html>
<head>
<title>Jasoop Toolbox Test</title>
<script type="text/javascript" src="jasoop.js">
<!--
-->
</script>
<script type="text/javascript">
var animator = new Animation ("animation");

for(i = 0; i < 400; i++) {
animator.add(i,i,10);
}

animator.add(0,0,10);
</script>
</head>
<body onload="animator.moveTo(0,0);">
<input type="button" value="Animate" onclick="animator.animate()">
</body>
</html>

Feel free to give me feedback or suggestions on the toolbox.

-magicyte

**magicyte** · 10-04-2008, 06:32 PM

I also do have one question for any good programmers out there. Is it possible that I could add some sort of image function to this? You know, like if the programming user wants to add an image to the animation (as well as movement), such as changing the image source of the element, that may make the animation more or less interesting?

-magicyte

**Twey** · 10-05-2008, 12:25 PM

var $ = function (a) {

The character $ is meant to be reserved for use by machine-generated code.

this.pxWidth = function (w) {

You probably don't want to recreate all your methods every time you construct an instance. Move them to the prototype.

Additionally, your indentation is irregular.

**magicyte** · 10-05-2008, 08:04 PM

Thanks. Yeah, my intentation IS irregular. I do 4 spaces, while it is supposed to be 2.

-magicyte

**Twey** · 10-05-2008, 09:46 PM

Ten spaces? That's far too much. Nobody uses more than eight. Personally I think anything over four is excessive, and two is usually quite sufficient. No, the issue is that sometimes you indent, and sometimes you don't.

**magicyte** · 10-06-2008, 09:24 PM

Oh. Nevermind!!

By the way, I changed the $('id') to _('id'). Is this good?

-magicyte

**Twey** · 10-06-2008, 10:29 PM

Lovely, I'm sure. However, your indentation is still irregular, and you're still recreating your methods for every new instance — a horrible and unnecessary drain on resources.

**magicyte** · 10-07-2008, 01:19 AM

Could you provide a formatted version of my JS file? Also, do you have any reference that I could use to learn how to prototype methods into my objects, or even you telling me?

Thanks for your dedication.

-magicyte

**Twey** · 10-07-2008, 03:57 PM

Oh, I was wary of doing so since it says 'DO NOT EDIT THIS DOCUMENT'. That was a bit of a scary noice! Having your explicit permission, I'm sure I can find it in me to perform a C-x h C-M-\ and maybe even add some sanity...

Code:

/******** - IMPORTANT LABEL - ********/
/* Title: Jasoop Toolbox (c)         */
/* Name: jasoop.js                   */
/* Copyright: 2008 Arthur C. Watkins */
/* Noice: This label is to exist in  */
/* this document in order for this   */
/* document to be legal.             */
/* DO NOT EDIT THIS DOCUMENT         */
/******** - IMPORTANT LABEL - ********/

// Start Jasoop Toolbox

function Animation(elementName) {
    this.animateX = [];
    this.animateY = [];
    this.animateInt = [];
    this.llCounter = 0;
    this.animationCounter = 0;
    this.element = document.getElementById(elementName);
}

Animation.prototype = function() {
    return {
	pxWidth: function(w) {
	    this.element.style.width = w + "px";
	},

	pxHeight: function(h) {
	    this.element.style.height = h + "px";
	},

	backgroundColor: function(bgcol) {
	    this.element.style.backgroundcolor = bg;
	},

	textColor: function(txtcol) {
	    this.element.style.color = txtcol;
	},

	moveTo: function(x, y) {
	    this.element.style.position = "absolute";
	    this.element.style.left = x;
	    this.element.style.top = y;
	},

	add: function(x, y, n) {
	    this.animateX[this.llCounter] = x;
	    this.animateY[this.llCounter] = y;
	    this.animateInt[this.llCounter] = n;
	    this.llCounter++;
	},

	animate: function() {
	    if (this.animationCounter < this.llCounter) {
		this.element.style.position = "absolute";
		this.element.style.left = this.animateX[this.animationCounter];
		this.element.style.top = this.animateY[this.animationCounter];
		this.animationCounter++;
		setTimeout(function() { animationClass.animate(); }, this.animateInt[this.animationCounter]);
	    } else if (this.animationCounter >= this.llCounter) {
		for (i = 0; i <= this.animationCounter; i++) {
		    this.animateX[i] = 0;
		    this.animateY[i] = 0;
		    this.animateInt[i] = 0;
		}

		this.llCounter = 0;
		this.animationCounter = 0;
	    }
	},

	reset: function() {
	    for (var i = 0; i <= this.animationCounter; ++i) {
		this.animateX[i] = 0;
		this.animateY[i] = 0;
		this.animateInt[i] = 0;
	    }

	    this.llCounter = 0;
	    this.animationCounter = 0;
	}
    };
}();

// End Jasoop Toolbox

Note that I've just restructured and fixed it, rather than performed any serious modification... parallel arrays are rarely a good idea, and you have a lot of redundant functions (if it's only one statement, it doesn't need to be a function [unless it's a really complicated one that you want labelled]; if it's never used, it doesn't need to be a function). It can be greatly simplified:

Code:

/******** - IMPORTANT LABEL - ********/
/* Title: Jasoop Toolbox (c)         */
/* Name: jasoop.js                   */
/* Copyright: 2008 Arthur C. Watkins */
/* Noice: This label is to exist in  */
/* this document in order for this   */
/* document to be legal.             */
/* DO NOT EDIT THIS DOCUMENT         */
/******** - IMPORTANT LABEL - ********/

// Start Jasoop Toolbox

var Animation = function() {
    function Animation(elementName) {
	this.steps = [];
	this.animationCounter = 0;
	this.style = document.getElementById(elementName).style;
    }
    
    Animation.prototype = {
	moveTo: function(x, y) {
	    this.style.position = "absolute";
	    this.style.left = x + "px";
	    this.style.top = y + "px";
	},

	applyStep: function(step) {
	    this.moveTo(step.x, step.y);
	    step.callback(this, step);
	    setTimeout((function(me) { return function() { me.animate(); }; })(this),
                       step.pause);
	},

	add: function(x, y, pause, callback) {
	    this.steps[this.steps.length] = new Step(x, y, pause, callback);
	},

	animate: function() {
	    if (this.steps.length)
		this.applyStep(steps.shift());
	},

	reset: function() {
	    this.steps = [];
	}
    };

    function Step(x, y, pause, callback) {
	this.x = x;
	this.y = y;
	this.pause = pause;
	this.callback = callback || noop;
    }

    function noop() {}

    return Animation;
}();

// End Jasoop Toolbox

Other problems found on more detailed examination: 'int' is a reserved word, and the styles you set do not have units.

**Twey** · 10-07-2008, 03:57 PM

Oh, I was wary of doing so since it says 'DO NOT EDIT THIS DOCUMENT'. Having your explicit permission, I'm sure I can find it in me to perform a C-x h C-M-\ and maybe even add some sanity...

Code:

/******** - IMPORTANT LABEL - ********/
/* Title: Jasoop Toolbox (c)         */
/* Name: jasoop.js                   */
/* Copyright: 2008 Arthur C. Watkins */
/* Noice: This label is to exist in  */
/* this document in order for this   */
/* document to be legal.             */
/* DO NOT EDIT THIS DOCUMENT         */
/******** - IMPORTANT LABEL - ********/

// Start Jasoop Toolbox

function Animation(elementName) {
    this.animateX = [];
    this.animateY = [];
    this.animateInt = [];
    this.llCounter = 0;
    this.animationCounter = 0;
    this.element = document.getElementById(elementName);
}

Animation.prototype = function() {
    return {
	pxWidth: function(w) {
	    this.element.style.width = w + "px";
	},

	pxHeight: function(h) {
	    this.element.style.height = h + "px";
	},

	backgroundColor: function(bgcol) {
	    this.element.style.backgroundcolor = bg;
	},

	textColor: function(txtcol) {
	    this.element.style.color = txtcol;
	},

	moveTo: function(x, y) {
	    this.element.style.position = "absolute";
	    this.element.style.left = x;
	    this.element.style.top = y;
	},

	add: function(x, y, n) {
	    this.animateX[this.llCounter] = x;
	    this.animateY[this.llCounter] = y;
	    this.animateInt[this.llCounter] = n;
	    this.llCounter++;
	},

	animate: function() {
	    if (this.animationCounter < this.llCounter) {
		this.element.style.position = "absolute";
		this.element.style.left = this.animateX[this.animationCounter];
		this.element.style.top = this.animateY[this.animationCounter];
		this.animationCounter++;
		setTimeout(function() { animationClass.animate(); }, this.animateInt[this.animationCounter]);
	    } else if (this.animationCounter >= this.llCounter) {
		for (i = 0; i <= this.animationCounter; i++) {
		    this.animateX[i] = 0;
		    this.animateY[i] = 0;
		    this.animateInt[i] = 0;
		}

		this.llCounter = 0;
		this.animationCounter = 0;
	    }
	},

	reset: function() {
	    for (var i = 0; i <= this.animationCounter; ++i) {
		this.animateX[i] = 0;
		this.animateY[i] = 0;
		this.animateInt[i] = 0;
	    }

	    this.llCounter = 0;
	    this.animationCounter = 0;
	}
    };
}();

// End Jasoop Toolbox

Note that I've just restructured and fixed it, rather than performed any serious modification... parallel arrays are rarely a good idea, and you have a lot of redundant functions (if it's only one statement, it doesn't need to be a function [unless it's a really complicated one that you want labelled]; if it's never used, it doesn't need to be a function). It can be greatly simplified:

Code:

/******** - IMPORTANT LABEL - ********/
/* Title: Jasoop Toolbox (c)         */
/* Name: jasoop.js                   */
/* Copyright: 2008 Arthur C. Watkins */
/* Noice: This label is to exist in  */
/* this document in order for this   */
/* document to be legal.             */
/* DO NOT EDIT THIS DOCUMENT         */
/******** - IMPORTANT LABEL - ********/

// Start Jasoop Toolbox

var Animation = function() {
    function Animation(elementName) {
	this.steps = [];
	this.animationCounter = 0;
	this.style = document.getElementById(elementName).style;
    }
    
    Animation.prototype = {
	moveTo: function(x, y) {
	    this.style.position = "absolute";
	    this.style.left = x + "px";
	    this.style.top = y + "px";
	},

	applyStep: function(step) {
	    this.moveTo(step.x, step.y);
	    step.callback(this, step);
	    setTimeout((function(me) { return function() { me.animate(); }; })(this), step.pause);
	},

	add: function(x, y, pause, callback) {
	    this.steps[this.steps.length] = new Step(x, y, pause, callback);
	},

	animate: function() {
	    if (this.steps.length)
		this.applyStep(steps.shift());
	},

	reset: function() {
	    this.steps = [];
	}
    };

    function Step(x, y, pause, callback) {
	this.x = x;
	this.y = y;
	this.pause = pause;
	this.callback = callback || noop;
    }

    function noop() {}

    return Animation;
}();

// End Jasoop Toolbox

Other problems found on more detailed examination: 'int' is a reserved word, and the styles you set do not have units.