Update from browser-template and talk template

Refresh for cohort 016

Close #26

.scss-lint.yml

@@ -0,0 +1 @@
+exclude: 'node_modules/*'

README.md

@@ -69,8 +69,8 @@ We'll take a stepped approach:
 1.  Invoke the collection retrieval method from the submit handler passing the
  success and fail callbacks.
 
- ## [License](LICENSE)
+## [License](LICENSE)
 
- 1.  All content is licensed under a CC­BY­NC­SA 4.0 license.
- 1.  All software code is licensed under GNU GPLv3. For commercial use or
-     alternative licensing, please contact [email protected].
+1.  All content is licensed under a CC­BY­NC­SA 4.0 license.
+1.  All software code is licensed under GNU GPLv3. For commercial use or
+    alternative licensing, please contact [email protected].

assets/scripts/config.js

@@ -0,0 +1,9 @@
+'use strict';
+
+const config = {
+  apiOrigins: {
+    production: 'https://ga-wdi-boston.herokuapp.com',
+  },
+};
+
+module.exports = config;

assets/scripts/index.js

@@ -1,14 +1,14 @@
 'use strict';
 
-// user require with a reference to bundle the file and use it in this file
-// var example = require('./example');
+const setAPIOrigin = require('../../lib/set-api-origin');
+const config = require('./config');
 
-// use require without a reference to ensure a file is bundled
-require('./example');
-
-const bookEvents = require('./books/events');
-
-// On document ready
 $(() => {
-
+  setAPIOrigin(location, config);
 });
+
+// use require with a reference to bundle the file and use it in this file
+// const example = require('./example');
+
+// use require without a reference to ensure a file is bundled
+require('./example');

assets/scripts/store.js

@@ -0,0 +1,6 @@
+'use strict';
+
+const store = {
+};
+
+module.exports = store;

grunt/aliases.json

