AVEF/imports/ui/Admin/PageEditor.js

import './PageEditor.html';
import '/imports/ui/dialogs/SelectImageDialog.js';
import swal from "sweetalert2";

let currentHtml = "";
let currentPath = "";

let routeData = {
	AppreciationEditor: {title: "Appreciation", name: "Appreciation"},
	NewsEditor: {title: "News", name: "News"},
	DatesEditor: {title: "Dates", name: "Dates"},
	BoardEditor: {title: "Current Board", name: "Board"},
	SlideshowPageEditor: {title: "Slideshow Page", name: "Slideshow"}
};

Tracker.autorun(function() {
	//let name = routeData[FlowRouter.getRouteName()] ? routeData[FlowRouter.getRouteName()].name : "";

	//if(name) {
		//TODO: Filter the page by the page name.
		Meteor.subscribe("pages");
	//}
});

Template.PageEditor.onCreated(function() {
	let template = this;
	
	this.showSelectImageDialog = new ReactiveVar(false);
	this.pageName = new ReactiveVar();
	
	this.saveChanges = function() {
		if(currentPath && currentPath !== FlowRouter.getRouteName()) {
			let data = this.$('.editor').val();
			let template = this;
			
			currentPath = FlowRouter.getRouteName();
			
			//Only ask the user if they want to update their changes if they actually have changes that have not yet been saved.
			if(data !== currentHtml) {
				const changedData = data;
				
				//Ensure this does not get run twice.
				currentHtml = data;
				
				//Ask the user if they want to update the repository with their changes.
				swal({
					title: "Save Changes",
					text: "Would you like to save any changes you have made to this page?",
					type: "question",
					showCancelButton: true,
					confirmButtonColor: "#7cdd7f",
					confirmButtonText: "Yes",
					cancelButtonText: "No"
				}).then(
					function(isConfirm) {
						if(isConfirm) {
							Meteor.call('updatePage', template.pageName.get(), changedData, function (error, result) {
								if (error) sAlert.error(error);
								else sAlert.success("Content Saved Successfully");
							});
						}
					},
					function(dismiss) {}
				);
			}
		}
	};
	
	Tracker.autorun(function() {
		if(routeData[FlowRouter.getRouteName()]) {
			template.saveChanges();
			
			//Save the page's name (indexes the page HTML in the collection) to the reactive variable so that all the content changes automatically.
			template.pageName.set(routeData[FlowRouter.getRouteName()].name);
		}
	});
});

Template.PageEditor.onRendered(function() {
	let template = this;
	
	$('.editor').tinymce({
//		inline: true,
//		menubar: false,
//		theme: 'inlite',  //inlite
//		//skin: 'light',
//		plugins: [
//			'autolink',
//			'contextmenu',
//			'link',
////			'linkchecker',  Broken
//			'lists',
////			'powerpaste',	Broken
//			'table',
//			//'image',
//			'textcolor'
//		],
//		toolbar: [
//			'undo redo | bold italic underline | fontselect fontsizeselect',
//			'forecolor backcolor | alignleft aligncenter alignright alignfull | link unlink | numlist bullist outdent indent | InsertImage | inserttable | cell row column deletetable'
//		],
//		table_default_attributes: {
//			border: 0,
//			cellpadding: 4
//		},
//		table_default_styles: {
//			borderCollapse: "collapse"
//		},
//		insert_toolbar: 'quicktable',  //image
//		selection_toolbar: 'bold italic | h1 h2 h3 | blockquote quicklink',
//		contextmenu: 'InsertImage | inserttable | cell row column deletetable',  //image
//		contextmenu_never_use_native: false,
		
		
		
		//image_advtab: true,
		//image_description: true,
		//image_dimensions: true,
		//image_title: true,
		//image_list: function(success) {
		//	//Expects an array of objects containing title:String and value:String properties where the value is a path to the image.
		//	Meteor.call('getGeneralImages', function(data, err) {
		//		if(err) {
		//			sAlert.error(err);
		//		}
		//		else {
		//			success(data);
		//		}
		//	});
		//}
		//powerpaste_word_import: 'clean',
		//powerpaste_html_import: 'clean'
		
		
		inline: true,
		menubar: false,
		theme: 'inlite',
		plugins: [
			'autolink',
			'contextmenu',
			'link',
			'lists',
			'table',
			'textcolor'
		],
		toolbar: [
			'undo redo | bold italic underline | fontselect fontsizeselect',
			'forecolor backcolor | alignleft aligncenter alignright alignfull | link unlink | numlist bullist outdent indent'
		],
		table_default_attributes: {
			border: 0,
			cellpadding: 4
		},
		table_default_styles: {
			borderCollapse: "collapse"
		},
		insert_toolbar: 'quicktable',  //image
		selection_toolbar: 'bold italic | h1 h2 h3 | blockquote quicklink',
		contextmenu: 'InsertImage | inserttable | cell row column deletetable',  //image
		contextmenu_never_use_native: false,
		
		
		setup: function(editor) {
			editor.addMenuItem('InsertImage', {
				text: "Insert Image",
				context: 'tools',
				onclick: function() {
					template.showSelectImageDialog.set(true);
				}
			});
		}
		
	});

	Tracker.autorun(function() {
		let doc = Meteor.collections.Pages.findOne({name: template.pageName.get()});

		currentHtml = (doc === undefined ? "" : doc.html);
		$('.editor').html(currentHtml);
	});
});

Template.PageEditor.onDestroyed(function() {
	this.saveChanges();
});

Template.PageEditor.events({
	'click #save': function(event, template) {
		let data = template.$('.editor').val();

		if(data !== currentHtml) {
			Meteor.call('updatePage', template.pageName.get(), data, function (error, result) {
				if (error) sAlert.error(error);
				else {
					sAlert.success("Content Saved Successfully");
					//Ensure we recognize things were saved later.
					currentHtml = data;
				}
			});
		}
		else {
			sAlert.success("Data has not changed!");
		}
	}
});

Template.PageEditor.helpers({
	editorName() {
		return routeData[FlowRouter.getRouteName()].title;  //FlowRouter.getRouteName() is reactive allowing this to trigger when the content changes.
	},
	showSelectImageDialog() {
		return Template.instance().showSelectImageDialog.get();
	},
	selectImageDialogArgs() {
		let template = Template.instance();
		return {
			onApply(value) {
				tinymce.activeEditor.insertContent('<img src="' + value + '"/>');
				template.showSelectImageDialog.set(false);
			},
			onClose() {
				template.showSelectImageDialog.set(false);
			}
		};
	}
});