appscms-tools-theme 2.2.5 → 2.2.8

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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 453710446bc4e201a7b5e2df1de53122a01e9fa2aaa19050a271ec2169759646
4
- data.tar.gz: dba6831293fca990e81216e8c653ff34e288b780dc280c8cf863803666134357
3
+ metadata.gz: 3e4be658111009450112257e2ea1e76a2e322292b16d675922e03620e3af6137
4
+ data.tar.gz: '092b8e9e9c34a9dc84ae4ee83940be478f2ecd652ab23011e34004d3dea3e490'
5
5
  SHA512:
6
- metadata.gz: '01628b3a082ffaf783bb7038fa49f973510388143d427ff730656a637cd3ae9c264c884eb260ab61ac17cdd91c40281311e1228327b20b292b7e38069feed044'
7
- data.tar.gz: da1d00b2138166f94355700089c046889a6d25da6ad67f8b7b2d2425d808f1618fa25952747831692ddd49d47ec70793ef2c596663e7e0f496a6b35960496aea
6
+ metadata.gz: 3e3186c9f5ee05df8b2342fc569f84581724a7bbdeba9236284504e4ed0ba16e95a6c30edf57bb64474c3fab471bfe977ada83db7d0482dce576f4cc2fe5f584
7
+ data.tar.gz: 5605b4ef9808198fe1614a8084a6671a833160df7ded24d99dc95d4e06bc1f2be5197bb5b5550cecb6179d4b432262b77c24f15c9ad63d6b3523d2f16538d669
@@ -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/1hjpco5_r.jpg",
33
- "https://cdn.photofunia.com/effects/calendar/examples/1gzzwn7_r.jpg",
34
- "https://cdn.photofunia.com/effects/calendar/examples/eny6h4_r.jpg",
35
- "https://cdn.photofunia.com/effects/calendar/examples/1v705mc_r.jpg"
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
  }
@@ -1,6 +1,447 @@
1
1
  [
2
2
  {
3
- "category": "Christmas",
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",
@@ -26,7 +26,11 @@ replace: "$tool", page.tool }}
26
26
  {%- endfor -%}
27
27
  {%- endif -%}
28
28
  <script src="//cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js" crossorigin="anonymous"></script>
29
- <script>WebFont.load({ google: { families: ['Source Sans Pro:200,300,400,500,600,700,800&display=swap'] } })</script>
29
+ {%- assign font = "Source Sans Pro" -%}
30
+ {%- if page.layout == "frame" -%}
31
+ {%- assign font = "PT Sans" -%}
32
+ {%- endif -%}
33
+ <script>WebFont.load({ google: { families: ['{{font}}:200,300,400,500,600,700,800&display=swap'] } })</script>
30
34
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
31
35
  integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
32
36
  crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -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="row">
8
- <div class="col-md-3">
9
- <div class="categories-section">
10
- <h3>Categories</h3>
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-link btn-block text-left" 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>
6
+ <div class="container mt-4">
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
- <div id="collapse-{{forloop.index}}" class="collapse show"
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 -%}
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
- </div>
40
- <div class="col-md-9">
41
- <div class="row">
42
- <div class="col-md-8">
43
- <form id="effect-form" data-feature-name="{{page.featureName}}">
44
- {%- for item in fileData.elements -%}
45
- {%- if item.type == "image" -%}
46
- <label for="{{item.id}}">{{item.label}}</label>
47
- <button type="button" id="{{item.id}}" data-index="{{forloop.index}}"
48
- onclick="clickInput(this)">Choose
49
- image</button>
50
- <input class="d-none" id="file-{{forloop.index}}" type="file" onchange="fileOnChange(this)"
51
- data-index="{{forloop.index}}" accept=".webp,.png,.jpg,.jpeg" required />
52
- {%- endif -%}
53
- {%- if item.type == "text" -%}
54
- <label for="{{item.id}}">{{item.label}}</label>
55
- <input type="text" id="{{item.id}}">
56
- {%- endif -%}
57
- {%- endfor -%}
58
- <div>
59
- <button type="submit">Go</button>
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
- </form>
62
- </div>
63
- <div class="col-md-4">
64
- <div class="preview-section">
65
- <img src="{{fileData.mainPreviewImage}}" alt="">
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
- <h3>Examples</h3>
68
- <div class="image-samples">
69
- {%- for item in fileData.imageSamples -%}
70
- <img src="{{item}}" alt="sample">
71
- {%- endfor -%}
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
- <div class="crop-image-modal-container">
77
- <div class="row w-100">
78
- <div class="crop-image-modal col-lg-6 col-md-8 mx-auto">
79
- <div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
80
- <div>Select an area you would like to use</div>
81
- <div>
82
- <button onclick="closeModal()">
83
- <i class="fas fa-times"></i>
84
- </button>
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
- </div>
87
- <div class="crop-image-modal-body">
112
+ <div class="crop-image-modal-body">
88
113
 
