Latest topics
» [HELP] About Profile Cover Code
by MaHwOs Yesterday at 18:54

» bloquer un membre
by berlingo Fri 17 Nov 2017, 18:19

» IconSkouliki Graphics
by skouliki Fri 17 Nov 2017, 03:54

» [IN PROGRESS] Can this code work on pun version
by skouliki Thu 16 Nov 2017, 03:50

» Auto-suggest @mentions as You Type
by skouliki Wed 15 Nov 2017, 14:56

» [TUTORIAL] [ALL VERSIONS] Warning before posting
by demon99 Wed 15 Nov 2017, 08:12

» About Add Reply & New Topic button (popup form)
by omarpop23 Mon 13 Nov 2017, 20:31

» Hello everyone this is Adam from France
by Adam Mon 13 Nov 2017, 13:32

» Add a login popup for the toolbar
by Ape Sun 12 Nov 2017, 18:41

» Post a message automatically when locking a topic
by ThunderTB Sun 12 Nov 2017, 13:51

» Control pannel issue
by Ange Tuteur Sun 12 Nov 2017, 09:49

» BUG... forum members birthday's
by Ape Sat 11 Nov 2017, 11:44

» Display a Preview of Groups on Hover
by ThunderTB Fri 10 Nov 2017, 21:56

» Search box only visible on hover
by Ange Tuteur Mon 06 Nov 2017, 09:57

» [GAME] Animal Game
by SLGray Sun 05 Nov 2017, 15:04

Recent Tutorials
Who is online?
In total there are 7 users online :: 0 Registered, 0 Hidden and 7 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

MentionTag Colors

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 18
Posts : 2151
Points : 2950
Reputation : 88
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Thu 03 Nov 2016, 13:30

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:
Code:
$(function() {
    var bold = false,
        storage = window.localStorage,
        user,
        c;

    $('.mentiontag').each(function() {
         user = this.textContent.replace('@', '').replace(/\s/, '_');
     
        if (storage && storage.getItem('userColor_' + user) && storage.getItem('userColor_' + user + '_exp') > new Date().getTime() - 60 * 60 * 1000) {
            c = storage.getItem('userColor_' + user);
        } else {

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

            storage.setItem('userColor_' + user, c);
            storage.setItem('userColor_' + user + '_exp', new Date().getTime());
        }

        bold ? $(this).css({ 'color': c, 'font-weight': 'bold' }) : $(this).css('color', c);
    });

});

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

Rose


Last edited by Ace 1 on Mon 02 Oct 2017, 13:42; edited 7 times in total (Reason for editing : localStorage, minor screw up)
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 18
Posts : 2151
Points : 2950
Reputation : 88
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Thu 03 Nov 2016, 13:43

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.');
        }
    });

});


Last edited by Ace 1 on Thu 10 Nov 2016, 11:16; edited 4 times in total (Reason for editing : localStorage and repeated CSS styles removed + other stuff <3)
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9586
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 03 Nov 2016, 13:48

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

btw I use this method on FM Design for staff :
http://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. Thumb right 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 :
http://fmdesign.forumotion.com/t399-display-the-user-avatar-before-mentions
http://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. Razz
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 18
Posts : 2151
Points : 2950
Reputation : 88
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Thu 03 Nov 2016, 14:05

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.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9586
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 03 Nov 2016, 14:33

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. Wink


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 ! Salute
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 18
Posts : 2151
Points : 2950
Reputation : 88
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Thu 03 Nov 2016, 14:42

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

Also, what's the difference between using window.localStorage and my_setcookie?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9586
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 03 Nov 2016, 14:48

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

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

Beta Tester
Gender : Unspecified
Age : 18
Posts : 2151
Points : 2950
Reputation : 88
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Thu 03 Nov 2016, 14:52

I can imagine lol.

Asynchronous calls take forever smh.
avatar
universecat

Title :
Protector of the Universe
Gender : Female
Age : 17
Posts : 578
Points : 1091
Reputation : 3
Location : Everywhere and nowhere
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile

Postuniversecat on Thu 03 Nov 2016, 16:49

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.

--------

“Two possibilities exist: either we are alone in the Universe or we are not. Both are equally terrifying.”
― Arthur C. Clarke
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 18
Posts : 2151
Points : 2950
Reputation : 88
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Thu 03 Nov 2016, 17:12

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

And I won't be on Discord today.
avatar
universecat

Title :
Protector of the Universe
Gender : Female
Age : 17
Posts : 578
Points : 1091
Reputation : 3
Location : Everywhere and nowhere
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile

Postuniversecat on Thu 03 Nov 2016, 17:14

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.

--------

“Two possibilities exist: either we are alone in the Universe or we are not. Both are equally terrifying.”
― Arthur C. Clarke
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 18
Posts : 2151
Points : 2950
Reputation : 88
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Thu 03 Nov 2016, 18:14

@Ange Tuteur I've updated the code. Let me know what you think Wink
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9586
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 03 Nov 2016, 18:20

From what I can tell it's lookin' good, but it said "dataId is not defined" - line 8, when I executed it via console. Suspect
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.
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 18
Posts : 2151
Points : 2950
Reputation : 88
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Thu 03 Nov 2016, 18:26

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.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9586
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 04 Nov 2016, 11:01

@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 Thumb left
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 18
Posts : 2151
Points : 2950
Reputation : 88
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Fri 04 Nov 2016, 11:15

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?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9586
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 04 Nov 2016, 11:23

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'];
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 18
Posts : 2151
Points : 2950
Reputation : 88
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Fri 04 Nov 2016, 11:28

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.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9586
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 04 Nov 2016, 11:33

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

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.
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 18
Posts : 2151
Points : 2950
Reputation : 88
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Thu 10 Nov 2016, 11:19

Update:

The second code is actually better. I've updated it a little bit Rose
avatar
MAX

Title :
Gender : Unspecified
Posts : 83
Points : 591
Reputation : 5
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostMAX on Mon 30 Jan 2017, 12:15

@Ace 1 wrote:Update:

The second code is actually better. I've updated it a little bit Rose
what is second code? Please tell me?
avatar
MAX

Title :
Gender : Unspecified
Posts : 83
Points : 591
Reputation : 5
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostMAX on Mon 30 Jan 2017, 12:17

Are you mentioning thiis one iss better?
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.');
        }
    });
 
});
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 18
Posts : 2151
Points : 2950
Reputation : 88
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Mon 30 Jan 2017, 14:20

@Mr.Alam Yeah the code from the second post is better in my opinion.
avatar
MAX

Title :
Gender : Unspecified
Posts : 83
Points : 591
Reputation : 5
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostMAX on Mon 30 Jan 2017, 14:34

But not working in my forum @Ace
Check my forum http://avacschat.yforum.biz

No username color yet
avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 18
Posts : 2151
Points : 2950
Reputation : 88
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Mon 30 Jan 2017, 14:40

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

Page 1 of 2 1, 2  Next

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum