Merge pull request #3558 from tschaub/built-examples

Example sources in examples dir and built examples in build/examples.

.gitignore

@@ -1,6 +1,5 @@
 *.pyc
 /build/
-/examples/
 /node_modules/
 /dist/
 /coverage/

build.py

@@ -112,25 +112,19 @@ EXECUTABLES = [variables.CLEANCSS, variables.GIT, variables.GJSLINT,
                variables.JSDOC, variables.JSHINT, variables.PYTHON,
                variables.PHANTOMJS]
 
-EXAMPLES_SRC_ALL = [path for path in ifind('examples_src')]
+EXAMPLES_SRC_ALL = [path for path in ifind('examples')]
 
 EXAMPLES_SRC_HTML = [path
             for path in EXAMPLES_SRC_ALL
             if path.endswith('.html')
-            if path != 'examples_src/index.html']
+            if path != 'examples/index.html']
 
 EXAMPLES_SRC_JS = [example.replace('.html', '.js')
             for example in EXAMPLES_SRC_HTML]
 
-EXAMPLES_DEST_ALL = [path.replace('examples_src', 'examples')
+EXAMPLES_DEST_ALL = [path.replace('examples', 'build/examples')
             for path in EXAMPLES_SRC_ALL]
 
-EXAMPLES_JSON = ['build/' + example.replace('.html', '.json')
-                 for example in EXAMPLES_SRC_HTML]
-
-EXAMPLES_COMBINED = ['build/' + example.replace('.html', '.combined.js')
-                     for example in EXAMPLES_SRC_HTML]
-
 GLSL_SRC = [path
             for path in ifind('src')
             if path.endswith('.glsl')]
@@ -178,7 +172,7 @@ virtual('default', 'build')
 
 
 virtual('ci', 'lint', 'build', 'test', 'test-rendering',
-    'build/examples/all.combined.js', 'check-examples', 'apidoc')
+    'build/compiled-examples/all.combined.js', 'check-examples', 'apidoc')
 
 
 virtual('build', 'build/ol.css', 'build/ol.js', 'build/ol-debug.js',
@@ -258,35 +252,31 @@ def build_test_rendering_requires(t):
   build_requires(t)
 
 
-virtual('build-examples', 'examples', 'build/examples/all.combined.js',
-        EXAMPLES_COMBINED)
-
-
 virtual('examples', EXAMPLES_DEST_ALL)
 
 
-@rule(r'\Aexamples/(?P<filepath>.*)\Z')
+@rule(r'\Abuild\/examples/(?P<filepath>.*)\Z')
 def examples_dest(name, match):
     def action(t):
         t.run('node', 'tasks/build-examples.js')
-    dependencies = ['examples_src/%(filepath)s' % match.groupdict()]
+    dependencies = ['examples/%(filepath)s' % match.groupdict()]
     return Target(name, action=action, dependencies=dependencies)
 
 
-@target('build/examples/all.combined.js', 'build/examples/all.js',
+@target('build/compiled-examples/all.combined.js', 'build/compiled-examples/all.js',
         SRC, SHADER_SRC, 'config/examples-all.json', NPM_INSTALL)
 def build_examples_all_combined_js(t):
     t.run('node', 'tasks/build.js', 'config/examples-all.json',
-          'build/examples/all.combined.js')
+          'build/compiled-examples/all.combined.js')
     report_sizes(t)
 
 
-@target('build/examples/all.js', EXAMPLES_SRC_JS)
+@target('build/compiled-examples/all.js', EXAMPLES_SRC_JS)
 def build_examples_all_js(t):
     t.output('%(PYTHON)s', 'bin/combine-examples.py', t.dependencies)
 
 
-@rule(r'\Abuild/examples/(?P<id>.*).json\Z')
+@rule(r'\Abuild/compiled-examples/(?P<id>.*).json\Z')
 def examples_star_json(name, match):
     def action(t):
 
@@ -309,7 +299,7 @@ def examples_star_json(name, match):
           "src": [
             "src/**/*.js",
             "build/ol.ext/*.js",
-            "examples/%(id)s.js" % match.groupdict()],
+            "build/examples/%(id)s.js" % match.groupdict()],
           "compile": {
             "js": [
               "externs/olx.js",
@@ -391,15 +381,15 @@ def examples_star_json(name, match):
                   dependencies=[__file__, NPM_INSTALL])
 
 
-@rule(r'\Abuild/examples/(?P<id>.*).combined.js\Z')
+@rule(r'\Abuild/compiled-examples/(?P<id>.*).combined.js\Z')
 def examples_star_combined_js(name, match):
     def action(t):
-        config = 'build/examples/%(id)s.json' % match.groupdict()
+        config = 'build/compiled-examples/%(id)s.json' % match.groupdict()
         t.run('node', 'tasks/build.js', config, name)
         report_sizes(t)
     dependencies = [SRC, SHADER_SRC,
                     'examples/%(id)s.js' % match.groupdict(),
-                    'build/examples/%(id)s.json' % match.groupdict(),
+                    'build/compiled-examples/%(id)s.json' % match.groupdict(),
                     NPM_INSTALL]
     return Target(name, action=action, dependencies=dependencies)
 
@@ -427,7 +417,7 @@ def build_lint_src_timestamp(t):
 virtual('jshint', 'build/jshint-timestamp')
 
 @target('build/jshint-timestamp', SRC, EXAMPLES_SRC_JS, SPEC, SPEC_RENDERING,
-        TASKS, NPM_INSTALL, precious=True)
+        'examples/resources/common.js', TASKS, NPM_INSTALL, precious=True)
 def build_jshint_timestamp(t):
     t.run(variables.JSHINT, '--verbose', t.newer(t.dependencies))
     t.touch()
