Use JSPM for frontend JS modules

.gitignore

@@ -1,6 +1,9 @@
 # Ignore the SQLite database
 violence.db
 
+# JSPM
+/static/jspm_packages/*/
+
 # Byte-compiled / optimized / DLL files
 __pycache__/
 *.py[cod]

package.json

@@ -0,0 +1,12 @@
+{
+  "jspm": {
+    "name": "Reach Out Open Data",
+    "directories": {
+      "baseURL": "static",
+      "lib": "static/js"
+    },
+    "dependencies": {
+      "jquery": "^2.1.3"
+    }
+  }
+}

static/config.js

@@ -0,0 +1,17 @@
+System.config({
+  "baseURL": "/static/",
+  "transpiler": "6to5",
+  "paths": {
+    "*": "*.js",
+    "Reach Out Open Data/*": "js/*.js",
+    "github:*": "jspm_packages/github/*.js",
+    "npm:*": "jspm_packages/npm/*.js"
+  }
+});
+
+System.config({
+  "map": {
+    "jquery": "github:components/jquery@2.1.3"
+  }
+});
+

static/js/colors.js

@@ -0,0 +1,18 @@
+export default function mixColors (colors) {
+  var rgb = colors.map(function (color) {
+    var r = color.substr(1, 2)
+      , g = color.substr(3, 2)
+      , b = color.substr(5, 2);
+
+    return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];
+  });
+
+  var result = [ 0, 0, 0 ];
+  for (var i = 0, l = rgb.length; i < l; i++) {
+    result[0] += rgb[i][0] / l;
+    result[1] += rgb[i][1] / l;
+    result[2] += rgb[i][2] / l;
+  }
+
+  return '#' + result[0].toString(16) + result[1].toString(16) + result[2].toString(16);
+}

static/js/filter.js

@@ -0,0 +1,19 @@
+export default {
+
+  /**
+   * Returns only the incidents which fall into the given categories
+   * @param  {Array[Object]} data The incidents to filter
+   * @param  {Array[String]} categories
+   * @return {Arreay[Obect]}
+   */
+  categories: function (data, categories) {
+    return response.filter(function (incident) {
+      for (var i = 0, l = incident.categories.length; i < l; i++)
+        if (categories.indexOf(incident.categories[i]) !== -1)
+          return true;
+
+      return false;
+    });
+  }
+
+}

static/js/main.js

@@ -1,21 +1,23 @@
-(function () {
-  "use strict";
+'use strict';
+import $ from 'jquery';
+import filter from './filter';
+import {mixColors} from './colors';
 
-  // http://www.colourlovers.com/palette/1811244/1001_Stories
-  var colors = [ '#F8B195', '#F67280', '#C06C84', '#6C5B7B', '#355C7D' ];
+// http://www.colourlovers.com/palette/1811244/1001_Stories
+var colors = [ '#F8B195', '#F67280', '#C06C84', '#6C5B7B', '#355C7D' ];
 
-  // set up background map
-  var map = L.map('map').setView([52.50, 13.40], 11);
-  var layer = new L.StamenTileLayer('toner-lite');
-  map.addLayer(layer);
+// set up background map
+var map = L.map('map').setView([52.50, 13.40], 11);
+var layer = new L.StamenTileLayer('toner-lite');
+map.addLayer(layer);
 
-  // restrict viewable area
-  map.setMaxBounds(map.getBounds());
-  map.options.minZoom = map.getZoom();
+// restrict viewable area
+map.setMaxBounds(map.getBounds());
+map.options.minZoom = map.getZoom();
 
-  // get response from server and draw the map
-  var response;
-  $.getJSON('/articles/')
+// get response from server and draw the map
+var response;
+$.getJSON('/articles/')
   .fail(console.error.bind(console))
   .then(function (data) {
     console.log('Got data successfully!');
@@ -24,10 +26,10 @@
     displayMarkers(response);
   });
 
-  // event handling / user interaction
-  var $categoryList = $('.category-filter');
+// event handling / user interaction
+var $categoryList = $('.category-filter');
 
-  function getActiveCategories ($li) {
+function getActiveCategories ($li) {
   var activeCategories = [];
   $categoryList.children().each(function () {
     var $li = $(this);
@@ -36,49 +38,30 @@
   });
 
   return activeCategories;
-  }
+}
 
-  $categoryList.on('click', 'a', function (e) {
+$categoryList.on('click', 'a', function (e) {
   $(this).parent().toggleClass('active');
 
   var categories = getActiveCategories();
-    var incidents = filterByCategories(categories);
+  var incidents = filter.categories(reponse, categories);
   displayMarkers(incidents);
 
   e.preventDefault();
   e.stopPropagation();
   return false;
-  })
+})
 
-  // logic for drawing follows
+// logic for drawing follows
 
-  var markers = [];
-  function createMarker (data) {
+var markers = [];
+function createMarker (data) {
   var options =  { color: pickColor(data) };
   var marker = L.circleMarker([data.lat, data.lng], options).addTo(map);
   return marker;
-  }
+}
 
-  function mixColors (colors) {
-    var rgb = colors.map(function (color) {
-      var r = color.substr(1, 2)
-        , g = color.substr(3, 2)
-        , b = color.substr(5, 2);
-
-      return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];
-    });
-
-    var result = [ 0, 0, 0 ];
-    for (var i = 0, l = rgb.length; i < l; i++) {
-      result[0] += rgb[i][0] / l;
-      result[1] += rgb[i][1] / l;
-      result[2] += rgb[i][2] / l;
-    }
-
-    return '#' + result[0].toString(16) + result[1].toString(16) + result[2].toString(16);
-  }
-
-  function pickColor (incident) {
+function pickColor (incident) {
   var categories = ['racism', 'antisemitism', 'sexism', 'homophobia'].map(function (category, index) {
     if (incident.categories.indexOf(category) !== -1)
       return index;
@@ -91,13 +74,13 @@
   });
 
   return incident.categories.length ? mixColors(categoryColors) : colors[4];
-  }
+}
 
-  /**
+/**
  * Clear the map and render new markers
  * @param  {Array[Object]} incidents The incidents to be shown
  */
-  function displayMarkers (incidents) {
+function displayMarkers (incidents) {
   markers.forEach(function (marker) {
     map.removeLayer(marker);
   });
@@ -106,20 +89,4 @@
   incidents.forEach(function (incident) {
     markers.push(createMarker(incident).bindPopup(incident.description));
   });
-  }
-
-  /**
-   * Returns only the incidents which fall into the given categories
-   * @param  {Array[String]} categories
-   * @return {Arreay[Obect]}
-   */
-  function filterByCategories (categories) {
-    return response.filter(function (incident) {
-      for (var i = 0, l = incident.categories.length; i < l; i++)
-        if (categories.indexOf(incident.categories[i]) !== -1)
-          return true;
-
-      return false;
-    });
-  }
-})();
+}

