Localize a few more walkthrough names, start buildings chapter

modules/ui/intro/building.js

@@ -0,0 +1,148 @@
+import * as d3 from 'd3';
+import { t } from '../../util/locale';
+import { utilRebind } from '../../util/rebind';
+import { icon, pad } from './helper';
+
+
+export function uiIntroBuilding(context, reveal) {
+    var dispatch = d3.dispatch('done'),
+        house = [-85.62815, 41.95638],
+        tank = [-85.62732, 41.95347],
+        timeouts = [];
+
+
+    var chapter = {
+        title: 'intro.buildings.title'
+    };
+
+
+    function timeout(f, t) {
+        timeouts.push(window.setTimeout(f, t));
+    }
+
+
+    function eventCancel() {
+        d3.event.stopPropagation();
+        d3.event.preventDefault();
+    }
+
+
+    function addBuilding() {
+        var tooltip = reveal('button.add-area',
+            t('intro.buildings.add_building', { button: icon('#icon-area', 'pre-text') }));
+
+        // tooltip.selectAll('.tooltip-inner')
+        //     .insert('svg', 'span')
+        //     .attr('class', 'tooltip-illustration')
+        //     .append('use')
+        //     .attr('xlink:href', '#landuse-images');
+
+        context.on('enter.intro', function(mode) {
+            if (mode.id !== 'add-area') return;
+            continueTo(startBuilding);
+        });
+
+        function continueTo(nextStep) {
+            context.on('enter.intro', null);
+            nextStep();
+        }
+    }
+
+
+    function startBuilding() {
+        if (context.mode().id !== 'add-area') {
+            return chapter.restart();
+        }
+
+        var padding = 120 * Math.pow(2, context.map().zoom() - 19);
+        var box = pad(house, padding, context);
+        reveal(box, t('intro.buildings.start_building'));
+
+        context.map().on('move.intro drawn.intro', function() {
+            padding = 120 * Math.pow(2, context.map().zoom() - 19);
+            box = pad(house, padding, context);
+            reveal(box, t('intro.buildings.start_building'), { duration: 0 });
+        });
+
+        context.on('enter.intro', function(mode) {
+            if (mode.id !== 'draw-area') return chapter.restart();
+            continueTo(drawBuilding);
+        });
+
+        function continueTo(nextStep) {
+            context.map().on('move.intro drawn.intro', null);
+            context.on('enter.intro', null);
+            nextStep();
+        }
+    }
+
+
+    function drawBuilding() {
+        if (context.mode().id !== 'draw-area') {
+            return chapter.restart();
+        }
+
+        var padding = 150 * Math.pow(2, context.map().zoom() - 19);
+        var box = pad(house, padding, context);
+        reveal(box, t('intro.buildings.continue_building'));
+
+        context.map().on('move.intro drawn.intro', function() {
+            padding = 150 * Math.pow(2, context.map().zoom() - 19);
+            box = pad(house, padding, context);
+            reveal(box, t('intro.buildings.continue_building'), {duration: 0});
+        });
+
+        context.on('enter.intro', function(mode) {
+            if (mode.id === 'draw-area')
+                return;
+            else if (mode.id === 'select')
+                return continueTo(play);
+            else
+                return chapter.restart();
+        });
+
+        function continueTo(nextStep) {
+            context.map().on('move.intro drawn.intro', null);
+            context.on('enter.intro', null);
+            nextStep();
+        }
+    }
+
+
+    function play() {
+        dispatch.call('done');
+        reveal('.intro-nav-wrap .chapter-startEditing',
+            t('intro.buildings.play', { next: t('intro.startediting.title') }), {
+                buttonText: t('intro.ok'),
+                buttonCallback: function() { reveal('#id-container'); }
+            }
+        );
+    }
+
+
+    chapter.enter = function() {
+        context.history().reset('initial');
+        context.map().zoom(19).centerEase(house);
+        addBuilding();
+    };
+
+
+    chapter.exit = function() {
+        timeouts.forEach(window.clearTimeout);
+        context.on('enter.intro', null);
+        context.on('exit.intro', null);
+        context.map().on('move.intro drawn.intro', null);
+        context.history().on('change.intro', null);
+        d3.select('.preset-search-input').on('keydown.intro keyup.intro', null);
+        d3.select('.more-fields .combobox-input').on('click.intro', null);
+    };
+
+
+    chapter.restart = function() {
+        chapter.exit();
+        chapter.enter();
+    };
+
+
+    return utilRebind(chapter, dispatch, 'on');
+}

modules/ui/intro/helper.js

