nodebb/public/src/modules/coverPhoto.js

"use strict";


define('coverPhoto', [
	'vendor/jquery/draggable-background/backgroundDraggable',
], function () {

	var coverPhoto = {
		coverEl: null,
		saveFn: null,
	};

	coverPhoto.init = function (coverEl, saveFn, uploadFn, removeFn) {
		coverPhoto.coverEl = coverEl;
		coverPhoto.saveFn = saveFn;

		coverEl.find('.upload').on('click', uploadFn);
		coverEl.find('.resize').on('click', function () {
			enableDragging(coverEl);
		});
		coverEl.find('.remove').on('click', removeFn);

		coverEl
			.on('dragover', coverPhoto.onDragOver)
			.on('drop', coverPhoto.onDrop);

		coverEl.find('.save').on('click', coverPhoto.save);
		coverEl.addClass('initialised');
	};

	coverPhoto.onDragOver = function (e) {
		e.stopPropagation();
		e.preventDefault();
		e.originalEvent.dataTransfer.dropEffect = 'copy';
	};

	coverPhoto.onDrop = function (e) {
		e.stopPropagation();
		e.preventDefault();

		var files = e.originalEvent.dataTransfer.files;
		var reader = new FileReader();

		if (files.length && files[0].type.match('image.*')) {
			reader.onload = function (e) {
				coverPhoto.coverEl.css('background-image', 'url(' + e.target.result + ')');
				coverPhoto.newCover = e.target.result;
			};

			reader.readAsDataURL(files[0]);
			enableDragging(coverPhoto.coverEl);
		}
	};

	function enableDragging(coverEl) {
		coverEl.toggleClass('active', 1)
			.backgroundDraggable({
				axis: 'y',
				units: 'percent',
			});

		app.alert({
			alert_id: 'drag_start',
			title: '[[modules:cover.dragging_title]]',
			message: '[[modules:cover.dragging_message]]',
			timeout: 5000,
		});
	}

	coverPhoto.save = function () {
		coverPhoto.coverEl.addClass('saving');

		coverPhoto.saveFn(coverPhoto.newCover || undefined, coverPhoto.coverEl.css('background-position'), function (err) {
			if (!err) {
				coverPhoto.coverEl.toggleClass('active', 0);
				coverPhoto.coverEl.backgroundDraggable('disable');
				coverPhoto.coverEl.off('dragover', coverPhoto.onDragOver);
				coverPhoto.coverEl.off('drop', coverPhoto.onDrop);
				app.alertSuccess('[[modules:cover.saved]]');
			} else {
				app.alertError(err.message);
			}

			coverPhoto.coverEl.removeClass('saving');
		});
	};

	return coverPhoto;
});