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

Fix topolis example

Browse Source 
toastr did not work because jquery has to bo loaded before toastr.
This commit is contained in:
Maximilian Krög
2022-08-13 16:27:43 +02:00
parent 9109ab8407
commit 74a8759e3b
5 changed files with 68 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>

20
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,14 +84,10 @@
listExamples(examples);
}
window.addEventListener('load', function () {
template = new jugl.Template('template');
target = document.getElementById('examples');
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);
});
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);
})();

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

@@ -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>

35
examples/templates/example.html
View File

@@ -3,21 +3,17 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<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.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>
@@ -134,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 {
@@ -146,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>
@@ -163,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
@@ -178,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();

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);