FanFiction DocEdit Toggle Lights

Adds a button to the doc editor toolbar which toggles lights ON (black text on a white background) and OFF (white text on a black background). Mixing this with the fullscreen mode results in a more comfortable writing experience for your eyes.

  1. // ==UserScript==
  2. // @name FanFiction DocEdit Toggle Lights
  3. // @namespace FanFiction
  4. // @author DragShot
  5. // @oujs:author TheDragShot
  6. // @released 2015-06-10
  7. // @updated 2022-10-26
  8. // @version 1.3
  9. // @lastchanges Removed dependency on jQuery, updated some broken identifiers
  10. // @copyright 2022, DragShot
  11. // @homepageURL https://dragshot.webcindario.com/software/fftoggle.php
  12. // @license GPL-3.0-only
  13. // @icon https://www.fanfiction.net/static/images/favicon_2010_iphone.png
  14. // @description Adds a button to the doc editor toolbar which toggles lights ON (black text on a white background) and OFF (white text on a black background). Mixing this with the fullscreen mode results in a more comfortable writing experience for your eyes.
  15. // @include *www.fanfiction.net/docs/edit.php*
  16. // @include *www.fanfiction.net/account/profile.php*
  17. // @grant none
  18. // ==/UserScript==
  19.  
  20. /* CHANGELOG ////////////////////////////////////////
  21.  
  22. 1.3 (10/26/2022)
  23. - Removed dependency on jQuery.
  24. - Updated some broken identifiers.
  25. - Now the script will more carefully check for the availability of the needed components instead of simply waiting for a second.
  26.  
  27. 1.2 (06/29/2015)
  28. - Now it works in the edit profile section too!
  29.  
  30. 1.1 (06/10/2015)
  31. - Now the script uses 'localStorage' to remember your choice and apply it in the next session.
  32. - Minor code cleanups performed.
  33.  
  34. ///////////////////////////////// END OF CHANGELOG */
  35.  
  36. //$('document').ready(function(){
  37. window.addEventListener('load', function() {
  38. if(!localStorage.getItem('ds.js.fanfiction.togglelights.lightson')) {
  39. localStorage.setItem('ds.js.fanfiction.togglelights.lightson',1);
  40. }
  41. function createNewNode(htmlStr) {
  42. var frag = document.createDocumentFragment(),
  43. temp = document.createElement('div');
  44. temp.innerHTML = htmlStr;
  45. while (temp.firstChild) {
  46. frag.appendChild(temp.firstChild);
  47. }
  48. return frag;
  49. }
  50. function addClass(element, cls) {
  51. if (!element.classList.contains(cls)) {
  52. element.classList.add(cls);
  53. }
  54. }
  55. function removeClass(element, cls) {
  56. element.classList.remove(cls);
  57. }
  58. function hasClass(element, cls) {
  59. return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
  60. }
  61. function toggleClass(element, cls) {
  62. element.classList.toggle(cls);
  63. }
  64. function retryWithDelay(fnc, delay) {
  65. var res = fnc();
  66. if (!res) window.setTimeout(() => { retryWithDelay(fnc, delay); }, delay);
  67. }
  68. //A timeout set to wait until the editor iframe is available
  69. //setTimeout(function(){
  70. retryWithDelay(function() {
  71. var url = window.location.href;
  72. var toolBar;
  73. if (url.indexOf('docs/edit.php') != -1)
  74. toolBar = document.getElementById('mceu_15-body');
  75. else
  76. toolBar = document.getElementById('mceu_19-body');
  77. var bio_ifr = document.getElementById('bio_ifr').contentDocument;
  78. var tinymce = bio_ifr.getElementById('tinymce');
  79. if (!toolBar || !bio_ifr || !tinymce) {
  80. return false;
  81. }
  82. var btn = createNewNode('<div aria-label="Toggle lights" role="button" id="mceu_ds1" class="mce-widget mce-btn" tabindex="-1" aria-labelledby="mceu_ds1"><button role="presentation" type="button" tabindex="-1"><i id="dsico-1" class="mce-ico mce-i-forecolor"></i></button></div>');
  83. // Using native DOM methods to insert the fragment
  84. toolBar.insertBefore(btn, toolBar.lastChild);
  85. btn = toolBar.lastChild.previousElementSibling;
  86. bio_ifr.head.appendChild(createNewNode('<style>.lightson{background-color: #FFF;color: #000;}.lightsoff{background-color: #3A3A3A;color: #FFF;}</style>'));
  87. //$('#bio_ifr').contents().find("head").append('<style>.lightson{background-color: #FFF;color: #000;}.lightsoff{background-color: #3A3A3A;color: #FFF;}</style>');
  88. //$('.lightson').css('background-color','#FFF');
  89. //$('.lightson').css('color','#000');
  90. //$('.lightsoff').css('background-color','#3A3A3A');
  91. //$('.lightsoff').css('color','#FFF');
  92. var dsico = document.getElementById('dsico-1');
  93. if (localStorage.getItem('ds.js.fanfiction.togglelights.lightson') == 1) {
  94. //$(tinymce).toggleClass('lightson',true);
  95. //$('#dsico-1').toggleClass('mce-i-forecolor',true);
  96. addClass(tinymce, 'lightson');
  97. addClass(dsico, 'mce-i-forecolor');
  98. } else {
  99. //$(tinymce).toggleClass('lightsoff',true);
  100. //$('#dsico-1').toggleClass('mce-i-forecolor',false);
  101. //$('#dsico-1').toggleClass('mce-i-backcolor',true);
  102. addClass(tinymce, 'lightsoff');
  103. removeClass(dsico, 'mce-i-forecolor');
  104. addClass(dsico, 'mce-i-backcolor');
  105. }
  106. //btn.onclick = (function() {
  107. btn.addEventListener('click', function() {
  108. //$(tinymce).toggleClass('lightson');
  109. //$(tinymce).toggleClass('lightsoff');
  110. console.log('btn.onClick()');
  111. toggleClass(tinymce, 'lightson');
  112. toggleClass(tinymce, 'lightsoff');
  113. //$('#dsico-1').toggleClass('mce-i-forecolor');
  114. //$('#dsico-1').toggleClass('mce-i-backcolor');
  115. toggleClass(dsico, 'mce-i-forecolor');
  116. toggleClass(dsico, 'mce-i-backcolor');
  117. //localStorage.setItem('ds.js.fanfiction.togglelights.lightson',($(tinymce).hasClass('lightson')? 1:0));
  118. localStorage.setItem('ds.js.fanfiction.togglelights.lightson', (hasClass(tinymce, 'lightson') ? 1 : 0));
  119. });
  120. return true;
  121. //},1000);
  122. }, 500);
  123. });

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址