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

Merge pull request #11315 from MoonE/examples-fix-html

Browse Source 
Examples fix html
This commit is contained in:
Andreas Hocevar
2020-07-26 19:45:38 +02:00
committed by GitHub
parent 07a7031d48 4deb3a2dfc
commit 93c6f84896
12 changed files with 367 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/jsdoc/api/template/tmpl/layout.tmpl
+4 -1
View File
@@ -80,10 +80,13 @@ var version = obj.packageInfo.version;
<body> <body>
<div class="container-fluid"> <div class="container-fluid">
<header class="navbar navbar-expand-sm navbar-dark mb-3 py-0 fixed-top" role="navigation"> <header class="navbar navbar-expand-sm navbar-dark mb-3 py-0 fixed-top" role="navigation">
<a class="navbar-brand" href="https://openlayers.org/"><img src="logo-70x70.png"> OpenLayers</a> <a class="navbar-brand" href="https://openlayers.org/"><img src="logo-70x70.png" alt="">&nbsp;OpenLayers</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<!-- menu items that get hidden below 768px width -->
<nav class="collapse navbar-collapse" id="olmenu"> <nav class="collapse navbar-collapse" id="olmenu">
<ul class="navbar-nav ml-auto"> <ul class="navbar-nav ml-auto">
<li class="nav-item dropdown"> <li class="nav-item dropdown">
examples/index.html
+2 -3
View File
@@ -6,7 +6,6 @@
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" type="text/css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="./resources/layout.css" type="text/css"> <link rel="stylesheet" href="./resources/layout.css" type="text/css">
<style> <style>
body { body {
@@ -62,7 +61,7 @@
<body> <body>
<header class="navbar navbar-expand-md navbar-dark mb-3 py-0 fixed-top" role="navigation"> <header class="navbar navbar-expand-md navbar-dark mb-3 py-0 fixed-top" role="navigation">
<a class="navbar-brand" href="https://openlayers.org/"><img class="header-logo" src="./resources/logo-70x70.png">&nbsp;OpenLayers</a> <a class="navbar-brand" href="https://openlayers.org/"><img class="header-logo" src="./resources/logo-70x70.png" alt="">&nbsp;OpenLayers</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@@ -113,7 +112,7 @@
<a jugl:attributes="href example.link" class="example bg-light border rounded"> <a jugl:attributes="href example.link" class="example bg-light border rounded">
<span class="mainlink"> <span class="mainlink">
<strong><span jugl:replace="example.title">title</span></strong><br> <strong><span jugl:replace="example.title">title</span></strong><br>
<small jugl:content="'(' + example.example + ')'"></small> <small jugl:content="'(' + example.link + ')'"></small>
</span> </span>
<p class="description" jugl:content="example.shortdesc"></p> <p class="description" jugl:content="example.shortdesc"></p>
</a> </a>
examples/index.js
-3
View File
@@ -98,9 +98,6 @@
} }
window.addEventListener('load', function () { window.addEventListener('load', function () {
for (let i = 0; i < info.examples.length; ++i) {
info.examples[i].link += window.location.search;
}
template = new jugl.Template('template'); template = new jugl.Template('template');
target = document.getElementById('examples'); target = document.getElementById('examples');
const params = parseParams(); const params = parseParams();
examples/resources/common.js
+8 -18
View File
@@ -7,19 +7,6 @@
.replace(/=+$/, ``); .replace(/=+$/, ``);
} }
var htmlClipboard = new Clipboard('#copy-html-button');
htmlClipboard.on('success', function(e) {
e.clearSelection();
});
var jsClipboard = new Clipboard('#copy-js-button');
jsClipboard.on('success', function(e) {
e.clearSelection();
});
var pkgClipboard = new Clipboard('#copy-pkg-button');
pkgClipboard.on('success', function(e) {
e.clearSelection();
});
function fetchResource(resource) { function fetchResource(resource) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const isImage = /\.(png|jpe?g|gif|tiff)$/.test(resource); const isImage = /\.(png|jpe?g|gif|tiff)$/.test(resource);
@@ -51,20 +38,23 @@
}) })
} }
var codepenButton = document.getElementsByClassName('codepen-button')[0]; const codepenButton = document.getElementById('codepen-button');
if (codepenButton) { if (codepenButton) {
codepenButton.onclick = function(event) { const form = document.getElementById('codepen-form');
codepenButton.href = form.action;
codepenButton.addEventListener('click', function(event) {
event.preventDefault(); event.preventDefault();
const html = document.getElementById('example-html-source').innerText; const html = document.getElementById('example-html-source').innerText;
const js = document.getElementById('example-js-source').innerText; const js = document.getElementById('example-js-source').innerText;
const workerContainer = document.getElementById('example-worker-source'); const workerContainer = document.getElementById('example-worker-source');
const worker = workerContainer ? workerContainer.innerText : undefined; const worker = workerContainer ? workerContainer.innerText : undefined;
const pkgJson = document.getElementById('example-pkg-source').innerText; const pkgJson = document.getElementById('example-pkg-source').innerText;
const form = document.getElementById('codepen-form');
const unique = new Set();
const localResources = (js.match(/'data\/[^']*/g) || []) const localResources = (js.match(/'data\/[^']*/g) || [])
.concat(js.match(/'resources\/[^']*/g) || []) .concat(js.match(/'resources\/[^']*/g) || [])
.map(f => f.slice(1)); .map(f => f.slice(1))
.filter(f => unique.has(f) ? false : unique.add(f));
const promises = localResources.map(resource => fetchResource(resource)); const promises = localResources.map(resource => fetchResource(resource));
@@ -100,6 +90,6 @@
form.parameters.value = compress(data); form.parameters.value = compress(data);
form.submit(); form.submit();
}); });
}; });
} }
})(); })();
examples/resources/layout.css
+40 -25
View File
@@ -133,34 +133,16 @@ ol.inline>li {
width: 100%; width: 100%;
} }
pre[class*="language-"] { .source-heading {
margin-top: 20px; margin-top: 1em;
background: #FFFFFF; margin-bottom: 0;
} padding-left: .6em;
pre>legend {
font-size: 100%;
font-weight: bold; font-weight: bold;
} }
.source-controls { pre[class*="language-"] {
position: absolute; background: #FFFFFF;
margin-top: 10px; font-size: 87.5%;
right: 40px;
}
.source-controls a {
margin-left: 15px;
}
.copy-button {
text-decoration: none;
cursor: pointer;
}
.codepen-button {
text-decoration: none;
cursor: pointer;
} }
pre { pre {
@@ -178,3 +160,36 @@ pre {
margin-top: -10px; margin-top: -10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
/* restyle prism copy button */
div.code-toolbar > .toolbar {
opacity: 1;
top: -2.4em;
}
div.code-toolbar > .toolbar button {
font-size: 16px;
color: #03899c;
background-color: transparent;
box-shadow: none;
padding: .615rem .75rem;
}
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar button:focus {
color: #ff7a00;
}
div.code-toolbar > .toolbar button:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
div.code-toolbar > .toolbar button:before {
margin-right: .184em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
content: "\f0ea";
font-size: 1.33333333em;
line-height: .75em;
vertical-align: middle;
}
examples/resources/prism/prism-1.20.0.css
+249
View File
@@ -0,0 +1,249 @@
/* PrismJS 1.20.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+json&plugins=line-numbers+toolbar+copy-to-clipboard */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.token.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
/* This background color was intended by the author of this theme. */
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
pre[class*="language-"].line-numbers {
position: relative;
padding-left: 3.8em;
counter-reset: linenumber;
}
pre[class*="language-"].line-numbers > code {
position: relative;
white-space: inherit;
}
.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -3.8em;
width: 3em; /* works for line-numbers below 1000 lines */
letter-spacing: -1px;
border-right: 1px solid #999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.line-numbers-rows > span {
display: block;
counter-increment: linenumber;
}
.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: 0.8em;
text-align: right;
}
div.code-toolbar {
position: relative;
}
div.code-toolbar > .toolbar {
position: absolute;
top: .3em;
right: .2em;
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
div.code-toolbar:hover > .toolbar {
opacity: 1;
}
/* Separate line b/c rules are thrown out if selector is invalid.
IE11 and old Edge versions don't support :focus-within. */
div.code-toolbar:focus-within > .toolbar {
opacity: 1;
}
div.code-toolbar > .toolbar .toolbar-item {
display: inline-block;
}
div.code-toolbar > .toolbar a {
cursor: pointer;
}
div.code-toolbar > .toolbar button {
background: none;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-user-select: none; /* for button */
-moz-user-select: none;
-ms-user-select: none;
}
div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar span {
color: #bbb;
font-size: .8em;
padding: 0 .5em;
background: #f5f2f0;
background: rgba(224, 224, 224, 0.2);
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
border-radius: .5em;
}
div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar a:focus,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar button:focus,
div.code-toolbar > .toolbar span:hover,
div.code-toolbar > .toolbar span:focus {
color: inherit;
text-decoration: none;
}
examples/resources/prism/prism-1.20.0.min.js
Vendored
+11
View File
File diff suppressed because one or more lines are too long
examples/resources/prism/prism.css
-140
View File
@@ -1,140 +0,0 @@
/* PrismJS 1.10.0
http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #a67f59;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
examples/resources/prism/prism.min.js
Vendored
-7
View File
File diff suppressed because one or more lines are too long
examples/templates/example.html
+50 -65
View File
@@ -1,6 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-US"> <html lang="en-US">
<head> <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">
<script> <script>
var gaProperty = 'UA-2577926-1'; var gaProperty = 'UA-2577926-1';
// Disable tracking if the opt-out cookie exists. // Disable tracking if the opt-out cookie exists.
@@ -59,31 +62,29 @@
}) })
}); });
</script> </script>
<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.7.0/css/font-awesome.min.css" type="text/css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" type="text/css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="./resources/prism/prism.css" type="text/css"> <link rel="stylesheet" href="./resources/prism/prism-1.20.0.css" type="text/css">
<link rel="stylesheet" href="./css/ol.css" type="text/css"> <link rel="stylesheet" href="./css/ol.css" type="text/css">
<link rel="stylesheet" href="./resources/layout.css" type="text/css"> <link rel="stylesheet" href="./resources/layout.css" type="text/css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://unpkg.com/elm-pep"></script> <script src="https://unpkg.com/elm-pep"></script>
{{{ extraHead.local }}} {{{ extraHead.local }}}
{{{ css.tag }}} {{{ css.tag }}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
<title>{{ title }}</title> <title>{{ title }}</title>
</head> </head>
<body> <body>
<header class="navbar navbar-expand-sm navbar-dark mb-3 py-0" role="navigation"> <header class="navbar navbar-expand-sm navbar-dark mb-3 py-0" role="navigation">
<a class="navbar-brand" href="https://openlayers.org/"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers</a> <a class="navbar-brand" href="https://openlayers.org/"><img src="./resources/logo-70x70.png" alt="">&nbsp;OpenLayers</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<!-- menu items that get hidden below 768px width --> <!-- menu items that get hidden below 768px width -->
<nav class="collapse navbar-collapse" id="olmenu"> <nav class="collapse navbar-collapse" id="olmenu">
<ul class="nav navbar-nav ml-auto" > <ul class="nav navbar-nav ml-auto">
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a> <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
<div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="docdropdown"> <div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="docdropdown">
@@ -110,25 +111,27 @@
</nav> </nav>
</header> </header>
<div class="container-fluid"> <div class="container-fluid line-numbers">
<div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none"> <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">&times;</span></button> <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</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>. 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>
<div id="experimental-notice" class="alert alert-warning alert-dismissible" role="alert" style="display:none"> {{#if ./experimental}}
<div id="experimental-notice" class="alert alert-warning alert-dismissible" role="alert">
<button id="experimental-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> <button id="experimental-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
This example uses features that are not part of the stable API and subject to change between releases. Consult the <a href="https://openlayers.org/en/latest/apidoc/">API documentation</a> This example uses features that are not part of the stable API and subject to change between releases. Consult the <a href="https://openlayers.org/en/latest/apidoc/">API documentation</a>
to see what is supported in the latest release. to see what is supported in the latest release.
</div> </div>
{{/if}}
<div class="row-fluid"> <div class="row-fluid">
<a href="" class="codepen-button float-right"><i class="fa fa-codepen fa-lg"></i> Edit</a> <a href="#" id="codepen-button" class="btn btn-link float-right">
<i class="fa fa-codepen fa-lg"></i> Edit
</a>
<div class="span12"> <div class="span12">
<h4 id="title"> <h4 id="title">{{ title }}</h4>
{{ title }}
</h4>
<p class="tags"> <p class="tags">
{{#each tags}} {{#each tags}}
<span class="badge-group"> <span class="badge-group">
@@ -176,18 +179,14 @@
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="source-controls"> <h5 class="source-heading">main.js</h5>
<button class="copy-button btn btn-link" id="copy-js-button" data-clipboard-target="#example-js-source"><i class="fa fa-clipboard fa-lg"></i> Copy</button> <pre><code id="example-js-source" class="language-js">import 'ol/ol.css';
</div>
<pre><legend>main.js</legend><hr /><code id="example-js-source" class="language-js">import 'ol/ol.css';
{{ js.source }}</code></pre> {{ js.source }}</code></pre>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="source-controls"> <h5 class="source-heading">index.html</h5>
<button class="copy-button btn btn-link" id="copy-html-button" data-clipboard-target="#example-html-source"><i class="fa fa-clipboard fa-lg"></i> Copy</button> <pre><code id="example-html-source" class="language-markup">&lt;!DOCTYPE html&gt;
</div>
<pre><legend>index.html</legend><hr /><code id="example-html-source" class="language-markup">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt; &lt;html lang="en"&gt;
&lt;head&gt; &lt;head&gt;
&lt;title&gt;{{ title }}&lt;/title&gt; &lt;title&gt;{{ title }}&lt;/title&gt;
@@ -211,25 +210,21 @@
{{#if worker.source}} {{#if worker.source}}
<div class="row-fluid"> <div class="row-fluid">
<div class="source-controls"> <h5 class="source-heading">worker.js</h5>
<button class="copy-button btn btn-link" id="copy-worker-button" data-clipboard-target="#example-worker-source"><i class="fa fa-clipboard fa-lg"></i> Copy</button> <pre><code id="example-worker-source" class="language-js">{{ worker.source }}</code></pre>
</div>
<pre><legend>worker.js</legend><hr /><code id="example-worker-source" class="language-js">{{ worker.source }}</code></pre>
</div> </div>
{{/if}} {{/if}}
<div class="row-fluid"> <div class="row-fluid">
<div class="source-controls"> <h5 class="source-heading">package.json</h5>
<button class="copy-button btn btn-link" id="copy-pkg-button" data-clipboard-target="#example-pkg-source"><i class="fa fa-clipboard fa-lg"></i> Copy</button> <pre><code id="example-pkg-source" class="language-json">{{ pkgJson }}</code></pre>
</div>
<pre><legend>package.json</legend><hr /><code id="example-pkg-source" class="language-js">{{ pkgJson }}</code></pre>
</div> </div>
</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 src="./resources/prism/prism-1.20.0.min.js"></script>
<script src="./resources/common.js"></script> <script src="./resources/common.js"></script>
<script src="./resources/prism/prism.min.js"></script>
{{{ js.tag }}} {{{ js.tag }}}
<script> <script>
$('#tag-example-list').on('show.bs.modal', function (event) { $('#tag-example-list').on('show.bs.modal', function (event) {
@@ -240,41 +235,31 @@
modal.find('.modal-title').text(title); modal.find('.modal-title').text(title);
modal.find('.modal-body').html(content); modal.find('.modal-body').html(content);
}); });
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 (branchSearch && !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> </script>
</body> </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 (branchSearch && !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;
}
}
var experimentalNotice = document.getElementById('experimental-notice');
if (window.experimental) {
experimentalNotice.style.display = 'block';
document.getElementById('experimental-dismiss').onclick = function() {
experimentalNotice.style.display = 'none';
}
}
});
</script>
</html> </html>
examples/webpack/example-builder.js
+2 -7
View File
@@ -193,7 +193,6 @@ class ExampleBuilder {
const examples = exampleData.map((data) => { const examples = exampleData.map((data) => {
return { return {
link: data.filename, link: data.filename,
example: data.filename,
title: data.title, title: data.title,
shortdesc: data.shortdesc, shortdesc: data.shortdesc,
tags: data.tags, tags: data.tags,
@@ -292,15 +291,11 @@ class ExampleBuilder {
jsSource = jsSource.replace('new Worker()', "new Worker('./worker.js')"); jsSource = jsSource.replace('new Worker()', "new Worker('./worker.js')");
data.js = { data.js = {
tag: `<script src="${this.common}.js"></script><script src="${jsName}"></script>`, tag: `<script src="${this.common}.js"></script>
<script src="${jsName}"></script>`,
source: jsSource, source: jsSource,
}; };
if (data.experimental) {
const prelude = '<script>window.experimental = true;</script>';
data.js.tag = prelude + data.js.tag;
}
// check for worker js // check for worker js
const workerName = `${name}.worker.js`; const workerName = `${name}.worker.js`;
const workerPath = path.join(data.dir, workerName); const workerPath = path.join(data.dir, workerName);
examples/xyz-esri.html
+1 -1
View File
@@ -4,6 +4,6 @@ title: XYZ Esri
shortdesc: Example of a XYZ source using Esri tiles. shortdesc: Example of a XYZ source using Esri tiles.
docs: > docs: >
ArcGIS REST tile services are supported by `ol/source/XYZ`. ArcGIS REST tile services are supported by `ol/source/XYZ`.
tags: "xyz, esri, arcgis rest" tags: "xyz, esri, ArcGIS, REST"
--- ---
<div id="map" class="map"></div> <div id="map" class="map"></div>