Permalink
Browse files

open multiple windows and iframes

  • Loading branch information...
1 parent d635148 commit 84c97b05ea60eb3a041b1b324d25540132e45350 @coolaj86 committed Mar 3, 2012
Showing with 2,347 additions and 1 deletion.
  1. +28 −0 README.md
  2. +1 −0 build.sh
  3. +3 −1 index.jade
  4. +25 −0 index.js
  5. +1 −0 inner.jade
  6. +5 −0 lib/index.js
  7. +23 −0 package.json
  8. +2,261 −0 pakmanaged.js
View
@@ -83,3 +83,31 @@ The examples have really crummy javascript examples. Rewrite!
All events updated to use `addEventListener`
Awesome. Not broken yet.
+
+Stage 4
+===
+
+Now I want to see interaction, so I need a DOM library and a form to send messages.
+
+ 0. Install pakmanager
+
+ npm install pakmanager
+
+ 0. Create a package
+
+ # just added a console.log (so that the file isn't empty), will convert main index.js later
+ touch lib/index.js
+ npm init
+ # edit package.json to add `domReady`, `bean` (events), `bonzo` (DOM manipulations), and `qwery` (css selection)
+ # add "main" as "lib/index" and "lib" as "lib"
+
+ 0. Add script tags for `pakmanaged.js` in `index.jade` and `inner.jade`
+
+ These tags must come first so that the latter files have access
+
+ 0. Modify build script
+
+ # add at end of build.sh
+ pakmanager build
+
+ 0. Added button and event handlers to open new iFrames or windows for inner.html instances
View
@@ -1,2 +1,3 @@
rm *.html
jade *.jade
+pakmanager build
View
@@ -4,5 +4,7 @@ html
title Shared workers: demo 3
pre#log.
\nLog:
+ button.js-add-iframe Add iFrame
+ button.js-add-window Add Window
+ script(src='pakmanaged.js')
script(src='index.js')
- iframe(src='inner.html')
View
@@ -3,6 +3,9 @@
var worker = new SharedWorker('shared-worker.js')
, log = document.getElementById('log')
+ , $ = require('ender')
+ , window = require('window')
+ , addWindow
;
worker.port.addEventListener('message', function (e) {
@@ -11,4 +14,26 @@
worker.port.start();
worker.port.postMessage('ping');
+
+ function addIframe() {
+ console.log('adding another iframe');
+ $('body').append($("<iframe src='inner.html'>"));
+ }
+
+ addWindow = (function () {
+ var count = 0
+ ;
+
+ return function () {
+ window.open('inner.html', 'win' + count);
+ count += 1;
+ }
+ }());
+
+ function attachHandlers() {
+ $('body').delegate('.js-add-iframe', 'click', addIframe);
+ $('body').delegate('.js-add-window', 'click', addWindow);
+ }
+
+ $.domReady(attachHandlers);
}());
View
@@ -4,4 +4,5 @@ html
title Shared workers: demo 3 inner frame
pre#log.
\nInner log:
+ script(src='pakmanaged.js')
script(src='inner.js')
View
@@ -0,0 +1,5 @@
+(function () {
+ "use strict";
+
+ console.log('Welcome to Shared Worker Example');
+}());
View
@@ -0,0 +1,23 @@
+{
+ "author": "AJ ONeal <coolaj86@gmail.com> (http://coolaj86.info/)",
+ "name": "shared-workers-example",
+ "description": "A working example of shared web-workers",
+ "version": "0.3.0",
+ "repository": {
+ "url": ""
+ },
+ "engines": {
+ "node": "*"
+ },
+ "main": "lib/index",
+ "lib": "lib",
+ "browserDependencies": {
+ "domready": "0.2.x",
+ "bonzo": "1.x",
+ "qwery": "3.x",
+ "bean": "0.4.x"
+ },
+ "dependencies": {},
+ "devDependencies": {},
+ "optionalDependencies": {}
+}
Oops, something went wrong.

0 comments on commit 84c97b0

Please sign in to comment.