diff --git a/examples/resources/common.js b/examples/resources/common.js
index cf08daeb91..e5fcee19e5 100644
--- a/examples/resources/common.js
+++ b/examples/resources/common.js
@@ -1,42 +1,46 @@
(function() {
- var clipboard = new Clipboard('#copy-button');
- clipboard.on('success', function(e) {
+
+ function compress(json) {
+ return LZString.compressToBase64(JSON.stringify(json))
+ .replace(/\+/g, `-`)
+ .replace(/\//g, `_`)
+ .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();
});
- var codepenButton = document.getElementById('codepen-button');
+ var codepenButton = document.getElementsByClassName('codepen-button')[0];
if (codepenButton) {
codepenButton.onclick = function(event) {
event.preventDefault();
var form = document.getElementById('codepen-form');
-
- // Doc : https://blog.codepen.io/documentation/api/prefill/
-
- var resources = form.resources.value.split(',');
-
- var data = {
- title: form.title.value,
- description: form.description.value,
- layout: 'left',
- html: form.html.value,
- css: form.css.value,
- js: form.js.value,
- css_external: resources.filter(function(resource) {
- return resource.lastIndexOf('.css') === resource.length - 4;
- }).join(';'),
- js_external: resources.filter(function(resource) {
- return resource.lastIndexOf('.js') === resource.length - 3;
- }).join(';')
- };
-
- // binary flags to display html, css, js and/or console tabs
- data.editors = '' + Number(data.html.length > 0) +
- Number(data.css.length > 0) +
- Number(data.js.length > 0) +
- Number(data.js.indexOf('console') > 0);
-
- form.data.value = JSON.stringify(data);
-
+ const html = document.getElementById('example-html-source').innerText;
+ const js = document.getElementById('example-js-source').innerText;
+ const pkgJson = document.getElementById('example-pkg-source').innerText;
+ form.parameters.value = compress({
+ files: {
+ 'index.html': {
+ content: html
+ },
+ 'index.js': {
+ content: js
+ },
+ "package.json": {
+ content: pkgJson
+ }
+ }
+ });
form.submit();
};
}
diff --git a/examples/resources/layout.css b/examples/resources/layout.css
index 021776f301..a1873a1222 100644
--- a/examples/resources/layout.css
+++ b/examples/resources/layout.css
@@ -91,22 +91,27 @@ pre[class*="language-"] {
background: #FFFFFF;
}
-#source-controls {
+pre>legend {
+ font-size: 100%;
+ font-weight: bold;
+}
+
+.source-controls {
position: absolute;
- margin-top: 20px;
+ margin-top: 10px;
right: 40px;
}
-#source-controls a {
+.source-controls a {
margin-left: 15px;
}
-#copy-button {
+.copy-button {
text-decoration: none;
cursor: pointer;
}
-#codepen-button {
+.codepen-button {
text-decoration: none;
cursor: pointer;
}
diff --git a/examples/templates/example.html b/examples/templates/example.html
index 5ecbafe2c4..03e4292bd7 100644
--- a/examples/templates/example.html
+++ b/examples/templates/example.html
@@ -27,6 +27,7 @@
+
diff --git a/examples/webpack/example-builder.js b/examples/webpack/example-builder.js
index 218b6d37d9..10e2a1e361 100644
--- a/examples/webpack/example-builder.js
+++ b/examples/webpack/example-builder.js
@@ -10,6 +10,7 @@ const RawSource = require('webpack-sources').RawSource;
const readFile = promisify(fs.readFile);
const isCssRegEx = /\.css$/;
const isJsRegEx = /\.js(\?.*)?$/;
+const importRegEx = /^import .* from '(.*)';$/;
handlebars.registerHelper('md', str => new handlebars.SafeString(marked(str)));
@@ -83,6 +84,38 @@ function getJsSource(chunk, jsName) {
}
}
+/**
+ * Gets dependencies from the js source.
+ * @param {string} jsSource Source.
+ * @return {Object} dependencies
+ */
+function getDependencies(jsSource) {
+ const lines = jsSource.split('\n');
+ const dependencies = {
+ ol: pkg.version
+ };
+ for (let i = 0, ii = lines.length; i < ii; ++i) {
+ const line = lines[i];
+ const importMatch = line.match(importRegEx);
+ if (importMatch) {
+ const imp = importMatch[1];
+ if (!imp.startsWith('ol/') && imp != 'ol') {
+ const parts = imp.split('/');
+ let dep;
+ if (imp.startsWith('@')) {
+ dep = parts.slice(0, 2).join('/');
+ } else {
+ dep = parts[0];
+ }
+ if (dep in pkg.devDependencies) {
+ dependencies[dep] = pkg.devDependencies[dep];
+ }
+ }
+ }
+ }
+ return dependencies;
+}
+
/**
* A webpack plugin that builds the html files for our examples.
* @param {Object} config Plugin configuration. Requires a `templates` property
@@ -167,6 +200,17 @@ ExampleBuilder.prototype.render = async function(dir, chunk) {
tag: ``,
source: jsSource
};
+ data.pkgJson = JSON.stringify({
+ name: name,
+ dependencies: getDependencies(jsSource),
+ devDependencies: {
+ parcel: '1.11.0'
+ },
+ scripts: {
+ start: 'parcel index.html',
+ build: 'parcel build --experimental-scope-hoisting --public-url . index.html'
+ }
+ }, null, 2);
// check for example css
const cssName = `${name}.css`;