Insert Image model + Uploads Folders list

client/js/components/editor-image.js

@@ -2,23 +2,54 @@
 let vueImage = new Vue({
 	el: '#modal-editor-image',
 	data: {
-		modeSelected: 'text'
+		isLoading: false,
+		isLoadingText: '',
+		newFolderName: '',
+		newFolderShow: false,
+		folders: [],
+		currentFolder: '',
+		images: []
 	},
 	methods: {
+		open: () => {
+			mdeModalOpenState = true;
+			$('#modal-editor-image').slideDown();
+			vueImage.refreshFolders();
+		},
 		cancel: (ev) => {
 			mdeModalOpenState = false;
 			$('#modal-editor-image').slideUp();
 		},
-		insertImage: (ev) => {
-
-			if(mde.codemirror.doc.somethingSelected()) {
-				mde.codemirror.execCommand('singleSelection');
-			}
-			let codeBlockText = '\n```' + vueCodeBlock.modeSelected + '\n' + codeEditor.getValue() + '\n```\n';
-
-			mde.codemirror.doc.replaceSelection(codeBlockText);
-			vueCodeBlock.cancel();
-
+		newFolder: (ev) => {
+			vueImage.newFolderShow = true;
+		},
+		newFolderDiscard: (ev) => {
+			vueImage.newFolderShow = false;
+		},
+		selectFolder: (fldName) => {
+			vueImage.currentFolder = fldName;
+			vueImage.loadImages();
+		},
+		refreshFolders: () => {
+			vueImage.isLoading = true;
+			vueImage.isLoadingText = 'Fetching folders list...';
+			vueImage.currentFolder = '';
+			Vue.nextTick(() => {
+				socket.emit('uploadsGetFolders', { }, (data) => {
+					vueImage.folders = data;
+					vueImage.loadImages();
+				});
+			});
+		},
+		loadImages: () => {
+			vueImage.isLoading = true;
+			vueImage.isLoadingText = 'Fetching images...';
+			Vue.nextTick(() => {
+				socket.emit('uploadsGetImages', { folder: vueImage.currentFolder }, (data) => {
+					vueImage.images = data;
+					vueImage.isLoading = false;
+				});
+			});
 		}
 	}
 });

client/js/components/editor.js

@@ -90,8 +90,7 @@ if($('#mk-editor').length === 1) {
 				name: "image",
 				action: (editor) => {
 					if(!mdeModalOpenState) {
-						mdeModalOpenState = true;
-						$('#modal-editor-image').slideDown();
+						vueImage.open();
 					}
 				},
 				className: "fa fa-image",

client/scss/components/_editor.scss

@@ -33,6 +33,38 @@
 
 }
 
+.editor-modal-load {
+
+	display: flex;
+	align-items: center;
+	opacity: 0;
+	transition: opacity .5s ease;
+
+	span {
+		font-size: 12px;
+		color: $blue;
+	}
+
+	i {
+		margin-left: 10px;
+		width: 32px;
+		height: 32px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		&::before {
+			content: " ";
+			@include spinner($blue,0.5s,24px);
+		}
+	}
+
+	&.is-active {
+		opacity: 1;
+	}
+
+}
+
 .CodeMirror {
 	border-left: none;
 	border-right: none;

client/scss/layout/_content.scss

@@ -14,6 +14,17 @@
 
 }
 
+.menu {
+	.menu-list a, .menu-nav a {
+		display: flex;
+		align-items: center;
+	}
+
+	.menu-list .icon {
+		margin-right: 8px
+	}
+}
+
 .section.is-small {
 	padding: 20px 20px;
 }