89
- </div>
90
- <div class="crop-btn-section">
91
- <button id="crop" class="mx-auto my-3"
92
- style="background-color: {{fileData.color}};">crop</button>
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
- </div>
97
- <div id="workspace" data-name="together_forever" style="display: none;">
98
- <div class="row">
99
- <div class="col-md-8 mx-auto">
100
- <div class="select-img-panel">
101
- <div id="saving-data" style="display: none;">
102
- <img loading="lazy" src="/img/save.gif" alt="saving"> <span class="ml-2">Saving your
103
- images...</span>
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 id="canvas-panel">
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
- <div class="col-md-4">
110
- <div class="options-panel">
111
- <div class="title">
112
-
113
- </div>
114
- <div class="download-wrapper">
115
- <button id="download-button" style="background-color: {{fileData.color}};"><svg
116
- xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
117
- <path
118
- 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" />
119
- </svg>Download</button>
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
@@ -1,3 +1,6 @@
1
+ body {
2
+ font-family: 'PT Sans', sans-serif !important;
3
+ }
1
4
  #img-svg {
2
5
  margin: auto;
3
6
  margin-top: 16px;
@@ -370,6 +373,7 @@ input {
370
373
  color: #0f0c0c;
371
374
  border: 1px solid #ccc;
372
375
  }
