☰

Ordered-Lists-for-WorkFlowy

Enable ordered lists for WorkFlowy

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

  1. // ==UserScript==
  2. // @name         Ordered-Lists-for-WorkFlowy
  3. // @namespace    https://github.com/BettyJJ
  4. // @version      0.2
  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. 		// we hide the bullets in ordered lists by default. If you want to show them by default, uncomment the next line
  28. 		// show_bullet_in_ol();
  29. 	}
  30.  
  31.  
  32. 	/**
  33. 	 * watch the page
  34. 	 */
  35. 	function watch_page() {
  36.  
  37. 		// wathe the page, so that the rendering is updated when new contents come in as the user edits or navigates
  38. 		const observer = new MutationObserver(function (mutationlist) {
  39. 			for (const { addedNodes } of mutationlist) {
  40. 				for (const node of addedNodes) {
  41. 					if (!node.tagName) continue; // not an element
  42.  
  43. 					if (node.classList.contains('innerContentContainer')) {
  44. 						add_class(node);
  45. 					}
  46.  
  47. 				}
  48. 			}
  49. 		});
  50. 		observer.observe(document.body, { childList: true, subtree: true });
  51.  
  52. 	}
  53.  
  54.  
  55. 	/**
  56. 	 * if a node contains the #ol or #nb tag, add a class
  57. 	 * * @param {Node} node Dom Node
  58. 	 */
  59. 	function add_class(node) {
  60. 		// sometimes there is a dummy node without parent. don't know why, but we need to check and exclude it first
  61. 		if (!node.parentElement) {
  62. 			return;
  63. 		}
  64.  
  65. 		add_class_ol(node);
  66. 		add_class_nb(node);
  67. 	}
  68.  
  69.  
  70. 	/**
  71. 	 * if a node contains the #ol tag, add a class
  72. 	 * * @param {Node} node Dom Node
  73. 	 */
  74. 	function add_class_ol(node) {
  75. 		// first remove the class we added previously
  76. 		const ancestor = node.closest('.project');
  77. 		ancestor.classList.remove('list-ol');
  78.  
  79. 		// if a node contains the #ol tag, add a class
  80. 		if (node.querySelectorAll('[data-val="#ol"]').length > 0) {
  81. 			ancestor.classList.add('list-ol');
  82. 		}
  83. 	}
  84.  
  85.  
  86. 	/**
  87. 	 * if a node contains the #nb tag, add a class
  88. 	 * * @param {Node} node Dom Node
  89. 	 */
  90. 	function add_class_nb(node) {
  91. 		// first remove the class we added previously
  92. 		const ancestor = node.closest('.project');
  93. 		ancestor.classList.remove('list-nb');
  94.  
  95. 		// if a node contains the #nb tag, add a class
  96. 		if (node.querySelectorAll('[data-val="#nb"]').length > 0) {
  97. 			ancestor.classList.add('list-nb');
  98. 		}
  99. 	}
  100.  
  101. 	/**
  102. 	 * add style
  103. 	 */
  104. 	function add_style() {
  105. 		add_style_ol();
  106. 		add_style_nb();
  107. 	}
  108.  
  109.  
  110. 	/**
  111. 	 * add style for #ol
  112. 	 */
  113. 	function add_style_ol() {
  114. 		// hide the bullets
  115. 		let css = `
  116. 		.list-ol > .children > .project > .name > .bullet {
  117. 			opacity: 0.5 !important;
  118. 		}
  119. 		.list-ol > .children > .project > .name > .bullet > svg {
  120. 			fill: transparent;
  121. 		}
  122. 		`
  123.  
  124. 		// show the numbers
  125. 		css += `
  126. 		.list-ol > .children {
  127. 			counter-reset: counter;
  128. 		}
  129. 		.list-ol > .children > .project > .name:before {
  130. 			counter-increment: counter;
  131. 			content: counter(counter) '. ';
  132. 			float: left;
  133. 			margin-left: -18px;
  134. 			margin-top: 8px;
  135. 		}
  136. 		`
  137.  
  138. 		GM.addStyle(css);
  139. 	}
  140.  
  141.  
  142. 	/**
  143. 	 * add style for #nb
  144. 	 */
  145. 	function add_style_nb() {
  146. 		// hide the bullets
  147. 		const css = `
  148. 			.list-nb > .children > .project > .name > a.bullet {
  149. 				opacity: 0.5 !important;
  150. 			}
  151. 			.list-nb > .children > .project > .name > a.bullet > svg {
  152. 				fill: transparent;
  153. 			}
  154. 			`
  155.  
  156. 		GM.addStyle(css);
  157. 	}
  158.  
  159.  
  160. 	/**
  161. 	 * unhide the bullets in ordered lists
  162. 	 */
  163. 	function show_bullet_in_ol() {
  164. 		// unhide the bullets
  165. 		let css = `
  166. 		.list-ol > .children > .project > .name > .bullet {
  167. 			opacity: revert;
  168. 		}
  169. 		.list-ol > .children > .project > .name > .bullet > svg {
  170. 			fill: revert;
  171. 		}
  172. 		`
  173.  
  174. 		// locate the numbers
  175. 		css += `
  176. 		.list-ol > .children > .project > .name:before {
  177. 			margin-left: -3px;
  178. 			margin-right: 5px;
  179. 		}
  180. 		`
  181.  
  182. 		GM.addStyle(css);
  183. 	}
  184.  
  185.  
  186. })();