CSS is now embedded in simulator.js

3 years ago · 4895ac2bb4
5 changed files with 22 additions and 3 deletions
--- a/simulator/src/simulator-ui.ts
+++ b/simulator/src/simulator-ui.ts
@ -30,6 +30,9 @@ function runSimulation(parameters: SimulationParameters): Simulator.SimulationRe
 }

 document.addEventListener('DOMContentLoaded', function() {
+	// Load CSS
+	document.getElementsByTagName('head')[0].innerHTML += (<any>window)['simulator.css'];
+	
 	let container = document.getElementById('simulator');
 	
 	// Insert HTML code in the container
--- a/simulator/src/simulator.scss
+++ b/simulator/src/simulator.scss
@ -26,3 +26,19 @@
 	
 	@import "app.scss";
 }
+
+// Integration in a wordpress page
+body.page {
+	#simulator {
+		width: 100%;
+		max-width: 100%;
+		
+		button.delete {
+			padding: 0;
+		}
+	
+		.select:not(.is-multiple):not(.is-loading)::after {
+			border: none; // wordpress has its own icon for select elements
+		}
+	}
+}
--- a/simulator/tools/embed.js
+++ b/simulator/tools/embed.js
@ -84,3 +84,4 @@ let intermediateDir = toolsDir + "/../.intermediate";
 embedHtml(srcDir+'/simulator.html', intermediateDir+'/simulator.html.ts');
 embedSvg(dataDir+'/climate-zones-map.svg', intermediateDir+'/climate-zones-map.svg.ts');
 embedCsv(dataDir+'/climate-zones-data.csv', intermediateDir+'/climate-zones-data.ts');
+embedCss(intermediateDir+'/simulator.css', intermediateDir+'/simulator.css.ts');
--- a/simulator/tools/purify.js
+++ b/simulator/tools/purify.js
@ -7,8 +7,8 @@ let content = ['./*.html'];
 let css = ['../.intermediate/simulator.css'];
  
 let options = {
-    output: '../www/simulator.css',
-    whitelist: ['is-multiple', 'is-loading', 'is-narrow', 'is-active', 'climate-zone', 'grid-recharge', 'is-max-desktop', 'is-max-widescreen', 'line'],
+    output: '../.intermediate/simulator.css',
+    whitelist: ['is-multiple', 'is-loading', 'is-narrow', 'is-active', 'climate-zone', 'grid-recharge', 'is-max-desktop', 'is-max-widescreen', 'line', 'page'],
    minify: false,
    info: false
 };
--- a/simulator/www/vhelio-simulator.html
+++ b/simulator/www/vhelio-simulator.html
@ -3,7 +3,6 @@
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<link rel="stylesheet" href="simulator.css">
 		
 		<style>
 			html, body {