From 9e2bf57fcb6ba2cec10aee6209029992516f3ea2 Mon Sep 17 00:00:00 2001
From: Denis Komarkov <denis.komarkov@gmail.com>
Date: Tue, 24 Jan 2023 05:28:49 +0200
Subject: [PATCH] info menu

---
 www/index.html                          |  29 ++++--
 www/index.ts                            | 114 ++++++++++++++----------
 www/style.css                           |  54 +++++++++--
 www/svgs/information-circle-outline.svg |   1 +
 4 files changed, 135 insertions(+), 63 deletions(-)
 create mode 100644 www/svgs/information-circle-outline.svg
diff --git a/www/index.html b/www/index.html
index 0322724..618aa7c 100644
--- a/www/index.html
+++ b/www/index.html
@@ -28,7 +28,7 @@
             * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                 * Enable inline JS: add 'unsafe-inline' to default-src
         -->
-        <meta http-equiv="Content-Security-Policy" content="unsafe-inline default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
+        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:; connect-src 'self' http://api.github.com;">
         <meta name="format-detection" content="telephone=no">
         <meta name="msapplication-tap-highlight" content="no">
         <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0, width=device-width, viewport-fit=cover">
@@ -37,9 +37,9 @@
         <title>Calculator</title>
     </head>
     <body>
-        <div class="wrapper">
+        <div class="wrapper" id="main">
             <div id="screen">
-                <div class="bars" id="menuBtn" onclick="openMenu('settings')"></div>
+                <div class="bars closeBtn" onclick="openMenu('settings', 'main')"></div>
                 <span id="expression"></span>
                 <span id="result"></span>
             </div>
@@ -83,8 +83,9 @@
             </table>
         </div>
         <div id="settings" class="menu closed">
-            <div class="xMark" id="menuBtn" onclick="closeMenu('settings')"></div>
-            <div class="pref">
+            <div class="xMark closeBtn" onclick="closeMenu('settings', 'main')"></div>
+            <div class="infoBtn nfoSvg" onclick="openMenu('info', 'settings')"></div>
+            <div class="menuContent pref">
                 <div><span>Spacing</span><input id="s_spacing" type="range" value="3" min="0" max="15" onchange="setSetting('spacing', this)"></div>
                 <div><span>Radius</span><input id="s_radius" type="range" value="0" min="0" max="40" onchange="setSetting('radius', this)"></div>
                 <div><span>Font size</span><input id="s_font-size" type="range" value="30" min="16" max="40" onchange="setSetting('font-size', this)"></div>
@@ -95,7 +96,23 @@
                 <div><span>Button color</span><input id="s_back-color" type="color" value="#353535" onchange="setSetting('back-color', this)"></div>
                 <div><span>Accent color</span><input id="s_fore-accent-color" type="color" value="#ffa500" onchange="setSetting('fore-accent-color', this)"></div>
                 <div><button onclick="resetSettings()">Default</button></div>
-                <span class="desc">developed with &#10084; by kd3n1z</span>
+            </div>
+        </div>
+        <div id="info" class="menu closed">
+            <div class="xMark closeBtn" id="menuBtn" onclick="closeMenu('info', 'settings')"></div>
+            <div class="menuContent info">
+                <span>Calculator, build <span id="buildNum">?</span></span>
+                <span>developed with &#10084; by <a onclick="openLink('https://kd3n1z.com/')">kd3n1z</a></span>
+                <br>
+                <span>Credits</span>
+                <span><a onclick="openLink('https://cordova.apache.org/')">Cordova</a> by <a onclick="openLink('https://apache.org/')">Apache</a></span>
+                <span><a onclick="openLink('https://ionic.io/ionicons')">Icons</a> by <a onclick="openLink('https://ionic.io/')">Ionic</a></span>
+                <span><a onclick="openLink('https://fonts.google.com/specimen/Montserrat')">Montserrat</a> by 
+                    <a onclick="openLink('https://fonts.google.com/?query=Julieta%20Ulanovsky')">Julieta Ulanovsky</a>, 
+                    <a onclick="openLink('https://fonts.google.com/?query=Sol%20Matas')">Sol Matas</a>, 
+                    <a onclick="openLink('https://fonts.google.com/?query=Juan%20Pablo%20del%20Peral')">Juan Pablo del Peral</a>, 
+                    <a onclick="openLink('https://fonts.google.com/?query=Jacques%20Le%20Bailly')">Jacques Le Bailly</a>
+                </span>
             </div>
         </div>
         <div id="loading">
