The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Additional options for hashtags

View previous topic View next topic Go down

Additional options for hashtags

Post by Ange Tuteur on May 1st 2015, 8:56 am

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


  1. Hashtag popup options
  2. 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. Add

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>&bull; </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>&bull; </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>&bull; </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. Smile


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

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, '_') + ' ');
    });
  }
});

Exclamation 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(http://i19.servimg.com/u/f19/19/06/98/92/scehas11.png) !important }

/* drop down input */
#fa_hashtag {
  background:url(http://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 ! Mr. Green


Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Additional options for hashtags

Post by SLGray on March 4th 2016, 8:49 pm

The tutorial has been updated.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35641
Reputation : 2374
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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