☰

GAB User Autocomplete

User Autocomplete requirement 2 of 2: show a pop-up of users that match the @mention found at the end of the text entry

  1. // ==UserScript==
  2. // @name         GAB User Autocomplete
  3. // @namespace    https://gab.ai/Jeremy20_9
  4. // @version      0.1
  5. // @description  User Autocomplete requirement 2 of 2: show a pop-up of users that match the @mention found at the end of the text entry
  6. // @author       Jeremiah 20:9
  7. // @match        https://gab.ai/home
  8. // @grant        none
  9. // @require      https://code.jquery.com/jquery-1.8.2.js
  10. // ==/UserScript==
  11. var followers = localStorage.getItem("gab-user-followers");
  12. var following = localStorage.getItem("gab-user-following");
  13. var availableTags = [];
  14.  
  15. if(followers)
  16. {
  17.     availableTags = availableTags.concat(JSON.parse(followers));
  18. }
  19. if(following)
  20. {
  21.     availableTags = availableTags.concat(JSON.parse(following));
  22. }
  23. var subset = [];
  24. var itvcheck = -1;
  25. var choiceidx = 0;
  26. function checkfortxt()
  27. {
  28.     if($( ".composer--open > .composer__content > textarea" ).length > 0)
  29.     {
  30.         clearInterval(itvcheck);
  31.         var ops = document.createElement("div");
  32.         $(ops).css("position", "absolute");
  33.         $(ops).css("left", "50px");
  34.         $(ops).css("bottom", "0px");
  35.         $(ops).css("width", "300px");
  36.         $(ops).css("height", "100px");
  37.         $(ops).css("background-color", "white");
  38.         $(ops).css("box-shadow", "0px 0px 2px rgba(0,0,0,.5)");
  39.         $(ops).css("display", "none");
  40.         
  41.         $(".composer__content").append(ops);
  42.         
  43.         $( ".composer__content > textarea" ).on("keydown", function(evt){
  44.             var txt = $(".composer__content > textarea").val();
  45.             
  46.             var regex = new RegExp("^[a-zA-Z0-9_-]+$");
  47.             var str = String.fromCharCode(!evt.charCode ? evt.which : evt.charCode);
  48.             if (!regex.test(str) && evt.which != 38 && evt.which != 40 && evt.which != 13 && evt.which != 8 && evt.which != 46) {
  49.                 $(ops).css("display", "none");
  50.                 return;
  51.             }
  52.             else if(evt.which != 38 && evt.which != 40 && evt.which != 13 && evt.which != 8 && evt.which != 46)
  53.                 txt += evt.key;
  54.             
  55.             var rex = /@[A-Za-z]+[A-Za-z0-9_-]*$/g;
  56.             var userinfo = rex.exec(txt);
  57.  
  58.             if(!userinfo)
  59.             {
  60.                 $(ops).css("display", "none");
  61.                 return;
  62.             }
  63.             var user = userinfo[0].substr(1); // strip the "@"
  64.             subset = [];
  65.             for(var a = 0; a < availableTags.length && subset.length < 3; a++)
  66.             {
  67.                 if(user.toLowerCase() == availableTags[a].atname.toLowerCase().substr(0,user.length) || user.toLowerCase() == availableTags[a].name.toLowerCase().substr(0,user.length))
  68.                 {
  69.                     var found = false;
  70.                     for(var s in subset)
  71.                     {
  72.                         if(availableTags[a].atname == subset[s].atname)
  73.                         {
  74.                             found = true;
  75.                             break;
  76.                         }
  77.                     }
  78.                     if(!found)
  79.                         subset.push(availableTags[a]);
  80.                 }
  81.             }
  82.             if(subset.length === 0)
  83.             {
  84.                 $(ops).css("display", "none");
  85.                 return;
  86.             }
  87.             else
  88.             {
  89.                 $(ops).css("height", (subset.length * 30) + "px");
  90.             }
  91.             if(evt.which == 38) // up
  92.             {
  93.                 evt.preventDefault();
  94.                 choiceidx--;
  95.                 if(choiceidx < 0)
  96.                     choiceidx = subset.length - 1;
  97.             }
  98.             else if(evt.which == 40) //down
  99.             {
  100.                 evt.preventDefault();
  101.                 choiceidx++;
  102.                 if(choiceidx >= subset.length)
  103.                     choiceidx = 0;
  104.             }
  105.             else if(evt.which == 13)
  106.             {
  107.                 evt.preventDefault();
  108.                 $(".composer__content > textarea").val(txt.substr(0, txt.length-user.length) + subset[choiceidx].atname + " ");
  109.                 $(ops).css("display", "none");
  110.                 return;
  111.             }
  112.             var render = "";
  113.             for(var c = 0; c < subset.length; c++)
  114.             {
  115.                 render += "<div style='padding:3px; position:absolute;width:300px;height:30px;top:" + (c * 30) + "px;";
  116.                 if(c == choiceidx)
  117.                     render += "background-color:blue;color:white;";
  118.                 else
  119.                     render += "color:black;";
  120.                 render += "'>";
  121.                 render += "<img src='"+subset[c].pic+"' style='height:24px; width:24px; border-radius:12px; margin-right:4px' align='left' />";
  122.                 render += "" + subset[c].name + "";
  123.                 render += "<span style='margin-left:4px;font-style:italic;opacity:0.7;'>@" + subset[c].atname + "</span>";
  124.                 render += "</div>";
  125.             }
  126.             $(ops).html(render);
  127.             $(ops).css("display", "block");
  128.         });
  129.     }
  130. }
  131. $("document").ready(function(){
  132.     itvcheck = setInterval(checkfortxt, 500);
  133. });