Completed Image Editor

pull/2/head v1.0-alpha.3
NGPixel 8 years ago
parent 741a6674af
commit 85c4e79726

File diff suppressed because one or more lines are too long

@ -16,11 +16,15 @@ let vueImage = new Vue({
images: [], images: [],
uploadSucceeded: false, uploadSucceeded: false,
postUploadChecks: 0, postUploadChecks: 0,
renameImageShow: false,
renameImageId: '',
renameImageFilename: '',
deleteImageShow: false, deleteImageShow: false,
deleteImageId: 0, deleteImageId: '',
deleteImageFilename: '' deleteImageFilename: ''
}, },
methods: { methods: {
open: () => { open: () => {
mdeModalOpenState = true; mdeModalOpenState = true;
$('#modal-editor-image').slideDown(); $('#modal-editor-image').slideDown();
@ -30,6 +34,17 @@ let vueImage = new Vue({
mdeModalOpenState = false; mdeModalOpenState = false;
$('#modal-editor-image').slideUp(); $('#modal-editor-image').slideUp();
}, },
// -------------------------------------------
// INSERT IMAGE
// -------------------------------------------
selectImage: (imageId) => {
vueImage.currentImage = imageId;
},
selectAlignment: (align) => {
vueImage.currentAlign = align;
},
insertImage: (ev) => { insertImage: (ev) => {
if(mde.codemirror.doc.somethingSelected()) { if(mde.codemirror.doc.somethingSelected()) {
@ -57,6 +72,11 @@ let vueImage = new Vue({
vueImage.cancel(); vueImage.cancel();
}, },
// -------------------------------------------
// NEW FOLDER
// -------------------------------------------
newFolder: (ev) => { newFolder: (ev) => {
vueImage.newFolderName = ''; vueImage.newFolderName = '';
vueImage.newFolderError = false; vueImage.newFolderError = false;
@ -90,6 +110,11 @@ let vueImage = new Vue({
}); });
}, },
// -------------------------------------------
// FETCH FROM URL
// -------------------------------------------
fetchFromUrl: (ev) => { fetchFromUrl: (ev) => {
vueImage.fetchFromUrlURL = ''; vueImage.fetchFromUrlURL = '';
vueImage.fetchFromUrlShow = true; vueImage.fetchFromUrlShow = true;
@ -107,7 +132,7 @@ let vueImage = new Vue({
Vue.nextTick(() => { Vue.nextTick(() => {
socket.emit('uploadsFetchFileFromURL', { folder: vueImage.currentFolder, fetchUrl: vueImage.fetchFromUrlURL }, (data) => { socket.emit('uploadsFetchFileFromURL', { folder: vueImage.currentFolder, fetchUrl: vueImage.fetchFromUrlURL }, (data) => {
if(data.ok) { if(data.ok) {
vueImage.waitUploadComplete(); vueImage.waitChangeComplete(vueImage.images.length, true);
} else { } else {
vueImage.isLoading = false; vueImage.isLoading = false;
alerts.pushError('Upload error', data.msg); alerts.pushError('Upload error', data.msg);
@ -117,22 +142,92 @@ let vueImage = new Vue({
}, },
/** // -------------------------------------------
* Select a folder // RENAME IMAGE
* // -------------------------------------------
* @param {string} fldName The folder name
* @return {Void} Void renameImage: () => {
*/
let c = _.find(vueImage.images, ['_id', vueImage.renameImageId ]);
vueImage.renameImageFilename = c.basename || '';
vueImage.renameImageShow = true;
_.delay(() => {
$('#txt-editor-renameimage').focus();
_.defer(() => { $('#txt-editor-renameimage').select(); });
}, 400);
},
renameImageDiscard: () => {
vueImage.renameImageShow = false;
},
renameImageGo: () => {
vueImage.renameImageDiscard();
vueImage.isLoadingText = 'Renaming image...';
vueImage.isLoading = true;
Vue.nextTick(() => {
socket.emit('uploadsRenameFile', { uid: vueImage.renameImageId, folder: vueImage.currentFolder, filename: vueImage.renameImageFilename }, (data) => {
if(data.ok) {
vueImage.waitChangeComplete(vueImage.images.length, false);
} else {
vueImage.isLoading = false;
alerts.pushError('Rename error', data.msg);
}
});
});
},
// -------------------------------------------
// MOVE IMAGE
// -------------------------------------------
moveImage: (uid, fld) => {
vueImage.isLoadingText = 'Moving image...';
vueImage.isLoading = true;
Vue.nextTick(() => {
socket.emit('uploadsMoveFile', { uid: uid, folder: fld }, (data) => {
if(data.ok) {
vueImage.loadImages();
} else {
vueImage.isLoading = false;
alerts.pushError('Rename error', data.msg);
}
});
});
},
// -------------------------------------------
// DELETE IMAGE
// -------------------------------------------
deleteImageWarn: (show) => {
if(show) {
let c = _.find(vueImage.images, ['_id', vueImage.deleteImageId ]);
vueImage.deleteImageFilename = c.filename || 'this image';
}
vueImage.deleteImageShow = show;
},
deleteImageGo: () => {
vueImage.deleteImageWarn(false);
vueImage.isLoadingText = 'Deleting image...';
vueImage.isLoading = true;
Vue.nextTick(() => {
socket.emit('uploadsDeleteFile', { uid: vueImage.deleteImageId }, (data) => {
vueImage.loadImages();
});
});
},
// -------------------------------------------
// LOAD FROM REMOTE
// -------------------------------------------
selectFolder: (fldName) => { selectFolder: (fldName) => {
vueImage.currentFolder = fldName; vueImage.currentFolder = fldName;
vueImage.loadImages(); vueImage.loadImages();
}, },
/**
* Refresh folder list and load images from root
*
* @return {Void} Void
*/
refreshFolders: () => { refreshFolders: () => {
vueImage.isLoadingText = 'Fetching folders list...'; vueImage.isLoadingText = 'Fetching folders list...';
vueImage.isLoading = true; vueImage.isLoading = true;
@ -146,16 +241,12 @@ let vueImage = new Vue({
}); });
}, },
/**
* Loads images in selected folder
*
* @return {Void} Void
*/
loadImages: (silent) => { loadImages: (silent) => {
if(!silent) { if(!silent) {
vueImage.isLoadingText = 'Fetching images...'; vueImage.isLoadingText = 'Fetching images...';
vueImage.isLoading = true; vueImage.isLoading = true;
} }
return new Promise((resolve, reject) => {
Vue.nextTick(() => { Vue.nextTick(() => {
socket.emit('uploadsGetImages', { folder: vueImage.currentFolder }, (data) => { socket.emit('uploadsGetImages', { folder: vueImage.currentFolder }, (data) => {
vueImage.images = data; vueImage.images = data;
@ -163,41 +254,53 @@ let vueImage = new Vue({
vueImage.isLoading = false; vueImage.isLoading = false;
} }
vueImage.attachContextMenus(); vueImage.attachContextMenus();
resolve(true);
});
}); });
}); });
}, },
/** waitChangeComplete: (oldAmount, expectChange) => {
* Select an image
* expectChange = (_.isBoolean(expectChange)) ? expectChange : true;
* @param {String} imageId The image identifier
* @return {Void} Void vueImage.postUploadChecks++;
*/ vueImage.isLoadingText = 'Processing...';
selectImage: (imageId) => {
vueImage.currentImage = imageId; Vue.nextTick(() => {
}, vueImage.loadImages(true).then(() => {
if((vueImage.images.length !== oldAmount) === expectChange) {
vueImage.postUploadChecks = 0;
vueImage.isLoading = false;
} else if(vueImage.postUploadChecks > 5) {
vueImage.postUploadChecks = 0;
vueImage.isLoading = false;
alerts.pushError('Unable to fetch updated listing', 'Try again later');
} else {
_.delay(() => {
vueImage.waitChangeComplete(oldAmount, expectChange);
}, 1500);
}
});
});
/**
* Set image alignment
*
* @param {String} align The alignment
* @return {Void} Void
*/
selectAlignment: (align) => {
vueImage.currentAlign = align;
}, },
/** // -------------------------------------------
* Attach right-click context menus to images and folders // IMAGE CONTEXT MENU
* // -------------------------------------------
* @return {Void} Void
*/
attachContextMenus: () => { attachContextMenus: () => {
let moveFolders = _.map(vueImage.folders, (f) => { let moveFolders = _.map(vueImage.folders, (f) => {
return { return {
name: (f !== '') ? f : '/ (root)', name: (f !== '') ? f : '/ (root)',
icon: 'fa-folder' icon: 'fa-folder',
callback: (key, opt) => {
let moveImageId = _.toString($(opt.$trigger).data('uid'));
let moveImageDestFolder = _.nth(vueImage.folders, key);
vueImage.moveImage(moveImageId, moveImageDestFolder);
}
}; };
}); });
@ -221,7 +324,8 @@ let vueImage = new Vue({
name: "Rename", name: "Rename",
icon: "fa-edit", icon: "fa-edit",
callback: (key, opt) => { callback: (key, opt) => {
alert("Clicked on " + key); vueImage.renameImageId = _.toString(opt.$trigger[0].dataset.uid);
vueImage.renameImage();
} }
}, },
move: { move: {
@ -233,60 +337,12 @@ let vueImage = new Vue({
name: "Delete", name: "Delete",
icon: "fa-trash", icon: "fa-trash",
callback: (key, opt) => { callback: (key, opt) => {
vueImage.deleteImageId = _.toString($(opt.$trigger).data('uid')); vueImage.deleteImageId = _.toString(opt.$trigger[0].dataset.uid);
vueImage.deleteImageWarn(true); vueImage.deleteImageWarn(true);
} }
} }
} }
}); });
},
deleteImageWarn: (show) => {
if(show) {
let c = _.find(vueImage.images, ['_id', vueImage.deleteImageId ]);
if(c) {
vueImage.deleteImageFilename = c.filename;
} else {
vueImage.deleteImageFilename = 'this image';
}
}
vueImage.deleteImageShow = show;
},
deleteImageGo: () => {
vueImage.deleteImageWarn(false);
vueImage.isLoadingText = 'Deleting image...';
vueImage.isLoading = true;
Vue.nextTick(() => {
socket.emit('uploadsDeleteFile', { uid: vueImage.deleteImageId }, (data) => {
vueImage.loadImages();
});
});
},
waitUploadComplete: () => {
vueImage.postUploadChecks++;
vueImage.isLoadingText = 'Processing...';
let currentUplAmount = vueImage.images.length;
vueImage.loadImages(true);
Vue.nextTick(() => {
_.delay(() => {
if(currentUplAmount !== vueImage.images.length) {
vueImage.postUploadChecks = 0;
vueImage.isLoading = false;
} else if(vueImage.postUploadChecks > 5) {
vueImage.postUploadChecks = 0;
vueImage.isLoading = false;
alerts.pushError('Unable to fetch new listing', 'Try again later');
} else {
vueImage.waitUploadComplete();
}
}, 2000);
});
} }
} }
@ -294,6 +350,8 @@ let vueImage = new Vue({
$('#btn-editor-uploadimage input').on('change', (ev) => { $('#btn-editor-uploadimage input').on('change', (ev) => {
let curImageAmount = vueImage.images.length;
$(ev.currentTarget).simpleUpload("/uploads/img", { $(ev.currentTarget).simpleUpload("/uploads/img", {
name: 'imgfile', name: 'imgfile',
@ -346,7 +404,7 @@ $('#btn-editor-uploadimage input').on('change', (ev) => {
finish: () => { finish: () => {
if(vueImage.uploadSucceeded) { if(vueImage.uploadSucceeded) {
vueImage.waitUploadComplete(); vueImage.waitChangeComplete(curImageAmount, true);
} else { } else {
vueImage.isLoading = false; vueImage.isLoading = false;
} }

@ -57,4 +57,28 @@ module.exports = (socket) => {
}); });
}); });
socket.on('uploadsRenameFile', (data, cb) => {
cb = cb || _.noop;
upl.moveUploadsFile(data.uid, data.folder, data.filename).then((f) => {
return cb({ ok: true }) || true;
}).catch((err) => {
return cb({
ok: false,
msg: err.message
}) || true;
});
});
socket.on('uploadsMoveFile', (data, cb) => {
cb = cb || _.noop;
upl.moveUploadsFile(data.uid, data.folder).then((f) => {
return cb({ ok: true }) || true;
}).catch((err) => {
return cb({
ok: false,
msg: err.message
}) || true;
});
});
}; };

@ -66,7 +66,7 @@ module.exports = {
let pInfo = self.parseUploadsRelPath(p); let pInfo = self.parseUploadsRelPath(p);
return self.processFile(pInfo.folder, pInfo.filename).then((mData) => { return self.processFile(pInfo.folder, pInfo.filename).then((mData) => {
return db.UplFile.create(mData); return db.UplFile.findByIdAndUpdate(mData._id, mData, { upsert: true });
}).then(() => { }).then(() => {
return git.commitUploads('Uploaded ' + p); return git.commitUploads('Uploaded ' + p);
}); });
@ -78,12 +78,7 @@ module.exports = {
self._watcher.on('unlink', (p) => { self._watcher.on('unlink', (p) => {
let pInfo = self.parseUploadsRelPath(p); let pInfo = self.parseUploadsRelPath(p);
return db.UplFile.findOneAndRemove({ return git.commitUploads('Deleted/Renamed ' + p);
folder: 'f:' + pInfo.folder,
filename: pInfo.filename
}).then(() => {
return git.commitUploads('Deleted ' + p);
});
}); });
@ -113,7 +108,10 @@ module.exports = {
return db.UplFolder.remove({}).then(() => { return db.UplFolder.remove({}).then(() => {
return db.UplFolder.insertMany(_.map(folderNames, (f) => { return db.UplFolder.insertMany(_.map(folderNames, (f) => {
return { name: f }; return {
_id: 'f:' + f,
name: f
};
})); }));
}).then(() => { }).then(() => {

@ -6,6 +6,7 @@ const path = require('path'),
multer = require('multer'), multer = require('multer'),
request = require('request'), request = require('request'),
url = require('url'), url = require('url'),
farmhash = require('farmhash'),
_ = require('lodash'); _ = require('lodash');
var regFolderName = new RegExp("^[a-z0-9][a-z0-9\-]*[a-z0-9]$"); var regFolderName = new RegExp("^[a-z0-9][a-z0-9\-]*[a-z0-9]$");
@ -231,6 +232,78 @@ module.exports = {
}); });
},
/**
* Move/Rename a file
*
* @param {String} uid The file ID
* @param {String} fld The destination folder
* @param {String} nFilename The new filename (optional)
* @return {Promise} Promise of the operation
*/
moveUploadsFile(uid, fld, nFilename) {
let self = this;
return db.UplFolder.findById('f:' + fld).then((folder) => {
if(folder) {
return db.UplFile.findById(uid).then((originFile) => {
//-> Check if rename is valid
let nameCheck = null;
if(nFilename) {
let originFileObj = path.parse(originFile.filename);
nameCheck = lcdata.validateUploadsFilename(nFilename + originFileObj.ext, folder.name);
} else {
nameCheck = Promise.resolve(originFile.filename);
}
return nameCheck.then((destFilename) => {
let originFolder = (originFile.folder && originFile.folder !== 'f:') ? originFile.folder.slice(2) : './';
let sourceFilePath = path.resolve(self._uploadsPath, originFolder, originFile.filename);
let destFilePath = path.resolve(self._uploadsPath, folder.name, destFilename);
let preMoveOps = [];
//-> Check for invalid operations
if(sourceFilePath === destFilePath) {
return Promise.reject(new Error('Invalid Operation!'));
}
//-> Delete DB entry
preMoveOps.push(db.UplFile.findByIdAndRemove(uid));
//-> Move thumbnail ahead to avoid re-generation
if(originFile.category === 'image') {
let fUid = farmhash.fingerprint32(folder.name + '/' + destFilename);
let sourceThumbPath = path.resolve(self._uploadsThumbsPath, originFile._id + '.png');
let destThumbPath = path.resolve(self._uploadsThumbsPath, fUid + '.png');
preMoveOps.push(fs.moveAsync(sourceThumbPath, destThumbPath));
} else {
preMoveOps.push(Promise.resolve(true));
}
//-> Proceed to move actual file
return Promise.all(preMoveOps).then(() => {
return fs.moveAsync(sourceFilePath, destFilePath, {
clobber: false
});
});
})
});
} else {
return Promise.reject(new Error('Invalid Destination Folder'));
}
});
} }
}; };

@ -98,6 +98,23 @@
a.card-footer-item(v-on:click="fetchFromUrlDiscard") Discard a.card-footer-item(v-on:click="fetchFromUrlDiscard") Discard
a.card-footer-item(v-on:click="fetchFromUrlGo") Fetch a.card-footer-item(v-on:click="fetchFromUrlGo") Fetch
.modal(v-bind:class="{ 'is-active': renameImageShow }")
.modal-background
.modal-container
.modal-content
.card.is-fullwidth
header.card-header
p.card-header-title Rename Image
.card-content
.content
label.label Enter the new filename (without the extension) of the image:
p.control
input.input#txt-editor-renameimage(type='text', placeholder='filename', v-model='renameImageFilename')
span.help.is-danger.is-hidden This filename is invalid!
footer.card-footer
a.card-footer-item(v-on:click="renameImageDiscard") Discard
a.card-footer-item(v-on:click="renameImageGo") Rename
.modal(v-bind:class="{ 'is-active': deleteImageShow }") .modal(v-bind:class="{ 'is-active': deleteImageShow }")
.modal-background .modal-background
.modal-container .modal-container

Loading…
Cancel
Save