@@ -1,5 +1,12 @@
 {
   "default": ["nag"],
+  "deploy": [
+    "shell:git-is-clean",
+    "shell:git-push-master",
+    "shell:deploy-prepare",
+    "build",
+    "shell:deploy-publish"
+  ],
   "build": ["webpack:build"],
   "server": ["webpack-dev-server:start"],
   "serve": ["server"],

grunt/jasmine.json

@@ -1,8 +1,8 @@
 {
   "tests": {
-    "src": ["vendor.bundle.js", "bundle.js"],
+    "src": ["public/vendor.js", "public/application.js"],
     "options": {
-      "specs": "specs.js"
+      "specs": "public/specs.js"
     }
   }
 }

grunt/shell.js

@@ -0,0 +1,39 @@
+'use strict';
+
+const ghPagesList = [
+  'index.html',
+  'favicon.ico',
+  'public',
+].join(' ');
+
+module.exports = {
+  'git-is-clean': {
+    // `$(git status --porcelain)` will evaluate to the empty string if the 
+    // working directory is clean.
+    // `test -z` will exit 0 (true) if its argument is an empty string.
+    // If it doesn't exit true, `(git status && false)` will show why the
+    // repository isn't clean and exit false causing the grunt tasks to end.
+    command: 'test -z "$(git status --porcelain)"  || (git status && false)',
+  },
+  'git-push-master': {
+    command: 'git push origin master',
+  },
+  'deploy-prepare': {
+    command: [
+      'git checkout master',
+      'git branch -D gh-pages || echo "so not removed"',
+      'git checkout --orphan gh-pages',
+      'git rm --cached \'*\'',
+    ].join(' && '),
+  },
+  'deploy-publish': {
+    command: [
+      'touch .nojekyll',
+      `git add --force .nojekyll ${ghPagesList}`,
+      'git commit -m "deploy task"',
+      'git push origin gh-pages --force',
+      'git clean -x -d --force --exclude=node_modules',
+      'git checkout master',
+    ].join(' && '),
+  },
+};

grunt/webpack-dev-server.js

@@ -5,16 +5,21 @@ let clone = require('clone');
 // clone the webpack config to separate configuration of webpack and dev server
 let webpackConfig = clone(require('./webpack').options);
 
-//port for webpack-dev-server
+// port for development server
 const port = +('GA'.split('').reduce((p, c)=> p + c.charCodeAt(), ''));
 
-// enable live reload without a script tag
-webpackConfig.entry.vendor.unshift(`webpack-dev-server/client?http://localhost:${port}`);
+// make `jQuery` and `$` available in the development console
+webpackConfig.module.loaders.push({
+  test: require.resolve('jquery'),
+  loader: 'expose?jQuery!expose?$',
+});
 
 module.exports = {
   options: {
     port,
+    inline: true, // reload on change
     webpack: webpackConfig,
+    publicPath: '/public/',
   },
 
   start: {

grunt/webpack.js

@@ -6,18 +6,22 @@ let path = require('path');
 module.exports = {
   options: {
     entry: {
-      bundle: './index.js',
+      application: './index.js',
       specs: './spec/_all.js',
       vendor: ['jquery', 'bootstrap-sass'],
     },
 
     output: {
-      path: './',
       filename: '[name].js',
+      path: __dirname + '/../public',
+      publicPath: 'public/',
     },
 
     plugins: [
-      new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
+      new webpack.optimize.CommonsChunkPlugin({
+        name: 'vendor',
+        minChunks: Infinity,
+      }),
       new webpack.ProvidePlugin({
         $: 'jquery',
         jQuery: 'jquery',
@@ -56,14 +60,20 @@ module.exports = {
         {
           test: /\.(hbs|handlebars)$/,
           loader: 'handlebars-loader',
-        },
-        {
-          test: /\.html\.(hbs|handlebars)$/,
-          loader: 'handlebars-loader!html',
+          query: {
+            helperDirs: [
+              __dirname + '/../assets/scripts/templates/helpers',
+            ],
+          },
         },
       ],
     },
 
+    resolve: {
+      alias: {
+        handlebars: 'handlebars/dist/handlebars.js',
+      },
+    },
     stats: {
       colors: true,
       modules: true,

index.html

@@ -2,9 +2,14 @@
 <html>
     <head>
       <title>Example</title>
+      <meta name="viewport" content="width=device-width, initial-scale=1">
 
-      <script src="vendor.bundle.js" type="text/javascript" charset="utf-8" defer></script>
-      <script src="bundle.js" type="text/javascript" charset="utf-8" defer></script>
+      <!-- Do not add `link` tags unless you know what you are doing -->
+      <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
+
+      <!-- Do not add `script` tags unless you know what you are doing -->
+      <script src="public/vendor.js" type="text/javascript" charset="utf-8" defer></script>
+      <script src="public/application.js" type="text/javascript" charset="utf-8" defer></script>
     </head>
     <body class="container-fluid">
       <h1>Example</h1>

index.js

@@ -9,11 +9,3 @@ require('./assets/scripts/index.js');
 
 // styles
 require('./assets/styles/index.scss');
-
-// attach jQuery globally
-require('expose?$!jquery');
-require('expose?jQuery!jquery');
-
-// attach getFormFields globally
-
-require('expose?getFormFields!./lib/get-form-fields.js');

lib/add-nested-value.js

@@ -0,0 +1,25 @@
+'use strict';
+
+const addNestedValue = function (pojo, name, value) {
+  const recurse = function recurse(pojo, keys, value) {
+    value = decodeURIComponent(value);
+    let key = decodeURIComponent(keys.shift());
+    let next = keys[0];
+    if (next === '') { // key is an array
+      pojo[key] = pojo[key] || [];
+      pojo[key].push(value);
+    } else if (next) { // key is a parent key
+      pojo[key] = pojo[key] || {};
+      recurse(pojo[key], keys, value);
+    } else { // key is the key for value
+      pojo[key] = value;
+    }
+
+    return pojo;
+  };
+
+  let keys = name.split('[').map((k) => k.replace(/]$/, ''));
+  return recurse(pojo, keys, value);
+};
+
+module.exports = addNestedValue;

lib/get-form-fields.js

@@ -1,20 +1,6 @@
 'use strict';
 
-const addFormField = function addFormField(target, names, value) {
-  let name = names.shift();
-  let next = names[0];
-  if (next === '') { // name is an array
-    target[name] = target[name] || [];
-    target[name].push(value);
-  } else if (next) { // name is a parent key
-    target[name] = target[name] || {};
-    addFormField(target[name], names, value);
-  } else { // name is the key for value
-    target[name] = value;
-  }
-
-  return target;
-};
+const addNestedValue = require('./add-nested-value');
 
 const getFormFields = (form) => {
   let target = {};
@@ -36,17 +22,16 @@ const getFormFields = (form) => {
         break;
     }
 
-    let names = e.getAttribute('name').split('[')
-      .map((k) => k.replace(/]$/, ''));
+    let name = e.getAttribute('name');
 
     if (type === 'MULTIPLE') {
       for (let i = 0; i < e.length; i++) {
         if (e[i].selected) {
-          addFormField(target, names.slice(), e[i].value);
+          addNestedValue(target, name, e[i].value);
         }
       }
     } else if ((type !== 'RADIO' && type !== 'CHECKBOX') || e.checked) {
-      addFormField(target, names, e.value);
+      addNestedValue(target, name, e.value);
     }
   }
 

lib/parse-nested-query.js

@@ -0,0 +1,16 @@
+'use strict';
+
+const addNestedValue = require('./add-nested-value');
+
+const parseNestedQuery = queryString =>
+  queryString.split('&')
+    .reduce((memo, element) => {
+      if (element) {
+        let keyValuePair = element.split('=');
+        memo = addNestedValue(memo, keyValuePair[0], keyValuePair[1]);
+      }
+
+      return memo;
+    }, {});
+
+module.exports = parseNestedQuery;

lib/set-api-origin.js

@@ -0,0 +1,37 @@
+'use strict';
+
+const parseNestedQuery = require('./parse-nested-query');
+
+/*
+  possibilites to handle and example URLs:
+
+  client local, api local
+    http://localhost:7165/
+  client local, api remote
+    http://localhost:7165/?environment=production
+  client remote, api local
+    https://ga-wdi-boston.github.io/browser-template/?environment=development
+    This will require allowing "unsafe scripts" in Chrome
+  client remote, api remote
+    https://ga-wdi-boston.github.io/browser-template/
+*/
+
+const setAPIOrigin = (location, config) => {
+  // strip the leading `'?'`
+  const search = parseNestedQuery(location.search.slice(1));
+
+  if (search.environment === 'development' ||
+      location.hostname === 'localhost' &&
+      search.environment !== 'production') {
+    if (!(config.apiOrigin = config.apiOrigins.development)) {
+      let port = +('GA'.split('').reduce((p, c) =>
+        p + c.charCodeAt().toString(16), '')
+      );
+      config.apiOrigin = `http://localhost:${port}`;
+    }
+  } else {
+    config.apiOrigin = config.apiOrigins.production;
+  }
+};
+
+module.exports = setAPIOrigin;

package.json

@@ -2,7 +2,10 @@
   "name": "ga-wdi-boston.jquery-ajax-get-collection",
   "version": "0.0.3",
   "private": true,
-  "license": "MIT",
+  "license": {
+    "software": "GNU GPLv3",
+    "content": "CC­BY­NC­SA 4.0"
+  },
   "dependencies": {
     "jquery": "^3.1.1"
   },
@@ -23,6 +26,7 @@
     "grunt-jsonlint": "^1.1.0",
     "grunt-nodemon": "^0.4.2",
     "grunt-open": "^0.2.3",
+    "grunt-shell": "^2.1.0",
     "grunt-webpack": "^1.0.18",
     "handlebars": "^4.0.5",
     "handlebars-loader": "^1.4.0",

spec/_all.js

@@ -2,5 +2,5 @@
 
 // Load all specs so webpack can find them. Think of this as an automatic
 // manifest for bundling specs.
-var req = require.context('./', true, /spec\.js$/);
+const req = require.context('./', true, /spec\.js$/);
 req.keys().forEach(req);