☰

TPC Sticky User Toolbar

Transforms "User Options" on the left sidebar into a toolbar that sticks to the top

  1. // ==UserScript==
  2. // @name        TPC Sticky User Toolbar
  3. // @namespace   https://greasyfork.org/en/users/34131-velc-gf
  4. // @version     1.0.8
  5. // @description Transforms "User Options" on the left sidebar into a toolbar that sticks to the top
  6. // @author      Velarde, Louie C.
  7. // @match       https://tipidpc.com/*
  8. // @icon        https://www.google.com/s2/favicons?domain=tipidpc.com&sz=64
  9. // @license     LGPL-3.0
  10. // @grant       GM_addStyle
  11. // ==/UserScript==
  12.  
  13. var userOptions = document.getElementById('user-options');
  14. if (!userOptions) return;
  15. userOptions.remove();
  16.  
  17. var userOptionsList = userOptions.getElementsByTagName('ul')[0];
  18.  
  19. userOptionsList.id = 'user-options-list';
  20. GM_addStyle('#user-options-list {background-color:#E80; border-bottom:1px solid #333; box-sizing:border-box; padding:0.5em; top:0;}');
  21. GM_addStyle('#user-options-list li {background-image:none; display:inline; margin-bottom:0;}');
  22. GM_addStyle('#user-options-list li:last-of-type {float:right; margin-right:10px;}');
  23. GM_addStyle('#user-options-list li a {color: #fff;}');
  24.  
  25. var container = document.getElementById('container');
  26. var header = document.getElementById('header');
  27.  
  28. var anchor = document.createElement('div');
  29. header.appendChild(anchor);
  30. header.appendChild(userOptionsList);
  31.  
  32. var icon = (function() {
  33.   var icon = document.createElement('img');
  34.   icon.src = 'favicon.ico';
  35.   icon.style.verticalAlign = 'middle';
  36.  
  37.   var link = document.createElement('a');
  38.   link.href = '/index.php';
  39.   link.style.marginLeft = '10px';
  40.  
  41.   link.appendChild(icon);
  42.   return link;
  43. })();
  44.  
  45. function updateUserOptionsListPosition() {
  46.   var scrolledAmount = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  47.   if (scrolledAmount > anchor.offsetTop) {
  48.     if (userOptionsList.style.position != 'fixed') {
  49.       userOptionsList.style.position = 'fixed';
  50.       anchor.style.height = userOptionsList.offsetHeight + 'px';
  51.       // userOptionsList.insertBefore(icon, userOptionsList.children[0]);
  52.     }
  53.   } else {
  54.     if (userOptionsList.style.position != 'static') {
  55.       userOptionsList.style.position = 'static';
  56.       anchor.style.height = '0';
  57.       // userOptionsList.removeChild(icon);
  58.     }
  59.   }
  60. }
  61.  
  62. function updateUserOptionsListWidth() {
  63.   userOptionsList.style.width = container.offsetWidth + 'px';
  64. }
  65.  
  66. window.addEventListener('scroll', updateUserOptionsListPosition);
  67. window.addEventListener('resize', updateUserOptionsListWidth);
  68.  
  69. updateUserOptionsListPosition();
  70. updateUserOptionsListWidth();