Improved widget

New widget with different display options (see docs/widger.js) and demos (in public/widgets/demos). Also provides solutions for mozillascience#142 (loading spinner) and mozillascience#135 (DOIs with extra slashes)
janhohner · Dec 19, 2015 · 404b042 · 404b042
1 parent d2004d6
commit 404b042
Show file tree

Hide file tree

Showing 9 changed files with 530 additions and 45 deletions.
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
@@ -14,48 +14,7 @@ The PaperBadger widget enables *anyone*, from publishers to individual researche
 
 ![Badge Preview](./public/img/badge_preview.jpg)
 
-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 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>
-  ```
-
-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>
-```
+You can either use paper-badger-widget.js ([documentation](docs/paper-badger-widget.md)), which supports old browsers or widget.js ([documentation](docs/widget.md)), which is in development and currently only supports evergreen browsers and IE9+.
 
 ## Contributing
 

diff --git a/docs/paper-badger-widget.md b/docs/paper-badger-widget.md
@@ -0,0 +1,43 @@
+# paper-badger-widget.js Documentation
+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 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>
+  ```
+
+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>
+```
diff --git a/docs/widget.md b/docs/widget.md
@@ -0,0 +1,45 @@
+# widget.js 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 `ORCIDWidgetType` key (only in combination with the `ORCID` key): set the key to the value `default` to show names below the badges, set it to `DOI` to show DOIs
+  * 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/widget.js",
+    "jshint": "jshint -c .jshintrc src webpack.config.js public/widgets/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/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 text 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="../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/orcid-widget-with-doi-shown.html b/public/widgets/demos/orcid-widget-with-doi-shown.html
@@ -0,0 +1,26 @@
+<!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="../widget.js";g.onload=load;d.body.appendChild(g);
+
+    function load() {
+      new PaperBadgerWidget({
+        ORCID: "0000-0001-5207-5061",
+        ORCIDWidgetType: "DOI",
+        containerClass: "my-element"
+      });
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/public/widgets/demos/orcid-widget-with-name-shown.html b/public/widgets/demos/orcid-widget-with-name-shown.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="../widget.js";g.onload=load;d.body.appendChild(g);
+
+    function load() {
+      new PaperBadgerWidget({
+        ORCID: "0000-0001-5207-5061",
+        containerClass: "my-element"
+      });
+    }
+  })();
+</script>
+</body>
+</html>