Verious messy examples

author: Wilson Page <wilsonpage@me.com> 2013-08-26 17:54:51 +0100
committer: Wilson Page <wilsonpage@me.com> 2013-08-26 17:54:51 +0100
commit: 4b07c0ffeb00f5c966867dda3145f05e23fb9257 (patch)
tree: f7c9bf53e531005014c18fdf6383f231f33bec0c /examples
parent: 5504e35eb21e9e347f8a63d59acd2cc5e7e22478 (diff)
download: fastdom-4b07c0ffeb00f5c966867dda3145f05e23fb9257.zip
fastdom-4b07c0ffeb00f5c966867dda3145f05e23fb9257.tar.gz
fastdom-4b07c0ffeb00f5c966867dda3145f05e23fb9257.tar.bz2
7 files changed, 608 insertions, 31 deletions
diff --git a/examples/aspect.html b/examples/aspect.html
new file mode 100644
index 0000000..e1b0e25
--- /dev/null
+++ b/examples/aspect.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>title</title>
+<style>
+
+  * {
+    box-sizing: border-box;
+  }
+
+  div {
+    float: left;
+    background: silver;
+    border: solid 2px white;
+  }
+
+</style>
+</head>
+<body>
+  <button id="gobtn">Go</button>
+  <button id="resetbtn">reset</button>
+  <section id="container"></section>
+  <script type="text/javascript" src="../lib/dom-batch.js"></script>
+  <script>
+    var dom = new DomBatch();
+    var n = 100;
+    var divs;
+
+    var button = document.getElementById('button');
+
+    // Setup
+    //
+    function reset() {
+      divs = [];
+      container.innerHTML = '';
+
+      for (var i = 0; i < n; i++) {
+        var div = document.createElement('div');
+        div.style.width = Math.round(Math.random() * window.innerWidth) + 'px';
+        container.appendChild(div);
+        divs.push(div);
+      }
+    }
+
+    function go() {
+      var start = performance.now();
+      divs.forEach(setAspect);
+      console.log(performance.now() - start + 'ms');
+    }
+
+    function setAspect(div) {
+      var aspect = 9/16;
+
+      // READ
+      var h = div.clientWidth * aspect;
+
+      // WRITE
+      div.style.height = h + 'px';
+    }
+
+    reset();
+
+    gobtn.onclick = go;
+    resetbtn.onclick = reset;
+  </script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/examples/batched-aspect.html b/examples/batched-aspect.html
new file mode 100644
index 0000000..75f1d07
--- /dev/null
+++ b/examples/batched-aspect.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>title</title>
+<style>
+
+  * {
+    box-sizing: border-box;
+  }
+
+  div {
+    float: left;
+    background: silver;
+    border: solid 2px white;
+  }
+
+</style>
+</head>
+<body>
+  <button id="gobtn">Go</button>
+  <button id="resetbtn">reset</button>
+  <section id="container"></section>
+  <script type="text/javascript" src="../lib/dom-batch.js"></script>
+  <script>
+    var dom = new DomBatch();
+    var n = 1000;
+    var start;
+    var divs;
+
+    var button = document.getElementById('button');
+
+    // Setup
+    //
+    function reset() {
+      divs = [];
+      container.innerHTML = '';
+
+      for (var i = 0; i < n; i++) {
+        var div = document.createElement('div');
+        div.style.width = Math.round(Math.random() * window.innerWidth) + 'px';
+        container.appendChild(div);
+        divs.push(div);
+      }
+    }
+
+    function go() {
+      start = performance.now();
+      divs.forEach(setAspect);
+    }
+
+    function setAspect(div, i) {
+      var aspect = 9/16;
+      var isLast = i === (n-1)
+
+      // READ
+      dom.read(function() {
+        var h = div.clientWidth * aspect;
+
+        // WRITE
+        dom.write(function() {
+          div.style.height = h + 'px';
+          if (isLast) {
+            console.log(performance.now() - start + 'ms');
+          }
+        });
+      });
+    }
+
+    reset();
+
+    gobtn.onclick = go;
+    resetbtn.onclick = reset;
+  </script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/examples/batched-simple.html b/examples/batched-simple.html
new file mode 100644
index 0000000..6bccb72
--- /dev/null
+++ b/examples/batched-simple.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>title</title>
+<style>
+
+  div {
+    margin-bottom: 1em;
+    background: silver;
+  }
+
+</style>
+</head>
+<body>
+  <button id="button">Go</button>
+  <div id='div1'></div>
+  <div id='div2'></div>
+  <div id='div3'></div>
+  <script type="text/javascript" src="../lib/dom-batch.js"></script>
+  <script>
+    var dom = new DomBatch();
+
+    var button = document.getElementById('button');
+    var div1 = document.getElementById('div1');
+    var div2 = document.getElementById('div2');
+    var div3 = document.getElementById('div3');
+
+    function go() {
+      setAspect(div1);
+      setAspect(div2);
+      setAspect(div3);
+    }
+
+    function setAspect(div) {
+      var aspect = 9/16;
+
+      // READ
+      dom.read(function() {
+        var h = div.clientWidth * aspect;
+
+        // WRITE
+        dom.write(function() {
+          div.style.height = h + 'px';
+        });
+      });
+    }
+
+    button.onclick = go;
+  </script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/examples/batched.html b/examples/batched.html
new file mode 100644
index 0000000..178faee
--- /dev/null
+++ b/examples/batched.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>title</title>
+<style>
+
+  div {
+    margin-bottom: 1em;
+    background: silver;
+  }
+
+</style>
+</head>
+<body>
+  <button id="button">Go</button>
+  <div id='div1'></div>
+  <div id='div2'></div>
+  <div id='div3'></div>
+  <script type="text/javascript" src="../lib/dom-batch.js"></script>
+  <script>
+    var dom = new DomBatch();
+
+    var button = document.getElementById('button');
+    var div1 = document.getElementById('div1');
+    var div2 = document.getElementById('div2');
+    var div3 = document.getElementById('div3');
+
+    function go() {
+
+      var h = Math.round(Math.random() * 300);
+
+      dom.write(function() {
+        div1.style.height = h + 'px';
+
+        // Read
+        dom.read(function() {
+          h = Math.round(Math.random() * div1.clientHeight);
+
+          // Write
+          dom.write(function() {
+            div2.style.height = h + 'px';
+
+            // Read
+            dom.read(function() {
+              h = Math.round(Math.random() * div2.clientHeight);
+
+              // Write
+              dom.write(function() {
+                div3.style.height = h + 'px';
+              });
+            });
+          });
+        });
+      });
+    }
+
+    button.onclick = go;
+  </script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/examples/complex-batched.html b/examples/complex-batched.html
new file mode 100644
index 0000000..7b50d60
--- /dev/null
+++ b/examples/complex-batched.html
@@ -0,0 +1,276 @@
+<!DOCTYPE html><html>
+<head>
+  <meta charset=utf-8 />
+  <title>JS Bin</title>
+  <style id="jsbin-css">
+  * {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding 0;
+}
+
+.buttons {
+  position: absolute;
+}
+
+.module {
+  height: 200px;
+  border: solid 2px red;
+  background: red;
+  margin: 10px;
+}
+
+.module div {
+  border: solid 2px red;
+  background: white;
+}
+
+
+</style>
+</head>
+<body>
+  <div class="buttons"><button id="sencha">Sencha</button> <button id="performant">Performant</button> <button id="crappy">Crappy</button></div><div class="module module-a"><div></div><div></div></div><div class="module module-b"><div></div><div></div><div></div></div><div class="module module-c"><div></div><div></div><div></div><div></div></div>
+<script type="text/javascript" src="../lib/dom-batch.js"></script>
+<script>
+/*jshint laxbreak:true*/
+
+/**
+ * @private
+ * Handle batch read / write of DOMs, currently used in SizeMonitor + PaintMonitor
+ */
+
+    var pending = false,
+        mode = true;
+
+    function TaskQueue() {
+        this.readQueue = [];
+        this.writeQueue = [];
+
+        this.run = this.run.bind(this);
+    }
+
+    TaskQueue.prototype.requestRead = function(fn, scope, args) {
+        this.request(true);
+        this.readQueue.push(arguments);
+    };
+
+    TaskQueue.prototype.requestWrite = function(fn, scope, args) {
+        this.request(false);
+        this.writeQueue.push(arguments);
+    };
+
+    TaskQueue.prototype.request = function(mode) {
+        if (!this.pending) {
+            this.pending = true;
+            this.mode = mode;
+            if (mode) {
+                setTimeout(this.run, 1);
+            } else {
+                requestAnimationFrame(this.run);
+            }
+        }
+    };
+
+    TaskQueue.prototype.run = function() {
+        this.pending = false;
+
+        var readQueue = this.readQueue,
+            writeQueue = this.writeQueue,
+            request = null,
+            queue;
+
+        if (this.mode) {
+            queue = readQueue;
+
+            if (writeQueue.length > 0) {
+                request = false;
+            }
+        }
+        else {
+            queue = writeQueue;
+
+            if (readQueue.length > 0) {
+                request = true;
+            }
+        }
+
+        var tasks = queue.slice(),
+            i, ln, task, fn, scope;
+
+        queue.length = 0;
+
+        for (i = 0, ln = tasks.length; i < ln; i++) {
+            task = tasks[i];
+            fn = task[0];
+            scope = task[1];
+
+            if (typeof fn == 'string') {
+                fn = scope[fn];
+            }
+
+            if (task.length > 2) {
+                fn.apply(scope, task[2]);
+            }
+            else {
+                fn.call(scope);
+            }
+        }
+
+        tasks.length = 0;
+
+        if (request !== null) {
+            this.request(request);
+        }
+    };
+
+
+
+var perform;
+var frameCount = 0;
+
+var tq = new TaskQueue();
+
+
+
+
+var dom = new DomBatch();
+
+
+
+
+
+
+function moduleA(cb) {
+  var el = document.querySelector('.module-a');
+
+  // Write
+  setChildHeights(el, function() {
+    printChildHeights(el, cb.bind(null, 'a'));
+  });
+}
+
+
+function moduleB(cb) {
+  var el = document.querySelector('.module-b');
+
+
+  setChildHeights(el, function() {
+    printChildHeights(el, cb.bind(null, 'b'));
+  });
+}
+
+
+function moduleC(cb) {
+  var el = document.querySelector('.module-c');
+
+  setChildHeights(el, function() {
+    printChildHeights(el, cb.bind(null, 'c'));
+  });
+}
+
+function getRandomLength() {
+  return Math.floor(Math.random() * 100) * (Math.random() < 0.5 ? 1 : -1);
+}
+
+
+function setChildHeights(el, cb) {
+  var c = el.children;
+  var n = c.length;
+
+  console.log("Requesting write: setChildHeights initial");
+  dom.write(function setModuleHeights() {
+    el.style.height = (200 + getRandomLength()) + 'px';
+    console.log("DOM WRITE: setChildHeights initial");
+
+      console.log("Requesting read: setChildHeights");
+      dom.read(function() {
+        var h = el.clientHeight / n;
+        console.log("DOM READ: setChildHeights");
+
+        console.log("Requesting write: setChildHeights");
+        dom.write(function() {
+          while (n--) {
+            c[n].style.height = h + 'px';
+          }
+          console.log("DOM WRITE: setChildHeights");
+
+          cb();
+        });
+      });
+  });
+}
+
+function printChildHeights(el, cb) {
+  var c = el.children;
+  var n = c.length;
+
+  console.log("Requesting read: printChildHeights");
+  dom.read(function() {
+    var h = c[0].clientHeight;
+    console.log("DOM READ: printChildHeights");
+
+    console.log("Requesting write: printChildHeights");
+    dom.write(function() {
+      while (n--) {
+        c[n].innerHTML = 'My height is: ' + h + 'px';
+      }
+      console.log("DOM WRITE: printChildHeights");
+      cb();
+    });
+  });
+}
+
+function go(type, cb) {
+  console.log('starting ' + type);
+  cb = cb || function() {};
+  moduleA(cb);
+  moduleB(cb);
+  moduleC(cb);
+}
+
+performant.onclick = function() {
+
+  perform = 'performant';
+
+  var start = performance.now();
+  var done = [];
+  go('performant', function(module) {
+    console.log('performant completed ' + module);
+    done.push(module);
+    if (done.length === 3) {
+      console.log('Performant took ' + (performance.now() - start));
+    }
+  });
+
+};
+
+sencha.onclick = function() {
+
+  perform = 'sencha';
+
+  var start = performance.now();
+  var done = [];
+  go('sencha', function(module) {
+    done.push(module);
+    if (done.length === 3) {
+      console.log('Sencha took ' + (performance.now() - start));
+    }
+  });
+
+};
+crappy.onclick = function() {
+
+  perform = 'crappy';
+
+  var start = performance.now();
+  go('crappy');
+  console.log('Crappy took ' + (performance.now() - start));
+};
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/examples/index.html b/examples/index.html
index 99531ac..5f6cfe2 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -3,51 +3,51 @@
 <head>
 <meta charset="UTF-8">
 <title>title</title>
