use handlebars for templating

author: Feross Aboukhadijeh <feross@feross.org> 2014-02-23 04:20:50 +0400
committer: Feross Aboukhadijeh <feross@feross.org> 2014-02-23 04:20:50 +0400
commit: 0b3be2cb0f2396c8235baa38879d7cb8e56acfe0 (patch)
tree: cf06244938a9437e6c022b2ae7304744dbe1f225
parent: 458033ae44d218588f6d20b6ef45800055995fb4 (diff)
6 files changed, 73 insertions, 55 deletions
diff --git a/.gitignore b/.gitignore
index 425d806..3d81609 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 chrome/bundle.js
 chrome/font-awesome
 chrome/main.css
-node_modules/
-\ No newline at end of file
+node_modules/
+views/compiled.js
+\ No newline at end of file
diff --git a/chrome/app.html b/chrome/app.html
index 7bd446a..fc85649 100644
--- a/chrome/app.html
+++ b/chrome/app.html
@@ -5,56 +5,44 @@
     <link rel="stylesheet" href="main.css">
     <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
   </head>
-  <body>
-
-  <header>
-    <div class="system">
-      <i class="close fa fa-times-circle fa-lg"></i>
-      <i class="minimize fa fa-minus-circle fa-lg"></i>
-      <i class="maximize fa fa-plus-circle fa-lg"></i>
-      <i class="close fa fa-circle fa-lg"></i>
-      <i class="minimize fa fa-circle fa-lg"></i>
-      <i class="maximize fa fa-circle fa-lg"></i>
-    </div>
-    <div class="title">WebTorrent</div>
-    <div class="buttons"></div>
-  </header>
-  <div class="overallStats">
-    <!-- TODO: heart should be colored red -> green based on ratio -->
-    <span class="ratio"><i class="fa fa-heart fa-lg"></i>Ratio: <span>0.10</span></span>
-    <span class="upload"><i class="fa fa-arrow-up fa-lg"></i><span>0.0 KB/s</span></span>
-    <span class="download"><i class="fa fa-arrow-down fa-lg"></i><span>0.0 KB/s</span></span>
-  </div>
-
-  <main>
-    <section class="torrent" id="torrent_XXX">
-      <div class="image">
-        <img src="img/folder.png">
-      </div>
-      <div class="info">
-        <div class="title">Leaves of Grass by Walt Whitman</div>
-        <div class="stats">362 KB, uploaded 0 KB (Ratio: 0.00)</div>
-        <progress max="100" value="70"></progress>
-        <div class="stats2">Seeding to 0 of 0 peers - UL: 0.0 KB/s</div>
+  <body id="app">
+    <header>
+      <div class="system">
+        <i class="close fa fa-times-circle fa-lg"></i>
+        <i class="minimize fa fa-minus-circle fa-lg"></i>
+        <i class="maximize fa fa-plus-circle fa-lg"></i>
+        <i class="close fa fa-circle fa-lg"></i>
+        <i class="minimize fa fa-circle fa-lg"></i>
+        <i class="maximize fa fa-circle fa-lg"></i>
       </div>
-    </section>
-    <section class="torrent" id="torrent_XXX">
-      <div class="image">
-        <img src="img/folder.png">
+      <div class="title">WebTorrent</div>
+      <div class="buttons">
+        <form id="addTorrent">
+          <input
+            autofocus
+            autocomplete="off"
+            placeholder="enter magnet uri"
+            value="magnet:?xt=urn:btih:d2474e86c95b19b8bcfdb92bc12c9d44667cfa36&amp;dn=Leaves+of+Grass+by+Walt+Whitman.epub"
+          >
+          <button type="submit">Add</button>
+        </form>
       </div>
-      <div class="info">
-        <div class="title">Leaves of Grass by Walt Whitman</div>
-        <div class="stats">362 KB, uploaded 0 KB (Ratio: 0.00)</div>
-        <progress max="100" value="10"></progress>
-        <div class="stats2">Seeding to 0 of 0 peers - UL: 0.0 KB/s</div>
-      </div>
-    </section>
-  </main>
+    </header>
+    <div class="overallStats">
+      <!-- TODO: heart should be colored red -> green based on ratio -->
+      <span class="ratio"><i class="fa fa-heart fa-lg"></i>Ratio: {{ ratio }}</span>
+      <span class="upload"><i class="fa fa-arrow-up fa-lg"></i><span>0.0 KB/s</span></span>
+      <span class="download"><i class="fa fa-arrow-down fa-lg"></i><span>0.0 KB/s</span></span>
+    </div>
+
+    <main id="torrents">
+
+    </main>
 
