-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (116 loc) · 3.63 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Dynamic UI/Beta</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<style>
body {
font-family: 'Roboto Mono', monospace;
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
button {
font-family: 'Roboto Mono', monospace;
font-size: 18px;
padding: 10px 20px;
background-color: #FFC800;
color: white;
border: none;
cursor: pointer;
outline: none;
}
.dropdown {
position: absolute;
top: 80px;
background-color: #ffffff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 4px;
overflow: hidden;
display: none;
width: 200px;
}
.dropdown-item {
padding: 10px;
font-size: 16px;
border-bottom: 1px solid #eee;
cursor: pointer;
}
.dropdown-item:last-child {
border-bottom: none;
}
.dropdown-item:hover {
background-color: #eee;
}
.info-section {
margin-top: 30px;
}
.info-section h3 {
margin-bottom: 5px;
}
</style>
</head>
<body>
<button id="toggleButton">Click me</button>
<div class="dropdown" id="dropdown">
<div class="dropdown-item">Component 1</div>
<div class="dropdown-item">Component 2</div>
<div class="dropdown-item">Component 3</div>
</div>
<div class="info-section">
<h3>Pressure time: <span id="pressTime">0</span>ms</h3>
<h3>Animation length: <span id="animationDuration">0</span>ms</h3>
</div>
<script>
// Retrieve DOM elements
const toggleButton = document.getElementById('toggleButton');
const dropdown = document.getElementById('dropdown');
const pressTime = document.getElementById('pressTime');
const animationDuration = document.getElementById('animationDuration');
let mouseDownTime = null;
// Adds an event listener for the "mousedown" event on the button
toggleButton.addEventListener('mousedown', (event) => {
// Memorizza il tempo in cui il pulsante viene premuto
mouseDownTime = event.timeStamp;
});
// Adds an event listener for the mouseup event on the button
toggleButton.addEventListener('mouseup', (event) => {
// Stores the time when the button is released
const mouseUpTime = event.timeStamp;
// Calculates the difference between the release time and the button press time
const timeDifference = mouseUpTime - mouseDownTime;
// Displays the button press time in the "pressTime" element
pressTime.textContent = timeDifference.toFixed(2);
// Calculates the duration of the animation based on the time the button was pressed
let duration = timeDifference * 2;
// Sets an upper limit to the duration of the animation (1000 ms)
duration = Math.min(duration, 1000);
// Display the duration of the animation in the "animationDuration" element
animationDuration.textContent = duration.toFixed(2);
// Checks whether the dropdown is hidden
if (dropdown.style.display === 'none') {
// Runs the animation "slideDown" on the drop-down menu with the calculated duration
Velocity(dropdown, 'slideDown', {
duration: duration,
display: 'block',
});
} else {
// Runs the 'slideUp' animation on the dropdown with the calculated duration
Velocity(dropdown, 'slideUp', {
duration: duration,
display: 'none',
});
}
});
</script>
</body>
</html>