AVEF/imports/ui/Admin/SlideshowEditor.js

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

const PREFIX = "SlideshowEditor_";

Tracker.autorun(function() {
	Meteor.subscribe("slideshow");
});

Template.SlideshowEditor.onCreated(function() {
	this.slideshows = Meteor.collections.Slideshow.find({}, {sort: {name: 1}});
	Session.set(PREFIX + 'selectedSlideshow', null);
});

Template.SlideshowEditor.onRendered(function() {
	let _this = this;
	
	Tracker.autorun(function() {
		//This is a reactive call, allowing this function to be re-run when the cursor changes.
		let slideshows = _this.slideshows.fetch();
		
		if(slideshows.length > 0 && !Session.get(PREFIX + "selectedSlideshow")) {
			//Mark the first slideshow as selected because it will be selected in the UI by default.
			Session.set(PREFIX + "selectedSlideshow", slideshows[0]);
		}
	});
});

Template.SlideshowEditor.onDestroyed(function() {

});

Template.SlideshowEditor.helpers({
	slideshows: function() {
		return Template.instance().slideshows;
	},
	selectedSlideshow: function(){
	 	return Session.get(PREFIX + "selectedSlideshow");
	},
	isSlideshowSelected: function() {
		let selectedSlideshow = Session.get(PREFIX + "selectedSlideshow");
		
		return selectedSlideshow == this ? "selected" : "";
	},
	hasSelectedSlideshow: function() {
		return Session.get(PREFIX + "selectedSlideshow");
	}
});

Template.SlideshowEditor.events({
	'change select[name="slideshows"]': function(event, template) {
		let slideshowId = $(event.target).val();
		let slideshow = Meteor.collections.Slideshow.findOne(slideshowId);
		
		Session.set(PREFIX + 'selectedSlideshow', slideshow);
	},
	"keyup input[name='newSlideshowName']" : function(event, template) {
			if(event.keyCode === 13) {
				event.preventDefault();
				$('.createSlideshow').trigger('click');
			}
	},
	"click .createSlideshow": function(event, template) {
		let $input = template.$('input[name="newSlideshowName"]');
		
		if($input.hasClass('show')) {
			let name = $input.val();
			
			name = name ? name.trim() : undefined;
			name = name && name.length > 0 ? name : undefined;
			
			if(name) {
				Meteor.call('addSlideshow', name, function(error, id) {
					if(error) sAlert.error("Failed to create the slideshow!\n" + error);
					else {
						//Clear the text editor.
						$input.val("");
						
						//Quick hack to attempt to allow the slideshow we created to be added to the select box before we try to select it and edit it.
						let count = 0;
						let interval = setInterval(function() {
							let selected = Meteor.collections.Slideshow.findOne(id);
							
							if(selected) {
								//Select the sheet in the drop down.
								template.$('select[name="slideshows"]').val(id);
								Session.set(PREFIX + "selectedSlideshow", selected);
								clearInterval(interval);
							}
							else count++;
							
							//Avoid infinite loop that should never happen.
							if(count > 100) clearInterval(interval);
						}, 100);
					}
				});
			}
			
			$input.removeClass('show');
			$(event.target).toggleClass('move');
			template.$('.deleteSlideshow').show();
		}
		else {
			$input.addClass('show');
			$(event.target).toggleClass('move');
			$input.focus();
			template.$('.deleteSlideshow').hide();
		}
	},
	"click .deleteSlideshow": function(event, template) {
		let $combo = template.$('select[name="slideshows"]');
		let slideshow = Session.get(PREFIX + 'selectedSlideshow');
		
		if(slideshow) {
			swal({
				title: 'Are you sure?',
				text: "You won't be able to revert this!",
				type: 'warning',
				showCancelButton: true,
				confirmButtonColor: '#3085d6',
				cancelButtonColor: '#d33',
				confirmButtonText: 'Yes, delete it!'
			}).then((result) => {
				Meteor.call('removeSlideshow', slideshow._id, function(error, id) {
					if(error) sAlert.error("Failed to remove the slideshow!\n" + error);
					else {
						sAlert.success("Slideshow removed.");
						//Fire the event so that our selection changes once the slideshow is removed from the combo.
						$combo.trigger('change');
					}
				});
			});
		}
	}
});

Template.SlideshowContentEditor.onCreated(function() {
	this.showSelectImageDialog = new ReactiveVar(false);
});
Template.SlideshowContentEditor.helpers({
	showSelectImageDialog: function() {
		return Template.instance().showSelectImageDialog.get();
	},
	slides: function() {
		return Meteor.collections.Slideshow.findOne(Template.instance().data).images;
	},
	selectImageDialogArgs() {
		let template = Template.instance();
		
		return {
			onApply(data) {
				//tinymce.activeEditor.insertContent('<img src="' + value + '"/>');
				template.showSelectImageDialog.set(false);
				//Send the slide image as a base64 string.
				Meteor.call('addSlideshowImage', template.data, data, function(error, id) {
					if(error) sAlert.error("Failed to add the slide.\n" + error);
					else {
						//TODO: ?
					}
				});
			},
			onClose() {
				template.showSelectImageDialog.set(false);
			}
		};
	}
	//getImage(id) {
	//	Meteor.call('getSlideshowImage', id, function(error, base64)) {
	//		if(error) sAlert.error("Failed to get the slide image.\n" + error);
	//		else {
	//
	//		}
	//	}
	//}
});
Template.SlideshowContentEditor.events({
	"click .addSlide": function(event, template) {
		template.showSelectImageDialog.set(true);
	},
	'click .moveLeft': function(event, template) {
		let $slideThumbnail = $(event.target).parent().parent();
		let index = $slideThumbnail.index();
		
		//If we can move it to the right then do so.
		if(index - 1 >= 0) {
			Meteor.call('swapSlideshowImages', template.data, index, index - 1, function(error) {
				if(error) sAlert.error("Failed to move the slide.\n" + error);
			});
		}
	},
	'click .moveRight': function(event, template) {
		let $slideThumbnail = $(event.target).parent().parent();
		let index = $slideThumbnail.index();
		let thumbnailCount = $slideThumbnail.siblings().length;  //Should give us the number of siblings including the add image button (we don't want to count it), and excluding this slide thumbnail (we do want to count it).
		
		//If we can move it to the right then do so.
		if(index + 1 < thumbnailCount) {
			Meteor.call('swapSlideshowImages', template.data, index, index + 1, function(error) {
				if(error) sAlert.error("Failed to move the slide.\n" + error);
			});
		}
	},
	'click .removeThumbnail': function(event, template) {
		let $slideThumbnail = $(event.target).parent().parent();
		let imageId = $slideThumbnail.data("image-id");
		
		Meteor.call('removeSlideshowImage', template.data, imageId, function(error) {
			if(error) sAlert.error("Failed to remove the slide.\n" + error);
		});
	}
});