appscms-tools-theme 2.2.6 → 2.2.7
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.
- checksums.yaml +4 -4
- data/_data/feature/en/theframe.json +4 -4
- data/_data/photo-categories.json +442 -1
- data/_layouts/feature.html +3 -0
- data/_layouts/frame.html +161 -94
- data/assets/css/frame.css +33 -0
- data/assets/js/frame.js +8 -22
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b53479fb3c05e44f563004959f86f7191b965dc7760f388b08b6d053830cc5c1
|
|
4
|
+
data.tar.gz: 2169984f603e860fbbd8171c34e1e0ea64684e3ba3064416a9cf41873a3aec6b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 0e896783ef377f8258758dfc48afdc06165ff2df1ab3ff3696a05cd1287b74d83573a9deb754f77ef9ef1115ee67ed604adb5ed1f7302be09a4ccef58e0a6fd5
|
|
7
|
+
data.tar.gz: cd18f54d54cf772f3121408c8a6310031d73ab697a1ae702be9ac47278ea7569239adf5bac67dbe5a1ddac6280120ca089abf86a4d5196210c6af3c88c330167
|
|
@@ -29,10 +29,10 @@
|
|
|
29
29
|
],
|
|
30
30
|
"mainPreviewImage": "https://cdn.photofunia.com/effects/calendar/icons/medium.jpg",
|
|
31
31
|
"imageSamples": [
|
|
32
|
-
"https://cdn.photofunia.com/effects/calendar/examples/
|
|
33
|
-
"https://cdn.photofunia.com/effects/calendar/examples/
|
|
34
|
-
"https://cdn.photofunia.com/effects/calendar/examples/
|
|
35
|
-
"https://cdn.photofunia.com/effects/calendar/examples/
|
|
32
|
+
"https://cdn.photofunia.com/effects/calendar/examples/1v705mc_o.jpg",
|
|
33
|
+
"https://cdn.photofunia.com/effects/calendar/examples/1v705mc_o.jpg",
|
|
34
|
+
"https://cdn.photofunia.com/effects/calendar/examples/1v705mc_o.jpg",
|
|
35
|
+
"https://cdn.photofunia.com/effects/calendar/examples/1v705mc_o.jpg"
|
|
36
36
|
],
|
|
37
37
|
"image": {
|
|
38
38
|
"src": "/assets/images/gallary.png",
|
data/_data/photo-categories.json
CHANGED
|
@@ -1,6 +1,447 @@
|
|
|
1
1
|
[
|
|
2
2
|
{
|
|
3
|
-
"category": "
|
|
3
|
+
"category": "All effects",
|
|
4
|
+
"features": [
|
|
5
|
+
{
|
|
6
|
+
"name": "Calendar",
|
|
7
|
+
"link": "/calendar"
|
|
8
|
+
}
|
|
9
|
+
]
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
"category": "All effects",
|
|
13
|
+
"features": [
|
|
14
|
+
{
|
|
15
|
+
"name": "Calendar",
|
|
16
|
+
"link": "/calendar"
|
|
17
|
+
}
|
|
18
|
+
]
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"category": "All effects",
|
|
22
|
+
"features": [
|
|
23
|
+
{
|
|
24
|
+
"name": "Calendar",
|
|
25
|
+
"link": "/calendar"
|
|
26
|
+
}
|
|
27
|
+
]
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"category": "All effects",
|
|
31
|
+
"features": [
|
|
32
|
+
{
|
|
33
|
+
"name": "Calendar",
|
|
34
|
+
"link": "/calendar"
|
|
35
|
+
}
|
|
36
|
+
]
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"category": "All effects",
|
|
40
|
+
"features": [
|
|
41
|
+
{
|
|
42
|
+
"name": "Calendar",
|
|
43
|
+
"link": "/calendar"
|
|
44
|
+
}
|
|
45
|
+
]
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"category": "All effects",
|
|
49
|
+
"features": [
|
|
50
|
+
{
|
|
51
|
+
"name": "Calendar",
|
|
52
|
+
"link": "/calendar"
|
|
53
|
+
}
|
|
54
|
+
]
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"category": "All effects",
|
|
58
|
+
"features": [
|
|
59
|
+
{
|
|
60
|
+
"name": "Calendar",
|
|
61
|
+
"link": "/calendar"
|
|
62
|
+
}
|
|
63
|
+
]
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"category": "All effects",
|
|
67
|
+
"features": [
|
|
68
|
+
{
|
|
69
|
+
"name": "Calendar",
|
|
70
|
+
"link": "/calendar"
|
|
71
|
+
}
|
|
72
|
+
]
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"category": "All effects",
|
|
76
|
+
"features": [
|
|
77
|
+
{
|
|
78
|
+
"name": "Calendar",
|
|
79
|
+
"link": "/calendar"
|
|
80
|
+
}
|
|
81
|
+
]
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"category": "All effects",
|
|
85
|
+
"features": [
|
|
86
|
+
{
|
|
87
|
+
"name": "Calendar",
|
|
88
|
+
"link": "/calendar"
|
|
89
|
+
}
|
|
90
|
+
]
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"category": "All effects",
|
|
94
|
+
"features": [
|
|
95
|
+
{
|
|
96
|
+
"name": "Calendar",
|
|
97
|
+
"link": "/calendar"
|
|
98
|
+
}
|
|
99
|
+
]
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"category": "All effects",
|
|
103
|
+
"features": [
|
|
104
|
+
{
|
|
105
|
+
"name": "Calendar",
|
|
106
|
+
"link": "/calendar"
|
|
107
|
+
}
|
|
108
|
+
]
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"category": "All effects",
|
|
112
|
+
"features": [
|
|
113
|
+
{
|
|
114
|
+
"name": "Calendar",
|
|
115
|
+
"link": "/calendar"
|
|
116
|
+
}
|
|
117
|
+
]
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"category": "All effects",
|
|
121
|
+
"features": [
|
|
122
|
+
{
|
|
123
|
+
"name": "Calendar",
|
|
124
|
+
"link": "/calendar"
|
|
125
|
+
}
|
|
126
|
+
]
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
"category": "All effects",
|
|
130
|
+
"features": [
|
|
131
|
+
{
|
|
132
|
+
"name": "Calendar",
|
|
133
|
+
"link": "/calendar"
|
|
134
|
+
}
|
|
135
|
+
]
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"category": "All effects",
|
|
139
|
+
"features": [
|
|
140
|
+
{
|
|
141
|
+
"name": "Calendar",
|
|
142
|
+
"link": "/calendar"
|
|
143
|
+
}
|
|
144
|
+
]
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
"category": "All effects",
|
|
148
|
+
"features": [
|
|
149
|
+
{
|
|
150
|
+
"name": "Calendar",
|
|
151
|
+
"link": "/calendar"
|
|
152
|
+
}
|
|
153
|
+
]
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"category": "All effects",
|
|
157
|
+
"features": [
|
|
158
|
+
{
|
|
159
|
+
"name": "Calendar",
|
|
160
|
+
"link": "/calendar"
|
|
161
|
+
}
|
|
162
|
+
]
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
"category": "All effects",
|
|
166
|
+
"features": [
|
|
167
|
+
{
|
|
168
|
+
"name": "Calendar",
|
|
169
|
+
"link": "/calendar"
|
|
170
|
+
}
|
|
171
|
+
]
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
"category": "All effects",
|
|
175
|
+
"features": [
|
|
176
|
+
{
|
|
177
|
+
"name": "Calendar",
|
|
178
|
+
"link": "/calendar"
|
|
179
|
+
}
|
|
180
|
+
]
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
"category": "All effects",
|
|
184
|
+
"features": [
|
|
185
|
+
{
|
|
186
|
+
"name": "Calendar",
|
|
187
|
+
"link": "/calendar"
|
|
188
|
+
}
|
|
189
|
+
]
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
"category": "All effects",
|
|
193
|
+
"features": [
|
|
194
|
+
{
|
|
195
|
+
"name": "Calendar",
|
|
196
|
+
"link": "/calendar"
|
|
197
|
+
}
|
|
198
|
+
]
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
"category": "All effects",
|
|
202
|
+
"features": [
|
|
203
|
+
{
|
|
204
|
+
"name": "Calendar",
|
|
205
|
+
"link": "/calendar"
|
|
206
|
+
}
|
|
207
|
+
]
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
"category": "All effects",
|
|
211
|
+
"features": [
|
|
212
|
+
{
|
|
213
|
+
"name": "Calendar",
|
|
214
|
+
"link": "/calendar"
|
|
215
|
+
}
|
|
216
|
+
]
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
"category": "All effects",
|
|
220
|
+
"features": [
|
|
221
|
+
{
|
|
222
|
+
"name": "Calendar",
|
|
223
|
+
"link": "/calendar"
|
|
224
|
+
}
|
|
225
|
+
]
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
"category": "All effects",
|
|
229
|
+
"features": [
|
|
230
|
+
{
|
|
231
|
+
"name": "Calendar",
|
|
232
|
+
"link": "/calendar"
|
|
233
|
+
}
|
|
234
|
+
]
|
|
235
|
+
},
|
|
236
|
+
{
|
|
237
|
+
"category": "All effects",
|
|
238
|
+
"features": [
|
|
239
|
+
{
|
|
240
|
+
"name": "Calendar",
|
|
241
|
+
"link": "/calendar"
|
|
242
|
+
}
|
|
243
|
+
]
|
|
244
|
+
},
|
|
245
|
+
{
|
|
246
|
+
"category": "All effects",
|
|
247
|
+
"features": [
|
|
248
|
+
{
|
|
249
|
+
"name": "Calendar",
|
|
250
|
+
"link": "/calendar"
|
|
251
|
+
}
|
|
252
|
+
]
|
|
253
|
+
},
|
|
254
|
+
{
|
|
255
|
+
"category": "All effects",
|
|
256
|
+
"features": [
|
|
257
|
+
{
|
|
258
|
+
"name": "Calendar",
|
|
259
|
+
"link": "/calendar"
|
|
260
|
+
}
|
|
261
|
+
]
|
|
262
|
+
},
|
|
263
|
+
{
|
|
264
|
+
"category": "All effects",
|
|
265
|
+
"features": [
|
|
266
|
+
{
|
|
267
|
+
"name": "Calendar",
|
|
268
|
+
"link": "/calendar"
|
|
269
|
+
}
|
|
270
|
+
]
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
"category": "All effects",
|
|
274
|
+
"features": [
|
|
275
|
+
{
|
|
276
|
+
"name": "Calendar",
|
|
277
|
+
"link": "/calendar"
|
|
278
|
+
}
|
|
279
|
+
]
|
|
280
|
+
},
|
|
281
|
+
{
|
|
282
|
+
"category": "All effects",
|
|
283
|
+
"features": [
|
|
284
|
+
{
|
|
285
|
+
"name": "Calendar",
|
|
286
|
+
"link": "/calendar"
|
|
287
|
+
}
|
|
288
|
+
]
|
|
289
|
+
},
|
|
290
|
+
{
|
|
291
|
+
"category": "All effects",
|
|
292
|
+
"features": [
|
|
293
|
+
{
|
|
294
|
+
"name": "Calendar",
|
|
295
|
+
"link": "/calendar"
|
|
296
|
+
}
|
|
297
|
+
]
|
|
298
|
+
},
|
|
299
|
+
{
|
|
300
|
+
"category": "All effects",
|
|
301
|
+
"features": [
|
|
302
|
+
{
|
|
303
|
+
"name": "Calendar",
|
|
304
|
+
"link": "/calendar"
|
|
305
|
+
}
|
|
306
|
+
]
|
|
307
|
+
},
|
|
308
|
+
{
|
|
309
|
+
"category": "All effects",
|
|
310
|
+
"features": [
|
|
311
|
+
{
|
|
312
|
+
"name": "Calendar",
|
|
313
|
+
"link": "/calendar"
|
|
314
|
+
}
|
|
315
|
+
]
|
|
316
|
+
},
|
|
317
|
+
{
|
|
318
|
+
"category": "All effects",
|
|
319
|
+
"features": [
|
|
320
|
+
{
|
|
321
|
+
"name": "Calendar",
|
|
322
|
+
"link": "/calendar"
|
|
323
|
+
}
|
|
324
|
+
]
|
|
325
|
+
},
|
|
326
|
+
{
|
|
327
|
+
"category": "All effects",
|
|
328
|
+
"features": [
|
|
329
|
+
{
|
|
330
|
+
"name": "Calendar",
|
|
331
|
+
"link": "/calendar"
|
|
332
|
+
}
|
|
333
|
+
]
|
|
334
|
+
},
|
|
335
|
+
{
|
|
336
|
+
"category": "All effects",
|
|
337
|
+
"features": [
|
|
338
|
+
{
|
|
339
|
+
"name": "Calendar",
|
|
340
|
+
"link": "/calendar"
|
|
341
|
+
}
|
|
342
|
+
]
|
|
343
|
+
},
|
|
344
|
+
{
|
|
345
|
+
"category": "All effects",
|
|
346
|
+
"features": [
|
|
347
|
+
{
|
|
348
|
+
"name": "Calendar",
|
|
349
|
+
"link": "/calendar"
|
|
350
|
+
}
|
|
351
|
+
]
|
|
352
|
+
},
|
|
353
|
+
{
|
|
354
|
+
"category": "All effects",
|
|
355
|
+
"features": [
|
|
356
|
+
{
|
|
357
|
+
"name": "Calendar",
|
|
358
|
+
"link": "/calendar"
|
|
359
|
+
}
|
|
360
|
+
]
|
|
361
|
+
},
|
|
362
|
+
{
|
|
363
|
+
"category": "All effects",
|
|
364
|
+
"features": [
|
|
365
|
+
{
|
|
366
|
+
"name": "Calendar",
|
|
367
|
+
"link": "/calendar"
|
|
368
|
+
}
|
|
369
|
+
]
|
|
370
|
+
},
|
|
371
|
+
{
|
|
372
|
+
"category": "All effects",
|
|
373
|
+
"features": [
|
|
374
|
+
{
|
|
375
|
+
"name": "Calendar",
|
|
376
|
+
"link": "/calendar"
|
|
377
|
+
}
|
|
378
|
+
]
|
|
379
|
+
},
|
|
380
|
+
{
|
|
381
|
+
"category": "All effects",
|
|
382
|
+
"features": [
|
|
383
|
+
{
|
|
384
|
+
"name": "Calendar",
|
|
385
|
+
"link": "/calendar"
|
|
386
|
+
}
|
|
387
|
+
]
|
|
388
|
+
},
|
|
389
|
+
{
|
|
390
|
+
"category": "All effects",
|
|
391
|
+
"features": [
|
|
392
|
+
{
|
|
393
|
+
"name": "Calendar",
|
|
394
|
+
"link": "/calendar"
|
|
395
|
+
}
|
|
396
|
+
]
|
|
397
|
+
},
|
|
398
|
+
{
|
|
399
|
+
"category": "All effects",
|
|
400
|
+
"features": [
|
|
401
|
+
{
|
|
402
|
+
"name": "Calendar",
|
|
403
|
+
"link": "/calendar"
|
|
404
|
+
}
|
|
405
|
+
]
|
|
406
|
+
},
|
|
407
|
+
{
|
|
408
|
+
"category": "All effects",
|
|
409
|
+
"features": [
|
|
410
|
+
{
|
|
411
|
+
"name": "Calendar",
|
|
412
|
+
"link": "/calendar"
|
|
413
|
+
}
|
|
414
|
+
]
|
|
415
|
+
},
|
|
416
|
+
{
|
|
417
|
+
"category": "All effects",
|
|
418
|
+
"features": [
|
|
419
|
+
{
|
|
420
|
+
"name": "Calendar",
|
|
421
|
+
"link": "/calendar"
|
|
422
|
+
}
|
|
423
|
+
]
|
|
424
|
+
},
|
|
425
|
+
{
|
|
426
|
+
"category": "All effects",
|
|
427
|
+
"features": [
|
|
428
|
+
{
|
|
429
|
+
"name": "Calendar",
|
|
430
|
+
"link": "/calendar"
|
|
431
|
+
}
|
|
432
|
+
]
|
|
433
|
+
},
|
|
434
|
+
{
|
|
435
|
+
"category": "All effects",
|
|
436
|
+
"features": [
|
|
437
|
+
{
|
|
438
|
+
"name": "Calendar",
|
|
439
|
+
"link": "/calendar"
|
|
440
|
+
}
|
|
441
|
+
]
|
|
442
|
+
},
|
|
443
|
+
{
|
|
444
|
+
"category": "All effects",
|
|
4
445
|
"features": [
|
|
5
446
|
{
|
|
6
447
|
"name": "Calendar",
|
data/_layouts/feature.html
CHANGED
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
</div>
|
|
28
28
|
</div>
|
|
29
29
|
{%- endif -%}
|
|
30
|
+
{%- if page.layout != "frame" -%}
|
|
30
31
|
<div class="flex-container pb-3">
|
|
31
32
|
<div class="flex-class py-4 mt-4 mt-md-0 ">
|
|
32
33
|
<div class="d-flex justify-content-center align-items-center"><span class="fHhdVc">
|
|
@@ -66,6 +67,8 @@
|
|
|
66
67
|
</h2>
|
|
67
68
|
</div>
|
|
68
69
|
</div>
|
|
70
|
+
{%- endif -%}
|
|
71
|
+
|
|
69
72
|
{%- if site.noFeatureBox == true -%}
|
|
70
73
|
<div class="feature-content-box" id="theme-content-box">
|
|
71
74
|
{{content}}
|
data/_layouts/frame.html
CHANGED
|
@@ -3,123 +3,190 @@ layout: feature
|
|
|
3
3
|
---
|
|
4
4
|
|
|
5
5
|
{%- assign fileData = site.data[page.folderName][page.lang][page.fileName] -%}
|
|
6
|
-
<div class="container">
|
|
7
|
-
<div class="
|
|
8
|
-
<div class="
|
|
9
|
-
<div class="
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
6
|
+
<div class="container mt-5">
|
|
7
|
+
<div class="col-md-11 mx-auto">
|
|
8
|
+
<div class="row">
|
|
9
|
+
<div class="col-md-3">
|
|
10
|
+
<div class="categories-section">
|
|
11
|
+
</div>
|
|
12
|
+
<div class="categories-list">
|
|
13
|
+
<div class="accordion" id="accordionExample">
|
|
14
|
+
{%- for item in site.data.photo-categories -%}
|
|
15
|
+
<div class="card">
|
|
16
|
+
<div class="card-header" id="heading-{{forloop.index}}">
|
|
17
|
+
<h3 class="mb-0">
|
|
18
|
+
<button class="btn btn-block text-left p-0" type="button" data-toggle="collapse"
|
|
19
|
+
data-target="#collapse-{{forloop.index}}" aria-expanded="true"
|
|
20
|
+
aria-controls="collapse-{{forloop.index}}">
|
|
21
|
+
{{item.category}}
|
|
22
|
+
</button>
|
|
23
|
+
</h3>
|
|
24
|
+
</div>
|
|
25
25
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
26
|
+
<div id="collapse-{{forloop.index}}" class="collapse"
|
|
27
|
+
aria-labelledby="heading-{{forloop.index}}" data-parent="#accordionExample">
|
|
28
|
+
<div class="card-body">
|
|
29
|
+
{%- for i in item.features -%}
|
|
30
|
+
<a href="{{i.link}}">{{i.name}}</a>
|
|
31
|
+
{%- endfor -%}
|
|
32
|
+
</div>
|
|
32
33
|
</div>
|
|
33
34
|
</div>
|
|
35
|
+
{%- endfor -%}
|
|
34
36
|
</div>
|
|
35
|
-
{%- endfor -%}
|
|
36
37
|
</div>
|
|
37
|
-
</div>
|
|
38
38
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
39
|
+
</div>
|
|
40
|
+
<div class="col-md-9">
|
|
41
|
+
<div class="row">
|
|
42
|
+
<div class="col-md-8">
|
|
43
|
+
<div class="flex-container pb-3">
|
|
44
|
+
<div class="flex-class py-4 mt-4 mt-md-0 ">
|
|
45
|
+
<div class="d-flex justify-content-center align-items-center">
|
|
46
|
+
{%- assign frameh1 = fileData.H1 | replace: "$variable", page.value -%}
|
|
47
|
+
<h1 class="frame-h1">{%- for word in frameh1-%}
|
|
48
|
+
{%- if forloop.first == true -%}
|
|
49
|
+
{{word | capitalize }}
|
|
50
|
+
{%- else -%}
|
|
51
|
+
{{word}}
|
|
52
|
+
{%- endif -%}
|
|
53
|
+
{%- endfor -%}</h1>
|
|
54
|
+
</div>
|
|
55
|
+
{%- assign frameh2 = fileData.H2 | replace: "$variable", page.value -%}
|
|
56
|
+
<h2 class="frame-h2">
|
|
57
|
+
{%- for word in frameh2 -%}
|
|
58
|
+
{%- if forloop.first == true -%}
|
|
59
|
+
{{word | capitalize }}
|
|
60
|
+
{%- else -%}
|
|
61
|
+
{{word}}
|
|
62
|
+
{%- endif -%}
|
|
63
|
+
{%- endfor -%}
|
|
64
|
+
</h2>
|
|
65
|
+
</div>
|
|
60
66
|
</div>
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<
|
|
67
|
+
<div class="preview-section">
|
|
68
|
+
<img src="{{fileData.mainPreviewImage}}" alt="">
|
|
69
|
+
</div>
|
|
70
|
+
<h3>Examples</h3>
|
|
71
|
+
<div class="image-samples" onclick="openExamplesModal()">
|
|
72
|
+
{%- for item in fileData.imageSamples -%}
|
|
73
|
+
<img src="{{item}}" alt="sample">
|
|
74
|
+
{%- endfor -%}
|
|
75
|
+
</div>
|
|
76
|
+
|
|
66
77
|
</div>
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
78
|
+
<div class="col-md-4">
|
|
79
|
+
<form id="effect-form" data-feature-name="{{page.featureName}}">
|
|
80
|
+
{%- for item in fileData.elements -%}
|
|
81
|
+
{%- if item.type == "image" -%}
|
|
82
|
+
<label for="{{item.id}}">{{item.label}}</label>
|
|
83
|
+
<button type="button" id="{{item.id}}" data-index="{{forloop.index}}"
|
|
84
|
+
onclick="clickInput(this)">Choose
|
|
85
|
+
image</button>
|
|
86
|
+
<input class="d-none" id="file-{{forloop.index}}" type="file" onchange="fileOnChange(this)"
|
|
87
|
+
data-index="{{forloop.index}}" accept=".webp,.png,.jpg,.jpeg" required />
|
|
88
|
+
{%- endif -%}
|
|
89
|
+
{%- if item.type == "text" -%}
|
|
90
|
+
<label for="{{item.id}}">{{item.label}}</label>
|
|
91
|
+
<input type="text" id="{{item.id}}">
|
|
92
|
+
{%- endif -%}
|
|
93
|
+
{%- endfor -%}
|
|
94
|
+
<div>
|
|
95
|
+
<button type="submit">Go</button>
|
|
96
|
+
</div>
|
|
97
|
+
</form>
|
|
72
98
|
</div>
|
|
73
99
|
</div>
|
|
74
|
-
</div>
|
|
75
100
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
101
|
+
<div class="crop-image-modal-container">
|
|
102
|
+
<div class="row w-100">
|
|
103
|
+
<div class="crop-image-modal col-lg-6 col-md-8 mx-auto">
|
|
104
|
+
<div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
|
|
105
|
+
<div>Select an area you would like to use</div>
|
|
106
|
+
<div>
|
|
107
|
+
<button onclick="closeModal()">
|
|
108
|
+
<i class="fas fa-times"></i>
|
|
109
|
+
</button>
|
|
110
|
+
</div>
|
|
85
111
|
</div>
|
|
86
|
-
|
|
87
|
-
<div class="crop-image-modal-body">
|
|
112
|
+
<div class="crop-image-modal-body">
|
|
88
113
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
114
|
+
</div>
|
|
115
|
+
<div class="crop-btn-section">
|
|
116
|
+
<button id="crop" class="mx-auto my-3"
|
|
117
|
+
style="background-color: {{fileData.color}};">crop</button>
|
|
118
|
+
</div>
|
|
93
119
|
</div>
|
|
94
120
|
</div>
|
|
95
121
|
</div>
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
122
|
+
<div class="example-images-modal-container">
|
|
123
|
+
<div class="row w-100">
|
|
124
|
+
<div class="example-images-modal col-lg-6 col-md-8 mx-auto">
|
|
125
|
+
<div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
|
|
126
|
+
<div>Examples</div>
|
|
127
|
+
<div>
|
|
128
|
+
<button onclick="closeExamplesModal()">
|
|
129
|
+
<i class="fas fa-times"></i>
|
|
130
|
+
</button>
|
|
131
|
+
</div>
|
|
104
132
|
</div>
|
|
105
|
-
<div
|
|
133
|
+
<div class="example-images-modal-body">
|
|
134
|
+
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
|
|
135
|
+
<div class="carousel-inner w-75 mx-auto">
|
|
136
|
+
{%- for item in fileData.imageSamples -%}
|
|
137
|
+
{%- if forloop.index == 1 -%}
|
|
138
|
+
<div class="carousel-item active">
|
|
139
|
+
<img src="{{item}}" class="d-block w-100" alt="{{item}}">
|
|
140
|
+
</div>
|
|
141
|
+
{%- endif -%}
|
|
142
|
+
<div class="carousel-item">
|
|
143
|
+
<img src="{{item}}" class="d-block w-100" alt="{{item}}">
|
|
144
|
+
</div>
|
|
145
|
+
{%- endfor -%}
|
|
146
|
+
</div>
|
|
147
|
+
<button class="carousel-control-prev" type="button"
|
|
148
|
+
data-target="#carouselExampleFade" data-slide="prev">
|
|
149
|
+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
150
|
+
<span class="sr-only">Previous</span>
|
|
151
|
+
</button>
|
|
152
|
+
<button class="carousel-control-next" type="button"
|
|
153
|
+
data-target="#carouselExampleFade" data-slide="next">
|
|
154
|
+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
155
|
+
<span class="sr-only">Next</span>
|
|
156
|
+
</button>
|
|
157
|
+
</div>
|
|
106
158
|
</div>
|
|
159
|
+
|
|
107
160
|
</div>
|
|
108
161
|
</div>
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
162
|
+
</div>
|
|
163
|
+
<div id="workspace" data-name="together_forever" style="display: none;">
|
|
164
|
+
<div class="row">
|
|
165
|
+
<div class="col-md-8 mx-auto">
|
|
166
|
+
<div class="select-img-panel">
|
|
167
|
+
<div id="saving-data" style="display: none;">
|
|
168
|
+
<img loading="lazy" src="/img/save.gif" alt="saving"> <span class="ml-2">Saving your
|
|
169
|
+
images...</span>
|
|
170
|
+
</div>
|
|
171
|
+
<div id="canvas-panel">
|
|
172
|
+
</div>
|
|
120
173
|
</div>
|
|
121
174
|
</div>
|
|
175
|
+
<div class="col-md-4">
|
|
176
|
+
<div class="options-panel">
|
|
177
|
+
<div class="title">
|
|
178
|
+
|
|
179
|
+
</div>
|
|
180
|
+
<div class="download-wrapper">
|
|
181
|
+
<button id="download-button" style="background-color: {{fileData.color}};"><svg
|
|
182
|
+
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
183
|
+
<path
|
|
184
|
+
d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM382.6 302.6l-103.1 103.1C270.7 414.6 260.9 416 256 416c-4.881 0-14.65-1.391-22.65-9.398L129.4 302.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 306.8V128c0-17.69 14.33-32 32-32s32 14.31 32 32v178.8l49.38-49.38c12.5-12.5 32.75-12.5 45.25 0S395.1 290.1 382.6 302.6z" />
|
|
185
|
+
</svg>Download</button>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
122
188
|
|
|
189
|
+
</div>
|
|
123
190
|
</div>
|
|
124
191
|
</div>
|
|
125
192
|
</div>
|
data/assets/css/frame.css
CHANGED
|
@@ -370,6 +370,7 @@ input {
|
|
|
370
370
|
color: #0f0c0c;
|
|
371
371
|
border: 1px solid #ccc;
|
|
372
372
|
}
|
|
373
|
+
.example-images-modal-container,
|
|
373
374
|
.crop-image-modal-container {
|
|
374
375
|
position: fixed;
|
|
375
376
|
display: none;
|
|
@@ -382,6 +383,7 @@ input {
|
|
|
382
383
|
z-index: 999999;
|
|
383
384
|
padding: 0px 20px;
|
|
384
385
|
}
|
|
386
|
+
.example-images-modal,
|
|
385
387
|
.crop-image-modal {
|
|
386
388
|
height: fit-content;
|
|
387
389
|
background-color: #fff;
|
|
@@ -391,6 +393,7 @@ input {
|
|
|
391
393
|
padding: 0;
|
|
392
394
|
overflow-y: auto;
|
|
393
395
|
}
|
|
396
|
+
.example-images-modal-header,
|
|
394
397
|
.crop-image-modal-header {
|
|
395
398
|
border-top-right-radius: 5px;
|
|
396
399
|
border-top-left-radius: 5px;
|
|
@@ -401,6 +404,7 @@ input {
|
|
|
401
404
|
align-items: center;
|
|
402
405
|
padding: 10px 20px;
|
|
403
406
|
}
|
|
407
|
+
.example-images-modal-header div,
|
|
404
408
|
.crop-image-modal-header div {
|
|
405
409
|
height: 100%;
|
|
406
410
|
display: flex;
|
|
@@ -408,18 +412,22 @@ input {
|
|
|
408
412
|
font-size: 20px;
|
|
409
413
|
color: #fff;
|
|
410
414
|
}
|
|
415
|
+
.example-images-modal-body,
|
|
411
416
|
.crop-image-modal-body {
|
|
412
417
|
width: 450px;
|
|
413
418
|
margin: 10px auto;
|
|
414
419
|
}
|
|
420
|
+
.example-images-modal-header button,
|
|
415
421
|
.crop-image-modal-header button {
|
|
416
422
|
border: none;
|
|
417
423
|
background-color: transparent;
|
|
418
424
|
}
|
|
425
|
+
.example-images-modal-header button i,
|
|
419
426
|
.crop-image-modal-header button i {
|
|
420
427
|
color: #fff;
|
|
421
428
|
font-size: 20px;
|
|
422
429
|
}
|
|
430
|
+
.example-images-modal-body,
|
|
423
431
|
.crop-image-modal-body {
|
|
424
432
|
border-top-right-radius: 5px;
|
|
425
433
|
border-top-left-radius: 5px;
|
|
@@ -429,3 +437,28 @@ input {
|
|
|
429
437
|
padding: 7px 14px;
|
|
430
438
|
color: #fff;
|
|
431
439
|
}
|
|
440
|
+
.carousel-control-next,
|
|
441
|
+
.carousel-control-prev {
|
|
442
|
+
border: none;
|
|
443
|
+
background: none;
|
|
444
|
+
height: 40px;
|
|
445
|
+
background: #ff5554;
|
|
446
|
+
top: 50%;
|
|
447
|
+
}
|
|
448
|
+
.accordion > .card > .card-header {
|
|
449
|
+
background: none;
|
|
450
|
+
border: none;
|
|
451
|
+
height: 34px;
|
|
452
|
+
padding: 0;
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
.accordion > .card {
|
|
456
|
+
border: none;
|
|
457
|
+
border-bottom: 1px solid #f2f2f2 !important;
|
|
458
|
+
display: block;
|
|
459
|
+
padding: 7px 9px;
|
|
460
|
+
color: #444;
|
|
461
|
+
text-decoration: none;
|
|
462
|
+
font-size: 0.95em;
|
|
463
|
+
border-radius: 1px;
|
|
464
|
+
}
|
data/assets/js/frame.js
CHANGED
|
@@ -4,6 +4,7 @@ const lang = getScript.dataset.lang
|
|
|
4
4
|
const inputBox = document.querySelector('#Inputbox')
|
|
5
5
|
const fileDropBox = document.querySelector('.custom-box')
|
|
6
6
|
const cropModal = document.querySelector('.crop-image-modal-container')
|
|
7
|
+
const exampleModal = document.querySelector('.example-images-modal-container')
|
|
7
8
|
const workspace = document.getElementById('workspace')
|
|
8
9
|
const canvasPanel = document.getElementById('canvas-panel')
|
|
9
10
|
const download = document.querySelector('#download-button')
|
|
@@ -48,6 +49,9 @@ const fileOnChange = (e) => {
|
|
|
48
49
|
const closeModal = () => {
|
|
49
50
|
cropModal.style.display = 'none'
|
|
50
51
|
}
|
|
52
|
+
const closeExamplesModal = () => {
|
|
53
|
+
exampleModal.style.display = 'none'
|
|
54
|
+
}
|
|
51
55
|
form.addEventListener('submit', (e) => {
|
|
52
56
|
e.preventDefault()
|
|
53
57
|
drawImage()
|
|
@@ -86,27 +90,6 @@ const drawInputImage = (ctx, item, indexValue) => {
|
|
|
86
90
|
})
|
|
87
91
|
}
|
|
88
92
|
|
|
89
|
-
const drawRotated = (degrees, ctx, canvas, image, item) => {
|
|
90
|
-
// console.log(image)
|
|
91
|
-
// ctx.clearRect(0, 0, canvas.width, canvas.height)
|
|
92
|
-
|
|
93
|
-
// save the unrotatedctx of the canvas so we can restore it later
|
|
94
|
-
// the alternative is to untranslate & unrotate after drawing
|
|
95
|
-
ctx.save()
|
|
96
|
-
|
|
97
|
-
// move to the center of the canvas
|
|
98
|
-
// ctx.translate(item.x, item.y)
|
|
99
|
-
|
|
100
|
-
// rotate the canvas to the specified degrees
|
|
101
|
-
ctx.rotate((50 * Math.PI) / 180)
|
|
102
|
-
|
|
103
|
-
// draw the image
|
|
104
|
-
// since thectx is rotated, the image will be rotated also
|
|
105
|
-
// ctx.drawImage(image, -image.width / 2, -image.width / 2)
|
|
106
|
-
|
|
107
|
-
// we’re done with the rotating so restore the unrotatedctx
|
|
108
|
-
ctx.restore()
|
|
109
|
-
}
|
|
110
93
|
const drawImage = () => {
|
|
111
94
|
let img = new Image()
|
|
112
95
|
img.src = featureData.effectImagePath
|
|
@@ -127,7 +110,7 @@ const drawImage = () => {
|
|
|
127
110
|
})
|
|
128
111
|
).then(() => {
|
|
129
112
|
ctx.filter = 'none'
|
|
130
|
-
|
|
113
|
+
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
|
|
131
114
|
featureData.elements.map((item, indexValue) => {
|
|
132
115
|
if (item.type === 'text') {
|
|
133
116
|
let myFont = new FontFace(item.font, `url(${item.fontPath})`)
|
|
@@ -210,6 +193,9 @@ document.querySelector('#crop').addEventListener('click', () => {
|
|
|
210
193
|
files[index - 1] = cropperImg
|
|
211
194
|
cropModal.style.display = 'none'
|
|
212
195
|
})
|
|
196
|
+
const openExamplesModal = () => {
|
|
197
|
+
exampleModal.style.display = 'flex'
|
|
198
|
+
}
|
|
213
199
|
let inputFile = ''
|
|
214
200
|
const handleFile = (file) => {
|
|
215
201
|
cropModal.style.display = 'flex'
|