@braudypedrosa/bp-listings 1.0.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/LICENSE +21 -0
- package/README.md +152 -0
- package/docs.html +640 -0
- package/index.html +257 -0
- package/listings-map.css +891 -0
- package/listings-map.js +1042 -0
- package/package.json +40 -0
package/index.html
ADDED
|
@@ -0,0 +1,257 @@
|
|
|
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.0" />
|
|
6
|
+
<title>ListingsMap - Demo</title>
|
|
7
|
+
<link rel="stylesheet" href="listings-map.css" />
|
|
8
|
+
<style>
|
|
9
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
10
|
+
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
|
11
|
+
#widget { width: 100vw; height: calc(100vh - 44px); }
|
|
12
|
+
.demo-topbar {
|
|
13
|
+
height: 44px; display: flex; align-items: center; justify-content: space-between;
|
|
14
|
+
padding: 0 20px; border-bottom: 1px solid #eee; background: #fafafa; font-size: 13px;
|
|
15
|
+
}
|
|
16
|
+
.demo-topbar a { color: #222; text-decoration: none; font-weight: 600; }
|
|
17
|
+
.demo-topbar .docs-link { color: #555; font-weight: 500; }
|
|
18
|
+
</style>
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
|
|
22
|
+
<div class="demo-topbar">
|
|
23
|
+
<a href="index.html">ListingsMap <span style="font-weight:400;color:#999">v1.0.0</span></a>
|
|
24
|
+
<a href="docs.html" class="docs-link">Documentation →</a>
|
|
25
|
+
</div>
|
|
26
|
+
<div id="widget"></div>
|
|
27
|
+
|
|
28
|
+
<script src="listings-map.js"></script>
|
|
29
|
+
<script>
|
|
30
|
+
var listings = [
|
|
31
|
+
{
|
|
32
|
+
id: "1",
|
|
33
|
+
title: "Apartment in Quezon City",
|
|
34
|
+
subtitle: "Condo in Cubao | Sunset & City Lights",
|
|
35
|
+
details: "1 bedroom \u00b7 1 bed",
|
|
36
|
+
dates: "Feb 28 \u2013 Mar 5",
|
|
37
|
+
price: 13689,
|
|
38
|
+
pricePeriod: "for 5 nights",
|
|
39
|
+
tag: "Free cancellation",
|
|
40
|
+
rating: 5.0,
|
|
41
|
+
reviewCount: 89,
|
|
42
|
+
badge: "Guest favorite",
|
|
43
|
+
lat: 14.628,
|
|
44
|
+
lng: 121.055,
|
|
45
|
+
images: [
|
|
46
|
+
"https://picsum.photos/seed/apt1a/600/500",
|
|
47
|
+
"https://picsum.photos/seed/apt1b/600/500"
|
|
48
|
+
]
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
id: "2",
|
|
52
|
+
title: "Condo in Makati",
|
|
53
|
+
subtitle: "Quiet Chic 1BR | Ave-Close + Calm Vibe",
|
|
54
|
+
details: "1 bedroom \u00b7 1 bed",
|
|
55
|
+
dates: "Feb 22 \u2013 27",
|
|
56
|
+
price: 8390,
|
|
57
|
+
pricePeriod: "for 5 nights",
|
|
58
|
+
tag: "Free cancellation",
|
|
59
|
+
rating: 4.91,
|
|
60
|
+
reviewCount: 11,
|
|
61
|
+
badge: "Superhost",
|
|
62
|
+
lat: 14.554,
|
|
63
|
+
lng: 121.024,
|
|
64
|
+
images: [
|
|
65
|
+
"https://picsum.photos/seed/condo2a/600/500",
|
|
66
|
+
"https://picsum.photos/seed/condo2b/600/500"
|
|
67
|
+
]
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
id: "3",
|
|
71
|
+
title: "Luxury Suite in BGC",
|
|
72
|
+
subtitle: "Skyline Views | Modern High-Rise Living",
|
|
73
|
+
details: "1 bedroom \u00b7 1 bed",
|
|
74
|
+
dates: "Mar 1 \u2013 6",
|
|
75
|
+
price: 14040,
|
|
76
|
+
pricePeriod: "for 5 nights",
|
|
77
|
+
tag: "Free cancellation",
|
|
78
|
+
rating: 4.87,
|
|
79
|
+
reviewCount: 34,
|
|
80
|
+
badge: "Guest favorite",
|
|
81
|
+
lat: 14.5535,
|
|
82
|
+
lng: 121.0504,
|
|
83
|
+
images: [
|
|
84
|
+
"https://picsum.photos/seed/lux3a/600/500",
|
|
85
|
+
"https://picsum.photos/seed/lux3b/600/500"
|
|
86
|
+
]
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
id: "4",
|
|
90
|
+
title: "Cozy Studio in Pasig",
|
|
91
|
+
subtitle: "Artistic Boho Space | Near Ortigas Center",
|
|
92
|
+
details: "Studio \u00b7 1 bed",
|
|
93
|
+
dates: "Mar 5 \u2013 10",
|
|
94
|
+
price: 7546,
|
|
95
|
+
pricePeriod: "for 5 nights",
|
|
96
|
+
tag: "Free cancellation",
|
|
97
|
+
rating: 4.95,
|
|
98
|
+
reviewCount: 52,
|
|
99
|
+
badge: "Guest favorite",
|
|
100
|
+
lat: 14.577,
|
|
101
|
+
lng: 121.085,
|
|
102
|
+
images: [
|
|
103
|
+
"https://picsum.photos/seed/cozy4a/600/500",
|
|
104
|
+
"https://picsum.photos/seed/cozy4b/600/500"
|
|
105
|
+
]
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
id: "5",
|
|
109
|
+
title: "Modern Flat in Mandaluyong",
|
|
110
|
+
subtitle: "Central Location | Mall Access + Pool",
|
|
111
|
+
details: "1 bedroom \u00b7 1 bed",
|
|
112
|
+
dates: "Mar 3 \u2013 8",
|
|
113
|
+
price: 12097,
|
|
114
|
+
pricePeriod: "for 5 nights",
|
|
115
|
+
tag: "Free cancellation",
|
|
116
|
+
rating: 4.78,
|
|
117
|
+
reviewCount: 19,
|
|
118
|
+
badge: "Superhost",
|
|
119
|
+
lat: 14.579,
|
|
120
|
+
lng: 121.039,
|
|
121
|
+
images: [
|
|
122
|
+
"https://picsum.photos/seed/flat5a/600/500",
|
|
123
|
+
"https://picsum.photos/seed/flat5b/600/500"
|
|
124
|
+
]
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
id: "6",
|
|
128
|
+
title: "Penthouse in Ortigas",
|
|
129
|
+
subtitle: "Premium Views | Full Amenities",
|
|
130
|
+
details: "2 bedrooms \u00b7 2 beds",
|
|
131
|
+
dates: "Feb 25 \u2013 Mar 2",
|
|
132
|
+
price: 18259,
|
|
133
|
+
pricePeriod: "for 5 nights",
|
|
134
|
+
rating: 4.92,
|
|
135
|
+
reviewCount: 7,
|
|
136
|
+
lat: 14.588,
|
|
137
|
+
lng: 121.062,
|
|
138
|
+
images: [
|
|
139
|
+
"https://picsum.photos/seed/pent6a/600/500",
|
|
140
|
+
"https://picsum.photos/seed/pent6b/600/500"
|
|
141
|
+
]
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
id: "7",
|
|
145
|
+
title: "Studio in San Juan",
|
|
146
|
+
subtitle: "Cozy Retreat | Near Greenfields",
|
|
147
|
+
details: "Studio \u00b7 1 bed",
|
|
148
|
+
dates: "Mar 8 \u2013 13",
|
|
149
|
+
price: 6505,
|
|
150
|
+
pricePeriod: "for 5 nights",
|
|
151
|
+
tag: "Free cancellation",
|
|
152
|
+
rating: 4.83,
|
|
153
|
+
reviewCount: 27,
|
|
154
|
+
badge: "Superhost",
|
|
155
|
+
lat: 14.601,
|
|
156
|
+
lng: 121.035,
|
|
157
|
+
images: [
|
|
158
|
+
"https://picsum.photos/seed/sj7a/600/500",
|
|
159
|
+
"https://picsum.photos/seed/sj7b/600/500"
|
|
160
|
+
]
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
id: "8",
|
|
164
|
+
title: "Loft in Taguig",
|
|
165
|
+
subtitle: "Industrial Chic | Near BGC Market",
|
|
166
|
+
details: "1 bedroom \u00b7 1 bed",
|
|
167
|
+
dates: "Mar 10 \u2013 15",
|
|
168
|
+
price: 9800,
|
|
169
|
+
pricePeriod: "for 5 nights",
|
|
170
|
+
tag: "Free cancellation",
|
|
171
|
+
rating: 4.89,
|
|
172
|
+
reviewCount: 43,
|
|
173
|
+
badge: "Guest favorite",
|
|
174
|
+
lat: 14.522,
|
|
175
|
+
lng: 121.057,
|
|
176
|
+
images: [
|
|
177
|
+
"https://picsum.photos/seed/loft8a/600/500",
|
|
178
|
+
"https://picsum.photos/seed/loft8b/600/500"
|
|
179
|
+
]
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
id: "9",
|
|
183
|
+
title: "Villa in Antipolo",
|
|
184
|
+
subtitle: "Hilltop Views | Nature Escape",
|
|
185
|
+
details: "3 bedrooms \u00b7 3 beds",
|
|
186
|
+
dates: "Mar 12 \u2013 17",
|
|
187
|
+
price: 22500,
|
|
188
|
+
pricePeriod: "for 5 nights",
|
|
189
|
+
rating: 4.97,
|
|
190
|
+
reviewCount: 61,
|
|
191
|
+
badge: "Guest favorite",
|
|
192
|
+
lat: 14.585,
|
|
193
|
+
lng: 121.176,
|
|
194
|
+
images: [
|
|
195
|
+
"https://picsum.photos/seed/villa9a/600/500",
|
|
196
|
+
"https://picsum.photos/seed/villa9b/600/500"
|
|
197
|
+
]
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
id: "10",
|
|
201
|
+
title: "Flat in Marikina",
|
|
202
|
+
subtitle: "Quiet Riverside | Family Friendly",
|
|
203
|
+
details: "2 bedrooms \u00b7 2 beds",
|
|
204
|
+
dates: "Mar 15 \u2013 20",
|
|
205
|
+
price: 5200,
|
|
206
|
+
pricePeriod: "for 5 nights",
|
|
207
|
+
tag: "Free cancellation",
|
|
208
|
+
rating: 4.74,
|
|
209
|
+
reviewCount: 15,
|
|
210
|
+
lat: 14.633,
|
|
211
|
+
lng: 121.102,
|
|
212
|
+
images: [
|
|
213
|
+
"https://picsum.photos/seed/mk10a/600/500",
|
|
214
|
+
"https://picsum.photos/seed/mk10b/600/500"
|
|
215
|
+
]
|
|
216
|
+
}
|
|
217
|
+
];
|
|
218
|
+
|
|
219
|
+
ListingsMap.init({
|
|
220
|
+
container: "#widget",
|
|
221
|
+
listings: listings,
|
|
222
|
+
currency: "\u20b1",
|
|
223
|
+
mapOptions: {
|
|
224
|
+
center: [14.58, 121.05],
|
|
225
|
+
zoom: 12
|
|
226
|
+
},
|
|
227
|
+
showMapToggle: true,
|
|
228
|
+
showSort: true,
|
|
229
|
+
showPagination: true,
|
|
230
|
+
pageSize: 4,
|
|
231
|
+
|
|
232
|
+
// Render your own search widget here
|
|
233
|
+
renderSearchSlot: function (containerEl) {
|
|
234
|
+
containerEl.innerHTML =
|
|
235
|
+
'<div style="display:flex;gap:8px;">' +
|
|
236
|
+
'<input type="text" placeholder="Search destinations..." style="' +
|
|
237
|
+
'flex:1;padding:10px 16px;border:1px solid #ddd;border-radius:8px;' +
|
|
238
|
+
'font-size:14px;font-family:inherit;outline:none;" />' +
|
|
239
|
+
'<button style="' +
|
|
240
|
+
'padding:10px 20px;border:none;border-radius:8px;' +
|
|
241
|
+
'background:#222;color:#fff;font-size:14px;cursor:pointer;' +
|
|
242
|
+
'font-family:inherit;">Search</button>' +
|
|
243
|
+
'</div>';
|
|
244
|
+
},
|
|
245
|
+
|
|
246
|
+
onFavorite: function (listing, isFavorited) {
|
|
247
|
+
console.log((isFavorited ? "Saved: " : "Removed: ") + listing.title);
|
|
248
|
+
},
|
|
249
|
+
|
|
250
|
+
onListingClick: function (listing) {
|
|
251
|
+
console.log("Clicked: " + listing.title);
|
|
252
|
+
}
|
|
253
|
+
});
|
|
254
|
+
</script>
|
|
255
|
+
|
|
256
|
+
</body>
|
|
257
|
+
</html>
|