From 71ab04c1f00286c48f7597d9ed806d513dbf3559 Mon Sep 17 00:00:00 2001
From: GhostlyDark <31742919+GhostlyDark@users.noreply.github.com>
Date: Sat, 7 Nov 2020 19:06:16 +0100
Subject: [PATCH] Remove inline CSS and inline JS

Gets rid of the inline CSS and inline JS. Allows for a stricter CSP implementation.
---
 index.html           | 12 ++++++------
 js/RomPatcher.js     |  8 ++++++++
 style/RomPatcher.css |  5 +++++
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 4438d87..2e16e66 100644
--- a/index.html
+++ b/index.html
@@ -99,7 +99,7 @@
 
 <!-- APP -->
 <div id="wrapper">
-	<div id="switch-container"><span id="switch-create-button" onclick="setCreatorMode(!/enabled/.test(el('switch-create').className));"><span data-localize="creator_mode">Creator mode</span> <span id="switch-create" class="switch disabled"></span></span></div>
+	<div id="switch-container"><span id="switch-create-button"><span data-localize="creator_mode">Creator mode</span> <span id="switch-create" class="switch disabled"></span></span></div>
 
 	<div id="tab0" class="tab">
 		<div class="row">
@@ -113,13 +113,13 @@
 			<div class="leftcol">MD5:</div><div class="rightcol"><span id="md5"></span></div>
 			<div class="leftcol">SHA-1:</div><div class="rightcol"><span id="sha1"></span></div>
 		</div>
-		<div class="row" id="row-removeheader" style="display:none">
+		<div class="row" id="row-removeheader">
 			<div class="leftcol"></div>
 			<div class="rightcol">
 				<input type="checkbox" id="checkbox-removeheader" /> <label for="checkbox-removeheader" data-localize="remove_header">Remove header before patching</label>
 			</div>
 		</div>
-		<div class="row" id="row-addheader" style="display:none">
+		<div class="row" id="row-addheader">
 			<div class="leftcol"></div>
 			<div class="rightcol">
 				<input type="checkbox" id="checkbox-addheader" /> <label for="checkbox-addheader" data-localize="add_header">Add temporary header</label> <small>(<label id="headersize" for="checkbox-addheader"></label>)</small>
@@ -135,7 +135,7 @@
 
 		<div class="buttons">
 			<span id="message-apply" class="message"></span>
-			<button id="button-apply" data-localize="apply_patch" class="disabled" disabled onclick="applyPatch(patch, romFile, false)">Apply patch</button>
+			<button id="button-apply" data-localize="apply_patch" class="disabled" disabled>Apply patch</button>
 		</div>
 	</div>
 
@@ -172,7 +172,7 @@
 
 		<div class="buttons">
 			<span id="message-create" class="message"></span>
-			<button id="button-create" class="disabled" disabled onclick="createPatch(romFile1, romFile2, el('select-patch-type').value)" data-localize="create_patch">Create patch</button>
+			<button id="button-create" class="disabled" disabled data-localize="create_patch">Create patch</button>
 		</div>
 	</div>
 </div>
@@ -184,7 +184,7 @@
 <!-- FOOTER -->
 <footer>
 	<div>
-		<select id="select-language" onchange="setLanguage(this.value)">
+		<select id="select-language">
 			<option value="en">English</option>
 			<option value="de">Deutsch</option>
 			<option value="es">Español</option>
diff --git a/js/RomPatcher.js b/js/RomPatcher.js
index e38add2..e4fe820 100644
--- a/js/RomPatcher.js
+++ b/js/RomPatcher.js
@@ -674,6 +674,14 @@ function setCreatorMode(creatorMode){
 
 
 
+/* Event listeners */
+
+document.addEventListener('DOMContentLoaded', function() {
+document.getElementById("switch-create-button").addEventListener('click', function(){setCreatorMode(!/enabled/.test(el('switch-create').className))})
+document.getElementById("button-apply").addEventListener('click', function(){applyPatch(patch, romFile, false)})
+document.getElementById("button-create").addEventListener('click', function(){createPatch(romFile1, romFile2, el('select-patch-type').value)})
+document.getElementById("select-language").addEventListener('change', function(){setLanguage(this.value)})
+})
 
 
 
diff --git a/style/RomPatcher.css b/style/RomPatcher.css
index 69f70e0..63853fb 100644
--- a/style/RomPatcher.css
+++ b/style/RomPatcher.css
@@ -19,6 +19,11 @@ body{
 	user-select:none
 }
 
+
+/* hide header checkboxes */
+#row-removeheader,#row-addheader{display:none}
+
+
 /* flex main column */
 html, body{height:100%}
 #column{