ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #13977 from MoonE/examples

Browse Source 
Fix some errors in examples
This commit is contained in:
MoonE
2022-08-14 18:03:22 +02:00
committed by GitHub
parent 3cbb40b943 74a8759e3b
commit adc9a5318e
12 changed files with 112 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/es2015-custom-element.js
View File

@@ -9,7 +9,7 @@ class OLComponent extends HTMLElement {
this.shadow = this.attachShadow({mode: 'open'});
const link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', 'css/ol.css');
link.setAttribute('href', 'theme/ol.css');
this.shadow.appendChild(link);
const style = document.createElement('style');
style.innerText = `

6
examples/index.html
View File

@@ -33,9 +33,6 @@
background-color: #f8f9fa !important;
}
</style>
<script type="text/javascript" src="resources/Jugl.js"></script>
<script type="text/javascript" src="examples-info.js"></script>
<script type="text/javascript" src="index.js"></script>
<title>OpenLayers Examples</title>
</head>
@@ -103,5 +100,8 @@
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="resources/Jugl.js"></script>
<script type="text/javascript" src="examples-info.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

35
examples/index.js
View File

@@ -1,7 +1,9 @@
(function () {
'use strict';
/* global info, jugl */
let template, target;
const template = new jugl.Template('template');
const target = document.getElementById('examples');
function listExamples(examples) {
target.innerHTML = '';
@@ -82,29 +84,10 @@
listExamples(examples);
}
function parseParams() {
const params = {};
const list = window.location.search
.substring(1)
.replace(/\+/g, '%20')
.split('&');
for (let i = 0; i < list.length; ++i) {
const pair = list[i].split('=');
if (pair.length === 2) {
params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
}
}
return params;
}
window.addEventListener('load', function () {
template = new jugl.Template('template');
target = document.getElementById('examples');
const params = parseParams();
const text = params['q'] || '';
const input = document.getElementById('keywords');
input.addEventListener('input', inputChange);
input.value = text;
filterList(text);
});
const params = new URLSearchParams(window.location.search);
const text = params.get('q') || '';
const input = document.getElementById('keywords');
input.addEventListener('input', inputChange);
input.value = text;
filterList(text);
})();

6
examples/mobile-full-screen.html
View File

@@ -13,7 +13,7 @@ cloak:
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>Mobile full screen example</title>
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../theme/ol.css" type="text/css">
<style type="text/css">
html, body, .map {
margin: 0;
@@ -22,11 +22,11 @@ cloak:
height: 100%;
}
</style>
<script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script src="common.js"></script>
<script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
<script src="mobile-full-screen.js"></script>
<script src="common.js"></script>
</body>
</html>

72
examples/resources/common.js
View File

@@ -1,4 +1,20 @@
(function() {
"use strict"
/* global LZString */
let lzStringPromise;
function loadLzString() {
if (!lzStringPromise) {
lzStringPromise = new Promise(function (resolve, reject) {
const script = document.createElement('script')
script.src = 'https://unpkg.com/lz-string@1.4.4/libs/lz-string.min.js';
document.head.append(script);
script.addEventListener('load', resolve);
script.addEventListener('error', reject);
});
}
return lzStringPromise;
}
function compress(json) {
return LZString.compressToBase64(JSON.stringify(json))
@@ -43,55 +59,35 @@
const pkgJson = document.getElementById('example-pkg-source').innerText;
const unique = new Set();
const localResources = (js.match(/'(\.\/)?data\/[^']*/g) || [])
.concat(js.match(/'(\.\/)?resources\/[^']*/g) || [])
.map(
function (f) {
return f.replace(/^'(\.\/)?/, '');
}
)
.filter(
function (f) {
return unique.has(f) ? false : (unique.add(f) || unique);
}
);
const localResources = (js.match(/'(?:\.\/)?(?:data|resources)\/[^']*'/g) || [])
.map(function (f) {
return f.replace(/^'(?:\.\/)?|'$/g, '');
})
.filter(function (f) {
return unique.has(f) ? false : unique.add(f);
});
const promises = localResources.map(
function (resource) {
return fetchResource(resource);
}
);
const promises = localResources.map(function (resource) {
return fetchResource(resource);
});
promises.push(loadLzString());
Promise.all(promises).then(
function (results) {
const files = {
'index.html': {
content: html
},
'main.js': {
content: js
},
'package.json': {
content: pkgJson
},
'sandbox.config.json': {
content: '{"template": "parcel"}'
}
'index.html': {content: html},
'main.js': {content: js},
'package.json': {content: pkgJson},
'sandbox.config.json': {content: '{"template": "parcel"}'}
};
if (worker) {
files['worker.js'] = {
content: worker
}
files['worker.js'] = {content: worker}
}
const data = {
files: files
};
for (let i = 0; i < localResources.length; i++) {
data.files[localResources[i]] = results[i];
files[localResources[i]] = results[i];
}
form.parameters.value = compress(data);
form.parameters.value = compress({files: files});
form.submit();
}
);

2
examples/resources/external-map-map.html
View File

@@ -1,7 +1,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../theme/ol.css" type="text/css">
<style>
body {
margin: 0;

37
examples/templates/example.html
View File

@@ -3,23 +3,17 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<script src="https://unpkg.com/lz-string@1.4.4/libs/lz-string.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/theme/ol.css">
<link rel="stylesheet" type="text/css" href="/theme/site.css">
{{#each css.local}}
<link rel="stylesheet" href="{{{ . }}}" type="text/css">
{{/each}}
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
<script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
{{{ extraHead.local }}}
{{{ css.tag }}}
<title>{{ title }}</title>
</head>
<body>
@@ -136,9 +130,9 @@
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;{{ title }}&lt;/title&gt;
&lt;!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer --&gt;
&lt;script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"&gt;&lt;/script&gt;{{#if extraHead.remote}}
{{ indent extraHead.remote spaces=4 }}{{/if}}
{{#each css.remote}}
&lt;link rel="stylesheet" href="{{ . }}"&gt;
{{/each}}
&lt;link rel="stylesheet" href="node_modules/ol/ol.css"&gt;
&lt;style&gt;
.map {
@@ -148,7 +142,12 @@
{{#if css.source}}{{ indent css.source spaces=6 }}{{/if}} &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
{{ indent contents spaces=4 }} &lt;script type="module" src="main.js"&gt;&lt;/script&gt;
{{ indent contents spaces=4 }} &lt;!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer --&gt;
&lt;script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"&gt;&lt;/script&gt;
{{#each js.remote}}
&lt;script src="{{ . }}"&gt;&lt;/script&gt;
{{/each}}
&lt;script type="module" src="main.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
@@ -165,12 +164,17 @@
</div>
</div>
<script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="./resources/common.js"></script>
{{#each js.scripts}}
{{#each js.local}}
<script src="{{{ . }}}"></script>
{{/each}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.js"></script>
<script src="./resources/common.js"></script>
<script>
$('#tag-example-list').on('show.bs.modal', function (event) {
const button = $(event.relatedTarget); // Button that triggered the modal
@@ -180,7 +184,8 @@
modal.find('.modal-title').text(title);
modal.find('.modal-body').html(content);
});
</script>
<script>
const packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
fetch(packageUrl).then(function(response) {
return response.json();

4
examples/webpack/config.mjs
View File

@@ -70,6 +70,10 @@ export default {
new CopyPlugin({
patterns: [
{from: '../site/src/theme', to: 'theme'},
{
from: path.join(baseDir, '..', '..', 'src', 'ol', 'ol.css'),
to: path.join(baseDir, '..', '..', 'theme', 'ol', 'ol.css'),
},
{from: 'data', to: 'data'},
{from: 'resources', to: 'resources'},
{from: 'index.html', to: 'index.html'},

63
examples/webpack/example-builder.js
View File

@@ -263,6 +263,10 @@ export default class ExampleBuilder {
});
}
/**
* @param {string} source A string
* @return {string} Same string without a newline character at end
*/
ensureNewLineAtEnd(source) {
if (source[source.length - 1] !== '\n') {
source += '\n';
@@ -270,6 +274,10 @@ export default class ExampleBuilder {
return source;
}
/**
* @param {string} source Source code
* @return {string} Transformed source
*/
transformJsSource(source) {
return (
source
@@ -306,7 +314,8 @@ export default class ExampleBuilder {
let jsSource = await fse.readFile(jsPath, {encoding: 'utf8'});
jsSource = this.transformJsSource(this.cloakSource(jsSource, data.cloak));
data.js = {
scripts: [`${this.common}.js`, jsName],
local: [],
remote: [],
source: jsSource,
};
@@ -354,53 +363,47 @@ export default class ExampleBuilder {
2
);
// check for example css
const cssName = `${data.name}.css`;
const cssPath = path.join(data.dir, cssName);
let cssSource;
try {
cssSource = await fse.readFile(cssPath, readOptions);
} catch (err) {
// pass
}
if (cssSource) {
data.css = {
tag: `<link rel="stylesheet" href="${cssName}">`,
source: this.ensureNewLineAtEnd(cssSource),
};
assets[cssName] = cssSource;
}
data.css = {
local: [],
remote: [],
source: undefined,
};
// add additional resources
if (data.resources) {
const localResources = [];
const remoteResources = [];
data.resources.forEach((resource) => {
const remoteResource = /^https?:\/\//.test(resource)
const absoluteUrl = /^https?:\/\//.test(resource)
? resource
: `https://openlayers.org/en/v${pkg.version}/examples/${resource}`;
if (isJsRegEx.test(resource)) {
if (!isTemplateJs.test(resource)) {
localResources.push(`<script src="${resource}"></script>`);
data.js.local.push(resource);
}
remoteResources.push(`<script src="${remoteResource}"></script>`);
data.js.remote.push(absoluteUrl);
} else if (isCssRegEx.test(resource)) {
if (!isTemplateCss.test(resource)) {
localResources.push(`<link rel="stylesheet" href="${resource}">`);
data.css.local.push(resource);
}
remoteResources.push(
`<link rel="stylesheet" href="${remoteResource}">`
);
data.css.remote.push(absoluteUrl);
} else {
throw new Error(
`Invalid resource: '${resource}' is not .js or .css: ${data.filename}`
);
}
});
data.extraHead = {
local: localResources.join('\n'),
remote: remoteResources.join('\n'),
};
}
data.js.local.push(`${this.common}.js`, jsName);
// check for example css
const cssName = `${data.name}.css`;
const cssPath = path.join(data.dir, cssName);
try {
assets[cssName] = await fse.readFile(cssPath, readOptions);
data.css.local.push(cssName);
data.css.source = this.ensureNewLineAtEnd(assets[cssName]);
} catch (err) {
// pass, no css for this example
}
const templatePath = path.join(this.templates, data.layout);

1
site/layouts/default.hbs
View File

@@ -8,7 +8,6 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">

2
site/src/download/index.hbs
View File

@@ -18,7 +18,7 @@ layout: default.hbs
<p>
If you want to try out OpenLayers without downloading anything (<b>not recommended for production</b>), include the following in the head of your html page:
<pre><code class="language-html">&lt;script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/{{ version }}/build/ol.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/{{ version }}/css/ol.css"&gt;
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/{{ version }}/theme/ol.css"&gt;
</code></pre>
</p>
</div>

3
src/ol/ol.css
View File

@@ -1,4 +1,5 @@
:root {
:root,
:host {
--ol-background-color: white;
--ol-accent-background-color: #F5F5F5;
--ol-subtle-background-color: rgba(128, 128, 128, 0.25);