add a Team receiving widget

Gruntfile.js

@@ -63,10 +63,10 @@ module.exports = function(grunt) {
 
         copy: {
             main: {
-                cwd: 'lib/v1/blogger',
+                cwd: 'lib/v2/blogger',
                 expand: true,  // required for cwd
                 src: '**/*',
-                dest: 'www/v1/blogger/',
+                dest: 'www/v2/blogger/',
             },
         },
 

README.md

@@ -23,69 +23,49 @@ Development section below.
 
 ## Documentation
 
-For now ocumentation for widgets API is present in JSDoc comments,
+For now documentation for widgets API is present in JSDoc comments,
 but not generated into more readable format.
 
 Configuration options:
 - `window.grtpAPI` - Where to look for the grtp.co API
-  - defaults to `//grtp.co/v1/`
+  - defaults to `//grtp.co/v2/`
 - `window.gratipayURI` - Where to look for Gratipay
   - defaults to `https://gratipay.com/`
 
 
 ## Examples
 
-In the following examples, just switch out `rummik` with your Gratipay username.
+In the following examples, just switch out `my-team` with your Gratipay Team slug.
 
 ### Standard Widgets
-![](https://cloud.githubusercontent.com/assets/134455/4095888/3e6d7758-2fba-11e4-935f-14e30c32ac1e.png)
+![](https://cloud.githubusercontent.com/assets/3729038/16357975/9584b358-3acb-11e6-821c-ece9d855dca1.png)
 ```html
-<script data-gratipay-username="rummik"
-  src="//grtp.co/v1.js" async></script>
-```
-
-![](https://cloud.githubusercontent.com/assets/134455/4095889/3fb3b5f0-2fba-11e4-8adb-250a0dc4e9cf.png)
-```html
-<script data-gratipay-username="rummik"
-  data-gratipay-widget="button"
-  src="//grtp.co/v1.js" async></script>
-```
-
-![](https://cloud.githubusercontent.com/assets/134455/4095908/997bc05a-2fba-11e4-99cb-56ad9cbad392.png)
-```html
-<script data-gratipay-username="rummik"
-  data-gratipay-widget="giving"
-  src="//grtp.co/v1.js" async></script>
+<script data-gratipay-teamslug="my-team"
+  src="//grtp.co/v2.js" async></script>
 ```
 
 ### Custom Widgets
 You can create your own widgets by adding `data-gratipay-widget="custom"` to your
 widget's HTML, and the following classes:
 
 - Text
+  - `gratipay-teamslug` - the Team's slug
   - `gratipay-receiving` - dollar-sign prefixed value of `receiving`
-  - `gratipay-username` - the user's username
-  - `gratipay-goal` - dollar-sign prefixed value of `goal`
-  - `gratipay-giving` - dollar-sign prefixed value of `giving`
-  - `gratipay-identity` - `I` if `number` is `singular`, `We` if `number` is
-    `plural`
 - Links
-  - `gratipay-profile-link` - sets the `href` attribute to the user's profile
+  - `gratipay-profile-link` - sets the `href` attribute to the Team's profile
     link
   - `gratipay-link` - sets the `href` attribute to https://gratipay.com/
 - Misc styling
-  - `gratipay-goal-progress-bar` - sets the element's width to a percentage value
-    of the user's goal progress
 
 
 ```html
-<div data-gratipay-username="rummik" data-gratipay-widget="custom">
+<div data-gratipay-teamslug="my-team" data-gratipay-widget="custom">
   I receive <a class="gratipay-profile-link">
     <span class="gratipay-receiving">$0.00</span> / wk
   </a>
   on <a class="gratipay-link">Gratipay</a>.
 </div>
-<script src="//grtp.co/v1.js"></script>
+<script src="//grtp.co/v2.js"></script>
 ```
 
 
@@ -96,7 +76,7 @@ widget's HTML, and the following classes:
 <img src="http://img.shields.io/gratipay/Gratipay.svg">
 ```
 
-[Google Gadget](lib/v1/blogger) for Blogger.
+[Google Gadget](lib/v2/blogger) for Blogger.
 
 
 ## Development

lib/v2.js

@@ -0,0 +1,50 @@
+/**
+ * Gratipay widget main initialization.
+ *
+ * Initializes widgets and pulls in the Widgets API if it isn't already loaded
+ */
+(function() {
+    'use strict';
+
+    // Short wrapper around document.querySelectorAll()
+    function $(selector) {
+        return document.querySelectorAll(selector);
+    }
+
+    // Slurp up widgets (identified by having the `data-gratipay-username` property)
+    var elements = $('[data-gratipay-teamslug]');
+
+    // Cache length
+    var length = elements.length;
+
+    // Grab window.Gratipay if available
+    var Gratipay = window.Gratipay || {};
+
+    // Where's our files?
+    var api = window.grtpAPI || 'https://grtp.co/v2/';
+
+    window._grtp = window._grtp || [];
+
+    // Load widget API if it hasn't been
+    if (!Gratipay.widgets && !$('script[src="' + api + 'api.js"]').length) {
+        var grtp = document.createElement('script');
+        grtp.src = api + 'api.js';
+        $('head')[0].appendChild(grtp);
+    }
+
+    // Load widgets
+    for (var i=0; i<length; i++) {
+        var element = elements[i];
+
+        // Ignore widgets with the `data-gratipay-readystatus` property
+        if (!element.getAttribute('data-gratipay-readystatus')) {
+            if (Gratipay.widgets) {
+                Gratipay.widgets.load(element);
+            } else {
+                _grtp.push(element);
+            }
+
+            element.setAttribute('data-gratipay-readystatus', 'loading');
+        }
+    }
+})();