appscms-tools-theme 2.1.6 → 2.1.9
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/_data/feature/en/allele-frequency.json +2 -1
- data/_data/feature/en/theframe.json +13 -49
- data/_layouts/calculator.html +5 -0
- data/_layouts/frame.html +31 -5
- data/assets/css/calculators.css +9 -0
- data/assets/css/frame.css +431 -0
- data/assets/images/gallary.png +0 -0
- data/assets/js/frame.js +171 -0
- metadata +5 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 85803716f7d3d068640b97cd7f61fba320611432192c9ece926e4af961ff0171
|
4
|
+
data.tar.gz: b3a094d78f1a2aefaa1de157d63aa3ef8e93bbf3e35368bead78b484f31efdeb
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: b75e9b053c08ed7bd9371469415bc27223638a85730fc7ae276f08437f79c0bdac6840b206e2ace9785e82f467e3929f09bbeac5d0dc9d9b570619b4bd57030e
|
7
|
+
data.tar.gz: daa7b3f9b93f07399aacb66239eb4e3fe5503e0fa4ed6afa22701f2dfb3393ea86c6313c75cb262d20152c0ce750907fd8465c387ebffbac9d711c3fa8d7a8c5
|
@@ -4,7 +4,6 @@
|
|
4
4
|
"H1": "The frame",
|
5
5
|
"H2": "Upload the image and apply your favourite border",
|
6
6
|
"color": "#FF5554",
|
7
|
-
"img": "/img/964075.png",
|
8
7
|
"imgwidth": "35px",
|
9
8
|
"imgheight": "35px",
|
10
9
|
"imgalt": "altvalue",
|
@@ -12,49 +11,7 @@
|
|
12
11
|
"variant": "primary",
|
13
12
|
"TITLE": "Image border tool- Surround your images with a border",
|
14
13
|
"META": "Image border tool helps you to add a simple border frame to your image. You can customize border colour and width. Border sets the focal subject.",
|
15
|
-
"TEXTUAL_CONTENT": [
|
16
|
-
{
|
17
|
-
"priority": 1,
|
18
|
-
"logoUrl": "/img/featureproperty/highquality.png",
|
19
|
-
"header": "",
|
20
|
-
"content": ""
|
21
|
-
},
|
22
|
-
{
|
23
|
-
"priority": 1,
|
24
|
-
"logoUrl": "/img/featureproperty/security.png",
|
25
|
-
"header": "",
|
26
|
-
"content": ""
|
27
|
-
},
|
28
|
-
{
|
29
|
-
"priority": 1,
|
30
|
-
"logoUrl": "/img/featureproperty/flexible.png",
|
31
|
-
"header": "",
|
32
|
-
"content": ""
|
33
|
-
},
|
34
|
-
{
|
35
|
-
"priority": 1,
|
36
|
-
"logoUrl": "/img/featureproperty/userfriendly.png",
|
37
|
-
"header": "",
|
38
|
-
"content": ""
|
39
|
-
},
|
40
|
-
{
|
41
|
-
"priority": 1,
|
42
|
-
"logoUrl": "/img/featureproperty/free.png",
|
43
|
-
"header": "",
|
44
|
-
"content": ""
|
45
|
-
},
|
46
|
-
{
|
47
|
-
"priority": 1,
|
48
|
-
"logoUrl": "/img/featureproperty/nodownload.png",
|
49
|
-
"header": "",
|
50
|
-
"content": ""
|
51
|
-
}
|
52
|
-
],
|
53
|
-
"HOW_TO_CONTENT": {
|
54
|
-
"logoImageUrl": "/idea.svg",
|
55
|
-
"heading": "",
|
56
|
-
"steps": []
|
57
|
-
},
|
14
|
+
"TEXTUAL_CONTENT": [],
|
58
15
|
"FAQ": [
|
59
16
|
{
|
60
17
|
"question": "",
|
@@ -63,11 +20,18 @@
|
|
63
20
|
],
|
64
21
|
"jsfilepaths": [
|
65
22
|
"/assets/js/googledrive.js",
|
66
|
-
"/
|
23
|
+
"https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js",
|
24
|
+
"/assets/js/frame.js"
|
67
25
|
],
|
68
26
|
"cssfilepaths": [
|
69
|
-
"/
|
70
|
-
"/css/
|
71
|
-
|
72
|
-
|
27
|
+
"https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.css",
|
28
|
+
"/assets/css/frame.css"
|
29
|
+
],
|
30
|
+
"image": {
|
31
|
+
"src": "/assets/images/gallary.png",
|
32
|
+
"height": 277,
|
33
|
+
"width": 378,
|
34
|
+
"x": 110,
|
35
|
+
"y": 180
|
36
|
+
}
|
73
37
|
}
|
data/_layouts/calculator.html
CHANGED
@@ -31,6 +31,10 @@ layout: feature
|
|
31
31
|
<input class="form-control" type="date" name="{{item.dateTimePicker}}"
|
32
32
|
id="{{item.dateTimePickerId}}">
|
33
33
|
{%- endif -%}
|
34
|
+
{%- if item.unit -%}
|
35
|
+
<div class="unit">{{item.unit}}</div>
|
36
|
+
{%- endif -%}
|
37
|
+
|
34
38
|
</div>
|
35
39
|
|
36
40
|
</div>
|
@@ -39,6 +43,7 @@ layout: feature
|
|
39
43
|
|
40
44
|
</div>
|
41
45
|
{%- endfor -%}
|
46
|
+
<div id="dynamic-section"></div>
|
42
47
|
</form>
|
43
48
|
|
44
49
|
</div>
|
data/_layouts/frame.html
CHANGED
@@ -3,8 +3,10 @@ layout: feature
|
|
3
3
|
---
|
4
4
|
|
5
5
|
<div class="container">
|
6
|
-
{%- assign
|
7
|
-
<div class="custom-box" data-filter="{{page.filter}}"
|
6
|
+
{%- assign fileData = site.data[page.folderName][page.lang][page.fileName] -%}
|
7
|
+
<div class="custom-box" data-filter="{{page.filter}}" data-src="{{fileData.image.src}}"
|
8
|
+
data-height="{{fileData.image.height}}" data-width="{{fileData.image.width}}" data-x="{{fileData.image.x}}"
|
9
|
+
data-y="{{fileData.image.y}}" style="background-color:{{fileData.color}};">
|
8
10
|
<div class="inner-box">
|
9
11
|
<div style="display:none;" id="file-loader"><img src="/spinner.gif" alt="">
|
10
12
|
<p>Please Wait ,Loading Your file </p>
|
@@ -23,8 +25,12 @@ layout: feature
|
|
23
25
|
</svg>
|
24
26
|
</div>
|
25
27
|
<div class="d-flex justify-content-center align-items-center ">
|
26
|
-
<div id="Inputbox" class="boxes"> <
|
27
|
-
|
28
|
+
<div id="Inputbox" class="boxes"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
|
29
|
+
fill="currentColor">
|
30
|
+
<path
|
31
|
+
d="M14.0036 1.99646L17.0036 4.99646L16.999 4.99946L17 5.00001V13H16V5.99946L13 6.00001V2.99946H4V17.9995L12.0275 18.0003C12.0093 17.8361 12 17.6691 12 17.5C12 15.0147 14.0147 13 16.5 13C18.9853 13 21 15.0147 21 17.5C21 19.9853 18.9853 22 16.5 22C14.5409 22 12.8742 20.7481 12.2563 19.0007L3 19V2.00001H14L14.0036 1.99646ZM16.5 14C14.567 14 13 15.567 13 17.5C13 19.433 14.567 21 16.5 21C18.433 21 20 19.433 20 17.5C20 15.567 18.433 14 16.5 14ZM17 15V16.9995L19 17V18L17 17.9995V20H16V17.9995L14 18V17L16 16.9995V15H17ZM11 14V15H6V14H11ZM14 11V12H6V11H14ZM14 8.00001V9.00001H6V8.00001H14ZM14 3.40746V4.99946H15.592L14 3.40746Z">
|
32
|
+
</path>
|
33
|
+
</svg> <span class='ml-1'>CHOOSE FILE</span> </div>
|
28
34
|
<div class="file-pick-dropdown">
|
29
35
|
<i class="fas fa-angle-down arrow-sign "></i>
|
30
36
|
<div class="file-picker-dropdown" style="display: none;">
|
@@ -50,6 +56,26 @@ layout: feature
|
|
50
56
|
</div>
|
51
57
|
</div>
|
52
58
|
</div>
|
59
|
+
<div class="crop-image-modal-container">
|
60
|
+
<div class="row w-100">
|
61
|
+
<div class="crop-image-modal col-lg-6 col-md-8 mx-auto">
|
62
|
+
<div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
|
63
|
+
<div>Select an area you would like to use</div>
|
64
|
+
<div>
|
65
|
+
<button onclick="closeModal()">
|
66
|
+
<i class="fas fa-times"></i>
|
67
|
+
</button>
|
68
|
+
</div>
|
69
|
+
</div>
|
70
|
+
<div class="crop-image-modal-body">
|
71
|
+
|
72
|
+
</div>
|
73
|
+
<div class="crop-btn-section">
|
74
|
+
<button id="crop" class="mx-auto my-3" style="background-color: {{fileData.color}};">crop</button>
|
75
|
+
</div>
|
76
|
+
</div>
|
77
|
+
</div>
|
78
|
+
</div>
|
53
79
|
<div id="workspace" style="display: none;">
|
54
80
|
<div class="row">
|
55
81
|
<div class="col-md-8 mx-auto">
|
@@ -68,7 +94,7 @@ layout: feature
|
|
68
94
|
|
69
95
|
</div>
|
70
96
|
<div class="download-wrapper">
|
71
|
-
<button id="download-button" style="background-color: {{
|
97
|
+
<button id="download-button" style="background-color: {{fileData.color}};"><svg
|
72
98
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
73
99
|
<path
|
74
100
|
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" />
|
data/assets/css/calculators.css
CHANGED
@@ -0,0 +1,431 @@
|
|
1
|
+
#img-svg {
|
2
|
+
margin: auto;
|
3
|
+
margin-top: 16px;
|
4
|
+
height: 67px;
|
5
|
+
width: 98px;
|
6
|
+
}
|
7
|
+
|
8
|
+
#file-loader {
|
9
|
+
display: flex;
|
10
|
+
align-items: center;
|
11
|
+
flex-direction: column;
|
12
|
+
}
|
13
|
+
|
14
|
+
#file-loader img {
|
15
|
+
height: 60px;
|
16
|
+
}
|
17
|
+
|
18
|
+
#file-loader p {
|
19
|
+
text-align: center;
|
20
|
+
color: #fff;
|
21
|
+
font-size: 17px;
|
22
|
+
}
|
23
|
+
|
24
|
+
#loading-img {
|
25
|
+
height: 27px;
|
26
|
+
width: 27px;
|
27
|
+
margin-right: 21px;
|
28
|
+
}
|
29
|
+
|
30
|
+
#dropbox svg,
|
31
|
+
#filepicker svg,
|
32
|
+
.boxes svg {
|
33
|
+
height: 24px !important;
|
34
|
+
width: 24px !important;
|
35
|
+
}
|
36
|
+
|
37
|
+
.file-picker-dropdown a,
|
38
|
+
.file-picker-dropdown button {
|
39
|
+
border: none;
|
40
|
+
width: 100%;
|
41
|
+
border-radius: 4px;
|
42
|
+
text-align: left;
|
43
|
+
background: #fff;
|
44
|
+
font-weight: 400;
|
45
|
+
font-size: 16px;
|
46
|
+
line-height: 24px;
|
47
|
+
padding: 15px 24px;
|
48
|
+
list-style: none;
|
49
|
+
height: 54px;
|
50
|
+
}
|
51
|
+
|
52
|
+
.file-picker-dropdown {
|
53
|
+
width: 213px;
|
54
|
+
position: absolute;
|
55
|
+
background: #fff;
|
56
|
+
top: 111%;
|
57
|
+
right: 0;
|
58
|
+
display: none;
|
59
|
+
box-shadow: rgb(26 26 26 / 20%) 0 0 12px;
|
60
|
+
border-radius: 4px;
|
61
|
+
}
|
62
|
+
|
63
|
+
.file-pick-dropdown i {
|
64
|
+
margin: 0;
|
65
|
+
}
|
66
|
+
|
67
|
+
.boxes {
|
68
|
+
background: #fff;
|
69
|
+
border-radius: 0;
|
70
|
+
cursor: pointer;
|
71
|
+
display: flex;
|
72
|
+
align-items: center;
|
73
|
+
padding: 15px 24px;
|
74
|
+
height: 54px;
|
75
|
+
border-top-left-radius: 4px;
|
76
|
+
border-bottom-left-radius: 4px;
|
77
|
+
justify-content: center;
|
78
|
+
font-size: 15px;
|
79
|
+
font-weight: 800;
|
80
|
+
color: #000;
|
81
|
+
}
|
82
|
+
|
83
|
+
.file-pick-dropdown {
|
84
|
+
color: #000;
|
85
|
+
cursor: pointer;
|
86
|
+
display: inline-flex;
|
87
|
+
background: #fff;
|
88
|
+
height: 54px;
|
89
|
+
border-left: 1px solid rgba(95, 88, 88, 0.75);
|
90
|
+
padding: 13px 20px;
|
91
|
+
border-top-right-radius: 4px;
|
92
|
+
border-bottom-right-radius: 4px;
|
93
|
+
align-items: center;
|
94
|
+
position: relative;
|
95
|
+
}
|
96
|
+
|
97
|
+
.custom-box {
|
98
|
+
padding: 15px;
|
99
|
+
}
|
100
|
+
|
101
|
+
.inner-box {
|
102
|
+
border: 1px dashed rgba(0, 0, 0, 0.15);
|
103
|
+
background: rgba(0, 0, 0, 0.1);
|
104
|
+
padding: 40px;
|
105
|
+
min-height: 300px;
|
106
|
+
width: 100%;
|
107
|
+
display: flex;
|
108
|
+
align-items: center;
|
109
|
+
justify-content: center;
|
110
|
+
}
|
111
|
+
#dropfile {
|
112
|
+
font-size: 16px;
|
113
|
+
margin-top: 15px;
|
114
|
+
text-align: center;
|
115
|
+
color: #fff;
|
116
|
+
}
|
117
|
+
.saving-file-download-wrap {
|
118
|
+
display: flex;
|
119
|
+
flex-direction: column;
|
120
|
+
align-items: center;
|
121
|
+
}
|
122
|
+
#download {
|
123
|
+
padding: 10px 16px;
|
124
|
+
background: #fff;
|
125
|
+
}
|
126
|
+
|
127
|
+
.trust-img {
|
128
|
+
height: 80px;
|
129
|
+
width: 80px;
|
130
|
+
}
|
131
|
+
.options-panel select,
|
132
|
+
textarea,
|
133
|
+
input {
|
134
|
+
width: 100%;
|
135
|
+
text-align: left;
|
136
|
+
background: #fff;
|
137
|
+
height: 34px;
|
138
|
+
display: flex;
|
139
|
+
border-radius: 4px;
|
140
|
+
align-items: center;
|
141
|
+
justify-content: space-between;
|
142
|
+
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
|
143
|
+
color: #0f0c0c;
|
144
|
+
border: 1px solid #ccc;
|
145
|
+
}
|
146
|
+
.options-panel div {
|
147
|
+
width: 100%;
|
148
|
+
}
|
149
|
+
#action-button {
|
150
|
+
background-color: #ff6537;
|
151
|
+
margin: 0;
|
152
|
+
width: 180px;
|
153
|
+
padding: 10px 0;
|
154
|
+
font-size: 13pt;
|
155
|
+
position: relative;
|
156
|
+
border-radius: 2px;
|
157
|
+
border: 1px solid #ff6131;
|
158
|
+
color: #fff;
|
159
|
+
font-weight: 600;
|
160
|
+
display: block;
|
161
|
+
margin: auto;
|
162
|
+
margin-top: 20px;
|
163
|
+
}
|
164
|
+
#workspace-area input[type='text'] {
|
165
|
+
height: 40px;
|
166
|
+
border: 1px solid gray;
|
167
|
+
border-radius: 2px;
|
168
|
+
}
|
169
|
+
#canvas-area {
|
170
|
+
width: 100%;
|
171
|
+
margin-top: 30px;
|
172
|
+
max-width: 100%;
|
173
|
+
}
|
174
|
+
#img-svg {
|
175
|
+
margin: auto;
|
176
|
+
margin-top: 16px;
|
177
|
+
height: 67px;
|
178
|
+
width: 98px;
|
179
|
+
}
|
180
|
+
|
181
|
+
#file-loader {
|
182
|
+
display: flex;
|
183
|
+
align-items: center;
|
184
|
+
flex-direction: column;
|
185
|
+
}
|
186
|
+
|
187
|
+
#file-loader img {
|
188
|
+
height: 60px;
|
189
|
+
}
|
190
|
+
|
191
|
+
#file-loader p {
|
192
|
+
text-align: center;
|
193
|
+
color: #fff;
|
194
|
+
font-size: 17px;
|
195
|
+
}
|
196
|
+
|
197
|
+
#loading-img {
|
198
|
+
height: 27px;
|
199
|
+
width: 27px;
|
200
|
+
margin-right: 21px;
|
201
|
+
}
|
202
|
+
|
203
|
+
#dropbox svg,
|
204
|
+
#filepicker svg,
|
205
|
+
.boxes svg {
|
206
|
+
height: 24px !important;
|
207
|
+
width: 24px !important;
|
208
|
+
}
|
209
|
+
|
210
|
+
.file-picker-dropdown a,
|
211
|
+
.file-picker-dropdown button {
|
212
|
+
border: none;
|
213
|
+
width: 100%;
|
214
|
+
border-radius: 4px;
|
215
|
+
text-align: left;
|
216
|
+
background: #fff;
|
217
|
+
font-weight: 400;
|
218
|
+
font-size: 16px;
|
219
|
+
line-height: 24px;
|
220
|
+
padding: 15px 24px;
|
221
|
+
list-style: none;
|
222
|
+
height: 54px;
|
223
|
+
}
|
224
|
+
|
225
|
+
.file-picker-dropdown {
|
226
|
+
width: 213px;
|
227
|
+
position: absolute;
|
228
|
+
background: #fff;
|
229
|
+
top: 111%;
|
230
|
+
right: 0;
|
231
|
+
display: none;
|
232
|
+
box-shadow: rgb(26 26 26 / 20%) 0 0 12px;
|
233
|
+
border-radius: 4px;
|
234
|
+
}
|
235
|
+
|
236
|
+
.file-pick-dropdown i {
|
237
|
+
margin: 0;
|
238
|
+
}
|
239
|
+
|
240
|
+
.boxes {
|
241
|
+
background: #fff;
|
242
|
+
border-radius: 0;
|
243
|
+
cursor: pointer;
|
244
|
+
display: flex;
|
245
|
+
align-items: center;
|
246
|
+
padding: 15px 24px;
|
247
|
+
height: 54px;
|
248
|
+
border-top-left-radius: 4px;
|
249
|
+
border-bottom-left-radius: 4px;
|
250
|
+
justify-content: center;
|
251
|
+
font-size: 15px;
|
252
|
+
font-weight: 800;
|
253
|
+
color: #000;
|
254
|
+
}
|
255
|
+
|
256
|
+
.file-pick-dropdown {
|
257
|
+
color: #000;
|
258
|
+
cursor: pointer;
|
259
|
+
display: inline-flex;
|
260
|
+
background: #fff;
|
261
|
+
height: 54px;
|
262
|
+
border-left: 1px solid rgba(95, 88, 88, 0.75);
|
263
|
+
padding: 13px 20px;
|
264
|
+
border-top-right-radius: 4px;
|
265
|
+
border-bottom-right-radius: 4px;
|
266
|
+
align-items: center;
|
267
|
+
position: relative;
|
268
|
+
}
|
269
|
+
|
270
|
+
.crop-img-box {
|
271
|
+
background-color: #fff;
|
272
|
+
width: 100%;
|
273
|
+
border-radius: 0.75em;
|
274
|
+
border: 1px solid #f2f2f2;
|
275
|
+
box-shadow: 0px 5px 16px -2px rgb(42 115 217 / 20%);
|
276
|
+
font-size: 16px;
|
277
|
+
height: auto;
|
278
|
+
display: none;
|
279
|
+
}
|
280
|
+
|
281
|
+
.custom-box {
|
282
|
+
padding: 15px;
|
283
|
+
}
|
284
|
+
|
285
|
+
.inner-box {
|
286
|
+
border: 1px dashed rgba(0, 0, 0, 0.15);
|
287
|
+
background: rgba(0, 0, 0, 0.1);
|
288
|
+
padding: 40px;
|
289
|
+
min-height: 300px;
|
290
|
+
width: 100%;
|
291
|
+
}
|
292
|
+
#dropfile {
|
293
|
+
font-size: 16px;
|
294
|
+
margin-top: 15px;
|
295
|
+
text-align: center;
|
296
|
+
color: #fff;
|
297
|
+
}
|
298
|
+
.options-panel {
|
299
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
|
300
|
+
border-radius: 4px;
|
301
|
+
padding: 30px;
|
302
|
+
width: 100%;
|
303
|
+
}
|
304
|
+
.options-panel .title {
|
305
|
+
width: 100%;
|
306
|
+
font-size: 28px;
|
307
|
+
line-height: 36px;
|
308
|
+
color: #000;
|
309
|
+
font-weight: 700;
|
310
|
+
text-align: left;
|
311
|
+
text-transform: capitalize;
|
312
|
+
}
|
313
|
+
.options-panel .description {
|
314
|
+
width: 100%;
|
315
|
+
font-size: 17px;
|
316
|
+
color: #666;
|
317
|
+
font-weight: 400;
|
318
|
+
text-align: left;
|
319
|
+
}
|
320
|
+
.options-title {
|
321
|
+
width: 100%;
|
322
|
+
font-size: 17px;
|
323
|
+
color: #666;
|
324
|
+
font-weight: 400;
|
325
|
+
text-align: left;
|
326
|
+
}
|
327
|
+
#download-button {
|
328
|
+
cursor: pointer;
|
329
|
+
display: inline-block;
|
330
|
+
width: 100%;
|
331
|
+
padding: 14px 0;
|
332
|
+
margin-bottom: 20px;
|
333
|
+
text-align: center;
|
334
|
+
border-radius: 50px;
|
335
|
+
background: #0050e5;
|
336
|
+
font-size: 18px;
|
337
|
+
color: #fff;
|
338
|
+
font-weight: 700;
|
339
|
+
text-decoration: none;
|
340
|
+
transition: all 0.3s;
|
341
|
+
border: none;
|
342
|
+
}
|
343
|
+
#download-button svg {
|
344
|
+
fill: #fff;
|
345
|
+
margin-right: 4px;
|
346
|
+
margin-bottom: 4px;
|
347
|
+
height: 20px;
|
348
|
+
}
|
349
|
+
.download-wrapper {
|
350
|
+
display: flex;
|
351
|
+
align-items: center;
|
352
|
+
border-bottom: 1px solid #ddd;
|
353
|
+
margin: 12px 0px;
|
354
|
+
padding: 12px 0px;
|
355
|
+
}
|
356
|
+
#canvas-panel canvas {
|
357
|
+
max-width: 100%;
|
358
|
+
}
|
359
|
+
.options-panel select,
|
360
|
+
textarea,
|
361
|
+
input {
|
362
|
+
width: 100%;
|
363
|
+
text-align: left;
|
364
|
+
background: #fff;
|
365
|
+
height: 34px;
|
366
|
+
display: flex;
|
367
|
+
border-radius: 4px;
|
368
|
+
justify-content: space-between;
|
369
|
+
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
|
370
|
+
color: #0f0c0c;
|
371
|
+
border: 1px solid #ccc;
|
372
|
+
}
|
373
|
+
.crop-image-modal-container {
|
374
|
+
position: fixed;
|
375
|
+
display: none;
|
376
|
+
justify-content: center;
|
377
|
+
background-color: rgba(0, 0, 0, 0.297);
|
378
|
+
height: 100vh;
|
379
|
+
width: 100%;
|
380
|
+
top: 0;
|
381
|
+
left: 0;
|
382
|
+
z-index: 999999;
|
383
|
+
padding: 0px 20px;
|
384
|
+
}
|
385
|
+
.crop-image-modal {
|
386
|
+
height: fit-content;
|
387
|
+
background-color: #fff;
|
388
|
+
width: 100%;
|
389
|
+
margin-top: 10px;
|
390
|
+
border-radius: 5px;
|
391
|
+
padding: 0;
|
392
|
+
overflow-y: auto;
|
393
|
+
}
|
394
|
+
.crop-image-modal-header {
|
395
|
+
border-top-right-radius: 5px;
|
396
|
+
border-top-left-radius: 5px;
|
397
|
+
display: flex;
|
398
|
+
justify-content: space-between;
|
399
|
+
background-color: #ff5554;
|
400
|
+
display: flex;
|
401
|
+
align-items: center;
|
402
|
+
padding: 10px 20px;
|
403
|
+
}
|
404
|
+
.crop-image-modal-header div {
|
405
|
+
height: 100%;
|
406
|
+
display: flex;
|
407
|
+
align-items: center;
|
408
|
+
font-size: 20px;
|
409
|
+
color: #fff;
|
410
|
+
}
|
411
|
+
.crop-image-modal-body {
|
412
|
+
width: 450px;
|
413
|
+
margin: 10px auto;
|
414
|
+
}
|
415
|
+
.crop-image-modal-header button {
|
416
|
+
border: none;
|
417
|
+
background-color: transparent;
|
418
|
+
}
|
419
|
+
.crop-image-modal-header button i {
|
420
|
+
color: #fff;
|
421
|
+
font-size: 20px;
|
422
|
+
}
|
423
|
+
.crop-image-modal-body {
|
424
|
+
border-top-right-radius: 5px;
|
425
|
+
border-top-left-radius: 5px;
|
426
|
+
}
|
427
|
+
#crop {
|
428
|
+
border: none;
|
429
|
+
padding: 7px 14px;
|
430
|
+
color: #fff;
|
431
|
+
}
|
Binary file
|
data/assets/js/frame.js
ADDED
@@ -0,0 +1,171 @@
|
|
1
|
+
const getScript = document.currentScript
|
2
|
+
const pageTool = getScript.dataset.tool
|
3
|
+
const lang = getScript.dataset.lang
|
4
|
+
const gdrive = document.querySelector('#filepicker')
|
5
|
+
const inputBox = document.querySelector('#Inputbox')
|
6
|
+
const fileDropBox = document.querySelector('.custom-box')
|
7
|
+
const cropModal = document.querySelector('.crop-image-modal-container')
|
8
|
+
const workspace = document.getElementById('workspace')
|
9
|
+
const canvasPanel = document.getElementById('canvas-panel')
|
10
|
+
const download = document.querySelector('#download-button')
|
11
|
+
let cropInputWidth = null
|
12
|
+
let cropInputHeight = null
|
13
|
+
let image = null
|
14
|
+
const showLoader = () => {
|
15
|
+
showLoading()
|
16
|
+
}
|
17
|
+
const closeLoader = () => {}
|
18
|
+
const mimeTypes = 'image/png,image/jpg,image/jpeg,image/webp'
|
19
|
+
const filemimes = ['.png', '.webp', '.jpg', '.jpeg']
|
20
|
+
gdrive.addEventListener(
|
21
|
+
'click',
|
22
|
+
(getFile, mimeTypes, showLoader, closeLoader) => {
|
23
|
+
const data = loadPicker()
|
24
|
+
}
|
25
|
+
)
|
26
|
+
const getDropBoxFile = (file) => {
|
27
|
+
handleFile(file)
|
28
|
+
}
|
29
|
+
const getFile = (file) => {
|
30
|
+
handleFile(file)
|
31
|
+
}
|
32
|
+
const fileOnChange = () => {
|
33
|
+
handleFile(file.files[0])
|
34
|
+
}
|
35
|
+
const dropbox = document.getElementById('dropbox')
|
36
|
+
dropbox.addEventListener(
|
37
|
+
'click',
|
38
|
+
async (getDropBoxFile, showLoader, closeLoader) => {
|
39
|
+
const getFile = chooseFromDropbox()
|
40
|
+
}
|
41
|
+
)
|
42
|
+
inputBox.onclick = function () {
|
43
|
+
document.querySelector('#file').click()
|
44
|
+
}
|
45
|
+
fileDropBox.addEventListener('dragover', (e) => {
|
46
|
+
e.preventDefault()
|
47
|
+
})
|
48
|
+
fileDropBox.addEventListener('drop', (e) => {
|
49
|
+
e.preventDefault()
|
50
|
+
handleFile(e.dataTransfer.files[0])
|
51
|
+
})
|
52
|
+
const closeModal = () => {
|
53
|
+
cropModal.style.display = 'none'
|
54
|
+
}
|
55
|
+
const drawImage = () => {
|
56
|
+
let img = new Image()
|
57
|
+
img.src = fileDropBox.dataset.src
|
58
|
+
var canvas = document.createElement('canvas')
|
59
|
+
var ctx = canvas.getContext('2d')
|
60
|
+
img.onload = () => {
|
61
|
+
image.width = Number(fileDropBox.dataset.width)
|
62
|
+
image.height = Number(fileDropBox.dataset.height)
|
63
|
+
canvas.width = img.width
|
64
|
+
canvas.height = img.height
|
65
|
+
ctx.drawImage(
|
66
|
+
image,
|
67
|
+
Number(fileDropBox.dataset.x),
|
68
|
+
Number(fileDropBox.dataset.y),
|
69
|
+
image.width,
|
70
|
+
image.height
|
71
|
+
)
|
72
|
+
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
|
73
|
+
canvasPanel.innerHTML = ''
|
74
|
+
canvasPanel.appendChild(canvas)
|
75
|
+
stopLoading()
|
76
|
+
cropModal.style.display = 'none'
|
77
|
+
workspace.style.display = 'block'
|
78
|
+
}
|
79
|
+
}
|
80
|
+
const cropImage = (result) => {
|
81
|
+
let img = new Image()
|
82
|
+
let cropper = null
|
83
|
+
img.src = fileDropBox.dataset.src
|
84
|
+
img.onload = () => {
|
85
|
+
let img = document.createElement('img')
|
86
|
+
img.id = 'image'
|
87
|
+
img.src = result
|
88
|
+
let cropWidth = null
|
89
|
+
let cropHeight = null
|
90
|
+
document.querySelector('.crop-image-modal-body').appendChild(img)
|
91
|
+
cropper = new Cropper(img, {
|
92
|
+
ready() {
|
93
|
+
cropper.setAspectRatio(
|
94
|
+
Number(fileDropBox.dataset.width) / Number(fileDropBox.dataset.height)
|
95
|
+
)
|
96
|
+
cropModal.style.display = 'flex'
|
97
|
+
this.cropper.crop()
|
98
|
+
document.querySelector('#crop').addEventListener('click', () => {
|
99
|
+
let cropperImg = cropper
|
100
|
+
.getCroppedCanvas({
|
101
|
+
width: cropWidth,
|
102
|
+
height: cropHeight,
|
103
|
+
})
|
104
|
+
.toDataURL()
|
105
|
+
image = new Image()
|
106
|
+
image.onload = () => {
|
107
|
+
drawImage()
|
108
|
+
}
|
109
|
+
image.src = cropperImg
|
110
|
+
})
|
111
|
+
},
|
112
|
+
crop(event) {
|
113
|
+
cropWidth = Math.round(event.detail.width)
|
114
|
+
cropHeight = Math.round(event.detail.height)
|
115
|
+
},
|
116
|
+
})
|
117
|
+
stopLoading()
|
118
|
+
}
|
119
|
+
}
|
120
|
+
let inputFile = ''
|
121
|
+
const handleFile = (file) => {
|
122
|
+
cropModal.style.display = 'flex'
|
123
|
+
document.querySelector('#file-loader').style.display = 'flex'
|
124
|
+
document.querySelector('.file-input').style.display = 'none'
|
125
|
+
inputFile = file
|
126
|
+
if (file) {
|
127
|
+
const reader = new FileReader()
|
128
|
+
reader.onload = (e) => {
|
129
|
+
if (e.target.result) {
|
130
|
+
cropImage(e.target.result)
|
131
|
+
}
|
132
|
+
}
|
133
|
+
reader.readAsDataURL(file)
|
134
|
+
}
|
135
|
+
}
|
136
|
+
const showLoading = () => {
|
137
|
+
document.querySelector('#file-loader').style.display = 'flex'
|
138
|
+
document.querySelector('.file-input').style.display = 'none'
|
139
|
+
}
|
140
|
+
const stopLoading = () => {
|
141
|
+
fileDropBox.style.display = 'none'
|
142
|
+
}
|
143
|
+
download.addEventListener('click', () => {
|
144
|
+
let canvas = document.querySelector('canvas')
|
145
|
+
let url = canvas.toDataURL(`image/png`)
|
146
|
+
let a = document.createElement('a')
|
147
|
+
a.href = url
|
148
|
+
a.download = `safeimagekit-border-image.${inputFile.type.split('/')[1]}`
|
149
|
+
document.body.appendChild(a)
|
150
|
+
a.click()
|
151
|
+
if (lang === 'en') {
|
152
|
+
window.location.href = `/download?tool=${pageTool}`
|
153
|
+
} else {
|
154
|
+
window.location.href = `/${lang}/download?tool=${pageTool}`
|
155
|
+
}
|
156
|
+
})
|
157
|
+
const showDropDown = document.querySelector('.file-pick-dropdown')
|
158
|
+
const icon = document.querySelector('.arrow-sign')
|
159
|
+
const dropDown = document.querySelector('.file-picker-dropdown')
|
160
|
+
showDropDown.addEventListener('click', () => {
|
161
|
+
addScripts()
|
162
|
+
if (dropDown.style.display !== 'none') {
|
163
|
+
dropDown.style.display = 'none'
|
164
|
+
icon.classList.remove('fa-angle-up')
|
165
|
+
icon.classList.add('fa-angle-down')
|
166
|
+
} else {
|
167
|
+
dropDown.style.display = 'block'
|
168
|
+
icon.classList.remove('fa-angle-down')
|
169
|
+
icon.classList.add('fa-angle-up')
|
170
|
+
}
|
171
|
+
})
|
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.1.
|
4
|
+
version: 2.1.9
|
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-
|
11
|
+
date: 2022-08-04 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: jekyll
|
@@ -2447,6 +2447,7 @@ files:
|
|
2447
2447
|
- assets/css/bootstrap.min.css
|
2448
2448
|
- assets/css/calculators.css
|
2449
2449
|
- assets/css/filecomparison.css
|
2450
|
+
- assets/css/frame.css
|
2450
2451
|
- assets/css/responsive.css
|
2451
2452
|
- assets/css/tools.css
|
2452
2453
|
- assets/easy.svg
|
@@ -2574,6 +2575,7 @@ files:
|
|
2574
2575
|
- assets/images/avatar.png
|
2575
2576
|
- assets/images/balark.jpeg
|
2576
2577
|
- assets/images/fileformat.webp
|
2578
|
+
- assets/images/gallary.png
|
2577
2579
|
- assets/images/keshav.webp
|
2578
2580
|
- assets/images/krutika.jpeg
|
2579
2581
|
- assets/images/logo.png
|
@@ -2592,6 +2594,7 @@ files:
|
|
2592
2594
|
- assets/js/ads.js
|
2593
2595
|
- assets/js/append-div.js
|
2594
2596
|
- assets/js/featureResult.js
|
2597
|
+
- assets/js/frame.js
|
2595
2598
|
- assets/js/googledrive.js
|
2596
2599
|
- assets/js/homeResult.js
|
2597
2600
|
- assets/js/manifest.json
|