Permalink
Browse files

Added Y Browser example

  • Loading branch information...
1 parent 905a509 commit c4facb3519b1b583cd6ed78c82e4de66fe246e19 @davglass committed Apr 6, 2010
Showing with 105 additions and 0 deletions.
  1. +48 −0 README.textile
  2. +57 −0 examples/y-browser.js
View
48 README.textile
@@ -41,6 +41,54 @@ Getting it up and running:
Now that the libraries are in the right places you can now use the dom related examples.
+
+h2. Using the Y.Browser object
+
+To comply with the "no-globals" CommonJS spec, there is no global document or window in this mode.
+Just including the nodejs-dom module will create a fake dom for this instance.
+You can create a document like this:
+<pre class="console">
+YUI().use('nodejs-dom', function(Y) {
+ // Y.Browser
+ {
+ window, //fake window
+ document, //jsdom document
+ self, //window
+ location, //window.location, has an href == __filename
+ navigator //Fake navigator, appVersion => Node version, appName => Node.js, userAgent => Custom for Node ;)
+ }
+});
+</pre>
+
+Making older DOM code run:
+<pre class="console">
+YUI().use('nodejs-dom', function(Y) {
+ var document = Y.Browser.document;
+ document.createElement('div');
+});
+</pre>
+
+If you are using YUI to serve pages, you should use a Nested Use to create the document when the request comes in.
+
+Something like this:
+
+Making older DOM code run:
+<pre class="console">
+YUI().use('event', 'io', function(Y) {
+ //Do your stuff
+
+ //Inside the request handler callback:
+ //Now each request get's a new DOM and not a shared one.
+ Y.use('nodejs-dom', function(Y) {
+ var document = Y.Browser.document;
+ document.createElement('div');
+ });
+});
+</pre>
+
+
+
+
h2. Examples
<pre class="console">
View
57 examples/y-browser.js
@@ -0,0 +1,57 @@
+#!/usr/bin/env node
+
+var sys = require('sys'),
+ YUI = require("../lib/node-yui3").YUI;
+
+//Now use non-DOM related YUI utilities
+YUI({
+ //Only set these if you want to load locally
+ loaderPath: 'loader/loader-debug.js',
+ base: './yui3/build/',
+ filter: 'debug',
+ _logExclude: {
+ 'attribute': true,
+ 'base': true,
+ 'get': true,
+ 'loader': true,
+ 'yui': true,
+ 'widget': true,
+ 'event': true
+ },
+ debug: true
+}).use('nodejs-dom', 'node', function(Y) {
+
+ var document = Y.Browser.document;
+ var window = Y.Browser.window;
+ var self = Y.Browser.self;
+ var navigator = Y.Browser.navigator;
+ var location = Y.Browser.location;
+
+ //With the local aliases
+ var el = document.createElement('div');
+ el.id = 'foo';
+ el.innerHTML = '<em>This is a test</em> This <strong class="odd">is another</strong> test ';
+ document.body.appendChild(el);
+
+
+ //SCOPED
+ var el2 = Y.Browser.document.createElement('div');
+ el2.id = 'foo2bar';
+ el2.innerHTML = '<em class="odd">This is a test</em> This <strong>is another</strong> test ';
+ Y.Browser.document.body.appendChild(el2);
+
+ sys.puts('getElementByid(foo2bar): ' + Y.Browser.document.getElementById('foo2bar'));
+ sys.puts('getElementByid(foo): ' + Y.Browser.document.getElementById('foo'));
+ sys.puts('getElementByTagName(em): ' + Y.Browser.document.getElementsByTagName('em'));
+ sys.puts('getElementByClassName(odd): ' + Y.Browser.document.getElementsByClassName('odd'));
+
+ sys.puts('');
+ sys.puts('Y.Browser.document.body.outerHTML: ');
+ sys.puts(Y.Browser.document.body.outerHTML);
+
+
+
+
+
+ Y.log(Y.Browser.document.body.outerHTML);
+});

0 comments on commit c4facb3

Please sign in to comment.