modularized coverPhoto

public/src/client/groups/details.js

@@ -5,14 +5,11 @@ define('forum/groups/details', [
 	'forum/groups/memberlist',
 	'iconSelect',
 	'components',
-	'vendor/colorpicker/colorpicker',
-	'vendor/jquery/draggable-background/backgroundDraggable'
-], function(memberList, iconSelect, components) {
-
-	var Details = {
-			cover: {}
-		};
+	'coverPhoto',
+	'vendor/colorpicker/colorpicker'
+], function(memberList, iconSelect, components, coverPhoto) {
 
+	var Details = {};
 	var groupName;
 
 	Details.init = function() {
@@ -22,7 +19,21 @@ define('forum/groups/details', [
 
 		if (ajaxify.data.group.isOwner) {
 			Details.prepareSettings();
-			Details.initialiseCover();
+
+			coverPhoto.init(components.get('groups/cover'),
+				function(callback) {
+					socket.emit('groups.cover.get', {
+						groupName: groupName
+					}, callback)
+				},
+				function(imageData, position, callback) {
+					socket.emit('groups.cover.update', {
+						groupName: groupName,
+						imageData: coverPhoto.newCover || undefined,
+						position: components.get('groups/cover').css('background-position')
+					}, callback);
+				}
+			);
 		}
 
 		memberList.init();
@@ -209,93 +220,6 @@ define('forum/groups/details', [
 		});
 	};
 
-	// Cover Photo Handling Code
-
-	Details.initialiseCover = function() {
-		var coverEl = components.get('groups/cover');
-		coverEl.find('.change').on('click', function() {
-			coverEl.toggleClass('active', 1);
-			coverEl.backgroundDraggable({
-				axis: 'y',
-				units: 'percent'
-			});
-			coverEl.on('dragover', Details.cover.onDragOver);
-			coverEl.on('drop', Details.cover.onDrop);
-		});
-
-		coverEl.find('.save').on('click', Details.cover.save);
-		coverEl.addClass('initialised');
-	};
-
-	Details.cover.load = function() {
-		socket.emit('groups.cover.get', {
-			groupName: groupName
-		}, function(err, data) {
-			if (!err) {
-				var coverEl = components.get('groups/cover');
-				if (data['cover:url']) {
-					coverEl.css('background-image', 'url(' + data['cover:url'] + ')');
-				}
-
-				if (data['cover:position']) {
-					coverEl.css('background-position', data['cover:position']);
-				}
-
-				delete Details.cover.newCover;
-			} else {
-				app.alertError(err.message);
-			}
-		});
-	};
-
-	Details.cover.onDragOver = function(e) {
-		e.stopPropagation();
-		e.preventDefault();
-		e.originalEvent.dataTransfer.dropEffect = 'copy';
-	};
-
-	Details.cover.onDrop = function(e) {
-		var coverEl = components.get('groups/cover');
-		e.stopPropagation();
-		e.preventDefault();
-
-		var files = e.originalEvent.dataTransfer.files,
-		reader = new FileReader();
-
-		if (files.length && files[0].type.match('image.*')) {
-			reader.onload = function(e) {
-				coverEl.css('background-image', 'url(' + e.target.result + ')');
-				Details.cover.newCover = e.target.result;
-			};
-
-			reader.readAsDataURL(files[0]);
-		}
-	};
-
-	Details.cover.save = function() {
-		var coverEl = components.get('groups/cover');
-
-		coverEl.addClass('saving');
-
-		socket.emit('groups.cover.update', {
-			groupName: groupName,
-			imageData: Details.cover.newCover || undefined,
-			position: components.get('groups/cover').css('background-position')
-		}, function(err) {
-			if (!err) {
-				coverEl.toggleClass('active', 0);
-				coverEl.backgroundDraggable('disable');
-				coverEl.off('dragover', Details.cover.onDragOver);
-				coverEl.off('drop', Details.cover.onDrop);
-				Details.cover.load();
-			} else {
-				app.alertError(err.message);
-			}
-
-			coverEl.removeClass('saving');
-		});
-	};
-
 	function handleMemberInvitations() {
 		if (ajaxify.data.group.isOwner) {
 			var searchInput = $('[component="groups/members/invite"]');

public/src/modules/coverPhoto.js

@@ -0,0 +1,93 @@
+"use strict";
+/* globals define, app*/
+
+define('coverPhoto', [
+	'vendor/jquery/draggable-background/backgroundDraggable'
+], function() {
+
+	var coverPhoto = {
+		coverEl: null,
+		getFn: null,
+		saveFn: null
+	};
+
+	coverPhoto.init = function(coverEl, getFn, saveFn) {
+		coverPhoto.coverEl = coverEl;
+		coverPhoto.getFn = getFn;
+		coverPhoto.saveFn = saveFn;
+
+		coverEl.find('.change').on('click', function() {
+			coverEl.toggleClass('active', 1);
+			coverEl.backgroundDraggable({
+				axis: 'y',
+				units: 'percent'
+			});
+			coverEl.on('dragover', coverPhoto.onDragOver);
+			coverEl.on('drop', coverPhoto.onDrop);
+		});
+
+		coverEl.find('.save').on('click', coverPhoto.save);
+		coverEl.addClass('initialised');
+	};
+
+	coverPhoto.load = function() {
+		coverPhoto.getFn(function(err, data) {
+			if (!err) {
+				if (data['cover:url']) {
+					coverPhoto.coverEl.css('background-image', 'url(' + data['cover:url'] + ')');
+				}
+
+				if (data['cover:position']) {
+					coverPhoto.coverEl.css('background-position', data['cover:position']);
+				}
+
+				delete coverPhoto.newCover;
+			} else {
+				app.alertError(err.message);
+			}
+		});
+	};
+
+	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,
+		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]);
+		}
+	};
+
+	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);
+				coverPhoto.load();
+			} else {
+				app.alertError(err.message);
+			}
+
+			coverPhoto.coverEl.removeClass('saving');
+		});
+	};
+
+	return coverPhoto;
+});