-  <footer>
-    <span class="numTransfers">1 transfer</span>
-    <span class="issue"><a href="https://github.com/feross/webtorrent/issues/new" target="_blank"><i class="fa fa-github fa-lg"></i>Report an issue</a></span>
-  </footer>
+    <footer>
+      <span class="numTransfers">1 transfer</span>
+      <span class="issue"><a href="https://github.com/feross/webtorrent/issues/new" target="_blank"><i class="fa fa-github fa-lg"></i>Report an issue</a></span>
+    </footer>
 
 <!--     <h3>Torrent Info</h4>
     <ul>
diff --git a/css/main.styl b/css/main.styl
index ad7e531..9da31ac 100644
--- a/css/main.styl
+++ b/css/main.styl
@@ -7,7 +7,7 @@
 FONT_COLOR = #444
 LIGHT_FONT_COLOR = #777
 
-a
+a, input, button
   -webkit-app-region: no-drag !important
   color: FONT_COLOR
 
@@ -59,6 +59,9 @@ header
     top: 3px
     z-index: 10
 
+  .buttons
+    padding-top: 30px
+
 toolbar()
   background: linear-gradient(top, 20% #D0D0D0, #A2A2A2)
   border-top: 1px solid #666
diff --git a/index.js b/index.js
index 179f822..afed7e1 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,8 @@
+// Load pre-compiled handlebars templates and put them on require('handlebars').templates
+if (!require('handlebars').templates) {
+  require('./views/compiled')
+}
+
 var App = require('./lib/app')
 var TorrentManager = require('./lib/torrent-manager')
 
diff --git a/package.json b/package.json
index 95b5d9a..8d9c318 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "stylus": "~0.42.2"
   },
   "devDependencies": {
+    "handlebars": "^2.0.0-alpha.1",
     "tape": "2.x",
     "watchify": "0.x"
   },
@@ -62,13 +63,15 @@
     "url": "git://github.com/feross/webtorrent.git"
   },
   "scripts": {
-    "build-css": "stylus -u nib css/main.styl -o chrome/ -c && ./bin/post-build.js",
+    "build": "npm run build-html && npm run build-css && npm run build-js",
+    "build-css": "stylus --use nib css/main.styl --out chrome/ --compile && ./bin/post-build.js",
+    "build-html": "handlebars views --commonjs handlebars --extension html --output views/compiled.js",
     "build-js": "browserify --debug index.js > chrome/bundle.js",
-    "build": "npm run build-js && npm run build-css",
-    "watch-css": "stylus -u nib css/main.styl -o chrome/ -w",
-    "watch-js": "watchify index.js -o chrome/bundle.js -dv",
-    "watch": "npm run watch-js & npm run watch-css",
     "start": "npm run build && ./bin/start.js",
-    "test": "tape test/*.js"
+    "test": "tape test/*.js",
+    "watch": "npm run watch-js & npm run watch-css & npm run watch-html",
+    "watch-css": "stylus --use nib css/main.styl --out chrome/ --watch",
+    "watch-html": "nodemon --watch views --ext html --exec \"npm run build-html\"",
+    "watch-js": "watchify index.js -o chrome/bundle.js --debug --verbose"
   }
 }
 \ No newline at end of file
diff --git a/views/torrent.html b/views/torrent.html
new file mode 100644
index 0000000..417f897
--- /dev/null
+++ b/views/torrent.html
@@ -0,0 +1,18 @@
+<section class="torrent" id="torrentXX">
+  <!--
+    <div v-show="!metadata">
+      Getting metadata from peers...
+    </div>
+  -->
+  <div class="image">
+    <img src="img/folder.png">
+  </div>
+  <div class="info">
+    <div class="title">{{ title }}</div>
+    <div class="stats">
+        {{humanizeFilesize swarm.downloaded }}, uploaded {{humanizeFilesize swarm.uploaded }} (Ratio: {{ swarm.ratio }})
+    </div>
+    <progress max="100" value="70"></progress>
+    <div class="stats2">Seeding to 0 of 0 peers - UL: 0.0 KB/s</div>
+  </div>
+</section>
+\ No newline at end of file
author	Feross Aboukhadijeh <feross@feross.org>	2014-02-23 04:20:50 +0400
committer	Feross Aboukhadijeh <feross@feross.org>	2014-02-23 04:20:50 +0400
commit	0b3be2cb0f2396c8235baa38879d7cb8e56acfe0 (patch)
tree	cf06244938a9437e6c022b2ae7304744dbe1f225
parent	458033ae44d218588f6d20b6ef45800055995fb4 (diff)