@@ -39,46 +39,51 @@ export function icon(name, svgklass) {
 
 
 export var localNames = {
+    w17967809: 'azaleamum_drive',
     n2140018997: 'city_hall',
+    w17965998: 'conrail_rr',
+    w134150845: 'conrail_rr',
+    w134150802: 'e_michigan_ave',
+    w134150836: 'e_michigan_ave',
+    w41074896: 'e_michigan_ave',
+    w17967444: 'east_st',
+    w17965502: 'elm_st',
     n367813436: 'fire_department',
+    n354031352: 'first_baptist_church',
+    w17965351: 'flower_st',
+    w17964996: 'foster_st',
     w203988286: 'memory_isle_park',
+    w17966942: 'millard_st',
+    w17964793: 'morris_ave',
+    w17967397: 'n_andrews_st',
+    w17967326: 'n_constantine_st',
+    w143497377: 'n_main_st',
+    w203049587: 'petting_zoo',
+    w17966984: 'portage_ave',
+    w170848330: 'portage_river',
+    w17967752: 'railroad_dr',
     w203972937: 'riverwalk_trail',
     w203972938: 'riverwalk_trail',
     w203972940: 'riverwalk_trail',
+    w170848823: 'rocky_river',
+    w170848824: 'rocky_river',
+    w170848331: 'rocky_river',
+    w17967315: 's_andrews_st',
+    w17966400: 's_constantine_st',
+    w17964497: 's_constantine_st',
+    w134150801: 's_main_st',
+    w134150830: 's_main_st',
+    w17966462: 's_main_st',
+    w203986457: 'scidmore_park',
+    w17966102: 'south_st',
+    w17965834: 'spring_st',
+    w170989131: 'st_joseph_river',
     w41785752: 'w_michigan_ave',
     w134150789: 'w_michigan_ave',
     w134150795: 'w_michigan_ave',
     w134150800: 'w_michigan_ave',
     w134150811: 'w_michigan_ave',
-    w134150802: 'e_michigan_ave',
-    w134150836: 'e_michigan_ave',
-    w41074896: 'e_michigan_ave',
-    w17965834: 'spring_st',
-    w203986457: 'scidmore_park',
-    w203049587: 'petting_zoo',
-    w17967397: 'n_andrews_st',
-    w17967315: 's_andrews_st',
-    w17967326: 'n_constantine_st',
-    w17966400: 's_constantine_st',
-    w170848823: 'rocky_river',
-    w170848824: 'rocky_river',
-    w170848331: 'rocky_river',
-    w17967752: 'railroad_dr',
-    w17965998: 'conrail_rr',
-    w134150845: 'conrail_rr',
-    w170989131: 'st_joseph_river',
-    w143497377: 'n_main_st',
-    w134150801: 's_main_st',
-    w134150830: 's_main_st',
-    w17966462: 's_main_st',
-    w17967734: 'water_st',
-    w17964996: 'foster_st',
-    w170848330: 'portage_river',
-    w17965351: 'flower_st',
-    w17965502: 'elm_st',
     w17965402: 'walnut_st',
-    w17964793: 'morris_ave',
-    w17967444: 'east_st',
-    w17966984: 'portage_ave'
+    w17967734: 'water_st'
 };
 

modules/ui/intro/intro.js

@@ -14,6 +14,7 @@ import { uiIntroNavigation } from './navigation';
 import { uiIntroPoint } from './point';
 import { uiIntroArea } from './area';
 import { uiIntroLine } from './line';
+import { uiIntroBuilding } from './building';
 import { uiIntroStartEditing } from './start_editing';
 
 
@@ -23,6 +24,7 @@ var chapterUi = {
     point: uiIntroPoint,
     area: uiIntroArea,
     line: uiIntroLine,
+    building: uiIntroBuilding,
     startEditing: uiIntroStartEditing
 };
 
@@ -32,6 +34,7 @@ var chapterFlow = [
     'point',
     'area',
     'line',
+    'building',
     'startEditing'
 ];
 

modules/ui/intro/line.js

@@ -285,8 +285,8 @@ export function uiIntroLine(context, reveal) {
 
     function play() {
         dispatch.call('done');
-        reveal('.intro-nav-wrap .chapter-startEditing',
-            t('intro.lines.play', { next: t('intro.startediting.title') }), {
+        reveal('.intro-nav-wrap .chapter-buildings',
+            t('intro.lines.play', { next: t('intro.buildings.title') }), {
                 buttonText: t('intro.ok'),
                 buttonCallback: function() { reveal('#id-container'); }
             }