Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2026-03-05 12:01:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

modularized coverPhoto

Browse Source
This commit is contained in:
psychobunny
2015-10-28 14:22:19 -04:00
parent 4baeda7c09
commit 69e43cd35a
2 changed files with 112 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
public/src/client/groups/details.js
View File

@@ -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"]');

93
public/src/modules/coverPhoto.js Normal file
View File

@@ -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;
});