Popup: Add showMessagePopup() to popup object

JasonMo1 · Sep 16, 2023 · fbe2821 · fbe2821
1 parent c6bdf79
commit fbe2821
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 80 deletions.
diff --git a/index.html b/index.html
@@ -30,8 +30,8 @@
   </head>
 
   <body>
-    <section id="popup-message">
-    </section>
+    <section id="popup-message"></section>
+
     <section id="blackbg"></section>
 
     <section class="popup" id="about-message">
@@ -273,7 +273,6 @@ <h4>Ready?</h4>
         </section>
     </section>
 
-
     <section class="bottompanel">
       <section class="tabs">
         <div class="tab">Disassemble</div>
@@ -332,14 +331,14 @@ <h4>Ready?</h4>
     <script src="hardemu/ram.js"></script>
     <script src="hardemu/mmu.js"></script>
     <script src="hardemu/Z80.js"></script>
-    <script src="view/popout.js"></script>
+    <script src="view/popup.js"></script>
     <script src="hardemu/screen.js"></script>
     <script src="hardemu/machine.js"></script>
     <!-- view scripts -->
     <script src="view/utils.js"></script>
     <script src="view/breakpoint.js"></script>
     <script src="view/menus.js"></script>
-    <script src="view/misc.js"></script>
+    <script src="view/screen.js"></script>
     <script src="view/panel.js"></script>
     <script src="view/readrom.js"></script>
     <script src="view/init.js"></script>

diff --git a/package.json b/package.json
@@ -27,7 +27,6 @@
   "license": "Apache",
   "dependencies": {
     "electron-squirrel-startup": "^1.0.0",
-    "open": "^9.1.0",
     "opn": "^6.0.0"
   },
   "devDependencies": {
@@ -37,7 +36,7 @@
     "@electron-forge/maker-squirrel": "^6.2.1",
     "@electron-forge/maker-zip": "^6.2.1",
     "@electron-forge/plugin-auto-unpack-natives": "^6.2.1",
-    "electron": "25.2.0",
+    "electron": "^25.2.0",
     "electron-builder": "^24.6.4",
     "electron-squirrel-startup": "^1.0.0"
   },

diff --git a/view/css/emulator.css b/view/css/emulator.css
@@ -476,7 +476,6 @@ button {
     width: 35em;
     margin-left: auto;
     margin-right: auto;
-    color:#6d0000;
     z-index: 20;
 }
 
@@ -498,13 +497,6 @@ button {
     border: 1px solid #0071bf;
 }
 
-.popconfirm {
-    color: #074670;
-    background: #3065ab;
-    border: 1px solid #295e84;
-    min-width: 4em;
-}
-
 #loading_img {
     visibility: hidden;
     vertical-align: middle;

diff --git a/view/init.js b/view/init.js
@@ -31,4 +31,4 @@ document.addEventListener('keydown', function(event) {
 // Init Emulated hardware
 var zealcom = new Zeal8bitComputer();
 const disassembler = new Disassembler();
-const popout = new PopOut();
+const popout = new Popup();
diff --git a/view/popup.js b/view/popup.js
@@ -12,77 +12,33 @@ $("#popup-message").on("click", function() {
 /**
  * Manage the popup message
  */
-function PopOut() {
-    function pop_error(data) {
-        console.error(data);
+function Popup() {
+    function msg(data, instead, _class) {
+        console[instead](data);
         const popup = $("#popup-message");
-
-        popup.removeClass();
-        popup.addClass("poperror");
-        popup.html(data);
-        popup.fadeIn(1000);
-        setTimeout(() => {
-            popup.fadeOut(1000);
-        }, 3000);
-    }
-
-    function pop_warn(data) {
-        console.warn(data);
-        const popup = $("#popup-message");
-
-        popup.removeClass();
-        popup.addClass("popwarn");
-        popup.html(data);
-        popup.fadeIn(1000);
-        setTimeout(() => {
-            popup.fadeOut(1000);
-        }, 3000);
-    }
-
-    function pop_log(data) {
-        console.log(data);
-        const popup = $("#popup-message");
-
         popup.removeClass();
-        popup.addClass("poplog");
+        popup.addClass(_class);
         popup.html(data);
         popup.fadeIn(1000);
         setTimeout(() => {
             popup.fadeOut(1000);
         }, 3000);
     }
 
-    function pop_info(data) {
-        pop_log(data);
+    function doc(target) {
+        if (!target) {
+            error("Error while showing HTML");
+        }
+        target_elt = $("#" + target);
+        $("#blackbg").fadeIn(300);
+        target_elt.fadeIn(500);
     }
 
-    /** Too ugly, don't use it now */
-    function pop_confirm(message) {
-        let html = `<div>${message}<button class="popconfirm">Ok</button><button class="popconfirm">Cancel</button></div>`
-        const popup = $("#popup-message");
-
-        popup.removeClass();
-        popup.addClass("poplog");
-        popup.html(html);
-        popup.fadeIn(1000);
-        setTimeout(() => {
-            popup.fadeOut(1000);
-        }, 3000);
-    }
-
-    this.error = pop_error;
-    this.warn = pop_warn;
-    this.log = pop_log;
-    this.info = pop_info;
-    this.confirm = pop_confirm;
-}
-
-// TODO: Add these APIs to popout object
-
-function showMessagePopup(target)
-{
-    $("#blackbg").fadeIn(300);
-    target.fadeIn(500);
+    this.error = (data)   => msg(data, "error", "poperror");
+    this.warn  = (data)   => msg(data, "warn", "popwarn");
+    this.info  = (data)   => msg(data, "log", "poplog");
+    this.log   = (data)   => msg(data, "log", "poplog");
+    this.doc   = (target) => doc(target);
 }
 
 $("#blackbg").click(function() {
@@ -95,8 +51,5 @@ $("#blackbg").click(function() {
  */
 $("footer a").on("click", function(){
     const target = $(this).data("target");
-    const target_elt = $("#" + target);
-    if (target_elt) {
-        showMessagePopup(target_elt);
-    }
+    popout.doc(target);
 });