[DJ Maze]

Hi all,

i've worked hard the last months on a new JavaScript library.

Why new?
Well there are many like; DOJO, Yahoo, Prototype, Jquery, Moo Tools, PI, etc. but, i didn't like them to much to implement by default.

poodle.js is my first attempt to write a DOM/ECMA 262 compatible library.
This is different then the other libraries because it is a DOM extending library.
For example jQuery uses $() and creates an object around a HTMLElement with custom functions.
Poodle just extends the HTMLElement with unknown DOM functions and shortened aliases.

So basically $() returns the real object instead of a wrapper.

Say IE8 is missing object.addEventListener() so poodle.js creates that function.

Current support for non-existing methods and properties:

Array

• every()
• filter()
• forEach()
• indexOf()
• lastIndexOf()
• map()
• some()

Boolean

• toJSON()
  

Date

• toJSON()
  

Number

• toJSON()
  

String

• toJSON()
  

Document

• defaultView (IE8+)
• getElementsByClassName()
• addEventListener()
• removeEventListener()
• dispatchEvent()

Element

• click()
• getBoundingClientRect()
• getElementsByClassName()
• textContent (IE8+)
• classList
• addEventListener()
• removeEventListener()
• dispatchEvent()

Element.style

• getPropertyValue()
• getPropertyCSSValue()
• removeProperty()
• setProperty()
• cssRules
• ownerNode

CSSStyleSheet

• insertRule()
• deleteRule()
• sheet (IE8+)

Event

• stopPropagation()
• preventDefault()
• preventCapture()
• initEvent()
• initMouseEvent()

Window

• DOMParser
• addEventListener()
• removeEventListener()
• dispatchEvent()
• getComputedStyle()
• JSON

and many more......

Try it out and keep track of it!

Comments are welcome

More info:
www.w3.org/DOM/Activity.html
www.w3.org/TR/REC-DOM-Level-1/
www.w3.org/TR/DOM-Level-2-Core/
www.w3.org/TR/DOM-Level-2-Events/
www.w3.org/TR/DOM-Level-2-Style/
www.w3.org/TR/DOM-Leve...sal-Range/
www.w3.org/TR/DOM-Level-2-Views/
www.w3.org/TR/DOM-Level-2-HTML/
www.w3.org/TR/DOM-Level-3-Core/
www.w3.org/TR/DOM-Level-3-Events/
www.w3.org/TR/cssom-view/
www.w3.org/TR/html5/dom.html
www.w3.org/TR/selectors-api/

[DJ Maze]

UPDATE:

• added HTML5 getElementsByClassName()
• added JavaScript 1.6 Array functions

[radiogetswild]

Q How big are these new Poodles ?

small, mediam or large cos whatever size they are I might have to get a bigger bucket and mop to clean up the mess lol

have a great days guys n gals

[DJ Maze]

Thanks tim!

NEW UPDATE: Added Selectors API support.

Accessible through the document.$Q() and element.$Q() functions.
Using slickspeed tests it is the fastest. WOOHOO!

RUN THE TEST

Example:

Code:

// Select all even td's from all table.forumline tbody's
Poodle.$Q("table.forumline > tbody > td:nth-child(even)")

// Select all odd td's from all table.forumline tbody's
Poodle.$Q("table.forumline > tbody > td:nth-child(odd)")

More info about CSS selectors:
www.w3.org/TR/CSS2/selector
www.w3.org/TR/css3-selectors

[NanoCaiordo]

Unbelievable!

Can also see how fast Opera JS engine is.

[NanoCaiordo]

While converting existing scripts to use only poodle I've found that getName is not IE friendly yet ... or IE is not getName friendly lmao

TypeError: Object doesn't support support this property or method in ...

Works in all browsers but IE.

[Ertan]

amazing

[DJ Maze]

Update:
added support for IE 9 Preview 4
added support for ElementTraversal
renamed getName() to lowerName() #151664
renamed $IE to $IE7 for better understanding
improved UA detection (BSD, SunOS)
improved defineProperty() support (firefox)
improved extendDOM() to support defineProperty() to set properties
removed getOpacity() and setOpacity() for defineProperty() method
removed getNodesByClassName()
removed getSheet()
set cookie PoodleTimezoneOffset

[greenday2k]

Whoa, THATS FAST. Tested with Firefox 4.02 B.

[NanoCaiordo]

Code:

/*    MOO CMS, Copyright (c) since 2005 The MOO Dev. Group. All rights reserved.
    $Revision: 1.1 $
*/

// attach to window onload event
Poodle.onDOMReady(Tabs);

function Tabs() {
    init();
    function init() {
        var x=-1,y,z,t,n,nodes=$D().getElementsByClassName("tabs", "ul");
        while(nodes[++x]) {
            y=-1;
            while(t=nodes[x].childNodes[++y]){
                if("li"!=t.nodeName.toLowerCase()) {continue;}
                for(z=0;z<t.childNodes.length;++z) {
                    n=t.childNodes[z];
                    if("a"==n.nodeName.toLowerCase()) {
                        n.bind("click",show_tab);
                    }
                }
            }
        }
    }
    function show_tab(e) {
        var i,
            li=e.currentTarget.parentNode,
            items=li.parentNode.$T("li");
        for (i=0;i<items.length;++i) { items[i].removeClass("current"); }
        li.className += " current";
//        e.removeEventListener("click", show_tab);
    }
}

Converted to use Poodle but IE7 (not sure about other versions) refuse to understand obj.bind and obj.addEventListener.
Am I doing something wrong?

Quote:

TypeError: Obejct doesn't support this property or method in ...

[DJ Maze]

Code:

nodes[x].childNodes[++y]

This fails because childNodes don't use $IE7() to extend the DOM functionality.
Known problem of IE7 because IE7 can't extend elements on its own.
Instead it is easier to use:

Code:

function Tabs()
{
	var i=0, n, nodes = $Q("ul.tabs > li > a.tab, ul.tabs > li > div.tabcontent");
	while (n = nodes[i++])
	{
		if ("a" == n.lowerName()) {
			n.bind("click", show_tab);
		}
		if ("div" == n.lowerName())
		{
			n.resizer = new MOO.Resizer(n, 0, 200, null, n);
		}
	}

$Q() is the CSS based QuerySelector.
Since we only want the direct children A and DIV from ul > li to attach the event handler and resizer this is the best method.
Aside from the $IE7() issue we also loop through all childNodes to fetch the one we need and match the class.
A query selector can make that much much easier.

Now you see how Poodle makes life much easier doesn't it?

You understand, implement and test?