physical-quantity 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Log.md +10 -0
- package/index.html +12 -0
- package/js/pq.js +66 -0
- package/package.json +11 -0
package/Log.md
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
# 24011-PqWebComp
|
|
2
|
+
|
|
3
|
+
### 20240526 Su
|
|
4
|
+
Q: I would like to develop a cross framework (angular, react, Vue, web component, etc. ) html element with the following function:
|
|
5
|
+
- it's a value-unit pair to represent a physical quantity , eg: "20 mm"
|
|
6
|
+
- it will allow web page author to create a physical quantity as a measurement of a given unit;
|
|
7
|
+
- when the html page is shown in browser , web visitor can click on the unit portion to show a drop down box allowing the user to switch to a different unit of the same unit category. Eg: for a length, the web page author created an quantity 25.4 mm. When the web visitor click on mm, it will show the drop down list of "m, cm, mm, in, ft, ...". The user can switch to "in", the the value will be changed to 1, thus the same quantity will be shown as "1 in".
|
|
8
|
+
Can you guide me to create this html element?
|
|
9
|
+
|
|
10
|
+
GPT4o:
|
package/index.html
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Physical Quantity Component</title>
|
|
7
|
+
<script src="./js/pq.js" defer></script>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<physical-quantity value="25.4" unit="mm"></physical-quantity>
|
|
11
|
+
</body>
|
|
12
|
+
</html>
|
package/js/pq.js
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
class PhysicalQuantity extends HTMLElement {
|
|
2
|
+
constructor() {
|
|
3
|
+
super();
|
|
4
|
+
this.attachShadow({ mode: 'open' });
|
|
5
|
+
|
|
6
|
+
this.units = {
|
|
7
|
+
length: {
|
|
8
|
+
mm: 1,
|
|
9
|
+
cm: 10,
|
|
10
|
+
m: 1000,
|
|
11
|
+
in: 25.4,
|
|
12
|
+
ft: 304.8,
|
|
13
|
+
},
|
|
14
|
+
// You can add more unit categories here
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
this.shadowRoot.innerHTML = `
|
|
18
|
+
<style>
|
|
19
|
+
:host {
|
|
20
|
+
display: inline-block;
|
|
21
|
+
}
|
|
22
|
+
input {
|
|
23
|
+
width: 50px;
|
|
24
|
+
}
|
|
25
|
+
select {
|
|
26
|
+
margin-left: 5px;
|
|
27
|
+
}
|
|
28
|
+
</style>
|
|
29
|
+
<input type="number" value="1">
|
|
30
|
+
<select>
|
|
31
|
+
${Object.keys(this.units.length).map(unit => `<option value="${unit}">${unit}</option>`).join('')}
|
|
32
|
+
</select>
|
|
33
|
+
`;
|
|
34
|
+
|
|
35
|
+
this.input = this.shadowRoot.querySelector('input');
|
|
36
|
+
this.select = this.shadowRoot.querySelector('select');
|
|
37
|
+
|
|
38
|
+
this.input.addEventListener('input', () => this.updateValue());
|
|
39
|
+
this.select.addEventListener('change', () => this.updateUnit());
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
connectedCallback() {
|
|
43
|
+
this.value = this.getAttribute('value') || 1;
|
|
44
|
+
this.unit = this.getAttribute('unit') || 'mm';
|
|
45
|
+
this.input.value = this.value;
|
|
46
|
+
this.select.value = this.unit;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
updateValue() {
|
|
50
|
+
this.value = this.input.value;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
updateUnit() {
|
|
54
|
+
const oldUnit = this.unit;
|
|
55
|
+
const newUnit = this.select.value;
|
|
56
|
+
|
|
57
|
+
// Convert value to the new unit
|
|
58
|
+
this.value = (this.value * this.units.length[oldUnit]) / this.units.length[newUnit];
|
|
59
|
+
this.unit = newUnit;
|
|
60
|
+
|
|
61
|
+
// Update the input value to reflect the new unit
|
|
62
|
+
this.input.value = this.value;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
customElements.define('physical-quantity', PhysicalQuantity);
|
package/package.json
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "physical-quantity",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A web component to represent a physical quantity with unit conversion.",
|
|
5
|
+
"main": "physical-quantity.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
8
|
+
},
|
|
9
|
+
"author": "E3d",
|
|
10
|
+
"license": "MIT"
|
|
11
|
+
}
|