Rework / improve examples.

petdoan · Apr 5, 2013 · 6fa6637 · 6fa6637
1 parent a667975
commit 6fa6637
Show file tree

Hide file tree

Showing 11 changed files with 3,735 additions and 87 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 .idea
 *.iml
 node_modules
+build
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -33,17 +33,6 @@ module.exports = function (grunt) {
           "lib/firepad.js"
         ],
         "dest": "build/firepad.js"
-      },
-      "firepad-userlistjs": {
-        options: {
-          banner: "var FirepadUserList = (function() {\n",
-          footer: "\nreturn firepad.UserList; })();"
-        },
-        "src": [
-          "lib/utils.js",
-          "lib/user-list.js"
-        ],
-        "dest": "build/extras/firepad-userlist.js"
       }
     },
     uglify: {
@@ -53,15 +42,23 @@ module.exports = function (grunt) {
       }
     },
     copy: {
-      all: {
+      css: {
         files: [
           {
             src: 'lib/firepad.css',
             dest: 'build/firepad.css'
+          }
+        ]
+      },
+      toExamples: {
+        files: [
+          {
+            src: 'build/firepad.js',
+            dest: 'examples/firepad.js'
           },
           {
-            src: 'lib/firepad-userlist.css',
-            dest: 'build/extras/firepad-userlist.css'
+            src: 'build/firepad.css',
+            dest: 'examples/firepad.css'
           }
         ]
       }

diff --git a/examples/all-examples.html b/examples/all-examples.html
@@ -0,0 +1,3 @@
+<a href="code.html">Code</a><br />
+<a href="richtext.html">Rich Text</a><br />
+<a href="userlist.html">User List</a><br />
diff --git a/examples/code.html b/examples/code.html
@@ -3,39 +3,56 @@
 
 <head>
   <meta charset="utf-8" />
+  <!-- Include Firebase -->
   <script src="https://cdn.firebase.com/v0/firebase.js"></script>
-
+
+  <!-- Include CodeMirror and its JavaScript mode file -->
   <script src="codemirror/lib/codemirror.js"></script>
   <script src="codemirror/mode/javascript/javascript.js"></script>
   <link rel="stylesheet" href="codemirror/lib/codemirror.css" />
-
-  <script src="../build/firepad.js"></script>
-  <link rel="stylesheet" href="../build/firepad.css" />
 
-  <script src="examples.js"></script>
+  <!-- Include Firepad -->
+  <script src="firepad.js"></script>
+  <link rel="stylesheet" href="firepad.css" />
+
+  <!-- Helper for generating URLs / Firebase references for example purposes. -->
+  <script src="helpers.js"></script>
+
+  <style>
+    html { height: 100%; }
+    body { margin: 0; height: 100%; position: relative; }
+    /* Height / width / positioning can be customized for your use case.
+       For demo purposes, we make firepad fill the entire browser. */
+    .firepad {
+      position: absolute; left: 0; top: 0; bottom: 0; right: 0; height: auto;
+    }
+  </style>
 </head>
 
 <body>
-  <div id="editor"></div>
+  <div id="firepad-container"></div>
 
   <script>
+    //// Initialize Firebase.
     // var ref = new Firebase('<YOUR FIREBASE URL>');
     var firepadRef = getExampleRef();
 
-    var codeMirror = CodeMirror(document.getElementById('editor'), {
+    //// Create CodeMirror (with line numbers and the JavaScript mode).
+    var codeMirror = CodeMirror(document.getElementById('firepad-container'), {
       lineNumbers: true,
       mode: 'javascript'
     });
     codeMirror.focus();
 
+    //// Create Firepad.
     var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror);
 
+    //// Initialize contents.
     firepad.on('ready', function() {
       if (firepad.isHistoryEmpty()) {
         firepad.setText('// Code Editing with Firepad!\nvar x = 3 + 4;\n');
       }
     });
-
   </script>
 </body>
 </html>
diff --git a/lib/firepad-userlist.css → examples/firepad-userlist.css b/lib/firepad-userlist.css → examples/firepad-userlist.css
diff --git a/lib/user-list.js → examples/firepad-userlist.js b/lib/user-list.js → examples/firepad-userlist.js
@@ -1,8 +1,4 @@
-var firepad = firepad || { };
-
-firepad.UserList = (function() {
-  var utils = firepad.utils;
-
+var FirepadUserList = (function() {
   function FirepadUserList(ref, place, userId) {
     if (!(this instanceof FirepadUserList)) { return new FirepadUserList(ref, place, userId); }
 
@@ -26,58 +22,58 @@ firepad.UserList = (function() {
   FirepadUserList.fromDiv = FirepadUserList;
 
   FirepadUserList.prototype.makeUserList_ = function() {
-    return utils.elt('div', [
+    return elt('div', [
       this.makeHeading_(),
-      utils.elt('div', [
+      elt('div', [
         this.makeUserEntryForSelf_(),
         this.makeUserEntriesForOthers_()
       ], {'class': 'firepad-userlist-users' })
     ], {'class': 'firepad-userlist' });
   };
 
   FirepadUserList.prototype.makeHeading_ = function() {
-    var counterSpan = utils.elt('span', '0');
+    var counterSpan = elt('span', '0');
     this.ref_.on('value', function(usersSnapshot) {
-      utils.setTextContent(counterSpan, "" + usersSnapshot.numChildren());
+      setTextContent(counterSpan, "" + usersSnapshot.numChildren());
     });
 
-    return utils.elt('div', [
-      utils.elt('span', 'ONLINE ('),
+    return elt('div', [
+      elt('span', 'ONLINE ('),
       counterSpan,
-      utils.elt('span', ')')
+      elt('span', ')')
     ], { 'class': 'firepad-userlist-heading' });
   };
 
   FirepadUserList.prototype.makeUserEntryForSelf_ = function() {
     var myUserRef = this.ref_.child(this.userId_);
 
-    var colorDiv = utils.elt('div', null, { 'class': 'firepad-userlist-color-indicator' });
+    var colorDiv = elt('div', null, { 'class': 'firepad-userlist-color-indicator' });
     myUserRef.child('color').on('value', function(colorSnapshot) {
       colorDiv.style.backgroundColor = colorSnapshot.val();
     });
 
-    var nameInput = utils.elt('input', null, { type: 'text', 'class': 'firepad-userlist-name-input'} );
+    var nameInput = elt('input', null, { type: 'text', 'class': 'firepad-userlist-name-input'} );
     nameInput.value = this.displayName_;
 
-    var nameHint = utils.elt('div', 'ENTER YOUR NAME', { 'class': 'firepad-userlist-name-hint'} );
+    var nameHint = elt('div', 'ENTER YOUR NAME', { 'class': 'firepad-userlist-name-hint'} );
 
     // Update Firebase when name changes.
-    utils.on(nameInput, 'change', function(e) {
+    on(nameInput, 'change', function(e) {
       var name = nameInput.value || "Guest " + Math.floor(Math.random() * 1000);
       myUserRef.child('name').onDisconnect().remove();
       myUserRef.child('name').set(name);
       nameHint.style.display = 'none';
-      utils.stopEvent(e);
+      stopEvent(e);
     });
 
-    var nameDiv = utils.elt('div', [nameInput, nameHint]);
+    var nameDiv = elt('div', [nameInput, nameHint]);
 
-    return utils.elt('div', [ colorDiv, nameDiv ], { 'class': 'firepad-userlist-user' });
+    return elt('div', [ colorDiv, nameDiv ], { 'class': 'firepad-userlist-user' });
   };
 
   FirepadUserList.prototype.makeUserEntriesForOthers_ = function() {
     var self = this;
-    var userList = utils.elt('div');
+    var userList = elt('div');
     var userId2Element = { };
 
     function updateChild(userSnapshot, prevChildName) {
@@ -88,12 +84,12 @@ firepad.UserList = (function() {
         delete userId2Element[userId];
       }
 
-      var colorDiv = utils.elt('div', null, { 'class': 'firepad-userlist-color-indicator' });
+      var colorDiv = elt('div', null, { 'class': 'firepad-userlist-color-indicator' });
       colorDiv.style.backgroundColor = userSnapshot.child('color').val();
 
-      var nameDiv = utils.elt('div', userSnapshot.child('name').val(), { 'class': 'firepad-userlist-name' });
+      var nameDiv = elt('div', userSnapshot.child('name').val(), { 'class': 'firepad-userlist-name' });
 
-      var userDiv = utils.elt('div', [ colorDiv, nameDiv ], { 'class': 'firepad-userlist-user' });
+      var userDiv = elt('div', [ colorDiv, nameDiv ], { 'class': 'firepad-userlist-user' });
       userId2Element[userId] = userDiv;
 
       if (userId === self.userId_) {
@@ -121,5 +117,61 @@ firepad.UserList = (function() {
     return userList;
   };
 
+  /** DOM helpers */
+  function elt(tag, content, attrs) {
+    var e = document.createElement(tag);
+    if (typeof content === "string") {
+      setTextContent(e, content);
+    } else if (content) {
+      for (var i = 0; i < content.length; ++i) { e.appendChild(content[i]); }
+    }
+    for(var attr in (attrs || { })) {
+      e.setAttribute(attr, attrs[attr]);
+    }
+    return e;
+  }
+
+  function setTextContent(e, str) {
+    e.innerHTML = "";
+    e.appendChild(document.createTextNode(str));
+  }
+
+  function on(emitter, type, f) {
+    if (emitter.addEventListener) {
+      emitter.addEventListener(type, f, false);
+    } else if (emitter.attachEvent) {
+      emitter.attachEvent("on" + type, f);
+    }
+  }
+
+  function off(emitter, type, f) {
+    if (emitter.removeEventListener) {
+      emitter.removeEventListener(type, f, false);
+    } else if (emitter.detachEvent) {
+      emitter.detachEvent("on" + type, f);
+    }
+  }
+
+  function preventDefault(e) {
+    if (e.preventDefault) {
+      e.preventDefault();
+    } else {
+      e.returnValue = false;
+    }
+  }
+
+  function stopPropagation(e) {
+    if (e.stopPropagation) {
+      e.stopPropagation();
+    } else {
+      e.cancelBubble = true;
+    }
+  }
+
+  function stopEvent(e) {
+    preventDefault(e);
+    stopPropagation(e);
+  }
+
   return FirepadUserList;
 })();