@@ -633,7 +623,7 @@ def build_check_whitespace_timestamp(t):
 virtual('apidoc', 'build/jsdoc-%(BRANCH)s-timestamp' % vars(variables))
 
 
-@target('build/jsdoc-%(BRANCH)s-timestamp' % vars(variables), 'host-resources',
+@target('build/jsdoc-%(BRANCH)s-timestamp' % vars(variables),
         SRC, SHADER_SRC, ifind('config/jsdoc/api/template'),
         NPM_INSTALL)
 def jsdoc_BRANCH_timestamp(t):
@@ -675,14 +665,7 @@ def split_example_file(example, dst_dir):
     target_require.close()
 
 
-@target('host-resources', phony=True)
+@target('host-examples', 'build', 'examples', phony=True)
-def host_resources(t):
-    resources_dir = 'build/hosted/%(BRANCH)s/resources'
-    t.rm_rf(resources_dir)
-    t.cp_r('resources', resources_dir)
-
-
-@target('host-examples', 'build', 'host-resources', 'examples', phony=True)
 def host_examples(t):
     examples_dir = 'build/hosted/%(BRANCH)s/examples'
     build_dir = 'build/hosted/%(BRANCH)s/build'
@@ -690,7 +673,7 @@ def host_examples(t):
     closure_lib_path = output('node', '-e',
         'process.stdout.write(require("closure-util").getLibraryPath())')
     t.rm_rf(examples_dir)
-    t.cp_r('examples', examples_dir)
+    t.cp_r('build/examples', examples_dir)
     for example in EXAMPLES_SRC_JS:
         split_example_file(example, examples_dir % vars(variables))
     t.cp('bin/loader_hosted_examples.js', examples_dir + '/loader.js')
@@ -718,14 +701,15 @@ def host_examples(t):
 
 @target('check-examples', 'host-examples', phony=True)
 def check_examples(t):
-    examples = ['build/hosted/%(BRANCH)s/' + e.replace('examples_src', 'examples')
+    examples = ['build/hosted/%(BRANCH)s/' + e
                 for e in EXAMPLES_SRC_HTML
                 if not open(e.replace('.html', '.js'), 'rU').readline().startswith('// NOCOMPILE')]
     all_examples = [e + '?mode=advanced' for e in examples]
     # Run the examples checks in a pool of threads
     pool = ThreadPool()
     for example in all_examples:
-        pool.add_task(t.run, '%(PHANTOMJS)s', 'bin/check-example.js', example)
+        pool.add_task(t.run, '%(PHANTOMJS)s', '--ssl-protocol=any',
+                      '--ignore-ssl-errors=true', 'bin/check-example.js', example)
     errors = pool.wait_completion()
     if errors:
         sys.exit(1)
@@ -825,9 +809,9 @@ Other less frequently used targets are:
   apidoc           - Builds the API-Documentation using JSDoc3.
   ci               - Builds all examples in various modes and usually takes a
                      long time to finish. This target calls the following
-                     targets: lint, build, build-all, test, test-rendering,
+                     targets: 'lint', 'build', 'test', 'test-rendering',
-                     build-examples, check-examples and apidoc. This is the
+                     'build/compiled-examples/all.combined.js', 'check-examples',
-                     target run on Travis CI.
+                     and 'apidoc'. This is the target run on Travis CI.
   test-coverage    - Generates a test coverage report in the coverage folder.
   reallyclean      - Remove untracked files from the repository.
   checkdeps        - Checks whether all required development software is

config/examples-all.json

@@ -3,7 +3,7 @@
   "src": [
     "src/**/*.js",
     "build/ol.ext/*.js",
-    "build/examples/all.js"
+    "build/compiled-examples/all.js"
   ],
   "compile": {
     "js": [

config/examples/example.html

@@ -4,22 +4,21 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" type="text/css">
     <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="./resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
     {{{ extraHead }}}
     {{{ css.tag }}}
-    <link rel="stylesheet" href="../resources/prism/prism.css" type="text/css">
+    <link rel="stylesheet" href="./resources/prism/prism.css" type="text/css">
-    <script src="../resources/zeroclipboard/ZeroClipboard.min.js"></script>
+    <script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
     <title>{{ title }}</title>
   </head>
   <body>
 
     <div class="navbar navbar-inverse navbar-fixed-top">
       <div class="navbar-inner">
-        <div class="container">
+        <div class="container" id="navbar-inner-container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+          <a class="brand" href="./"><img src="./resources/logo-70x70.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -77,10 +76,10 @@
       </div>
     </div>
 
-    <script src="../resources/jquery.min.js"></script>
+    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
-    <script src="../resources/bootstrap/js/bootstrap.min.js"></script>
+    <script src="http://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
-    <script src="../resources/example-behaviour.js"></script>
+    <script src="./resources/common.js"></script>
-    <script src="../resources/prism/prism.min.js"></script>
+    <script src="./resources/prism/prism.min.js"></script>
     {{{ js.tag }}}
 
   </body>

config/examples/readme.md

@@ -1,16 +1,21 @@
-This folder contains example templates. These templates are used to build the examples in `examples_src/` folder. The resulting examples are written to the `examples/` folder.
+This folder contains example templates. These templates are used to build the examples in the `examples/` folder. The resulting examples are written to the `build/examples` folder.
 
 Although the main purpose of these examples is to demonstrate how to use the API, they also serve other purposes in the development cycle, and so are not exactly as they would be in normal application code:
 
-* every time the library changes, they are compiled together with the library as a basic check that they remain in sync with the library
+ * every time the library changes, they are compiled together with the library as a basic check that they remain in sync with the library
-* they use a special loader script to enable defining at run time which build mode (raw/debug/advanced) to use
+
+ * they use a special loader script to enable defining at run time which build mode (raw/debug/advanced) to use
 
 To enable this, examples have the following, not needed in application code:
 
-* each html file loads `loader.js`; application code would not need this, but would instead load the appropriate library build file, either a hosted version or a custom build
+ * each html file loads `loader.js`; application code would not need this, but would instead load the appropriate library build file, either a hosted version or a custom build
-* each js file starts with `goog.require` functions, used by the compiler; application code would only have these if the code is to be compiled together with the library and/or Closure library
-* some js files use type definitions (comments with @type tags); these are also used by the compiler, and are only needed if the code is to be compiled together with the library
-* html files load `example-behaviour.js` and some js files define the Map renderer option as `exampleNS.getRendererFromQueryString()`; application code would not need these
-* in addition, examples use Twitter Bootstrap and jQuery; this is of course not a requirement - you may use whichever presentation/helper libraries you wish
 
-At the bottom of each example generated in the `examples/` folder, a modified version of its source code is shown. That modified version can be run standalone and is usually used as starting point for users to extend examples into their own application.
+ * each js file starts with `goog.require` functions, used by the compiler; application code would only have these if the code is to be compiled together with the library and/or Closure library
+
+ * some js files use type definitions (comments with @type tags); these are also used by the compiler, and are only needed if the code is to be compiled together with the library
+
+ * html files load `resources/common.js` and some scripts use `common.getRendererFromQueryString()` to set the map renderer; application code would not need these
+
+ * in addition, examples use Twitter Bootstrap and jQuery; this is of course not a requirement - you may use whichever presentation/helper libraries you wish
+
+At the bottom of each example generated in the `build/examples` folder, a modified version of its source code is shown. That modified version can be run standalone and is usually used as starting point for users to extend examples into their own application.

config/jsdoc/api/template/tmpl/layout.tmpl

@@ -18,7 +18,7 @@
 <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
     <div class="container">
-      <a class="brand" href="/"><img src="../resources/logo-70x70.png"> OpenLayers 3</a>
+      <a class="brand" href="/"><img src="logo-70x70.png"> OpenLayers 3</a>
       <label id="stability">
         <input type="checkbox" id="stability-toggle"> Stable Only
       </label>

examples/accessible.html

@@ -14,5 +14,7 @@ tags: "accessibility, tabindex"
   <div class="span12">
     <a class="skiplink" href="#map">Go to map</a>
     <div id="map" class="map" tabindex="0"></div>
+    <button id="zoom-out">Zoom out</button>
+    <button id="zoom-in">Zoom in</button>
   </div>
 </div>

examples/accessible.js

@@ -11,7 +11,7 @@ var map = new ol.Map({
       source: new ol.source.OSM()
     })
   ],
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   target: 'map',
   controls: ol.control.defaults({
     attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
@@ -24,9 +24,14 @@ var map = new ol.Map({
   })
 });
 
-jQuery('#map').after('<button type="button" ' +
+document.getElementById('zoom-out').onclick = function() {
-    'onclick="map.getView().setZoom(map.getView().getZoom() - 1);">' +
+  var view = map.getView();
-    'Zoom out</button>');
+  var zoom = view.getZoom();
-jQuery('#map').after('<button type="button" ' +
+  view.setZoom(zoom - 1);
-    'onclick="map.getView().setZoom(map.getView().getZoom() + 1);">' +
+};
-    'Zoom in</button>');
+
+document.getElementById('zoom-in').onclick = function() {
+  var view = map.getView();
+  var zoom = view.getZoom();
+  view.setZoom(zoom + 1);
+};

examples/animation.js

@@ -54,7 +54,7 @@ var map = new ol.Map({
       source: new ol.source.OSM()
     })
   ],
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   // Improve user experience by loading tiles while animating. Will make
   // animations stutter on mobile or slow devices.
   loadTilesWhileAnimating: true,

examples/attributions.js

@@ -15,7 +15,7 @@ var map = new ol.Map({
     })
   ],
   controls: ol.control.defaults({ attribution: false }).extend([attribution]),
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View({
     center: [0, 0],
@@ -29,5 +29,5 @@ function checkSize() {
   attribution.setCollapsed(small);
 }
 
-$(window).on('resize', checkSize);
+window.addEventListener('resize', checkSize);
 checkSize();

examples/bing-maps.js

@@ -28,7 +28,7 @@ for (i = 0, ii = styles.length; i < ii; ++i) {
 }
 var map = new ol.Map({
   layers: layers,
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   // Improve user experience by loading tiles while dragging/zooming. Will make
   // zooming choppy on mobile or slow devices.
   loadTilesWhileInteracting: true,
@@ -39,11 +39,12 @@ var map = new ol.Map({
   })
 });
 
-$('#layer-select').change(function() {
+var select = document.getElementById('layer-select');
-  var style = $(this).find(':selected').val();
+function onChange() {
-  var i, ii;
+  var style = select.value;
-  for (i = 0, ii = layers.length; i < ii; ++i) {
+  for (var i = 0, ii = layers.length; i < ii; ++i) {
-    layers[i].setVisible(styles[i] == style);
+    layers[i].setVisible(styles[i] === style);
   }
-});
+}
-$('#layer-select').trigger('change');
+select.addEventListener('change', onChange);
+onChange();

examples/button-title.js

@@ -9,7 +9,7 @@ var map = new ol.Map({
       source: new ol.source.OSM()
     })
   ],
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View({
     center: [-8730000, 5930000],

examples/canvas-tiles.js

@@ -22,7 +22,7 @@ var map = new ol.Map({
       })
     })
   ],
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   target: 'map',
   controls: ol.control.defaults({
     attributionOptions: /** @type {olx.control.AttributionOptions} */ ({

examples/custom-controls.js

@@ -71,7 +71,7 @@ var map = new ol.Map({
       source: new ol.source.OSM()
     })
   ],
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View({
     center: [0, 0],

examples/device-orientation.js

@@ -19,7 +19,7 @@ var map = new ol.Map({
       source: new ol.source.OSM()
     })
   ],
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   target: 'map',
   controls: ol.control.defaults({
     attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
@@ -31,15 +31,19 @@ var map = new ol.Map({
 
 var deviceOrientation = new ol.DeviceOrientation();
 
-$('#track').on('change', function() {
+function el(id) {
+  return document.getElementById(id);
+}
+
+el('track').addEventListener('change', function() {
   deviceOrientation.setTracking(this.checked);
 });
 
 deviceOrientation.on('change', function(event) {
-  $('#alpha').text(deviceOrientation.getAlpha() + ' [rad]');
+  el('alpha').innerText = deviceOrientation.getAlpha() + ' [rad]';
-  $('#beta').text(deviceOrientation.getBeta() + ' [rad]');
+  el('beta').innerText = deviceOrientation.getBeta() + ' [rad]';
-  $('#gamma').text(deviceOrientation.getGamma() + ' [rad]');
+  el('gamma').innerText = deviceOrientation.getGamma() + ' [rad]';
-  $('#heading').text(deviceOrientation.getHeading() + ' [rad]');
+  el('heading').innerText = deviceOrientation.getHeading() + ' [rad]';
 });
 
 // tilt the map

examples/drag-and-drop-image-vector.js

@@ -104,7 +104,7 @@ var map = new ol.Map({
       })
     })
   ],
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View({
     center: [0, 0],

examples/drag-rotate-and-zoom.js

@@ -15,7 +15,7 @@ var map = new ol.Map({
       source: new ol.source.MapQuest({layer: 'sat'})
     })
   ],
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View({
     center: [0, 0],

examples/draw-features.js

@@ -37,7 +37,7 @@ var vector = new ol.layer.Vector({
 
 var map = new ol.Map({
   layers: [raster, vector],
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View({
     center: [-11000000, 4600000],

examples/dynamic-data.js

@@ -17,7 +17,7 @@ var map = new ol.Map({
       source: new ol.source.MapQuest({layer: 'sat'})
     })
   ],
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View({
     center: [0, 0],

examples/full-screen.js

@@ -23,7 +23,7 @@ var map = new ol.Map({
       })
     })
   ],
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   target: 'map',
   view: view
 });