Use JSPM for frontend JS modules

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,125 +1,92 @@
-(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/')
-    .fail(console.error.bind(console))
-    .then(function (data) {
-      console.log('Got data successfully!');
-      response = data;
+// 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!');
+    response = data;
 
-      displayMarkers(response);
-    });
+    displayMarkers(response);
+  });
 
-  // event handling / user interaction
-  var $categoryList = $('.category-filter');
+// event handling / user interaction
+var $categoryList = $('.category-filter');
 
-  function getActiveCategories ($li) {
-    var activeCategories = [];
-    $categoryList.children().each(function () {
-      var $li = $(this);
-      if ($li.hasClass('active'))
-        activeCategories.push($li[0].classList[0])
-    });
+function getActiveCategories ($li) {
+  var activeCategories = [];
+  $categoryList.children().each(function () {
+    var $li = $(this);
+    if ($li.hasClass('active'))
+      activeCategories.push($li[0].classList[0])
+  });
 
-    return activeCategories;
-  }
+  return activeCategories;
+}
 
-  $categoryList.on('click', 'a', function (e) {
-    $(this).parent().toggleClass('active');
+$categoryList.on('click', 'a', function (e) {
+  $(this).parent().toggleClass('active');
 
-    var categories = getActiveCategories();
-    var incidents = filterByCategories(categories);
-    displayMarkers(incidents);
+  var categories = getActiveCategories();
+  var incidents = filter.categories(reponse, categories);
+  displayMarkers(incidents);
 
-    e.preventDefault();
-    e.stopPropagation();
-    return false;
-  })
+  e.preventDefault();
+  e.stopPropagation();
+  return false;
+})
 
-  // logic for drawing follows
+// logic for drawing follows
 
-  var markers = [];
-  function createMarker (data) {
-    var options =  { color: pickColor(data) };
-    var marker = L.circleMarker([data.lat, data.lng], options).addTo(map);
-    return marker;
-  }
+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);
+function pickColor (incident) {
+  var categories = ['racism', 'antisemitism', 'sexism', 'homophobia'].map(function (category, index) {
+    if (incident.categories.indexOf(category) !== -1)
+      return index;
+  }).filter(function (value) {
+    return value != null
+  });
 
-      return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];
-    });
+  var categoryColors = colors.filter(function (color, index) {
+    return categories.indexOf(index) !== -1;
+  });
 
-    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 incident.categories.length ? mixColors(categoryColors) : colors[4];
+}
 
-    return '#' + result[0].toString(16) + result[1].toString(16) + result[2].toString(16);
-  }
+/**
+ * Clear the map and render new markers
+ * @param  {Array[Object]} incidents The incidents to be shown
+ */
+function displayMarkers (incidents) {
+  markers.forEach(function (marker) {
+    map.removeLayer(marker);
+  });
+  markers = [];
 
-  function pickColor (incident) {
-    var categories = ['racism', 'antisemitism', 'sexism', 'homophobia'].map(function (category, index) {
-      if (incident.categories.indexOf(category) !== -1)
-        return index;
-    }).filter(function (value) {
-      return value != null
-    });
-
-    var categoryColors = colors.filter(function (color, index) {
-      return categories.indexOf(index) !== -1;
-    });
-
-    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) {
-    markers.forEach(function (marker) {
-      map.removeLayer(marker);
-    });
-    markers = [];
-
-    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;
-    });
-  }
-})();
+  incidents.forEach(function (incident) {
+    markers.push(createMarker(incident).bindPopup(incident.description));
+  });
+}

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);