diff --git a/www/index.ts b/www/index.ts
index b3521d3..69d4a1b 100644
--- a/www/index.ts
+++ b/www/index.ts
@@ -1,6 +1,6 @@
 const build: number = 3;
 
-//#region menus and other
+//#region settings
 
 const rootStyle: CSSStyleDeclaration = (document.querySelector(':root') as HTMLElement).style;
 
@@ -84,69 +84,35 @@ function loadSettings(): void {
     });
 }
 
-document.addEventListener("deviceready", () => {
-    screen.orientation.lock('portrait');
-
-    let s = localStorage.getItem("settings");
-    if(s != null) {
-        settings = JSON.parse(s);
-    }
-
-    loadSettings();
-
-    let loading: HTMLElement = document.getElementById("loading");
-
-    fetch(
-        'https://api.github.com/repos/KD3n1z/cordova-calc/releases/latest'
-    ).then((response) => response.json())
-    .then(
-        (data) => {
-            let latest: string = data.tag_name.slice(5);
-            if(parseInt(latest) > build) {
-                navigator.notification.confirm(
-                    'Do you want to update? (b' + build + ' -> b' + latest + ')',
-                    (choice: number) => {
-                        if(choice == 1) {
-                            window.open(data.assets[0].browser_download_url, '_empty');
-                        }
-                    },
-                    'Update available!',
-                    ['Yes','No']
-                );
-            }
-        }
-    );
-
-    loading.classList.add("closed");
-
-    setTimeout(() => {
-        loading.remove();
-    },400);
-}, false);
-
-// menu interactions
+//#endregion
 
-let menuBtn: HTMLElement = document.getElementById('menuBtn');
+//#region menus
 
