☰

Ordered-Lists-for-WorkFlowy

Enable ordered lists for WorkFlowy

当前为 2022-02-14 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Ordered-Lists-for-WorkFlowy
  3. // @namespace    https://github.com/BettyJJ
  4. // @version      0.1
  5. // @description  Enable ordered lists for WorkFlowy
  6. // @author       Betty
  7. // @match        https://workflowy.com/*
  8. // @match        https://*.workflowy.com/*
  9. // @run-at       document-idle
  10. // @grant        GM.addStyle
  11. // ==/UserScript==
  12.  
  13. (function () {
  14. 	'use strict';
  15.  
  16.  
  17. 	init();
  18.  
  19.  
  20. 	/**
  21. 	 * initialize
  22. 	 */
  23. 	function init() {
  24. 		watch_page();
  25. 		add_style();
  26. 	}
  27.  
  28.  
  29. 	/**
  30. 	 * watch the page
  31. 	 */
  32. 	function watch_page() {
  33.  
  34. 		// wathe the page, so that the rendering is updated when new contents come in as the user edits or navigates
  35. 		const observer = new MutationObserver(function (mutationlist) {
  36. 			for (const { addedNodes } of mutationlist) {
  37. 				for (const node of addedNodes) {
  38. 					if (!node.tagName) continue; // not an element
  39.  
  40. 					if (node.classList.contains('innerContentContainer')) {
  41. 						add_class(node);
  42. 					}
  43.  
  44. 				}
  45. 			}
  46. 		});
  47. 		observer.observe(document.body, { childList: true, subtree: true });
  48.  
  49. 	}
  50.  
  51.  
  52. 	/**
  53. 	 * if a node contains the #ol tag, add a class
  54. 	 * * @param node {Node} Dom Node
  55. 	 */
  56. 	function add_class(node) {
  57. 		// sometimes there is a dummy node without parent. don't know why, but we need to check and exclude it first
  58. 		if (!node.parentElement) {
  59. 			return;
  60. 		}
  61.  
  62. 		// first remove the class we added previously
  63. 		const ancestor = node.closest('.project');
  64. 		ancestor.classList.remove('list-ol');
  65.  
  66. 		// if a node contains the #ol tag, add a class
  67. 		if (node.querySelectorAll('[data-val="#ol"]').length > 0) {
  68. 			ancestor.classList.add('list-ol');
  69. 		}
  70.  
  71. 	}
  72.  
  73.  
  74. 	/**
  75. 	 * add style
  76. 	 */
  77. 	function add_style() {
  78. 		// hide the bullets
  79. 		let css = `
  80. 		.list-ol > .children > .project > .name > .bullet {
  81. 			opacity: 0.5 !important;
  82. 		}
  83. 		.list-ol > .children > .project > .name > .bullet > svg {
  84. 			fill: transparent;
  85. 		}
  86. 		`
  87.  
  88. 		// show the numbers
  89. 		css += `
  90. 		.list-ol > .children {
  91. 			counter-reset: counter;
  92. 		}
  93. 		.list-ol > .children > .project > .name:before {
  94. 			counter-increment: counter;
  95. 			content: counter(counter) '. ';
  96. 			float: left;
  97. 			margin-left: -18px;
  98. 			margin-top: 8px;
  99. 		}
  100. 		`
  101.  
  102. 		GM.addStyle(css);
  103. 	}
  104.  
  105.  
  106. })();