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

rewrote a bit of the code so that templates.js is called asynchronously, and moved indentation levels to CSS instead of inlined styling.

Browse Source
v1.18.x
Julian Lam 10 years ago
parent 394497c9d5
commit 478850ac05
4 changed files with 93 additions and 111 deletions
Show Stats Download Patch File Download Diff File

5
public/less/admin/manage/categories.less
Unescape Escape View File

@ -1,9 +1,14 @@
div.categories {
ul {
.no-select;
list-style-type: none;
margin: 0;
padding: 0;
> li > ul > li {
margin-left: 4.5rem;
}
}
.fa-ul {

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

@ -1,13 +1,10 @@
"use strict";
/*global define, socket, app, bootbox, templates, ajaxify, RELATIVE_PATH*/
/*global define, socket, app, bootbox, templates, ajaxify, RELATIVE_PATH, Sortable */
define('admin/manage/categories', function() {
var Categories = {}, newCategoryId = -1, sortables, itemTemplate;
Categories.init = function() {
$.get(RELATIVE_PATH + '/templates/admin/partials/categories/category-item.tpl', function(data){
itemTemplate = data;
socket.emit('admin.categories.getAll', function(error, payload){
if(error){
return app.alertError(error.message);
@ -15,9 +12,18 @@ define('admin/manage/categories', function() {
Categories.render(payload);
});
});
$('button[data-action="create"]').on('click', Categories.create);
// Enable/Disable toggle events
$('.categories').on('click', 'button[data-action="toggle"]', function() {
var self = $(this),
rowEl = self.parents('li'),
cid = rowEl.attr('data-cid'),
disabled = rowEl.hasClass('disabled');
Categories.toggle(cid, disabled);
});
};
Categories.create = function() {
@ -58,10 +64,26 @@ define('admin/manage/categories', function() {
.appendTo(container);
}else{
sortables = {};
renderList(categories, 0, container, 0);
renderList(categories, container, 0);
}
};
Categories.toggle = function(cid, state) {
var payload = {};
payload[cid] = {
disabled: !state | 0
};
socket.emit('admin.categories.update', payload, function(err, result) {
if (err) {
return app.alertError(err.message);
} else {
ajaxify.refresh();
}
});
}
function itemDidAdd(e){
newCategoryId = e.to.dataset.cid;
}
@ -96,32 +118,22 @@ define('admin/manage/categories', function() {
* @param container {object} parent jquery element for the list
* @param parentId {number} parent category identifier
*/
function renderList(categories, level, container, parentId){
var i = 0, len = categories.length, category, marginLeft = 48, listItem;
var list = $('<ul />', {'data-cid': parentId});
if(level > 0){
list.css('margin-left', marginLeft);
}
for(i; i < len; ++i){
category = categories[i];
listItem = $('<li></li>', {'data-cid': category.cid})
.append(renderListItem(category))
.appendTo(list);
if(category.disabled){
listItem.addClass('disabled');
}
function renderList(categories, container, parentId){
templates.parse('admin/partials/categories/category-rows', {
cid: parentId,
categories: categories
}, function(html) {
container.append(html);
if(category.children.length > 0){
renderList(category.children, level + 1, listItem, category.cid);
// Handle and children categories in this level have
for(var x=0,numCategories=categories.length;x<numCategories;x++) {
if (categories[x].hasOwnProperty('children') && categories[x].children.length > 0) {
renderList(categories[x].children, $('li[data-cid="' + categories[x].cid + '"]'), categories[x].cid);
}
}
list.appendTo(container);
sortables[parentId] = Sortable.create(list[0], {
// Make list sortable
sortables[parentId] = Sortable.create($('ul[data-cid="' + parentId + '"]')[0], {
group: 'cross-categories',
animation: 150,
handle: '.icon',
@ -130,49 +142,7 @@ define('admin/manage/categories', function() {
onAdd: itemDidAdd,
onEnd: itemDragDidEnd
});
}
function renderListItem(categoryEntity){
var listItem = $(templates.parse(
itemTemplate,
categoryEntity
));
var icon = listItem.find('.icon'),
button = listItem.find('[data-action="toggle"]');
if(categoryEntity.backgroundImage){
icon.css('background-image', 'url(' + categoryEntity.backgroundImage + ')');
}
icon
.css('color', categoryEntity.color)
.css('background-color', categoryEntity.bgColor);
if(categoryEntity.disabled){
button.text('Enable').addClass('btn-success');
}else{
button.text('Disable').addClass('btn-danger');
}
// Category enable/disable
button.on('click', function(e) {
var payload = {};
payload[categoryEntity.cid] = {
disabled: !categoryEntity.disabled | 0
};
socket.emit('admin.categories.update', payload, function(err, result) {
if (err) {
return app.alertError(err.message);
} else {
ajaxify.refresh();
}
});
});
return listItem;
}
return Categories;

26
src/views/admin/partials/categories/category-item.tpl
Unescape Escape View File

@ -1,26 +0,0 @@
<div class="row">
<div class="col-md-9">
<div class="clearfix">
<div class="icon">
<i data-name="icon" value="{icon}" class="fa {icon}"></i>
</div>
<div class="information">
<h5 class="header">{name}</h5>
<p class="description">{description}</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="clearfix pull-right">
<ul class="fa-ul stats">
<li class="fa-li"><i class="fa fa-book"></i> {topic_count}</li>
<li class="fa-li"><i class="fa fa-pencil"></i> {post_count}</li>
</ul>
<div class="btn-group">
<button data-action="toggle" data-disabled="{disabled}" class="btn btn-xs"></button>
<a href="./categories/{cid}" class="btn btn-default btn-xs">Edit</a>
</div>
</div>
</div>
</div>

33
src/views/admin/partials/categories/category-rows.tpl
Unescape Escape View File

@ -0,0 +1,33 @@
<ul data-cid="{cid}">
<!-- BEGIN categories -->
<li data-cid="{categories.cid}" <!-- IF categories.disabled -->class="disabled"<!-- ENDIF categories.disabled -->>
<div class="row">
<div class="col-md-9">
<div class="clearfix">
<div class="icon" style="color: {categories.color}; background-color: {categories.bgColor};<!-- IF categories.backgroundImage --> background-image: url('{categories.backgroundImage}');<!-- ENDIF categories.backgroundImage -->">
<i data-name="icon" value="{categories.icon}" class="fa {categories.icon}"></i>
</div>
<div class="information">
<h5 class="header">{categories.name}</h5>
<p class="description">{categories.description}</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="clearfix pull-right">
<ul class="fa-ul stats">
<li class="fa-li"><i class="fa fa-book"></i> {categories.topic_count}</li>
<li class="fa-li"><i class="fa fa-pencil"></i> {categories.post_count}</li>
</ul>
<div class="btn-group">
<button data-action="toggle" data-disabled="{categories.disabled}" class="btn btn-xs <!-- IF categories.disabled -->btn-primary<!-- ELSE -->btn-danger<!-- ENDIF categories.disabled -->">
<!-- IF categories.disabled -->Enable<!-- ELSE -->Disable<!-- ENDIF categories.disabled -->
</button>
<a href="./categories/{categories.cid}" class="btn btn-default btn-xs">Edit</a>
</div>
</div>
</div>
</div>
</li>
<!-- END categories -->
</ul>
Write Preview
Loading…
Cancel
Save