appscms-tools-theme 2.2.5 → 2.2.8

Sign up to get free protection for your applications and to get access to all the features.
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