Implement selection/:active state for buttons, etc that works with click and/or touch

[GoogleCodeExporter]

Currently, it seems, the :active CSS pseudoselector is used a few places in 
iUI, but it also seems to only work for mouse clicks in desktop safari, but not 
in mobile safari.

In some places a selected="true" attribute is set by iUI for this purpose.

We need to remove the default gray box highlighting on elements as done in this 
changeset by Remi:
http://code.google.com/p/iui/source/detail?r=646d193e29880544c512eafdf77e96fc544
6bfa0

We also need to figure out the best way to either use pure CSS (if possible) or 
add some clean javascript to either set a class or an attribute if that is what 
is necessary to do the equivalent of :active for touch events.

There is some discussion of this issue here:
http://stackoverflow.com/questions/6063308/touch-css-pseudo-class-or-something-s
imilar

Original issue reported on code.google.com by msgilli...@gmail.com on 7 Nov 2011 at 8:02

[GoogleCodeExporter]

Original comment by msgilli...@gmail.com on 7 Nov 2011 at 8:06

[GoogleCodeExporter]

This is how Nokia deals with it in its smartphones template:

function doHighlight(which) {
    if(which.timeout) {
        clearTimeout(which.timeout);
        which.timeout = 0;
    }

    which.className += " "+"hovering";

    var that = which;
    which.timeout = setTimeout(function() {                 
        var reg = new RegExp('(\\s|^)'+ "hovering" +'(\\s|$)');
        that.className = that.className.replace(reg,' ');
        },500); 
}

And it is more or less what i had in mind. I'd rather go for a 
data-hover="true" than a classname since it seems quicker & lighter to me to 
add/remove an attribute than having to perform a regex on classnames 
(performance matters on mobile)

Code would then just be:

function setHover(el) {
    if(el.timeout) {
        clearTimeout(el.timeout);
        el.timeout = 0;
    }
    el.setAttribute('data-hover','true');
    el.timeout = setTimeout(function() {
        el.removeAttribute('data-hover');
    }, 350);
}

and CSS
a:hover, a[data-hover] {
  ...
}
(keeping :hover for desktop & "hybrid" devices with mouse pointer like BBs)

This would be needed on the "click" listener in iui.js.

addEventListener("click", function(event)
{
        var link = findParent(event.target, "a");
        if (link)
        {
                function unselect() { link.removeAttribute("selected"); }
                if (link.href && link.hash && link.hash != "#" && !link.target)
                {
                        followAnchor(link);
                }
                else if (link == $("backButton"))
                {
                        setHover(link);
                        iui.goBack();
                }
                else if (link.getAttribute("type") == "submit")
                {
                        var form = findParent(link, "form");
                        if (form.target == "_self")
                        {
                                // Note: this will not call any onsubmit handlers!
                            form.submit();
                            return;  // allow default
                        }
                        setHover(link);
                        submitForm(form);
                }
                else if (link.getAttribute("type") == "cancel")
                {
                        setHover(link);
                        cancelDialog(findParent(link, "form"));
                }
                else if (link.target == "_replace")
                {
                        followAjax(link, link);
                }
                else if (iui.isNativeUrl(link.href))
                {
                        setHover(link);
                        return;
                }
                else if (link.target == "_webapp")
                {
                        setHover(link);
                        location.href = link.href;
                }
                else if (!link.target && link.href)
                {
                        setHover(link);
                        followAjax(link, null);
                }
                else
                        return;

                event.preventDefault();            
        }
}, true);

Thoughts?

Original comment by remi.gru...@gmail.com on 10 Nov 2011 at 9:53