Docs: jsfiddle for the examples

simzer · simzer · commit 2de502dd87d3 · 2021-09-29T08:02:36.000+02:00
diff --git a/docs/generator/example.in.html b/docs/generator/example.in.html
@@ -6,14 +6,28 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<link rel='stylesheet' type='text/css' media='screen' href='../../../style/highlight.css'>
 		<link rel='stylesheet' type='text/css' media='screen' href='../../../style/example.css'>
+		<script type="module">
+			import JsFiddle from '../../../script/jsfiddle.js';
+			document.getElementById('example-edit-btn').onclick = () => {
+				let html = `<div id="vizzuCanvas" ></div>`;
+				let css = `#vizzuCanvas {
+					width: 680px; 
+					height: 446px;
+				}`;
+				let code = document.getElementById('script')
+					.getElementsByTagName('SCRIPT')[0].innerText;
+				JsFiddle.post(html, css, code);
+			}
+		</script>
 	</head>
 <body>
 	<noscript>
 		<p class="noscript">To use Vizzu, please enable Javascript.</p>
 	</noscript>
 	<div id="vizzuCanvas"></div>
 	<div id="navigation">
-		<button id="example-replay-btn" class="button" type="button" onclick="location.reload()">&#9654; replay</button>
+		<button id="example-replay-btn" class="button example-btn" type="button" onclick="location.reload()">&#9654; replay</button>
+		<button id="example-edit-btn" class="button example-btn" type="button">edit</button>
 	</div>
 	<div id="script"></div>
 	<div id="code"></div>
diff --git a/docs/generator/example.js b/docs/generator/example.js
@@ -34,7 +34,8 @@ class Example
 
 		script = script.replace(/export default testSteps;/,'');
 		script = script.replace(/(import.*)/,(match, p1) => {
-			this.imports += p1 + '\n';
+			let importLine = p1.replace(/from\s+(['"])/,"from $1https://lib.vizzuhq.com");
+			this.imports += importLine + '\n';
 			return '';
 		});
 
diff --git a/docs/script/jsfiddle.js b/docs/script/jsfiddle.js
@@ -3,7 +3,7 @@ export default class JsFiddle {
     static post(html, css, js){
         let form = document.createElement("form");
         form.method = "POST";
-        form.action = "http://jsfiddle.net/api/post/library/pure/";
+        form.action = "https://jsfiddle.net/api/post/library/pure/";
         form.target = "_blank";
         let params = {
             html: html,
diff --git a/docs/style/example.css b/docs/style/example.css
@@ -36,14 +36,14 @@ body {
 	text-align: center;
 }
 
-#example-replay-btn {
+.example-btn {
 	margin: auto;
 	margin-top: 1em;
 	background-color: #fafafa;
 	color: #aaa;
 }
 
-#example-replay-btn:hover {
+.example-btn:hover {
 	background-color: #ffffff;
 	color: #666;
 	filter: drop-shadow(0px 2px 3px #eee);
