-
Notifications
You must be signed in to change notification settings - Fork 328
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1129 from AlitaBernachot/icon-edit-code-in-sandbo…
…x-vite Icon edit code in sandbox
- Loading branch information
Showing
54 changed files
with
1,286 additions
and
721 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,178 @@ | ||
| const lzScript = document.createElement('script'); | ||
| lzScript.src = 'https://cdn.jsdelivr.net/npm/lz-string@1.4.4/libs/lz-string.min.js'; | ||
| document.head.appendChild(lzScript); | ||
|
|
||
| function compress(json) { | ||
| return window.LZString.compressToBase64(JSON.stringify(json)) | ||
| .replace(/\+/g, '-') | ||
| .replace(/\//g, '_') | ||
| .replace(/=+$/, ''); | ||
| } | ||
|
|
||
| export async function initCodeSandbox(indexJsPath, ...filesPathes) { | ||
| const response = await fetch(indexJsPath); | ||
| const txtData = await response.text(); | ||
| const indexJsContent = txtData.split('//##REMOVE##')[0]; | ||
| const additionalJsFiles = {}; | ||
| const resourcesFiles = filesPathes | ||
| .filter(path => path.indexOf('data/') === 0) | ||
| // eslint-disable-next-line arrow-body-style | ||
| .map(path => ({ | ||
| [path]: { | ||
| 'isBinary': true, | ||
| content: `https://openlayers.org/ol-cesium/examples/${path}` | ||
| } | ||
| })); | ||
| const jsFiles = filesPathes.filter(path => !path.startsWith('data/')); | ||
|
|
||
| for (const filePath of jsFiles) { | ||
| const responseFile = await fetch(filePath); | ||
| const txtDataFile = await responseFile.text(); | ||
|
|
||
| additionalJsFiles[filePath.replace('./', '').replace('rawjs', '')] = {content: txtDataFile}; | ||
| } | ||
|
|
||
| initCodeSandboxButton({indexJsContent, additionalJsFiles, resourcesFiles}); | ||
| } | ||
|
|
||
| function initCodeSandboxButton(options) { | ||
| const {indexJsContent, additionalJsFiles, resourcesFiles} = options; | ||
|
|
||
| let indexHtmlContent = ''; | ||
| const button = document.getElementById('sandbox-button'); | ||
| const form = document.querySelector('#sandbox-form'); | ||
|
|
||
| if (!button || !form) { | ||
| return; | ||
| } | ||
|
|
||
| const divExampleCodeSource = document.createElement('div'); | ||
| divExampleCodeSource.innerHTML = document.getElementById('example-html-source').innerHTML; | ||
| divExampleCodeSource.querySelectorAll('.clear-map-sandbox').forEach(map => map.innerHTML = ''); | ||
| indexHtmlContent = divExampleCodeSource.innerHTML; | ||
|
|
||
| const indexHtml = ` | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Ol-Cesium example in sandbox</title> | ||
| <meta charset="UTF-8" /> | ||
| <link rel="stylesheet" href="node_modules/ol/ol.css"> | ||
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> | ||
| <script src="https://cesium.com/downloads/cesiumjs/releases/1.122/Build/Cesium/Cesium.js"></script> | ||
| <style> | ||
| .ol-popup { | ||
| position: absolute; | ||
| background-color: white; | ||
| -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); | ||
| filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); | ||
| padding: 15px; | ||
| border-radius: 10px; | ||
| border: 1px solid #cccccc; | ||
| bottom: 12px; | ||
| left: -50px; | ||
| min-width: 280px; | ||
| } | ||
| .ol-popup:after, .ol-popup:before { | ||
| top: 100%; | ||
| border: solid transparent; | ||
| content: " "; | ||
| height: 0; | ||
| width: 0; | ||
| position: absolute; | ||
| pointer-events: none; | ||
| } | ||
| .ol-popup:after { | ||
| border-top-color: white; | ||
| border-width: 10px; | ||
| left: 48px; | ||
| margin-left: -10px; | ||
| } | ||
| .ol-popup:before { | ||
| border-top-color: #cccccc; | ||
| border-width: 11px; | ||
| left: 48px; | ||
| margin-left: -11px; | ||
| } | ||
| .ol-popup-closer { | ||
| text-decoration: none; | ||
| position: absolute; | ||
| top: 2px; | ||
| right: 8px; | ||
| } | ||
| .ol-popup-closer:after { | ||
| content: "✖"; | ||
| } | ||
| .popover-content { | ||
| min-width: 180px; | ||
| } | ||
| code { | ||
| padding: 2px 4px; | ||
| font-size: 90%; | ||
| color: #c7254e; | ||
| background-color: #f9f2f4; | ||
| border-radius: 4px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| ${indexHtmlContent} | ||
| </body> | ||
| <script type="module" src="/index.js"></script> | ||
| <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> | ||
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | ||
| </html>`; | ||
| const parameters = { | ||
| template: 'parcel', | ||
| files: { | ||
| 'package.json': { | ||
| content: { | ||
| 'source': 'index.html', | ||
| 'main': 'index.html', | ||
| 'scripts': { | ||
| 'build': 'vite build', | ||
| 'start': 'npm run build && serve dist', | ||
| }, | ||
| 'devDependencies': { | ||
| 'serve': '14.2.3', | ||
| 'vite': '^3.2.3', | ||
| '@babel/core': '^7.24.4', | ||
| '@babel/plugin-proposal-class-properties': '^7.18.6' | ||
| }, | ||
| 'dependencies': { | ||
| 'olcs': '2.20.0', | ||
| 'proj4': '2.11.0', | ||
| 'cesium': '1.122.0', | ||
| 'ol': '10.1.0' | ||
| } | ||
| }, | ||
| }, | ||
| '.babelrc': { | ||
| content: '{ "plugins": ["@babel/plugin-proposal-class-properties"] }' | ||
| }, | ||
| 'index.js': { | ||
| content: indexJsContent, | ||
| }, | ||
| 'index.html': { | ||
| content: indexHtml | ||
| }, | ||
| ...resourcesFiles.reduce((acc, curr) => { | ||
| const key = Object.keys(curr)[0]; // Récupérer la clé de l'objet | ||
| acc[key] = curr[key]; // Ajouter la propriété à l'objet accumulé | ||
| return acc; | ||
| }, {}), | ||
| ...additionalJsFiles | ||
| } | ||
| }; | ||
|
|
||
| button.onclick = function(event) { | ||
| event.preventDefault(); | ||
| form.parameters.value = compress(parameters); | ||
| form.submit(); | ||
| }; | ||
| } | ||
|
|
||
| // dans npm prepare : extraire les versions à utiliser et faire un fichier json avec ces versions | ||
| // Ce fichier json doit etre lu, faire un fetch de ce fichier | ||
| // ce fichier ne peut pas etre commit | ||
| // à rajouter dans gitinore |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,32 @@ | ||
| <?xml version='1.0' encoding='UTF-8'?> | ||
| <!DOCTYPE HTML> | ||
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
| <meta name="robots" content="index, all" /> | ||
| <title>olcesium buildings example</title> | ||
| <title>Ol-Cesium | Buildings example</title> | ||
| <link rel="stylesheet" href="../node_modules/ol/ol.css" type="text/css"></link> | ||
| <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" crossorigin="anonymous"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="map2d" style="width:600px;height:400px;float:left;"></div> | ||
| <div id="map3d" style="width:600px;height:400px;float:left;position:relative;"></div> | ||
| <div>A building may be highlighted by clicking it on the OpenLayers map. | ||
| <br/>It gets automatically selected in Cesium. | ||
| <br/>If you see flickering in Cesium, please check your graphic card drivers.</div> | ||
| <script src="./inject_ol_cesium.js"></script> | ||
| <script type="module" src="./buildings.js"></script> </body> | ||
| <div style="text-align: right;"> | ||
| <button id="sandbox-button"><i class="fab fa-codepen fa-lg"></i> Edit in sandbox</button> | ||
| <form method="POST" id="sandbox-form" target="_blank" action="https://codesandbox.io/api/v1/sandboxes/define"> | ||
| <input id="sandbox-params" type="hidden" name="parameters"> | ||
| </form> | ||
| </div> | ||
|
|
||
| <div id="example-html-source"> | ||
| <div class="clear-map-sandbox" id="map2d" style="width:600px;height:400px;float:left;"></div> | ||
| <div class="clear-map-sandbox" id="mapCesium" style="width:600px;height:400px;float:left;position:relative;"></div> | ||
| <div> | ||
| A building may be highlighted by clicking it on the OpenLayers map. | ||
| <br/>It gets automatically selected in Cesium. | ||
| <br/>If you see flickering in Cesium, please check your graphic card drivers. | ||
| </div> | ||
| </div> | ||
|
|
||
| <script src="./inject_ol_cesium.js"></script> | ||
| <script type="module" src="./buildings.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,28 @@ | ||
| <?xml version='1.0' encoding='UTF-8'?> | ||
| <!DOCTYPE HTML> | ||
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
| <meta name="robots" content="index, all" /> | ||
| <title>Custom projection example</title> | ||
| <title>Ol-Cesium | Custom projection example</title> | ||
| <link rel="stylesheet" href="../node_modules/ol/ol.css" type="text/css"> | ||
| <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" crossorigin="anonymous"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="map" style="width:600px;height:400px;"></div> | ||
| <input id="enable" type="button" value="Enable/disable" /> | ||
| <div style="text-align: right;"> | ||
| <button id="sandbox-button"><i class="fab fa-codepen fa-lg"></i> Edit in sandbox</button> | ||
| <form method="POST" id="sandbox-form" target="_blank" action="https://codesandbox.io/api/v1/sandboxes/define"> | ||
| <input id="sandbox-params" type="hidden" name="parameters"> | ||
| </form> | ||
| </div> | ||
|
|
||
| <div id="example-html-source"> | ||
| <div class="clear-map-sandbox" id="mapCesium" style="width:600px;height:400px;"></div> | ||
| <input id="enable" type="button" value="Enable/disable" /> | ||
| </div> | ||
|
|
||
| <script src="./inject_ol_cesium.js"></script> | ||
| <script type="module" src="./customProj.js"></script> </body> | ||
| <script type="module" src="./customProj.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/lz-string@1.4.4/libs/lz-string.min.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.