MentionTag Colors

I don't know if this should be posted in the Tutorials section but it was something I noticed when looking at @Ange Tuteur's tagged name. This is a script that allows member's mention tags to be color-coded to their group color.

Code:

$(function() {
  'Mentiontag Colors';
  '- - - Ace 1 - - -';
 
  var bold = false,
      storage = window.localStorage,
      cacheTime = 30,
      dataId, c;
  $('meta[name="title"]').after('<style type="text/css" id="mentions-css"/>');
  $('.mentiontag, blockquote a[href^="/u"][rel]').each(function() {
    dataId = this.href.replace(/.*\/u(\d+)/, '$1');
    if (storage) {
      var o = storage.mentionColors ? JSON.parse(storage.mentionColors) : {};
      if (o[dataId] && o[dataId].exp > new Date().getTime() - 60 * 1000 * cacheTime) {
        c = o[dataId].color
      } else {
        $.ajax({
          url: this.href,
          type: 'get',
          async: false,
          success: function(data) {
            c = $('.page-title span', data).css('color')
          }
        });
        o[dataId] = {
          color: c,
          exp: new Date().getTime()
        }
      }
      storage.mentionColors = JSON.stringify(o);
      if ($('#mentions-css').text().indexOf('.mentiontag[data-id="' + dataId + '"]') == -1) {
        $('#mentions-css').append('.mentiontag[data-id="' + dataId + '"], a[href="/u' + dataId + '"][rel] { color: ' + c + '; ' + (bold ? 'font-weight: bold; ' : '') + '}')
      }
    } else {
      console.log('localStorage is not supported.')
    }
  })
});

old code:

And if you notice

Code:

    var bold = false;

That determines if the tags should be bolded or not. Just change

Code: false

to

Code: true

if you want to enable it.

Hope you guys like it

And oh yeah, if you're like Ange ew and don't like Javascript modifying the styles of elements, then use this script instead:

Code:

$(function() {
    var bold = false,
        storage = window.localStorage,
        dataId,
        c;

    $('head').append('<style type="text/css" id="mentions"/>');

    $('.mentiontag').each(function() {
        dataId = this.href.replace(/.*\/u(\d+)/, '$1');

        if (storage) {
            if (storage['userColor_' + dataId] && storage['userColor_' + dataId + '_exp'] > new Date().getTime() - 60 * 60 * 1000) {
                c = storage['userColor_' + dataId];
            } else {

                $.ajax({
                    url: this.href,
                    type: 'get',
                    async: false,
                    success: function(data) {
                        c = $('.page-title span', data).css('color');
                    }
                });

                storage['userColor_' + dataId] = c;
                storage['userColor_' + dataId + '_exp'] = new Date().getTime();
            }

            if ($('#mentions').text().indexOf('.mentiontag[data-id="' + dataId + '"]') == -1) {
                $('#mentions').append('.mentiontag[data-id="' + dataId + '"] { color: ' + c + '; ' + (bold ? 'font-weight: bold; ' : '') + '}');
            }

        } else {
            console.log('localStorage is not supported.');
        }
    });

});

@Ace 1 Nice ! This might make a good tutorial for the user tutorials section. Mind if I move it there ?

btw I use this method on FM Design for staff :
https://fmdesign.forumotion.com/t794-implemented-add-group-color-to-the-mentioning#15884

The script you wrote would be good for forums with a lot of staff or groups though. Since you're using ajax you might want to cache the results to localStorage. ( when there's a lot of mentions it might get heavy -- caching locally helps reduce redundant requests ) If you want, you can use the caching methods in these scripts :
https://fmdesign.forumotion.com/t399-display-the-user-avatar-before-mentions
https://fmdesign.forumotion.com/t883-nicknames-for-mentions

Basically it goes over each tag one at a time. Once the request is completed it loads the next tag. Depending on if the data is cached it'll send a request OR load from storage. This is actually something similar to how I'd loop over the links :

Code:

function iterate(array, fn) {
  var next = function() {
    that = array[++i];

    if (that) {
      fn(that, next);
    }
  },

  i = -1,
  that;

  next();
};


// example usage
iterate(document.getElementsByTagName('A'), function(that, next) {
  $.get(that.href, function(d) {
    next(); // get next element when the request is complete
  });
});

It's a little helper I wrote to refresh my memory in case I need to do this again.

Yeah I've always been a tad bit confused as to how localStorage works. I remember you giving me some script to add the Points value to the homepage message and it contained something with it.

I'm also a bit confuzzled as to what that iterate function is doing. I might need some comments <3

And sure, you can move it to the Tutorials section.

At first it is a tad confusing. Best to start with the basics. Anyway to set and save an item locally to the browser all you need to do is this :

Code:

localStorage.myNewItem = document.getElementById('logout').innerHTML;

Calling the above in the console will yield the following results.


You can also manage localStorage items via the application tab in the chrome devtools.

localStorage items will persist even when you change the page or close the browser, which makes it ideal for AJAX heavy applications. ( closing browser depends on your cache settings ) The thing I do with my cached localStorage items is that I also cache a date. This way I can tell when the item was cached and update it if a certain amount of time has passed. I used to do something like this :

Code:

