hyperzlib
/
nodebb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

image uploading for categories, #2463

Browse Source
v1.18.x
Julian Lam 10 years ago
parent ad723e2943
commit dfe8e8de70
5 changed files with 99 additions and 387 deletions
Show Stats Download Patch File Download Diff File

16
public/less/admin/admin.less
Unescape Escape View File

@ -265,4 +265,20 @@
tr:hover {
cursor: move;
}
}
.category-preview {
width: 100%;
height: 100px;
text-align: center;
color: white;
margin-top: 0;
.icon {
width: 30px;
height: 30px;
line-height: 40px;
display: inline-block;
margin: 35px 5px 0 5px;
}
}

321
public/src/admin/manage/categories.js
Unescape Escape View File

@ -1,47 +1,12 @@
"use strict";
/*global define, socket, app, bootbox, templates, ajaxify, RELATIVE_PATH*/
define('admin/manage/categories', [
'uploader',
'admin/modules/iconSelect',
'admin/modules/colorpicker'
], function(uploader, iconSelect, colorpicker) {
define('admin/manage/categories', function() {
var Categories = {};
Categories.init = function() {
var bothEl = $('#active-categories, #disabled-categories');
var modified_categories = {};
function modified(el) {
var cid = $(el).parents('li').attr('data-cid');
if(cid) {
modified_categories[cid] = modified_categories[cid] || {};
modified_categories[cid][$(el).attr('data-name')] = $(el).val();
}
}
function save() {
if(Object.keys(modified_categories).length) {
socket.emit('admin.categories.update', modified_categories, function(err, result) {
if (err) {
return app.alertError(err.message);
}
if (result && result.length) {
app.alert({
title: 'Updated Categories',
message: 'Category IDs ' + result.join(', ') + ' was successfully updated.',
type: 'success',
timeout: 2000
});
}
});
modified_categories = {};
}
return false;
}
function updateCategoryOrders(evt, ui) {
var categories = $(evt.target).children(),
modified = {},
@ -82,11 +47,6 @@ define('admin/manage/categories', [
});
});
$('.blockclass, .admin-categories form select').each(function() {
var $this = $(this);
$this.val($this.attr('data-value'));
});
function showCreateCategoryModal() {
$('#new-category-modal').modal();
}
@ -119,283 +79,8 @@ define('admin/manage/categories', [
});
}
function enableColorPicker(idx, inputEl) {
var $inputEl = $(inputEl),
previewEl = $inputEl.parents('[data-cid]').find('.preview-box');
colorpicker.enable($inputEl, function(hsb, hex) {
if ($inputEl.attr('data-name') === 'bgColor') {
previewEl.css('background', '#' + hex);
} else if ($inputEl.attr('data-name') === 'color') {
previewEl.css('color', '#' + hex);
}
modified($inputEl[0]);
});
}
function setupEditTargets() {
$('[data-edit-target]').on('click', function() {
var $this = $(this),
target = $($this.attr('data-edit-target'));
$this.addClass('hide');
target.removeClass('hide').on('blur', function() {
$this.removeClass('hide').children('span').html(this.value);
$(this).addClass('hide');
}).val($this.children('span').html());
target.focus();
});
}
$(function() {
var url = window.location.href,
parts = url.split('/'),
active = parts[parts.length - 1];
$('.nav-pills li').removeClass('active');
$('.nav-pills li a').each(function() {
var $this = $(this);
if ($this.attr('href').match(active)) {
$this.parent().addClass('active');
return false;
}
});
$('#addNew').on('click', showCreateCategoryModal);
$('#create-category-btn').on('click', createNewCategory);
$('#active-categories, #disabled-categories, #new-category-modal').on('click', '.icon', function(ev) {
iconSelect.init($(this).find('i'), modified);
});
$('.admin-categories form input, .admin-categories form select').on('change', function(ev) {
modified(ev.target);
});
// Colour Picker
$('[data-name="bgColor"], [data-name="color"]').each(enableColorPicker);
$('.admin-categories').on('click', '.save', save);
$('.admin-categories').on('click', '.purge', function() {
var categoryRow = $(this).parents('li[data-cid]');
var cid = categoryRow.attr('data-cid');
bootbox.confirm('Do you really want to purge this category "' + categoryRow.find('#cid-' + cid + '-name').val() + '"?<br/><strong class="text-danger">Warning!</strong> All topics and posts in this category will be purged!', function(confirm) {
if (!confirm) {
return;
}
socket.emit('admin.categories.purge', cid, function(err) {
if (err) {
return app.alertError(err.message);
}
app.alertSuccess('Category purged!');
categoryRow.remove();
});
});
});
$('.admin-categories').on('click', '.permissions', function() {
var cid = $(this).parents('li[data-cid]').attr('data-cid');
Categories.launchPermissionsModal(cid);
return false;
});
$('.admin-categories').on('click', '.upload-button', function() {
var inputEl = $(this),
cid = inputEl.parents('li[data-cid]').attr('data-cid');
uploader.open(RELATIVE_PATH + '/admin/category/uploadpicture', { cid: cid }, 0, function(imageUrlOnServer) {
inputEl.val(imageUrlOnServer);
var previewBox = inputEl.parents('li[data-cid]').find('.preview-box');
previewBox.css('background', 'url(' + imageUrlOnServer + '?' + new Date().getTime() + ')')
.css('background-size', 'cover');
modified(inputEl[0]);
});
});
$('.admin-categories').on('click', '.delete-image', function() {
var parent = $(this).parents('li[data-cid]'),
inputEl = parent.find('.upload-button'),
preview = parent.find('.preview-box'),
bgColor = parent.find('.category_bgColor').val();
inputEl.val('');
modified(inputEl[0]);
preview.css('background', bgColor);
$(this).addClass('hide').hide();
});
$('#revertChanges').on('click', function() {
ajaxify.refresh();
});
setupEditTargets();
$('button[data-action="setParent"]').on('click', function() {
var cid = $(this).parents('[data-cid]').attr('data-cid'),
modal = $('#setParent');
modal.find('select').val($(this).attr('data-parentCid'));
modal.attr('data-cid', cid).modal();
});
$('button[data-action="removeParent"]').on('click', function() {
var cid = $(this).parents('[data-cid]').attr('data-cid');
var payload= {};
payload[cid] = {
parentCid: 0
};
socket.emit('admin.categories.update', payload, function(err) {
if (err) {
return app.alertError(err.message);
}
ajaxify.go('admin/manage/categories/active');
});
});
$('#setParent [data-cid]').on('click', function() {
var modalEl = $('#setParent'),
parentCid = $(this).attr('data-cid'),
payload = {};
payload[modalEl.attr('data-cid')] = {
parentCid: parentCid
};
socket.emit('admin.categories.update', payload, function(err) {
modalEl.one('hidden.bs.modal', function() {
ajaxify.go('admin/manage/categories/active');
});
modalEl.modal('hide');
});
});
});
};
Categories.launchPermissionsModal = function(cid) {
var modal = $('#category-permissions-modal'),
searchEl = modal.find('#permission-search'),
resultsEl = modal.find('.search-results.users'),
groupsResultsEl = modal.find('.search-results.groups'),
searchDelay;
// Clear the search field and results
searchEl.val('');
resultsEl.html('');
searchEl.off().on('keyup', function() {
var searchEl = this,
liEl;
clearTimeout(searchDelay);
searchDelay = setTimeout(function() {
socket.emit('admin.categories.search', {
username: searchEl.value,
cid: cid
}, function(err, results) {
if(err) {
return app.alertError(err.message);
}
templates.parse('admin/partials/categories/users', {
users: results
}, function(html) {
resultsEl.html(html);
});
});
}, 250);
});
Categories.refreshPrivilegeList(cid);
resultsEl.off().on('click', '[data-priv]', function(e) {
var anchorEl = $(this),
uid = anchorEl.parents('li[data-uid]').attr('data-uid'),
privilege = anchorEl.attr('data-priv');
e.preventDefault();
e.stopPropagation();
socket.emit('admin.categories.setPrivilege', {
cid: cid,
uid: uid,
privilege: privilege,
set: !anchorEl.hasClass('active')
}, function(err) {
if (err) {
return app.alertError(err.message);
}
anchorEl.toggleClass('active', !anchorEl.hasClass('active'));
Categories.refreshPrivilegeList(cid);
});
});
modal.off().on('click', '.members li > img', function() {
searchEl.val($(this).attr('title'));
searchEl.keyup();
});
// User Groups and privileges
socket.emit('admin.categories.groupsList', cid, function(err, results) {
if(err) {
return app.alertError(err.message);
}
templates.parse('admin/partials/categories/groups', {
groups: results
}, function(html) {
groupsResultsEl.html(html);
});
});
groupsResultsEl.off().on('click', '[data-priv]', function(e) {
var anchorEl = $(this),
name = anchorEl.parents('li[data-name]').attr('data-name'),
privilege = anchorEl.attr('data-priv');
e.preventDefault();
e.stopPropagation();
socket.emit('admin.categories.setGroupPrivilege', {
cid: cid,
name: name,
privilege: privilege,
set: !anchorEl.hasClass('active')
}, function(err) {
if (!err) {
anchorEl.toggleClass('active');
}
});
});
modal.modal();
};
Categories.refreshPrivilegeList = function (cid) {
var modalEl = $('#category-permissions-modal'),
memberList = $('.members');
socket.emit('admin.categories.getPrivilegeSettings', cid, function(err, privilegeList) {
var membersLength = privilegeList.length,
liEl, x, userObj;
memberList.html('');
if (membersLength > 0) {
for(x = 0; x < membersLength; x++) {
userObj = privilegeList[x];
liEl = $('<li/>').attr('data-uid', userObj.uid).html('<img src="' + userObj.picture + '" title="' + userObj.username + '" />');
memberList.append(liEl);
}
} else {
liEl = $('<li/>').addClass('empty').html('None.');
memberList.append(liEl);
}
});
$('#addNew').on('click', showCreateCategoryModal);
$('#create-category-btn').on('click', createNewCategory);
};
return Categories;

112
public/src/admin/manage/category.js
Unescape Escape View File

@ -11,9 +11,12 @@ define('admin/manage/category', [
Category.init = function() {
var modified_categories = {};
function modified(el) {
var cid = $(el).parents('form').attr('data-cid');
if(cid) {
function modified(el, cid) {
if (!cid) {
cid = $(el).parents('form').attr('data-cid');
}
if (cid) {
modified_categories[cid] = modified_categories[cid] || {};
modified_categories[cid][$(el).attr('data-name')] = $(el).val();
}
@ -75,42 +78,52 @@ define('admin/manage/category', [
});
}
$(function() {
var url = window.location.href,
parts = url.split('/'),
active = parts[parts.length - 1],
optionsEl = $('.options');
$('#new-category-modal').on('click', '.icon', function(ev) {
iconSelect.init($(this).find('i'), modified);
});
$('form.category input, form.category select').on('change', function(ev) {
modified(ev.target);
});
// If any inputs have changed, prepare it for saving
$('form.category input, form.category select').on('change', function(ev) {
modified(ev.target);
});
// Colour Picker
$('[data-name="bgColor"], [data-name="color"]').each(enableColorPicker);
// Colour Picker
$('[data-name="bgColor"], [data-name="color"]').each(enableColorPicker);
optionsEl.on('click', '.save', save);
optionsEl.on('click', '.revert', ajaxify.refresh);
optionsEl.on('click', '.purge', function() {
var categoryRow = $(this).parents('li[data-cid]');
var cid = categoryRow.attr('data-cid');
// Options menu events
var optionsEl = $('.options');
optionsEl.on('click', '.save', save);
optionsEl.on('click', '.revert', ajaxify.refresh);
optionsEl.on('click', '.purge', function() {
var categoryRow = $(this).parents('li[data-cid]');
var cid = categoryRow.attr('data-cid');
bootbox.confirm('<p class="lead">Do you really want to purge this category "' + $('form.category').find('input[data-name="name"]').val() + '"?</p><p><strong class="text-danger">Warning!</strong> All topics and posts in this category will be purged!</p>', function(confirm) {
if (!confirm) {
return;
bootbox.confirm('<p class="lead">Do you really want to purge this category "' + $('form.category').find('input[data-name="name"]').val() + '"?</p><p><strong class="text-danger">Warning!</strong> All topics and posts in this category will be purged!</p>', function(confirm) {
if (!confirm) {
return;
}
socket.emit('admin.categories.purge', cid, function(err) {
if (err) {
return app.alertError(err.message);
}
socket.emit('admin.categories.purge', cid, function(err) {
if (err) {
return app.alertError(err.message);
}
app.alertSuccess('Category purged!');
categoryRow.remove();
});
app.alertSuccess('Category purged!');
categoryRow.remove();
});
});
});
// Image Uploader
$('.upload-button').on('click', function() {
var inputEl = $(this),
cid = inputEl.attr('data-cid');
uploader.open(RELATIVE_PATH + '/admin/category/uploadpicture', { cid: cid }, 0, function(imageUrlOnServer) {
inputEl.val(imageUrlOnServer);
var previewBox = inputEl.siblings('.category-preview');
previewBox.css('background', 'url(' + imageUrlOnServer + '?' + new Date().getTime() + ')')
.css('background-size', 'cover');
modified(inputEl[0], cid);
});
});
$(function() {
// $('.admin-categories').on('click', '.permissions', function() {
// var cid = $(this).parents('li[data-cid]').attr('data-cid');
@ -119,32 +132,19 @@ define('admin/manage/category', [
// });
$('.admin-categories').on('click', '.upload-button', function() {
var inputEl = $(this),
cid = inputEl.parents('li[data-cid]').attr('data-cid');
// $('.admin-categories').on('click', '.delete-image', function() {
// var parent = $(this).parents('li[data-cid]'),
// inputEl = parent.find('.upload-button'),
// preview = parent.find('.preview-box'),
// bgColor = parent.find('.category_bgColor').val();
uploader.open(RELATIVE_PATH + '/admin/category/uploadpicture', { cid: cid }, 0, function(imageUrlOnServer) {
inputEl.val(imageUrlOnServer);
var previewBox = inputEl.parents('li[data-cid]').find('.preview-box');
previewBox.css('background', 'url(' + imageUrlOnServer + '?' + new Date().getTime() + ')')
.css('background-size', 'cover');
modified(inputEl[0]);
});
});
$('.admin-categories').on('click', '.delete-image', function() {
var parent = $(this).parents('li[data-cid]'),
inputEl = parent.find('.upload-button'),
preview = parent.find('.preview-box'),
bgColor = parent.find('.category_bgColor').val();
inputEl.val('');
modified(inputEl[0]);
// inputEl.val('');
// modified(inputEl[0]);
preview.css('background', bgColor);
// preview.css('background', bgColor);
$(this).addClass('hide').hide();
});
// $(this).addClass('hide').hide();
// });
setupEditTargets();

11
src/views/admin/manage/categories.tpl
Unescape Escape View File

@ -47,16 +47,6 @@
</div>
</div>
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-heading">Categories Control Panel</div>
<div class="panel-body">
<button class="btn btn-primary" id="addNew">Create New Category</button>
<button class="btn btn-default" id="revertChanges">Revert Changes</button>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-folder"></i> Categories</div>
@ -106,5 +96,4 @@
</div>
<!-- IMPORT admin/partials/categories/new.tpl -->
<!-- IMPORT admin/partials/categories/permissions.tpl -->
</div>

26
src/views/admin/manage/category.tpl
Unescape Escape View File

@ -1,5 +1,5 @@
<div class="row">
<div class="col-lg-9">
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-folder"></i> Categories</div>
<div class="panel-body">
@ -81,9 +81,31 @@
</form>
</div>
</div>
<!-- IMPORT admin/partials/categories/permissions.tpl -->
</div>
<div class="col-lg-3 options">
<div class="col-md-3 options">
<div class="panel panel-default hidden-sm">
<div class="panel-heading">Preview</div>
<div class="panel-body">
<div class="category-preview" style="
<!-- IF category.backgroundImage -->background-image: url({category.backgroundImage});<!-- ENDIF category.backgroundImage -->
<!-- IF category.bgColor -->background-color: {category.bgColor};<!-- ENDIF category.bgColor -->
color: {category.color};
background-size:cover;
">
<div class="icon">
<i data-name="icon" value="{category.icon}" class="fa {category.icon} fa-2x"></i>
</div>
</div>
<button type="button" data-cid="{category.cid}" data-name="image" data-value="{categories.image}" class="btn btn-default upload-button"><i class="fa fa-upload"></i> Upload Image</button>
<!-- IF categories.image -->
<small class="pointer delete-image"><i data-name="icon" value="fa-times" class="fa fa-times"></i></small>
<!-- ENDIF categories.image -->
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Categories Control Panel</div>
<div class="panel-body">

Write Preview
Loading…
Cancel
Save