@likable-hair/svelte 0.0.26 → 0.0.27
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/common/MediaQuery.svelte
CHANGED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<script >import mediaQuery from "../stores/mediaQuery";
|
|
2
|
+
$: xsAndDown = $mediaQuery.xs;
|
|
3
|
+
$: sAndDown = $mediaQuery.s || $mediaQuery.xs;
|
|
4
|
+
$: mAndDown = $mediaQuery.s || $mediaQuery.xs || $mediaQuery.m;
|
|
5
|
+
$: lAndDown = $mediaQuery.s || $mediaQuery.xs || $mediaQuery.m || $mediaQuery.l;
|
|
6
|
+
$: xlAndDown = $mediaQuery.s || $mediaQuery.xs || $mediaQuery.m || $mediaQuery.l || $mediaQuery.xl;
|
|
7
|
+
$: xlAndUp = $mediaQuery.xl;
|
|
8
|
+
$: lAndUp = $mediaQuery.xl || $mediaQuery.l;
|
|
9
|
+
$: mAndUp = $mediaQuery.xl || $mediaQuery.l || $mediaQuery.m;
|
|
10
|
+
$: sAndUp = $mediaQuery.xl || $mediaQuery.l || $mediaQuery.m || $mediaQuery.s || $mediaQuery.xs;
|
|
11
|
+
$: xsAndUp = $mediaQuery.xl || $mediaQuery.l || $mediaQuery.m || $mediaQuery.s || $mediaQuery.xs;
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<slot
|
|
15
|
+
xs={$mediaQuery.xs}
|
|
16
|
+
s={$mediaQuery.s}
|
|
17
|
+
m={$mediaQuery.m}
|
|
18
|
+
l={$mediaQuery.l}
|
|
19
|
+
xl={$mediaQuery.xl}
|
|
20
|
+
xsAndDown={xsAndDown}
|
|
21
|
+
sAndDown={sAndDown}
|
|
22
|
+
mAndDown={mAndDown}
|
|
23
|
+
lAndDown={lAndDown}
|
|
24
|
+
xlAndDown={xlAndDown}
|
|
25
|
+
xlAndUp={xlAndUp}
|
|
26
|
+
lAndUp={lAndUp}
|
|
27
|
+
mAndUp={mAndUp}
|
|
28
|
+
sAndUp={sAndUp}
|
|
29
|
+
xsAndUp={xsAndUp}
|
|
30
|
+
></slot>
|
|
@@ -1,19 +1,32 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} MediaQueryProps */
|
|
2
|
-
/** @typedef {typeof __propDef.events} MediaQueryEvents */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} MediaQuerySlots */
|
|
4
|
-
export default class MediaQuery extends SvelteComponentTyped<{}, {
|
|
5
|
-
[evt: string]: CustomEvent<any>;
|
|
6
|
-
}, {}> {
|
|
7
|
-
}
|
|
8
|
-
export type MediaQueryProps = typeof __propDef.props;
|
|
9
|
-
export type MediaQueryEvents = typeof __propDef.events;
|
|
10
|
-
export type MediaQuerySlots = typeof __propDef.slots;
|
|
11
1
|
import { SvelteComponentTyped } from "svelte";
|
|
12
2
|
declare const __propDef: {
|
|
13
3
|
props: {};
|
|
14
4
|
events: {
|
|
15
5
|
[evt: string]: CustomEvent<any>;
|
|
16
6
|
};
|
|
17
|
-
slots: {
|
|
7
|
+
slots: {
|
|
8
|
+
default: {
|
|
9
|
+
xs: boolean;
|
|
10
|
+
s: boolean;
|
|
11
|
+
m: boolean;
|
|
12
|
+
l: boolean;
|
|
13
|
+
xl: boolean;
|
|
14
|
+
xsAndDown: boolean;
|
|
15
|
+
sAndDown: boolean;
|
|
16
|
+
mAndDown: boolean;
|
|
17
|
+
lAndDown: boolean;
|
|
18
|
+
xlAndDown: boolean;
|
|
19
|
+
xlAndUp: boolean;
|
|
20
|
+
lAndUp: boolean;
|
|
21
|
+
mAndUp: boolean;
|
|
22
|
+
sAndUp: boolean;
|
|
23
|
+
xsAndUp: boolean;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
18
26
|
};
|
|
27
|
+
export declare type MediaQueryProps = typeof __propDef.props;
|
|
28
|
+
export declare type MediaQueryEvents = typeof __propDef.events;
|
|
29
|
+
export declare type MediaQuerySlots = typeof __propDef.slots;
|
|
30
|
+
export default class MediaQuery extends SvelteComponentTyped<MediaQueryProps, MediaQueryEvents, MediaQuerySlots> {
|
|
31
|
+
}
|
|
19
32
|
export {};
|
package/package.json
CHANGED
package/stores/mediaQuery.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/*
|
|
2
|
-
320px —
|
|
3
|
-
|
|
2
|
+
320px — 425px: Mobile devices
|
|
3
|
+
426px — 768px: iPads, Tablets
|
|
4
4
|
769px — 1024px: Small screens, laptops
|
|
5
|
-
1025px —
|
|
6
|
-
|
|
5
|
+
1025px — 1440px: Desktops, large screens
|
|
6
|
+
1441px and more — Extra large screens, TV
|
|
7
7
|
*/
|
|
8
8
|
import { readable } from "svelte/store";
|
|
9
9
|
import { browser } from "$app/env";
|
|
10
|
-
//
|
|
10
|
+
// 0px — 425px: Mobile devices
|
|
11
11
|
function handleMatchOnXsQuery(event) {
|
|
12
12
|
if (event.matches) {
|
|
13
13
|
return {
|
|
@@ -19,26 +19,136 @@ function handleMatchOnXsQuery(event) {
|
|
|
19
19
|
};
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
|
-
|
|
22
|
+
// 426px — 768px: iPads, Tablets
|
|
23
|
+
function handleMatchOnSQuery(event) {
|
|
24
|
+
if (event.matches) {
|
|
25
|
+
return {
|
|
26
|
+
xs: false,
|
|
27
|
+
s: true,
|
|
28
|
+
m: false,
|
|
29
|
+
l: false,
|
|
30
|
+
xl: false
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
// 769px — 1024px: Small screens, laptops
|
|
35
|
+
function handleMatchOnMQuery(event) {
|
|
36
|
+
if (event.matches) {
|
|
37
|
+
return {
|
|
38
|
+
xs: false,
|
|
39
|
+
s: false,
|
|
40
|
+
m: true,
|
|
41
|
+
l: false,
|
|
42
|
+
xl: false
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
// 1025px — 1440px: Desktops, large screens
|
|
47
|
+
function handleMatchOnLQuery(event) {
|
|
48
|
+
if (event.matches) {
|
|
49
|
+
return {
|
|
50
|
+
xs: false,
|
|
51
|
+
s: false,
|
|
52
|
+
m: false,
|
|
53
|
+
l: true,
|
|
54
|
+
xl: false
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
// 1441px and more — Extra large screens, TV
|
|
59
|
+
function handleMatchOnXlQuery(event) {
|
|
60
|
+
if (event.matches) {
|
|
61
|
+
return {
|
|
62
|
+
xs: false,
|
|
63
|
+
s: false,
|
|
64
|
+
m: false,
|
|
65
|
+
l: false,
|
|
66
|
+
xl: true
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
function getDeviceDimensionFromWidth(width) {
|
|
71
|
+
let dimension = {
|
|
72
|
+
xs: false,
|
|
73
|
+
s: false,
|
|
74
|
+
m: false,
|
|
75
|
+
l: false,
|
|
76
|
+
xl: false
|
|
77
|
+
};
|
|
78
|
+
if (width <= 425) {
|
|
79
|
+
dimension.xs = true;
|
|
80
|
+
}
|
|
81
|
+
else if (width <= 768) {
|
|
82
|
+
dimension.s = true;
|
|
83
|
+
}
|
|
84
|
+
else if (width <= 1024) {
|
|
85
|
+
dimension.m = true;
|
|
86
|
+
}
|
|
87
|
+
else if (width <= 1440) {
|
|
88
|
+
dimension.l = true;
|
|
89
|
+
}
|
|
90
|
+
else {
|
|
91
|
+
dimension.xl = true;
|
|
92
|
+
}
|
|
93
|
+
return dimension;
|
|
94
|
+
}
|
|
95
|
+
let defaultDimension = {
|
|
23
96
|
xs: false,
|
|
24
97
|
s: false,
|
|
25
98
|
m: true,
|
|
26
99
|
l: false,
|
|
27
100
|
xl: false
|
|
28
|
-
}
|
|
29
|
-
|
|
101
|
+
};
|
|
102
|
+
if (browser) {
|
|
103
|
+
defaultDimension = getDeviceDimensionFromWidth(window.innerWidth);
|
|
104
|
+
}
|
|
105
|
+
export default readable(defaultDimension, set => {
|
|
106
|
+
let mqlXs, mqlS, mqlM, mqlL, mqlXl;
|
|
30
107
|
let listenerXs = (e) => {
|
|
31
108
|
const results = handleMatchOnXsQuery(e);
|
|
32
109
|
if (!!results)
|
|
33
110
|
set(results);
|
|
34
111
|
};
|
|
112
|
+
let listenerS = (e) => {
|
|
113
|
+
const results = handleMatchOnSQuery(e);
|
|
114
|
+
if (!!results)
|
|
115
|
+
set(results);
|
|
116
|
+
};
|
|
117
|
+
let listenerM = (e) => {
|
|
118
|
+
const results = handleMatchOnMQuery(e);
|
|
119
|
+
if (!!results)
|
|
120
|
+
set(results);
|
|
121
|
+
};
|
|
122
|
+
let listenerL = (e) => {
|
|
123
|
+
const results = handleMatchOnLQuery(e);
|
|
124
|
+
if (!!results)
|
|
125
|
+
set(results);
|
|
126
|
+
};
|
|
127
|
+
let listenerXl = (e) => {
|
|
128
|
+
const results = handleMatchOnXlQuery(e);
|
|
129
|
+
if (!!results)
|
|
130
|
+
set(results);
|
|
131
|
+
};
|
|
35
132
|
if (browser) {
|
|
36
|
-
|
|
133
|
+
set(getDeviceDimensionFromWidth(window.innerWidth));
|
|
134
|
+
mqlXs = window.matchMedia("(max-width: 425px)");
|
|
37
135
|
mqlXs.addEventListener("change", listenerXs);
|
|
136
|
+
mqlS = window.matchMedia("(min-width: 426px) and (max-width: 768px)");
|
|
137
|
+
mqlS.addEventListener("change", listenerS);
|
|
138
|
+
mqlM = window.matchMedia("(min-width: 769px) and (max-width: 1024px)");
|
|
139
|
+
mqlM.addEventListener("change", listenerM);
|
|
140
|
+
mqlL = window.matchMedia("(min-width: 1025px) and (max-width: 1440px)");
|
|
141
|
+
mqlL.addEventListener("change", listenerL);
|
|
142
|
+
mqlXl = window.matchMedia("(min-width: 1441px)");
|
|
143
|
+
mqlXl.addEventListener("change", listenerXl);
|
|
38
144
|
}
|
|
39
145
|
return () => {
|
|
40
146
|
if (browser) {
|
|
41
147
|
mqlXs.removeEventListener("change", listenerXs);
|
|
148
|
+
mqlS.removeEventListener("change", listenerS);
|
|
149
|
+
mqlM.removeEventListener("change", listenerM);
|
|
150
|
+
mqlL.removeEventListener("change", listenerL);
|
|
151
|
+
mqlXl.removeEventListener("change", listenerXl);
|
|
42
152
|
}
|
|
43
153
|
};
|
|
44
154
|
});
|
|
@@ -32,7 +32,11 @@ import Icon from '../media/Icon.svelte';
|
|
|
32
32
|
style:justify-content={singleSided || index % 2 == 0 ? 'start' : 'flex-end'}
|
|
33
33
|
class="time-line-body"
|
|
34
34
|
>
|
|
35
|
-
<slot
|
|
35
|
+
<slot
|
|
36
|
+
name="item"
|
|
37
|
+
item={item}
|
|
38
|
+
alignment={!singleSided && index % 2 == 0 ? 'right' : 'left'}
|
|
39
|
+
>
|
|
36
40
|
{#if !!item.from || !!item.to || $$slots.times}
|
|
37
41
|
<div
|
|
38
42
|
style:padding={singleSided || index % 2 == 0 ? "0px 20px 0px 0px" : "0px 0px 0px 20px"}
|
|
@@ -61,7 +65,11 @@ import Icon from '../media/Icon.svelte';
|
|
|
61
65
|
</div>
|
|
62
66
|
{/if}
|
|
63
67
|
<div class="time-line-infos">
|
|
64
|
-
<slot
|
|
68
|
+
<slot
|
|
69
|
+
name="infos"
|
|
70
|
+
item={item}
|
|
71
|
+
alignment={!singleSided && index % 2 == 0 ? 'right' : 'left'}
|
|
72
|
+
>
|
|
65
73
|
{#if !!item.title}
|
|
66
74
|
<div
|
|
67
75
|
style:text-align={singleSided || index % 2 == 0 ? 'left' : 'right'}
|
|
@@ -74,7 +82,11 @@ import Icon from '../media/Icon.svelte';
|
|
|
74
82
|
class="time-line-description"
|
|
75
83
|
>{item.description}</div>
|
|
76
84
|
{/if}
|
|
77
|
-
<slot
|
|
85
|
+
<slot
|
|
86
|
+
name="infos-append"
|
|
87
|
+
item={item}
|
|
88
|
+
alignment={!singleSided && index % 2 == 0 ? 'right' : 'left'}
|
|
89
|
+
></slot>
|
|
78
90
|
</slot>
|
|
79
91
|
</div>
|
|
80
92
|
</slot>
|
|
@@ -29,15 +29,18 @@ declare const __propDef: {
|
|
|
29
29
|
slots: {
|
|
30
30
|
item: {
|
|
31
31
|
item: TimeLineItem;
|
|
32
|
+
alignment: string;
|
|
32
33
|
};
|
|
33
34
|
times: {
|
|
34
35
|
item: TimeLineItem;
|
|
35
36
|
};
|
|
36
37
|
infos: {
|
|
37
38
|
item: TimeLineItem;
|
|
39
|
+
alignment: string;
|
|
38
40
|
};
|
|
39
41
|
'infos-append': {
|
|
40
42
|
item: TimeLineItem;
|
|
43
|
+
alignment: string;
|
|
41
44
|
};
|
|
42
45
|
circle: {
|
|
43
46
|
item: TimeLineItem;
|