Libraries - Yahoo! UI Library (YUI)



Notes:
  • Versions
  • All the JavaScript files changed below have been added to the list of files to minify in build.xml and the original-min.js files have been removed from our source code repository.
  • Add the following comment before all the changes:
// Orbeon change. See http://wiki.orbeon.com/forms/developer-documentation/yahoo-ui-library-yui

Steps:
  1. Copy build/* from the YUI distribution to src/resources-packed/ops/yui.
  2. Create a directory src/resources-packed/ops/yui/examples and copy the following examples from the distribution to that directory: treeview, resize, container.
  3. Apply the changes to the JavaScript files as documented below.

Changes in YUI 

container.js

  • Remove container-min.js
  • Modify function YAHOO.widget.Dialog.prototype.registerForm to start with return;. This to prevents the function from executing. The YUI dialog can submit data to a server on its own. However to do so it needs to create a form, and this form interferes with the XForms form. Also see this related discussion in the YUI mailing list.
registerForm: function() {
    // Orbeon change. See http://wiki.orbeon.com/forms/developer-documentation/yahoo-ui-library-yui
    return;


button.js

  • Remove button-min.js
  • This allows for keeping the original id of the button. Instead, by default, YUI clears the id.
// Orbeon change. See http://wiki.orbeon.com/forms/developer-documentation/yahoo-ui-library-yui
var sId = this.get("id"),
    sButtonId = oButton.id != null ? oButton.id: sId + "-button";
  • YUI has code which looks for a <label> somewhere in the page with a for attribute pointing to the id of the current button. As this code goes through all the labels on the page, and performs a test on each one, it ends up being quite slow on IE with large pages. Since we don't need this functionality, we are simply commenting this out.
// Orbeon change. See http://wiki.orbeon.com/forms/developer-documentation/yahoo-ui-library-yui
/*
if (oSrcElement && this.get("type") != "link") {
    aLabels = Dom.getElementsBy(hasLabel, "label");
    if (Lang.isArray(aLabels) && aLabels.length > 0) {
        oLabel = aLabels[0];
    }
}
*/


treeview.js

  • Remove treeview-min.js
  • The tree view fails to highlight the current node when it initially get the focus through a mouse click on a node, but through tabbing from another element in the page. To fix this, we added the following code to render():
// Orbeon change. See http://wiki.orbeon.com/forms/developer-documentation/yahoo-ui-library-yui
var anchors = this.getEl().getElementsByTagName("a");
for (var anchorIndex = 0; anchorIndex < anchors.length; anchorIndex++) {
    var anchor = anchors[anchorIndex];
    Event.on(anchor, 'focus', this._onFocusEvent, this, true);
}

This can be tested with the tree sandbox example:

  1. First, comment .ygtvfocus { background-color: transparent } in xforms.css.
  2. Load the example, and select the next in the link "Remove selected".
  3. Hit tab a first time: the "Add new item" link gets the focus.
  4. Hit tab a second time: if everything works as expected, the first item in the tree ("Cool" Encyclopedia) will be highlighted.

connection.js

  • Remove connection-min.js
  • Applied a fix for IE9 and then another fix for IE10. Without this upload doesn't work on IE9/10, getting "stuck" just after the upload started. YUI 2.9 has the fix for IE9, but not IE10. As of 2013-02-04, YUI's latest code doesn't contain the fix for IE10 either.
  • Added a test on the existence of o.conn in handleTransactionResponse. When users cancel an upload, Orbeon's UploadServer.cancel is called, which in turn calls YUI Connect.abort which ends up calling handleTransactionResponse and that code fails because o.conn is not defined, as this is an upload. There are several other occurrences in connection.js where the existence of o.conn is checked, so we are adding one here to prevent this JavaScript error on cancel. See bug #999.

TaskNode.js

  • The table row generated by TaskNode.js doesn't have a class="ygtvrow". Because of this, the tree view code that looks for the <td> whose parent has a ygtvrow class fails. This bug has been fixed in August 2009, but somehow not include in the YUI 2.8.1 released in May 2010. Since then, YUI provides a new way to implement this, which doesn't require to subclass TextNode. We should upgrade our code to use this new technique. In the meantime, we patch TaskNode.js as follows:
// Orbeon change. See http://wiki.orbeon.com/forms/developer-documentation/yahoo-ui-library-yui
sb[sb.length] = '<tr class="ygtvrow">';

// Orbeon change. See http://wiki.orbeon.com/forms/developer-documentation/yahoo-ui-library-yui
sb[sb.length] = ' onclick="' + getNode + '.tree.fireEvent(\'labelClick\',' + getNode +'); return false;"';


yuitest.js

  • Remove yuitest-min.js (this file won't be used since we manually reference yuitest.js in the test cases, but we remove it for safety).

  • The test manager loads every test page into an iframe. By default, the iframe visibility is set to hidden, which means that code listening on focus events is not going to be called, and tests that rely on this will fail. The following change solves the problem:
//frame.style.visibility = "hidden";
frame.style.position = "absolute";
frame.style.top = "0";
frame.style.width = "0";
frame.style.height = "0";

This was reported in the YUI list, see: YUI Test - TestManager iframe visibility.
  • YAHOO.tool.TestFormat.XML didn't properly escape some characters in the XML. This bug has been fixed by YUI since the 2.8.2 release, and we took the xmlEscape() function from the latest TestFormat.js and injected it in the version we are using. Since this change is now in YUI, most likely we won't have to port it forward when we upgrade YUI.

containerariaplugin.js


grids.css, grids-min.css, reset-font-grids.css

Removed rule:

body {
    text-align: center;
}

Future changes

  • HTML entity nbsp replaced with #160 in editor-beta.js.

Bugs that might get fixed with an upgrade

  • #306961 - Safari 1.3: use of hasOwnProperty which is not supported - Note (2008-10-21): This is rather old and YUI has been upgrade several times since this bug has been reported, however nobody got a chance to test this on Safari 1.3 since then. This section will be removed and the bug marked as obsolete if we don't receive reports from people using Safari 1.3.