possible template bug re: labels

[Kami]

Hello folks!

Not really sure if this is a bug but it seems to be functioning counter to what I'd expect.

{if $[thread.labels]} doesn't seem to hide any content barring the $[thread.labels] variable when used. So something like:

{if $[thread.labels]}
    some plain text<br />
    $[thread.labels]<br />
    more plain text
{/if}

Displays:

some plain text

more plain text


with a gap where the labels would appear, regardless of whether or not any labels are actually applied. Is this the correct behaviour for this if statement? If so, how would you specify text to appear if an only if thread labels are applied?

[Chris]

Dec 27, 2016 19:25:49 GMT -8 Kami said:

Hello folks!

Not really sure if this is a bug but it seems to be functioning counter to what I'd expect.

{if $[thread.labels]} doesn't seem to hide any content barring the $[thread.labels] variable when used. So something like:

{if $[thread.labels]}
    some plain text<br />
    $[thread.labels]<br />
    more plain text
{/if}

Displays:

some plain text

more plain text


with a gap where the labels would appear, regardless of whether or not any labels are actually applied. Is this the correct behaviour for this if statement? If so, how would you specify text to appear if an only if thread labels are applied?

<span class="no-labels js-no-labels"></span>

Looks like that particular variable always output something even if it is just an empty span

[Kami]

Chris - thank you! hrm. do you know if there'd be a way to specify text that only appears if a label is applied?

[Chris]

My first thought was to simply do a string comparison against that particular empty span string to see if it is indeed "empty" but for reasons I cannot fathom such a comparison always fail. To rule out the possibility this could be markup doctoring via the browser (e.g lowercasing, attribute reordering, etc.) I output the variable directly into an html comment and saw no difference across platforms so this has me baffled.

{if $[thread.labels] == '<span class="no-labels js-no-labels"><span>'}

Play with that perhaps escaping certain characters to see if you can get it to recognize that specific output string

[Kami]

Chris - I've had a small play, and I don't seem to have much more success. I attempted to escape the double quotes, switched which text had double vs single quotes, escaped the single quotes after the switch, and it doesn't recognise it as a valid check resulting in the labels to be hidden entirely.

I'll keep playing with it tonight / tomorrow and see if I can come up with something, though. Thank you for your insight once again (:

Small update: I have also tried to do an if / else statement, including using the else statement to trigger a style declaration of display: none; for the label class. No luck.


EDIT:

Looking at the inspect element, it looks like any text placed within the label if statement is rendered outside of the above span class, like so:

<span class="thread-labels">Labeled: <span class="no-labels js-no-labels"></span></span>

Which is unfortunate, as I'm trying to hide the "Labeled:" text if no labels have been selected, which leads back to my original question as to if this is the expected behaviour for the variable.

[Chris]

Dec 28, 2016 0:07:42 GMT -8 Kami said:

EDIT:

Looking at the inspect element, it looks like any text placed within the label if statement is rendered outside of the above span class, like so:

<span class="thread-labels">Labeled: <span class="no-labels js-no-labels"></span></span>

Which is unfortunate, as I'm trying to hide the "Labeled:" text if no labels have been selected, which leads back to my original question as to if this is the expected behaviour for the variable.

As to why the variable is stubbornly acting counterintuitive, someone with intimate access may need to answer that.

Since the span.thread-labels is not part of the variables output I would assume that is literally being added in the theme, something along the lines of <span class="thread-labels">Labels:$[thread.labels]</span> 
You'll probably need to resort to javascript to hide the ones with span.js-no-label

<script>
$('.js-no-labels').hide().parent('.thread-labels').hide();
</script>

placed somewhere that will allow it to run after those elements have been rendered by the browser such as in a footer or at the bottom of a fully formed template or dropped in a $(document).ready(function(){CODE HERE}) although this is so overused I've seen it cause problems on heavy bling bling forums

[₪» ⅀ ƪ Ƒ «₪]

I forget which red name coded this for me, probably Brian, but I have a javascript snippet that essentially checks to see if the label span is or isn't blank and it adds/removes classes based on that information, then utilizing display: none; for the classes it adds/removes.

