mozillascience · janhohner · Nov 30, 2015 · Dec 1, 2015 · Dec 1, 2015 · Dec 1, 2015
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,9 @@
 .env
+env.docker
 node_modules/
 npm-debug.log
 npm-debug.log.*
 public/js/
+
+.DS_Store
+.idea
diff --git a/README.md b/README.md
@@ -18,44 +18,25 @@ The PaperBadger widget enables *anyone*, from publishers to individual researche
     `<div class="my-container"></div>`
 
 2. Above the closing `<body>` tag, add
-
   ```html
-      <script type="text/javascript">
-         var script = document.createElement("script");
-         script.type = "text/javascript";
-         script.src = "https://badges.mozillascience.org/widgets/paper-badger-widget.js";
-         document.write(decodeURIComponent("%3Cscript src='https://badges.mozillascience.org/widgets/paper-badger-widget.js' type='text/javascript'%3E%3C/script%3E"));
+      <script>
+        (function () {
+          var d=document,g=d.createElement("script");g.type="text/javascript";g.async=!0;g.defer=!0;
+          g.src="https://badges.mozillascience.org/widgets/paper-badger-widget.js";g.onload=load;d.body.appendChild(g);
+
+          function load() {
+            new PaperBadgerWidget({
+              DOI: "10.1186/2047-217X-3-18",
+              containerClass: "my-container"
+            });
+          }
+        })();
       </script>
   ```
 
-3. In your scripts, include your custom values:
-  * the class name where your widget will appear for the `container-class` key and
-  * the doi for the paper you are interested in as the `article-doi` key
-
-```html
-    <!DOCTYPE html>
-
-    <html>
-    <head>
-    <title>Paper view snippet example | Paper Badger</title>
-    </head>
-    <body>
-
-    <div class="my-container"></div>
-
-    <script type="text/javascript">
-       var script = document.createElement("script");
-       script.type = "text/javascript";
-       script.src = "https://badges.mozillascience.org/widgets/paper-badger-widget.js";
-       document.write(decodeURIComponent("%3Cscript src='https://badges.mozillascience.org/widgets/paper-badger-widget.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script>
-        var conf={"article-doi": "10.1186/2047-217X-3-18", "container-class": "my-container"};
-        showBadges(conf);
-    </script>
-    </body>
-    </html>
-```
+3. In the load method, include your custom values:
+  * the element class where your widget will appear for the `containerClass` key and
+  * either the doi for the paper you are interested in as the `DOI` key or the ORCID for the author you are interesed in as the `ORCID` key
 
 ## Contributing
 

diff --git a/docs/paper-badger-widget.md b/docs/paper-badger-widget.md
@@ -0,0 +1,44 @@
+# Paper Badger Widget Documentation
+This shows what the Paper Badger Widget can do and how to use it.
+
+## Usage
+1. To use the widget on your own site, include a `<div>` with your custom class in your view file, for example:
+    `<div class="my-container"></div>`
+
+2. Above the closing `<body>` tag, add
+  ```html
+      <script>
+        (function () {
+          var d=document,g=d.createElement("script");g.type="text/javascript";g.async=!0;g.defer=!0;
+          g.src="https://badges.mozillascience.org/widgets/paper-badger-widget.js";g.onload=load;d.body.appendChild(g);
+
+          function load() {
+            new PaperBadgerWidget({
+              DOI: "10.1186/2047-217X-3-18",
+              containerClass: "my-container"
+            });
+          }
+        })();
+      </script>
+  ```
+
+3. In the load method, include your custom values:
+  * the element class where your widget will appear for the `containerClass` key and
+  * either the doi for the paper you are interested in as the `DOI` key or the ORCID for the author you are interesed in as the `ORCID` key
+
+## Required configuration options
+  * the `containerClass` key: contains the class of the element which will contain the Paper Badger widget
+  * either the `DOI` or the `ORCID` key: defines which information the widget will display
+
+## Optional configuration options
+  * the `loaderText` key: changes the default text shown while the Paper Badger widget is loading
+  * the `removeClass` key: the widget will remove this class from all elements once it has loaded, if this is a non-empty string
+  * the `clickCallback` key: a method that gets called when a link under a badge gets clicked. The method is called with an object containing either the DOI or ORCID of the link and the badge taxonomy:
+
+    ```
+        {
+            doi: '10.1186/2047-217X-3-18', // either DOI
+            orcid: '0000-0001-5207-5061', // or ORCID
+            taxonomy: 'data_curation'
+        }
+    ```
diff --git a/package.json b/package.json
@@ -9,10 +9,10 @@
     "watch:js": "npm run build:js -- --watch",
     "clean": "rm -r public/js/*",
     "server": "node src/index.js",
