Merge pull request #5 from LearnBoost/add/example

Fix profile route
webmodules · Sep 3, 2013 · 2e76fd3 · 2e76fd3
2 parents fd9deab + a5d8c0e
commit 2e76fd3
Show file tree

Hide file tree

Showing 11 changed files with 217 additions and 10 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,5 @@
+build/
+components/
 node_modules
+test/build
+test/components
diff --git a/History.md b/History.md
@@ -1,4 +1,15 @@
 
+1.0.6 / 2013-09-02
+==================
+
+  * Add testing exmaple
+  * Fix #profile method bug
+
+1.0.5 / 2013-08-30
+==================
+
+  * Fix component dependency
+
 1.0.4 / 2013-01-15
 ==================
 

diff --git a/Makefile b/Makefile
@@ -0,0 +1,5 @@
+
+test:
+	cd test && make
+
+.PHONY: test
diff --git a/Readme.md b/Readme.md
@@ -36,6 +36,11 @@ Looks up a profile
 
 Shortcut that calls `.profile` to get a username from an email.
 
+## Test
+
+* Build example component doing `make`
+* Open `test/index.html` file
+
 ## License
 
   MIT
diff --git a/component.json b/component.json
@@ -2,7 +2,7 @@
   "name": "gravatar",
   "repo": "learnboost/gravatar-component",
   "description": "Simple browser implementation of the Gravatar API",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "dependencies": {
     "enyo/md5": "*",
     "learnboost/jsonp": "0.0.2",

diff --git a/gravatar.js b/gravatar.js
@@ -2,24 +2,26 @@
  * Module dependencies.
  */
 
-var md5 = require('md5')
-  , jsonp = require('jsonp')
-  , querystring = require('querystring');
+var md5 = require('md5');
+var jsonp = require('jsonp');
+var querystring = require('querystring');
 
 /**
  * Creates an avatar url
  *
  * @param {String} email
  * @param {Number} size (20)
+ * @param {Boolean} avatar get url to get avatar image (defautl false)
  * @return {String} gravatar url
  * @api public
  */
 
-exports.url = function (email, config) {
+exports.url = function (email, config, avatar) {
   config = config || {};
-  var qs = querystring.stringify(config)
-    , qs = qs === "" ? "" : "?" + qs
-    , url = 'https://secure.gravatar.com/avatar/' + md5(email) + qs;
+  var qs = querystring.stringify(config);
+  var qs = qs === '' ? '' : '?' + qs;
+  var avatar = avatar ? 'avatar/' : '';
+  var url = 'https://secure.gravatar.com/' + avatar + md5(email) + qs;
   return url;
 };
 
@@ -35,7 +37,7 @@ exports.url = function (email, config) {
 exports.img = function (email, config) {
   config = config || {};
   var size = config.s || config.size;
-  var url = exports.url(email, config);
+  var url = exports.url(email, config, true);
   var el = document.createElement('img');
   el.setAttribute('src', url);
   if (size) {
@@ -56,6 +58,7 @@ exports.img = function (email, config) {
 
 exports.profile = function (email, fn) {
   var url = exports.url(email);
+
   jsonp(url + '.json', function (err, obj) {
     if (err) return fn(err);
     if (obj && obj.entry) {

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gravatar-component",
   "description": "Simple browser implementation of the Gravatar API",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "dependencies": {
     "md5-component": "0.0.1",
     "jsonp": "0.0.1",

diff --git a/test/Makefile b/test/Makefile
@@ -0,0 +1,16 @@
+
+build: index.js components
+	@component build
+
+components:
+	@component install
+
+clean:
+	rm -fr build components
+
+all:
+	clear
+	make clean
+	make build
+
+.PHONY: clean
diff --git a/test/component.json b/test/component.json
@@ -0,0 +1,11 @@
+{
+  "name": "gravatar-test",
+  "repo": "learnboost/gravatar-test",
+  "description": "Component Gravatar Testing",
+  "version": "0.1.0",
+  "dependencies": {
+    "component/jquery": "*",
+    "learnboost/gravatar-component": "1.0.6"
+  },
+  "scripts": ["index.js"]
+}
diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE 5>
+<html>
+  <head>
+    <title>Gravatar component</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <style>
+      body {
+        font-family: tahoma;
+        color: #333;
+      }
+
+      input {
+        height: 30px;
+        line-height: 20px;
+        min-width: 300px;
+        border: 1px solid #aaa;
+        padding: 5px;
+      }
+
+      label {
+        width: 80px;
+        text-align: right;
+        margin-right: 20px;
+        display: inline-block;
+      }
+
+      body.loading input {
+        opacity: 0.3;
+      }
+
+      .profile-placeholder,
+      .image-placeholder {
+        display: inline-block;
+        vertical-align: top;
+        background-color: #f2f2f2;
+        width: 400px;
+        height: 400px;
+        border: 1px solid #eee;
+        padding: 10px;
+        margin: 10px;
+        font-size: 12px;
+      }
+
+      .profile-placeholder strong {
+        width: 320px;
+        display: inline-block;
+        vertical-align: top;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      body.loading .image-placeholder img {
+        display: none;
+      }
+
+    </style>
+  </head>
+  <body>
+    <h2>Gravatar component</h2>
+    <script src="build/build.js"></script>
+
+    <p>
+      <label>Email: </label>
+      <input name="email" type="email" value="a@gmail.com" />
+    </p>
+
+    <p>
+      <label>Size: </label>
+      <input name="size" type="number" value="400" />
+    </p>
+
+    <div class="blocks">
+      <div class="image-placeholder"><img scr="#" /></div>
+      <div class="profile-placeholder"></div>
+    </div>
+
+    <script>
+      require('gravatar-test');
+    </script>
+  </body>
+</html> 
diff --git a/test/index.js b/test/index.js
@@ -0,0 +1,70 @@
+
+/**
+ * Load Components
+ */
+
+var o = require('jquery');
+var Grt = require('gravatar');
+
+/**
+ * DOM elements
+ */
+
+var body = o('body');
+var img_ph = o('.image-placeholder');
+var profile_ph = o('.profile-placeholder');
+var email = o('input[name=email]').focus();
+var size = o('input[name=size]');
+var img;
+
+/**
+ * Print the gratar image appending
+ * an img element
+ *
+ * @param {String} email
+ * @param {Number} s
+ * @api private
+ */
+
+function printAvatar(email, s){
+  if (img) img.remove();
+  body.addClass('loading');
+
+  img = o(Grt.img(email, { s: s || 100 }))
+  .appendTo(img_ph)
+  .on('load', function(){
+    body.removeClass('loading');
+  });
+
+  profile_ph.empty();
+  var profile = Grt.profile(email, function(err, data){
+    var prts = [
+      'displayName',
+      'profileUrl',
+      'id',
+      'hash',
+      'requestHash',
+      'thumbnailUrl'
+    ];
+
+    for (var i = 0; i < prts.length; i++) {
+      if (data[prts[i]]) {
+        profile_ph.append(o('<p>').append(
+          o('<span>', { text: prts[i] + ': ' }),
+          o('<strong>', { text: data[prts[i]] })
+        ));
+      }
+    }
+  });
+}
+
+// input keypress event
+
+o('input')
+.on('keypress', function(e){
+  if (body.hasClass('loading')) return;
+  if (e.keyCode == 13) printAvatar(email.val(), size.val());
+});
+
+// get initial avatar
+printAvatar('a@gmail.com', 400);