inquiring metadata from threads to change thread icons

ponzinomics
Junior Member

Posts: 250

inquiring metadata from threads to change thread icons Aug 1, 2014 12:38:50 GMT -8

Quote

Post by ponzinomics on Aug 1, 2014 12:38:50 GMT -8

Hi, I am trying to replace the generic folder icon by a country flag in some specific threads. The flag CSS for each thread is configured by admin in a metadata param 'flag' of each thread (by using the 'ProBoards Thread Meta Data' plugin - which has not support thread itself).

I will be using this sprite: github.com/lafeber/world-flags-sprite and coding the CSS class in the flag meta param. i.e. flag: flag us

I have, for the moment, added

<link rel="stylesheet" type="text/css" href="http://cloud.github.com/downloads/lafeber/world-flags-sprite/flags32.css"/>
in the <head> section of 'Forum Wrapper' template to make the page aware about the CSS sprite.

And, finally, I need to add the replacing code itself in the 'Thread List' template, so I need to change

<tr id="$[thread.content_id]" class="$[thread.content_class]">
	<td class="icon">$[thread.icon]</td>

to "something as":

<tr id="$[thread.content_id]" class="$[thread.content_class] f32">
{if $[thread.metaparam.flag]}
	<td class="thread.metaparam.flag">$[thread.icon]</td>
{else}
	<td class="icon">$[thread.icon]</td>
{/if}

* Do you know the proper syntax to inquire from route a metadata param defined as id:flag, name:flag, label:flag? (instead my guess thread.metaparam.flag)

* Also, do not know if I need to amend <tr> class with f32 according to the example in the project. Not sure if class="$[thread.content_class] f32" is the proper way.

<ul class="f32">
  <li class="flag ar">Argentina</li>
  <li class="flag au">Australia</li>
  <li class="flag at">Austria</li>
  ...
</ul>

* By the way, is there any other plugin related to modifying thread's icons? I have not found any.

Thanks

Last Edit: Aug 1, 2014 13:23:13 GMT -8 by ponzinomics

Wormopolis
Part of the Furniture

King Oligochaete

Stop rating plugins with 1 star that dont deserve it.

Posts: 20,002

Mini-Profile Theme: Wormo's Mini-Profile

inquiring metadata from threads to change thread icons Aug 1, 2014 16:37:59 GMT -8 Chris and ponzinomics like this

Quote

Post by Wormopolis on Aug 1, 2014 16:37:59 GMT -8

Im not aware that plugin key values are available in the templates unless you explicitly add in some javascript to fetch them. Its going to depend on how the meta-data is stored in the keys for each thread to be able to extract. but it would require a small javascript snippet here:

<li class="flag" onload="var flagGet=pb.plugin.key('thread_metadata').get($[thread.content_id]); $(this).addClass(flagGet.id);">Argentina</li>

I dont know if that plugin key name is correct though. and none of that is tested, but see what it does.

If you like a plugin, click "like" on its support thread. then bookmark it so you know about updates!

ponzinomics
Junior Member

Posts: 250

inquiring metadata from threads to change thread icons Aug 1, 2014 19:43:21 GMT -8

Quote

Post by ponzinomics on Aug 1, 2014 19:43:21 GMT -8

Hi Wormopolis, I see what you intended but it does not seem to work.

I found out the expression to fetch the threads metadata variable by placing alerts in the headers area:

var flagGet = pb.plugin.key('thread_meta').get(proboards.data('route').params.thread_id)['thread_meta_flag'];

(well, I see is the same that you guessed)

but when I tried a simple alert in the onload method in the template, onload method does not seem triggered. I replaced

<td class="icon">$[thread.icon]</td>
by

<td class="icon" onload="alert('hi');">$[thread.icon]</td>
but no alerts at all.

There must be some way to investigate javascript variables from the template. I do not know what languaje is the template actually...

Last Edit: Aug 1, 2014 19:47:50 GMT -8 by ponzinomics

Chris
ProBoards Coder

Official Code Helper

"'Oops' is the sound we make when we improve"

Posts: 9,024

Mini-Profile Theme: RedBassett's Mini-Profile

inquiring metadata from threads to change thread icons Aug 2, 2014 9:15:56 GMT -8

Quote

Post by Chris on Aug 2, 2014 9:15:56 GMT -8

The onload attribute is only valid on certain elements so wouldn't fire on an <li> or <td> elements. Recent HTML specs have narrowed the list of elements to which it can be applied and surprisingly the <img> tag is no longer on that list, however from my experience it is still supported on <img> for legacy reasons at least in some of the major browsers (you'd have to test which still do - the tooltip plugin installed on this support forum for example uses it and I've heard no complaints).

So since your intent is to replace $[thread.icon] with a flag I would just replace it with an actual image possibly of 1x1 pixel to minimize network usage and initiate the onload where you can then run your javascript to setup the appropriate country 2-letter flag class name on a div that is properly sized to fit and show just a single flag from that sprite. How you arrive at that 2-letter code from what the user has inputted might be problematic unless you require them to directly enter that 2-letter code rather than a full country name. If the meta plugin supports a dropdown in addition to a text input field (I don't know) then that concern might be moot.

[Source]

Do not help:
1. Ungrateful people
2. Lazy people
3. Irresponsible person
4. Manipulators
5. Chronic critics
6. Narcissists
7. Opportunists
8. Envious people

"To fight the bug, we must first understand the bug. "

Wormopolis
Part of the Furniture

King Oligochaete

Stop rating plugins with 1 star that dont deserve it.

Posts: 20,002

Mini-Profile Theme: Wormo's Mini-Profile

inquiring metadata from threads to change thread icons Aug 2, 2014 9:55:07 GMT -8

Quote

Post by Wormopolis on Aug 2, 2014 9:55:07 GMT -8

That is unfortunate they are dropping it for img tags. There was legitimate reasons to run code once an image had actually loaded to the page. Especially since the browsers cdnt get image dimensions until they do

If you like a plugin, click "like" on its support thread. then bookmark it so you know about updates!

ponzinomics
Junior Member

Posts: 250

inquiring metadata from threads to change thread icons Aug 2, 2014 15:44:43 GMT -8 Wormopolis likes this

Quote

Post by ponzinomics on Aug 2, 2014 15:44:43 GMT -8

Thanks to both, with your suggestions, finally I got it working. I have now to evaluate if the delay on switching icons is acceptable, as it has to be done at client side. As no all icons will be replaced, and the icon will be cached by the browser, I leave the standard behavior unchanged if not meta param exists for the thread. Here is the code:

<tr id="$[thread.content_id]" class="$[thread.content_class] f32">
        
        <!-- td class="icon">$[thread.icon]</td-->

	<!-- replaces default icons by flags (if 'flag' meta has been filled) -->
        <td id="td_$[thread.id]" class="icon">$[thread.icon]</td>
        <script type="text/javascript">
            var thread_id = $[thread.id];
            var threads_meta = pb.plugin.key('thread_meta');
            var thread_meta = threads_meta.get(thread_id);
            if (thread_meta) {
                var flagGet = thread_meta["thread_meta_flag"];
                if (flagGet != null) {
                    var element = document.getElementById('td_' + thread_id);
                    element.firstChild.removeAttribute("src");
                    element.firstChild.className = flagGet;
                }
            }
	</script>
        <!-- end replaces default icons by flags -->

	...

Regards

Last Edit: Aug 2, 2014 19:02:00 GMT -8 by ponzinomics