szurubooru/public_html/js/Presenters/PostNotesPresenter.js

var App = App || {};
App.Presenters = App.Presenters || {};

App.Presenters.PostNotesPresenter = function(
	jQuery,
	util,
	promise,
	api,
	auth,
	draggable,
	resizable) {

	var post;
	var notes;
	var templates = {};
	var $target;
	var $form;
	var privileges = {};

	function init(params, loaded) {
		$target = params.$target;
		post = params.post;
		notes = params.notes || [];

		privileges.canDeletePostNotes = auth.hasPrivilege(auth.privileges.deletePostNotes);
		privileges.canEditPostNotes = auth.hasPrivilege(auth.privileges.editPostNotes);

		promise.wait(util.promiseTemplate('post-notes'))
			.then(function(postNotesTemplate) {
				templates.postNotes = postNotesTemplate;
				render();
				loaded();
			}).fail(function() {
				console.log(arguments);
				loaded();
			});
	}

	function addNewPostNote() {
		notes.push({left: 10.0, top: 10.0, width: 10.0, height: 10.0, text: '…'});
	}

	function addNewPostNoteAndRender() {
		addNewPostNote();
		render();
	}

	function render() {
		$target.html(templates.postNotes({
			privileges: privileges,
			post: post,
			notes: notes,
			formatMarkdown: util.formatMarkdown}));

		$form = $target.find('.post-note-edit');
		var $postNotes = $target.find('.post-note');

		$postNotes.each(function(i) {
			var postNote = notes[i];
			var $postNote = jQuery(this);
			$postNote.data('postNote', postNote);
			$postNote.find('.text-wrapper').click(postNoteClicked);
			postNote.$element = $postNote;
			draggable.makeDraggable($postNote, draggable.relativeDragStrategy);
			resizable.makeResizable($postNote);
		});

		$form.find('button').click(formSubmitted);
	}

	function formSubmitted(e) {
		e.preventDefault();
		var $button = jQuery(e.target);
		var sender = $button.val();

		var postNote = $form.data('postNote');
		postNote.left = (postNote.$element.offset().left - $target.offset().left) * 100.0 / $target.outerWidth();
		postNote.top = (postNote.$element.offset().top - $target.offset().top) * 100.0 / $target.outerHeight();
		postNote.width = postNote.$element.width() * 100.0 / $target.outerWidth();
		postNote.height = postNote.$element.height() * 100.0 / $target.outerHeight();
		postNote.text = $form.find('textarea').val();

		if (sender === 'cancel') {
			hideForm();
		} else if (sender === 'remove') {
			removePostNote(postNote);
		} else if (sender === 'save') {
			savePostNote(postNote);
		} else if (sender === 'preview') {
			previewPostNote(postNote);
		}
	}

	function removePostNote(postNote) {
		if (postNote.id) {
			if (window.confirm('Are you sure you want to delete this note?')) {
				promise.wait(api.delete('/notes/' + postNote.id))
					.then(function() {
						hideForm();
						postNote.$element.remove();
					}).fail(function(response) {
						window.alert(response.json && response.json.error || response);
					});
			}
		} else {
			postNote.$element.remove();
			hideForm();
		}
	}

	function savePostNote(postNote) {
		if (window.confirm('Are you sure you want to save this note?')) {
			var formData = {
				left: postNote.left,
				top: postNote.top,
				width: postNote.width,
				height: postNote.height,
				text: postNote.text,
			};

			var p = postNote.id ?
				api.put('/notes/' + postNote.id, formData) :
				api.post('/notes/' + post.id, formData);

			promise.wait(p)
				.then(function(response) {
					hideForm();
					postNote.id = response.json.id;
					postNote.$element.data('postNote', postNote);
					render();
				}).fail(function(response) {
					window.alert(response.json && response.json.error || response);
				});
		}
	}

	function previewPostNote(postNote) {
		var previewText = $form.find('textarea').val();
		postNote.$element.find('.text').html(util.formatMarkdown(previewText));
		showPostNoteText(postNote);
	}

	function showPostNoteText(postNote) {
		postNote.$element.find('.text-wrapper').show();
	}

	function hidePostNoteText(postNote) {
		postNote.$element.find('.text-wrapper').css('display', '');
	}

	function postNoteClicked(e) {
		e.preventDefault();
		var $postNote = jQuery(e.currentTarget).parents('.post-note');
		if ($postNote.hasClass('resizing') || $postNote.hasClass('dragging')) {
			return;
		}
		showFormForPostNote($postNote);
	}

	function showFormForPostNote($postNote) {
		hideForm();
		var postNote = $postNote.data('postNote');
		$form.data('postNote', postNote);
		$form.find('textarea').val(postNote.text);
		$form.show();
		draggable.makeDraggable($form, draggable.absoluteDragStrategy);
	}

	function hideForm() {
		var previousPostNote = $form.data('post-note');
		if (previousPostNote) {
			hidePostNoteText(previousPostNote);
		}
		$form.hide();
	}

	return {
		init: init,
		render: render,
		addNewPostNote: addNewPostNoteAndRender,
	};

};

App.DI.register('postNotesPresenter', [
	'jQuery',
	'util',
	'promise',
	'api',
	'auth',
	'draggable',
	'resizable'],
	App.Presenters.PostNotesPresenter);