Element.implement

[Steve Onnis]

Can you implement things on particular elements only? Or do you have to check the type of element in the implements function and deal with it there?

 

Steve

[Ryan Florence]

You might have asked "Can you implement methods on only certain types of elements"

You'll need to do this.get('tag') and check against it in your method.

And you might have asked "Can you implement methods on a particular element".

In this case, simple append a method to the element.

var el = $('el');

el.whatev = function (){};

[Steve Onnis]

Like if i only want to implement something on a table element for example

[Ryan Florence]

afaik you just do this.get('tag') and check it.

I'd just implement it and plan on using it on just table elements, I wouldn't bother with the check.

[Steve Onnis]

Thats what i have been doing but i thought i would ask the question anyway

[Sanford Whiteman]

If the browser exposes and allows you to further extend HTMLElement extensions such as HTMLTableElement, then yes. But I wouldn't bother with it because you're not going to get full BC and have to implement get('tag') as a failsafe anyway.

If you plan to use document.id() everywhere (thus assuming no extended natives at all) you could add the tagName check inside the wrapper and then make it seem transparent to the outside. This, too, is a waste of time IMO. Just use get('tag') if you want this feature to be compatible with all Moo-supported browsers.

-- Sandy

[Steve Onnis]

The reason i asked is because i was looking into some custom form element
styling functions so i wanted to be able to do something like

Select.style()
Input.style()
Radio.style()

And so on but i will most likely have to do it a different way

-----Original Message-----
From: Sanford Whiteman [mailto:sa...@cypressintegrated.com]
Sent: Friday, 15 July 2011 3:28 PM
To: mootool...@googlegroups.com
Subject: Re: [Moo] Element.implement

[Aaron Newton]

var el = $('el');

el.whatev = function (){};

Careful - this is how you leak memory in numerous browsers if you aren't diligent.

[Sanford Whiteman]

Well, specifically targeting radios this way will never be possible, because they are just an HTMLInputElement with a specific `type` value (there is no HTMLRadioElement). So there's that.

Even when browsers allow you to extend the subinterfaces of HTMLElement, you are still restricted to the standard subinterfaces. So you can't extend radios or checkboxes separately, and you shouldn't even expect to extend <EM> and <STRONG> or even <SPAN> tags individually, since per the DOM specs, all these hang directly off the generic HTMLElement.

In sum, even in cutting-edge browsers, you may have to check the current element's tag and/or type before continuing, so for simplicity you might as well extend the whole Element. I'd guess that with a _extremely_ high ratio of uninteresting elements to your "interesting" elements, you might actually see that extending, say, just HTMLInputElement would be faster at runtime, but it's unlikely to be worth it.

-- S.

[Steve Onnis]

Raio was an example. I know its just an input element which is why i was asking. Something like

$$("input[type=radio]").implement({
style : function () {}
});

Is what i was hoping to be able to do

-----Original Message-----
From: Sanford Whiteman [mailto:sa...@cypressintegrated.com]

[Arian Stolwijk]

In MooTools 2 we probably will wrap elements with Class which will give us the possibility to subclass elements.

That way you probably could do something like:

var MyTable = new Class({

     Matches: 'table.foo',

     Extends: Node.Element,

     bar: function(){ ... }

});

Now you can do new MyTable or $$('table.foo') which will return instances of your MyTable class.

[Barry van Oudtshoorn]

Arian, I'm struggling to see how using $$ *could* work. What happens if you have two classes that match the same element?

My recommendation would be to extend Elements, so that you could do something along the lines of   | var els= new myElements('.foo'); |   . Each element of MyTables could, then, be wrapped in some arbitrary class of your choosing. You could perhaps even go so far as to do something like   | var els = new MyElements('.foo', MyTable) |   , and have the elements collected pass as a parameter to the MyTable constructor.

Barry van Oudtshoorn
http://barryvan.com.au/
bvanoud...@gmail.com

[Ryan Florence]

Here's my solution to custom form elements. Not at all the API you're going for, but thought it might interesting regardless.

Clone it / download it, pop open Demos/index.html

https://github.com/rpflorence/mootools-custom-form

[hamburger]

Hello Ryan,
it sounds quite interesting ...

i get the error message offsetParent is null by testing it with moo
1.3.2

[Ryan Florence]

Do you have Element.Position from more?

[hamburger]

Hello Ryan,
i do have Element.Position
(in my environment i am using the complete framework)

[hamburger]

Hello again Ryan,
here is the error-message:
offsetParent is null
parentScroll = offsetParent.getScroll()

i'am using:
mootools-more-1.3.2.1.js and mootools-core-1.3.2-full-nocompat.js