Script to build examples
This commit is contained in:
Tim Schaub
Tim Schaub
@@ -1 +0,0 @@
|
||||
{{{ contents }}}
|
||||
@@ -1,123 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="./resources/prism/prism.css" type="text/css">
|
||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="./resources/layout.css" type="text/css">
|
||||
{{{ extraHead.local }}}
|
||||
{{{ css.tag }}}
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
|
||||
<script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
|
||||
<title>{{ title }}</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="navbar" role="navigation">
|
||||
<div class="container">
|
||||
<div class="display-table pull-left" id="navbar-logo-container">
|
||||
<a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png"> OpenLayers Examples</a>
|
||||
</div>
|
||||
<!-- menu items that get hidden below 768px width -->
|
||||
<nav class='collapse navbar-collapse navbar-responsive-collapse'>
|
||||
<ul class="nav navbar-nav pull-right">
|
||||
<li><a href="../doc">Docs</a></li>
|
||||
<li><a class="active" href="index.html">Examples</a></li>
|
||||
<li><a href="../apidoc">API</a></li>
|
||||
<li><a href="https://github.com/openlayers/openlayers">Code</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
|
||||
<button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
This example uses OpenLayers v<span>{{ olVersion }}</span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<h4 id="title">{{ title }}</h4>
|
||||
{{{ contents }}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<p id="shortdesc">{{ shortdesc }}</p>
|
||||
<div id="docs">{{ md docs }}</div>
|
||||
<div id="api-links">Related API documentation: {{{ js.apiHtml }}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div id="source-controls">
|
||||
<a id="copy-button"><i class="fa fa-clipboard"></i> Copy</a>
|
||||
<a id="codepen-button"><i class="fa fa-codepen"></i> Edit</a>
|
||||
</div>
|
||||
<form method="POST" id="codepen-form" target="_blank" action="https://codepen.io/pen/define/">
|
||||
<textarea class="hidden" name="title">{{ title }}</textarea>
|
||||
<textarea class="hidden" name="description">{{ shortdesc }}</textarea>
|
||||
<textarea class="hidden" name="js">{{ js.source }}</textarea>
|
||||
<textarea class="hidden" name="css">{{ css.source }}</textarea>
|
||||
<textarea class="hidden" name="html">{{ contents }}</textarea>
|
||||
<input type="hidden" name="resources" value="https://openlayers.org/en/v{{ olVersion }}/css/ol.css,https://openlayers.org/en/v{{ olVersion }}/build/ol.js{{ extraResources }}">
|
||||
<input type="hidden" name="data">
|
||||
</form>
|
||||
<pre><code id="example-source" class="language-markup"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>{{ title }}</title>
|
||||
<link rel="stylesheet" href="https://openlayers.org/en/v{{ olVersion }}/css/ol.css" type="text/css">
|
||||
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
|
||||
<script src="https://openlayers.org/en/v{{ olVersion }}/build/ol.js"></script>{{#if extraHead.remote}}
|
||||
{{ indent extraHead.remote spaces=4 }}{{/if}}{{#if css.source}}
|
||||
<style>
|
||||
{{ indent css.source spaces=6 }} </style>{{/if}}
|
||||
</head>
|
||||
<body>
|
||||
{{ indent contents spaces=4 }} <script>
|
||||
{{ indent js.source spaces=6 }} </script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./resources/common.js"></script>
|
||||
<script src="./resources/prism/prism.min.js"></script>
|
||||
{{{ js.tag }}}
|
||||
</body>
|
||||
<script>
|
||||
var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
|
||||
fetch(packageUrl).then(function(response) {
|
||||
return response.json();
|
||||
}).then(function(json) {
|
||||
var latestVersion = json.version;
|
||||
document.getElementById('latest-version').innerHTML = latestVersion;
|
||||
var url = window.location.href;
|
||||
var branchSearch = url.match(/\/([^\/]*)\/examples\//);
|
||||
var cookieText = 'dismissed=-' + latestVersion + '-';
|
||||
var dismissed = document.cookie.indexOf(cookieText) != -1;
|
||||
if (!dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && '{{ olVersion }}' != latestVersion) {
|
||||
var link = url.replace(branchSearch[0], '/latest/examples/');
|
||||
fetch(link, {method: 'head'}).then(function(response) {
|
||||
var a = document.getElementById('latest-link');
|
||||
a.href = response.status == 200 ? link : '../../latest/examples/';
|
||||
});
|
||||
var latestCheck = document.getElementById('latest-check');
|
||||
latestCheck.style.display = '';
|
||||
document.getElementById('latest-dismiss').onclick = function() {
|
||||
latestCheck.style.display = 'none';
|
||||
document.cookie = cookieText;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
@@ -1,19 +0,0 @@
|
||||
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
|
||||
|
||||
* 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 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
|
||||
|
||||
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.
|
||||
Reference in New Issue
Block a user