Additional options for hashtags

Go down

Tutorial Additional options for hashtags

Post by Ange Tuteur on Fri 1 May 2015 - 8:56

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


Additional options for hashtags 09615110 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.

Additional options for hashtags Popup10

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>• </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. Smile
Additional options for hashtags Style10

Additional options for hashtags 09615110 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.

Additional options for hashtags Editor10

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
Ange Tuteur
Forumaster

Male Posts : 13223
Reputation : 2961
Language : EN, JA, FR
Location : Macungie, PA

https://sethclydesdale.github.io/

Back to top Go down

Tutorial Re: Additional options for hashtags

Post by SLGray on Fri 4 Mar 2016 - 20:49

The tutorial has been updated.


Additional options for hashtags Slgray10

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

Male Posts : 46795
Reputation : 3278
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Back to top


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