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
examples/index.html
+3 -3
View File
@@ -33,9 +33,6 @@
background-color: #f8f9fa !important; background-color: #f8f9fa !important;
} }
</style> </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> <title>OpenLayers Examples</title>
</head> </head>
@@ -103,5 +100,8 @@
</div> </div>
<script src="https://code.jquery.com/jquery-3.5.1.min.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="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> </body>
</html> </html>
examples/index.js
+9 -11
View File
@@ -1,7 +1,9 @@
(function () { (function () {
'use strict'; 'use strict';
/* global info, jugl */ /* global info, jugl */
let template, target;
const template = new jugl.Template('template');
const target = document.getElementById('examples');
function listExamples(examples) { function listExamples(examples) {
target.innerHTML = ''; target.innerHTML = '';
@@ -82,14 +84,10 @@
listExamples(examples); listExamples(examples);
} }
window.addEventListener('load', function () { const params = new URLSearchParams(window.location.search);
template = new jugl.Template('template'); const text = params.get('q') || '';
target = document.getElementById('examples'); const input = document.getElementById('keywords');
const params = new URLSearchParams(window.location.search); input.addEventListener('input', inputChange);
const text = params.get('q') || ''; input.value = text;
const input = document.getElementById('keywords'); filterList(text);
input.addEventListener('input', inputChange);
input.value = text;
filterList(text);
});
})(); })();
examples/mobile-full-screen.html
+2 -2
View File
@@ -22,11 +22,11 @@ cloak:
height: 100%; height: 100%;
} }
</style> </style>
<script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
</head> </head>
<body> <body>
<div id="map" class="map"></div> <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="mobile-full-screen.js"></script>
<script src="common.js"></script>
</body> </body>
</html> </html>
examples/templates/example.html
+21 -14
View File
@@ -3,21 +3,17 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <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://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/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/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="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/ol.css">
<link rel="stylesheet" type="text/css" href="/theme/site.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-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)" /> <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> <title>{{ title }}</title>
</head> </head>
<body> <body>
@@ -134,9 +130,9 @@
&lt;head&gt; &lt;head&gt;
&lt;meta charset="UTF-8"&gt; &lt;meta charset="UTF-8"&gt;
&lt;title&gt;{{ title }}&lt;/title&gt; &lt;title&gt;{{ title }}&lt;/title&gt;
&lt;!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer --&gt; {{#each css.remote}}
&lt;script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"&gt;&lt;/script&gt;{{#if extraHead.remote}} &lt;link rel="stylesheet" href="{{ . }}"&gt;
{{ indent extraHead.remote spaces=4 }}{{/if}} {{/each}}
&lt;link rel="stylesheet" href="node_modules/ol/ol.css"&gt; &lt;link rel="stylesheet" href="node_modules/ol/ol.css"&gt;
&lt;style&gt; &lt;style&gt;
.map { .map {
@@ -146,7 +142,12 @@
{{#if css.source}}{{ indent css.source spaces=6 }}{{/if}} &lt;/style&gt; {{#if css.source}}{{ indent css.source spaces=6 }}{{/if}} &lt;/style&gt;
&lt;/head&gt; &lt;/head&gt;
&lt;body&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;/body&gt;
&lt;/html&gt;</code></pre> &lt;/html&gt;</code></pre>
</div> </div>
@@ -163,12 +164,17 @@
</div> </div>
</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://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="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="./resources/common.js"></script> {{#each js.local}}
{{#each js.scripts}}
<script src="{{{ . }}}"></script> <script src="{{{ . }}}"></script>
{{/each}} {{/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> <script>
$('#tag-example-list').on('show.bs.modal', function (event) { $('#tag-example-list').on('show.bs.modal', function (event) {
const button = $(event.relatedTarget); // Button that triggered the modal const button = $(event.relatedTarget); // Button that triggered the modal
@@ -178,7 +184,8 @@
modal.find('.modal-title').text(title); modal.find('.modal-title').text(title);
modal.find('.modal-body').html(content); modal.find('.modal-body').html(content);
}); });
</script>
<script>
const packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json'; const packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
fetch(packageUrl).then(function(response) { fetch(packageUrl).then(function(response) {
return response.json(); return response.json();
examples/webpack/example-builder.js
+33 -30
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) { ensureNewLineAtEnd(source) {
if (source[source.length - 1] !== '\n') { if (source[source.length - 1] !== '\n') {
source += '\n'; source += '\n';
@@ -270,6 +274,10 @@ export default class ExampleBuilder {
return source; return source;
} }
/**
* @param {string} source Source code
* @return {string} Transformed source
*/
transformJsSource(source) { transformJsSource(source) {
return ( return (
source source
@@ -306,7 +314,8 @@ export default class ExampleBuilder {
let jsSource = await fse.readFile(jsPath, {encoding: 'utf8'}); let jsSource = await fse.readFile(jsPath, {encoding: 'utf8'});
jsSource = this.transformJsSource(this.cloakSource(jsSource, data.cloak)); jsSource = this.transformJsSource(this.cloakSource(jsSource, data.cloak));
data.js = { data.js = {
scripts: [`${this.common}.js`, jsName], local: [],
remote: [],
source: jsSource, source: jsSource,
}; };
@@ -354,53 +363,47 @@ export default class ExampleBuilder {
2 2
); );
// check for example css data.css = {
const cssName = `${data.name}.css`; local: [],
const cssPath = path.join(data.dir, cssName); remote: [],
let cssSource; source: undefined,
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;
}
// add additional resources // add additional resources
if (data.resources) { if (data.resources) {
const localResources = [];
const remoteResources = [];
data.resources.forEach((resource) => { data.resources.forEach((resource) => {
const remoteResource = /^https?:\/\//.test(resource) const absoluteUrl = /^https?:\/\//.test(resource)
? resource ? resource
: `https://openlayers.org/en/v${pkg.version}/examples/${resource}`; : `https://openlayers.org/en/v${pkg.version}/examples/${resource}`;
if (isJsRegEx.test(resource)) { if (isJsRegEx.test(resource)) {
if (!isTemplateJs.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)) { } else if (isCssRegEx.test(resource)) {
if (!isTemplateCss.test(resource)) { if (!isTemplateCss.test(resource)) {
localResources.push(`<link rel="stylesheet" href="${resource}">`); data.css.local.push(resource);
} }
remoteResources.push( data.css.remote.push(absoluteUrl);
`<link rel="stylesheet" href="${remoteResource}">`
);
} else { } else {
throw new Error( throw new Error(
`Invalid resource: '${resource}' is not .js or .css: ${data.filename}` `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); const templatePath = path.join(this.templates, data.layout);