atharv-mandlavdiya 1.0.13 → 1.0.15
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 +16 -0
- package/atharvmandlavdiya.js +107 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -18,4 +18,20 @@ import { atharvm } from "atharv-mandlavdiya";
|
|
|
18
18
|
atharvm();
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
+
The package also provides a self-contained progress card custom element. It
|
|
22
|
+
injects its CSS when initialized, so no additional CSS or JavaScript files are
|
|
23
|
+
needed:
|
|
24
|
+
|
|
25
|
+
```html
|
|
26
|
+
<script src="https://unpkg.com/@fiddle-digital/string-tune@1.2.1/dist/index.js"></script>
|
|
27
|
+
<script type="module">
|
|
28
|
+
import { progressCard } from "https://unpkg.com/atharv-mandlavdiya";
|
|
29
|
+
progressCard();
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
<progress-card data-scroll-length="300">
|
|
33
|
+
<img src="/img/project1.png">
|
|
34
|
+
</progress-card>
|
|
35
|
+
```
|
|
36
|
+
|
|
21
37
|
MIT © [Atharv Mandlavdiya](https://github.com/AtharvM02222)
|
package/atharvmandlavdiya.js
CHANGED
|
@@ -10,6 +10,113 @@ export function atharvm() {
|
|
|
10
10
|
console.log(atharv_mandlavdiya);
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
+
let progressCardCounter = 0;
|
|
14
|
+
let progressCardStarted = false;
|
|
15
|
+
let progressCardInstance = null;
|
|
16
|
+
|
|
17
|
+
const progressCardStyles = `
|
|
18
|
+
@property --progress {
|
|
19
|
+
syntax: "<number>";
|
|
20
|
+
inherits: true;
|
|
21
|
+
initial-value: 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.progress-wrapper {
|
|
25
|
+
position: relative;
|
|
26
|
+
width: 100%;
|
|
27
|
+
min-height: 300vh;
|
|
28
|
+
padding: 0 4vw;
|
|
29
|
+
box-sizing: border-box;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
progress-card {
|
|
33
|
+
display: block;
|
|
34
|
+
position: sticky;
|
|
35
|
+
top: calc(var(--vh, 1vh) * 15);
|
|
36
|
+
height: calc(var(--vh, 1vh) * 70);
|
|
37
|
+
margin-bottom: calc(var(--vh, 1vh) * 15);
|
|
38
|
+
scale: calc(0.5 + var(--progress) * 0.5);
|
|
39
|
+
clip-path: rect(
|
|
40
|
+
calc(20% - var(--progress) * 18%)
|
|
41
|
+
calc(70% + var(--progress) * 26%)
|
|
42
|
+
calc(80% + var(--progress) * 18%)
|
|
43
|
+
calc(30% - var(--progress) * 26%)
|
|
44
|
+
round calc(2.441rem - var(--progress) * 1.941rem)
|
|
45
|
+
);
|
|
46
|
+
transform: translateZ(0);
|
|
47
|
+
overflow: hidden;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
progress-card img,
|
|
51
|
+
progress-card video,
|
|
52
|
+
progress-card > div {
|
|
53
|
+
display: block;
|
|
54
|
+
width: 100%;
|
|
55
|
+
height: 100%;
|
|
56
|
+
object-fit: cover;
|
|
57
|
+
}
|
|
58
|
+
`;
|
|
59
|
+
|
|
60
|
+
function startProgressStringTune(root) {
|
|
61
|
+
if (progressCardStarted) return;
|
|
62
|
+
|
|
63
|
+
const stringTune = root.StringTune;
|
|
64
|
+
if (!stringTune) return;
|
|
65
|
+
|
|
66
|
+
const constructor = stringTune.StringTune &&
|
|
67
|
+
typeof stringTune.StringTune.getInstance === 'function'
|
|
68
|
+
? stringTune.StringTune
|
|
69
|
+
: typeof stringTune.getInstance === 'function'
|
|
70
|
+
? stringTune
|
|
71
|
+
: null;
|
|
72
|
+
|
|
73
|
+
if (!constructor || typeof stringTune.StringProgress === 'undefined') return;
|
|
74
|
+
|
|
75
|
+
progressCardInstance = constructor.getInstance();
|
|
76
|
+
progressCardInstance.use(stringTune.StringProgress);
|
|
77
|
+
progressCardInstance.start(0);
|
|
78
|
+
progressCardStarted = true;
|
|
79
|
+
root.StringTuneContext = progressCardInstance;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
export function progressCard() {
|
|
83
|
+
const root = typeof window !== 'undefined' ? window : globalThis;
|
|
84
|
+
if (!root.document || !root.customElements) return;
|
|
85
|
+
|
|
86
|
+
if (!root.document.getElementById('atharv-progress-card-styles')) {
|
|
87
|
+
const style = root.document.createElement('style');
|
|
88
|
+
style.id = 'atharv-progress-card-styles';
|
|
89
|
+
style.textContent = progressCardStyles;
|
|
90
|
+
root.document.head.appendChild(style);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
if (root.customElements.get('progress-card')) return;
|
|
94
|
+
|
|
95
|
+
root.customElements.define('progress-card', class extends root.HTMLElement {
|
|
96
|
+
connectedCallback() {
|
|
97
|
+
if (this.hasAttribute('data-progress-init')) return;
|
|
98
|
+
|
|
99
|
+
progressCardCounter += 1;
|
|
100
|
+
const scrollLength = parseInt(this.dataset.scrollLength, 10) || 300;
|
|
101
|
+
const wrapper = root.document.createElement('div');
|
|
102
|
+
const stringId = `progress-${progressCardCounter}`;
|
|
103
|
+
|
|
104
|
+
wrapper.className = 'progress-wrapper';
|
|
105
|
+
wrapper.setAttribute('string', 'progress');
|
|
106
|
+
wrapper.setAttribute('string-id', stringId);
|
|
107
|
+
wrapper.setAttribute('string-enter-vp', 'top');
|
|
108
|
+
wrapper.setAttribute('string-exit-vp', 'bottom');
|
|
109
|
+
wrapper.style.minHeight = `${scrollLength}vh`;
|
|
110
|
+
|
|
111
|
+
this.parentNode.insertBefore(wrapper, this);
|
|
112
|
+
wrapper.appendChild(this);
|
|
113
|
+
this.setAttribute('data-progress-init', stringId);
|
|
114
|
+
|
|
115
|
+
startProgressStringTune(root);
|
|
116
|
+
}
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
|
|
13
120
|
const _svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 200" width="650" height="200">
|
|
14
121
|
<defs>
|
|
15
122
|
<linearGradient id="pathGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|