diff --git a/public/src/client/groups/details.js b/public/src/client/groups/details.js index be624b2160..3a9e21387c 100644 --- a/public/src/client/groups/details.js +++ b/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"]'); diff --git a/public/src/modules/coverPhoto.js b/public/src/modules/coverPhoto.js new file mode 100644 index 0000000000..bed4ffd41c --- /dev/null +++ b/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; +}); \ No newline at end of file