appscms-tools-theme 2.2.4 → 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 -18
- 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 +25 -25
- data/assets/js/photo-effects.json +6 -38
- metadata +2 -2
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",
|
|
@@ -46,20 +46,6 @@
|
|
|
46
46
|
{
|
|
47
47
|
"type": "image",
|
|
48
48
|
"label": "1."
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
"label": "label",
|
|
52
|
-
"type": "text",
|
|
53
|
-
"id": "text-1"
|
|
54
|
-
},
|
|
55
|
-
{
|
|
56
|
-
"type": "image",
|
|
57
|
-
"label": "1."
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
"label": "label",
|
|
61
|
-
"type": "text",
|
|
62
|
-
"id": "text-2"
|
|
63
49
|
}
|
|
64
50
|
]
|
|
65
51
|
}
|
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,20 +49,28 @@ 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()
|
|
54
58
|
})
|
|
55
|
-
const drawInputImage = (ctx, item, indexValue
|
|
59
|
+
const drawInputImage = (ctx, item, indexValue) => {
|
|
56
60
|
return new Promise((resolve, reject) => {
|
|
57
61
|
let image = document.createElement('img')
|
|
58
62
|
image.src = files[indexValue]
|
|
59
63
|
image.onload = () => {
|
|
64
|
+
ctx.save()
|
|
60
65
|
image.width = Number(item.width)
|
|
61
66
|
image.height = Number(item.height)
|
|
62
67
|
if (item.filter) {
|
|
63
68
|
ctx.filter = item.filter
|
|
64
69
|
}
|
|
70
|
+
if (item.rotate) {
|
|
71
|
+
ctx.rotate((item.rotate * Math.PI) / 180)
|
|
72
|
+
}
|
|
73
|
+
|
|
65
74
|
ctx.drawImage(
|
|
66
75
|
image,
|
|
67
76
|
Number(item.x),
|
|
@@ -69,35 +78,18 @@ const drawInputImage = (ctx, item, indexValue, canvas, image) => {
|
|
|
69
78
|
image.width,
|
|
70
79
|
image.height
|
|
71
80
|
)
|
|
72
|
-
if (item.
|
|
73
|
-
|
|
81
|
+
if (item.translate) {
|
|
82
|
+
ctx.translate(item.translate.x, item.translate.y)
|
|
83
|
+
}
|
|
84
|
+
if (item.skew) {
|
|
85
|
+
ctx.setTransform(1, item.skew.x, item.skew.y, 1, 0, 0)
|
|
74
86
|
}
|
|
87
|
+
ctx.restore()
|
|
75
88
|
resolve()
|
|
76
89
|
}
|
|
77
90
|
})
|
|
78
91
|
}
|
|
79
92
|
|
|
80
|
-
const drawRotated = (degrees, ctx, canvas, image, item) => {
|
|
81
|
-
console.log(image)
|
|
82
|
-
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
|
83
|
-
|
|
84
|
-
// save the unrotatedctx of the canvas so we can restore it later
|
|
85
|
-
// the alternative is to untranslate & unrotate after drawing
|
|
86
|
-
ctx.save()
|
|
87
|
-
|
|
88
|
-
// move to the center of the canvas
|
|
89
|
-
ctx.translate(item.x, item.y)
|
|
90
|
-
|
|
91
|
-
// rotate the canvas to the specified degrees
|
|
92
|
-
ctx.rotate((degrees * Math.PI) / 180)
|
|
93
|
-
|
|
94
|
-
// draw the image
|
|
95
|
-
// since thectx is rotated, the image will be rotated also
|
|
96
|
-
ctx.drawImage(image, -image.width / 2, -image.width / 2)
|
|
97
|
-
|
|
98
|
-
// we’re done with the rotating so restore the unrotatedctx
|
|
99
|
-
ctx.restore()
|
|
100
|
-
}
|
|
101
93
|
const drawImage = () => {
|
|
102
94
|
let img = new Image()
|
|
103
95
|
img.src = featureData.effectImagePath
|
|
@@ -123,11 +115,13 @@ const drawImage = () => {
|
|
|
123
115
|
if (item.type === 'text') {
|
|
124
116
|
let myFont = new FontFace(item.font, `url(${item.fontPath})`)
|
|
125
117
|
myFont.load().then(function (font) {
|
|
118
|
+
ctx.save()
|
|
126
119
|
document.fonts.add(font)
|
|
127
120
|
ctx.font = `${item.fontSize}px ${item.font}`
|
|
128
121
|
if (item.shadowColor) {
|
|
129
122
|
ctx.shadowColor = `${item.shadowColor}`
|
|
130
123
|
}
|
|
124
|
+
|
|
131
125
|
if (item.shadowOffsetX) {
|
|
132
126
|
ctx.shadowOffsetX = 3
|
|
133
127
|
}
|
|
@@ -137,7 +131,9 @@ const drawImage = () => {
|
|
|
137
131
|
if (item.shadowBlur) {
|
|
138
132
|
ctx.shadowBlur = 2
|
|
139
133
|
}
|
|
140
|
-
|
|
134
|
+
if (item.rotate) {
|
|
135
|
+
ctx.rotate((item.rotate * Math.PI) / 180)
|
|
136
|
+
}
|
|
141
137
|
ctx.textAlign = 'center'
|
|
142
138
|
ctx.fillStyle = `${item.color}`
|
|
143
139
|
ctx.fillText(
|
|
@@ -145,6 +141,7 @@ const drawImage = () => {
|
|
|
145
141
|
item.x,
|
|
146
142
|
item.y
|
|
147
143
|
)
|
|
144
|
+
ctx.restore()
|
|
148
145
|
})
|
|
149
146
|
}
|
|
150
147
|
if (item.type === 'rectangle') {
|
|
@@ -196,6 +193,9 @@ document.querySelector('#crop').addEventListener('click', () => {
|
|
|
196
193
|
files[index - 1] = cropperImg
|
|
197
194
|
cropModal.style.display = 'none'
|
|
198
195
|
})
|
|
196
|
+
const openExamplesModal = () => {
|
|
197
|
+
exampleModal.style.display = 'flex'
|
|
198
|
+
}
|
|
199
199
|
let inputFile = ''
|
|
200
200
|
const handleFile = (file) => {
|
|
201
201
|
cropModal.style.display = 'flex'
|
|
@@ -9,45 +9,13 @@
|
|
|
9
9
|
"perspective": "",
|
|
10
10
|
"height": 300,
|
|
11
11
|
"width": 300,
|
|
12
|
-
"
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
{
|
|
17
|
-
"label": "",
|
|
18
|
-
"id": "text-1",
|
|
19
|
-
"type": "text",
|
|
20
|
-
"x": "100",
|
|
21
|
-
"y": "100",
|
|
22
|
-
"color": "red",
|
|
23
|
-
"rotate": 40,
|
|
24
|
-
"fontFamily": "Calligraphy",
|
|
25
|
-
"fontPath": "/assets/fonts/Calligraphy.ttf",
|
|
26
|
-
"fontWeight": "bold",
|
|
27
|
-
"fontSize": 50
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
"type": "image",
|
|
31
|
-
"imagePath": "",
|
|
32
|
-
"filter": "grayscale(100%)",
|
|
33
|
-
"perspective": "",
|
|
34
|
-
"height": 300,
|
|
35
|
-
"width": 300,
|
|
12
|
+
"translate": {
|
|
13
|
+
"x": -5,
|
|
14
|
+
"y": -10
|
|
15
|
+
},
|
|
36
16
|
"x": 100,
|
|
37
|
-
"y":
|
|
38
|
-
"id": "file-
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
"label": "",
|
|
42
|
-
"id": "text-2",
|
|
43
|
-
"type": "text",
|
|
44
|
-
"x": "200",
|
|
45
|
-
"y": "200",
|
|
46
|
-
"color": "red",
|
|
47
|
-
"fontFamily": "Calligraphy",
|
|
48
|
-
"fontPath": "/assets/fonts/Calligraphy.ttf",
|
|
49
|
-
"fontWeight": "bold",
|
|
50
|
-
"fontSize": 50
|
|
17
|
+
"y": 100,
|
|
18
|
+
"id": "file-1"
|
|
51
19
|
}
|
|
52
20
|
]
|
|
53
21
|
}
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: appscms-tools-theme
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 2.2.
|
|
4
|
+
version: 2.2.7
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- vivek-appscms
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2022-08-
|
|
11
|
+
date: 2022-08-25 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|