<script type="text/javascript">
$(document).ready(function(){
if($('.container.posts span.labels').children().length){
$('#interactivethreads').addClass('has-labels');
}
});
</script>

It would need to be fiddled with for your own forum, I'm sure, and you'd have to construct your HTML and CSS components to go with it, but it's pretty straightforward and I've never had any issues with it ^^

EDIT: Hunted down the original thread for you to search through if you'd like: support.proboards.com/thread/576620/thread-label-variable

[Kami]

₪» ⅀ ƪ Ƒ «₪ - sorry for the delayed response, but thank you!

unfortunately, this doesn't seem to work with my customised template, and I'm not familiar enough with javascript to edit it properly.

HOWEVER, the script that Chris provided works a charm, thank you (:
EDIT: There seems to be a small issue in that adding / removing a label will not appear until the page is refreshed -- is there any way around this?

[Chris]

Sorry Kami, we need to wrap the code inside a function so we can then pass it to be rerun on the event

<script>
function hideEmptyLabels(){
$('.js-no-labels').hide().parent('.thread-labels').hide();
}
pb.events.on('afterSearch', hideEmptyLabels);
hideEmptyLabels();
</script>

This assume the "afterSearch" event triggers for the label add/remove if not then I'll need to take a deeper look later possibly resorting to monitoring AJAX communication to decide when to act.

[Kami]

Chris - thanks for the reply! unfortunately still needing to refresh to see the label applied or removed. :( thank you for your time and effort!

[Chris]

Give this one a try Kami ,


<script>
(function () {
function hideEmptyLabels() {
$('.js-no-labels, .js-labels-list').parent('.thread-labels').show();
$('.js-no-labels:empty, .js-labels-list:empty').parent('.thread-labels').hide();

}
$(document).ajaxComplete(function (ev, xhr, opts) {
if (proboards.route("apply_thread_label") === opts.url){
hideEmptyLabels();
}
})
hideEmptyLabels();
})();
</script>

[Kami]

Chris - whoops I forgot about this thread! Sorry about that. This works -- the text that precedes the label itself ("Status:") doesn't disappear when the label is removed and instead goes away on refresh, but I can deal with that.

Thank you!

[Chris]

Feb 26, 2017 9:19:36 GMT -8 Kami said:

Chris - whoops I forgot about this thread! Sorry about that. This works -- the text that precedes the label itself ("Status:") doesn't disappear when the label is removed and instead goes away on refresh, but I can deal with that.

Thank you!

EDIT: disregard the below edit, I misread your post. I'll address this after work today.

That should be remediable by making sure the function reruns after a proboards content change (such as page change or post filter search) occurs 

<script>
( () => {
function hideEmptyLabels() {
$('.js-no-labels, .js-labels-list').parent('.thread-labels').show();
$('.js-no-labels:empty, .js-labels-list:empty').parent('.thread-labels').hide();

}
$(document).ajaxComplete(function (ev, xhr, opts) {
if (proboards.route("apply_thread_label") === opts.url){
hideEmptyLabels();
}
})
hideEmptyLabels();
pb.events.on('afterSearch', hideEmptyLabels);
})();
</script>

*added the line pb.events.on('afterSearch', hideEmptyLabels);

[Kami]

Chris - oh okay haha. and honestly no rush -- i don't mind having the 'status' text disappear after refresh, as long as the users can see the label has been removed.

[Chris]

It appears to be a mistype on my part Kami , try removing the "s" from

js-labels-list

and

js-labels-list:empty


<script>
( () => {
function hideEmptyLabels() {
$('.js-no-labels, .js-label-list').parent('.thread-labels').show();
$('.js-no-labels, .js-label-list').filter( function (i,e) {
let a = $('a',this), b = a.length;
if(b == 0) return !0;

/* removed labels leave an empty anchor behind so parent not really empty */
return a.filter(':empty').length === b;
}).parent('.thread-labels').hide();

}
$(document).ajaxComplete(function (ev, xhr, opts) {
if (proboards.route("apply_thread_label") === opts.url){
hideEmptyLabels();
}
})
hideEmptyLabels();
pb.events.on('afterSearch', hideEmptyLabels)
})();
</script>