Merge 26c6cdc into 4015e22

.eslintrc

@@ -1,6 +1,11 @@
 {
     "extends": "airbnb",
     "rules": {
-        "max-len": [2, 150, 4]
+        "max-len": [2, 150, 4],
+		"no-restricted-properties": ["off", {
+			"object": "Math",
+			"property": "pow",
+			"message": "Overwrite AirBnb rule, avoid ES7 exponentiation operator (**) use Math.pow() instead.",
+		}],
     }
 }

plugins/album/lib/json.js

@@ -78,6 +78,11 @@ function templatePrepare(result = {}) {
   output.album.items = result.album.item.map((_item) => {
     const item = _item;
     item.caption = item.thumbCaption;
+    if (item.geo) {
+      item.geo.lat = parseFloat(item.geo.lat);
+      item.geo.lon = parseFloat(item.geo.lon);
+    }
+
     const thumbPath = getThumbPath(item, gallery);
     const photoPath = utils.file.photoPath(thumbPath);
     const videoPath = getVideoPath(item, gallery);

plugins/album/public/album.js

@@ -1,8 +1,7 @@
-/* global ColorThief, createMap, jQuery */
+/* global ColorThief, createMap, jQuery, window */
 const MAP_BOX_ID = 'mapBox';
 
 const colorThief = new ColorThief();
-let map;
 const $mapBox = jQuery(`#${MAP_BOX_ID}`);
 
 const toggleMapButtonLabel = () => {
@@ -20,6 +19,17 @@ const toggleMapButtonLabel = () => {
   }
 };
 
+function showMarker(map, _lon, _lat) {
+  const lat = parseFloat(_lat);
+  const lon = parseFloat(_lon);
+
+  if (Number.isNaN(lat) || Number.isNaN(lon)) {
+    return;
+  }
+
+  map.flyTo({ center: [lon, lat], zoom: 14, screenSpeed: 2, curve: Math.pow(3, 0.25) });
+}
+
 function photoViewed() {
   const photoImage = jQuery('img.cboxPhoto').get(0);
   const $thumbImage = jQuery(this);
@@ -32,9 +42,8 @@ function photoViewed() {
   jQuery('#cboxOverlay').css('background', `rgb(${dominateColour[0]},${dominateColour[1]},${dominateColour[2]})`);
   jQuery.fn.colorbox.resize();
 
-  if (map) {
-    const index = parseInt($thumbBox.attr('id').replace('photo', ''), 10);
-    map.pin.go(index);
+  if (window.map) {
+    showMarker(window.map, $thumbBox.attr('data-lon'), $thumbBox.attr('data-lat'));
   }
 }
 

plugins/album/public/map.js

@@ -1,20 +1,20 @@
 /* global document, getQueryByName, mapboxgl, window */
 function createMap(containerId) {
   mapboxgl.accessToken = 'pk.eyJ1IjoiZGFuYWN0aXZlIiwiYSI6ImNpdmo0OGo2YTAxcGIyenBkZWZlN3Ewam4ifQ.npY0cY_HdHg1OB692HtcUw';
-  const map = new mapboxgl.Map({
+  window.map = new mapboxgl.Map({
     container: containerId,
     style: 'mapbox://styles/mapbox/dark-v9',
     center: [-103.59179687498357, 40.66995747013945],
     zoom: 3,
   });
 
-  map.on('load', () => {
+  window.map.on('load', () => {
     const albumStem = getQueryByName('album_stem');
     const gallery = getQueryByName('gallery');
 
     // Add a new source from our GeoJSON data and set the
     // 'cluster' option to true.
-    map.addSource('earthquakes', {
+    window.map.addSource('earthquakes', {
       type: 'geojson',
       // Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
       // from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
@@ -27,7 +27,7 @@ function createMap(containerId) {
     // Use the earthquakes source to create five layers:
     // One for unclustered points, three for each cluster category,
     // and one for cluster labels.
-    map.addLayer({
+    window.map.addLayer({
       id: 'unclustered-points',
       type: 'symbol',
       source: 'earthquakes',
@@ -46,7 +46,7 @@ function createMap(containerId) {
     ];
 
     layers.forEach((layer, i) => {
-      map.addLayer({
+      window.map.addLayer({
         id: `cluster-${i}`,
         type: 'circle',
         source: 'earthquakes',
@@ -61,7 +61,7 @@ function createMap(containerId) {
     });
 
     // Add a layer for the clusters' count labels
-    map.addLayer({
+    window.map.addLayer({
       id: 'cluster-count',
       type: 'symbol',
       source: 'earthquakes',

plugins/album/test/react-thumb-enzyme.js

@@ -5,7 +5,7 @@ import { shallow, mount } from 'enzyme';
 import './react-enzyme-setup';
 import Thumb from '../views/thumb';
 
-test('React Component - Thumb', (describe) => {
+test('React Component - Thumb', { skip: false }, (describe) => {
   const item = {
     mediaPath: 'c',
     thumbCaption: 'a',
@@ -19,6 +19,26 @@ test('React Component - Thumb', (describe) => {
     assert.end();
   });
 
+  describe.test('* Thumbnail missing geocode', (assert) => {
+    const wrapper = mount(<Thumb item={item} />);
+    const liProps = wrapper.find('li').props();
+    assert.notOk(liProps['data-lon'], 'Missing longitude');
+    assert.notOk(liProps['data-lat'], 'Missing latitude');
+    assert.end();
+  });
+
+  describe.test('* Thumbnail has geocode', (assert) => {
+    item.geo = {
+      lat: 1,
+      lon: 0,
+    };
+    const wrapper = mount(<Thumb item={item} />);
+    const liProps = wrapper.find('li').props();
+    assert.equal(liProps['data-lon'], 0, 'Has longitude');
+    assert.equal(liProps['data-lat'], 1, 'Has latitude');
+    assert.end();
+  });
+
   describe.test('* Title - Photo City', (assert) => {
     item.photoCity = 'Vancouver, BC';
     const wrapper = mount(<Thumb item={item} />);

plugins/album/test/react-thumb-unit.js

@@ -8,7 +8,7 @@ import Thumb from '../views/thumb';
 
 const test = addAssertions(tape, { jsxEquals });
 
-test('React Component - Thumb', (describe) => {
+test('React Component - Thumb', { skip: false }, (describe) => {
   const item = {
     mediaPath: 'c',
     thumbCaption: 'a',
@@ -29,7 +29,7 @@ test('React Component - Thumb', (describe) => {
     renderer.render(<Thumb item={item} />);
     const result = renderer.getRenderOutput();
 
-    assert.jsxEquals(result, <li className="liAlbumPhoto">
+    assert.jsxEquals(result, <li className="liAlbumPhoto" data-lon={undefined} data-lat={undefined}>
       <div className="albumBoxPhotoImg">
         <a href="c" rel="set" title="">
           <img alt="a" src="b" title={undefined} />
@@ -41,6 +41,26 @@ test('React Component - Thumb', (describe) => {
     assert.end();
   });
 
+  describe.test('* Thumbnail missing geocode', (assert) => {
+    const component = createComponent.shallow(<Thumb item={item} />);
+    const liProps = component.findByQuery('li')[0].props;
+    assert.notOk(liProps['data-lon'], 'Missing longitude');
+    assert.notOk(liProps['data-lat'], 'Missing latitude');
+    assert.end();
+  });
+
+  describe.test('* Thumbnail has geocode', (assert) => {
+    item.geo = {
+      lat: 1,
+      lon: 0,
+    };
+    const component = createComponent.shallow(<Thumb item={item} />);
+    const liProps = component.findByQuery('li')[0].props;
+    assert.equal(liProps['data-lon'], 0, 'Has longitude');
+    assert.equal(liProps['data-lat'], 1, 'Has latitude');
+    assert.end();
+  });
+
   describe.test('* Title - Photo City', { skip: false }, (assert) => {
     item.photoCity = 'Vancouver, BC';
     const component = createComponent.shallow(<Thumb item={item} />);

plugins/album/views/page.jsx

@@ -10,7 +10,7 @@ function Page({ album }) {
       <head>
         <title>History</title>
         <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
-        <link href="https://api.mapbox.com/mapbox-gl-js/v0.30.0/mapbox-gl.css" rel="stylesheet" />
+        <link href="https://api.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.css" rel="stylesheet" />
         <link href="./album/static/album.css" rel="stylesheet" />
         <link href="./album/static/map.css" rel="stylesheet" />
       </head>
@@ -23,7 +23,7 @@ function Page({ album }) {
         <div id="albumBox"><Album album={album} /></div>
         <script src="./album/static/jquery.js" />
         <script src="./album/static/lib/color-thief.js" />
-        <script src="https://api.mapbox.com/mapbox-gl-js/v0.30.0/mapbox-gl.js" />
+        <script src="https://api.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.js" />
         <script src="./album/static/assets/bundle.js" />
         <script src="./album/static/utils.js" />
         <script src="./album/static/map.js" />

plugins/album/views/thumb.jsx

@@ -13,7 +13,7 @@ function Thumb({ item }) {
     }
   }
 
-  return (<li className="liAlbumPhoto">
+  return (<li className="liAlbumPhoto" data-lat={item.geo && item.geo.lat} data-lon={item.geo && item.geo.lon}>
     <div className="albumBoxPhotoImg">
       <a href={item.mediaPath} rel="set" title={title.join(' | ')}>
         <img src={item.thumbPath} alt={item.thumbCaption} title={item.caption} />
@@ -29,12 +29,20 @@ Thumb.propTypes = {
     thumbCaption: React.PropTypes.string.isRequired,
     thumbPath: React.PropTypes.string.isRequired,
     mediaPath: React.PropTypes.string.isRequired,
+    geo: React.PropTypes.shape({
+      lat: React.PropTypes.number,
+      lon: React.PropTypes.number,
+    }),
   }),
 };
 
 Thumb.defaultProps = {
   item: {
     caption: 'Thumbnail',
+    geo: {
+      lat: null,
+      lon: null,
+    },
   },
 };