(function() { var Status = { NONE : 0 ,WAITING : 1 ,UPLOADING : 2 ,UPLOADED : 3 }; Hedera.Photos = new Class ({ Extends: Hedera.Form ,filesData: [] ,uploadCount: 0 ,errors: false ,uploadQueue: [] ,isUploading: false ,activate: function () { this.$('schema').value = 'catalog'; } ,addFiles: function (files) { if (!files) return; for (var i = 0; i < files.length; i++) this.addFile (files[i]); } ,addFile: function (file) { var doc = document; var div = doc.createElement ('div'); var button = new Htk.Button ({ tip: 'Remove', icon: 'delete' }); button.on ('click', this.onFileRemove, this); div.appendChild (button.node); var thumb = doc.createElement ('img'); thumb.file = file; thumb.className = 'thumb'; div.appendChild (thumb); var reader = new FileReader (); reader.onload = function (e) { thumb.src = e.target.result; }; reader.readAsDataURL(file); var name = doc.createElement ('input'); name.type = 'text'; name.value = getFileName (file.name); div.appendChild (name); var statusNode = doc.createElement ('span'); statusNode.className = 'status'; div.appendChild (statusNode); var fileData = { div: div, file: file, name: name, statusNode: statusNode, status: Status.NONE }; this.filesData.push (fileData); button.value = fileData; this.$('file-list').appendChild (div); } ,onUploadClick: function () { var filesData = this.filesData; var count = 0; for (var i = 0; i < filesData.length; i++) { var fileData = filesData[i]; if (fileData.status === Status.NONE) { this.setImageStatus ( fileData, Status.WAITING, 'cloud-upload', _('Waiting for upload')); fileData.name.disabled = true; this.uploadQueue.push (fileData); count++; } } if (count === 0) Htk.Toast.showWarning (_('There are no files to upload')); else this.uploadNextFile (); } ,uploadNextFile: function () { if (this.isUploading) return; this.isUploading = true; var fileData = this.uploadQueue.shift (); this.setImageStatus ( fileData, Status.UPLOADING, 'upload', _('Uploading file')); var formData = new FormData(); 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)); } ,onFileUpload: function (fileData, data, error) { this.isUploading = false; if (data) { this.setImageStatus ( fileData, Status.UPLOADED, 'ok', _('Image uploaded')); } else { this.setImageStatus ( fileData, Status.NONE, 'error', error.message); fileData.name.disabled = false; this.errors = true; } if (this.uploadQueue.length === 0) { if (this.errors) Htk.Toast.showError (_('Some errors happened on upload')); else Htk.Toast.showMessage (_('Upload finished successfully')); this.errors = false; } else this.uploadNextFile (); } ,setImageStatus: function (fileData, status, icon, title) { fileData.status = status; var statusNode = fileData.statusNode; Vn.Node.removeChilds (statusNode); var iconNode = new Htk.Icon ({icon: icon}); statusNode.appendChild (iconNode.node); statusNode.title = title ? title : ''; } ,onFileRemove: function (button) { var fileData = button.value; this.$('file-list').removeChild (fileData.div); for (var i = 0; i < this.filesData.length; i++) if (this.filesData[i] === fileData) { this.filesData.splice (i, 1); break; } } ,onClearClick: function () { this.filesData = []; Vn.Node.removeChilds (this.$('file-list')); } ,onDropzoneClick: function () { this.$('file').click (); } ,onFileChange: function () { this.addFiles (this.$('file').files); } ,onDragEnter: function (event) { Vn.Node.addClass (this.$('dropzone'), 'dragover'); } ,onDragLeave: function (event) { Vn.Node.removeClass (this.$('dropzone'), 'dragover'); } ,onDragOver: function (event) { event.preventDefault (); } ,onDragEnd: function (event) { Vn.Node.removeClass (this.$('dropzone'), 'dragover'); event.dataTransfer.clearData (); } ,onDrop: function (event) { event.preventDefault (); this.addFiles (event.dataTransfer.files); } }); function getFileName (path) { var barIndex = path.lastIndexOf ('/'); if (barIndex === -1) barIndex = path.lastIndexOf ('\\'); if (barIndex === -1) barIndex = 0; var dotIndex = path.lastIndexOf ('.'); if (dotIndex === -1) dotIndex = 0; return path.substr (barIndex, dotIndex); } })();