Refactor main.js

Signed-off-by: mctaylors <cantsendmails@mctaylors.ru>

assets/js/main.js

@@ -1,28 +1,26 @@
+const root = document.documentElement;
+const dialogElement = document.getElementById('dialog');
+const detailsElement = document.getElementById('details');
+const dialogContentElement = document.getElementById('dialog-content');
+const errorSoundElement = document.getElementById('error');
+const clickSoundElement = document.getElementById('click');
+
 window.onload = function() {
     setTimeout(function () {
-        play("error");
+        errorSoundElement.play();
     }, 1000)
 }
 
 const getStyleProperty = (s, p) => getComputedStyle(s).getPropertyValue(p);
 
-function play(audioId) {
-    let audioElement = document.getElementById(audioId);
-    audioElement.play();
-}
-
 function close_button(href) {
-    play("click");
+    clickSoundElement.play();
     window.location.href = href;
 }
 
 function details_button() {
-    play("click");
+    clickSoundElement.play();
-    document.getElementById('dialog-content').style.opacity = '0';
+    dialogContentElement.style.opacity = '0';
-
-    let root = document.documentElement;
-    let dialogElement = document.getElementById('dialog');
-    let detailsElement = document.getElementById('details');
 
     dialogElement.animate([
         {

samples/multiple-buttons.html

@@ -5,7 +5,6 @@
   <title>NXInspired</title>
   <link rel="icon" href="/assets/svg/nxinspired.svg"/>
   <link rel="stylesheet" href="/assets/css/style.css"/>
-  <script type="text/javascript" src="/assets/js/main.js"></script>
   <audio id="click" src="/assets/wav/click.wav"></audio>
   <audio id="error" src="/assets/wav/error.wav"></audio>
 </head>
@@ -47,5 +46,6 @@
     <span>OK</span>
   </button>
 </div>
+<script type="text/javascript" src="/assets/js/main.js"></script>
 </body>
 </html>

samples/single-button.html

@@ -5,7 +5,6 @@
   <title>NXInspired</title>
   <link rel="icon" href="/assets/svg/nxinspired.svg"/>
   <link rel="stylesheet" href="/assets/css/style.css"/>
-  <script type="text/javascript" src="/assets/js/main.js"></script>
   <audio id="click" src="/assets/wav/click.wav"></audio>
   <audio id="error" src="/assets/wav/error.wav"></audio>
 </head>
@@ -25,5 +24,6 @@
     </button>
   </div>
 </div>
+<script type="text/javascript" src="/assets/js/main.js"></script>
 </body>
 </html>