swap tool page; JS so user can save a sharable HTML journey

.gitignore

@@ -4,15 +4,28 @@
 node_modules/
 # package-lock.json
 *BAK*
+*copy*
 *.diff
 *.log
 *.tgz
 /dropbox
-*.html
+/*.html
 !index.html
 *.min.js
 
+# docs/conf.json
+jsdoc/
+out/
+
+*help*
 .DS_Store
 .gitattributes
 
+##
+## .gitattributes file
+##
+#
+# dist/*.js          -diff
+# package-lock.json  -diff
+
 # End.

.travis.yml

@@ -19,7 +19,9 @@ before_script: npm run build
 # script: npm test
 
 after_script:
+  - npx eslint src/
   - ls -al dist/
+  - ls -alh jsdoc/
   - git status
 
 # End.

README.md

@@ -2,8 +2,8 @@
 [![Build status — Travis-CI][travis-icon]][travis]
 [![js-semistandard-style][semi-icon]][semi]
 [![Browserify][br-icon]][browserify]
-<!--[![Husky Git hooks][hook-icon]][hook]-->
 [![our-journey - on Npmjs][npm-icon]][npm]
+<!--[![Husky Git hooks][hook-icon]][hook]-->
 
 # Our Journey interactive student journey creator
 
@@ -14,11 +14,11 @@ the events that occurred in their study and their experience of these.
 It is being developed for use by all students and different institutions.
 The design is informed by research conducted to understand the challenges faced
 by disabled students at the Open University (see [Coughlan & Lister, 2018][ORO]
-and [Coughlan, Ullmann & Lister, 2017)][ORO2]).
+and [Coughlan, Ullmann & Lister, 2017][ORO2]).
 
  * [iet-ou.github.io/our-journey][web]
 
-![Screenshot 1 - the editor.][img-rel]
+[![Screenshot 1 - the editor.][img-rel]][web]
 
 A physical version of the tool has been developed by [Tim Coughlan][tim] and
 [Kate Lister][kate] of the Institute of Educational Technology (IET)
@@ -29,7 +29,7 @@ Institute of Educational Technology (IET), at The Open University.
 
 Author: [Tim Coughlan][tim], IET.
 
-## Install .. serve .. test .. fix
+## Install .. build .. test
 
 Use [Node][] and npm to aid development:
 
@@ -39,14 +39,16 @@ npm run build
 npm test
 ```
 
-Other commands:
+Other commands to serve and fix the code etc.:
 
 ```sh
-npm run     # List lifecycle and other scripts.
+npm run        # List lifecycle and other scripts.
 
 npm start
 npm run pa11y-ci
 npm run fix
+npm run jsdoc  # Generate documentation in /jsdoc/ directory.
+npx eslint src # browserslist-based test.
 ```
 
 ## API
@@ -57,6 +59,7 @@ npm run fix
  * `. .?layout=scol` — Display with a single-column layout;
  * `. . ?edit=float` — Use a _floating_ editor;
  * `. ?j=base64:...` — Load a journey represented in the URL parameter as Base64-encoded JSON;
+ * `. . . .?zoom=75` — Zoom the display of the whole tool (_50 .. 95%_);
 
 ([Search][q-location].)
 
@@ -73,7 +76,7 @@ require('our-journey').app.run({ assetUrl: '..' /* ... */ });
 Via [unpkg][] — [browse][] — production CDN:
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/our-journey@^1/style/journeystyle.css" />
+<link href="https://unpkg.com/our-journey@^1/style/journeystyle.css" rel="stylesheet" />
 
 <div id="our-journey-tool">
   <p class="no-js"> Sorry! This tool requires Javascript. </p>
@@ -84,6 +87,7 @@ Via [unpkg][] — [browse][] — production CDN:
 <script>
   require('our-journey').app.run({
     containerSelector: '#our-journey-tool'
+
     // Other options ...
   })
   // Returns a Promise.
