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

closes #2223, ability to select multiple tags

Browse Source
This commit is contained in:
psychobunny
2014-10-03 17:50:09 -04:00
parent 4b9e4a0109
commit e86697b36f
3 changed files with 60 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/less/admin/manage/tags.less
View File

@@ -11,9 +11,10 @@
.tag-item {
cursor: pointer;
display: inline-block;
margin-top: 22px;
font-size: 11px;
}
.user-select(none);
}
.save {

58
public/src/forum/admin/manage/tags.js
View File

@@ -1,16 +1,13 @@
"use strict";
/*global define, socket, app, admin, utils, bootbox, RELATIVE_PATH*/
define('forum/admin/manage/tags', ['forum/infinitescroll'], function(infinitescroll) {
define('forum/admin/manage/tags', ['forum/infinitescroll', 'admin/selectable'], function(infinitescroll, selectable) {
var Tags = {};
var timeoutId = 0;
Tags.init = function() {
handleColorPickers();
$('.tag-list').on('click', '.save', function() {
save($(this));
});
selectable.enable('.tag-management', '.tag-row');
$('#tag-search').on('input propertychange', function() {
if (timeoutId) {
@@ -31,14 +28,18 @@ define('forum/admin/manage/tags', ['forum/infinitescroll'], function(infinitescr
}, 100);
});
$('.tag-item').on('click', function(ev) {
var tagName = $(this).text(),
tag = $(this),
row = tag.parents('.tag-row');
$('#modify').on('click', function(ev) {
var tagsToModify = $('.tag-row.dropped');
if (!tagsToModify.length) {
return;
}
var firstTag = $(tagsToModify[0]),
title = tagsToModify.length > 1 ? 'Editing multiple tags' : 'Editing ' + firstTag.find('.tag-item').text() + ' tag';
bootbox.dialog({
title: "Editing " + tagName + " tag",
message: $(this).parents('.tag-row').find('.tag-modal').html(),
title: title,
message: firstTag.find('.tag-modal').html(),
buttons: {
success: {
label: "Save",
@@ -46,20 +47,17 @@ define('forum/admin/manage/tags', ['forum/infinitescroll'], function(infinitescr
callback: function() {
var modal = $('.bootbox'),
bgColor = modal.find('[data-name="bgColor"]').val(),
color = modal.find('[data-name="color"]').val();
color = modal.find('[data-name="color"]').val();
row.find('[data-name="bgColor"]').val(bgColor);
row.find('[data-name="color"]').val(color);
row.find('.tag-item').css('background-color', bgColor).css('color', color);
tagsToModify.each(function(idx, tag) {
tag = $(tag);
tag.find('[data-name="bgColor"]').val(bgColor);
tag.find('[data-name="color"]').val(color);
tag.find('.tag-item').css('background-color', bgColor).css('color', color);
save(tag);
}
},
info: {
label: "Click to view topics tagged \"" + tagName + "\"",
className: "btn-info",
callback: function() {
window.open(RELATIVE_PATH + '/tags/' + tagName);
save(tag);
});
}
}
}
@@ -89,15 +87,13 @@ define('forum/admin/manage/tags', ['forum/infinitescroll'], function(infinitescr
$('[data-name="bgColor"], [data-name="color"]').each(enableColorPicker);
}
function save(saveBtn) {
var tagRow = saveBtn.parents('.tag-row');
function save(tag) {
var data = {
tag: tagRow.attr('data-tag'),
bgColor : tagRow.find('[data-name="bgColor"]').val(),
color : tagRow.find('[data-name="color"]').val()
tag: tag.attr('data-tag'),
bgColor : tag.find('[data-name="bgColor"]').val(),
color : tag.find('[data-name="color"]').val()
};
console.log(data);
socket.emit('admin.tags.update', data, function(err) {
if (err) {
return app.alertError(err.message);
@@ -106,7 +102,5 @@ define('forum/admin/manage/tags', ['forum/infinitescroll'], function(infinitescr
});
}
return Tags;
});

52
src/views/admin/manage/tags.tpl
View File

@@ -5,34 +5,46 @@
</div>
<!-- ENDIF !tags.length -->
<div class="panel panel-default">
<div class="panel-heading">Tag Management</div>
<div class="panel-body">
<input class="form-control" type="text" id="tag-search" placeholder="Search"/><br/>
<div class="col-lg-9">
<div class="panel panel-default tag-management">
<div class="panel-heading">Tag Management</div>
<div class="panel-body">
<input class="form-control" type="text" id="tag-search" placeholder="Search"/><br/>
<div class="row">
<p>Click on a tag to modify its background and text colours</p>
<div class="tag-list">
<!-- BEGIN tags -->
<div class="tag-row" data-tag="{tags.value}">
<div data-value="{tags.value}">
<span class="tag-item" data-tag="{tags.value}" style="<!-- IF tags.color -->color: {tags.color};<!-- ENDIF tags.color --><!-- IF tags.bgColor -->background-color: {tags.bgColor};<!-- ENDIF tags.bgColor -->">{tags.value}</span><span class="tag-topic-count">{tags.score}</span>
</div>
<div class="tag-modal hidden">
<div class="form-group">
<label for="bgColor">Background Colour</label>
<input id="bgColor" placeholder="#ffffff" data-name="bgColor" value="{tags.bgColor}" class="form-control category_bgColor" />
<div class="row">
<div class="tag-list">
<!-- BEGIN tags -->
<div class="tag-row" data-tag="{tags.value}">
<div data-value="{tags.value}">
<span class="tag-item" data-tag="{tags.value}" style="<!-- IF tags.color -->color: {tags.color};<!-- ENDIF tags.color --><!-- IF tags.bgColor -->background-color: {tags.bgColor};<!-- ENDIF tags.bgColor -->">{tags.value}</span><span class="tag-topic-count"><a href="{relative_path}/tags/{tags.value}" target="_blank">{tags.score}</a></span>
</div>
<div class="form-group">
<label for="color">Text Colour</label>
<input id="color" placeholder="#a2a2a2" data-name="color" value="{tags.color}" class="form-control category_color" />
<div class="tag-modal hidden">
<div class="form-group">
<label for="bgColor">Background Colour</label>
<input id="bgColor" placeholder="#ffffff" data-name="bgColor" value="{tags.bgColor}" class="form-control category_bgColor" />
</div>
<div class="form-group">
<label for="color">Text Colour</label>
<input id="color" placeholder="#a2a2a2" data-name="color" value="{tags.color}" class="form-control category_color" />
</div>
</div>
</div>
<!-- END tags -->
</div>
<!-- END tags -->
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-heading">Modify Tag</div>
<div class="panel-body">
<p>Select tags via clicking and/or dragging, use shift to select multiple.</p>
<button class="btn btn-primary btn-md" id="modify">Modify Selected Tags</button>
</div>
</div>
</div>
</div>