-
Notifications
You must be signed in to change notification settings - Fork 75
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #725 from OpenGeoscience/tutorial
Add tutorial infrastructure.
- Loading branch information
Showing
29 changed files
with
1,060 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -10,3 +10,4 @@ built/ | |
| bower_components/ | ||
| dist/ | ||
| .eslintcache | ||
| tutorials/ | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| /* Find all tutorials. */ | ||
| var tutorials = require.context('../tutorials', true, /\/tutorial.json$/); | ||
|
|
||
| describe('tutorials', function () { | ||
| 'use strict'; | ||
|
|
||
| var $ = require('jquery'); | ||
|
|
||
| var imageTest = require('./image-test'); | ||
|
|
||
| beforeEach(function () { | ||
| imageTest.prepareIframeTest(); | ||
| }); | ||
|
|
||
| /* Test each tutorial */ | ||
| tutorials.keys().forEach(function (tutorialPath) { | ||
| var tutorialName = tutorialPath.split('/')[1]; | ||
| describe('Test ' + tutorialName, function () { | ||
| /* Load the tutorial in the test iframe */ | ||
| beforeEach(function (done) { | ||
| $('#map').one('load', done); | ||
| $('#map').attr('src', '/tutorials/' + tutorialName + '/index.html'); | ||
| }); | ||
| it('Run tutorial tests', function (done) { | ||
| var base$, tests; | ||
|
|
||
| base$ = $('iframe#map')[0].contentWindow.jQuery; | ||
| /* Find all codeblock_tests. We chain them together and end on the it | ||
| * function's done callback, so reverse them so that they run in the | ||
| * order written. */ | ||
| tests = base$(base$('.codeblock_test').get().reverse()); | ||
| tests.each(function (testIdx) { | ||
| var test = base$(this), | ||
| codeblock = test.prevAll('.codeblock').eq(0), | ||
| target = base$('#' + codeblock.attr('target')), | ||
| testDefer = $.Deferred(); | ||
| testDefer.then(done); | ||
| done = function () { | ||
| /* When the codeblock's target has runm handle the results */ | ||
| var onCodeLoaded = function () { | ||
| var targetWindow = target[0].contentWindow, | ||
| tut$ = targetWindow.$, | ||
| deferreds = []; | ||
| /* Evaluate and wait for each idle function and promises. */ | ||
| test.data('idlefuncs').forEach(function (idleFunc) { | ||
| var defer = tut$.Deferred(); | ||
| deferreds.push(defer); | ||
| var idle = targetWindow.eval(idleFunc); | ||
| if (!tut$.isFunction(idle)) { | ||
| idle = idle.done; | ||
| } | ||
| idle(function () { | ||
| defer.resolve(); | ||
| }); | ||
| }); | ||
| /* When all idle functions have resolved, evaluate each test in | ||
| * the test list. */ | ||
| tut$.when.apply(tut$, deferreds).fail(function () { | ||
| throw new Error('Idle functions were rejected'); | ||
| }).then(function () { | ||
| test.data('tests').forEach(function (testExp) { | ||
| var result = targetWindow.eval(testExp); | ||
| /* If the result isn't truthy, make sure our expect has a | ||
| * description telling which test block and specific test | ||
| * failed. */ | ||
| expect(result).toBeTruthy(test.data('description') + ' -> ' + testExp); | ||
| }); | ||
| testDefer.resolve(); | ||
| }); | ||
| }; | ||
| /* If we have already run the specific codeblock, don't run it | ||
| * again. If not, click run and wait for the results. On the | ||
| * first test (which will be the last added), always force the code | ||
| * block to run, as it ensures that we catch the load event. */ | ||
| if (codeblock.is(base$('.codeblock.active:last')) && testIdx !== tests.length - 1) { | ||
| onCodeLoaded(); | ||
| } else { | ||
| target.one('load', onCodeLoaded); | ||
| if (testIdx !== tests.length - 1) { | ||
| codeblock.find('.codeblock_run').click(); | ||
| } else { | ||
| var evt = base$.Event('click'); | ||
| evt.shiftKey = true; | ||
| codeblock.find('.codeblock_run').trigger(evt); | ||
| } | ||
| } | ||
| }; | ||
| }); | ||
| /* Call the first step in the chained tests */ | ||
| done(); | ||
| }, 15000); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| { | ||
| "globals": { | ||
| "d3": true, | ||
| "geo": true, | ||
| "$": true, | ||
| "CodeMirror": true | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| extends ../common/index.pug | ||
|
|
||
| block mainTutorial | ||
| :markdown-it | ||
| # Tutorial - Simple Map | ||
| We need a little bit of html to import the geojs library and to create a div to show our map: | ||
|
|
||
| +codeblock('html', 1). | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <script type="text/javascript" src="../../built/geo.min.js"></script> | ||
| <script type="text/javascript" src="../../built/geo.ext.min.js"></script> | ||
| </head> | ||
| <body> | ||
| <div id="map"></div> | ||
| </body> | ||
| </html> | ||
|
|
||
| :markdown-it | ||
| The second script, ``geo.ext.min.js``, is optional. It adds support | ||
| for svg elements and touch interaction. | ||
|
|
||
| Some CSS will make our map fill the page: | ||
|
|
||
| +codeblock('css', 2). | ||
| html,body,#map{ | ||
| width: 100%; | ||
| height: 100%; | ||
| padding: 0; | ||
| margin: 0; | ||
| } | ||
|
|
||
| :markdown-it | ||
| And some javascript to ask for a map and place the default map tiles on it: | ||
|
|
||
| +codeblock('javascript', 3, undefined, true). | ||
| var map = geo.map({ | ||
| node: "#map" | ||
| }); | ||
| map.createLayer('osm'); | ||
| +codeblock_test('map has one layer', | ||
| 'map.layers().length === 1') | ||
| +codeblock_test('first layer is an osmLayer', | ||
| 'map.layers()[0] instanceof geo.osmLayer') | ||
| +codeblock_test('zoom is 4', | ||
| 'map.zoom() === 4') | ||
|
|
||
| :markdown-it | ||
| Move the map to Kensington Gardens, London and zoom in. | ||
|
|
||
| +codeblock('javascript', 4). | ||
| map.center({x: -0.1704, y: 51.5047}).zoom(14); | ||
| +codeblock_test('zoom is 14', | ||
| 'map.zoom() === 14' | ||
| ) | ||
|
|
||
| :markdown-it | ||
| We could have started the map at this location by adding the center and | ||
| zoom parameters to the initial ``map()`` call: | ||
|
|
||
| +codeblock('javascript', 5, 2, false, 'Step 3-B'). | ||
| var map = geo.map({ | ||
| node: "#map", | ||
| center: {x: -0.1704, y: 51.5047}, | ||
| zoom: 14 | ||
| }); | ||
| map.createLayer('osm'); | ||
| +codeblock_test('map has one osm layer and zoom is 14', [ | ||
| 'map.layers().length === 1', | ||
| 'map.layers()[0] instanceof geo.osmLayer', | ||
| 'map.zoom() === 14' | ||
| ]) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| { | ||
| "title": "Simple Map", | ||
| "hideNavbar": true, | ||
| "level": 0, | ||
| "order": 0, | ||
| "tutorialCss": [], | ||
| "tutorialJs": [], | ||
| "about": { | ||
| "text": "Make a simple map. Includes HTML, CSS, and Javascript." | ||
| } | ||
| } |
Oops, something went wrong.