This project is archived and is in readonly mode.

#690 ✓wontfix
Jesse

Element.highlight Transparent BG Improvement

Reported by Jesse | June 17th, 2009 @ 08:16 PM | in 2.0 (closed)

Hello,

The 1.2.2 implementation of highlight animation is great when the element being animated does not have a 'transparent' background. With a 'transparent' background the animation defaults to the end color of '#fff' which looks bad against non-white backgrounds. My solution is to climb the parentNode tree for the first non-transparent background and use that as the end color.

Certainly there is the case where a parent element may not actually be directly behind the transparent element - but this is the rare complex case that would require an explicit end color anyway.

I've re-implemented the highlight as below, it works as expected with smooth color highlights on 'transparent' elements defaulting to the background color of the first non-transparent parent.

Element.implement({

    highlight: function(start, end){
        if (!end){
            end = this.retrieve('highlight:original', this.getStyle('background-color'));
            if (!end || end == 'transparent'){ /* find first non-transparent parent */
                var el = this;
                while ((el = el.parentNode) && (!(end = $(el).getStyle('background-color')) || end == 'transparent'));
            }
            end = end || '#fff'; /* if no non-transparent parent found, default to white */
        }
        var tween = this.get('tween');
        tween.start('background-color', start || '#ffff88', end).chain(function(){
            this.setStyle('background-color', this.retrieve('highlight:original'));
            tween.callChain();
        }.bind(this));
        return this;
    }


});

Best,
Jesse

Comments and changes to this ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Shared Ticket Bins

People watching this ticket

Pages