Satyen Desai sdesai

USE CASES

Render widgets on NodeJS, where DOM is absent.
Optimize rendering of Widgets at scale (1000s of TreeViewNodes).

GOAL

Avoid all Node references from Widget through the end of renderUI().
bindUI()/syncUI() will still have Node references (to bind events and incrementally update DOM).

Lingering Cleanup

a) Clean up multi-axis support [ being able to scroll horizontally and vertically at the same time ]. It's currently supported, but doesn't hold up cleanly all the way through the API.

b) Clean up scrollbar implementation - right now the scrollbar is 3 separate elements. I remember looking into it and thinking we could do it with just 1 piece.

c) Just a general high level pass of the API.

d) Clean up the ScrollView-List plugin - it doesn't really solve the real problem it was mean to solve - laying out horizontal LIs. It's API could also use some cleanup.

	var tree = new Y.ParentWidget({
	id: "tree"
	});

	tree.plug(Y.SM.Plugin.WidgetParentRenderQueue, {timeout:2000});

	tree.add([
	{ type: Y.ChildWidget, id: "leaf-1", label: "Leaf One" },
	{ type: Y.ChildWidget, id: "leaf-2", label: "Leaf Two" },
	{ type: Y.ChildWidget, id: "leaf-2", label: "Leaf Three" },

	var tree = new Y.ParentWidget({
	id: "tree"
	});

	// tree.plug(Y.SM.Plugin.WidgetParentRenderQueue, {timeout:2000});

	tree.render();

	tree.add({ type: Y.ChildWidget, id: "leaf-2", label: "Leaf Two" }, 1);
	tree.add({ type: Y.ChildWidget, id: "leaf-1", label: "Leaf One" }, 0);

	_uiAddChild: function (child, parentNode) {

	// Out of the box, this is never async, so things will always work, even if children are
	// rendered out of order.

	// The plugin modifies this code to be async (by moving the defRenderFn to an async queue).
	// Since it's doing this, I think it's also appropriate for it to override any methods
	// which were written based on the assumption that child.render() was always synchronous.

	child.render(parentNode);

	// Shorten colors from #AABBCC to #ABC. Note that we want to make sure
	// the color is not preceded by either ", " or =. Indeed, the property
	// filter: chroma(color="#FFFFFF");
	// would become
	// filter: chroma(color="#FFF");
	// which makes the filter break in IE.

	BEFORE:

	var pattern = /([^"'=\s])(\s*)#([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])/gi

	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui.js"></script>
	</head>
	<body>
	<script type="text/javascript">
	YUI({filter:"raw", combine:false}).use('base', function(Y) {

	function Bar() {}


	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=0">

	<link rel="stylesheet" href="../../../../build/cssreset/cssreset-min.css" type="text/css" charset="utf-8">

	<script src="../../../../build/yui/yui.js" type="text/javascript" charset="utf-8"></script>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>EventTarget And Homogeneous Bubbling</title>
	<script type="text/javascript" src="/YuiWip/yui3/build/yui/yui.js"></script>
	</head>
	<body>

	<script type="text/javascript">