physical-quantity 1.1.4 → 1.1.6
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/README.md +25 -8
- package/dist/pq.min.js +30 -12
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -9,6 +9,9 @@
|
|
|
9
9
|
- Display values with up to 3 decimal places if not an integer; show integers without decimal parts.
|
|
10
10
|
- Easy to integrate into any web project.
|
|
11
11
|
|
|
12
|
+
## Demo: Physical Quantity element - No Unit Converter or Dual Units Needed
|
|
13
|
+
[Box Size & Mass @https://e3d.github.io](https://e3d.github.io)
|
|
14
|
+
|
|
12
15
|
## Installation
|
|
13
16
|
|
|
14
17
|
You can install the `physical-quantity` component using npm:
|
|
@@ -29,8 +32,9 @@ Include the following script tag in your HTML file:
|
|
|
29
32
|
### Using the Component
|
|
30
33
|
Add the `physical-quantity` tag to your HTML file:
|
|
31
34
|
```html
|
|
32
|
-
<physical-quantity
|
|
35
|
+
<physical-quantity value="25.4" unit="mm" decimal-places="4"></physical-quantity>
|
|
33
36
|
```
|
|
37
|
+
|
|
34
38
|
### Example - Linking the Code
|
|
35
39
|
Here's an example of how to use the component in an HTML file:
|
|
36
40
|
|
|
@@ -43,16 +47,13 @@ Here's an example of how to use the component in an HTML file:
|
|
|
43
47
|
<title>Physical Quantity Component Example</title>
|
|
44
48
|
</head>
|
|
45
49
|
<body>
|
|
46
|
-
<physical-quantity
|
|
50
|
+
<physical-quantity value="25.4" unit="mm"></physical-quantity>
|
|
47
51
|
|
|
48
|
-
<script src="node_modules/physical-quantity/src/
|
|
52
|
+
<script src="node_modules/physical-quantity/src/pq.min.js"></script>
|
|
49
53
|
</body>
|
|
50
54
|
</html>
|
|
51
55
|
```
|
|
52
56
|
|
|
53
|
-
### Demo
|
|
54
|
-
[Box Size @https://e3d.github.io](https://e3d.github.io)
|
|
55
|
-
|
|
56
57
|
### Example - HTML File Using CDN
|
|
57
58
|
```html
|
|
58
59
|
<!DOCTYPE html>
|
|
@@ -70,8 +71,24 @@ Here's an example of how to use the component in an HTML file:
|
|
|
70
71
|
```
|
|
71
72
|
|
|
72
73
|
### Attributes
|
|
73
|
-
|
|
74
|
-
|
|
74
|
+
The physical-quantity component supports the following attributes:
|
|
75
|
+
|
|
76
|
+
value: The initial value of the physical quantity. It can be any number.
|
|
77
|
+
unit: The initial unit of the physical quantity. It must be a valid unit within the supported unit category (e.g., mm, cm, m, in, ft for length).
|
|
78
|
+
|
|
79
|
+
### Supported Units
|
|
80
|
+
Currently, the component supports the following categories and units:
|
|
81
|
+
- Length
|
|
82
|
+
- m (meter)
|
|
83
|
+
- mm (millimeter)
|
|
84
|
+
- cm (centimeter)
|
|
85
|
+
- in (inch)
|
|
86
|
+
- ft (foot)
|
|
87
|
+
- Mass
|
|
88
|
+
- kg (kilogram)
|
|
89
|
+
- g (gram)
|
|
90
|
+
- lbm (pound mass)
|
|
91
|
+
- ... (more to update.)
|
|
75
92
|
|
|
76
93
|
## License
|
|
77
94
|
This project is licensed under the MIT License. See the LICENSE file for more details.
|
package/dist/pq.min.js
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
class PhysicalQuantity extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.value=0,this.unit="mm",this.unitCategory="length",this.decimalPlaces=3,// Default decimal places
|
|
2
2
|
this.units={length:["m","cm","mm","in","ft"],mass:["g","kg","lbm"]},this.unitConversion={length:{m:1,cm:.01,mm:.001,in:.0254,ft:12*.0254},
|
|
3
3
|
// Add other category conversion factors as needed
|
|
4
|
-
mass:{kg:1,g:.001,lbm:.454}},
|
|
4
|
+
mass:{kg:1,g:.001,lbm:.454}},
|
|
5
|
+
// this.handleUnitChange = this.handleUnitChange; // Bind the method to the instance
|
|
6
|
+
// this.handleMouseOver = this.handleMouseOver; // Bind the method to the instance
|
|
7
|
+
// this.handleMouseOut = this.handleMouseOut;
|
|
8
|
+
this.render()}static get observedAttributes(){return["value","unit","decimal-places"]}attributeChangedCallback(t,e,i){"value"===t?this.value=parseFloat(i):"unit"===t?(this.unit=i,this.unitCategory=this.getUnitCategory(i)):"decimal-places"===t&&(this.decimalPlaces=parseInt(i)||3),this.render()}getUnitCategory(t){for(const e in this.units)if(this.units[e].includes(t))return e;return null}connectedCallback(){this.shadowRoot.addEventListener("change",this.handleUnitChange.bind(this)),this.shadowRoot.addEventListener("mouseover",this.handleMouseOver.bind(this)),this.shadowRoot.addEventListener("mouseout",this.handleMouseOut.bind(this)),this.render()}disconnectedCallback(){this.shadowRoot.removeEventListener("change",this.handleUnitChange.bind(this)),this.shadowRoot.removeEventListener("mouseover",this.handleMouseOver.bind(this)),this.shadowRoot.removeEventListener("mouseout",this.handleMouseOut.bind(this))}handleArrowClick(t){t.target.closest(".unit-container")&&(t=this.shadowRoot.querySelector("select"))&&(t.focus(),t.click())}handleUnitChange(t){var e;"SELECT"===t.target.tagName&&(t=t.target.value,e=this.unitConversion[this.unitCategory][this.unit]/this.unitConversion[this.unitCategory][t],this.value=this.value*e,this.unit=t,this.render())}handleMouseOver(){this.shadowRoot.querySelector(".tooltip").style.display="block",clearTimeout(this.tooltipTimeout)}handleMouseOut(){
|
|
9
|
+
// clearTimeout(this.tooltipTimeout);
|
|
10
|
+
this.shadowRoot.querySelector(".tooltip").style.display="none"}formatValue(t){// https://aistudio.google.com/app/prompts?state=%7B%22ids%22:%5B%221oNb_BksOrN-5hQ_5KjCxxYhMotx5gA-P%22%5D,%22action%22:%22open%22,%22userId%22:%22114169196047837137010%22,%22resourceKeys%22:%7B%7D%7D&usp=sharing
|
|
5
11
|
return Number.isInteger(t)?t.toString():0!==Math.floor(t)?t.toFixed(this.decimalPlaces).replace(/0+$/,"").replace(/\.$/,""):t.toPrecision(3)}render(){this.shadowRoot.innerHTML=`
|
|
6
12
|
<style>
|
|
7
13
|
:host {
|
|
@@ -27,18 +33,27 @@ return Number.isInteger(t)?t.toString():0!==Math.floor(t)?t.toFixed(this.decimal
|
|
|
27
33
|
cursor: pointer;
|
|
28
34
|
}
|
|
29
35
|
|
|
30
|
-
|
|
31
|
-
|
|
36
|
+
.tooltip {
|
|
37
|
+
display: block; /* Set display to block for initial positioning */
|
|
38
|
+
visibility: hidden; /* Initially hide the tooltip */
|
|
39
|
+
opacity: 0; /* Start with zero opacity */
|
|
40
|
+
transition: opacity 0.3s ease-in-out; /* Smooth transition */
|
|
32
41
|
position: absolute;
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
transform:
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
+
bottom: 100%;
|
|
43
|
+
left: 50%;
|
|
44
|
+
transform: translateX(-50%);
|
|
45
|
+
background-color: black;
|
|
46
|
+
color: red;
|
|
47
|
+
padding: 5px;
|
|
48
|
+
border-radius: 5px;
|
|
49
|
+
font-size: 0.8em;
|
|
50
|
+
white-space: nowrap;
|
|
51
|
+
z-index: 10;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.tooltip a {
|
|
55
|
+
color: cyan;
|
|
56
|
+
}
|
|
42
57
|
|
|
43
58
|
</style>
|
|
44
59
|
|
|
@@ -51,4 +66,7 @@ return Number.isInteger(t)?t.toString():0!==Math.floor(t)?t.toFixed(this.decimal
|
|
|
51
66
|
</select>
|
|
52
67
|
</div>
|
|
53
68
|
</div>
|
|
69
|
+
<div class="tooltip">
|
|
70
|
+
Powered by <a href="https://yourwebsite.com" target="_blank" style="color: cyan;">Your Package</a>
|
|
71
|
+
</div>
|
|
54
72
|
`}}customElements.define("physical-quantity",PhysicalQuantity);
|