@@ -144,7 +148,7 @@ Copyright © 2018 [The Open University][ou]. All rights reserved. ([Institute of
 [travis]: https://travis-ci.org/IET-OU/our-journey "Build status – Travis-CI (NPM)"
 [travis-icon]: https://api.travis-ci.org/IET-OU/our-journey.svg
 
-[config]: src/config.js "Configuration options and defaults."
+[config]: src/config.js#L6 "Configuration options and defaults [config.JS]"
 [changelog]: docs/CHANGELOG.md
 [contrib]: docs/CONTRIBUTING.md
 [contrib-x]: https://github.com/IET-OU/our-journey/blob/master/docs/CONTRIBUTING.md

docs/CHANGELOG.md

@@ -1,7 +1,7 @@
 
 # our-journey release notes
 
-←[README][]
+← [README][]
 
 _A work-in-progress!_
 
@@ -20,19 +20,27 @@ See [spreadsheet][gdoc].
 
 ## v[1.4.0][]
 
- * _~~ mid-October 2018_;
+ * _approx. October 2018_;
  * Add browser compatibility-checking Javascript _(error message in Internet Explorer)_, #7;
  * Add default configuration; extend configuration options, including callbacks, #43;
- * Add compress/minified version of Javascript _(94 → 66 kB)_, #41;
+ * Switch the file-save function to create a redirecting HTML file, #42;
+ * Add compress/minified version of Javascript _(100 → 70 kB)_, #41;
  * Fix — identify the '_Add more cards_' arrow button as a button, #47;
- * _... Anything else ...?_
+ * Add `?zoom=75` URL parameter to aid embedding, #17;
+ * Add `?bg=wheat` URL parameter (`background-color`);
+ * Swap the '_tool_' page back to GitHub Pages, #48;
+ * Configurable privacy policy link, #51;
+ * Start [JSDoc][] documentation, #49;
+ * Add [browserslist][] / eslint test, #7;
+ * Favicon, #52;
  * Added `CHANGELOG`, #45;
+ * _.. Anything else ..?_
 
 ## v[1.3.4][]
 
  * _2 October 2018;_
  * Fixed post-it display bug;
- * _What else changed ...?_
+ * _.. Anything else ..?_
 
 ## v[1.3.3][]
 
@@ -42,7 +50,7 @@ See [spreadsheet][gdoc].
  * Floating editor fixes;
  * Further Firefox browser fix;
  * Initial contributing guide, #37;
- * Travis-CI build/test operational;
+ * [Travis-CI][] build/test operational;
  * Files re-arranged; GitHub pages site put in `/docs/` folder, #38;
 
 ## v[1.2.0][]
@@ -81,7 +89,7 @@ See [spreadsheet][gdoc].
 [1.2.0]:  https://github.com/IET-OU/our-journey/commit/c753c3070207965b "2018-08-24"
 [1.3.3]:  https://github.com/IET-OU/our-journey/commit/9fa2575bc13158dd "Open sourced. 2018-09-28."
 [1.3.4]: https://github.com/IET-OU/our-journey/commit/a64ab7340b733f755b06 "2018-10-02"
-[1.3.5]: https://github.com/IET-OU/our-journey/commits "(URL incomplete)"
+[1.4.0]: https://github.com/IET-OU/our-journey/commits "(URL incomplete)"
 
 [changelog]: https://github.com/IET-OU/our-journey/blob/master/docs/CHANGELOG.md
 [readme]: https://github.com/IET-OU/our-journey#readme
@@ -92,5 +100,9 @@ See [spreadsheet][gdoc].
   "Browserify lets you require('modules') in the browser by bundling up all of your dependencies."
 [stringify]: https://npmjs.com/package/stringify
   "Browserify plugin to require() text / HTML files ... inside your client-side JavaScript."
+[browserslist]: https://browsersl.ist/?q=last+1+version%2C+%3E+1%25%2C+not+dead%2C+not+ie+%3C+99
+  "A page to display compatible browsers from a browserslist string."
+[travis-ci]: https://travis-ci.org/IET-OU/our-journey
+[jsdoc]: http://usejsdoc.org/
 
 [End]: //.

docs/activities.html

@@ -11,13 +11,14 @@
         gtag('js', new Date());
         gtag('config', 'UA-3845152-24');  // Was: 'UA-124577463-1'
     </script>
-    <link rel ="stylesheet" href="style/style.css">
+    <link rel="stylesheet" href="style/style.css">
+    <link rel="icon" href="assets/favicon.ico" type="image/x-icon" />
 </head>
 <body>
     <img src="assets/title.png" alt="Our Journey: Map your study journey. What were the challenges and achievements?" class="centre">
     <ul class="navlist">
-        <li class="navli"><a href="index.html">About</a></li>
-        <li class="navli"><a href="https://unpkg.com/our-journey/index.html" target="_blank">Journey Creator</a></li>
+        <li class="navli"><a href="./">About</a></li>
+        <li class="navli"><a href="./tool/" target="_blank">Journey Creator</a></li>
         <li class="navli"><a href="download.html">Downloads</a></li>
         <li class="navli"><a class="active" href="activities.html">Activities</a></li>
     </ul>

docs/conf.json

@@ -0,0 +1,15 @@
+{
+  "#": "JSDoc configuration.",
+  "source": {
+    "include": "./src/"
+  },
+  "opts": {
+    "encoding": "utf8",
+    "destination": "./jsdoc/",
+    "package": "./package.json",
+    "readme": "./README.md",
+    "recurse": false,
+    "debug": true,
+    "verbose": true
+  }
+}

docs/download.html

@@ -11,13 +11,14 @@
             gtag('js', new Date());
             gtag('config', 'UA-3845152-24');  // Was: 'UA-124577463-1'
         </script>
-        <link rel ="stylesheet" href="style/style.css">
+        <link rel="stylesheet" href="style/style.css">
+        <link rel="icon" href="assets/favicon.ico" type="image/x-icon" />
     </head>
     <body>
        <a href="index.html"><img src="assets/title.png" alt="Our Journey: Map your study journey. What were the challenges and achievements?" class="centre"></a>
        <ul class="navlist">
-            <li class="navli"><a  href="index.html">About</a></li>
-            <li class="navli"><a href="https://unpkg.com/our-journey/index.html" target="_blank">Journey Creator</a></li>
+            <li class="navli"><a href="./">About</a></li>
+            <li class="navli"><a href="./tool/" target="_blank">Journey Creator</a></li>
             <li class="navli"><a class="active" href="download.html">Downloads</a></li>
             <li class="navli"><a href="activities.html">Activities</a></li>
           </ul>

docs/help.html

@@ -12,7 +12,8 @@
         gtag('config', 'UA-3845152-24');  // Was: 'UA-124577463-1'
     </script>
     <!--<link rel ="stylesheet" href="style/helpstyle.css">-->
-    <link rel ="stylesheet" href="style/style.css">
+    <link rel="stylesheet" href="style/style.css">
+    <link rel="icon" href="assets/favicon.ico" type="image/x-icon" />
 </head>
 <body>
     <img src="assets/title.png" alt="Our Journey: Map your study journey. What were the challenges and achievements?" class="centre">

docs/index.html

@@ -11,13 +11,14 @@
         gtag('js', new Date());
         gtag('config', 'UA-3845152-24');  // Was: 'UA-124577463-1'
     </script>
-    <link rel ="stylesheet" href="style/style.css">
+    <link rel="stylesheet" href="style/style.css">
+    <link rel="icon" href="assets/favicon.ico" type="image/x-icon" />
 </head>
 <body>
     <img src="assets/title.png" alt="Our Journey: Map your study journey. What were the challenges and achievements?" class="centre">
     <ul class="navlist">
-        <li class="navli"><a class="active" href="index.html">About</a></li>
-        <li class="navli"><a href="https://unpkg.com/our-journey/index.html" target="_blank">Journey Creator</a></li>
+        <li class="navli"><a class="active" href="./">About</a></li>
+        <li class="navli"><a href="./tool/" target="_blank">Journey Creator</a></li>
         <li class="navli"><a href="download.html">Downloads</a></li>
         <li class="navli"><a href="activities.html">Activities</a></li>
       </ul>
@@ -32,7 +33,7 @@ <h1>About</h1>
     This site is being updated as project resources are developed. Currently, you can:
 
     <ul class="bodylist">
-      <li><a href='https://unpkg.com/our-journey/index.html' target ="_blank">Try out the current version of the online Journey Creator</a> (Works best with Chrome. Works with Firefox).
+      <li><a href="./tool/" target ="_blank">Try out the current version of the online Journey Creator</a> (Works best with Chrome. Works with Firefox).
       <li><a href='download.html'>Download the printable versions of the cards and poster</a>
       <li><a href='activities.html'>Read about activities using the Our Journey tools</a>
     </ul>

docs/tool/index.html

@@ -1,12 +1,53 @@
-<!DOCTYPE HTML>
-
-<meta charset="UTF-8">
-<meta http-equiv="refresh" content="1; url=https://unpkg.com/our-journey/index.html">
-
-<script>
-  window.location.href = "https://unpkg.com/our-journey/index.html"
-</script>
-
-<title>Our Journey: Redirect</title>
-
-The Our Journey tool has moved. If you are not automatically redirected, <a href='https://unpkg.com/our-journey/index.html'>click here</a>
+<!doctype html>
+<html lang="en">
+    <head>
+        <!-- Global site tag (gtag.js) - Google Analytics -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-3845152-24"></script>
+        <script>
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', 'UA-3845152-24');  // Was: 'UA-124577463-1'
+        </script>
+
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=0.9" />
+
+        <title>Our Journey: Journey creator</title>
+
+        <meta name="description" content=
+        "'Our Journeys' is an interactive activity to chart the highs and lows of your student learning journey. Developed in the Institute of Educational Technology (IET), at The Open University." />
+        <meta name="copyright" content="© 2018 The Open University (IET)." />
+
+        <link rel="stylesheet" href="https://unpkg.com/our-journey@^1/style/journeystyle.css" />
+        <link rel="icon" href="../assets/favicon.ico" type="image/x-icon" />
+    </head>
+<body>
+
+    <div id="our-journey-tool">
+      <p class="no-js">
+        Sorry!
+        This tool requires Javascript.
+        Either your browser doesn't have Javascript enabled, or something has gone badly wrong.
+      </p>
+      <noscript>(Javascript disabled)</noscript>
+    </div>
+
+    <script src="https://unpkg.com/our-journey@^1/dist/our-journey.js"></script>
+
+    <script>
+        require('our-journey').app.run({
+          containerSelector: '#our-journey-tool',
+          assetUrl: 'https://unpkg.com/our-journey@^1/assets'
+        })
+        .then(function (value) {
+          console.warn('our-journey. Loading complete:', value);
+        })
+        .catch(function (error) {
+          console.error('our-journey. Error:', error);
+        });
+    </script>
+
+    </body>
+</html>