Rails spinoffs - Dec 2005 - Some handy methods - perhaps cool enough to be committed some time

Hi.

Some time ago I posted some prototype-"extensions", which could come
in
handy.
I''ve been updating them a bit and added a few more and I think its time
to share
it again.

Feel free to use it.

The code should be rather self explaining, but heres a quickguide.
- new Geometry.Size(width,height) - Creates a new instance of size
- new Geometry.Position(x,y) - Creates a new instance of position
- new Geometry.Area(position,size) - Creates a new instance of area
- Element.getPosition(element) - retrieves the position of an element
- Element.setPosition(element,position) - sets the position of an element
- Element.getSize(element) - retrieves the size of an element
- Element.setSize(element,position) - sets the size of an element
- Element.setOpacity(element,opacity) - sets the opacity of an element 
(0-100)
- System.getWindowSize() - gets the size of the window
- System.setWindowSize(size) - sets the size of the window
- System.getScreenSize(availspaceonly) - gets the size of the screen. 
argument i boolean. False = screenresolution, True = area available(max 
size for browser fx.)
- System.getWindowPosition() - gets the position of the window
- System.setWindowPosition(position) - sets the position of the window
- document.getElementsWithInArea(tagname, area) - retreives all elements 
matching the tagname which is within the area. (if tagname=* all 
elements in the area is retrieved)


Here is the code(should be included after prototype.js):
-------------------------------------------------------------------------------
/*****************************************************
* Geometric classes
*****************************************************/
var Geometry = {
    Size:function(width,height){
        this.width=width;
        this.height=height;
        this.toString=function(){return this.width+"x"+this.height;}
    },

    Position:function(x,y){
        this.x=x;
        this.y=y;
        this.toString=function(){return this.x+"x"+this.y;}
    },
    Area:function(position,size){
        this.size=size;
        this.position=position;

        this.getTopLeft=function(){
            return this.position;
        }
        this.getTopRight=function(){
            return new 
Geometry.Position(this.position.x+this.size.width-1,this.position.y);
        }
        this.getBottomLeft=function(){
            return new 
Geometry.Position(this.position.x,this.position.y+this.size.height-1);
        }
        this.getBottomRight=function(){
            return new 
Geometry.Position(this.position.x+this.size.width-1,this.position.y+this.size.height-1);
        }

        this.getTop=function(){
            return this.position.y;
        }
        this.getRight=function(){
            return this.position.x+this.size.width-1;
        }
        this.getBottom=function(){
            return this.position.y+this.size.height-1;
        }
        this.getLeft=function(){
            return this.position.x;
        }
    }
}

/******************************************************
* Geometric functions
******************************************************/

Object.extend(Element, {
    getPosition: function(element) {
        element=$(element);
        var left=element.offsetLeft,top=element.offsetTop;
        while (element.offsetParent.tagName != "BODY") {
            element = element.offsetParent;
            left += element.offsetLeft;
            top += element.offsetTop;
        }
        return new Geometry.Position(left,top);
    },
    setPosition:function(element,pos){
        element=$(element);
        element.style.left=pos.x;
        element.style.top=pos.y;
    },
    getSize:function(element){
        element=$(element);
        var width,height;
        if(element.style.display &&
element.style.display=="none"){
            var visibility=element.style.visibility;
            element.style.visibility="hidden";
            element.style.display="";
            width=element.offsetWidth;
            height=element.offsetHeight;
            element.style.display="none";
            element.style.visibility=visibility;
        }
        else{
            width=element.offsetWidth;
            height=element.offsetHeight;
        }
        return new Geometry.Size(width,height);
    },
    setSize:function(element,size){
        element=$(element);
        //alert("Setting size: "+size+"\nelement:
"+element);
        element.style.width=size.width;
        element.style.height=size.height;
    },
    setOpacity:function(element, opacity) {
        element=$(element);
        opacity = (opacity == 100)?99.999:opacity;
        // IE/Win
        element.style.filter = "alpha(opacity:"+opacity+")";
        // Safari<1.2, Konqueror
        element.style.KHTMLopacity = opacity/100;
        // Older Mozilla and firefox
        element.style.Mozopacity = opacity/100;
        // Safari 1.2, newer firefox and Mozilla, CSS3
        element.style.opacity = opacity/100;
    }
})



var System={
    getWindowSize:function(){
        //var mywindow=window.parent;
        if (navigator.appName=="Netscape") {
            return new Geometry.Size(window.innerWidth,window.innerHeight);
        }
        if (navigator.appName.indexOf("Microsoft")!=-1) {
            return new 
Geometry.Size(document.body.offsetWidth,document.body.offsetHeight);
        }
    },
    getScreenSize:function(availableSpaceOnly){
        if(availableSpaceOnly)
            return new Geometry.Size(screen.availWidth,screen.availHeight);
        else
            return new Geometry.Size(screen.width,screen.height);
    },
    setWindowSize:function(size){
        if (parseInt(navigator.appVersion)>3) {
            if (navigator.appName=="Netscape") {
                top.outerWidth=size.width;
                top.outerHeight=size.height;
            }
            else top.resizeTo(size.width,size.height);
        }
    },
    setWindowPosition:function(pos){
        top.window.moveTo(pos.x,pos.y);
    },
    getWindowPosition:function(){
        if(document.all){ //IE
            return new 
Geometry.Position(window.screenLeft,window.screenTop);
        }
        else{
            return new Geometry.Position(window.screenX,window.screenY);
        }
    }
}

document.getElementsWithInArea=function(tagname,area){
    var elements=document.getElementsByTagName(tagname);
    var elementsWithin=new Array();
    for(var i=0;i<elements.length;i++){
        var elementsize=Element.getSize(elements[i]);
        var elementpos=Element.getPosition(elements[i]);
        var elementarea=new Geometry.Area(elementpos,elementsize);
        if( (elementarea.getLeft() >= area.getLeft() && 
elementarea.getLeft()<area.getRight()) || (elementarea.getRight() >= 
area.getLeft() && elementarea.getRight() < area.getRight())
&&
            (elementarea.getTop() >= area.getTop() && 
elementarea.getTop()<area.getBottom()) || (elementarea.getBottom() >= 
area.getTop() && elementarea.getBottom() < area.getBottom()))
            elementsWithin[elementsWithin.length]=elements[i];
    }
    return elementsWithin;
}

Looks good, can already picture a few places where those would come in
extremely handy, I can  also see a nice extension of
document.getElementsWithInArea.... document.getElementsWithinVisibleArea...


_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs