Additional options for hashtags

[Ange Tuteur]

Additional options for hashtags

This tutorial will offer you two ways to improve the usage of the #hashtag system on your Forumotion forum. Both features will be installed via JavaScript, so make sure to navigate to JavaScript codes management. Administration Panel > Modules > JavaScript codes management If you're new to Forumotion, make sure that JavaScript code management is enabled. Now, feel free to choose the features you want to install. Hashtag popup options SCEditor hashtag button Hashtag popup options This modification provides extended options for interacting with hashtags, allowing you to quickly follow tags, view tagged subjects, and manage your tags. Create a new new script with the following settings. Title : Hashtag popup Placement : In all the pages Code: $(function() {   var a = document.getElementsByTagName('A'), b = document.createElement('DIV'), i = 0, j = a.length, actif, t;   b.className = 'fa_hashtag-options';   b.style.display = 'none';   document.body.appendChild(b);      for (; i<j; i++) {     if (a[i].title && /\/tags\//.test(a[i].href) && /^#/.test(a[i].innerHTML)) {       a[i].className += ' fa_hashtag';              a[i].onclick = function() {                  if (actif != this) {           actif = this, t = this.innerHTML;           t.length > 24 && (t = t.slice(0, 25).replace(/^\s+|\s+$/g, '') + '...');                      b.style.left = $(this).offset().left + 'px';           b.style.top = $(this).offset().top + 'px';           b.innerHTML = '<div class="fa_hashtag-title">Options for <span class="fa_hashtag-tag">' + t + '</span></div><b>• </b><a href="' + this.href + '">View tagged subjects</a>' + (_userdata.session_logged_in ? '<form method="post" name="addtag_form" action="/profile?mode=editprofile&page_profil=tags&start&submit=1"><b>• </b><a href="#" onclick="this.parentNode.submit();return false;">Follow <span class="fa_hashtag-tag">' + t + '</span></a><input name="addtag" type="hidden" value="' + this.innerHTML.slice(1) + '"></form><b>• </b><a href="/profile?mode=editprofile&page_profil=tags">Manage tags</a>' : '');                      /none/.test(b.style.display) && (b.style.display = 'block');         } else {           actif = null;           b.style.display = 'none';         }                  return false;       };     }   } }); Now we just need to add some CSS so the popup is displayed correctly. Go to Administration Panel > Display > Colors > CSS stylesheet, and paste the following style rules. Code: /* options drop down */ .fa_hashtag-options {   color:#666;   font-size:11px;   font-family:Verdana,Arial,Helvetica,sans-serif;   line-height:14px;   background:#EEE;   border:1px solid #CCC;   border-radius:3px;   box-shadow:0 3px 6px rgba(0, 0, 0, 0.175);   margin-top:20px;   padding:3px;   position:absolute;   z-index:100; } /* options title */ .fa_hashtag-title {   font-size:12px;   border-bottom:1px solid #CCC;   padding-bottom:3px;   margin-bottom:3px; } /* option links */ .fa_hashtag-options a {   color:#333;   text-decoration:none;   display:inline-block;   padding:2px 6px 2px 0; } .fa_hashtag-options a:hover {   color:#666;   text-decoration:underline; } /* option bullets */ .fa_hashtag-options b {   color:#333;   padding-left:6px; } /* option tags */ .fa_hashtag-tag {   color:#000;   font-weight:bold; } The script additionally adds a classname to all hashtags in posts, so if you want to add a unique style to hashtags, you can use the following rules. Code: /* hashtag styles */ a.fa_hashtag {   color:#666;   text-decoration:none;   background-color:#EEE;   border:1px solid #CCC;   border-radius:3px;   display:inline-block;   padding:3px; } a.fa_hashtag:hover {   color:#333;   background-color:#DDD;   border-color:#999; } The default result is this, but you're free to change the style. SCEditor hashtag button This modification will add an additional button to your editor. The button will allow you to type out your hashtag name, or choose from a predefined list of the tags you're currently following. Go to JavaScript codes management and create a new script with the following settings. Title : SCEditor Hashtag Button Placement : In all the pages Code: $(function(){   if (!$.sceditor || /\/privmsg/.test(window.location.pathname)) return;   var storage = window.localStorage, s = document.createElement('SELECT'), tags = '';      if (storage && storage.faTags && storage.faTagsExp > +new Date - 29*59*1000 && storage.faTagsUser == _userdata.username) s.innerHTML = storage.faTags;   else {     $.get('/profile?mode=editprofile&page_profil=tags', function(d) {       var h = $('form[name="tag_list"] a', d);            if (h.length) {         for (var i = 0, j = h.length, txt; i<j; i++) {           txt = h[i].innerHTML.replace(/^\s+|\s+$/g,'');           if (/^#/.test(txt)) {             !tags && (tags += '<option value="">Select a tag</option>');             tags += '<option value="'+ txt.slice(1) +'">' + (txt.length > 24 ? txt.slice(0, 25) + '...' : txt) + '</option>';           }         }         s.innerHTML = tags;       }            if (storage) {         storage.faTags = tags ? tags : 0;         storage.faTagsUser = _userdata.username;         storage.faTagsExp = +new Date;       }     });   }           $.sceditor.command.set('hashtag', {     dropDown : function(editor, caller, callback) {       var a = document.createElement('DIV'), b = document.createElement('INPUT'), c = document.createElement('INPUT');       b.type = 'button';       b.value = 'Insert';       b.className = 'button';              c.type = 'text';       c.id = 'fa_hashtag';              a.innerHTML = '<div><label for="fa_hashtag">Hashtag :</label></div>' + ( s.innerHTML ? '<div><label>Followed tags :</label></div>' : '' ) + '<div></div>';       a.firstChild.appendChild(c);       a.lastChild.appendChild(b);              if (s.innerHTML != 0) {         s.value = '';         a.getElementsByTagName('DIV')[1].appendChild(s);         s.onchange = function() {           c.value = s.value;         };       }              b.onclick = function() {         c.value && callback(c.value);         editor.closeDropDown(true);       };       editor.createDropDown(caller, 'inserthashtag', a);     },     exec : function(c) { tag(c, this) },     txtExec : function(c) { tag(c, this) },          tooltip : 'Insert a hashtag'   });      toolbar = toolbar.replace(/quote,/,'hashtag,quote,');      function tag(c, e) {     $.sceditor.command.get('hashtag').dropDown(e, c, function(tag) {       e.insertText('#' + tag.replace(/^#/,'').replace(/[\xD7\xF7\x00-\x2F\x3A-\x40\x5B-\x60\x7B-\xBF]/g, '_') + ' ');     });   } }); Attention : Invalid characters will be replaced by _ on insertion. So the button has an icon and the drop down, it's necessary that you add some CSS to your stylesheet. Go to Administration Panel > Display > Colors > CSS stylesheet, and paste the following style rules. Code: /* button image */ .sceditor-button-hashtag div { background-image:url(https://i19.servimg.com/u/f19/19/06/98/92/scehas11.png) !important } /* drop down input */ #fa_hashtag {   background:url(https://i19.servimg.com/u/f19/19/06/98/92/scehas11.png) no-repeat 3px 50% #FFF;   padding-left:22px; } Click submit, and you're ready to do some tagging !.. hash tagging !

This tutorial was written by Ange Tuteur.

[SLGray]

The tutorial has been updated.

[skouliki]

This code was updated to fit in with the new HTTPS address

updated 13.03.2022 by skouliki