Opened 12 years ago

Closed 9 years ago

#5163 closed enhancement (fixed)

[dojox][patch][no cla] fx.highlight missing functionality that was in 0.4.3

Reported by: guest Owned by: dante
Priority: high Milestone: 1.6
Component: Dojox Version: 1.0
Keywords: fx highlight Cc:
Blocked By: Blocking:

Description (last modified by dante)

dojox.fx.highlight in 1.0 is missing some functionality that was in dojo.lfx.html.highlight in 0.4.3.

1) When using dojox.fx.highlight on a transparent node (a node with no background color) that is contained within a parent that does have a background, the highlight effect fades to white instead of to the "inherited" background color and then becomes transparent again. This can also be seen in the test#3 on page dojox/fx/tests/test_highlight.html, where the node appears over the body's background image. In 0.4.3, dojo.lfx.html.highlight handled this by calling dojo.html.getBackgroundColor(node) to get the endColor for the fade.

2) If you want the startColor highlight to remain for a little while before starting to fade out, in 0.4.3 you were able to specify a delay as the argument to play(). This worked because dojo.lfx.html.highlight set the startColor as part of beforeBegin. But in 1.0 this is missing, so specifying a delay only means there is a pause before you see the startColor and then it begins to fade immediately.

Below is an updated version of dojox.fx.highlight that restores this functionality using code based on the 0.4.3 implementation:

dojox.fx.highlight = function(/*Object*/ args){
	// summary: Highlight a node
	// description:
	//	Returns an animation that sets the node background to args.color
	//	then gradually fades back the original node background color
	//	
	// example:
	//	dojox.fx.highlight({ node:"foo" }).play(); 

	var node = (args.node = dojo.byId(args.node));

	args.duration = args.duration || 400;
	// Assign default color light yellow
	var startColor = args.color || '#ffff99';
	var endColor = dojo.style(node, "backgroundColor").toLowerCase();
  	var bgImage = dojo.style(node, "backgroundImage");
	var wasTransparent = (endColor == "transparent" || endColor == "rgba(0, 0, 0, 0)");

	if ( wasTransparent ) {
		// get inherited background color to use as endColor
		var pNode = node;
		do {
			endColor = dojo.style(pNode , "backgroundColor");
			if (endColor.toLowerCase() == "rgba(0, 0, 0, 0)") {
				endColor = "transparent";
			}
			if (pNode == document.getElementsByTagName("body")[0]) {
				pNode = null;
				break;
			}
			pNode = pNode .parentNode;
		} while (pNode && (endColor == "transparent"));
	}

	var anim = dojo.animateProperty(dojo.mixin({
		properties: {
			backgroundColor: { start: startColor, end: endColor }
		}
	}, args));

	dojo.connect(anim, "beforeBegin", anim, function(){
		if (bgImage) {
			dojo.style( node, "backgroundImage", "none" );
		}
		// set startColor beforeBegin so can set delay on play()
		dojo.style( node, "backgroundColor", startColor );
	});
	dojo.connect(anim, "onEnd", anim, function(){
		if (bgImage) {
			dojo.style( node, "backgroundImage", bgImage );
		}
		if ( wasTransparent ) {
			dojo.style( node, "backgroundColor", "transparent" );
		}
	});

	return anim; // dojo._Animation
};

Attachments (1)

dojox.fx._base.patch (1.5 KB) - added by guest 12 years ago.
Patch to restore highlight behavior lost between 0.4.3 and 1.0

Download all attachments as: .zip

Change History (12)

comment:1 Changed 12 years ago by dante

Milestone: 1.0.11.1
Owner: changed from Tom Trenka to dante
Status: newassigned

hey that's great but a couple of things:

a) who are you? we can't muck too much with it without a CLA on file and b) .diff's attached are soooo much easier to visualize changes made without having to dig around. they are the prefered method of submission ... though you have to "make the ticket", then go back and "attach file" ... c) unhighlight didn't get ported (it existed didn't it?) ... isn't the new highlight function (1.0) worlds different wrt to API than the 0.4?

Changed 12 years ago by guest

Attachment: dojox.fx._base.patch added

Patch to restore highlight behavior lost between 0.4.3 and 1.0

comment:2 in reply to:  1 Changed 12 years ago by guest

Replying to dante:

a) who are you? we can't muck too much with it without a CLA on file and

Sorry about that. Haven't done the CLA yet, but figured it might not be needed since the code is basically from the 0.4.3 implementation anyway (just worked into the new function).

b) .diff's attached are soooo much easier to visualize changes made without having to dig around. they are the prefered method of submission ... though you have to "make the ticket", then go back and "attach file" ...

OK, I attached a diff but it seems to be in the wrong format because there's no preview?

c) unhighlight didn't get ported (it existed didn't it?) ...

You're right, it did exist.

Highlight can be used for the spotlight effect (from Yahoo! Design Pattern Library) to "call attention to where a data value or content has changed within the interface", where the background color highlight would appear instantly and then fade out until the original background is restored.

The unhighlight of 0.4.3 seems to start at the current background and animate the background color to some other color, and leave it there. I suppose it didn't get ported because it was viewed as needed less?

isn't the new highlight function (1.0) worlds different wrt to API than the 0.4?

So much in 1.0 is worlds different than 0.4. The highlight API is different because of the way the animation API has changed, I think, but I figure that doesn't necessarily mean the original functionality cannot still be maintained.

comment:3 Changed 12 years ago by guest

Just had a quick look at the patch, was it tested thoroughly on all browsers? In any case, it needs unit tests to support that it works correctly. If I can remember, the previous code has different behavior on different browsers.

Will have a look in the upcoming days. I ported the highlight from dojo so it works well and did leave out the unhiglight which seemed confusing and redundant.

jbondc

comment:4 Changed 12 years ago by dante

Summary: dojox.fx.highlight missing functionality that was in 0.4.3[dojox][patch][no cla] fx.highlight missing functionality that was in 0.4.3

comment:5 Changed 11 years ago by dante

Milestone: 1.11.2

comment:6 Changed 11 years ago by dante

Description: modified (diff)
Resolution: wontfix
Status: assignedclosed

i'm going to argue that the functionality isn't sorely missed, and not vital. please reopen with patch if the need is great.

comment:7 Changed 11 years ago by Matt Sgarlata

Resolution: wontfix
Status: closedreopened

This function basically doesn't work when the background is transparent. In FF, the animation goes from yellow to a black background and looks terrible. Even if you decide not to fix it right now, I really think this should be left open so that everyone knows this function doesn't work with transparent backgrounds.

This is a problem in the application I'm working on.

comment:8 Changed 11 years ago by bill

Milestone: 1.21.3

since these tickets were reopened, marking milestone as 1.3 (the next uncompleted milestone) so we don't overlook them

comment:9 Changed 11 years ago by bill

Milestone: 1.3future
Type: defectenhancement

comment:10 Changed 11 years ago by dante

I'm curious what the expected value of a transparent background is ...

comment:11 Changed 9 years ago by dante

Milestone: future1.6
Resolution: fixed
Status: reopenedclosed

tbh I think nicrizzo fixed the default transparent background questions with a djConfig and defaults hardcoded.

Note: See TracTickets for help on using tickets.