-<style></style>
+<style>
+
+  div {
+    margin-bottom: 1em;
+    background: silver;
+  }
+
+</style>
 </head>
 <body>
-  <div class='div1'></div>
-  <div class='div2'></div>
-  <div class='div3'></div>
+  <button id="button">Go</button>
+  <div id='div1'></div>
+  <div id='div2'></div>
+  <div id='div3'></div>
   <script type="text/javascript" src="../lib/dom-batch.js"></script>
   <script>
+    var dom = new DomBatch();
 
+    var button = document.getElementById('button');
+    var div1 = document.getElementById('div1');
+    var div2 = document.getElementById('div2');
+    var div3 = document.getElementById('div3');
 
-  domBatch.write(function() {
-    console.log('write1');
-  });
-
-  domBatch.read(function() {
-    console.log('read1');
-  });
+    function go() {
 
-  domBatch.read(function() {
-    console.log('read1');
-  });
+      var h = Math.round(Math.random() * 300);
 
-  domBatch.write(function() {
-    console.log('write1');
-  });
+      // Write
+      div1.style.height = h + 'px';
 
+      // Read
+      h = Math.round(Math.random() * div1.clientHeight);
 
-  setTimeout(function() {
+      // Write
+      div2.style.height = h + 'px';
 
-    domBatch.write(function() {
-      console.log('write2');
-    });
 
-    domBatch.read(function() {
-      console.log('read2');
-    });
+      // Read
+      h = Math.round(Math.random() * div2.clientHeight);
 
-    domBatch.read(function() {
-      console.log('read2');
-    });
+      // Write
+      div3.style.height = h + 'px';
+    }
 
-    domBatch.write(function() {
-      console.log('write2');
-    });
-  }, 400);
+    button.onclick = go;
   </script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/examples/simple.html b/examples/simple.html
