@egjs/svelte-infinitegrid 4.7.0 → 4.8.0
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/.DS_Store +0 -0
- package/.gitignore +4 -0
- package/.npmignore +3 -0
- package/CHANGELOG.md +78 -0
- package/dist/infinitegrid.cjs.js +24 -138
- package/dist/infinitegrid.cjs.js.map +1 -1
- package/dist/infinitegrid.esm.js +24 -138
- package/dist/infinitegrid.esm.js.map +1 -1
- package/package.json +8 -3
- package/.storybook/main.js +0 -32
- package/.storybook/manager.js +0 -5
- package/.storybook/preview.js +0 -25
- package/public/favicon.png +0 -0
- package/public/global.css +0 -63
- package/public/index.html +0 -18
- package/stories/1-MasonryInfiniteGrid/0-MasonryInfiniteGrid.stories.ts +0 -4
- package/stories/1-MasonryInfiniteGrid/1-MasonryInfiniteGrid.stories.ts +0 -27
- package/stories/1-MasonryInfiniteGrid/apps/SvelteMasonryInfiniteGridApp.svelte +0 -42
- package/stories/2-JustifiedInfiniteGrid/0-JustifiedInfiniteGrid.stories.ts +0 -5
- package/stories/2-JustifiedInfiniteGrid/1-JustifiedInfiniteGrid.stories.ts +0 -10
- package/stories/2-JustifiedInfiniteGrid/apps/SvelteJustifiedInfiniteGridApp.svelte +0 -43
- package/stories/3-FrameInfiniteGrid/0-FrameInfiniteGrid.stories.ts +0 -5
- package/stories/3-FrameInfiniteGrid/1-FrameInfiniteGrid.stories.ts +0 -10
- package/stories/3-FrameInfiniteGrid/apps/SvelteFrameInfiniteGridApp.svelte +0 -44
- package/stories/4-PackingInfiniteGrid/0-PackingInfiniteGrid.stories.ts +0 -5
- package/stories/4-PackingInfiniteGrid/1-PackingInfiniteGrid.stories.ts +0 -10
- package/stories/4-PackingInfiniteGrid/apps/SveltePackingInfiniteGridApp.svelte +0 -40
- package/stories/5-DataLoading/0-DataLoading.stories.ts +0 -7
- package/stories/5-DataLoading/1-WaitNReady.stories.ts +0 -10
- package/stories/5-DataLoading/2-Placeholder.stories.ts +0 -10
- package/stories/5-DataLoading/3-Loading.stories.ts +0 -10
- package/stories/5-DataLoading/apps/SvelteLoadingApp.svelte +0 -54
- package/stories/5-DataLoading/apps/SveltePlaceholderApp.svelte +0 -54
- package/stories/5-DataLoading/apps/SvelteWaitNReadyApp.svelte +0 -47
package/public/global.css
DELETED
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
html, body {
|
|
2
|
-
position: relative;
|
|
3
|
-
width: 100%;
|
|
4
|
-
height: 100%;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
body {
|
|
8
|
-
color: #333;
|
|
9
|
-
margin: 0;
|
|
10
|
-
padding: 8px;
|
|
11
|
-
box-sizing: border-box;
|
|
12
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
a {
|
|
16
|
-
color: rgb(0,100,200);
|
|
17
|
-
text-decoration: none;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
a:hover {
|
|
21
|
-
text-decoration: underline;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
a:visited {
|
|
25
|
-
color: rgb(0,80,160);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
label {
|
|
29
|
-
display: block;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
input, button, select, textarea {
|
|
33
|
-
font-family: inherit;
|
|
34
|
-
font-size: inherit;
|
|
35
|
-
-webkit-padding: 0.4em 0;
|
|
36
|
-
padding: 0.4em;
|
|
37
|
-
margin: 0 0 0.5em 0;
|
|
38
|
-
box-sizing: border-box;
|
|
39
|
-
border: 1px solid #ccc;
|
|
40
|
-
border-radius: 2px;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
input:disabled {
|
|
44
|
-
color: #ccc;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
button {
|
|
48
|
-
color: #333;
|
|
49
|
-
background-color: #f4f4f4;
|
|
50
|
-
outline: none;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
button:disabled {
|
|
54
|
-
color: #999;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
button:not(:disabled):active {
|
|
58
|
-
background-color: #ddd;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
button:focus {
|
|
62
|
-
border-color: #666;
|
|
63
|
-
}
|
package/public/index.html
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset='utf-8'>
|
|
5
|
-
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
|
6
|
-
|
|
7
|
-
<title>Svelte app</title>
|
|
8
|
-
|
|
9
|
-
<link rel='icon' type='image/png' href='/favicon.png'>
|
|
10
|
-
<link rel='stylesheet' href='/global.css'>
|
|
11
|
-
<link rel='stylesheet' href='/build/bundle.css'>
|
|
12
|
-
|
|
13
|
-
<script defer src='/build/bundle.js'></script>
|
|
14
|
-
</head>
|
|
15
|
-
|
|
16
|
-
<body>
|
|
17
|
-
</body>
|
|
18
|
-
</html>
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import MasonryInfiniteGridApp from "./apps/SvelteMasonryInfiniteGridApp.svelte";
|
|
2
|
-
// import RawMasonryInfiniteGridApp from "!!raw-loader!./apps/SvelteMasonryInfiniteGridApp.svelte";
|
|
3
|
-
// import { MASONRY_GRID_CONTROLS } from "../../../../stories/templates/controls";
|
|
4
|
-
// import { convertPath, convertSvelteTemplate, makeArgs } from "../../../../stories/utils";
|
|
5
|
-
import "../../../../stories/templates/default.css";
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
export const MasonryInfiniteGridTemplate = (props) => ({
|
|
9
|
-
Component: MasonryInfiniteGridApp,
|
|
10
|
-
props,
|
|
11
|
-
});
|
|
12
|
-
|
|
13
|
-
MasonryInfiniteGridTemplate.storyName = "MasonryInfiniteGrid";
|
|
14
|
-
// MasonryInfiniteGridTemplate.argTypes = MASONRY_GRID_CONTROLS;
|
|
15
|
-
// MasonryInfiniteGridTemplate.args = {
|
|
16
|
-
// ...makeArgs(MasonryInfiniteGridTemplate.argTypes),
|
|
17
|
-
// };
|
|
18
|
-
|
|
19
|
-
// MasonryInfiniteGridTemplate.parameters = {
|
|
20
|
-
// preview: [
|
|
21
|
-
// {
|
|
22
|
-
// tab: "Svelte",
|
|
23
|
-
// template: convertSvelteTemplate(convertPath(RawMasonryInfiniteGridApp, "src", "@egjs/svelte-grid")),
|
|
24
|
-
// language: "html",
|
|
25
|
-
// },
|
|
26
|
-
// ],
|
|
27
|
-
// };
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import { MasonryInfiniteGrid } from "../../../src";
|
|
3
|
-
|
|
4
|
-
let items = getItems(0, 10);
|
|
5
|
-
|
|
6
|
-
function getItems(nextGroupKey, count) {
|
|
7
|
-
const nextItems = [];
|
|
8
|
-
|
|
9
|
-
for (let i = 0; i < count; ++i) {
|
|
10
|
-
const nextKey = nextGroupKey * count + i;
|
|
11
|
-
|
|
12
|
-
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
|
|
13
|
-
}
|
|
14
|
-
return nextItems;
|
|
15
|
-
}
|
|
16
|
-
</script>
|
|
17
|
-
|
|
18
|
-
<MasonryInfiniteGrid
|
|
19
|
-
class="container"
|
|
20
|
-
gap={5}
|
|
21
|
-
{items}
|
|
22
|
-
on:requestAppend={({ detail: e }) => {
|
|
23
|
-
const nextGroupKey = (+e.groupKey || 0) + 1;
|
|
24
|
-
|
|
25
|
-
items = [...items, ...getItems(nextGroupKey, 10)];
|
|
26
|
-
}}
|
|
27
|
-
let:visibleItems
|
|
28
|
-
>
|
|
29
|
-
{#each visibleItems as item (item.key)}
|
|
30
|
-
<div class="item">
|
|
31
|
-
<div class="thumbnail">
|
|
32
|
-
<img
|
|
33
|
-
src={`https://naver.github.io/egjs-infinitegrid/assets/image/${
|
|
34
|
-
(item.key % 33) + 1
|
|
35
|
-
}.jpg`}
|
|
36
|
-
alt="egjs"
|
|
37
|
-
/>
|
|
38
|
-
</div>
|
|
39
|
-
<div class="info">{`egjs ${item.key}`}</div>
|
|
40
|
-
</div>
|
|
41
|
-
{/each}
|
|
42
|
-
</MasonryInfiniteGrid>
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import JustifiedInfiniteGridApp from "./apps/SvelteJustifiedInfiniteGridApp.svelte";
|
|
2
|
-
import "../../../../stories/templates/default.css";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export const JustifiedInfiniteGridTemplate = (props) => ({
|
|
6
|
-
Component: JustifiedInfiniteGridApp,
|
|
7
|
-
props,
|
|
8
|
-
});
|
|
9
|
-
|
|
10
|
-
JustifiedInfiniteGridTemplate.storyName = "JustifiedInfiniteGrid";
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import { JustifiedInfiniteGrid } from "../../../src";
|
|
3
|
-
|
|
4
|
-
let items = getItems(0, 10);
|
|
5
|
-
|
|
6
|
-
function getItems(nextGroupKey, count) {
|
|
7
|
-
const nextItems = [];
|
|
8
|
-
|
|
9
|
-
for (let i = 0; i < count; ++i) {
|
|
10
|
-
const nextKey = nextGroupKey * count + i;
|
|
11
|
-
|
|
12
|
-
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
|
|
13
|
-
}
|
|
14
|
-
return nextItems;
|
|
15
|
-
}
|
|
16
|
-
</script>
|
|
17
|
-
|
|
18
|
-
<JustifiedInfiniteGrid
|
|
19
|
-
class="container"
|
|
20
|
-
gap={5}
|
|
21
|
-
{items}
|
|
22
|
-
on:requestAppend={({ detail: e }) => {
|
|
23
|
-
const nextGroupKey = (+e.groupKey || 0) + 1;
|
|
24
|
-
|
|
25
|
-
items = [...items, ...getItems(nextGroupKey, 10)];
|
|
26
|
-
}}
|
|
27
|
-
let:visibleItems
|
|
28
|
-
>
|
|
29
|
-
{#each visibleItems as item (item.key)}
|
|
30
|
-
<div class="item">
|
|
31
|
-
<div class="thumbnail">
|
|
32
|
-
<img
|
|
33
|
-
src={`https://naver.github.io/egjs-infinitegrid/assets/image/${
|
|
34
|
-
(item.key % 33) + 1
|
|
35
|
-
}.jpg`}
|
|
36
|
-
alt="egjs"
|
|
37
|
-
data-grid-maintained-target="true"
|
|
38
|
-
/>
|
|
39
|
-
</div>
|
|
40
|
-
<div class="info">{`egjs ${item.key}`}</div>
|
|
41
|
-
</div>
|
|
42
|
-
{/each}
|
|
43
|
-
</JustifiedInfiniteGrid>
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import FrameInfiniteGridApp from "./apps/SvelteFrameInfiniteGridApp.svelte";
|
|
2
|
-
import "../../../../stories/templates/default.css";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export const FrameInfiniteGridTemplate = (props) => ({
|
|
6
|
-
Component: FrameInfiniteGridApp,
|
|
7
|
-
props,
|
|
8
|
-
});
|
|
9
|
-
|
|
10
|
-
FrameInfiniteGridTemplate.storyName = "FrameInfiniteGrid";
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import { FrameInfiniteGrid } from "../../../src";
|
|
3
|
-
|
|
4
|
-
let items = getItems(0, 10);
|
|
5
|
-
|
|
6
|
-
function getItems(nextGroupKey, count) {
|
|
7
|
-
const nextItems = [];
|
|
8
|
-
|
|
9
|
-
for (let i = 0; i < count; ++i) {
|
|
10
|
-
const nextKey = nextGroupKey * count + i;
|
|
11
|
-
|
|
12
|
-
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
|
|
13
|
-
}
|
|
14
|
-
return nextItems;
|
|
15
|
-
}
|
|
16
|
-
</script>
|
|
17
|
-
|
|
18
|
-
<FrameInfiniteGrid
|
|
19
|
-
class="container"
|
|
20
|
-
gap={5}
|
|
21
|
-
frame={[
|
|
22
|
-
[1, 1, 2, 2, 3],
|
|
23
|
-
[1, 1, 4, 5, 5],
|
|
24
|
-
]}
|
|
25
|
-
{items}
|
|
26
|
-
on:requestAppend={({ detail: e }) => {
|
|
27
|
-
const nextGroupKey = (+e.groupKey || 0) + 1;
|
|
28
|
-
|
|
29
|
-
items = [...items, ...getItems(nextGroupKey, 10)];
|
|
30
|
-
}}
|
|
31
|
-
let:visibleItems
|
|
32
|
-
>
|
|
33
|
-
{#each visibleItems as item (item.key)}
|
|
34
|
-
<div class="item">
|
|
35
|
-
<img
|
|
36
|
-
src={`https://naver.github.io/egjs-infinitegrid/assets/image/${
|
|
37
|
-
(item.key % 33) + 1
|
|
38
|
-
}.jpg`}
|
|
39
|
-
alt="egjs"
|
|
40
|
-
style="width: 100%; height: 100%"
|
|
41
|
-
/>
|
|
42
|
-
</div>
|
|
43
|
-
{/each}
|
|
44
|
-
</FrameInfiniteGrid>
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import PackingInfiniteGridApp from "./apps/SveltePackingInfiniteGridApp.svelte";
|
|
2
|
-
import "../../../../stories/templates/default.css";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export const PackingInfiniteGridTemplate = (props) => ({
|
|
6
|
-
Component: PackingInfiniteGridApp,
|
|
7
|
-
props,
|
|
8
|
-
});
|
|
9
|
-
|
|
10
|
-
PackingInfiniteGridTemplate.storyName = "PackingInfiniteGrid";
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import { PackingInfiniteGrid } from "../../../src";
|
|
3
|
-
|
|
4
|
-
let items = getItems(0, 10);
|
|
5
|
-
|
|
6
|
-
function getItems(nextGroupKey, count) {
|
|
7
|
-
const nextItems = [];
|
|
8
|
-
|
|
9
|
-
for (let i = 0; i < count; ++i) {
|
|
10
|
-
const nextKey = nextGroupKey * count + i;
|
|
11
|
-
|
|
12
|
-
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
|
|
13
|
-
}
|
|
14
|
-
return nextItems;
|
|
15
|
-
}
|
|
16
|
-
</script>
|
|
17
|
-
|
|
18
|
-
<PackingInfiniteGrid
|
|
19
|
-
class="container"
|
|
20
|
-
gap={5}
|
|
21
|
-
{items}
|
|
22
|
-
on:requestAppend={({ detail: e }) => {
|
|
23
|
-
const nextGroupKey = (+e.groupKey || 0) + 1;
|
|
24
|
-
|
|
25
|
-
items = [...items, ...getItems(nextGroupKey, 10)];
|
|
26
|
-
}}
|
|
27
|
-
let:visibleItems
|
|
28
|
-
>
|
|
29
|
-
{#each visibleItems as item (item.key)}
|
|
30
|
-
<div class="item">
|
|
31
|
-
<img
|
|
32
|
-
src={`https://naver.github.io/egjs-infinitegrid/assets/image/${
|
|
33
|
-
(item.key % 33) + 1
|
|
34
|
-
}.jpg`}
|
|
35
|
-
alt="egjs"
|
|
36
|
-
style="width: 100%; height: 100%"
|
|
37
|
-
/>
|
|
38
|
-
</div>
|
|
39
|
-
{/each}
|
|
40
|
-
</PackingInfiniteGrid>
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import WaitNReadyApp from "./apps/SvelteWaitNReadyApp.svelte";
|
|
2
|
-
import "../../../../stories/templates/default.css";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export const WaitNReadyTemplate = (props) => ({
|
|
6
|
-
Component: WaitNReadyApp,
|
|
7
|
-
props,
|
|
8
|
-
});
|
|
9
|
-
|
|
10
|
-
WaitNReadyTemplate.storyName = "Wait & Ready";
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import PlaceholderApp from "./apps/SveltePlaceholderApp.svelte";
|
|
2
|
-
import "../../../../stories/templates/default.css";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export const PlaceholderTemplate = (props) => ({
|
|
6
|
-
Component: PlaceholderApp,
|
|
7
|
-
props,
|
|
8
|
-
});
|
|
9
|
-
|
|
10
|
-
PlaceholderTemplate.storyName = "Placeholder";
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import { ITEM_TYPE } from "@egjs/infinitegrid";
|
|
3
|
-
import { MasonryInfiniteGrid } from "../../../src";
|
|
4
|
-
import { LoadingTemplate } from "../3-Loading.stories";
|
|
5
|
-
|
|
6
|
-
let items = getItems(0, 10);
|
|
7
|
-
|
|
8
|
-
function getItems(nextGroupKey, count) {
|
|
9
|
-
const nextItems = [];
|
|
10
|
-
|
|
11
|
-
for (let i = 0; i < count; ++i) {
|
|
12
|
-
const nextKey = nextGroupKey * count + i;
|
|
13
|
-
|
|
14
|
-
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
|
|
15
|
-
}
|
|
16
|
-
return nextItems;
|
|
17
|
-
}
|
|
18
|
-
</script>
|
|
19
|
-
|
|
20
|
-
<MasonryInfiniteGrid
|
|
21
|
-
class="container"
|
|
22
|
-
gap={5}
|
|
23
|
-
useLoading={true}
|
|
24
|
-
{items}
|
|
25
|
-
on:requestAppend={({ detail: e }) => {
|
|
26
|
-
const nextGroupKey = (+e.groupKey || 0) + 1;
|
|
27
|
-
|
|
28
|
-
e.wait();
|
|
29
|
-
|
|
30
|
-
setTimeout(() => {
|
|
31
|
-
e.ready();
|
|
32
|
-
items = [...items, ...getItems(nextGroupKey, 10)];
|
|
33
|
-
}, 200);
|
|
34
|
-
}}
|
|
35
|
-
let:visibleItems
|
|
36
|
-
>
|
|
37
|
-
{#each visibleItems as item (item.key)}
|
|
38
|
-
{#if item.type === ITEM_TYPE.NORMAL}
|
|
39
|
-
<div class="item">
|
|
40
|
-
<div class="thumbnail">
|
|
41
|
-
<img
|
|
42
|
-
src={`https://naver.github.io/egjs-infinitegrid/assets/image/${
|
|
43
|
-
(item.key % 33) + 1
|
|
44
|
-
}.jpg`}
|
|
45
|
-
alt="egjs"
|
|
46
|
-
/>
|
|
47
|
-
</div>
|
|
48
|
-
<div class="info">{`egjs ${item.key}`}</div>
|
|
49
|
-
</div>
|
|
50
|
-
{:else if item.type === ITEM_TYPE.LOADING}
|
|
51
|
-
<div class="loading">Loading...</div>
|
|
52
|
-
{/if}
|
|
53
|
-
{/each}
|
|
54
|
-
</MasonryInfiniteGrid>
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import { ITEM_TYPE } from "@egjs/infinitegrid";
|
|
3
|
-
import { MasonryInfiniteGrid } from "../../../src";
|
|
4
|
-
|
|
5
|
-
let items = getItems(0, 10);
|
|
6
|
-
|
|
7
|
-
function getItems(nextGroupKey, count) {
|
|
8
|
-
const nextItems = [];
|
|
9
|
-
|
|
10
|
-
for (let i = 0; i < count; ++i) {
|
|
11
|
-
const nextKey = nextGroupKey * count + i;
|
|
12
|
-
|
|
13
|
-
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
|
|
14
|
-
}
|
|
15
|
-
return nextItems;
|
|
16
|
-
}
|
|
17
|
-
</script>
|
|
18
|
-
|
|
19
|
-
<MasonryInfiniteGrid
|
|
20
|
-
class="container"
|
|
21
|
-
gap={5}
|
|
22
|
-
usePlaceholder={true}
|
|
23
|
-
{items}
|
|
24
|
-
on:requestAppend={({ detail: e }) => {
|
|
25
|
-
const nextGroupKey = (+e.groupKey || 0) + 1;
|
|
26
|
-
|
|
27
|
-
e.wait();
|
|
28
|
-
e.currentTarget.appendPlaceholders(10, nextGroupKey);
|
|
29
|
-
|
|
30
|
-
setTimeout(() => {
|
|
31
|
-
e.ready();
|
|
32
|
-
items = [...items, ...getItems(nextGroupKey, 10)];
|
|
33
|
-
}, 200);
|
|
34
|
-
}}
|
|
35
|
-
let:visibleItems
|
|
36
|
-
>
|
|
37
|
-
{#each visibleItems as item (item.key)}
|
|
38
|
-
{#if item.type === ITEM_TYPE.NORMAL}
|
|
39
|
-
<div class="item">
|
|
40
|
-
<div class="thumbnail">
|
|
41
|
-
<img
|
|
42
|
-
src={`https://naver.github.io/egjs-infinitegrid/assets/image/${
|
|
43
|
-
(item.key % 33) + 1
|
|
44
|
-
}.jpg`}
|
|
45
|
-
alt="egjs"
|
|
46
|
-
/>
|
|
47
|
-
</div>
|
|
48
|
-
<div class="info">{`egjs ${item.key}`}</div>
|
|
49
|
-
</div>
|
|
50
|
-
{:else if item.type === ITEM_TYPE.VIRTUAL}
|
|
51
|
-
<div class="placeholder" />
|
|
52
|
-
{/if}
|
|
53
|
-
{/each}
|
|
54
|
-
</MasonryInfiniteGrid>
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import { MasonryInfiniteGrid } from "../../../src";
|
|
3
|
-
|
|
4
|
-
let items = getItems(0, 10);
|
|
5
|
-
|
|
6
|
-
function getItems(nextGroupKey, count) {
|
|
7
|
-
const nextItems = [];
|
|
8
|
-
|
|
9
|
-
for (let i = 0; i < count; ++i) {
|
|
10
|
-
const nextKey = nextGroupKey * count + i;
|
|
11
|
-
|
|
12
|
-
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
|
|
13
|
-
}
|
|
14
|
-
return nextItems;
|
|
15
|
-
}
|
|
16
|
-
</script>
|
|
17
|
-
|
|
18
|
-
<MasonryInfiniteGrid
|
|
19
|
-
class="container"
|
|
20
|
-
gap={5}
|
|
21
|
-
{items}
|
|
22
|
-
on:requestAppend={({ detail: e }) => {
|
|
23
|
-
const nextGroupKey = (+e.groupKey || 0) + 1;
|
|
24
|
-
|
|
25
|
-
e.wait();
|
|
26
|
-
|
|
27
|
-
setTimeout(() => {
|
|
28
|
-
e.ready();
|
|
29
|
-
items = [...items, ...getItems(nextGroupKey, 10)];;
|
|
30
|
-
}, 1000);
|
|
31
|
-
}}
|
|
32
|
-
let:visibleItems
|
|
33
|
-
>
|
|
34
|
-
{#each visibleItems as item (item.key)}
|
|
35
|
-
<div class="item">
|
|
36
|
-
<div class="thumbnail">
|
|
37
|
-
<img
|
|
38
|
-
src={`https://naver.github.io/egjs-infinitegrid/assets/image/${
|
|
39
|
-
(item.key % 33) + 1
|
|
40
|
-
}.jpg`}
|
|
41
|
-
alt="egjs"
|
|
42
|
-
/>
|
|
43
|
-
</div>
|
|
44
|
-
<div class="info">{`egjs ${item.key}`}</div>
|
|
45
|
-
</div>
|
|
46
|
-
{/each}
|
|
47
|
-
</MasonryInfiniteGrid>
|