Starred Forums

[Ange TuteurAdministrator]

This plugin allows you to "Star" forums. Starred forums are placed at the very top of the forum list, so you can easily access your favorite forums.

Click to view demo

Features
• Usability ! You can star forums by hovering over the forum title and clicking the star next to it. You can unstar starred forums the same way.
• Easy Access ! All the forums that you starred will be available at the top of the forum list.
• Editability ! Personalize this plugin by changing the text, icons, etc ..!

This plugin will work on any forum version, so long as the templates aren't heavily modified.

Installation

To install this plugin go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : Starred Forums
Placement : In the homepage

Code:

$(function() {
  if (/\/c\d+-/.test(window.location.href)) return; // return if category
 
  // automatically detects the version
  var version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('div.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : document.getElementById('fa_edge') ? 4 : 'badapple';
 
  // error notifications
  if (version == 'badapple' || !window.JSON || !window.localStorage) {
    var errString = 'The plugin "fa_starred" could not be executed because : ';
 
    if (version == 'badapple') errString += '\nYour forum version is not supported.';
    if (!window.JSON) errString += '\nJSON is not supported by your browser';
    if (!window.localStorage) errString += '\nThe Storage API is not support by your browser.';
 
    window.console && console.error ? console.error(errString) : alert(errString);
    return;
  }
 
  // get fontawesome if unavailable
  if (!$('link[href$="font-awesome.min.css"]')[0]) {
    document.getElementsByTagName('HEAD')[0].insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" />');
  }
 
  window.fa_starred = {
    version : version, // forum version
    forums : localStorage.fa_starred_forums ? JSON.parse(localStorage.fa_starred_forums) : null,
 
    // language settings
    lang : {
        star : 'Star this forum',
      unstar : 'Unstar this forum',
      starred : 'Starred Forums'
    },
 
    icon : {
        star : '',
      unstar : ''
    },
 
    // selectors
    select : {
      content : version ? document.getElementById('main-content') : $('#content-container td:has(> img[height="5"])')[0],
      category : ['.forumline:has(.secondarytitle)', '.forabg', '.main:has(.tcr) .main-content', '.borderwrap:has(.index-box)', '.forum-category'][version],
      forum : 'a.' + (version ? 'forumtitle' : 'forumlink'),
      row : version == 1 ? 'li' : version == 4 ? '.forum-block' : 'tr'
    },
 
    // move the selected forum to the "starred" category
    star : function(that, id, startup) {
      if (!fa_starred.forums) fa_starred.forums = {};
      if (!fa_starred.board) fa_starred.createStarBoard();
 
      if (!fa_starred.forums[id]) {
        // clone the row and add it to the star board
        var clone = $(that).closest(fa_starred.select.row)[0].cloneNode(true),
            rows = $(that).closest(fa_starred.select.row).parent().find(fa_starred.select.row);
 
        // update the star attributes for the clone
        $('.fa_star', clone).attr({
          'onclick' : 'fa_starred.unstar(this, ' + id + '); return false',
          'class' : 'fa_unstar',
          'title' : fa_starred.lang.unstar
        }).html('<i class="fa">' + fa_starred.icon.unstar + '</i>');
 
        fa_starred.list.appendChild(clone); // append the clone to the starred category
 
        $(that).closest(fa_starred.select.row)[0].style.display = 'none'; // hide the original row
 
        // check if all forums are hidden for this category
        for (var i = 0, j = rows.length, k = 0; i < j; i++) {
          if (/none/.test(rows[i].style.display)) k++;
        }
 
        // hide the category if all forums are hidden
        if (i == k) {
          $(that).closest(fa_starred.select.category)[0].className += ' fa_star_hidden';
        }
 
        // jump to the star board if it's out of sight
        if (!startup && document.getElementById('fa_star_board').getBoundingClientRect().top < 0) {
          window.location.hash = '';
          window.location.hash = '#fa_star_board';
        }
 
        // update storage
        fa_starred.forums[id] = 1;
        localStorage.fa_starred_forums = JSON.stringify(fa_starred.forums);
      }
 
    },
 
    // unstar the selected forum
    unstar : function (that, id) {
      var forum, catg, i = 0, j;
 
      fa_starred.list.removeChild($(that).closest(fa_starred.select.row)[0]); // remove cloned row
 
      // update variables
      forum = $(fa_starred.select.forum + '[href^="/f' + id + '-"]')[0]; // original forum
      catg = $(forum).closest(fa_starred.select.category)[0]; // original category
 
      $(forum).closest(fa_starred.select.row)[0].style.display = ''; // show the original forum's row
 
      // show the category if all forums were hidden
      if (/fa_star_hidden/.test(catg.className)) {
        catg.className = catg.className.replace(/fa_star_hidden/, '');
      }
 
      // delete the starred forum and check if there are anymore stars
      delete fa_starred.forums[id];
      for (j in fa_starred.forums) {
        if (fa_starred.forums[j]) i++;
      }
 
      // update storage
      if (i) {
        localStorage.fa_starred_forums = JSON.stringify(fa_starred.forums);
      } else {
        fa_starred.forums = null;
        localStorage.removeItem('fa_starred_forums');
 
        // remove nodes
        if (version == 2) {
          fa_starred.board.parentNode.removeChild(fa_starred.board.previousSibling); // remove header for punbb
        }
        fa_starred.board.parentNode.removeChild(fa_starred.board);
 
        // delete node references
        delete fa_starred.board;
        delete fa_starred.list;
      }
 
    },
 
    // create the "starred" category
    createStarBoard : function() {
      var catg = $(fa_starred.select.category, fa_starred.select.content)[0],
          board = catg ? catg.cloneNode(true) : null,
          rows = $(fa_starred.select.row, board);
     
      if (!catg) return;
 
      board.id = 'fa_star_board';
      board.style.display = '';
 
      if (version != 2) {
        board.getElementsByTagName('H2')[0].innerHTML = fa_starred.lang.starred; // change category title
      }
 
      // find forum list and remove exisiting rows in the clone
      fa_starred.list = rows[0].parentNode;
      rows.remove();
 
      // punbb insertion method
      if (version == 2) {
        var head = catg.previousSibling.cloneNode(true);
        head.getElementsByTagName('H2')[0].innerHTML = fa_starred.lang.starred;
 
        catg.parentNode.insertBefore(board, catg.previousSibling);
        board.parentNode.insertBefore(head, board);
      } else {
        catg.parentNode.insertBefore(board, catg); // default insertion
      }
 
      fa_starred.board = board;
    }
  };
 
  fa_starred.select.row += ':has(' + fa_starred.select.forum + ')'; // update row selector
 
  // general startup
  var a = $(fa_starred.select.forum, fa_starred.select.content),
      i = 0,
      j = a.length,
      k,
      id;
 
  // setup star board and reset forum states if starred
  if (fa_starred.forums) {
    if (!fa_starred.board) fa_starred.createStarBoard();
    for (k in fa_starred.forums) {
      fa_starred.forums[k] = 0;
    }
  }
 
  // setup stars and starred forums
  for (; i < j; i++) {
    id = a[i].href.replace(/.*?\/f(\d+).*/, '$1');
 
    a[i].insertAdjacentHTML('afterend', '<a href="#" class="fa_star" onclick="fa_starred.star(this, ' + id + '); return false;" title="' + fa_starred.lang.star + '"><i class="fa">' + fa_starred.icon.unstar + '</i></a>');
 
    if (fa_starred.forums) {
      for (k in fa_starred.forums) {
        if (k == id) {
          fa_starred.star(a[i], id, true);
        }
      }
    }
  }
 
  document.getElementsByTagName('HEAD')[0].insertAdjacentHTML('beforeend', '<style type="text/css">a.fa_star,a.fa_unstar{color:#999!important;font-size:16px;vertical-align:-2px;margin-left:3px;opacity:0}a.fa_star:hover,a.fa_unstar,li:hover a.fa_star,tr:hover a.fa_star{opacity:1}a.fa_star i,a.fa_unstar i{position:relative}a.fa_star i:hover:after,a.fa_unstar i:after{content:"' + fa_starred.icon.star + '";position:absolute;left:0;bottom:0}a.fa_unstar i:hover:after{content:""}.fa_star_hidden {display:none!important}</style>');
});

When you're finished, save the script and the plugin will be installed ! Go to your forum and hover over a forum, doing so should display a star. Clicking this star will pin the forum to the very top of the list so you can easily access it. You can unstar forums and remove them from the starred list by clicking the star next to the forum title.

If you want to make modifications to this plugin please see the next section.

Modifications

Below are the modifications that can be made to this plugin.


1. Language
If you want to change the wording or translate the texts, find the lang object in the script and edit the texts to whatever you want.

Code:

    lang : {
        star : 'Star this forum',
      unstar : 'Unstar this forum',
      starred : 'Starred Forums'
    },

2. The Star Icon
If you want to change the star icon to something else, find the icon object in the script.

Code:

    icon : {
        star : '',
      unstar : ''
    },

By default it uses FontAwesome icons. However, you can also use HTML images if you want.


3. The Theme
If you want to change the color of the star icons, find this stylesheet at the bottom of the script and change this color ;

Code: #999

Code:

document.getElementsByTagName('HEAD')[0].insertAdjacentHTML('beforeend', '<style type="text/css">a.fa_star,a.fa_unstar{color:#999!important;font-size:16px;vertical-align:-2px;margin-left:3px;opacity:0}a.fa_star:hover,a.fa_unstar,li:hover a.fa_star,tr:hover a.fa_star{opacity:1}a.fa_star i,a.fa_unstar i{position:relative}a.fa_star i:hover:after,a.fa_unstar i:after{content:"' + fa_starred.icon.star + '";position:absolute;left:0;bottom:0}a.fa_unstar i:hover:after{content:""}.fa_star_hidden {display:none!important}</style>');

You can also change the font-size and other attributes.



That's all the modifications you can make ! If you have any questions, comments, or find a bug feel free to leave a reply below. Enjoy !

Notice

Tutorial written by Ange Tuteur. Special thanks to the Beta Testers for testing this plugin. Reproduction not permitted without consent from the author.

[skouliki]

invision works perfect !! thanks

[Wolfuryo]

It has some visual bugs on my forum, but I think the problem is my index-box template, because it is working perfectly with the default one.

[Ange TuteurAdministrator]

It has some visual bugs on my forum, but I think the problem is my index-box template, because it is working perfectly with the default one.

Yes, depending on the modifications, that can occur on modified templates. If you need any help tailoring it to your forum let me know.

[fasciculariaNew Member]

Fonctionne à merveille sur un forum dont l'index box n'est pas modifié. Merci Ange tuteur pour ce tutoriel.

[TonightMember]

Is it possible to give this option only for specific users/usergroups?

[Ange TuteurAdministrator]

Is it possible to give this option only for specific users/usergroups?

Yes it's possible, however I'd only recommend it for the user_id, because getting the group a user belongs to requires AJAX which significantly increases the amount of time it takes for the plugin to be applied. So the script would look like this :

Code:

$(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t501-starred-forums#6825';

 
  if (_userdata.user_id == 1 || 2 || 3 || 4) {
    // automatically detects the version
    var version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('div.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : 'badapple';

    // error notifications
    if (version == 'badapple' || !window.JSON || !window.localStorage) {
      var errString = 'The plugin "fa_starred" could not be executed because : ';

      if (version == 'badapple') errString += '\nYour forum version is not supported.';
      if (!window.JSON) errString += '\nJSON is not supported by your browser';
      if (!window.localStorage) errString += '\nThe Storage API is not support by your browser.';

      window.console && console.error ? console.error(errString) : alert(errString);
      return;
    }

    // get fontawesome if unavailable
    if (!$('link[href$="font-awesome.min.css"]')[0]) {
      document.getElementsByTagName('HEAD')[0].insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" />');
    }

    window.fa_starred = {
      version : version, // forum version
      forums : localStorage.fa_starred_forums ? JSON.parse(localStorage.fa_starred_forums) : null,

      // language settings
      lang : {
          star : 'Star this forum',
        unstar : 'Unstar this forum',
        starred : 'Starred Forums'
      },

      icon : {
          star : '',
        unstar : ''
      },

      // selectors
      select : {
        content : version ? document.getElementById('main-content') : $('#content-container td:has(> img[height="5"])')[0],
        category : ['.forumline:has(.secondarytitle)', '.forabg', '.main:has(.tcr) .main-content', '.borderwrap:has(.index-box)'][version],
        forum : 'a.' + (version ? 'forumtitle' : 'forumlink'),
        row : version == 1 ? 'li' : 'tr'
      },

      // move the selected forum to the "starred" category
      star : function(that, id, startup) {
        if (!fa_starred.forums) fa_starred.forums = {};
        if (!fa_starred.board) fa_starred.createStarBoard();

        if (!fa_starred.forums[id]) {
          // clone the row and add it to the star board
          var clone = $(that).closest(fa_starred.select.row)[0].cloneNode(true),
              rows = $(that).closest(fa_starred.select.row).parent().find(fa_starred.select.row);

          // update the star attributes for the clone
          $('.fa_star', clone).attr({
            'onclick' : 'fa_starred.unstar(this, ' + id + '); return false',
            'class' : 'fa_unstar',
            'title' : fa_starred.lang.unstar
          }).html('<i class="fa">' + fa_starred.icon.unstar + '</i>');

          fa_starred.list.appendChild(clone); // append the clone to the starred category

          $(that).closest(fa_starred.select.row)[0].style.display = 'none'; // hide the original row

          // check if all forums are hidden for this category
          for (var i = 0, j = rows.length, k = 0; i < j; i++) {
            if (/none/.test(rows[i].style.display)) k++;
          }

          // hide the category if all forums are hidden
          if (i == k) {
            $(that).closest(fa_starred.select.category)[0].className += ' fa_star_hidden';
          }

          // jump to the star board if it's out of sight
          if (!startup && document.getElementById('fa_star_board').getBoundingClientRect().top < 0) {
            window.location.hash = '';
            window.location.hash = '#fa_star_board';
          }

          // update storage
          fa_starred.forums[id] = 1;
          localStorage.fa_starred_forums = JSON.stringify(fa_starred.forums);
        }

      },

      // unstar the selected forum
      unstar : function (that, id) {
        var forum, catg, i = 0, j;

        fa_starred.list.removeChild($(that).closest(fa_starred.select.row)[0]); // remove cloned row

        // update variables
        forum = $(fa_starred.select.forum + '[href^="/f' + id + '-"]')[0]; // original forum
        catg = $(forum).closest(fa_starred.select.category)[0]; // original category

        $(forum).closest(fa_starred.select.row)[0].style.display = ''; // show the original forum's row

        // show the category if all forums were hidden
        if (/fa_star_hidden/.test(catg.className)) {
          catg.className = catg.className.replace(/fa_star_hidden/, '');
        }

        // delete the starred forum and check if there are anymore stars
        delete fa_starred.forums[id];
        for (j in fa_starred.forums) {
          if (fa_starred.forums[j]) i++;
        }

        // update storage
        if (i) {
          localStorage.fa_starred_forums = JSON.stringify(fa_starred.forums);
        } else {
          fa_starred.forums = null;
          localStorage.removeItem('fa_starred_forums');

          // remove nodes
          if (version == 2) {
            fa_starred.board.parentNode.removeChild(fa_starred.board.previousSibling); // remove header for punbb
          }
          fa_starred.board.parentNode.removeChild(fa_starred.board);

          // delete node references
          delete fa_starred.board;
          delete fa_starred.list;
        }

      },

      // create the "starred" category
      createStarBoard : function() {
        var catg = $(fa_starred.select.category, fa_starred.select.content)[0],
            board = catg.cloneNode(true),
            rows = $(fa_starred.select.row, board);

        board.id = 'fa_star_board';
        board.style.display = '';

        if (version != 2) {
          board.getElementsByTagName('H2')[0].innerHTML = fa_starred.lang.starred; // change category title
        }

        // find forum list and remove exisiting rows in the clone
        fa_starred.list = rows[0].parentNode;
        rows.remove();

        // punbb insertion method
        if (version == 2) {
          var head = catg.previousSibling.cloneNode(true);
          head.getElementsByTagName('H2')[0].innerHTML = fa_starred.lang.starred;

          catg.parentNode.insertBefore(board, catg.previousSibling);
          board.parentNode.insertBefore(head, board);
        } else {
          catg.parentNode.insertBefore(board, catg); // default insertion
        }

        fa_starred.board = board;
      }
    };

    fa_starred.select.row += ':has(' + fa_starred.select.forum + ')'; // update row selector

    // general startup
    var a = $(fa_starred.select.forum, fa_starred.select.content),
        i = 0,
        j = a.length,
        k,
        id;

    // setup star board and reset forum states if starred
    if (fa_starred.forums) {
      if (!fa_starred.board) fa_starred.createStarBoard();
      for (k in fa_starred.forums) {
        fa_starred.forums[k] = 0;
      }
    }

    // setup stars and starred forums
    for (; i < j; i++) {
      id = a[i].href.replace(/.*?\/f(\d+).*/, '$1');

      a[i].insertAdjacentHTML('afterend', '<a href="#" class="fa_star" onclick="fa_starred.star(this, ' + id + '); return false;" title="' + fa_starred.lang.star + '"><i class="fa">' + fa_starred.icon.unstar + '</i></a>');

      if (fa_starred.forums) {
        for (k in fa_starred.forums) {
          if (k == id) {
            fa_starred.star(a[i], id, true);
          }
        }
      }
    }

    document.getElementsByTagName('HEAD')[0].insertAdjacentHTML('beforeend', '<style type="text/css">a.fa_star,a.fa_unstar{color:#999!important;font-size:16px;vertical-align:-2px;margin-left:3px;opacity:0}a.fa_star:hover,a.fa_unstar,li:hover a.fa_star,tr:hover a.fa_star{opacity:1}a.fa_star i,a.fa_unstar i{position:relative}a.fa_star i:hover:after,a.fa_unstar i:after{content:"' + fa_starred.icon.star + '";position:absolute;left:0;bottom:0}a.fa_unstar i:hover:after{content:""}.fa_star_hidden {display:none!important}</style>');
  }
});

This is where you put the list of user id's that can see the plugin :

Code:

_userdata.user_id == 1 || 2 || 3 || 4

Separate each id by || which means "or"

[YuushishioNew Member]

May this be possible to improve into Starred topic in sub-forum, or even starred topic list will appear in home page?

[GuestGuest]

Hmm... This plug-in doesn't seem to be working right with our Edge, @Ange Tuteur. Nothing is happening; no stars are showing ...

[SLGrayValued Member]

I can confirm that this tutorial does not work on my forums that have Edge.

[GuestGuest]

I can confirm that this tutorial does not work on my forums that have Edge.

Thanks for confirming that. Could have been little else on a cleanly installed site.

[Ange TuteurAdministrator]

Thanks for the report, I'll look into optimizing this when I get the chance.

[Ange TuteurAdministrator]

@Samantha NL @SLGray I updated the script in the first post with support for Forumactif Edge. Let me know if it works for you.

Thanks again for the report.

[GuestGuest]

@Ange Tuteur: It's working now! Would be nice if it 'd work with the sub-forums as well.

[SLGrayValued Member]

It works for me, too.

[Ange TuteurAdministrator]

Thanks for confirming !

[GuestGuest]

Too bad there won't be a 'Starred Themes' plug-in now. Just another idea I had lately...

[Ace 1Valued Member]

Starred themes?

[GuestGuest]

Yeah, the theme selector top left in Edge. Starred themes (favorite themes)

[Ace 1Valued Member]

Imma have to look into the original code before I do anything with it. I'll get around to this tho

[GuestGuest]

Have you already set up an Edge test site for yourself? You'll prolly be needing the original Edge JS and some of the 'Starred Forums' coding. I'm gonna take a break. I'm getting sick with all of this styling stuff. Off to do shopping lol

[Ace 1Valued Member]

Im gonna set up an Edge forum later today.

Bai

[Milouze14]

Hello @Ange Tuteur ,

Thank you very much for this work, but one of my members who is in version phpbb3
Has just raised two bugs with this trick, by clicking Mark all forums as read or Delete cookies from the forum, the toolbar disappears.
I found the parade by putting an important hack here:

Code:

#fa_toolbar{position:fixed !important;}

a++

[Administrator]

Thanks for the info. Hmm.. it is indeed weird, I'm not entirely sure what could be causing that since the script isn't using cookies, but the storage API.

[Milouze14]

@Ange Tuteur

This is the forum for the test Ange :

http://forumessai.superforum.fr/?mode=delete_cookies

a++

[Sponsored content]