appscms-tools-theme 4.5.6 → 4.5.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/assets/js/batch.js +123 -160
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 62fcab5d132be9a3dd849169794f658f8cd6f6636218143967b3e8e2d2c67fd3
|
|
4
|
+
data.tar.gz: 982636ae9b0010b53632fb9bf5d05185c526585d35bf45402c959d35add59545
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 451e6e7f3dc768ebc8ceca7dea39c058946376115c166e53bb555e97974cf51aa4d7f707c06345f5205063a7ecd11a692c598f5119254070d756eaa482c3782f
|
|
7
|
+
data.tar.gz: 15b698813251565ffdf1bf16739e2061570ec7c8b13f0a90350cd3bcfbe70d34d01df7cc77cc29468712fa0b230d19646017a7cd8fe53d701bc0f984f353d18b
|
data/assets/js/batch.js
CHANGED
|
@@ -1,143 +1,121 @@
|
|
|
1
|
-
const getScript = document.currentScript
|
|
2
|
-
const pageTool = getScript.dataset.tool
|
|
3
|
-
const lang = getScript.dataset.lang
|
|
4
|
-
const inputBox = document.querySelector(
|
|
5
|
-
const addFiles = document.querySelector(
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
let
|
|
14
|
-
let renderFileTypes = null
|
|
15
|
-
let root = document.querySelector(':root')
|
|
16
|
-
root.style.setProperty('--maincolor', fileDropBox.dataset.color)
|
|
17
|
-
|
|
1
|
+
const getScript = document.currentScript;
|
|
2
|
+
const pageTool = getScript.dataset.tool;
|
|
3
|
+
const lang = getScript.dataset.lang;
|
|
4
|
+
const inputBox = document.querySelector(".upload-btn");
|
|
5
|
+
const addFiles = document.querySelector(".add-more-files");
|
|
6
|
+
const fileDropBox = document.querySelector(".box");
|
|
7
|
+
const workspace = document.querySelector(".workspace");
|
|
8
|
+
const selectedFilesList = document.querySelector(".selectedFilesList");
|
|
9
|
+
const downloadButton = document.querySelector("#download-button");
|
|
10
|
+
const submitButton = document.querySelector("#submit-button");
|
|
11
|
+
const showProcessingFiles = document.querySelector(".files-processing-list");
|
|
12
|
+
let zipFileType = null;
|
|
13
|
+
let renderFileTypes = null;
|
|
18
14
|
|
|
19
15
|
const showLoader = () => {
|
|
20
|
-
showLoading()
|
|
21
|
-
}
|
|
22
|
-
const closeLoader = () => {
|
|
23
|
-
const mimeTypes = 'image/png,image/jpg,image/jpeg,image/webp'
|
|
24
|
-
const filemimes = ['.png', '.webp', '.jpg', '.jpeg']
|
|
25
|
-
gdrive.addEventListener(
|
|
26
|
-
'click',
|
|
27
|
-
(getFile, mimeTypes, showLoader, closeLoader) => {
|
|
28
|
-
const data = loadPicker()
|
|
29
|
-
}
|
|
30
|
-
)
|
|
31
|
-
const dropbox = document.getElementById('dropbox')
|
|
32
|
-
dropbox.addEventListener(
|
|
33
|
-
'click',
|
|
34
|
-
async (getDropBoxFile, showLoader, closeLoader) => {
|
|
35
|
-
const getFile = chooseFromDropbox()
|
|
36
|
-
}
|
|
37
|
-
)
|
|
16
|
+
showLoading();
|
|
17
|
+
};
|
|
18
|
+
const closeLoader = () => {};
|
|
38
19
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
e.
|
|
45
|
-
})
|
|
46
|
-
fileDropBox.addEventListener('drop', (e) => {
|
|
47
|
-
e.preventDefault()
|
|
48
|
-
handleFile(e.dataTransfer.files[0])
|
|
49
|
-
})
|
|
20
|
+
fileDropBox.addEventListener("dragover", (e) => {
|
|
21
|
+
e.preventDefault();
|
|
22
|
+
});
|
|
23
|
+
fileDropBox.addEventListener("drop", (e) => {
|
|
24
|
+
e.preventDefault();
|
|
25
|
+
handleFile(e.dataTransfer.files[0]);
|
|
26
|
+
});
|
|
50
27
|
const fileOnChange = () => {
|
|
51
|
-
handleFile(file.files)
|
|
52
|
-
}
|
|
28
|
+
handleFile(file.files);
|
|
29
|
+
};
|
|
53
30
|
inputBox.onclick = function () {
|
|
54
|
-
document.querySelector(
|
|
55
|
-
}
|
|
31
|
+
document.querySelector("#file").click();
|
|
32
|
+
};
|
|
56
33
|
const fileOnChange2 = () => {
|
|
57
|
-
addMoreFiles(document.querySelector(
|
|
58
|
-
}
|
|
34
|
+
addMoreFiles(document.querySelector("#file2").files);
|
|
35
|
+
};
|
|
59
36
|
addFiles.onclick = function () {
|
|
60
|
-
document.querySelector(
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
let fileName =
|
|
64
|
-
let blobList = []
|
|
37
|
+
document.querySelector("#file2").click();
|
|
38
|
+
};
|
|
39
|
+
let files = [];
|
|
40
|
+
let fileName = "";
|
|
41
|
+
let blobList = [];
|
|
65
42
|
const addMoreFiles = (addFiles) => {
|
|
66
|
-
handleFile(addFiles)
|
|
67
|
-
}
|
|
43
|
+
handleFile(addFiles);
|
|
44
|
+
};
|
|
68
45
|
const onSubmit = (files) => {
|
|
69
|
-
blobList = []
|
|
46
|
+
blobList = [];
|
|
70
47
|
Promise.all(
|
|
71
48
|
files.map((item, index) => {
|
|
72
49
|
document.querySelector(
|
|
73
50
|
`#loader-${index}`
|
|
74
51
|
).innerHTML = `<span class="processing">processing</span>
|
|
75
|
-
<div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div
|
|
52
|
+
<div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>`;
|
|
76
53
|
return new Promise((resolve, reject) => {
|
|
77
54
|
batchConversion(item, index).then(([indexValue, blob, type]) => {
|
|
78
|
-
blobList.push({ blob: blob, fileName: item })
|
|
55
|
+
blobList.push({ blob: blob, fileName: item });
|
|
79
56
|
document.querySelector(
|
|
80
57
|
`#loader-${indexValue}`
|
|
81
|
-
).innerHTML = `<span class="done">finished</span
|
|
58
|
+
).innerHTML = `<span class="done">finished</span>`;
|
|
82
59
|
document.querySelector(`#download-${indexValue}`).style.display =
|
|
83
|
-
|
|
84
|
-
resolve()
|
|
85
|
-
})
|
|
60
|
+
"inline-block";
|
|
61
|
+
resolve();
|
|
62
|
+
});
|
|
86
63
|
}).catch((error) => {
|
|
87
|
-
console.log(error)
|
|
88
|
-
})
|
|
64
|
+
console.log(error);
|
|
65
|
+
});
|
|
89
66
|
})
|
|
90
67
|
).then(() => {
|
|
91
|
-
document.querySelector(
|
|
92
|
-
document.querySelector(
|
|
93
|
-
|
|
94
|
-
document.querySelector(
|
|
95
|
-
let zip = new JSZip()
|
|
96
|
-
let zipFiles = zip.folder(`safeimagekit-batch-images`)
|
|
68
|
+
document.querySelector(".bottom-section-container").style.display = "flex";
|
|
69
|
+
document.querySelector(".bottom-section-container").style.padding =
|
|
70
|
+
"20px .75rem";
|
|
71
|
+
document.querySelector("#download-zip").style.display = "block";
|
|
72
|
+
let zip = new JSZip();
|
|
73
|
+
let zipFiles = zip.folder(`safeimagekit-batch-images`);
|
|
97
74
|
blobList.map((item) => {
|
|
98
75
|
zipFiles.file(
|
|
99
|
-
`safeimagekit-batch-${item.fileName.name.split(
|
|
76
|
+
`safeimagekit-batch-${item.fileName.name.split(".")[0]}.${
|
|
77
|
+
zipFileType ? zipFileType : "png"
|
|
100
78
|
}`,
|
|
101
79
|
getBase64String(item.blob),
|
|
102
80
|
{ base64: true }
|
|
103
|
-
)
|
|
104
|
-
})
|
|
81
|
+
);
|
|
82
|
+
});
|
|
105
83
|
|
|
106
|
-
document.querySelector(
|
|
107
|
-
zip.generateAsync({ type:
|
|
108
|
-
saveAs(content, `safeimagekit-batch-conversion.zip`)
|
|
109
|
-
if (lang ===
|
|
110
|
-
window.location.href = `/download?tool=${pageTool}
|
|
84
|
+
document.querySelector("#download-zip").addEventListener("click", () => {
|
|
85
|
+
zip.generateAsync({ type: "blob" }).then(function (content) {
|
|
86
|
+
saveAs(content, `safeimagekit-batch-conversion.zip`);
|
|
87
|
+
if (lang === "en") {
|
|
88
|
+
window.location.href = `/download?tool=${pageTool}`;
|
|
111
89
|
} else {
|
|
112
|
-
window.location.href = `/${lang}/download?tool=${pageTool}
|
|
90
|
+
window.location.href = `/${lang}/download?tool=${pageTool}`;
|
|
113
91
|
}
|
|
114
|
-
})
|
|
115
|
-
})
|
|
116
|
-
})
|
|
117
|
-
}
|
|
92
|
+
});
|
|
93
|
+
});
|
|
94
|
+
});
|
|
95
|
+
};
|
|
118
96
|
let renderFileTypesHtml = ` <option value="png">png</option>
|
|
119
97
|
<option value="jpg">jpg</option>
|
|
120
98
|
<option value="jpeg">jpeg</option>
|
|
121
99
|
<option value="webp">webp</option>
|
|
122
|
-
|
|
100
|
+
`;
|
|
123
101
|
|
|
124
102
|
const renderFiles = (files) => {
|
|
125
103
|
if (renderFileTypes !== null) {
|
|
126
|
-
renderFileTypesHtml =
|
|
104
|
+
renderFileTypesHtml = "";
|
|
127
105
|
renderFileTypes.map((i) => {
|
|
128
|
-
renderFileTypesHtml += `<option value="${i}">${i}</option
|
|
129
|
-
})
|
|
106
|
+
renderFileTypesHtml += `<option value="${i}">${i}</option>`;
|
|
107
|
+
});
|
|
130
108
|
}
|
|
131
109
|
files.map((file, index) => {
|
|
132
110
|
if (file) {
|
|
133
|
-
let filename = file.name
|
|
111
|
+
let filename = file.name;
|
|
134
112
|
if (file.name.split(".")[0].length > 10) {
|
|
135
|
-
let fName = file.name.split(".")[0]
|
|
136
|
-
let fExtention = file.name.split(".")[1]
|
|
137
|
-
filename =
|
|
138
|
-
|
|
113
|
+
let fName = file.name.split(".")[0];
|
|
114
|
+
let fExtention = file.name.split(".")[1];
|
|
115
|
+
filename =
|
|
116
|
+
fName.substr(0, 9) + "..." + fName.substr(-3) + "." + fExtention;
|
|
139
117
|
}
|
|
140
|
-
let loader =
|
|
118
|
+
let loader = "Ready";
|
|
141
119
|
showProcessingFiles.innerHTML += `
|
|
142
120
|
<tr>
|
|
143
121
|
<th scope="row" class="file-icon-row">
|
|
@@ -164,93 +142,78 @@ const renderFiles = (files) => {
|
|
|
164
142
|
</button>
|
|
165
143
|
</td>
|
|
166
144
|
</tr>
|
|
167
|
-
|
|
145
|
+
`;
|
|
168
146
|
}
|
|
169
|
-
})
|
|
170
|
-
}
|
|
147
|
+
});
|
|
148
|
+
};
|
|
171
149
|
|
|
172
150
|
const handleFile = (file) => {
|
|
173
|
-
showProcessingFiles.innerHTML =
|
|
151
|
+
showProcessingFiles.innerHTML = "";
|
|
174
152
|
if (file) {
|
|
175
153
|
for (let i = 0; i < file.length; i++) {
|
|
176
|
-
files.push(file[i])
|
|
177
|
-
stopLoading()
|
|
178
|
-
workspace.style.display =
|
|
179
|
-
document.querySelector(
|
|
180
|
-
let listItem = document.createElement(
|
|
181
|
-
listItem.style.listStyle =
|
|
182
|
-
let getFileSize = formatBytes(file[i].size)
|
|
183
|
-
listItem.innerHTML = `${file[i].name} (${getFileSize})
|
|
154
|
+
files.push(file[i]);
|
|
155
|
+
stopLoading();
|
|
156
|
+
workspace.style.display = "block";
|
|
157
|
+
document.querySelector("#file").style.display = "block";
|
|
158
|
+
let listItem = document.createElement("li");
|
|
159
|
+
listItem.style.listStyle = "none";
|
|
160
|
+
let getFileSize = formatBytes(file[i].size);
|
|
161
|
+
listItem.innerHTML = `${file[i].name} (${getFileSize})`;
|
|
184
162
|
// selectedFilesList.appendChild(listItem)
|
|
185
163
|
}
|
|
186
164
|
}
|
|
187
|
-
renderFiles(files)
|
|
188
|
-
submitButton.addEventListener(
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
if (bytes === 0) return
|
|
165
|
+
renderFiles(files);
|
|
166
|
+
submitButton.addEventListener("click", () => onSubmit(files));
|
|
167
|
+
};
|
|
168
|
+
const formatBytes = (bytes, decimals = 2) => {
|
|
169
|
+
if (bytes === 0) return "0 Bytes";
|
|
192
170
|
|
|
193
|
-
const k = 1024
|
|
194
|
-
const dm = decimals < 0 ? 0 : decimals
|
|
195
|
-
const sizes = [
|
|
171
|
+
const k = 1024;
|
|
172
|
+
const dm = decimals < 0 ? 0 : decimals;
|
|
173
|
+
const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
|
|
196
174
|
|
|
197
|
-
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
|
175
|
+
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
198
176
|
|
|
199
|
-
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) +
|
|
200
|
-
}
|
|
177
|
+
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
|
|
178
|
+
};
|
|
201
179
|
const handleDownload = (e) => {
|
|
202
|
-
let find = blobList[Number(e.id.replace(/^\D+/g,
|
|
203
|
-
let fileName = blobList[Number(e.id.replace(/^\D+/g,
|
|
180
|
+
let find = blobList[Number(e.id.replace(/^\D+/g, ""))].blob;
|
|
181
|
+
let fileName = blobList[Number(e.id.replace(/^\D+/g, ""))].fileName.name;
|
|
204
182
|
|
|
205
|
-
let format = document.querySelector(
|
|
183
|
+
let format = document.querySelector("#image-format").value;
|
|
206
184
|
|
|
207
185
|
switch (e.dataset.type) {
|
|
208
|
-
case
|
|
209
|
-
let a = document.createElement(
|
|
210
|
-
a.href = find
|
|
211
|
-
a.download = `safeimagekit-batch-${fileName.split(
|
|
212
|
-
document.body.appendChild(a)
|
|
213
|
-
a.click()
|
|
214
|
-
break
|
|
186
|
+
case "image":
|
|
187
|
+
let a = document.createElement("a");
|
|
188
|
+
a.href = find;
|
|
189
|
+
a.download = `safeimagekit-batch-${fileName.split(".")[0]}.${format}`;
|
|
190
|
+
document.body.appendChild(a);
|
|
191
|
+
a.click();
|
|
192
|
+
break;
|
|
215
193
|
default:
|
|
216
|
-
break
|
|
194
|
+
break;
|
|
217
195
|
}
|
|
218
|
-
}
|
|
196
|
+
};
|
|
219
197
|
const showLoading = () => {
|
|
220
|
-
document.querySelector(
|
|
221
|
-
document.querySelector(
|
|
222
|
-
}
|
|
198
|
+
document.querySelector("#file-loader").style.display = "flex";
|
|
199
|
+
document.querySelector(".file-input").style.display = "none";
|
|
200
|
+
};
|
|
223
201
|
const stopLoading = () => {
|
|
224
|
-
fileDropBox.style.display =
|
|
225
|
-
}
|
|
226
|
-
const showDropDown = document.querySelector('.file-pick-dropdown')
|
|
227
|
-
const icon = document.querySelector('.arrow-sign')
|
|
228
|
-
const dropDown = document.querySelector('.file-picker-dropdown')
|
|
229
|
-
showDropDown.addEventListener('click', () => {
|
|
230
|
-
addScripts()
|
|
231
|
-
if (dropDown.style.display !== 'none') {
|
|
232
|
-
dropDown.style.display = 'none'
|
|
233
|
-
icon.classList.remove('fa-angle-up')
|
|
234
|
-
icon.classList.add('fa-angle-down')
|
|
235
|
-
} else {
|
|
236
|
-
dropDown.style.display = 'block'
|
|
237
|
-
icon.classList.remove('fa-angle-down')
|
|
238
|
-
icon.classList.add('fa-angle-up')
|
|
239
|
-
}
|
|
240
|
-
})
|
|
202
|
+
fileDropBox.style.display = "none";
|
|
203
|
+
};
|
|
241
204
|
|
|
242
205
|
const getBase64String = (dataURL) => {
|
|
243
|
-
const idx = dataURL.indexOf(
|
|
244
|
-
return dataURL.substring(idx)
|
|
245
|
-
}
|
|
206
|
+
const idx = dataURL.indexOf("base64,") + "base64,".length;
|
|
207
|
+
return dataURL.substring(idx);
|
|
208
|
+
};
|
|
246
209
|
const dataURLtoBlob = (dataurl) => {
|
|
247
|
-
let arr = dataurl.split(
|
|
210
|
+
let arr = dataurl.split(","),
|
|
248
211
|
mime = arr[0].match(/:(.*?);/)[1],
|
|
249
212
|
bstr = atob(arr[1]),
|
|
250
213
|
n = bstr.length,
|
|
251
|
-
u8arr = new Uint8Array(n)
|
|
214
|
+
u8arr = new Uint8Array(n);
|
|
252
215
|
while (n--) {
|
|
253
|
-
u8arr[n] = bstr.charCodeAt(n)
|
|
216
|
+
u8arr[n] = bstr.charCodeAt(n);
|
|
254
217
|
}
|
|
255
|
-
return new Blob([u8arr], { type: mime })
|
|
256
|
-
}
|
|
218
|
+
return new Blob([u8arr], { type: mime });
|
|
219
|
+
};
|
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: 4.5.
|
|
4
|
+
version: 4.5.7
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- vivek-appscms
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2024-05-
|
|
11
|
+
date: 2024-05-17 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|