if (localStorage.myNewItem && localStorage.myNewItem_exp > +new Date - 10*1000) {
  console.log('Getting from cache...');
} else {
  console.log('Getting from page...');
  localStorage.myNewItem = document.getElementById('logout').innerHTML;
  localStorage.myNewItem_exp = +new Date;
}

Run the above script in the console a couple of times to see the different results. If the cached item is not yet 10 seconds old, then the data is retrieved from the cache, otherwise we get it from the page. We're not actually getting anything from the cache, but we are updating these storage items every 10 seconds.


The iterate function is pretty much like a "for loop" but let's you choose when the next iteration begins, for example after an AJAX request is completed. Here's an example you can run in the console on a page with mentions :

Code:

function iterate(array, fn) {
  // function to call the next iteration
  var next = function() {
    that = array[++i]; // the next element
 
    if (that) {
      fn(that, next); // call the specified function if the next element is NOT null
    }
  },
 
  i = -1, // element index
  that; // element
 
  next(); // call the first iteration
};
 
 
// example usage
iterate($('.mentiontag'), function(that, next) {
  $.get(that.href, function(d) {
    var title = $('h1.page-title', d).text();
    console.log(title);

    next(); // call the next iteration
  });
});

Aye !

Ight. I think I'm getting how it works.

Also, what's the difference between using window.localStorage and my_setcookie?

Play with it and read up on the API, it's really useful once you get the hang of it.

This might be a good read :
http://stackoverflow.com/questions/3220660/local-storage-vs-cookies ( more detailed than what I can say xD )

I can imagine lol.

Asynchronous calls take forever smh.

Nice tutorial. I am putting this on my forums. I hope I put it in the right place. I put it in Javascript and clicked on 'all pages'.
Good tutorial. I love it. Thank you for sharing.

@universecat There was a small bug in the first one; it's fixed now.

And I won't be on Discord today.

Okay good. I will have to organize my 'mention' buttons and the options to mention someone and then maybe try it out.
Also, that is fine. I probably won't be either.

@Ange Tuteur I've updated the code. Let me know what you think

From what I can tell it's lookin' good, but it said "dataId is not defined" - line 8, when I executed it via console.

Code:

        if (storage && storage.getItem('userColor_' + dataId) && storage.getItem('userColor_' + dataId + '_exp') > new Date().getTime() - 60 * 60 * 1000) {


P.S.
I grabbed the code in the first post.

Yeah I was hot swapping the codes in each. I forgot that I declared dataId in the second one and not the first.

It's good now, I made a new variable.

@Ace 1 I understand, I've done that before lol. I gave it a test and it works nicely ! It submits an ajax request on non-cached mentions and gets the color from localStorage for cached mentions. It's a good improvement for performance ! Nice job

Oh word. Even gods make mistakes, huh?

But yeah, I also added something to the first code (Line 8) to remove the spaces and replace them with underscores.

Does that matter? Or can I revert it?

You would be surprised how many errors my drafts have sometimes, helps improve my debugging skills though LOL.

Nah spaces don't matter. It's sorta similar to object names ; You can use dot notation or bracket notation. (good read) You'll want to use brackets for keys that have spaces, like the snippet below for example.

Code:

localStorage['this has spaces'] = 'Tons of spaces !';
localStorage['this has spaces'];

Oh damn I was using the setItem() and getItem() functions lol

That looks so much easier T-T

And I also found something called sessionStorage and apparently it expires when the browser is closed.

OH bracket notation is a lot easier since it's less to write.

Yeah sessionStorage is good if you want something to only last for the current browser session. It's almost similar to non-sticky cookies -- cookies that expire when the browser is closed.

Update:

The second code is actually better. I've updated it a little bit

@Mr.Alam Yeah the code from the second post is better in my opinion.

Can you link me to a topic in which you tagged a member?

@Mr.Alam You have this rule declared in your CSS Stylesheet:

Code:

a[href*="/u"] {
    color: #000!important;
}

which is overriding the styles set by the mentiontag colors code. You can either remove that styling and use the original JS or you can use this JS alone:

Code:

$(function() {
    var bold = false,
        storage = window.localStorage,
        dataId,
        c;
 
    $('head').append('<style type="text/css" id="mentions"/>');
 
    $('.mentiontag').each(function() {
        dataId = this.href.replace(/.*\/u(\d+)/, '$1');
 
        if (storage) {
            if (storage['userColor_' + dataId] && storage['userColor_' + dataId + '_exp'] > new Date().getTime() - 60 * 60 * 1000) {
                c = storage['userColor_' + dataId];
            } else {
 
                $.ajax({
                    url: this.href,
                    type: 'get',
                    async: false,
                    success: function(data) {
                        c = $('.page-title span', data).css('color');
                  console.log('got the colah');
                    }
                });
 
                storage['userColor_' + dataId] = c;
                storage['userColor_' + dataId + '_exp'] = new Date().getTime();
            }
 
            if ($('#mentions').text().indexOf('.mentiontag[data-id="' + dataId + '"]') == -1) {
                $('#mentions').append('.mentiontag[data-id="' + dataId + '"] { color: ' + c + ' !important; ' + (bold ? 'font-weight: bold; ' : '') + '}');
            }
 
        } else {
            console.log('localStorage is not supported.');
        }
    });
 
});

This JS overrides your

Code: !important

rule.

Thank you @Ace 1

Worked like a charm, thanks!