☰

TPC Sticky User Toolbar

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

当前为 2016-03-19 提交的版本，查看 最新版本。

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