376
+ .example-images-modal-container,
373
377
  .crop-image-modal-container {
374
378
  position: fixed;
375
379
  display: none;
@@ -382,6 +386,7 @@ input {
382
386
  z-index: 999999;
383
387
  padding: 0px 20px;
384
388
  }
389
+ .example-images-modal,
385
390
  .crop-image-modal {
386
391
  height: fit-content;
387
392
  background-color: #fff;
@@ -391,6 +396,7 @@ input {
391
396
  padding: 0;
392
397
  overflow-y: auto;
393
398
  }
399
+ .example-images-modal-header,
394
400
  .crop-image-modal-header {
395
401
  border-top-right-radius: 5px;
396
402
  border-top-left-radius: 5px;
@@ -401,6 +407,7 @@ input {
401
407
  align-items: center;
402
408
  padding: 10px 20px;
403
409
  }
410
+ .example-images-modal-header div,
404
411
  .crop-image-modal-header div {
405
412
  height: 100%;
406
413
  display: flex;
@@ -408,18 +415,22 @@ input {
408
415
  font-size: 20px;
409
416
  color: #fff;
410
417
  }
418
+ .example-images-modal-body,
411
419
  .crop-image-modal-body {
412
420
  width: 450px;
413
421
  margin: 10px auto;
414
422
  }
423
+ .example-images-modal-header button,
415
424
  .crop-image-modal-header button {
416
425
  border: none;
417
426
  background-color: transparent;
418
427
  }
428
+ .example-images-modal-header button i,
419
429
  .crop-image-modal-header button i {
420
430
  color: #fff;
421
431
  font-size: 20px;
422
432
  }
433
+ .example-images-modal-body,
423
434
  .crop-image-modal-body {
424
435
  border-top-right-radius: 5px;
425
436
  border-top-left-radius: 5px;
@@ -429,3 +440,34 @@ input {
429
440
  padding: 7px 14px;
430
441
  color: #fff;
431
442
  }
443
+ .carousel-control-next,
444
+ .carousel-control-prev {
445
+ border: none;
446
+ background: none;
447
+ height: 40px;
448
+ background: #ff5554;
449
+ top: 50%;
450
+ }
451
+ .accordion > .card > .card-header {
452
+ background: none;
453
+ border: none;
454
+ height: 34px;
455
+ padding: 0;
456
+ }
457
+
458
+ .accordion > .card {
459
+ border: none;
460
+ border-bottom: 1px solid #f2f2f2 !important;
461
+ display: block;
462
+ padding: 7px 9px;
463
+ color: #444;
464
+ text-decoration: none;
465
+ font-size: 0.95em;
466
+ border-radius: 1px;
467
+ }
468
+ .categories-list .card {
469
+ padding: 7px 9px;
470
+ }
471
+ .categories-list .accordion > .card > .card-header {
472
+ height: auto;
473
+ }
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, canvas, image) => {
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.rotate) {
73
- drawRotated(item.rotate, ctx, canvas, image, item)
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
@@ -125,6 +117,16 @@ const drawImage = () => {
125
117
  myFont.load().then(function (font) {
126
118
  ctx.save()
127
119
  document.fonts.add(font)
120
+ let textValue = document.querySelector(`#${item.id}`).value
121
+ if (textValue.length > 10 && item.fontSizeOption1) {
122
+ item.fontSize = item.fontSizeOption1
123
+ }
124
+ if (textValue.length > 20 && item.fontSizeOption2) {
125
+ item.fontSize = item.fontSizeOption2
126
+ }
127
+ if (textValue.length > 30 && item.fontSizeOption3) {
128
+ item.fontSize = item.fontSizeOption3
129
+ }
128
130
  ctx.font = `${item.fontSize}px ${item.font}`
129
131
  if (item.shadowColor) {
130
132
  ctx.shadowColor = `${item.shadowColor}`
@@ -144,11 +146,7 @@ const drawImage = () => {
144
146
  }
145
147
  ctx.textAlign = 'center'
146
148
  ctx.fillStyle = `${item.color}`
147
- ctx.fillText(
148
- document.querySelector(`#${item.id}`).value,
149
- item.x,
150
- item.y
151
- )
149
+ ctx.fillText(textValue, item.x, item.y)
152
150
  ctx.restore()
153
151
  })
154
152
  }
@@ -201,6 +199,9 @@ document.querySelector('#crop').addEventListener('click', () => {
201
199
  files[index - 1] = cropperImg
202
200
  cropModal.style.display = 'none'
203
201
  })
202
+ const openExamplesModal = () => {
203
+ exampleModal.style.display = 'flex'
204
+ }
204
205
  let inputFile = ''
205
206
  const handleFile = (file) => {
206
207
  cropModal.style.display = 'flex'
@@ -9,46 +9,13 @@
9
9
  "perspective": "",
10
10
  "height": 300,
11
11
  "width": 300,
12
- "x": 200,
13
- "y": 200,
12
+ "translate": {
13
+ "x": -5,
14
+ "y": -10
15
+ },
16
+ "x": 100,
17
+ "y": 100,
14
18
  "id": "file-1"
15
- },
16
- {
17
- "label": "",
18
- "id": "text-1",
19
- "type": "text",
20
- "x": "100",
21
- "y": "100",
22
- "color": "red",
23
- "rotate": 10,
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,
36
- "rotate": 1,
37
- "x": 0,
38
- "y": 0,
39
- "id": "file-3"
40
- },
41
- {
42
- "label": "",
43
- "id": "text-2",
44
- "type": "text",
45
- "x": "200",
46
- "y": "200",
47
- "color": "red",
48
- "fontFamily": "Calligraphy",
49
- "fontPath": "/assets/fonts/Calligraphy.ttf",
50
- "fontWeight": "bold",
51
- "fontSize": 50
52
19
  }
53
20
  ]
54
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.5
4
+ version: 2.2.8
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-23 00:00:00.000000000 Z
11
+ date: 2022-08-27 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll