diff --git a/public/less/admin/admin.less b/public/less/admin/admin.less
index 220ea5ff6d..867434fe46 100644
--- a/public/less/admin/admin.less
+++ b/public/less/admin/admin.less
@@ -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;
+ }
}
\ No newline at end of file
diff --git a/public/src/admin/manage/categories.js b/public/src/admin/manage/categories.js
index f28b9c52bf..fd6658fe9c 100644
--- a/public/src/admin/manage/categories.js
+++ b/public/src/admin/manage/categories.js
@@ -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;
diff --git a/public/src/admin/manage/category.js b/public/src/admin/manage/category.js
index 36f6867a1a..9ba5d28e7b 100644
--- a/public/src/admin/manage/category.js
+++ b/public/src/admin/manage/category.js
@@ -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();
diff --git a/src/views/admin/manage/categories.tpl b/src/views/admin/manage/categories.tpl
index 779c1ce624..ebdeaad6bd 100644
--- a/src/views/admin/manage/categories.tpl
+++ b/src/views/admin/manage/categories.tpl
@@ -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>
\ No newline at end of file
diff --git a/src/views/admin/manage/category.tpl b/src/views/admin/manage/category.tpl
index 00d6ab64ed..36e424f241 100644
--- a/src/views/admin/manage/category.tpl
+++ b/src/views/admin/manage/category.tpl
@@ -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">