Page 1 of 14 12311 ... LastLast
Results 1 to 10 of 133

Thread: Jasoop Toolbox

  1. #1
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default Jasoop Toolbox

    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
    Last edited by magicyte; 10-07-2008 at 09:04 PM.

  2. The Following User Says Thank You to magicyte For This Useful Post:

    simsonite (12-27-2008)

  3. #2
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    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

  4. #3
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  5. The Following User Says Thank You to Twey For This Useful Post:

    magicyte (10-08-2008)

  6. #4
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

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

    -magicyte
    Last edited by magicyte; 10-13-2008 at 01:15 AM.

  7. #5
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  8. #6
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    Oh. Nevermind!!

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

    -magicyte

  9. #7
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  10. The Following User Says Thank You to Twey For This Useful Post:

    magicyte (10-08-2008)

  11. #8
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    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

  12. #9
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Last edited by Twey; 10-07-2008 at 04:06 PM.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  13. #10
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  14. The Following User Says Thank You to Twey For This Useful Post:

    magicyte (10-07-2008)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •