Skip to content

Commit

Permalink
info menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@kd3n1z
kd3n1z committed Jan 24, 2023
1 parent dccd768 commit 9e2bf57
Show file tree
Hide file tree
Showing 4 changed files with 135 additions and 63 deletions.
29 changes: 23 additions & 6 deletions www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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">
Expand Down
114 changes: 65 additions & 49 deletions www/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const build: number = 3;

//#region menus and other
//#region settings

const rootStyle: CSSStyleDeclaration = (document.querySelector(':root') as HTMLElement).style;

Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -335,4 +301,54 @@ function display(): void {
expressionDisplay.textContent = expressionText;
}

display();
//#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);
54 changes: 46 additions & 8 deletions www/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -222,7 +227,7 @@ table{
align-items: flex-end;
}

#menuBtn {
.closeBtn {
position: absolute;
top: 25px;
left: 20px;
Expand All @@ -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');
}
Expand All @@ -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;
}

Expand All @@ -273,10 +315,6 @@ table{
width: 100%;
}

.desc {
text-align: center;
}

input[type="range"] {
height: 7px;
}
1 change: 1 addition & 0 deletions www/svgs/information-circle-outline.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 9e2bf57

Please sign in to comment.