@reimujs/aos 0.1.0 → 0.1.1
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 +30 -30
- package/dist/aos.cjs.js +19 -78
- package/dist/aos.esm.js +19 -78
- package/dist/aos.umd.js +1 -1
- package/dist/utils.d.ts +2 -0
- package/package.json +6 -7
package/README.md
CHANGED
|
@@ -22,6 +22,36 @@ or
|
|
|
22
22
|
<script src="https://cdn.jsdelivr.net/npm/@reimujs/aos/dist/aos.umd.js"></script>
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
+
## Difference
|
|
26
|
+
|
|
27
|
+
So what's the difference between aos and @reimujs/aos?
|
|
28
|
+
|
|
29
|
+
- Typescript friendly
|
|
30
|
+
- Smaller package size (from 14.7KB + 26.1KB to 6.5KB + 25.2KB)
|
|
31
|
+
- Only support modern browsers
|
|
32
|
+
- Support additional settings
|
|
33
|
+
- Support additional API
|
|
34
|
+
|
|
35
|
+
### Additional settings
|
|
36
|
+
|
|
37
|
+
#### container
|
|
38
|
+
|
|
39
|
+
merge from [aos#223](https://github.com/michalsnik/aos/issues/223), you can set the container of AOS, accepts CSS Selector (e.g. ".my-awesome-container") or HTMLElement.
|
|
40
|
+
|
|
41
|
+
```typescript
|
|
42
|
+
container: window, // AOS Container, accepts CSS Selector (e.g. ".my-awesome-container") or HTMLElement
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Additional API
|
|
46
|
+
|
|
47
|
+
#### AOS.destroy()
|
|
48
|
+
|
|
49
|
+
```typescript
|
|
50
|
+
function destroy(): void;
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Remove all event listeners and disconnect MutationObserver.
|
|
54
|
+
|
|
25
55
|
## Usage
|
|
26
56
|
|
|
27
57
|
Just same as aos@next. For more information, please visit [aos-how-to-use-it](https://github.com/michalsnik/aos?tab=readme-ov-file#-how-to-use-it).
|
|
@@ -119,36 +149,6 @@ import "@reimujs/aos/dist/aos.css";
|
|
|
119
149
|
</script>
|
|
120
150
|
```
|
|
121
151
|
|
|
122
|
-
## Difference
|
|
123
|
-
|
|
124
|
-
So what's the difference between aos and @reimujs/aos?
|
|
125
|
-
|
|
126
|
-
- Typescript friendly
|
|
127
|
-
- Smaller package size (from 14.7KB + 26.1KB to 6.9KB + 25.2KB)
|
|
128
|
-
- Only support modern browsers
|
|
129
|
-
- Support additional settings
|
|
130
|
-
- Support additional API
|
|
131
|
-
|
|
132
|
-
### Additional settings
|
|
133
|
-
|
|
134
|
-
#### container
|
|
135
|
-
|
|
136
|
-
merge from [aos#223](https://github.com/michalsnik/aos/issues/223), you can set the container of AOS, accepts CSS Selector (e.g. ".my-awesome-container") or HTMLElement.
|
|
137
|
-
|
|
138
|
-
```typescript
|
|
139
|
-
container: window, // AOS Container, accepts CSS Selector (e.g. ".my-awesome-container") or HTMLElement
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
### Additional API
|
|
143
|
-
|
|
144
|
-
#### AOS.destroy()
|
|
145
|
-
|
|
146
|
-
```typescript
|
|
147
|
-
function destroy(): void;
|
|
148
|
-
```
|
|
149
|
-
|
|
150
|
-
Remove all event listeners and disconnect MutationObserver.
|
|
151
|
-
|
|
152
152
|
## License
|
|
153
153
|
|
|
154
154
|
MIT
|
package/dist/aos.cjs.js
CHANGED
|
@@ -1,95 +1,36 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
function debounce(func,
|
|
4
|
-
let
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const trailing = edges == null || edges.includes('trailing');
|
|
8
|
-
const invoke = () => {
|
|
9
|
-
if (pendingArgs !== null) {
|
|
10
|
-
func.apply(pendingThis, pendingArgs);
|
|
11
|
-
pendingThis = undefined;
|
|
12
|
-
pendingArgs = null;
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
const onTimerEnd = () => {
|
|
16
|
-
if (trailing) {
|
|
17
|
-
invoke();
|
|
18
|
-
}
|
|
19
|
-
cancel();
|
|
20
|
-
};
|
|
21
|
-
let timeoutId = null;
|
|
22
|
-
const schedule = () => {
|
|
23
|
-
if (timeoutId != null) {
|
|
24
|
-
clearTimeout(timeoutId);
|
|
25
|
-
}
|
|
3
|
+
function debounce(func, delay) {
|
|
4
|
+
let timeoutId;
|
|
5
|
+
return (...args) => {
|
|
6
|
+
clearTimeout(timeoutId);
|
|
26
7
|
timeoutId = setTimeout(() => {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}, debounceMs);
|
|
30
|
-
};
|
|
31
|
-
const cancelTimer = () => {
|
|
32
|
-
if (timeoutId !== null) {
|
|
33
|
-
clearTimeout(timeoutId);
|
|
34
|
-
timeoutId = null;
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
const cancel = () => {
|
|
38
|
-
cancelTimer();
|
|
39
|
-
pendingThis = undefined;
|
|
40
|
-
pendingArgs = null;
|
|
8
|
+
func.apply(this, args);
|
|
9
|
+
}, delay);
|
|
41
10
|
};
|
|
42
|
-
const flush = () => {
|
|
43
|
-
cancelTimer();
|
|
44
|
-
invoke();
|
|
45
|
-
};
|
|
46
|
-
const debounced = function (...args) {
|
|
47
|
-
if (signal?.aborted) {
|
|
48
|
-
return;
|
|
49
|
-
}
|
|
50
|
-
pendingThis = this;
|
|
51
|
-
pendingArgs = args;
|
|
52
|
-
const isFirstCall = timeoutId == null;
|
|
53
|
-
schedule();
|
|
54
|
-
if (leading && isFirstCall) {
|
|
55
|
-
invoke();
|
|
56
|
-
}
|
|
57
|
-
};
|
|
58
|
-
debounced.schedule = schedule;
|
|
59
|
-
debounced.cancel = cancel;
|
|
60
|
-
debounced.flush = flush;
|
|
61
|
-
signal?.addEventListener('abort', cancel, { once: true });
|
|
62
|
-
return debounced;
|
|
63
11
|
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
12
|
+
function throttle(func, limit) {
|
|
13
|
+
let lastFunc, lastRan;
|
|
14
|
+
return (...args) => {
|
|
15
|
+
const context = this;
|
|
16
|
+
if (!lastRan || Date.now() - lastRan >= limit) {
|
|
17
|
+
func.apply(context, args);
|
|
18
|
+
lastRan = Date.now();
|
|
71
19
|
}
|
|
72
20
|
else {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
}
|
|
21
|
+
clearTimeout(lastFunc);
|
|
22
|
+
lastFunc = setTimeout(() => {
|
|
23
|
+
func.apply(context, args);
|
|
24
|
+
lastRan = Date.now();
|
|
25
|
+
}, limit - (Date.now() - lastRan));
|
|
78
26
|
}
|
|
79
|
-
debounced(...args);
|
|
80
27
|
};
|
|
81
|
-
throttled.cancel = debounced.cancel;
|
|
82
|
-
throttled.flush = debounced.flush;
|
|
83
|
-
return throttled;
|
|
84
28
|
}
|
|
85
29
|
|
|
86
30
|
const phoneRe = /iphone|ipod|android.*mobile|windows phone|blackberry|opera mini|mobile|phone/i;
|
|
87
31
|
const tabletRe = /ipad|android(?!.*mobile)|tablet|kindle/i;
|
|
88
|
-
function ua() {
|
|
89
|
-
return navigator.userAgent;
|
|
90
|
-
}
|
|
91
32
|
class Detector {
|
|
92
|
-
userAgent =
|
|
33
|
+
userAgent = navigator.userAgent;
|
|
93
34
|
phone() {
|
|
94
35
|
return phoneRe.test(this.userAgent);
|
|
95
36
|
}
|
package/dist/aos.esm.js
CHANGED
|
@@ -1,93 +1,34 @@
|
|
|
1
|
-
function debounce(func,
|
|
2
|
-
let
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const trailing = edges == null || edges.includes('trailing');
|
|
6
|
-
const invoke = () => {
|
|
7
|
-
if (pendingArgs !== null) {
|
|
8
|
-
func.apply(pendingThis, pendingArgs);
|
|
9
|
-
pendingThis = undefined;
|
|
10
|
-
pendingArgs = null;
|
|
11
|
-
}
|
|
12
|
-
};
|
|
13
|
-
const onTimerEnd = () => {
|
|
14
|
-
if (trailing) {
|
|
15
|
-
invoke();
|
|
16
|
-
}
|
|
17
|
-
cancel();
|
|
18
|
-
};
|
|
19
|
-
let timeoutId = null;
|
|
20
|
-
const schedule = () => {
|
|
21
|
-
if (timeoutId != null) {
|
|
22
|
-
clearTimeout(timeoutId);
|
|
23
|
-
}
|
|
1
|
+
function debounce(func, delay) {
|
|
2
|
+
let timeoutId;
|
|
3
|
+
return (...args) => {
|
|
4
|
+
clearTimeout(timeoutId);
|
|
24
5
|
timeoutId = setTimeout(() => {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}, debounceMs);
|
|
28
|
-
};
|
|
29
|
-
const cancelTimer = () => {
|
|
30
|
-
if (timeoutId !== null) {
|
|
31
|
-
clearTimeout(timeoutId);
|
|
32
|
-
timeoutId = null;
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
const cancel = () => {
|
|
36
|
-
cancelTimer();
|
|
37
|
-
pendingThis = undefined;
|
|
38
|
-
pendingArgs = null;
|
|
6
|
+
func.apply(this, args);
|
|
7
|
+
}, delay);
|
|
39
8
|
};
|
|
40
|
-
const flush = () => {
|
|
41
|
-
cancelTimer();
|
|
42
|
-
invoke();
|
|
43
|
-
};
|
|
44
|
-
const debounced = function (...args) {
|
|
45
|
-
if (signal?.aborted) {
|
|
46
|
-
return;
|
|
47
|
-
}
|
|
48
|
-
pendingThis = this;
|
|
49
|
-
pendingArgs = args;
|
|
50
|
-
const isFirstCall = timeoutId == null;
|
|
51
|
-
schedule();
|
|
52
|
-
if (leading && isFirstCall) {
|
|
53
|
-
invoke();
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
debounced.schedule = schedule;
|
|
57
|
-
debounced.cancel = cancel;
|
|
58
|
-
debounced.flush = flush;
|
|
59
|
-
signal?.addEventListener('abort', cancel, { once: true });
|
|
60
|
-
return debounced;
|
|
61
9
|
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
10
|
+
function throttle(func, limit) {
|
|
11
|
+
let lastFunc, lastRan;
|
|
12
|
+
return (...args) => {
|
|
13
|
+
const context = this;
|
|
14
|
+
if (!lastRan || Date.now() - lastRan >= limit) {
|
|
15
|
+
func.apply(context, args);
|
|
16
|
+
lastRan = Date.now();
|
|
69
17
|
}
|
|
70
18
|
else {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
}
|
|
19
|
+
clearTimeout(lastFunc);
|
|
20
|
+
lastFunc = setTimeout(() => {
|
|
21
|
+
func.apply(context, args);
|
|
22
|
+
lastRan = Date.now();
|
|
23
|
+
}, limit - (Date.now() - lastRan));
|
|
76
24
|
}
|
|
77
|
-
debounced(...args);
|
|
78
25
|
};
|
|
79
|
-
throttled.cancel = debounced.cancel;
|
|
80
|
-
throttled.flush = debounced.flush;
|
|
81
|
-
return throttled;
|
|
82
26
|
}
|
|
83
27
|
|
|
84
28
|
const phoneRe = /iphone|ipod|android.*mobile|windows phone|blackberry|opera mini|mobile|phone/i;
|
|
85
29
|
const tabletRe = /ipad|android(?!.*mobile)|tablet|kindle/i;
|
|
86
|
-
function ua() {
|
|
87
|
-
return navigator.userAgent;
|
|
88
|
-
}
|
|
89
30
|
class Detector {
|
|
90
|
-
userAgent =
|
|
31
|
+
userAgent = navigator.userAgent;
|
|
91
32
|
phone() {
|
|
92
33
|
return phoneRe.test(this.userAgent);
|
|
93
34
|
}
|
package/dist/aos.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).AOS=t()}(this,(function(){"use strict";
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).AOS=t()}(this,(function(){"use strict";const e=/iphone|ipod|android.*mobile|windows phone|blackberry|opera mini|mobile|phone/i,t=/ipad|android(?!.*mobile)|tablet|kindle/i;var s=new class{userAgent=navigator.userAgent;phone(){return e.test(this.userAgent)}mobile(){return e.test(this.userAgent)||t.test(this.userAgent)}tablet(){return t.test(this.userAgent)}};const n=(e,t)=>document.dispatchEvent(new CustomEvent(e,{detail:t})),i=(e,t)=>{if(e.animated===t)return;const{options:s,node:i}=e,o=t?"aos:in":"aos:out",a=t?"add":"remove";((e,t,s="add")=>{t?.forEach((t=>e.classList[s](t)))})(i,s.animatedClassNames,a),n(o,i),s.id&&n(`${o}:${s.id}`,i),e.animated=t};var o=(e,t)=>{e.forEach((e=>((e,t)=>{const{options:s,position:n}=e;s.mirror&&t>=n.out&&!s.once?i(e,!1):t>=n.in?i(e,!0):e.animated&&!s.once&&i(e,!1)})(e,(e=>e===window?e.pageYOffset:e.scrollTop)(t))))},a=(e,t,s)=>{const n=e.getAttribute(`data-aos-${t}`);return"true"===n||"false"!==n&&(n||s)};const r=function(e,t){let s=0,n=0;for(;e;)s+=e.offsetLeft-("BODY"!=e.tagName?e.scrollLeft:0),n+=e.offsetTop-("BODY"!=e.tagName?e.scrollTop:0),e=e.offsetParent===t?null:e.offsetParent;return{top:n,left:s}},l=(e,t,s,n)=>{const i=(e=>e===window?e.innerHeight:e.clientHeight)(n),o=a(e,"anchor"),l=a(e,"anchor-placement"),d=Number(a(e,"offset",l?0:t)),c=l||s;let h=e;if(o){const e=(n===window?document:n).querySelector(o);e&&(h=e)}let m=r(h,n).top-i;switch(c){case"top-bottom":break;case"center-bottom":m+=h.offsetHeight/2;break;case"bottom-bottom":m+=h.offsetHeight;break;case"top-center":m+=i/2;break;case"center-center":m+=i/2+h.offsetHeight/2;break;case"bottom-center":m+=i/2+h.offsetHeight;break;case"top-top":m+=i;break;case"bottom-top":m+=i+h.offsetHeight;break;case"center-top":m+=i+h.offsetHeight/2}return m+d},d=(e,t,s)=>{const n=a(e,"anchor"),i=a(e,"offset",t);let o=e;if(n){const e=(s===window?document:s).querySelector(n);e&&(o=e)}return r(o,s).top+o.offsetHeight-i};const c=e=>[...e].some((e=>e.dataset?.aos||e.children&&c(e.children))),h={offset:120,delay:0,easing:"ease",duration:400,disable:!1,once:!1,mirror:!1,anchorPlacement:"top-bottom",startEvent:"DOMContentLoaded",animatedClassName:"aos-animate",initClassName:"aos-init",useClassNames:!1,disableMutationObserver:!1,throttleDelay:99,debounceDelay:50,container:window};class m{elements=[];initialized=!1;options=h;container=null;observer=null;scrollHandler=null;resizeHandler=null;startHandler=null;static getElements(e){return[...(e===window?document:e).querySelectorAll("[data-aos]")].map((e=>({node:e})))}static isDisabled(e){return!0===e||"mobile"===e&&s.mobile()||"phone"===e&&s.phone()||"tablet"===e&&s.tablet()||"function"==typeof e&&!0===e()}initializeScroll(){const{container:e}=this;return this.elements=function(e,t,s){return e.forEach((e=>{const{node:n}=e,i=a(n,"mirror",t.mirror),o=a(n,"once",t.once),r=a(n,"id"),c=t.useClassNames&&n.getAttribute("data-aos")?.split(" ")||[],h=[t.animatedClassName,...c].filter((e=>"string"==typeof e));t.initClassName&&n.classList.add(t.initClassName),e.position={in:l(n,t.offset,t.anchorPlacement,s),out:i&&d(n,t.offset,s)},e.options={once:o,mirror:i,animatedClassNames:h,id:r}})),e}(this.elements,this.options,e),o(this.elements,this.container),this.scrollHandler=function(e,t){let s,n;return(...i)=>{const o=this;!n||Date.now()-n>=t?(e.apply(o,i),n=Date.now()):(clearTimeout(s),s=setTimeout((()=>{e.apply(o,i),n=Date.now()}),t-(Date.now()-n)))}}((()=>{o(this.elements,e)}),this.options.throttleDelay),e.addEventListener("scroll",this.scrollHandler,{passive:!0}),this.elements}init(e={}){this.destroy(),this.options={...h,...e};const t=(e=>e instanceof Element||e===window?e:"string"==typeof e?document.querySelector(e):null)(this.options.container);if(!t)throw"AOS - cannot find the container element. The container option must be an HTMLElement or a CSS Selector.";if(this.elements=m.getElements(t),this.container=t,m.isDisabled(this.options.disable))return this.disable();this.options.disableMutationObserver||(this.observer=(e=>{const t=new MutationObserver((t=>{t?.some((({addedNodes:e,removedNodes:t})=>c([...e,...t])))&&e()}));return t.observe(document.documentElement,{childList:!0,subtree:!0}),t})(this.refreshHard.bind(this))),document.body.setAttribute("data-aos-easing",this.options.easing),document.body.setAttribute("data-aos-duration",this.options.duration),document.body.setAttribute("data-aos-delay",this.options.delay),this.startHandler={handler:this.refresh.bind(this),type:"document"},["DOMContentLoaded","load"].includes(this.options.startEvent)?(window.addEventListener("load",this.startHandler.handler),this.startHandler.type="window"):document.addEventListener(this.options.startEvent,this.startHandler.handler),"DOMContentLoaded"===this.options.startEvent&&["complete","interactive"].indexOf(document.readyState)>-1&&this.refresh(!0),this.resizeHandler=function(e,t){let s;return(...n)=>{clearTimeout(s),s=setTimeout((()=>{e.apply(this,n)}),t)}}(this.refresh.bind(this),this.options.debounceDelay),window.addEventListener("resize",this.resizeHandler),window.addEventListener("orientationchange",this.resizeHandler)}refresh(e=!1){e&&(this.initialized=!0),this.initialized&&this.initializeScroll()}refreshHard(){if(this.elements=m.getElements(this.container),m.isDisabled(this.options.disable))return this.disable();this.refresh()}disable(){this.elements.forEach((({node:e})=>{e.removeAttribute("data-aos"),e.removeAttribute("data-aos-easing"),e.removeAttribute("data-aos-duration"),e.removeAttribute("data-aos-delay"),this.options.initClassName&&e.classList.remove(this.options.initClassName),this.options.animatedClassName&&e.classList.remove(this.options.animatedClassName)}))}destroy(){if(this.observer?.disconnect(),this.observer=null,this.startHandler){const{handler:e,type:t}=this.startHandler;"document"===t?document.removeEventListener(this.options.startEvent,e):window.removeEventListener("load",e),this.startHandler=null}this.scrollHandler&&(window.removeEventListener("scroll",this.scrollHandler),this.scrollHandler=null),this.resizeHandler&&(window.removeEventListener("resize",this.resizeHandler),window.removeEventListener("orientationchange",this.resizeHandler),this.resizeHandler=null)}}return new m}));
|
package/dist/utils.d.ts
ADDED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@reimujs/aos",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"main": "dist/aos.cjs.js",
|
|
5
5
|
"module": "dist/aos.esm.js",
|
|
6
6
|
"browser": "dist/aos.umd.js",
|
|
@@ -14,13 +14,12 @@
|
|
|
14
14
|
"devDependencies": {
|
|
15
15
|
"@rollup/plugin-node-resolve": "^15.3.0",
|
|
16
16
|
"@rollup/plugin-terser": "^0.4.4",
|
|
17
|
-
"@rollup/plugin-typescript": "^12.1.
|
|
18
|
-
"rollup": "^4.
|
|
17
|
+
"@rollup/plugin-typescript": "^12.1.2",
|
|
18
|
+
"rollup": "^4.32.1",
|
|
19
19
|
"rollup-plugin-scss": "^3.0.0",
|
|
20
|
-
"sass": "^1.
|
|
21
|
-
"tslib": "^2.
|
|
22
|
-
"typescript": "^5.
|
|
23
|
-
"es-toolkit": "^1.23.0"
|
|
20
|
+
"sass": "^1.83.4",
|
|
21
|
+
"tslib": "^2.8.1",
|
|
22
|
+
"typescript": "^5.7.3"
|
|
24
23
|
},
|
|
25
24
|
"repository": {
|
|
26
25
|
"type": "git",
|