@behold/widget 0.5.63 → 0.5.65

Sign up to get free protection for your applications and to get access to all the features.
@@ -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>
@@ -37,7 +37,7 @@ export default class BaseElement extends HTMLElement {
37
37
  /**
38
38
  * Register a callback to fire on resize
39
39
  */
40
- onResize(context: any, el: HTMLElement, cb: Function): void;
40
+ onResize(context: Object, el: HTMLElement, cb: Function): void;
41
41
  /**
42
42
  * Register a callback to fire on intersection
43
43
  *
@@ -1 +1 @@
1
- {"version":3,"file":"BaseElement.d.ts","sourceRoot":"","sources":["../../src/elements/BaseElement.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"BaseElement.d.ts","sourceRoot":"","sources":["../../src/elements/BaseElement.ts"],"names":[],"mappings":"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"}
@@ -1,7 +1,7 @@
1
1
  import BaseElement from './BaseElement';
2
2
  /**
3
3
  * @description
4
- * Required props: 'post', 'widgetSettings', 'feedMetadata', 'medianPaletteHSL'
4
+ * Required props: 'post', 'widgetSettings', 'feedMetadata', 'medianPaletteHSL', 'index', 'totalPosts'
5
5
  */
6
6
  export default class BasePost extends BaseElement {
7
7
  label: string;