Skip to content

Commit d3313d6

Browse files
nolimits4webnolimits4web
committed
feat(photo-browser): add new swipeable Thumbs
1 parent e56f480 commit d3313d6

File tree

12 files changed

+331
-39
lines changed

12 files changed

+331
-39
lines changed

‎kitchen-sink/core/pages/photo-browser.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,13 @@
6262
caption: 'Beautiful mountains in Zhangjiajie, China'
6363
}
6464
];
65+
const thumbs = [
66+
'img/beach.jpg',
67+
'http://placekitten.com/1024/1024',
68+
'img/lock.jpg',
69+
'img/monkey.jpg',
70+
'img/mountains.jpg'
71+
]
6572

6673
let standalone;
6774
let popup;
@@ -92,27 +99,33 @@
9299
// Create PBs when page init
93100
standalone = $f7.photoBrowser.create({
94101
photos: photos,
102+
thumbs: thumbs,
95103
});
96104
popup = $f7.photoBrowser.create({
97105
photos: photos,
106+
thumbs: thumbs,
98107
type: 'popup',
99108
});
100109
page = $f7.photoBrowser.create({
101110
photos: photos,
111+
thumbs: thumbs,
102112
type: 'page',
103113
backLinkText: 'Back',
104114
});
105115
standaloneDark = $f7.photoBrowser.create({
106116
photos: photos,
117+
thumbs: thumbs,
107118
theme: 'dark',
108119
});
109120
popupDark = $f7.photoBrowser.create({
110121
photos: photos,
122+
thumbs: thumbs,
111123
type: 'popup',
112124
theme: 'dark',
113125
});
114126
pageDark = $f7.photoBrowser.create({
115127
photos: photos,
128+
thumbs: thumbs,
116129
type: 'page',
117130
backLinkText: 'Back',
118131
theme: 'dark',

‎kitchen-sink/react/src/pages/photo-browser.jsx

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,13 @@ export default () => {
2424
caption: 'Beautiful mountains in Zhangjiajie, China',
2525
},
2626
];
27+
const thumbs = [
28+
'img/beach.jpg',
29+
'http://placekitten.com/1024/1024',
30+
'img/lock.jpg',
31+
'img/monkey.jpg',
32+
'img/mountains.jpg',
33+
];
2734
return (
2835
<Page>
2936
<Navbar title="Photo Browser" backLink="Back"></Navbar>
@@ -46,19 +53,25 @@ export default () => {
4653
</p>
4754
<div className="grid grid-cols-3 grid-gap">
4855
<div>
49-
<PhotoBrowser photos={photos} ref={standalone} />
56+
<PhotoBrowser photos={photos} thumbs={thumbs} ref={standalone} />
5057
<Button fill onClick={() => standalone.current.open()}>
5158
Standalone
5259
</Button>
5360
</div>
5461
<div>
55-
<PhotoBrowser photos={photos} type="popup" ref={popup} />
62+
<PhotoBrowser photos={photos} thumbs={thumbs} type="popup" ref={popup} />
5663
<Button fill onClick={() => popup.current.open()}>
5764
Popup
5865
</Button>
5966
</div>
6067
<div>
61-
<PhotoBrowser photos={photos} type="page" pageBackLinkText="Back" ref={page} />
68+
<PhotoBrowser
69+
photos={photos}
70+
thumbs={thumbs}
71+
type="page"
72+
pageBackLinkText="Back"
73+
ref={page}
74+
/>
6275
<Button fill onClick={() => page.current.open()}>
6376
Page
6477
</Button>
@@ -72,20 +85,27 @@ export default () => {
7285
</p>
7386
<div className="grid grid-cols-3 grid-gap">
7487
<div>
75-
<PhotoBrowser photos={photos} theme="dark" ref={standaloneDark} />
88+
<PhotoBrowser photos={photos} thumbs={thumbs} theme="dark" ref={standaloneDark} />
7689
<Button fill onClick={() => standaloneDark.current.open()}>
7790
Standalone
7891
</Button>
7992
</div>
8093
<div>
81-
<PhotoBrowser photos={photos} theme="dark" type="popup" ref={popupDark} />
94+
<PhotoBrowser
95+
photos={photos}
96+
thumbs={thumbs}
97+
theme="dark"
98+
type="popup"
99+
ref={popupDark}
100+
/>
82101
<Button fill onClick={() => popupDark.current.open()}>
83102
Popup
84103
</Button>
85104
</div>
86105
<div>
87106
<PhotoBrowser
88107
photos={photos}
108+
thumbs={thumbs}
89109
theme="dark"
90110
type="page"
91111
pageBackLinkText="Back"

‎kitchen-sink/svelte/src/pages/photo-browser.svelte

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,14 @@
2525
caption: 'Beautiful mountains in Zhangjiajie, China',
2626
},
2727
];
28+
29+
const thumbs = [
30+
'img/beach.jpg',
31+
'http://placekitten.com/1024/1024',
32+
'img/lock.jpg',
33+
'img/monkey.jpg',
34+
'img/mountains.jpg',
35+
];
2836
</script>
2937

3038
<Page>
@@ -48,15 +56,15 @@
4856
</p>
4957
<div class="grid grid-cols-3 grid-gap">
5058
<div>
51-
<PhotoBrowser {photos} bind:this={standalone} />
59+
<PhotoBrowser {photos} {thumbs} bind:this={standalone} />
5260
<Button fill onClick={() => standalone.open()}>Standalone</Button>
5361
</div>
5462
<div>
55-
<PhotoBrowser {photos} type="popup" bind:this={popup} />
63+
<PhotoBrowser {photos} {thumbs} type="popup" bind:this={popup} />
5664
<Button fill onClick={() => popup.open()}>Popup</Button>
5765
</div>
5866
<div>
59-
<PhotoBrowser {photos} type="page" pageBackLinkText="Back" bind:this={page} />
67+
<PhotoBrowser {photos} {thumbs} type="page" pageBackLinkText="Back" bind:this={page} />
6068
<Button fill onClick={() => page.open()}>Page</Button>
6169
</div>
6270
</div>
@@ -68,16 +76,17 @@
6876
</p>
6977
<div class="grid grid-cols-3 grid-gap">
7078
<div>
71-
<PhotoBrowser {photos} theme="dark" bind:this={standaloneDark} />
79+
<PhotoBrowser {photos} {thumbs} theme="dark" bind:this={standaloneDark} />
7280
<Button fill onClick={() => standaloneDark.open()}>Standalone</Button>
7381
</div>
7482
<div>
75-
<PhotoBrowser {photos} theme="dark" type="popup" bind:this={popupDark} />
83+
<PhotoBrowser {photos} {thumbs} theme="dark" type="popup" bind:this={popupDark} />
7684
<Button fill onClick={() => popupDark.open()}>Popup</Button>
7785
</div>
7886
<div>
7987
<PhotoBrowser
8088
{photos}
89+
{thumbs}
8190
theme="dark"
8291
type="page"
8392
pageBackLinkText="Back"

‎kitchen-sink/vue/src/pages/photo-browser.vue

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,21 @@
2020
</p>
2121
<div class="grid grid-cols-3 grid-gap">
2222
<div>
23-
<f7-photo-browser ref="standalone" :photos="photos" />
23+
<f7-photo-browser ref="standalone" :photos="photos" :thumbs="thumbs" />
2424
<f7-button fill @click="$refs.standalone.open()">Standalone</f7-button>
2525
</div>
2626
<div>
27-
<f7-photo-browser ref="popup" :photos="photos" type="popup" />
27+
<f7-photo-browser ref="popup" :photos="photos" :thumbs="thumbs" type="popup" />
2828
<f7-button fill @click="$refs.popup.open()">Popup</f7-button>
2929
</div>
3030
<div>
31-
<f7-photo-browser ref="page" :photos="photos" type="page" page-back-link-text="Back" />
31+
<f7-photo-browser
32+
ref="page"
33+
:photos="photos"
34+
:thumbs="thumbs"
35+
type="page"
36+
page-back-link-text="Back"
37+
/>
3238
<f7-button fill @click="$refs.page.open()">Page</f7-button>
3339
</div>
3440
</div>
@@ -40,17 +46,24 @@
4046
</p>
4147
<div class="grid grid-cols-3 grid-gap">
4248
<div>
43-
<f7-photo-browser ref="standaloneDark" :photos="photos" theme="dark" />
49+
<f7-photo-browser ref="standaloneDark" :photos="photos" :thumbs="thumbs" theme="dark" />
4450
<f7-button fill @click="$refs.standaloneDark.open()">Standalone</f7-button>
4551
</div>
4652
<div>
47-
<f7-photo-browser ref="popupDark" :photos="photos" theme="dark" type="popup" />
53+
<f7-photo-browser
54+
ref="popupDark"
55+
:photos="photos"
56+
:thumbs="thumbs"
57+
theme="dark"
58+
type="popup"
59+
/>
4860
<f7-button fill @click="$refs.popupDark.open()">Popup</f7-button>
4961
</div>
5062
<div>
5163
<f7-photo-browser
5264
ref="pageDark"
5365
:photos="photos"
66+
:thumbs="thumbs"
5467
theme="dark"
5568
type="page"
5669
page-back-link-text="Back"
@@ -90,6 +103,13 @@ export default {
90103
caption: 'Beautiful mountains in Zhangjiajie, China',
91104
},
92105
],
106+
thumbs: [
107+
'img/beach.jpg',
108+
'http://placekitten.com/1024/1024',
109+
'img/lock.jpg',
110+
'img/monkey.jpg',
111+
'img/mountains.jpg',
112+
],
93113
};
94114
},
95115
};

0 commit comments

Comments
 (0)