new file mode 100644
index 0000000..775cbf1
--- /dev/null
+++ b/examples/simple.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>title</title>
+<style>
+
+  div {
+    margin-bottom: 1em;
+    background: silver;
+  }
+
+</style>
+</head>
+<body>
+  <button id="button">Go</button>
+  <div id='div1'></div>
+  <div id='div2'></div>
+  <div id='div3'></div>
+  <script type="text/javascript" src="../lib/dom-batch.js"></script>
+  <script>
+    var dom = new DomBatch();
+
+    var button = document.getElementById('button');
+    var div1 = document.getElementById('div1');
+    var div2 = document.getElementById('div2');
+    var div3 = document.getElementById('div3');
+
+    function go() {
+      setAspect(div1);
+      setAspect(div2);
+      setAspect(div3);
+    }
+
+    function setAspect(div) {
+      var aspect = 9/16;
+      var h = div.clientWidth * aspect;
+      div.style.height = h + 'px';
+    }
+
+    button.onclick = go;
+  </script>
+</body>
+</html>
+\ No newline at end of file
author	Wilson Page <wilsonpage@me.com>	2013-08-26 17:54:51 +0100
committer	Wilson Page <wilsonpage@me.com>	2013-08-26 17:54:51 +0100
commit	4b07c0ffeb00f5c966867dda3145f05e23fb9257 (patch)
tree	f7c9bf53e531005014c18fdf6383f231f33bec0c /examples
parent	5504e35eb21e9e347f8a63d59acd2cc5e7e22478 (diff)
download	fastdom-4b07c0ffeb00f5c966867dda3145f05e23fb9257.zip fastdom-4b07c0ffeb00f5c966867dda3145f05e23fb9257.tar.gz fastdom-4b07c0ffeb00f5c966867dda3145f05e23fb9257.tar.bz2