completed demo

geelen · geelen · commit b1d33e04c272 · 2015-01-07T17:51:23.000+11:00
diff --git a/build.js b/build.js
diff --git a/build.js.map b/build.js.map
diff --git a/config.js b/config.js
@@ -0,0 +1,49 @@
+System.config({
+  "paths": {
+    "*": "*.js",
+    "app/*": "lib/*.js",
+    "github:*": "jspm_packages/github/*.js",
+    "npm:*": "jspm_packages/npm/*.js"
+  }
+});
+
+System.config({
+  "map": {
+    "jsonp": "npm:jsonp@0.1.0",
+    "github:jspm/nodelibs-fs@0.1.0": {
+      "assert": "npm:assert@1.3.0",
+      "fs": "github:jspm/nodelibs-fs@0.1.0"
+    },
+    "github:jspm/nodelibs-process@0.1.0": {
+      "process": "npm:process@0.10.0"
+    },
+    "github:jspm/nodelibs-tty@0.1.0": {
+      "tty-browserify": "npm:tty-browserify@0.0.0"
+    },
+    "github:jspm/nodelibs-util@0.1.0": {
+      "util": "npm:util@0.10.3"
+    },
+    "npm:assert@1.3.0": {
+      "util": "npm:util@0.10.3"
+    },
+    "npm:debug@2.1.1": {
+      "fs": "github:jspm/nodelibs-fs@0.1.0",
+      "ms": "npm:ms@0.6.2",
+      "net": "github:jspm/nodelibs-net@0.1.0",
+      "process": "github:jspm/nodelibs-process@0.1.0",
+      "tty": "github:jspm/nodelibs-tty@0.1.0",
+      "util": "github:jspm/nodelibs-util@0.1.0"
+    },
+    "npm:inherits@2.0.1": {
+      "util": "github:jspm/nodelibs-util@0.1.0"
+    },
+    "npm:jsonp@0.1.0": {
+      "debug": "npm:debug@2.1.1"
+    },
+    "npm:util@0.10.3": {
+      "inherits": "npm:inherits@2.0.1",
+      "process": "github:jspm/nodelibs-process@0.1.0"
+    }
+  }
+});
+
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>LoopGIFs</title>
+    <style>
+      body {
+        margin: 0;
+      }
+      #gifs > img {
+        display: block;
+        float: left;
+        width: 50vw;
+        height: 50vh;
+        object-fit: cover;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="gifs">
+      <h1>GIFS GO HERE!!</h1>
+    </div>
+
+    <!--<script src="jspm_packages/system.js"></script>-->
+    <!--<script src="config.js"></script>-->
+    <!--<script>-->
+      <!--System.import('lib/main')-->
+    <!--</script>-->
+    <script src="jspm_packages/traceur-runtime.js"></script>
+    <script src="build.js"></script>
+  </body>
+</html>
diff --git a/lib/display-gifs.js b/lib/display-gifs.js
@@ -0,0 +1,4 @@
+export default (urls) => {
+  var elem = document.querySelector('#gifs')
+  elem.innerHTML = urls.map(url => `<img src="${url}">`).join("\n")
+}
diff --git a/lib/extract-gifs.js b/lib/extract-gifs.js
@@ -0,0 +1,7 @@
+export default (posts) => {
+  return posts
+    .filter(post => !post.data.over_18)
+    .map(post => post.data.url)
+    .filter(url => /gifv?$/.exec(url))
+    .map(url => url.replace(/v$/,''))
+}
diff --git a/lib/main.js b/lib/main.js
@@ -0,0 +1,9 @@
+import RedditApi from './reddit-api'
+import ExtractGifs from './extract-gifs'
+import DisplayGifs from './display-gifs'
+
+RedditApi.load()
+  .then(ExtractGifs)
+  .then(DisplayGifs)
+
+export default {}
diff --git a/lib/reddit-api.js b/lib/reddit-api.js
@@ -0,0 +1,17 @@
+import jsonp from 'jsonp'
+
+class RedditApi {
+  constructor() {
+    this.redditURL = "http://www.reddit.com/r/perfectloops/top.json?sort=top&t=week"
+  }
+
+  load() {
+    return new Promise((resolve, reject) => {
+      jsonp(this.redditURL, {param: 'jsonp'}, (err, data) => {
+        err ? reject(err) : resolve(data.data.children)
+      })
+    })
+  }
+}
+
+export default new RedditApi()
diff --git a/package.json b/package.json

-Original file line number
+Diff line change
 +System.config({
 +  "paths": {
 +    "*": "*.js",
 +    "app/*": "lib/*.js",
 +    "github:*": "jspm_packages/github/*.js",
 +    "npm:*": "jspm_packages/npm/*.js"
 +  }
 +});
++
 +System.config({
 +  "map": {
 +    "jsonp": "npm:[email protected]",
 +    "github:jspm/[email protected]": {
 +      "assert": "npm:[email protected]",
 +      "fs": "github:jspm/[email protected]"
 +    },
 +    "github:jspm/[email protected]": {
 +      "process": "npm:[email protected]"
 +    },
 +    "github:jspm/[email protected]": {
 +      "tty-browserify": "npm:[email protected]"
 +    },
 +    "github:jspm/[email protected]": {
 +      "util": "npm:[email protected]"
 +    },
 +    "npm:[email protected]": {
 +      "util": "npm:[email protected]"
 +    },
 +    "npm:[email protected]": {
 +      "fs": "github:jspm/[email protected]",
 +      "ms": "npm:[email protected]",
 +      "net": "github:jspm/[email protected]",
 +      "process": "github:jspm/[email protected]",
 +      "tty": "github:jspm/[email protected]",
 +      "util": "github:jspm/[email protected]"
 +    },
 +    "npm:[email protected]": {
 +      "util": "github:jspm/[email protected]"
 +    },
 +    "npm:[email protected]": {
 +      "debug": "npm:[email protected]"
 +    },
 +    "npm:[email protected]": {
 +      "inherits": "npm:[email protected]",
 +      "process": "github:jspm/[email protected]"
 +    }
 +  }
 +});
++