Greasy Fork 支持简体中文。

Ordered-Lists-for-WorkFlowy

Enable ordered lists for WorkFlowy

目前為 2022-02-22 提交的版本,檢視 最新版本

  1. // ==UserScript==
  2. // @name Ordered-Lists-for-WorkFlowy
  3. // @namespace https://github.com/BettyJJ
  4. // @version 0.3.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. // 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. // hide the tags (#ol, #nb) when they are not in focus
  109. const css = `
  110. .contentTag[data-val="#ol"]:not(.name--focused *):not(:hover),
  111. .contentTag[data-val="#nb"]:not(.name--focused *):not(:hover) {
  112. opacity: 0;
  113. }
  114. `
  115.  
  116. GM.addStyle(css);
  117.  
  118. }
  119.  
  120.  
  121. /**
  122. * add style for #ol
  123. */
  124. function add_style_ol() {
  125. // hide the bullets
  126. let css = `
  127. .list-ol > .children > .project > .name > .bullet {
  128. opacity: 0;
  129. }
  130. .list-ol > .children > .project > .name > .bullet:hover {
  131. opacity: 0.5;
  132. }
  133. .list-ol > .children > .project > .name > .bullet > svg {
  134. fill: transparent;
  135. }
  136. `
  137.  
  138. // show the numbers
  139. css += `
  140. .list-ol > .children {
  141. counter-reset: counter;
  142. }
  143. .list-ol > .children > .project > .name:before {
  144. counter-increment: counter;
  145. content: counter(counter) '. ';
  146. float: left;
  147. margin-left: -18px;
  148. margin-top: 8px;
  149. }
  150. `
  151.  
  152. GM.addStyle(css);
  153. }
  154.  
  155.  
  156. /**
  157. * add style for #nb
  158. */
  159. function add_style_nb() {
  160. // hide the bullets
  161. const css = `
  162. .list-nb > .children > .project > .name > a.bullet {
  163. opacity: 0;
  164. }
  165. .list-nb > .children > .project > .name > a.bullet:hover {
  166. opacity: 0.5;
  167. }
  168. `
  169.  
  170. GM.addStyle(css);
  171. }
  172.  
  173.  
  174. /**
  175. * unhide the bullets in ordered lists
  176. */
  177. function show_bullet_in_ol() {
  178. // unhide the bullets
  179. let css = `
  180. .list-ol > .children > .project > .name > .bullet {
  181. opacity: revert;
  182. }
  183. .list-ol > .children > .project > .name > .bullet:hover {
  184. opacity: revert;
  185. }
  186. .list-ol > .children > .project > .name > .bullet > svg {
  187. fill: revert;
  188. }
  189. `
  190.  
  191. // position the numbers
  192. css += `
  193. .list-ol > .children > .project > .name:before {
  194. margin-left: -3px;
  195. margin-right: 5px;
  196. }
  197. `
  198.  
  199. GM.addStyle(css);
  200. }
  201.  
  202.  
  203. })();