Insert Image + alignment

client/js/components/editor-image.js

@@ -6,8 +6,12 @@ let vueImage = new Vue({
 		isLoadingText: '',
 		newFolderName: '',
 		newFolderShow: false,
+		fetchFromUrlURL: '',
+		fetchFromUrlShow: false,
 		folders: [],
 		currentFolder: '',
+		currentImage: '',
+		currentAlign: 'left',
 		images: []
 	},
 	methods: {
@@ -20,12 +24,45 @@ let vueImage = new Vue({
 			mdeModalOpenState = false;
 			$('#modal-editor-image').slideUp();
 		},
+		insertImage: (ev) => {
+
+			if(mde.codemirror.doc.somethingSelected()) {
+				mde.codemirror.execCommand('singleSelection');
+			}
+
+			let selImage = _.find(vueImage.images, ['uid', vueImage.currentImage]);
+			selImage.normalizedPath = (selImage.folder === '') ? selImage.filename : selImage.folder + '/' + selImage.filename;
+			selImage.titleGuess = _.startCase(selImage.basename);
+
+			let imageText = '![' + selImage.titleGuess + '](/uploads/' + selImage.normalizedPath + ' "' + selImage.titleGuess + '")';
+			switch(vueImage.currentAlign) {
+				case 'center':
+					imageText += '{.align-center}';
+				break;
+				case 'right':
+					imageText += '{.align-right}';
+				break;
+				case 'logo':
+					imageText += '{.pagelogo}';
+				break;
+			}
+
+			mde.codemirror.doc.replaceSelection(imageText);
+			vueImage.cancel();
+
+		},
 		newFolder: (ev) => {
 			vueImage.newFolderShow = true;
 		},
 		newFolderDiscard: (ev) => {
 			vueImage.newFolderShow = false;
 		},
+		fetchFromUrl: (ev) => {
+			vueImage.fetchFromUrlShow = true;
+		},
+		fetchFromUrlDiscard: (ev) => {
+			vueImage.fetchFromUrlShow = false;
+		},
 		selectFolder: (fldName) => {
 			vueImage.currentFolder = fldName;
 			vueImage.loadImages();
@@ -34,6 +71,7 @@ let vueImage = new Vue({
 			vueImage.isLoading = true;
 			vueImage.isLoadingText = 'Fetching folders list...';
 			vueImage.currentFolder = '';
+			vueImage.currentImage = '';
 			Vue.nextTick(() => {
 				socket.emit('uploadsGetFolders', { }, (data) => {
 					vueImage.folders = data;
@@ -46,13 +84,16 @@ let vueImage = new Vue({
 			vueImage.isLoadingText = 'Fetching images...';
 			Vue.nextTick(() => {
 				socket.emit('uploadsGetImages', { folder: vueImage.currentFolder }, (data) => {
-					vueImage.images = _.map(data, (f) => {
-						f.thumbpath = (f.folder === '') ? f.basename + '.png' : _.join([ f.folder, f.basename + '.png' ], '/');
-						return f;
-					});
+					vueImage.images = data;
 					vueImage.isLoading = false;
 				});
 			});
+		},
+		selectImage: (imageId) => {
+			vueImage.currentImage = imageId;
+		},
+		selectAlignment: (align) => {
+			vueImage.currentAlign = align;
 		}
 	}
 });

client/js/components/editor.js

@@ -8,6 +8,10 @@ if($('#mk-editor').length === 1) {
 	let mdeModalOpenState = false;
 	let mdeCurrentEditor = null;
 
+	Vue.filter('filesize', (v) => {
+		return _.toUpper(filesize(v));
+	})
+
 	//=include editor-image.js
 	//=include editor-codeblock.js
 

client/scss/components/_editor.scss

@@ -65,6 +65,99 @@
 
 }
 
+.editor-modal-imagechoices {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	max-height: 450px;
+	overflow: auto;
+	overflow-x: hidden;
+
+	> figure {
+		display: flex;
+		flex-direction: column;
+		background-color: #FAFAFA;
+		border-radius: 5px;
+		padding: 5px;
+		width: 160px;
+		min-height: 205px;
+		margin: 0 5px 10px 5px;
+		cursor: pointer;
+		justify-content: center;
+		align-items: center;
+		transition: background-color 0.4s ease;
+
+		> img {
+			border: 1px solid #DDD;
+			border-radius: 5px;
+			padding: 2px;
+			background-color: #FFF;
+			margin: 0 0 5px 0;
+		}
+
+		> span {
+			font-size: 12px;
+			
+			> strong {
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				overflow: hidden;
+				display: block;
+				width: 150px;
+				text-align: center;
+			}
+
+		}
+
+		&:hover {
+			background-color: #DDD;
+		}
+
+		&.is-active {
+			background-color: $primary;
+			color: #FFF;
+
+			> img {
+				border-color: darken($primary, 10%);
+			}
+
+			> span > strong {
+				color: #FFF;
+			}
+
+		}
+
+	}
+
+}
+
+.editor-modal-imagealign {
+
+	.control > span {
+		letter-spacing: 1px;
+    text-transform: uppercase;
+    color: #aeb1b5;
+    font-size: 11px;
+	}
+
+	> .is-grouped {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.button > .icon {
+		margin: 0;
+	}
+
+}
+
+.editor-modal-folderlist {
+	height: 358px;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
 .CodeMirror {
 	border-left: none;
 	border-right: none;