Additional options for hashtags Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
3 posters

    Additional options for hashtags

    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13246
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Tutorial Additional options for hashtags

    Post by Ange Tuteur 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


    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(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 ! Mr. Green

    TonnyKamper likes this post

    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51508
    Reputation : 3519
    Language : English
    Location : United States

    Tutorial Re: Additional options for hashtags

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

    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.
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15168
    Reputation : 1696
    Language : English,Greek
    Location : Greece

    Tutorial Re: Additional options for hashtags

    Post by skouliki March 13th 2022, 1:43 pm

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

    updated 13.03.2022 by skouliki

    TonnyKamper likes this post