-    "jscs": "jscs -c node_modules/mofo-style/linters/.jscsrc src test webpack.config.js",
-    "jshint": "jshint -c .jshintrc src webpack.config.js",
+    "jscs": "jscs -c node_modules/mofo-style/linters/.jscsrc src test webpack.config.js public/widgets/paper-badger-widget.js",
+    "jshint": "jshint -c .jshintrc src webpack.config.js public/widgets/paper-badger-widget.js",
     "jshint:test": "jshint -c test/.jshintrc test",
-    "jsbeautify": "js-beautify --config node_modules/mofo-style/linters/.jsbeautifyrc src/*.js test/*.js webpack.config.js -r -n",
+    "jsbeautify": "js-beautify --config node_modules/mofo-style/linters/.jsbeautifyrc src/*.js test/*.js webpack.config.js public/widgets/paper-badger-widget.js -r -n",
     "lint": "npm run jsbeautify && npm run jshint && npm run jshint:test && npm run jscs",
     "build:production": "npm run build:js -- --optimize-minimize --optimize-dedupe",
     "start:production": "npm-run-all build:production server",

diff --git a/public/widgets/demos/doi-widget.html b/public/widgets/demos/doi-widget.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <title>Paper view snippet example | Paper Badger</title>
+  <style>.my-remove-class { display: none; } .my-element { overflow: hidden; }</style>
+</head>
+
+<body>
+  <div class="my-element"></div>
+  <div class="my-remove-class">This is only shown when the API returns badges.</div>
+
+  <script>
+    (function () {
+      var d=document,g=d.createElement("script");g.type="text/javascript";g.async=!0;g.defer=!0;
+      g.src="../paper-badger-widget.js";g.onload=load;d.body.appendChild(g);
+
+      function load() {
+        new PaperBadgerWidget({
+          DOI: "10.1186/2047-217X-3-18",
+          containerClass: "my-element",
+          removeClass: "my-remove-class"
+        });
+      }
+    })();
+  </script>
+</body>
+</html>
diff --git a/public/widgets/demos/old-widget-api.html b/public/widgets/demos/old-widget-api.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <title>Paper view snippet example | Paper Badger</title>
+</head>
+<body>
+
+<div class="my-container" style="overflow: hidden"></div>
+<div class="paper-badges-hidden">This is only shown when the showBadgeFurniture method finds badges for the given DOI.</div>
+
+<script>
+  (function () {
+    var d=document,g=d.createElement("script");g.type="text/javascript";g.async=!0;g.defer=!0;
+    g.src="../paper-badger-widget.js";g.onload=load;d.body.appendChild(g);
+
+    function load() {
+      var conf={"article-doi": "10.1186/2047-217X-3-18", "container-class": "my-container", "furniture-class": "paper-badges-hidden"};
+      showBadgeFurniture(conf);
+      showBadges(conf);
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/public/widgets/demos/orcid-widget.html b/public/widgets/demos/orcid-widget.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <title>Paper view snippet example | Paper Badger</title>
+</head>
+<body>
+
+<div class="my-element"></div>
+
+<script>
+  (function () {
+    var d=document,g=d.createElement("script");g.type="text/javascript";g.async=!0;g.defer=!0;
+    g.src="../paper-badger-widget.js";g.onload=load;d.body.appendChild(g);
+
+    function load() {
+      new PaperBadgerWidget({
+        ORCID: "0000-0001-5207-5061",
+        containerClass: "my-element"
+      });
+    }
+  })();
+</script>
+</body>
+</html>