2017-06-22 10:00:52 +00:00
|
|
|
(function() {
|
|
|
|
var Status = {
|
|
|
|
NONE : 0
|
|
|
|
,WAITING : 1
|
|
|
|
,UPLOADING : 2
|
|
|
|
,UPLOADED : 3
|
|
|
|
};
|
2015-02-01 03:21:54 +00:00
|
|
|
|
2022-05-26 06:08:31 +00:00
|
|
|
Hedera.Photos = new Class({
|
2016-09-26 09:28:47 +00:00
|
|
|
Extends: Hedera.Form
|
2017-05-08 15:54:35 +00:00
|
|
|
,filesData: []
|
|
|
|
,uploadCount: 0
|
|
|
|
,errors: false
|
2017-06-22 10:00:52 +00:00
|
|
|
,uploadQueue: []
|
|
|
|
,isUploading: false
|
2015-02-01 03:21:54 +00:00
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
,activate: function() {
|
2015-03-06 23:33:54 +00:00
|
|
|
this.$('schema').value = 'catalog';
|
2015-02-01 03:21:54 +00:00
|
|
|
}
|
2017-05-08 15:54:35 +00:00
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
,addFiles: function(files) {
|
2017-05-08 15:54:35 +00:00
|
|
|
if (!files)
|
|
|
|
return;
|
|
|
|
|
|
|
|
for (var i = 0; i < files.length; i++)
|
2019-02-07 13:09:56 +00:00
|
|
|
this.addFile(files[i]);
|
2017-05-08 15:54:35 +00:00
|
|
|
}
|
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
,addFile: function(file) {
|
2017-05-08 15:54:35 +00:00
|
|
|
var doc = document;
|
2019-02-07 13:09:56 +00:00
|
|
|
var li = doc.createElement('div');
|
2017-05-08 15:54:35 +00:00
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
var div = doc.createElement('div');
|
|
|
|
div.className = 'thumb';
|
|
|
|
li.appendChild(div);
|
2015-02-01 03:21:54 +00:00
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
var thumb = doc.createElement('img');
|
2017-05-08 15:54:35 +00:00
|
|
|
thumb.file = file;
|
2019-02-07 13:09:56 +00:00
|
|
|
div.appendChild(thumb);
|
2017-05-08 15:54:35 +00:00
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
var reader = new FileReader();
|
|
|
|
reader.onload = function(e) {
|
|
|
|
thumb.src = e.target.result;
|
|
|
|
};
|
2017-05-08 15:54:35 +00:00
|
|
|
reader.readAsDataURL(file);
|
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
var name = doc.createElement('input');
|
2017-05-08 15:54:35 +00:00
|
|
|
name.type = 'text';
|
2019-02-07 13:09:56 +00:00
|
|
|
name.value = getFileName(file.name);
|
|
|
|
li.appendChild(name);
|
2017-05-08 15:54:35 +00:00
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
var statusNode = doc.createElement('div');
|
2017-06-22 10:00:52 +00:00
|
|
|
statusNode.className = 'status';
|
2019-02-07 13:09:56 +00:00
|
|
|
li.appendChild(statusNode);
|
|
|
|
|
2017-05-08 15:54:35 +00:00
|
|
|
var fileData = {
|
2019-02-07 13:09:56 +00:00
|
|
|
li: li,
|
2017-05-08 15:54:35 +00:00
|
|
|
file: file,
|
|
|
|
name: name,
|
2019-02-07 13:09:56 +00:00
|
|
|
statusNode: statusNode
|
2017-05-08 15:54:35 +00:00
|
|
|
};
|
2022-05-26 06:08:31 +00:00
|
|
|
|
|
|
|
var button = new Htk.Button({
|
|
|
|
tip: 'Remove',
|
|
|
|
icon: 'delete'
|
|
|
|
});
|
|
|
|
button.node.addEventListener('click',
|
|
|
|
() => this.onFileRemove(fileData));
|
|
|
|
li.appendChild(button.node);
|
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
this.filesData.push(fileData);
|
2017-05-08 15:54:35 +00:00
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
this.$('file-list').appendChild(li);
|
|
|
|
this.setImageStatus(fileData, Status.NONE, 'add', _('Pending upload'));
|
2016-08-30 07:43:47 +00:00
|
|
|
}
|
2017-05-08 15:54:35 +00:00
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
,onUploadClick: function() {
|
2017-05-08 15:54:35 +00:00
|
|
|
var filesData = this.filesData;
|
|
|
|
var count = 0;
|
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
for (var i = 0; i < filesData.length; i++) {
|
2017-05-08 15:54:35 +00:00
|
|
|
var fileData = filesData[i];
|
2017-06-22 10:00:52 +00:00
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
if (fileData.status === Status.NONE) {
|
|
|
|
this.setImageStatus(
|
2017-06-22 10:00:52 +00:00
|
|
|
fileData, Status.WAITING, 'cloud-upload', _('Waiting for upload'));
|
|
|
|
fileData.name.disabled = true;
|
2019-02-07 13:09:56 +00:00
|
|
|
this.uploadQueue.push(fileData);
|
2017-05-08 15:54:35 +00:00
|
|
|
count++;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (count === 0)
|
2019-02-07 13:09:56 +00:00
|
|
|
Htk.Toast.showWarning(_('There are no files to upload'));
|
2017-06-22 10:00:52 +00:00
|
|
|
else
|
2019-02-07 13:09:56 +00:00
|
|
|
this.uploadNextFile();
|
2017-06-22 10:00:52 +00:00
|
|
|
}
|
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
,uploadNextFile: function() {
|
2017-06-22 10:00:52 +00:00
|
|
|
if (this.isUploading)
|
|
|
|
return;
|
|
|
|
|
|
|
|
this.isUploading = true;
|
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
var fileData = this.uploadQueue.shift();
|
|
|
|
this.setImageStatus(
|
2017-06-22 10:00:52 +00:00
|
|
|
fileData, Status.UPLOADING, 'upload', _('Uploading file'));
|
|
|
|
|
|
|
|
var formData = new FormData();
|
2019-02-07 13:09:56 +00:00
|
|
|
formData.append('updateMatching', this.$('update-matching').value);
|
|
|
|
formData.append('image', fileData.file);
|
|
|
|
formData.append('name', fileData.name.value);
|
|
|
|
formData.append('schema', this.$('schema').value);
|
|
|
|
formData.append('srv', 'json:image/upload');
|
|
|
|
this.conn.sendFormData(formData,
|
|
|
|
this.onFileUpload.bind(this, fileData));
|
2017-05-08 15:54:35 +00:00
|
|
|
}
|
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
,onFileUpload: function(fileData, data, error) {
|
2017-06-22 10:00:52 +00:00
|
|
|
this.isUploading = false;
|
2017-05-08 15:54:35 +00:00
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
if (data) {
|
|
|
|
this.setImageStatus(
|
2017-06-22 10:00:52 +00:00
|
|
|
fileData, Status.UPLOADED, 'ok', _('Image uploaded'));
|
2019-02-07 13:09:56 +00:00
|
|
|
} else {
|
|
|
|
this.setImageStatus(
|
2017-06-22 10:00:52 +00:00
|
|
|
fileData, Status.NONE, 'error', error.message);
|
|
|
|
fileData.name.disabled = false;
|
2017-05-08 15:54:35 +00:00
|
|
|
this.errors = true;
|
|
|
|
}
|
2015-02-01 03:21:54 +00:00
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
if (this.uploadQueue.length === 0) {
|
2017-06-22 10:00:52 +00:00
|
|
|
if (this.errors)
|
2019-02-07 13:09:56 +00:00
|
|
|
Htk.Toast.showError(_('Some errors happened on upload'));
|
2017-06-22 10:00:52 +00:00
|
|
|
else
|
2019-02-07 13:09:56 +00:00
|
|
|
Htk.Toast.showMessage(_('Upload finished successfully'));
|
2017-05-08 15:54:35 +00:00
|
|
|
|
|
|
|
this.errors = false;
|
2019-02-07 13:09:56 +00:00
|
|
|
} else
|
|
|
|
this.uploadNextFile();
|
2017-06-22 10:00:52 +00:00
|
|
|
}
|
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
,setImageStatus: function(fileData, status, icon, title) {
|
2017-06-22 10:00:52 +00:00
|
|
|
fileData.status = status;
|
|
|
|
|
|
|
|
var statusNode = fileData.statusNode;
|
2019-02-07 13:09:56 +00:00
|
|
|
Vn.Node.removeChilds(statusNode);
|
2017-06-22 10:00:52 +00:00
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
var iconNode = new Htk.Icon({icon: icon});
|
|
|
|
statusNode.appendChild(iconNode.node);
|
2017-06-22 10:00:52 +00:00
|
|
|
statusNode.title = title ? title : '';
|
2017-05-08 15:54:35 +00:00
|
|
|
}
|
|
|
|
|
2022-05-26 06:08:31 +00:00
|
|
|
,onFileRemove: function(fileData) {
|
2019-02-07 13:09:56 +00:00
|
|
|
this.$('file-list').removeChild(fileData.li);
|
2016-10-11 14:45:10 +00:00
|
|
|
|
2017-05-08 15:54:35 +00:00
|
|
|
for (var i = 0; i < this.filesData.length; i++)
|
2019-02-07 13:09:56 +00:00
|
|
|
if (this.filesData[i] === fileData) {
|
|
|
|
this.filesData.splice(i, 1);
|
2017-05-08 15:54:35 +00:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
,onClearClick: function() {
|
2017-05-08 15:54:35 +00:00
|
|
|
this.filesData = [];
|
2019-02-07 13:09:56 +00:00
|
|
|
Vn.Node.removeChilds(this.$('file-list'));
|
2017-05-08 15:54:35 +00:00
|
|
|
}
|
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
,onDropzoneClick: function() {
|
|
|
|
this.$('file').click();
|
2017-05-08 15:54:35 +00:00
|
|
|
}
|
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
,onFileChange: function() {
|
|
|
|
this.addFiles(this.$('file').files);
|
2017-05-08 15:54:35 +00:00
|
|
|
}
|
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
,onDragEnter: function() {
|
|
|
|
this.$('dropzone').classList.add('dragover');
|
2017-05-08 15:54:35 +00:00
|
|
|
}
|
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
,onDragLeave: function() {
|
|
|
|
this.$('dropzone').classList.remove('dragover');
|
2017-05-08 15:54:35 +00:00
|
|
|
}
|
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
,onDragOver: function(event) {
|
|
|
|
event.preventDefault();
|
2017-05-08 15:54:35 +00:00
|
|
|
}
|
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
,onDragEnd: function(event) {
|
|
|
|
this.$('dropzone').classList.remove('dragover');
|
|
|
|
event.dataTransfer.clearData();
|
2017-05-08 15:54:35 +00:00
|
|
|
}
|
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
,onDrop: function(event) {
|
|
|
|
event.preventDefault();
|
|
|
|
this.addFiles(event.dataTransfer.files);
|
2015-02-01 03:21:54 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
function getFileName(path) {
|
|
|
|
var barIndex = path.lastIndexOf('/');
|
2017-05-08 15:54:35 +00:00
|
|
|
if (barIndex === -1)
|
2019-02-07 13:09:56 +00:00
|
|
|
barIndex = path.lastIndexOf('\\');
|
2017-05-08 15:54:35 +00:00
|
|
|
if (barIndex === -1)
|
|
|
|
barIndex = 0;
|
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
var dotIndex = path.lastIndexOf('.');
|
2017-05-08 15:54:35 +00:00
|
|
|
if (dotIndex === -1)
|
|
|
|
dotIndex = 0;
|
|
|
|
|
2019-02-07 13:09:56 +00:00
|
|
|
return path.substr(barIndex, dotIndex);
|
2017-05-08 15:54:35 +00:00
|
|
|
}
|
2017-06-22 10:00:52 +00:00
|
|
|
})();
|