Files Management + Editor Modal + Code Editor fixes

client/js/components/editor-codeblock.js

@@ -1,12 +1,6 @@
 
-let codeEditor = ace.edit("codeblock-editor");
-codeEditor.setTheme("ace/theme/tomorrow_night");
-codeEditor.getSession().setMode("ace/mode/markdown");
-codeEditor.setOption('fontSize', '14px');
-codeEditor.setOption('hScrollBarAlwaysVisible', false);
-codeEditor.setOption('wrap', true);
-
 let modelist = ace.require("ace/ext/modelist");
+let codeEditor = null;
 
 // ACE - Mode Loader
 
@@ -33,7 +27,8 @@ let vueCodeBlock = new Vue({
 	el: '#modal-editor-codeblock',
 	data: {
 		modes: modelist.modesByName,
-		modeSelected: 'text'
+		modeSelected: 'text',
+		initContent: ''
 	},
 	watch: {
 		modeSelected: (val, oldVal) => {
@@ -45,19 +40,28 @@ let vueCodeBlock = new Vue({
 	},
 	methods: {
 		open: (ev) => {
+
 			$('#modal-editor-codeblock').addClass('is-active');
 
 			_.delay(() => {
-				codeEditor.resize();
+				codeEditor = ace.edit("codeblock-editor");
+				codeEditor.setTheme("ace/theme/tomorrow_night");
+				codeEditor.getSession().setMode("ace/mode/" + vueCodeBlock.modeSelected);
+				codeEditor.setOption('fontSize', '14px');
+				codeEditor.setOption('hScrollBarAlwaysVisible', false);
+				codeEditor.setOption('wrap', true);
+
+				codeEditor.setValue(vueCodeBlock.initContent);
+
 				codeEditor.focus();
-				codeEditor.setAutoScrollEditorIntoView(true);
 				codeEditor.renderer.updateFull();
-			}, 1000);
+			}, 300);
 			
 		},
 		cancel: (ev) => {
 			mdeModalOpenState = false;
 			$('#modal-editor-codeblock').removeClass('is-active');
+			vueCodeBlock.initContent = '';
 		},
 		insertCode: (ev) => {
 

client/js/components/editor-file.js

@@ -0,0 +1,365 @@
+
+let vueFile = new Vue({
+	el: '#modal-editor-file',
+	data: {
+		isLoading: false,
+		isLoadingText: '',
+		newFolderName: '',
+		newFolderShow: false,
+		newFolderError: false,
+		folders: [],
+		currentFolder: '',
+		currentFile: '',
+		files: [],
+		uploadSucceeded: false,
+		postUploadChecks: 0,
+		renameFileShow: false,
+		renameFileId: '',
+		renameFileFilename: '',
+		deleteFileShow: false,
+		deleteFileId: '',
+		deleteFileFilename: ''
+	},
+	methods: {
+
+		open: () => {
+			mdeModalOpenState = true;
+			$('#modal-editor-file').addClass('is-active');
+			vueFile.refreshFolders();
+		},
+		cancel: (ev) => {
+			mdeModalOpenState = false;
+			$('#modal-editor-file').removeClass('is-active');
+		},
+
+		// -------------------------------------------
+		// INSERT LINK TO FILE
+		// -------------------------------------------
+
+		selectFile: (fileId) => {
+			vueFile.currentFile = fileId;
+		},
+		insertFileLink: (ev) => {
+
+			if(mde.codemirror.doc.somethingSelected()) {
+				mde.codemirror.execCommand('singleSelection');
+			}
+
+			let selFile = _.find(vueFile.files, ['_id', vueFile.currentFile]);
+			selFile.normalizedPath = (selFile.folder === 'f:') ? selFile.filename : selFile.folder.slice(2) + '/' + selFile.filename;
+			selFile.titleGuess = _.startCase(selFile.basename);
+
+			let fileText = '[' + selFile.titleGuess + '](/uploads/' + selFile.normalizedPath + ' "' + selFile.titleGuess + '")';
+
+			mde.codemirror.doc.replaceSelection(fileText);
+			vueFile.cancel();
+
+		},
+
+		// -------------------------------------------
+		// NEW FOLDER
+		// -------------------------------------------
+
+		newFolder: (ev) => {
+			vueFile.newFolderName = '';
+			vueFile.newFolderError = false;
+			vueFile.newFolderShow = true;
+			_.delay(() => { $('#txt-editor-file-newfoldername').focus(); }, 400);
+		},
+		newFolderDiscard: (ev) => {
+			vueFile.newFolderShow = false;
+		},
+		newFolderCreate: (ev) => {
+
+			let regFolderName = new RegExp("^[a-z0-9][a-z0-9\-]*[a-z0-9]$");
+			vueFile.newFolderName = _.kebabCase(_.trim(vueFile.newFolderName));
+
+			if(_.isEmpty(vueFile.newFolderName) || !regFolderName.test(vueFile.newFolderName)) {
+				vueFile.newFolderError = true;
+				return;
+			}
+
+			vueFile.newFolderDiscard();
+			vueFile.isLoadingText = 'Creating new folder...';
+			vueFile.isLoading = true;
+
+			Vue.nextTick(() => {
+				socket.emit('uploadsCreateFolder', { foldername: vueFile.newFolderName }, (data) => {
+					vueFile.folders = data;
+					vueFile.currentFolder = vueFile.newFolderName;
+					vueFile.files = [];
+					vueFile.isLoading = false;
+				});
+			});
+
+		},
+
+		// -------------------------------------------
+		// RENAME FILE
+		// -------------------------------------------
+
+		renameFile: () => {
+
+			let c = _.find(vueFile.files, ['_id', vueFile.renameFileId ]);
+			vueFile.renameFileFilename = c.basename || '';
+			vueFile.renameFileShow = true;
+			_.delay(() => {
+				$('#txt-editor-renamefile').focus();
+				_.defer(() => { $('#txt-editor-file-rename').select(); });
+			}, 400);
+		},
+		renameFileDiscard: () => {
+			vueFile.renameFileShow = false;
+		},
+		renameFileGo: () => {
+			
+			vueFile.renameFileDiscard();
+			vueFile.isLoadingText = 'Renaming file...';
+			vueFile.isLoading = true;
+
+			Vue.nextTick(() => {
+				socket.emit('uploadsRenameFile', { uid: vueFile.renameFileId, folder: vueFile.currentFolder, filename: vueFile.renameFileFilename }, (data) => {
+					if(data.ok) {
+						vueFile.waitChangeComplete(vueFile.files.length, false);
+					} else {
+						vueFile.isLoading = false;
+						alerts.pushError('Rename error', data.msg);
+					}
+				});
+			});
+
+		},
+
+		// -------------------------------------------
+		// MOVE FILE
+		// -------------------------------------------
+
+		moveFile: (uid, fld) => {
+			vueFile.isLoadingText = 'Moving file...';
+			vueFile.isLoading = true;
+			Vue.nextTick(() => {
+				socket.emit('uploadsMoveFile', { uid, folder: fld }, (data) => {
+					if(data.ok) {
+						vueFile.loadFiles();
+					} else {
+						vueFile.isLoading = false;
+						alerts.pushError('Rename error', data.msg);
+					}
+				});
+			});
+		},
+
+		// -------------------------------------------
+		// DELETE FILE
+		// -------------------------------------------
+
+		deleteFileWarn: (show) => {
+			if(show) {
+				let c = _.find(vueFile.files, ['_id', vueFile.deleteFileId ]);
+				vueFile.deleteFileFilename = c.filename || 'this file';
+			}
+			vueFile.deleteFileShow = show;
+		},
+		deleteFileGo: () => {
+			vueFile.deleteFileWarn(false);
+			vueFile.isLoadingText = 'Deleting file...';
+			vueFile.isLoading = true;
+			Vue.nextTick(() => {
+				socket.emit('uploadsDeleteFile', { uid: vueFile.deleteFileId }, (data) => {
+					vueFile.loadFiles();
+				});
+			});
+		},
+
+		// -------------------------------------------
+		// LOAD FROM REMOTE
+		// -------------------------------------------
+
+		selectFolder: (fldName) => {
+			vueFile.currentFolder = fldName;
+			vueFile.loadFiles();
+		},
+
+		refreshFolders: () => {
+			vueFile.isLoadingText = 'Fetching folders list...';
+			vueFile.isLoading = true;
+			vueFile.currentFolder = '';
+			vueFile.currentImage = '';
+			Vue.nextTick(() => {
+				socket.emit('uploadsGetFolders', { }, (data) => {
+					vueFile.folders = data;
+					vueFile.loadFiles();
+				});
+			});
+		},
+
+		loadFiles: (silent) => {
+			if(!silent) {
+				vueFile.isLoadingText = 'Fetching files...';
+				vueFile.isLoading = true;
+			}
+			return new Promise((resolve, reject) => {
+				Vue.nextTick(() => {
+					socket.emit('uploadsGetFiles', { folder: vueFile.currentFolder }, (data) => {
+						vueFile.files = data;
+						if(!silent) {
+							vueFile.isLoading = false;
+						}
+						vueFile.attachContextMenus();
+						resolve(true);
+					});
+				});
+			});
+		},
+
+		waitChangeComplete: (oldAmount, expectChange) => {
+
+			expectChange = (_.isBoolean(expectChange)) ? expectChange : true;
+
+			vueFile.postUploadChecks++;
+			vueFile.isLoadingText = 'Processing...';
+
+			Vue.nextTick(() => {
+				vueFile.loadFiles(true).then(() => {
+					if((vueFile.files.length !== oldAmount) === expectChange) {
+						vueFile.postUploadChecks = 0;
+						vueFile.isLoading = false;
+					} else if(vueFile.postUploadChecks > 5) {
+						vueFile.postUploadChecks = 0;
+						vueFile.isLoading = false;
+						alerts.pushError('Unable to fetch updated listing', 'Try again later');
+					} else {
+						_.delay(() => {
+							vueFile.waitChangeComplete(oldAmount, expectChange);
+						}, 1500);
+					}
+				});
+			});
+
+		},
+
+		// -------------------------------------------
+		// IMAGE CONTEXT MENU
+		// -------------------------------------------
+		
+		attachContextMenus: () => {
+
+			let moveFolders = _.map(vueFile.folders, (f) => {
+				return {
+					name: (f !== '') ? f : '/ (root)',
+					icon: 'fa-folder',
+					callback: (key, opt) => {
+						let moveFileId = _.toString($(opt.$trigger).data('uid'));
+						let moveFileDestFolder = _.nth(vueFile.folders, key);
+						vueFile.moveFile(moveFileId, moveFileDestFolder);
+					}
+				};
+			});
+
+			$.contextMenu('destroy', '.editor-modal-file-choices > figure');
+			$.contextMenu({
+				selector: '.editor-modal-file-choices > figure',
+				appendTo: '.editor-modal-file-choices',
+				position: (opt, x, y) => {
+					$(opt.$trigger).addClass('is-contextopen');
+					let trigPos = $(opt.$trigger).position();
+					let trigDim = { w: $(opt.$trigger).width() / 5, h: $(opt.$trigger).height() / 2 };
+					opt.$menu.css({ top: trigPos.top + trigDim.h, left: trigPos.left + trigDim.w });
+				},
+				events: {
+					hide: (opt) => {
+						$(opt.$trigger).removeClass('is-contextopen');   
+					}
+				},
+				items: {
+					rename: {
+						name: "Rename",
+						icon: "fa-edit",
+						callback: (key, opt) => {
+							vueFile.renameFileId = _.toString(opt.$trigger[0].dataset.uid);
+							vueFile.renameFile();
+						}
+					},
+					move: {
+						name: "Move to...",
+						icon: "fa-folder-open-o",
+						items: moveFolders
+					},
+					delete: {
+						name: "Delete",
+						icon: "fa-trash",
+						callback: (key, opt) => {
+							vueFile.deleteFileId = _.toString(opt.$trigger[0].dataset.uid);
+							vueFile.deleteFileWarn(true);
+						}
+					}
+				}
+			});
+		}
+
+	}
+});
+
+$('#btn-editor-file-upload input').on('change', (ev) => {
+
+	let curFileAmount = vueFile.files.length;
+
+	$(ev.currentTarget).simpleUpload("/uploads/file", {
+
+		name: 'binfile',
+		data: {
+			folder: vueFile.currentFolder
+		},
+		limit: 20,
+		expect: 'json',
+		maxFileSize: 0,
+
+		init: (totalUploads) => {
+			vueFile.uploadSucceeded = false;
+			vueFile.isLoadingText = 'Preparing to upload...';
+			vueFile.isLoading = true;
+		},
+
+		progress: (progress) => {
+			vueFile.isLoadingText = 'Uploading...' + Math.round(progress) + '%';
+		},
+
+		success: (data) => {
+			if(data.ok) {
+
+				let failedUpls = _.filter(data.results, ['ok', false]);
+				if(failedUpls.length) {
+					_.forEach(failedUpls, (u) => {
+						alerts.pushError('Upload error', u.msg);
+					});
+					if(failedUpls.length < data.results.length) {
+						alerts.push({
+							title: 'Some uploads succeeded',
+							message: 'Files that are not mentionned in the errors above were uploaded successfully.'
+						});
+						vueFile.uploadSucceeded = true;
+					} 
+				} else {
+					vueFile.uploadSucceeded = true;
+				}
+
+			} else {
+				alerts.pushError('Upload error', data.msg);
+			}
+		},
+
+		error: (error) => {
+			alerts.pushError(error.message, this.upload.file.name);
+		},
+
+		finish: () => {
+			if(vueFile.uploadSucceeded) {
+				vueFile.waitChangeComplete(curFileAmount, true);
+			} else {
+				vueFile.isLoading = false;
+			}
+		}
+
+	});
+
+});

client/js/components/editor-image.js

@@ -78,7 +78,7 @@ let vueImage = new Vue({
 			vueImage.newFolderName = '';
 			vueImage.newFolderError = false;
 			vueImage.newFolderShow = true;
-			_.delay(() => { $('#txt-editor-newfoldername').focus(); }, 400);
+			_.delay(() => { $('#txt-editor-image-newfoldername').focus(); }, 400);
 		},
 		newFolderDiscard: (ev) => {
 			vueImage.newFolderShow = false;
@@ -115,7 +115,7 @@ let vueImage = new Vue({
 		fetchFromUrl: (ev) => {
 			vueImage.fetchFromUrlURL = '';
 			vueImage.fetchFromUrlShow = true;
-			_.delay(() => { $('#txt-editor-fetchimgurl').focus(); }, 400);
+			_.delay(() => { $('#txt-editor-image-fetchurl').focus(); }, 400);
 		},
 		fetchFromUrlDiscard: (ev) => {
 			vueImage.fetchFromUrlShow = false;
@@ -149,8 +149,8 @@ let vueImage = new Vue({
 			vueImage.renameImageFilename = c.basename || '';
 			vueImage.renameImageShow = true;
 			_.delay(() => {
-				$('#txt-editor-renameimage').focus();
-				_.defer(() => { $('#txt-editor-renameimage').select(); });
+				$('#txt-editor-image-rename').focus();
+				_.defer(() => { $('#txt-editor-image-rename').select(); });
 			}, 400);
 		},
 		renameImageDiscard: () => {
@@ -301,10 +301,10 @@ let vueImage = new Vue({
 				};
 			});
 
-			$.contextMenu('destroy', '.editor-modal-imagechoices > figure');
+			$.contextMenu('destroy', '.editor-modal-image-choices > figure');
 			$.contextMenu({
-				selector: '.editor-modal-imagechoices > figure',
-				appendTo: '.editor-modal-imagechoices',
+				selector: '.editor-modal-image-choices > figure',
+				appendTo: '.editor-modal-image-choices',
 				position: (opt, x, y) => {
 					$(opt.$trigger).addClass('is-contextopen');
 					let trigPos = $(opt.$trigger).position();
@@ -345,7 +345,7 @@ let vueImage = new Vue({
 	}
 });
 
-$('#btn-editor-uploadimage input').on('change', (ev) => {
+$('#btn-editor-image-upload input').on('change', (ev) => {
 
 	let curImageAmount = vueImage.images.length;
 

client/js/components/editor.js

@@ -13,6 +13,7 @@ if($('#mk-editor').length === 1) {
 	});
 
 	//=include editor-image.js
+	//=include editor-file.js
 	//=include editor-codeblock.js
 
 	var mde = new SimpleMDE({
@@ -103,7 +104,9 @@ if($('#mk-editor').length === 1) {
 			{
 				name: "file",
 				action: (editor) => {
-					//todo
+					if(!mdeModalOpenState) {
+						vueFile.open();
+					}
 				},
 				className: "fa fa-file-text-o",
 				title: "Insert File",
@@ -133,9 +136,7 @@ if($('#mk-editor').length === 1) {
 						mdeModalOpenState = true;
 
 						if(mde.codemirror.doc.somethingSelected()) {
-							codeEditor.setValue(mde.codemirror.doc.getSelection());
-						} else {
-							codeEditor.setValue('');
+							vueCodeBlock.initContent = mde.codemirror.doc.getSelection();
 						}
 
 						vueCodeBlock.open();
@@ -170,7 +171,21 @@ if($('#mk-editor').length === 1) {
 	//-> Save
 
 	$('.btn-edit-save, .btn-create-save').on('click', (ev) => {
+		saveCurrentDocument(ev);
+	});
 
+	$(window).bind('keydown', (ev) => {
+		if (ev.ctrlKey || ev.metaKey) {
+			switch (String.fromCharCode(ev.which).toLowerCase()) {
+			case 's':
+				ev.preventDefault();
+				saveCurrentDocument(ev);
+				break;
+			}
+		}
+	});
+
+	let saveCurrentDocument = (ev) => {
 		$.ajax(window.location.href, {
 			data: {
 				markdown: mde.value()
@@ -186,7 +201,6 @@ if($('#mk-editor').length === 1) {
 		}, (rXHR, rStatus, err) => {
 			alerts.pushError('Something went wrong', 'Save operation failed.');
 		});
-
-	});
+	}
 
 }

client/js/pages/source.js

@@ -4,6 +4,9 @@ if($('#page-type-source').length) {
 	var scEditor = ace.edit("source-display");
   scEditor.setTheme("ace/theme/tomorrow_night");
   scEditor.getSession().setMode("ace/mode/markdown");
+  scEditor.setOption('fontSize', '14px');
+  scEditor.setOption('hScrollBarAlwaysVisible', false);
+	scEditor.setOption('wrap', true);
   scEditor.setReadOnly(true);
   scEditor.renderer.updateFull();