Skip to content

Commit

Permalink
Issue #1193 : Tag's manager improvement
Browse files Browse the repository at this point in the history 
 * Hide tags over 100 in Tag's manager
 * Change the selection algorithm : now faster
 * Change tag's manager header disposition
 * Change filter design of Group Member manager and plugin to match with the tag's filter
  • Loading branch information
@Zacharieg @plegall
Zacharieg authored and plegall committed Jul 8, 2020
1 parent 5deba88 commit 775f2bc
Show file tree
Hide file tree
Showing 5 changed files with 141 additions and 83 deletions.
104 changes: 67 additions & 37 deletions admin/themes/default/js/tags.js
View file
Expand Up @@ -142,7 +142,7 @@ function setupTagbox(tagBox) {
});

tagBox.on('click', function() {
if (tagBox.hasClass('selection')) {
if ($('.tag-container').hasClass('selection')) {
if (tagBox.attr('data-selected') == '1') {
tagBox.attr('data-selected', '0');
} else {
Expand Down Expand Up @@ -315,7 +315,7 @@ function duplicateTag(id, name) {
/*-------
Selection mode
-------*/
numberItemDisplayed = 5;
maxItemDisplayed = 5;

$("#toggleSelectionMode").attr("checked", false)
$("#toggleSelectionMode").click(function () {
Expand All @@ -324,14 +324,14 @@ $("#toggleSelectionMode").click(function () {

function selectionMode(isSelection) {
if (isSelection) {
$(".in-selection-mode").show();
$(".not-in-selection-mode").hide();
$(".tag-box").addClass("selection");
$(".in-selection-mode").addClass('show');
$(".not-in-selection-mode").addClass('hide');
$(".tag-container").addClass("selection");
$(".tag-box").removeClass('edit-name');
} else {
$(".in-selection-mode").removeAttr('style');
$(".not-in-selection-mode").removeAttr('style');
$(".tag-box").removeClass("selection");
$(".in-selection-mode").removeClass('show');
$(".not-in-selection-mode").removeClass('hide');
$(".tag-container").removeClass("selection");
$(".tag-box").attr("data-selected", '0');
updateListItem();
}
Expand All @@ -341,7 +341,6 @@ function updateListItem() {

let nowSelected = [];
let selected = [];
let shouldBeItem = [];
let shouldNotBeItem = [];
let names = {};
$('.tag-box[data-selected="1"]').each(function () {
Expand All @@ -350,54 +349,60 @@ function updateListItem() {
names[id] = $(this).find('.tag-name').html();
});

$('.selection-mode-tag .tag-list div').each(function () {
let id = $(this).attr('data-id');
selected.push(id);
});
selected = $('.selection-mode-tag .tag-list').data('list');
$('.selection-mode-tag .tag-list').attr('data-list', nowSelected);

shouldNotBeItem = [...selected];
shouldNotBeItem = shouldNotBeItem.filter(x => !nowSelected.includes(x));
shouldBeItem = [...nowSelected];
shouldBeItem = shouldBeItem.filter(x => !selected.includes(x));
selected = nowSelected;

shouldBeItem.forEach(function(id) {
let newItemStructure = $('<div data-id="'+id+'"><a class="icon-cancel"></a><p>'+names[id]+'</p> </div>');
$('.selection-mode-tag .tag-list').prepend(newItemStructure);
$('.selection-mode-tag .tag-list div[data-id='+id+'] a').on('click', function () {
$('.tag-box[data-id='+id+']').attr('data-selected', '0');
updateListItem();
})
})

shouldNotBeItem.forEach(function(id) {
$('.selection-mode-tag .tag-list div[data-id='+id+']').remove();
})

$('.selection-mode-tag .tag-list').html('');
let i = 0;
while(i < nowSelected.length && $('.selection-mode-tag .tag-list div').length < maxItemDisplayed) {
let item = nowSelected[i++];
let newItemStructure = $('<div data-id="'+item+'"><a class="icon-cancel"></a><p>'+names[item]+'</p> </div>');
$('.selection-mode-tag .tag-list').prepend(newItemStructure);
$('.selection-mode-tag .tag-list div[data-id='+item+'] a').on('click', function () {
$('.tag-box[data-id='+item+']').attr('data-selected', '0');
updateListItem();
});
}

$('#MergeOptionsChoices').html('');
nowSelected.forEach(id => {
$('#MergeOptionsChoices').append(
$('<option value="'+id+'">'+names[id]+'</option>')
)
})

if (selected.length > 5) {
if (nowSelected.length > maxItemDisplayed) {
$('.selection-other-tags').show();
$('.selection-other-tags').html(str_and_others_tags.replace('%s', selected.length - 5))
$('.selection-other-tags').html(str_and_others_tags.replace('%s', nowSelected.length - maxItemDisplayed))
} else {
$('.selection-other-tags').hide();
}



updateSelectionContent()
}

function updateMergeItems () {
let ids = [];
let names = [];
$('.tag-box[data-selected="1"]').each(function () {
ids.push($(this).attr('data-id'));
names[$(this).attr('data-id')] = $(this).find('.tag-name').html();
})

$('#MergeOptionsChoices').html('');
ids.forEach(id => {
$('#MergeOptionsChoices').append(
$('<option value="'+id+'">'+names[id]+'</option>')
)
})
}

mergeOption = false;

function updateSelectionContent() {
number = $('.tag-box[data-selected="1"]').length;
if (number == 0) {
mergeOption = false;
$('#nothing-selected').show();
$('.selection-mode-tag').hide();
$('#MergeOptionsBlock').hide();
Expand All @@ -408,10 +413,12 @@ function updateSelectionContent() {
$('#MergeOptionsBlock').hide();
$('#MergeSelectionMode').addClass('unavailable');
} else if (number > 1) {
$('#nothing-selected').hide();
$('#MergeSelectionMode').removeClass('unavailable');
if (mergeOption) {
$('#MergeOptionsBlock').show();
$('.selection-mode-tag').hide();
updateMergeItems();
} else {
$('#MergeOptionsBlock').hide();
$('.selection-mode-tag').show();
Expand All @@ -422,7 +429,7 @@ function updateSelectionContent() {

$('#MergeSelectionMode').on('click', function() {
mergeOption = true;
updateSelectionContent()
updateSelectionContent();
});

$('#CancelMerge').on('click', function() {
Expand Down Expand Up @@ -585,6 +592,8 @@ function tagListToString(list) {
Filter research
-------*/

var maxShown = 100;

$("#search-tag .search-input").on("input", function() {
let text = $(this).val().toLowerCase();
var searchNumber = 0;
Expand All @@ -607,6 +616,27 @@ $("#search-tag .search-input").on("input", function() {
} else {
$('.emptyResearch').hide();
}
hideLastTags();
});

function hideLastTags () {
let tagBoxes = $('.tag-box:visible');
if (tagBoxes.length > maxShown) {
for (let i = maxShown; i < tagBoxes.length; i++) {
$(tagBoxes[i]).hide();
}

str = str_others_tags_available.replace('%s', tagBoxes.length - maxShown);

$('.moreTagMessage').html(str);
$('.moreTagMessage').show();
} else {
$('.moreTagMessage').hide();
}
}

$(document).ready(function() {
hideLastTags();
})

/*-------
Expand Down
7 changes: 4 additions & 3 deletions admin/themes/default/template/group_list.tpl
View file
Expand Up @@ -214,9 +214,10 @@ var rootUrl = '{$ROOT_URL}'
<div class="AmountOfUsersShown">
<p>Showing <strong>39</strong> users out of <strong>251</strong></p>
</div>
<span class="icon-filter"></span>
<p>Filter</p>
<input class="input-user-name" type="text" name="username" maxlength="50" size="20" placeholder="Username">
<div class='search-user'>
<span class="icon-filter search-icon"></span>
<input class="input-user-name search-input" type="text" name="username" maxlength="50" size="20" placeholder="{'Filter'|@translate}">
</div>
</div>
</div>

Expand Down
4 changes: 2 additions & 2 deletions admin/themes/default/template/plugins_installed.tpl
View file
Expand Up @@ -189,8 +189,8 @@ jQuery(".pluginMiniBox").each(function(index){
{counter start=0 assign=i} {* <!-- counter for 'deactivate all' link --> *}

<div class="pluginFilter">
<p class="icon-filter">{'Filter'|@translate}</p>
<input type="text" placeholder="{'Name'|@translate}, {'Description'|@translate}">
<span class="icon-filter search-icon"></span>
<input class='search-input' type="text" placeholder="{'Filter'|@translate}">
</div>

<div class="emptyResearch"> {'No plugins found'|@translate} </div>
Expand Down
10 changes: 6 additions & 4 deletions admin/themes/default/template/tags.tpl
View file
Expand Up @@ -17,6 +17,7 @@ var str_copy = '{' (copy)'|@translate}';
var str_other_copy = '{' (copy %s)'|@translate}';
var str_merged_into = '{'Tag(s) \{%s1\} succesfully merged into "%s2"'|@translate}';
var str_and_others_tags = '{'and %s others'|@translate}';
var str_others_tags_available = '{'%s other tags available...'|@translate}'
{/footer_script}

{combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
Expand Down Expand Up @@ -70,12 +71,12 @@ var str_and_others_tags = '{'and %s others'|@translate}';

<div class="selection-mode-tag">
<p>{'Your selection'|@translate}</p>
<div class="tag-list">
<div class="tag-list" data-list='[]'>

</div>
<div class="selection-other-tags"></div>
<button id="MergeSelectionMode" class="icon-object-group unavailable">{'Merge'|@translate}</button>
<button id="DeleteSelectionMode" class="icon-trash-1">{'Delete selected tags'|@translate}</button>
<button id="DeleteSelectionMode" class="icon-trash-1">{'Delete'|@translate}</button>
</div>

<div id="MergeOptionsBlock">
Expand All @@ -94,8 +95,8 @@ var str_and_others_tags = '{'and %s others'|@translate}';

<div class='tag-header'>
<div id='search-tag'>
<span class='icon-filter'> </span>
<input class='search-input' type='text' placeholder='{'Search'|@translate}'>
<span class='icon-filter search-icon'> </span>
<input class='search-input' type='text' placeholder='{'Filter'|@translate}'>
</div>
<form id='add-tag' class='not-in-selection-mode'>
<span class='icon-cancel'></span>
Expand Down Expand Up @@ -132,6 +133,7 @@ var str_and_others_tags = '{'and %s others'|@translate}';
{/foreach}
</div>
<div class="emptyResearch"> {'No tag found'|@translate} </div>
<div class="moreTagMessage"> </div>

<div class='tag-template' style='display:none'>
{tagContent
Expand Down

0 comments on commit 775f2bc

Please sign in to comment.