appscms-tools-theme 2.2.6 → 2.2.7

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: 57fe8e11e3e005629d832b648a76d1f6cec1aa1b7986a130927bca4759db705d
4
- data.tar.gz: c96a0e45465037b82000a455acd3b5b8f767da64575769b6d2044348c3b9d179
3
+ metadata.gz: b53479fb3c05e44f563004959f86f7191b965dc7760f388b08b6d053830cc5c1
4
+ data.tar.gz: 2169984f603e860fbbd8171c34e1e0ea64684e3ba3064416a9cf41873a3aec6b
5
5
  SHA512:
6
- metadata.gz: b78f545a979e8f4f0776e197b025dcefe89ad64497c3bac8bb2c1847af557121cc8e3de450a85876f654bfd02eaca0a13d30833f693a43ae17f1bcb89c6cb3bb
7
- data.tar.gz: 946616197aa6a3131e2dac36eda434e22fb410f7c131ffa12e49f03e4ed31c68704423ab2b306ac4ce5015b13d6f6e2e58d8a98e47672cb968f9b07a49edcab6
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/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",
@@ -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",
@@ -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-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
- <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
@@ -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
- // ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
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'
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: appscms-tools-theme
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.2.6
4
+ version: 2.2.7
5
5
  platform: ruby
6
6
  authors:
7
7
  - vivek-appscms