static/jspm_packages/.loaderversions

@@ -0,0 +1 @@
+^0.13.0,^0.13.0,,~3.3.2

static/jspm_packages/6to5-runtime.js

@@ -0,0 +1 @@
+(function(global){var to5Runtime=global.to5Runtime={};to5Runtime.inherits=function(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass)}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)subClass.__proto__=superClass};to5Runtime.defaults=function(obj,defaults){for(var key in defaults){if(obj[key]===undefined){obj[key]=defaults[key]}}return obj};to5Runtime.prototypeProperties=function(child,staticProps,instanceProps){if(staticProps)Object.defineProperties(child,staticProps);if(instanceProps)Object.defineProperties(child.prototype,instanceProps)};to5Runtime.applyConstructor=function(Constructor,args){var instance=Object.create(Constructor.prototype);var result=Constructor.apply(instance,args);return result!=null&&(typeof result=="object"||typeof result=="function")?result:instance};to5Runtime.taggedTemplateLiteral=function(strings,raw){return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}))};to5Runtime.taggedTemplateLiteralLoose=function(strings,raw){strings.raw=raw;return strings};to5Runtime.interopRequire=function(obj){return obj&&obj.__esModule?obj.default:obj};to5Runtime.toArray=function(arr){return Array.isArray(arr)?arr:Array.from(arr)};to5Runtime.slicedToArray=function(arr,i){if(Array.isArray(arr)){return arr}else{var _arr=[];for(var _iterator=arr[Symbol.iterator](),_step;!(_step=_iterator.next()).done;){_arr.push(_step.value);if(i&&_arr.length===i)break}return _arr}};to5Runtime.objectWithoutProperties=function(obj,keys){var target={};for(var i in obj){if(keys.indexOf(i)>=0)continue;if(!Object.prototype.hasOwnProperty.call(obj,i))continue;target[i]=obj[i]}return target};to5Runtime.hasOwn=Object.prototype.hasOwnProperty;to5Runtime.slice=Array.prototype.slice;to5Runtime.bind=Function.prototype.bind;to5Runtime.defineProperty=function(obj,key,value){return Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})};to5Runtime.asyncToGenerator=function(fn){return function(){var gen=fn.apply(this,arguments);return new Promise(function(resolve,reject){var callNext=step.bind(null,"next");var callThrow=step.bind(null,"throw");function step(key,arg){try{var info=gen[key](arg);var value=info.value}catch(error){reject(error);return}if(info.done){resolve(value)}else{Promise.resolve(value).then(callNext,callThrow)}}callNext()})}};to5Runtime.interopRequireWildcard=function(obj){return obj&&obj.__esModule?obj:{"default":obj}};to5Runtime._typeof=function(obj){return obj&&obj.constructor===Symbol?"symbol":typeof obj};to5Runtime._extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key]}}}return target};to5Runtime.get=function get(object,property,receiver){var desc=Object.getOwnPropertyDescriptor(object,property);if(desc===undefined){var parent=Object.getPrototypeOf(object);if(parent===null){return undefined}else{return get(parent,property,receiver)}}else if("value"in desc&&desc.writable){return desc.value}else{var getter=desc.get;if(getter===undefined){return undefined}return getter.call(receiver)}};to5Runtime.set=function set(object,property,value,receiver){var desc=Object.getOwnPropertyDescriptor(object,property);if(desc===undefined){var parent=Object.getPrototypeOf(object);if(parent===null){return}else{return set(parent,property,value,receiver)}}else if("value"in desc&&desc.writable){desc.value=value;return}else{var setter=desc.set;if(setter===undefined){return}return setter.call(receiver,value)}};to5Runtime.classCallCheck=function(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}};to5Runtime.objectDestructuringEmpty=function(obj){if(obj==null)throw new TypeError("Cannot destructure undefined")}})(typeof global==="undefined"?self:global);

views/index.tpl

@@ -30,8 +30,10 @@
     <div id="map"></div>
 
     <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <script src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
-    <script src="/static/js/main.js"></script>
+
+    <script src="/static/jspm_packages/system.js"></script>
+    <script src="/static/config.js"></script>
+    <script>System.import('js/main');</script>
 </body>
 </html>