-function openMenu(id): void {
+function openMenu(id: string, currentMenuId: string): void {
     let element: HTMLElement = document.getElementById(id);
     if(element.classList.contains('closed')) {
         element.classList.remove('closed');
-        menuBtn.classList.add('closed');
+        document.getElementById(currentMenuId).querySelector('.closeBtn').classList.add('closed');
+        if(currentMenuId != 'main'){
+            document.getElementById(currentMenuId).classList.add('hidden');
+        }
     }
 }
 
-function closeMenu(id): void {
+function closeMenu(id: string, parentMenuId: string): void {
     let element: HTMLElement = document.getElementById(id);
     if(!element.classList.contains('closed')) {
         element.classList.add('closed');
-        menuBtn.classList.remove('closed');
+        document.getElementById(parentMenuId).querySelector('.closeBtn').classList.remove('closed');
+        if(parentMenuId != 'main'){
+            document.getElementById(parentMenuId).classList.remove('hidden');
+        }
     }
 }
 
 //#endregion
 
-// main calculator code
+//#region main calculator code
 
 let expressionDisplay: HTMLElement = document.getElementById('expression');
 let resultDisplay: HTMLElement = document.getElementById('result');
@@ -335,4 +301,54 @@ function display(): void {
     expressionDisplay.textContent = expressionText;
 }
 
-display();
\ No newline at end of file
+//#endregion
+
+function openLink(url: string): void {
+    window.open(url, '_empty');
+}
+
+document.addEventListener("deviceready", () => {
+    display();
+
+    screen.orientation.lock('portrait');
+
+    document.getElementById("buildNum").textContent = build.toString();
+
+    let s = localStorage.getItem("settings");
+    if(s != null) {
+        settings = JSON.parse(s);
+    }
+
+    loadSettings();
+
+    // check for updates
+    fetch(
+        'https://api.github.com/repos/KD3n1z/cordova-calc/releases/latest'
+    ).then((response) => response.json())
+    .then(
+        (data) => {
+            let latest: string = data.tag_name.slice(5);
+            console.log('latest build on github: ' + latest);
+            if(parseInt(latest) > build) {
+                navigator.notification.confirm(
+                    'Do you want to update? (b' + build + ' -> b' + latest + ')',
+                    (choice: number) => {
+                        if(choice == 1) {
+                            openLink(data.assets[0].browser_download_url);
+                        }
+                    },
+                    'Update available!',
+                    ['Yes','No']
+                );
+            }
+        }
+    );
+
+    let loading: HTMLElement = document.getElementById("loading");
+
+    loading.classList.add("closed");    // start animation
+
+    setTimeout(() => {
+        loading.remove();               // remove the element after animation
+    },400);
+}, false);
\ No newline at end of file
diff --git a/www/style.css b/www/style.css
index 824e006..a4e19bd 100644
--- a/www/style.css
+++ b/www/style.css
@@ -98,11 +98,16 @@ body, html {
     width: 100vw;
     height: 100vh;
     background-color: #0000009c;
-    transition: ease-in-out .2s;
+    transition: cubic-bezier(0.65, 0.05, 0.36, 1) .2s;
     text-align: right;
     padding: calc(100vh/(var(--screen-lines) + var(--buttons-lines))*var(--screen-lines) + 20px + var(--pad)) calc(30px + var(--pad)) calc(20px + var(--pad)) calc(20px + var(--pad));
 }
 
+.hidden {
+    opacity: 0;
+    pointer-events: none;
+}
+
 #loading {
     background-color: black;
     position: fixed;
@@ -222,7 +227,7 @@ table{
     align-items: flex-end;
 }
 
-#menuBtn {
+.closeBtn {
     position: absolute;
     top: 25px;
     left: 20px;
@@ -233,10 +238,21 @@ table{
     background-size: 100% 100%;
 }
 
-#menuBtn.closed {
+.closeBtn.closed {
     transform: scale(0);
 }
 
+.infoBtn {
+    position: absolute;
+    top: 25px;
+    right: 20px;
+    width: 30px;
+    height: 30px;
+    filter: invert(1);
+    transition: ease-in-out .2s;
+    background-size: 100% 100%;
+}
+
 .bars {
     background-image: url('svgs/menu-outline.svg');
 }
@@ -245,16 +261,42 @@ table{
     background-image: url('svgs/close-outline.svg');
 }
 
+.nfoSvg {
+    background-image: url('svgs/information-circle-outline.svg');
+}
+
 #menuBtn:active {
     opacity: 0.5;
 }
 
-.pref {
+.menuContent {
     color: white;
     height: 100%;
     width: 100%;
     display: flex;
     flex-direction: column;
+}
+
+.info {
+    justify-content: flex-start;
+    text-align: center;
+}
+
+.info>*{
+    margin-bottom: 10px;
+}
+
+a {
+    text-decoration: underline;
+    color: lightblue;
+    white-space: nowrap;
+}
+
+hr {
+    width: 80%;
+}
+
+.pref {
     justify-content: space-between;
 }
 
@@ -273,10 +315,6 @@ table{
     width: 100%;
 }
 
-.desc {
-    text-align: center;
-}
-
 input[type="range"] {
     height: 7px;
 }
\ No newline at end of file
diff --git a/www/svgs/information-circle-outline.svg b/www/svgs/information-circle-outline.svg
new file mode 100644
index 0000000..15d7547
--- /dev/null
+++ b/www/svgs/information-circle-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Information Circle</title><path d="M248 64C146.39 64 64 146.39 64 248s82.39 184 184 184 184-82.39 184-184S349.61 64 248 64z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M220 220h32v116"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M208 340h88"/><path d="M248 130a26 26 0 1026 26 26 26 0 00-26-26z"/></svg>
\ No newline at end of file
