Additional options for hashtags

1. Hashtag popup options
   
2. SCEditor hashtag button
   

Hashtag popup options

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;
      };
    }
  }
});

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;
}

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;
}

SCEditor hashtag button

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 :

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;
}