Merge branch 'dataloader' into 2.x

modules/core/context.js

@@ -6,6 +6,7 @@ import { select as d3_select } from 'd3-selection';
 
 import { t, currentLocale, addTranslation, setLocale } from '../util/locale';
 
+import { coreData } from './data';
 import { coreHistory } from './history';
 import { coreValidator } from './validator';
 import { dataLocales, dataEn } from '../../data';
@@ -92,9 +93,11 @@ export function coreContext() {
 
   /* Straight accessors. Avoid using these if you can. */
   let _connection;
+  let _data;
   let _history;
   let _validator;
   context.connection = () => _connection;
+  context.data = () => _data;
   context.history = () => _history;
   context.validator = () => _validator;
 
@@ -467,6 +470,7 @@ export function coreContext() {
     _locale = _locale.split('-')[0];
   }
 
+  _data = coreData(context);
   _history = coreHistory(context);
   _validator = coreValidator(context);
 

modules/core/data.js

@@ -0,0 +1,47 @@
+import { json as d3_json } from 'd3-fetch';
+import { data as _data } from '../../data';  // prebundled data
+
+
+let _inflight = {};
+
+const FILES = {
+  'intro_graph': 'data/intro_graph.json'
+};
+
+
+export function coreData(context) {
+
+  return {
+    get: (which) => {
+      if (_data[which]) {
+        return Promise.resolve(_data[which]);
+      }
+
+      const file = FILES[which];
+      const url = file && context.asset(file);
+      if (!url) {
+        return Promise.reject(`Unknown data file for "${which}"`);
+      }
+
+      let prom = _inflight[url];
+      if (!prom) {
+        _inflight[url] = prom = d3_json(url)
+          .then(result => {
+            delete _inflight[url];
+            if (!result) {
+              throw new Error(`No data loaded for "${which}"`);
+            }
+            _data[which] = result;
+            return result;
+          })
+          .catch(err => {
+            delete _inflight[url];
+            throw err;
+          });
+      }
+
+      return prom;
+    }
+
+  };
+}

modules/core/index.js

@@ -1,4 +1,5 @@
 export { coreContext } from './context';
+export { coreData } from './data';
 export { coreDifference } from './difference';
 export { coreGraph } from './graph';
 export { coreHistory } from './history';

modules/ui/intro/intro.js

@@ -1,13 +1,9 @@
-import {
-    select as d3_select,
-    selectAll as d3_selectAll
-} from 'd3-selection';
+import { select as d3_select, selectAll as d3_selectAll } from 'd3-selection';
 
 import { t, textDirection } from '../../util/locale';
 import { localize } from './helper';
 
 import { coreGraph } from '../../core/graph';
-import { dataIntroGraph } from '../../../data/intro_graph.json';
 import { modeBrowse } from '../../modes/browse';
 import { osmEntity } from '../../osm/entity';
 import { svgIcon } from '../../svg/icon';
@@ -23,196 +19,201 @@ import { uiIntroBuilding } from './building';
 import { uiIntroStartEditing } from './start_editing';
 
 
-var chapterUi = {
-    welcome: uiIntroWelcome,
-    navigation: uiIntroNavigation,
-    point: uiIntroPoint,
-    area: uiIntroArea,
-    line: uiIntroLine,
-    building: uiIntroBuilding,
-    startEditing: uiIntroStartEditing
+const chapterUi = {
+  welcome: uiIntroWelcome,
+  navigation: uiIntroNavigation,
+  point: uiIntroPoint,
+  area: uiIntroArea,
+  line: uiIntroLine,
+  building: uiIntroBuilding,
+  startEditing: uiIntroStartEditing
 };
 
-var chapterFlow = [
-    'welcome',
-    'navigation',
-    'point',
-    'area',
-    'line',
-    'building',
-    'startEditing'
+const chapterFlow = [
+  'welcome',
+  'navigation',
+  'point',
+  'area',
+  'line',
+  'building',
+  'startEditing'
 ];
 
 
 export function uiIntro(context) {
-    var INTRO_IMAGERY = 'EsriWorldImageryClarity';
-    var introGraph = {};
-    var _currChapter;
-
-    // create entities for intro graph and localize names
-    for (var id in dataIntroGraph) {
-        introGraph[id] = osmEntity(localize(dataIntroGraph[id]));
-    }
+  const INTRO_IMAGERY = 'EsriWorldImageryClarity';
+  let _introGraph = {};
+  let _currChapter;
 
 
-    function intro(selection) {
-        context.enter(modeBrowse(context));
-
-        // Save current map state
-        var osm = context.connection();
-        var history = context.history().toJSON();
-        var hash = window.location.hash;
-        var center = context.map().center();
-        var zoom = context.map().zoom();
-        var background = context.background().baseLayerSource();
-        var overlays = context.background().overlayLayerSources();
-        var opacity = d3_selectAll('#map .layer-background').style('opacity');
-        var caches = osm && osm.caches();
-        var baseEntities = context.history().graph().base().entities;
-
-        // Show sidebar and disable the sidebar resizing button
-        // (this needs to be before `context.inIntro(true)`)
-        context.ui().sidebar.expand();
-        d3_selectAll('button.sidebar-toggle').classed('disabled', true);
-
-        // Block saving
-        context.inIntro(true);
-
-        // Load semi-real data used in intro
-        if (osm) { osm.toggle(false).reset(); }
-        context.history().reset();
-        context.history().merge(Object.values(coreGraph().load(introGraph).entities));
-        context.history().checkpoint('initial');
-
-        // Setup imagery
-        var imagery = context.background().findSource(INTRO_IMAGERY);
-        if (imagery) {
-            context.background().baseLayerSource(imagery);
-        } else {
-            context.background().bing();
+  function intro(selection) {
+    context.data().get('intro_graph')
+      .then(dataIntroGraph => {
+        // create entities for intro graph and localize names
+        for (let id in dataIntroGraph) {
+          if (!_introGraph[id]) {
+            _introGraph[id] = osmEntity(localize(dataIntroGraph[id]));
+          }
         }
-        overlays.forEach(function(d) {
-            context.background().toggleOverlayLayer(d);
-        });
-
-        // Setup data layers (only OSM)
-        var layers = context.layers();
-        layers.all().forEach(function(item) {
-            // if the layer has the function `enabled`
-            if (typeof item.layer.enabled === 'function') {
-                item.layer.enabled(item.id === 'osm');
-            }
-        });
+        selection.call(startIntro);
+      });
+  }
 
 
-        d3_selectAll('#map .layer-background').style('opacity', 1);
+  function startIntro(selection) {
+    context.enter(modeBrowse(context));
 
-        var curtain = uiCurtain();
-        selection.call(curtain);
+    // Save current map state
+    let osm = context.connection();
+    let history = context.history().toJSON();
+    let hash = window.location.hash;
+    let center = context.map().center();
+    let zoom = context.map().zoom();
+    let background = context.background().baseLayerSource();
+    let overlays = context.background().overlayLayerSources();
+    let opacity = d3_selectAll('#map .layer-background').style('opacity');
+    let caches = osm && osm.caches();
+    let baseEntities = context.history().graph().base().entities;
 
-        // Store that the user started the walkthrough..
-        context.storage('walkthrough_started', 'yes');
+    // Show sidebar and disable the sidebar resizing button
+    // (this needs to be before `context.inIntro(true)`)
+    context.ui().sidebar.expand();
+    d3_selectAll('button.sidebar-toggle').classed('disabled', true);
 
-        // Restore previous walkthrough progress..
-        var storedProgress = context.storage('walkthrough_progress') || '';
-        var progress = storedProgress.split(';').filter(Boolean);
+    // Block saving
+    context.inIntro(true);
 
-        var chapters = chapterFlow.map(function(chapter, i) {
-            var s = chapterUi[chapter](context, curtain.reveal)
-                .on('done', function() {
-                    context.presets().init();  // clear away "recent" presets
+    // Load semi-real data used in intro
+    if (osm) { osm.toggle(false).reset(); }
+    context.history().reset();
+    context.history().merge(Object.values(coreGraph().load(_introGraph).entities));
+    context.history().checkpoint('initial');
 
-                    buttons.filter(function(d) {
-                        return d.title === s.title;
-                    }).classed('finished', true);
-
-                    if (i < chapterFlow.length - 1) {
-                        var next = chapterFlow[i + 1];
-                        d3_select('button.chapter-' + next)
-                            .classed('next', true);
-                    }
-
-                    // Store walkthrough progress..
-                    progress.push(chapter);
-                    context.storage('walkthrough_progress', utilArrayUniq(progress).join(';'));
-                });
-            return s;
-        });
-
-        chapters[chapters.length - 1].on('startEditing', function() {
-            // Store walkthrough progress..
-            progress.push('startEditing');
-            context.storage('walkthrough_progress', utilArrayUniq(progress).join(';'));
-
-            // Store if walkthrough is completed..
-            var incomplete = utilArrayDifference(chapterFlow, progress);
-            if (!incomplete.length) {
-                context.storage('walkthrough_completed', 'yes');
-            }
-
-            curtain.remove();
-            navwrap.remove();
-            d3_selectAll('#map .layer-background').style('opacity', opacity);
-            d3_selectAll('button.sidebar-toggle').classed('disabled', false);
-            if (osm) { osm.toggle(true).reset().caches(caches); }
-            context.history().reset().merge(Object.values(baseEntities));
-            context.background().baseLayerSource(background);
-            overlays.forEach(function(d) { context.background().toggleOverlayLayer(d); });
-            if (history) { context.history().fromJSON(history, false); }
-            context.map().centerZoom(center, zoom);
-            window.location.replace(hash);
-            context.inIntro(false);
-        });
-
-        var navwrap = selection
-            .append('div')
-            .attr('class', 'intro-nav-wrap fillD');
-
-        navwrap
-            .append('svg')
-            .attr('class', 'intro-nav-wrap-logo')
-            .append('use')
-            .attr('xlink:href', '#iD-logo-walkthrough');
-
-        var buttonwrap = navwrap
-            .append('div')
-            .attr('class', 'joined')
-            .selectAll('button.chapter');
-
-        var buttons = buttonwrap
-            .data(chapters)
-            .enter()
-            .append('button')
-            .attr('class', function(d, i) { return 'chapter chapter-' + chapterFlow[i]; })
-            .on('click', enterChapter);
-
-        buttons
-            .append('span')
-            .text(function(d) { return t(d.title); });
-
-        buttons
-            .append('span')
-            .attr('class', 'status')
-            .call(svgIcon((textDirection === 'rtl' ? '#iD-icon-backward' : '#iD-icon-forward'), 'inline'));
-
-        enterChapter(chapters[0]);
-
-
-        function enterChapter(newChapter) {
-            if (_currChapter) { _currChapter.exit(); }
-            context.enter(modeBrowse(context));
-
-            _currChapter = newChapter;
-            _currChapter.enter();
-
-            buttons
-                .classed('next', false)
-                .classed('active', function(d) {
-                    return d.title === _currChapter.title;
-                });
-        }
+    // Setup imagery
+    let imagery = context.background().findSource(INTRO_IMAGERY);
+    if (imagery) {
+      context.background().baseLayerSource(imagery);
+    } else {
+      context.background().bing();
     }
+    overlays.forEach(d => context.background().toggleOverlayLayer(d));
+
+    // Setup data layers (only OSM)
+    let layers = context.layers();
+    layers.all().forEach(item => {
+      // if the layer has the function `enabled`
+      if (typeof item.layer.enabled === 'function') {
+        item.layer.enabled(item.id === 'osm');
+      }
+    });
 
 
-    return intro;
+    d3_selectAll('#map .layer-background').style('opacity', 1);
+
+    let curtain = uiCurtain();
+    selection.call(curtain);
+
+    // Store that the user started the walkthrough..
+    context.storage('walkthrough_started', 'yes');
+
+    // Restore previous walkthrough progress..
+    let storedProgress = context.storage('walkthrough_progress') || '';
+    let progress = storedProgress.split(';').filter(Boolean);
+
+    let chapters = chapterFlow.map((chapter, i) => {
+      let s = chapterUi[chapter](context, curtain.reveal)
+        .on('done', () => {
+          context.presets().init();  // clear away "recent" presets
+
+          buttons
+            .filter(d => d.title === s.title)
+            .classed('finished', true);
+
+          if (i < chapterFlow.length - 1) {
+            const next = chapterFlow[i + 1];
+            d3_select(`button.chapter-${next}`)
+              .classed('next', true);
+          }
+
+          // Store walkthrough progress..
+          progress.push(chapter);
+          context.storage('walkthrough_progress', utilArrayUniq(progress).join(';'));
+        });
+      return s;
+    });
+
+    chapters[chapters.length - 1].on('startEditing', () => {
+      // Store walkthrough progress..
+      progress.push('startEditing');
+      context.storage('walkthrough_progress', utilArrayUniq(progress).join(';'));
+
+      // Store if walkthrough is completed..
+      let incomplete = utilArrayDifference(chapterFlow, progress);
+      if (!incomplete.length) {
+        context.storage('walkthrough_completed', 'yes');
+      }
+
+      curtain.remove();
+      navwrap.remove();
+      d3_selectAll('#map .layer-background').style('opacity', opacity);
+      d3_selectAll('button.sidebar-toggle').classed('disabled', false);
+      if (osm) { osm.toggle(true).reset().caches(caches); }
+      context.history().reset().merge(Object.values(baseEntities));
+      context.background().baseLayerSource(background);
+      overlays.forEach(d => context.background().toggleOverlayLayer(d));
+      if (history) { context.history().fromJSON(history, false); }
+      context.map().centerZoom(center, zoom);
+      window.location.replace(hash);
+      context.inIntro(false);
+    });
+
+    let navwrap = selection
+      .append('div')
+      .attr('class', 'intro-nav-wrap fillD');
+
+    navwrap
+      .append('svg')
+      .attr('class', 'intro-nav-wrap-logo')
+      .append('use')
+      .attr('xlink:href', '#iD-logo-walkthrough');
+
+    let buttonwrap = navwrap
+      .append('div')
+      .attr('class', 'joined')
+      .selectAll('button.chapter');
+
+    let buttons = buttonwrap
+      .data(chapters)
+      .enter()
+      .append('button')
+      .attr('class', (d, i) => `chapter chapter-${chapterFlow[i]}`)
+      .on('click', enterChapter);
+
+    buttons
+      .append('span')
+      .text(d => t(d.title));
+
+    buttons
+      .append('span')
+      .attr('class', 'status')
+      .call(svgIcon((textDirection === 'rtl' ? '#iD-icon-backward' : '#iD-icon-forward'), 'inline'));
+
+    enterChapter(chapters[0]);
+
+
+    function enterChapter(newChapter) {
+      if (_currChapter) { _currChapter.exit(); }
+      context.enter(modeBrowse(context));
+
+      _currChapter = newChapter;
+      _currChapter.enter();
+
+      buttons
+        .classed('next', false)
+        .classed('active', d => d.title === _currChapter.title);
+    }
+  }
+
+
+  return intro;
 }