element.get('tabindex') ouldnt work since this is a very buggy attribute
theres an if on theyrr attr function if the attribute is tabindex, so you
would need need to create a get for tabindex.
this focusable thing is a very hard one, since you can define what is
focusable or not on your browser... its not a generic thing.
Element.Properties.tabindex = {
get: function(){
//this has been gotten from jquery.
// elem.tabIndex doesn't always return the correct value when it hasn't been
explicitly set
//
http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-valueswith-javascript/
var attributeNode = this.getAttributeNode( "tabIndex" );
return attributeNode && attributeNode.specified
? attributeNode.value
: this.nodeName.match(/(button|input|object|select|textarea)/i)
? 0
: this.nodeName.match(/^(a|area)$/i) && this.href
? 0
: undefined;
}
};
$extend(Selectors.Pseudo, {
// i have not tested this
focusable: function(element) {
var el = this,
nodeName = el.nodeName.toLowerCase(),
tabIndex = el.get('tabindex');
return (/input|select|textarea|button|object/.test(nodeName)
? !el.disabled
: 'a' == nodeName || 'area' == nodeName
? el.href || !isNaN(tabIndex)
: !isNaN(tabIndex))
// the element and all of its ancestors must be visible
// the browser may report that the area is hidden
&& (el.offsetWidth > 0 || el.offsetHeight > 0);
},
//im not sure if is() == match() but if think it is
tabbable: function(element) {
var el = $(this),
tabIndex = el.get('tabindex');
return (isNaN(tabIndex) || tabIndex >= 0) && el.match(':focusable');
}
});
Theres maybe something missing...
If it works let us know...
Fábio Miranda Costa
Engenheiro de Computação
http://meiocodigo.com
On Fri, Jun 26, 2009 at 8:10 PM, Oskar Krawczyk <[email protected]>wrote:
> It would seem *$.attr(element, 'tabindex')* would be *
> element.get('tabindex')* in Moo. I can't believe how
> counter-self-explanatory jQ syntax is– "parents" (all of them?), "closest"
> (closest parent or sibling? single or a set of elements) wtf...
>
> Once you decipher how the functions work extend Pseudo.selectors by doing:
>
> $extend(Selectors.Pseudo, {
> tabable: function() {
> // this = element
> }
> });
>
> On 26 Jun 2009, at 21:10, Rolf -nl wrote:
>
>
> I could use the :tabbable and :focusable selector functions from
> jQuery I spotted in jQuery UI,however I have 0 experience in their
> language syntax. How would someone start porting stuff like this too a
> MooTools extension?
>
> The majority of code is self explaining, but I for instance what
> $.attr does .... i dunno...
>
> //Additional selectors
> $.extend($.expr[':'], {
> data: function(elem, i, match) {
> return !!$.data(elem, match[3]);
> },
>
> focusable: function(element) {
> var nodeName = element.nodeName.toLowerCase(),
> tabIndex = $.attr(element, 'tabindex');
> return (/input|select|textarea|button|object/.test(nodeName)
> ? !element.disabled
> : 'a' == nodeName || 'area' == nodeName
> ? element.href || !isNaN(tabIndex)
> : !isNaN(tabIndex))
> // the element and all of its ancestors must be visible
> // the browser may report that the area is hidden
> && !$(element)['area' == nodeName ? 'parents' : 'closest']
> (':hidden').length;
> },
>
> tabbable: function(element) {
> var tabIndex = $.attr(element, 'tabindex');
> return (isNaN(tabIndex) || tabIndex >= 0) && $(element).is
> (':focusable');
> }
> });
>
>
>
