Skip to content

Commit 31e2ea2

Browse files
TerribleCodingTerribleCoding
committed
Exp editor opening and closing
The popup appears when pressing '=' and disappears when pressing 'Esc'. Corrected tooltips on hovering result icon.
1 parent 1ccdec4 commit 31e2ea2

5 files changed

Lines changed: 162 additions & 7 deletions

File tree

‎README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,14 @@ Note: _The order of this list might not match the order these features will be a
6262

6363
## Versions log
6464

65+
#### v1.4
66+
67+
_Release date: ???????????????????????_
68+
69+
_Work Time: 2h 30min_
70+
71+
-
72+
6573
#### v1.3
6674

6775
_Release date: July 25, 2021_

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ <h3>Select a profile shape</h3>
3333
</div>
3434
</div>
3535

36-
<div id="credits" style="display: none;" class="popup">
36+
<div id="credits" style="display: none;" class="popup blur">
3737
<div class="outer">
3838
<div class="content">
3939
<close onclick="closeCredits()"><i class="fi-rr-cross"></i></close>

‎pages/common.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,4 +177,33 @@ function Traction() {
177177
k = 4;
178178
}
179179
return R / k * a;
180+
}
181+
182+
183+
184+
// EXPRESSION EDITOR FUNCTIONS
185+
186+
var editor = document.querySelector('#calc');
187+
var property = document.querySelector('#var');
188+
var textfield = document.querySelector('#expression');
189+
var result = document.querySelector('#result num');
190+
var icons = document.querySelectorAll('#result icon > *');
191+
192+
function openEditor() {
193+
editor.style.display = 'grid';
194+
}
195+
196+
function closeEditor() {
197+
editor.style.display = 'none';
198+
}
199+
200+
function keyPressed() {
201+
// press '=' to open editor when closed and focus on textfield
202+
if (keyCode === 48 && editor.style.display == 'none') {
203+
openEditor();
204+
textfield.focus();
205+
textfield.value = '';
206+
}
207+
// press 'Esc' to close editor when open
208+
if (keyCode === 27 && editor.style.display !== 'none') closeEditor();
180209
}

‎pages/cylinder.html‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@
44
<head>
55
<title>Cylinder / Round bar</title>
66
<script src="https://cdn.jsdelivr.net/npm/p5@1.3.0/lib/p5.js"></script>
7-
<script src="common.js"></script>
7+
<script src="common.js" defer></script>
88
<script src="cylinder.js"></script>
99
<link rel="stylesheet" type="text/css" href="../style.css">
10+
<link rel="stylesheet" type="text/css" href="../popup.css">
11+
<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css'>
1012
<link rel="icon" type="image/x-icon" href="../assets/ico/favicon.ico">
1113
</head>
1214

@@ -117,6 +119,36 @@ <h3 class="back">Back to index</h3>
117119
</div>
118120

119121
<div class="right" id="image"></div>
122+
123+
<div id="calc" style="display: none;" class="popup auto-width shadow">
124+
<div class="outer">
125+
<div class="content">
126+
<close onclick="closeEditor()"><i class="fi-rr-cross"></i></close>
127+
<h4>Expression editor</h4>
128+
<p>Enter a valid expression for the variable:</p>
129+
<p class="big">
130+
<span id="var">D</span>
131+
<span>=</span>
132+
<input type="text" name="expression" id="expression" placeholder="e.g.: 6+(25/2)">
133+
<span>=</span>
134+
<span id="result">
135+
<num>0</num>
136+
<icon>
137+
<i class="fi-rr-check">
138+
<span>Expression OK</span>
139+
</i>
140+
<i class="fi-rr-exclamation invisible">
141+
<span>Only numbers or +-*/() characters are allowed. Some parentheses are missing.</span>
142+
</i>
143+
</icon>
144+
</span>
145+
</p>
146+
<button style="display: block; margin: auto;"><i class="fi-rr-check"></i>Use result</button>
147+
<!-- <button><i class="fi-rr-cross"></i>Discard</button> -->
148+
</div>
149+
</div>
150+
</div>
151+
120152
</body>
121153

122154
</html>

‎popup.css‎

Lines changed: 91 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,19 @@
66
top: 0;
77
left: 0;
88
background-color: hsla(0, 0%, 0%, 0.65);
9-
backdrop-filter: blur(8px);
109
/*display: grid;*/
1110
place-items: center;
1211
}
1312

14-
.popup > .outer {
13+
.popup.blur {
14+
backdrop-filter: blur(8px);
15+
}
16+
17+
.popup .invisible {
18+
display: none;
19+
}
20+
21+
.popup>.outer {
1522
width: 40%;
1623
background-color: var(--main-bg);
1724
border-radius: 0.5em;
@@ -21,6 +28,16 @@
2128
border: solid 3px var(--color-1);
2229
}
2330

31+
.popup.auto-width>.outer {
32+
width: auto;
33+
}
34+
35+
.popup.shadow>.outer {
36+
--shadow: 10px 10px 16px 0px hsla(0, 0%, 10%, 0.5);
37+
-webkit-box-shadow: var(--shadow);
38+
box-shadow: var(--shadow);
39+
}
40+
2441
close {
2542
position: absolute;
2643
top: 0;
@@ -35,7 +52,7 @@ close:hover {
3552
color: var(--color-4);
3653
}
3754

38-
.popup > .outer > .content {
55+
.popup>.outer>.content {
3956
width: 100%;
4057
height: 100%;
4158
font-family: Arial, sans-serif;
@@ -77,7 +94,76 @@ close:hover {
7794
}
7895

7996
.popup p {
80-
margin-block-start: 0;
81-
margin-block-end: 0;
97+
/*margin-block-start: 0;
98+
margin-block-end: 0;*/
8299
line-height: 1.2em;
100+
}
101+
102+
.popup p.big {
103+
font-size: 133%;
104+
margin: 0.5em 0;
105+
}
106+
107+
.popup p.big icon {
108+
font-size: 80%;
109+
}
110+
111+
.popup p.big icon i {
112+
position: relative;
113+
}
114+
115+
.popup icon>i>span {
116+
--pad: 0.5em;
117+
opacity: 0%;
118+
font-size: 75%;
119+
background-color: var(--color-2);
120+
border-radius: var(--pad);
121+
color: var(--main-bg);
122+
position: absolute;
123+
padding: var(--pad);
124+
width: max-content;
125+
bottom: 200%;
126+
left: 50%;
127+
transform: translateY(0.5em);
128+
transition: 0.2s linear;
129+
}
130+
131+
.popup icon>i>span::before {
132+
content: '';
133+
position: absolute;
134+
background-color: inherit;
135+
width: 1em;
136+
aspect-ratio: 1;
137+
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
138+
clip-path: polygon(0 0, 0% 100%, 100% 0);
139+
top: 100%;
140+
}
141+
142+
.popup icon>i:hover>span {
143+
opacity: 100%;
144+
transform: translateY(0);
145+
}
146+
147+
.popup p.big icon i:nth-child(1) {
148+
color: #00bb00;
149+
}
150+
151+
.popup p.big icon i:nth-child(2) {
152+
/*color: #dd0000;*/
153+
color: #ffbb00;
154+
}
155+
156+
.popup input[type=text] {
157+
font-family: inherit;
158+
width: 20ch;
159+
height: 1.5em;
160+
text-align: left;
161+
position: relative;
162+
top: -0.2em;
163+
border-radius: 0.25em;
164+
}
165+
166+
.popup #result {
167+
display: inline-block;
168+
min-width: 8ch;
83169
}

0 commit comments

Comments
 (0)