richard
/
wiki
mirror of https://github.com/Requarks/wiki.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Completed Image Editor

pull/2/head v1.0-alpha.3
NGPixel 8 years ago
parent
741a6674af
commit
85c4e79726
6 changed files with 277 additions and 107 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      assets/js/app.js
  2. 254
      client/js/components/editor-image.js
  3. 24
      controllers/ws.js
  4. 14
      libs/uploads-agent.js
  5. 73
      libs/uploads.js
  6. 17
      views/modals/editor-image.pug

2
assets/js/app.js
File diff suppressed because it is too large
View File

254
client/js/components/editor-image.js
View File

@ -16,11 +16,15 @@ let vueImage = new Vue({
images: [],
uploadSucceeded: false,
postUploadChecks: 0,
renameImageShow: false,
renameImageId: '',
renameImageFilename: '',
deleteImageShow: false,
deleteImageId: 0,
deleteImageId: '',
deleteImageFilename: ''
},
methods: {
open: () => {
mdeModalOpenState = true;
$('#modal-editor-image').slideDown();
@ -30,6 +34,17 @@ let vueImage = new Vue({
mdeModalOpenState = false;
$('#modal-editor-image').slideUp();
},
// -------------------------------------------
// INSERT IMAGE
// -------------------------------------------
selectImage: (imageId) => {
vueImage.currentImage = imageId;
},
selectAlignment: (align) => {
vueImage.currentAlign = align;
},
insertImage: (ev) => {
if(mde.codemirror.doc.somethingSelected()) {
@ -57,6 +72,11 @@ let vueImage = new Vue({
vueImage.cancel();
},
// -------------------------------------------
// NEW FOLDER
// -------------------------------------------
newFolder: (ev) => {
vueImage.newFolderName = '';
vueImage.newFolderError = false;
@ -90,6 +110,11 @@ let vueImage = new Vue({
});
},
// -------------------------------------------
// FETCH FROM URL
// -------------------------------------------
fetchFromUrl: (ev) => {
vueImage.fetchFromUrlURL = '';
vueImage.fetchFromUrlShow = true;
@ -107,7 +132,7 @@ let vueImage = new Vue({
Vue.nextTick(() => {
socket.emit('uploadsFetchFileFromURL', { folder: vueImage.currentFolder, fetchUrl: vueImage.fetchFromUrlURL }, (data) => {
if(data.ok) {
vueImage.waitUploadComplete();
vueImage.waitChangeComplete(vueImage.images.length, true);
} else {
vueImage.isLoading = false;
alerts.pushError('Upload error', data.msg);
@ -117,22 +142,92 @@ let vueImage = new Vue({
},
/**
* Select a folder
*
* @param {string} fldName The folder name
* @return {Void} Void
*/
// -------------------------------------------
// RENAME IMAGE
// -------------------------------------------
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) => {
vueImage.currentFolder = fldName;
vueImage.loadImages();
},
/**
* Refresh folder list and load images from root
*
* @return {Void} Void
*/
refreshFolders: () => {
vueImage.isLoadingText = 'Fetching folders list...';
vueImage.isLoading = true;
@ -146,58 +241,66 @@ let vueImage = new Vue({
});
},
/**
* Loads images in selected folder
*
* @return {Void} Void
*/
loadImages: (silent) => {
if(!silent) {
vueImage.isLoadingText = 'Fetching images...';
vueImage.isLoading = true;
}
return new Promise((resolve, reject) => {
Vue.nextTick(() => {
socket.emit('uploadsGetImages', { folder: vueImage.currentFolder }, (data) => {
vueImage.images = data;
if(!silent) {
vueImage.isLoading = false;
}
vueImage.attachContextMenus();
resolve(true);
});
});
});
},
waitChangeComplete: (oldAmount, expectChange) => {
expectChange = (_.isBoolean(expectChange)) ? expectChange : true;
vueImage.postUploadChecks++;
vueImage.isLoadingText = 'Processing...';
Vue.nextTick(() => {
socket.emit('uploadsGetImages', { folder: vueImage.currentFolder }, (data) => {
vueImage.images = data;
if(!silent) {
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);
}
vueImage.attachContextMenus();
});
});
},
/**
* Select an image
*
* @param {String} imageId The image identifier
* @return {Void} Void
*/
selectImage: (imageId) => {
vueImage.currentImage = imageId;
},
/**
* 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
*
* @return {Void} Void
*/
// -------------------------------------------
// IMAGE CONTEXT MENU
// -------------------------------------------
attachContextMenus: () => {
let moveFolders = _.map(vueImage.folders, (f) => {
return {
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",
icon: "fa-edit",
callback: (key, opt) => {
alert("Clicked on " + key);
vueImage.renameImageId = _.toString(opt.$trigger[0].dataset.uid);
vueImage.renameImage();
}
},
move: {
@ -233,60 +337,12 @@ let vueImage = new Vue({
name: "Delete",
icon: "fa-trash",
callback: (key, opt) => {
vueImage.deleteImageId = _.toString($(opt.$trigger).data('uid'));
vueImage.deleteImageId = _.toString(opt.$trigger[0].dataset.uid);
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) => {
let curImageAmount = vueImage.images.length;
$(ev.currentTarget).simpleUpload("/uploads/img", {
name: 'imgfile',
@ -346,7 +404,7 @@ $('#btn-editor-uploadimage input').on('change', (ev) => {
finish: () => {
if(vueImage.uploadSucceeded) {
vueImage.waitUploadComplete();
vueImage.waitChangeComplete(curImageAmount, true);
} else {
vueImage.isLoading = false;
}

24
controllers/ws.js
View File

@ -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;
});
});
};

14
libs/uploads-agent.js
View File

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

73
libs/uploads.js
View File

@ -6,6 +6,7 @@ const path = require('path'),
multer = require('multer'),
request = require('request'),
url = require('url'),
farmhash = require('farmhash'),
_ = require('lodash');
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'));
}
});
}
};

17
views/modals/editor-image.pug
View File

@ -98,6 +98,23 @@
a.card-footer-item(v-on:click="fetchFromUrlDiscard") Discard
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-background
.modal-container

Write Preview
Loading…
Cancel
Save