@behold/widget 0.5.64 → 0.5.65
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/ElasticCarousel-6SPFdi5u.js +1032 -0
- package/dist/ErrorMessage-WxAD9Li7.js +110 -0
- package/dist/GalleryWall-Cn7UUK_i.js +355 -0
- package/dist/Grid--7TepH_z.js +339 -0
- package/dist/PopoverGallery-oswhxqGK.js +1905 -0
- package/dist/base-D7ZLOWQ5.js +1242 -0
- package/dist/caret-right-S2XSTDFy.js +5 -0
- package/dist/demo/favicon.svg +11 -0
- package/dist/demo/index.html +205 -0
- package/dist/index-zGq7k0wG.js +938 -0
- package/dist/index.js +1 -1
- package/dist/lib/gyre.d.ts +2 -2
- package/dist/lib/gyre.d.ts.map +1 -1
- package/dist/replaceChildren-WvILsw1L.js +32 -0
- package/dist/resizeObserver-OlrW1x9X.js +454 -0
- package/dist/widgets/GalleryWall.d.ts.map +1 -1
- package/dist/widgets/Grid.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/ElasticCarousel-TgYctl0q.js +0 -1
- package/dist/ErrorMessage-JdTd1HQ0.js +0 -1
- package/dist/GalleryWall-YhaOqfTo.js +0 -1
- package/dist/Grid-D1wqy3hY.js +0 -1
- package/dist/PopoverGallery-frjpY9Sq.js +0 -1
- package/dist/base-dR64s75u.js +0 -1
- package/dist/caret-right-xsqAZl9R.js +0 -1
- package/dist/index-P5DzRXeC.js +0 -1
- package/dist/replaceChildren-4H1qCpyP.js +0 -1
- package/dist/resizeObserver--rsjm-GV.js +0 -1
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
var caretLeftIcon = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t viewBox=\"0 0 12.1 20\" enable-background=\"new 0 0 12.1 20\" xml:space=\"preserve\">\n<path d=\"M12.1,17.9L4.2,10l7.9-7.9L10,0L0,10l10,10L12.1,17.9z\"/>\n</svg>";
|
|
2
|
+
|
|
3
|
+
var caretRightIcon = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t viewBox=\"0 0 12.1 20\" enable-background=\"new 0 0 12.1 20\" xml:space=\"preserve\">\n<path d=\"M0,2.1L7.9,10L0,17.9L2.1,20l10-10L2.1,0L0,2.1z\"/>\n</svg>";
|
|
4
|
+
|
|
5
|
+
export { caretRightIcon as a, caretLeftIcon as c };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
4
|
+
viewBox="0 0 25 25" enable-background="new 0 0 25 25" xml:space="preserve">
|
|
5
|
+
<path fill="#3CA566" d="M12.5,6.8c0.8,0,1.8,0.1,2.8,0.3c1.3,0.3,2.4,1.3,2.6,2.6c0.2,1,0.3,1.9,0.3,2.8c0,0.9-0.1,1.9-0.3,2.9
|
|
6
|
+
c-0.3,1.3-1.3,2.3-2.6,2.6c-1,0.2-2,0.4-2.8,0.4c-0.9,0-1.9-0.1-3-0.4c-1.1-0.3-2-1.2-2.3-2.3c-0.3-1.1-0.4-2.1-0.4-3
|
|
7
|
+
c0-0.8,0.1-1.8,0.3-2.8c0.3-1.3,1.3-2.4,2.6-2.6C10.7,6.9,11.7,6.8,12.5,6.8 M12.5,0.5c-1.4,0-2.8,0.2-4,0.5C4.7,1.7,1.8,4.6,1,8.4
|
|
8
|
+
c-0.3,1.3-0.5,2.7-0.5,4.1c0,1.6,0.2,3.1,0.6,4.5c0.8,3.4,3.5,6.1,6.9,7c1.4,0.3,2.9,0.6,4.5,0.6c1.5,0,2.9-0.2,4.2-0.5
|
|
9
|
+
c3.7-0.8,6.5-3.7,7.3-7.4c0.3-1.3,0.5-2.7,0.5-4.2c0-1.4-0.2-2.8-0.4-4c-0.8-3.8-3.7-6.6-7.5-7.4C15.3,0.7,13.9,0.5,12.5,0.5
|
|
10
|
+
L12.5,0.5z"/>
|
|
11
|
+
</svg>
|
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width" />
|
|
6
|
+
<link rel="shortcut icon" href="favicon.svg" type="image/svg" />
|
|
7
|
+
<title>Widget Tester</title>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="container">
|
|
11
|
+
<div class="widgets">
|
|
12
|
+
<behold-widget
|
|
13
|
+
feed-id="ipWJlEByNNGq2SIgc41O"
|
|
14
|
+
onload="console.log('loaded!')"
|
|
15
|
+
></behold-widget>
|
|
16
|
+
<!-- <behold-widget
|
|
17
|
+
no-feed-id="rj4DtEWRJz7V6j82l6HX"
|
|
18
|
+
class="loader"
|
|
19
|
+
></behold-widget> -->
|
|
20
|
+
</div>
|
|
21
|
+
<div class="controls">
|
|
22
|
+
<textarea cols="30" rows="50">
|
|
23
|
+
{
|
|
24
|
+
"widgetSettings": {
|
|
25
|
+
"onPostClick": "openPopupGallery",
|
|
26
|
+
"autoplayVideos": false,
|
|
27
|
+
"previewVideosOnHover": true,
|
|
28
|
+
"maxWidth": 1100,
|
|
29
|
+
"constrainWidth": true,
|
|
30
|
+
"iconColor": "#4a4a4a",
|
|
31
|
+
"textColor": "#4a4a4a",
|
|
32
|
+
"buttonColor": "#f4f4f4",
|
|
33
|
+
"buttonHoverColor": "#ececec",
|
|
34
|
+
"buttonIconColor": "#4a4a4a",
|
|
35
|
+
"buttonIconHoverColor": "#2e2e2e",
|
|
36
|
+
"breakpoints":{
|
|
37
|
+
"500":{
|
|
38
|
+
"forcePostAspectRatio": true,
|
|
39
|
+
"applyBorderRadiusToContainer": false,
|
|
40
|
+
"postHeight": 180,
|
|
41
|
+
"borderRadius":"20",
|
|
42
|
+
"gap":{
|
|
43
|
+
"x":10,
|
|
44
|
+
"y":0
|
|
45
|
+
},
|
|
46
|
+
"postAspectRatio": [1,1]
|
|
47
|
+
},
|
|
48
|
+
"800":{
|
|
49
|
+
"forcePostAspectRatio": false,
|
|
50
|
+
"postHeight": 200,
|
|
51
|
+
"borderRadius":"0",
|
|
52
|
+
"gap":{
|
|
53
|
+
"x":20,
|
|
54
|
+
"y":20
|
|
55
|
+
},
|
|
56
|
+
"postAspectRatio": [1,1]
|
|
57
|
+
},
|
|
58
|
+
"default":{
|
|
59
|
+
"snapToSlide": false,
|
|
60
|
+
"bindToScrollPos": true,
|
|
61
|
+
"showControls": true,
|
|
62
|
+
"controlsPosition": "bottom",
|
|
63
|
+
"controlsJustification": "right",
|
|
64
|
+
"showLabel": true,
|
|
65
|
+
"labelPosition": "bottom",
|
|
66
|
+
"labelJustification": "left",
|
|
67
|
+
"forcePostAspectRatio": true,
|
|
68
|
+
"postHeight": 250,
|
|
69
|
+
"controlsMargin": 20,
|
|
70
|
+
"borderRadius":20,
|
|
71
|
+
"applyBorderRadiusToContainer": false,
|
|
72
|
+
"buttonBorderRadius": 42,
|
|
73
|
+
"gap":{
|
|
74
|
+
"x":10,
|
|
75
|
+
"y":10
|
|
76
|
+
},
|
|
77
|
+
"postAspectRatio": [1,1]
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
</textarea
|
|
83
|
+
>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<script type="module">
|
|
88
|
+
import { widget as beholdWidget } from '../index.js'
|
|
89
|
+
|
|
90
|
+
const containerEl = document.querySelector('.container')
|
|
91
|
+
const widgetEl = document.querySelector('behold-widget')
|
|
92
|
+
beholdWidget.register()
|
|
93
|
+
// let loadedData = {}
|
|
94
|
+
|
|
95
|
+
const settingsEl = document.querySelector('textarea')
|
|
96
|
+
|
|
97
|
+
function update(value) {
|
|
98
|
+
const data = JSON.parse(value)
|
|
99
|
+
widgetEl.widgetSettings = {
|
|
100
|
+
...widgetEl.widgetSettings,
|
|
101
|
+
...data.widgetSettings,
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
settingsEl.addEventListener('change', (evt) => update(evt.target.value))
|
|
106
|
+
|
|
107
|
+
// widgetEl.addEventListener('load', () => update(settingsEl.value))
|
|
108
|
+
|
|
109
|
+
const rawRes = await fetch(`https://feeds.behold.so/L7mnQCHvZeMZLbNXmJll`)
|
|
110
|
+
const feedJson = await rawRes.json()
|
|
111
|
+
const data = feedJson
|
|
112
|
+
// widgetEl.widgetSettings = data.widgetSettings
|
|
113
|
+
// widgetEl.feedMetadata = {
|
|
114
|
+
// username: data.username,
|
|
115
|
+
// profilePictureUrl: data.profilePictureUrl,
|
|
116
|
+
// website: data.website,
|
|
117
|
+
// followersCount: data.followersCount,
|
|
118
|
+
// hashtags: data.hashtags,
|
|
119
|
+
// }
|
|
120
|
+
|
|
121
|
+
// setTimeout(() => {
|
|
122
|
+
// widgetEl.posts = data.media
|
|
123
|
+
// }, 3000)
|
|
124
|
+
|
|
125
|
+
// widgetEl.posts = data.media.map((p) => {
|
|
126
|
+
// return {
|
|
127
|
+
// ...p,
|
|
128
|
+
// sizes: {
|
|
129
|
+
// small: {
|
|
130
|
+
// mediaUrl:
|
|
131
|
+
// 'https://scontent-dfw5-1.cdninstagram.com/v/t51.2885-15/418782079_1019919605743182_1275678005134054678_n.jpg?_nc_cat=111&ccb=1-7&_nc_sid=c4dd86&_nc_ohc=JQG-r-rt2oQAX8b__ni&_nc_oc=AQkhK4IwoA2Hy7iRUZYf14ZsmOjt1qyFxJQGwOu-DnoNGBJ7yPk_cE6r8oDMr6AUhY9zSuUfMCQMNdD6DsB7Jxwa&_nc_ht=scontent-dfw5-1.cdninstagram.com&edm=APCawUEEAAAA&oh=00_AfBufnWUUrbyghkGDqED8YD-u4tdWEY7IRXf_1PqGOsC-Q&oe=65A90E83',
|
|
132
|
+
// width: null,
|
|
133
|
+
// height: null,
|
|
134
|
+
// },
|
|
135
|
+
// large: {
|
|
136
|
+
// mediaUrl:
|
|
137
|
+
// 'https://scontent-dfw5-1.cdninstagram.com/v/t51.2885-15/418782079_1019919605743182_1275678005134054678_n.jpg?_nc_cat=111&ccb=1-7&_nc_sid=c4dd86&_nc_ohc=JQG-r-rt2oQAX8b__ni&_nc_oc=AQkhK4IwoA2Hy7iRUZYf14ZsmOjt1qyFxJQGwOu-DnoNGBJ7yPk_cE6r8oDMr6AUhY9zSuUfMCQMNdD6DsB7Jxwa&_nc_ht=scontent-dfw5-1.cdninstagram.com&edm=APCawUEEAAAA&oh=00_AfBufnWUUrbyghkGDqED8YD-u4tdWEY7IRXf_1PqGOsC-Q&oe=65A90E83',
|
|
138
|
+
// width: null,
|
|
139
|
+
// height: null,
|
|
140
|
+
// },
|
|
141
|
+
// medium: {
|
|
142
|
+
// mediaUrl:
|
|
143
|
+
// 'https://scontent-dfw5-1.cdninstagram.com/v/t51.2885-15/418782079_1019919605743182_1275678005134054678_n.jpg?_nc_cat=111&ccb=1-7&_nc_sid=c4dd86&_nc_ohc=JQG-r-rt2oQAX8b__ni&_nc_oc=AQkhK4IwoA2Hy7iRUZYf14ZsmOjt1qyFxJQGwOu-DnoNGBJ7yPk_cE6r8oDMr6AUhY9zSuUfMCQMNdD6DsB7Jxwa&_nc_ht=scontent-dfw5-1.cdninstagram.com&edm=APCawUEEAAAA&oh=00_AfBufnWUUrbyghkGDqED8YD-u4tdWEY7IRXf_1PqGOsC-Q&oe=65A90E83',
|
|
144
|
+
// width: null,
|
|
145
|
+
// height: null,
|
|
146
|
+
// },
|
|
147
|
+
// full: {
|
|
148
|
+
// mediaUrl:
|
|
149
|
+
// 'https://scontent-dfw5-1.cdninstagram.com/v/t51.2885-15/418782079_1019919605743182_1275678005134054678_n.jpg?_nc_cat=111&ccb=1-7&_nc_sid=c4dd86&_nc_ohc=JQG-r-rt2oQAX8b__ni&_nc_oc=AQkhK4IwoA2Hy7iRUZYf14ZsmOjt1qyFxJQGwOu-DnoNGBJ7yPk_cE6r8oDMr6AUhY9zSuUfMCQMNdD6DsB7Jxwa&_nc_ht=scontent-dfw5-1.cdninstagram.com&edm=APCawUEEAAAA&oh=00_AfBufnWUUrbyghkGDqED8YD-u4tdWEY7IRXf_1PqGOsC-Q&oe=65A90E83',
|
|
150
|
+
// width: null,
|
|
151
|
+
// height: null,
|
|
152
|
+
// },
|
|
153
|
+
// },
|
|
154
|
+
// colorPalette: {
|
|
155
|
+
// vibrant: '163,176,78',
|
|
156
|
+
// dominant: '142,139,89',
|
|
157
|
+
// mutedLight: '200,204,163',
|
|
158
|
+
// vibrantLight: '221,178,140',
|
|
159
|
+
// mutedDark: '88,69,47',
|
|
160
|
+
// vibrantDark: '106,121,36',
|
|
161
|
+
// muted: '166,134,94',
|
|
162
|
+
// },
|
|
163
|
+
// }
|
|
164
|
+
// })
|
|
165
|
+
</script>
|
|
166
|
+
|
|
167
|
+
<style>
|
|
168
|
+
body {
|
|
169
|
+
padding: 0;
|
|
170
|
+
margin: 0;
|
|
171
|
+
font-family: sans-serif;
|
|
172
|
+
}
|
|
173
|
+
.container {
|
|
174
|
+
min-height: 101vh;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.controls {
|
|
178
|
+
flex-direction: column;
|
|
179
|
+
justify-content: center;
|
|
180
|
+
width: 50%;
|
|
181
|
+
max-width: 100%;
|
|
182
|
+
gap: 30px;
|
|
183
|
+
background-color: #fff;
|
|
184
|
+
flex-grow: 0;
|
|
185
|
+
flex-shrink: 0;
|
|
186
|
+
|
|
187
|
+
textarea {
|
|
188
|
+
width: 100%;
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
label {
|
|
193
|
+
display: flex;
|
|
194
|
+
gap: 10px;
|
|
195
|
+
align-items: center;
|
|
196
|
+
font-family: monospace;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.widgets {
|
|
200
|
+
flex-grow: 1;
|
|
201
|
+
padding: 20vh 0;
|
|
202
|
+
}
|
|
203
|
+
</style>
|
|
204
|
+
</body>
|
|
205
|
+
</html>
|