Skip to content

Commit ebf8e00

Browse files
victoryoallivictoryoalli
committed
wip
1 parent 5e3a266 commit ebf8e00

File tree

7 files changed

+69
-32
lines changed

7 files changed

+69
-32
lines changed

‎README.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,55 @@
11
# Alpine.js plugin Screen
2+
3+
The **Screen Plugin** lets you programmatically monitor changes to the size of an element.
4+
5+
6+
7+
## Instalation
8+
### Via script include
9+
```html
10+
<html>
11+
<script src="/js/screen.min.js" defer></script>
12+
<script src="/js/alpine.js" defer></script>
13+
14+
</html>
15+
```
16+
### Via NPM
17+
18+
```javascript
19+
import Alpine from 'alpinejs'
20+
21+
import screen from '@victoryoalli/alpinejs-screen'
22+
Alpine.plugin(screen)
23+
24+
window.Alpine = Alpine
25+
window.Alpine.start()
26+
```
27+
28+
# x-screen
29+
Directive
30+
```html
31+
<div x-data x-screen="alert('screen resized')"></div>
32+
```
33+
34+
35+
# $width and $height
36+
Magic helpers
37+
```html
38+
<div x-data x-screen="isBig = $width>1024">
39+
Bigger than 1024 pixels
40+
</div>
41+
```
42+
43+
### Example
44+
45+
Using $width magic helper
46+
47+
```html
48+
<html>
49+
<script src="/js/screen.min.js" defer></script>
50+
<script src="/js/alpine.js" defer></script>
51+
<div x-screen="isMobile = ($width<1024)">
52+
<span x-show="isMobile"> MOBILE </span>
53+
</div>
54+
</html>
55+
```

‎dist/screen.cjs.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,12 @@ var Screen = function(Alpine) {
2626
resizeObserver.observe(el);
2727
cleanup(() => observer.disconnect());
2828
});
29+
Alpine.magic("width", () => {
30+
return window.outerWidth;
31+
});
32+
Alpine.magic("height", () => {
33+
return window.outerHeight;
34+
});
2935
};
3036
var src_default = Screen;
3137

‎dist/screen.esm.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,12 @@ var Screen = function(Alpine) {
1313
resizeObserver.observe(el);
1414
cleanup(() => observer.disconnect());
1515
});
16+
Alpine.magic("width", () => {
17+
return window.outerWidth;
18+
});
19+
Alpine.magic("height", () => {
20+
return window.outerHeight;
21+
});
1622
};
1723
var src_default = Screen;
1824

‎dist/screen.js‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎dist/screen.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/screen.min.js.map‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ const Screen = function (Alpine) {
1313
resizeObserver.observe(el);
1414
cleanup(() => observer.disconnect())
1515
})
16+
Alpine.magic('width',() => { return window.outerWidth })
17+
Alpine.magic('height',() => { return window.outerHeight })
1618
}
1719

1820
export default Screen

0 commit comments

Comments
 (0)