Video player modal + provider match

client/js/components/alerts.js

@@ -42,7 +42,7 @@ class Alerts {
 
 		let nAlert = _.defaults(options, {
 			_uid: self.uidNext,
-			class: 'is-info',
+			class: 'info',
 			message: '---',
 			sticky: false,
 			title: '---'
@@ -68,7 +68,7 @@ class Alerts {
 	 */
 	pushError(title, message) {
 		this.push({
-			class: 'is-danger',
+			class: 'error',
 			message,
 			sticky: false,
 			title
@@ -83,7 +83,7 @@ class Alerts {
 	 */
 	pushSuccess(title, message) {
 		this.push({
-			class: 'is-success',
+			class: 'success',
 			message,
 			sticky: false,
 			title

client/js/components/editor-video.js

@@ -0,0 +1,49 @@
+
+const videoRules = {
+	'youtube': new RegExp(/(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/, 'i'),
+	'vimeo': new RegExp(/vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/(?:[^\/]*)\/videos\/|album\/(?:\d+)\/video\/|)(\d+)(?:$|\/|\?)/, 'i'),
+	'dailymotion': new RegExp(/(?:dailymotion\.com(?:\/embed)?(?:\/video|\/hub)|dai\.ly)\/([0-9a-z]+)(?:[\-_0-9a-zA-Z]+(?:#video=)?([a-z0-9]+)?)?/, 'i')
+};
+
+// Vue Video instance
+
+let vueVideo = new Vue({
+	el: '#modal-editor-video',
+	data: {
+		link: ''
+	},
+	methods: {
+		open: (ev) => {
+			$('#modal-editor-video').addClass('is-active');
+			$('#modal-editor-video input').focus();
+		},
+		cancel: (ev) => {
+			mdeModalOpenState = false;
+			$('#modal-editor-video').removeClass('is-active');
+			vueVideo.link = '';
+		},
+		insertVideo: (ev) => {
+
+			if(mde.codemirror.doc.somethingSelected()) {
+				mde.codemirror.execCommand('singleSelection');
+			}
+
+			// Guess video type
+
+			let videoType = _.findKey(videoRules, (vr) => {
+				return vr.test(vueVideo.link);
+			});
+			if(_.isNil(videoType)) {
+				videoType = 'video';
+			}
+
+			// Insert video tag
+
+			let videoText = '[video](' + vueVideo.link + '){.' + videoType + '}\n';
+
+			mde.codemirror.doc.replaceSelection(videoText);
+			vueVideo.cancel();
+
+		}
+	}
+});

client/js/components/editor.js

@@ -14,6 +14,7 @@ if($('#mk-editor').length === 1) {
 
 	//=include editor-image.js
 	//=include editor-file.js
+	//=include editor-video.js
 	//=include editor-codeblock.js
 
 	var mde = new SimpleMDE({
@@ -70,7 +71,7 @@ if($('#mk-editor').length === 1) {
 			{
 				name: "unordered-list",
 				action: SimpleMDE.toggleUnorderedList,
-				className: "icon-list-ul",
+				className: "icon-th-list",
 				title: "Bullet List",
 			},
 			{
@@ -98,7 +99,7 @@ if($('#mk-editor').length === 1) {
 						vueImage.open();
 					}
 				},
-				className: "icon-image3",
+				className: "icon-image",
 				title: "Insert Image",
 			},
 			{
@@ -108,15 +109,15 @@ if($('#mk-editor').length === 1) {
 						vueFile.open();
 					}
 				},
-				className: "icon-file-text-o",
+				className: "icon-paper",
 				title: "Insert File",
 			},
 			{
 				name: "video",
 				action: (editor) => {
-					/*if(!mdeModalOpenState) {
-						vueFile.open();
-					}*/
+					if(!mdeModalOpenState) {
+						vueVideo.open();
+					}
 				},
 				className: "icon-video-camera2",
 				title: "Insert Video Player",
@@ -180,21 +181,6 @@ 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: {
@@ -211,6 +197,21 @@ if($('#mk-editor').length === 1) {
 		}, (rXHR, rStatus, err) => {
 			alerts.pushError('Something went wrong', 'Save operation failed.');
 		});
-	}
+	};
+
+	$('.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;
+			}
+		}
+	});
 
 }