☰

FetLife pop-up chat

An alternative view for the FetLife chat

  1. /**
  2.  *
  3.  * This script was written for Greasemonkey, and must be run using a Greasemonkey-compatible browser.
  4.  *
  5.  * @author IagoNL @ FetLife
  6.  */
  7. // ==UserScript==
  8. // @name           FetLife pop-up chat
  9. // @author         IagoNL @ FetLife
  10. // @version        1.1
  11. // @description    An alternative view for the FetLife chat
  12. // @namespace      https://fetlife.com/flpopupchat
  13. // @run-at         document-idle
  14. // @include        https://fetlife.com/*
  15. // @exclude        https://fetlife.com/adgear/*
  16. // @exclude        https://fetlife.com/chat/*
  17. // @exclude        https://fetlife.com/polling/*
  18. // @grant          GM_addStyle
  19. // ==/UserScript==
  20.  
  21. FLpopupchat = {};
  22. FLpopupchat.init = function() {
  23.     btn_maximize = "<div class=\"btn_wrapper\"><a class=\"btn_toggle xs\" onclick=\"FLpopupchat.toggleChat();return false;\" href=\"#\">Maximize</a></div>";
  24.     btn_toggle = "<div class=\"btn_wrapper\"><a class=\"btn_toggle header\" onclick=\"FLpopupchat.toggleChat();return false;\" href=\"#\">Maximize</a></div>";
  25.     uw.$("#im .list > div > div.header").append(btn_toggle);
  26.     uw.$("#im .list > a.closedtitle").append(btn_maximize);
  27. };
  28. FLpopupchat.showUserList = function() {
  29.     if ( FLpopupchat.chat_fullscreen == true ) {
  30.         if ( ! uw.$("#im.zoomScroll > .zoom > #chatbar > .list").hasClass("open") ) {
  31.             uw.$("#im.zoomScroll > .zoom > #chatbar > .list").addClass("open");
  32.         }
  33.         setTimeout(function(){FLpopupchat.showUserList()}, 1000);
  34.     }
  35. };
  36. FLpopupchat.toggleChat = function() {
  37.     if ( FLpopupchat.chat_fullscreen == false ) {
  38.         FLpopupchat.goFull();
  39.         FLpopupchat.showUserList();
  40.     }
  41.     else {
  42.         FLpopupchat.goSmall();
  43.     }
  44. };
  45. FLpopupchat.goSmall = function() {
  46.     FLpopupchat.chat_fullscreen = false;
  47.  
  48.     uw.$("#im .list > a.closedtitle .btn_wrapper > a.btn_toggle").text("Maximize");
  49.     uw.$("body").css("overflow", "auto");
  50.     uw.$("#im").removeClass("zoomScroll");
  51.     uw.$("#im > div").removeClass("zoom");
  52.     uw.$("#im > div").css("margin", FLpopupchat.im_div_margin);
  53. };
  54. FLpopupchat.goFull = function() {
  55.     FLpopupchat.chat_fullscreen = true;
  56.     FLpopupchat.im_div_margin = uw.$("#im > div").css("margin");
  57.  
  58.     uw.$("#im .list > div ul.kinksters li").click(FLpopupchat.showUserList());
  59.     uw.$("#im .list > a.closedtitle .btn_wrapper > a.btn_toggle").text("Restore");
  60.     uw.$("body").css("overflow", "hidden");
  61.     uw.$("#im").addClass("zoomScroll");
  62.     uw.$("#im > div").addClass("zoom");
  63.     uw.$("#im > div").css("margin", ""); // Remove inline style
  64. };
  65.  
  66. var uw = (unsafeWindow) ? unsafeWindow : window;        // Chrome compatibility
  67. uw.FLpopupchat = cloneInto(FLpopupchat, uw, {cloneFunctions: true});
  68.  
  69. FLpopupchat.init();
  70.  
  71. GM_addStyle(' \
  72.     #im.zoomScroll .zoom { position: fixed; left: 50%; margin: 20px -375px; bottom: 20px !important; top: 20px !important; } \
  73.     #im.zoomScroll #chatbar { height: 100%; } \
  74.     #im.zoomScroll #chatbar > span { position: relative; float: none; display: inline-block; height: 100%; width: 73%; clear: both; } \
  75.     #im.zoomScroll #chatbar div.chat > div { display: none; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; } \
  76.     #im.zoomScroll #chatbar div.chat { margin: 0px; position: initial; width: 120px; } \
  77.     #im.zoomScroll #chatbar div.chat span.newmsgcnt { right: initial; left: 95px; position: relative; } \
  78.     #im.zoomScroll #chatbar div.chat.open a.closedtitle { display: inline-block; z-index: 1002; } \
  79.     #im.zoomScroll #chatbar div.chat.open > div { z-index: 1001; display: block; top: 32px; left: 0px; right: 0px; bottom: 0px; width: initial; height: initial; position: absolute; } \
  80.     #im.zoomScroll #chatbar div.chat.open > div .thread { position: absolute; top: 35px; bottom: 27px; left: 0; right: 0; height: initial; } \
  81.     #im.zoomScroll #chatbar div.chat.open > div form { left: 0px; right: 0px; width: initial; } \
  82.     #im.zoomScroll #chatbar div.chat.open > div form input { width: 100%; padding: 6px 0px; text-indent: 22px; } \
  83.     #im.zoomScroll #chatbar div.chat a.closedtitle { position: absolute; margin-left: -1px; } \
  84.     \
  85.     #im.zoomScroll { height: auto; left: 0px; } \
  86.     #im.zoomScroll .list { display: inline-block; float: right; position: relative; height: 100%; width: 25.5%; } \
  87.     #im.zoomScroll .list:after { display: none; } \
  88.     #im.zoomScroll .list > a { position: absolute; top: 0px; left: 0px; right: 0px; height: 30px } \
  89.     #im.zoomScroll .list > div > div.header { display: none; } \
  90.     #im.zoomScroll .list > div ul.kinksters { height: 100%; } \
  91.     #im.zoomScroll .list > div { position: absolute; top: 30px; bottom: 0px; height: auto; } \
  92.     #im .btn_wrapper { position: fixed; } \
  93.     #im .btn_wrapper .btn_toggle { position: absolute; bottom: 20px; padding: 3px 10px 2px !important; border-radius: 15px 15px 0px 0px; background-color: #393939; } \
  94.     #im .header:hover .btn_wrapper .btn_toggle { background-color: #070707; } \
  95.     #im a.closedtitle .btn_wrapper .btn_toggle { bottom: 2em; color: inherit; } \
  96.     #im a.closedtitle:hover .btn_wrapper .btn_toggle { background-color: #222; } \
  97. ');