diff --git a/Gruntfile.js b/Gruntfile.js index 63773c0..95692b4 100644 --- a/Gruntfile.js +++ b/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/', }, }, diff --git a/README.md b/README.md index 6226fe8..0b0272e 100644 --- a/README.md +++ b/README.md @@ -23,39 +23,25 @@ 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 - -``` - -![](https://cloud.githubusercontent.com/assets/134455/4095889/3fb3b5f0-2fba-11e4-8adb-250a0dc4e9cf.png) -```html - -``` - -![](https://cloud.githubusercontent.com/assets/134455/4095908/997bc05a-2fba-11e4-99cb-56ad9cbad392.png) -```html - + ``` ### Custom Widgets @@ -63,29 +49,23 @@ You can create your own widgets by adding `data-gratipay-widget="custom"` to you 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 -
+
I receive $0.00 / wk on Gratipay.
- + ``` @@ -96,7 +76,7 @@ widget's HTML, and the following classes: ``` -[Google Gadget](lib/v1/blogger) for Blogger. +[Google Gadget](lib/v2/blogger) for Blogger. ## Development diff --git a/lib/v2.js b/lib/v2.js new file mode 100644 index 0000000..6d85f52 --- /dev/null +++ b/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 0 ? data.my_tip : 'Gratipay')); // jshint ignore:line + link('profile-link', gratipayURI + encodeURIComponent(data.slug) + '/'); + link('link', gratipayURI); + + if (typeof cb == 'function') { + cb(data); + } + }); + }, + + /** + * Get the HTML for a widget + * + * @param {String} widget Widget name + * @param {Function} cb(widget) Callback with widget element + */ + getWidget: function(widget, cb) { + _.get(api + 'widgets/' + widget + '.html', function(data) { + // Fix for automatic scheme detection within injected