Sleazy Fork is available in English.

Zen Mode for CHYOA

Hide the sidebar and center the text. Click to toggle Zen Mode. You can also use the hotkey ALT+Z

  1. // ==UserScript==
  2. // @name Zen Mode for CHYOA
  3. // @namespace https://sleazyfork.org/en/users/55535-sllypper
  4. // @version 1.0.1
  5. // @description Hide the sidebar and center the text. Click to toggle Zen Mode. You can also use the hotkey ALT+Z
  6. // @author sllypper
  7. // @match *://chyoa.com/chapter/*
  8. // @match *://chyoa.com/story/*
  9. // @icon https://chyoa.com/favicon.png
  10. // @grant GM_getValue
  11. // @grant GM_setValue
  12. // ==/UserScript==
  13.  
  14. 'use strict';
  15.  
  16. const transitionDuration = '1s'
  17. const automaticallyOnScrollingDownABit = false
  18.  
  19. const style = toStyleStr({
  20. 'transition': 'cubic-bezier(.34,.34,.3,1.02) transform '+transitionDuration,
  21. 'box-shadow': 'none !important',
  22. 'transform': 'translateX(0px)',
  23. }, '#content > div:first-child') +
  24. toStyleStr({
  25. 'transform': 'translateX(190px)',
  26. }, '#content.zen > div:first-child') +
  27. toStyleStr({
  28. 'transition': 'cubic-bezier(.34,.34,.3,1.02) transform '+transitionDuration+', ease opacity '+transitionDuration,
  29. 'position': 'fixed !important',
  30. 'opacity': 1,
  31. 'transform': 'none',
  32. }, '#content .sidebar') +
  33. toStyleStr({
  34. 'position': 'fixed',
  35. 'opacity': 0,
  36. 'transform': 'translateX(190px)',
  37. 'z-index': '-1',
  38. }, '#content.zen .sidebar');
  39.  
  40. addStyle(style)
  41.  
  42. const mastHeadEl = document.getElementById('masthead')
  43. const contentEl = document.getElementById('content')
  44.  
  45. if (GM_getValue('zen')) { makeZen() }
  46.  
  47. if (automaticallyOnScrollingDownABit) {
  48. document.addEventListener('scroll', (event) => {
  49. const y = window.scrollY
  50. if (window.scrollY > mastHeadEl.scrollHeight) makeZen();
  51. else makeNotZen()
  52. })
  53. }
  54.  
  55. document.addEventListener('keydown', (event) => {
  56. if (event.code == 'KeyZ' && event.altKey == true) toggleZen()
  57. })
  58.  
  59. zbox()
  60.  
  61. function zbox(){
  62. const z = document.createElement('button')
  63. const b = '26px'
  64. z.setAttribute('style', toStyleStr({
  65. 'border': '1px solid #666',
  66. 'background': '#333',
  67. 'position': 'fixed',
  68. 'left': '10px',
  69. 'bottom': '10px',
  70. // 'width': b,
  71. 'height': b,
  72. 'line-heigh': b,
  73. 'color': '#ccc',
  74. 'padding': '0 8px',
  75. }))
  76. z.setAttribute('title', "ALT+Z")
  77. z.onclick = toggleZen
  78. z.textContent = 'Zen'
  79. document.body.appendChild(z)
  80. }
  81.  
  82. let zen = false
  83. function toggleZen() {
  84. if (zen) makeNotZen()
  85. else makeZen()
  86. zen = !zen
  87. }
  88.  
  89. function makeZen(){
  90. contentEl.setAttribute('class', 'zen')
  91. GM_setValue('zen', 1)
  92. // let classes = contentEl.getAttribute('class')
  93. // classes = classes.split(' ')
  94. // const pos = classes.findIndex(a=>a=='zen')
  95. // if (pos === -1) {
  96. // classes.push('zen')
  97. // contentEl.setAttribute('class', classes.join(" "))
  98. // return 1
  99. // }
  100. // return 0
  101. }
  102.  
  103. function makeNotZen() {
  104. contentEl.setAttribute('class', null)
  105. GM_setValue('zen', 0)
  106. // let classes = contentEl.getAttribute('class')
  107. // classes = classes.split(' ')
  108. // const pos = classes.findIndex(a=>a=='zen')
  109. // if (pos) {
  110. // classes = classes.splice(0, pos);
  111. // contentEl.setAttribute('class', classes.join(" "))
  112. // return 1
  113. // }
  114. // return 0
  115. }
  116.  
  117. // function addStyle(replace = true) {
  118. function addStyle() {
  119. let styleEl = document.createElement('style');
  120. document.head.appendChild(styleEl);
  121. var css = [].slice.call(arguments).join('\n');
  122. // if(replace) {
  123. styleEl.textContent = css;
  124. // } else {
  125. // styleEl.textContent += css;
  126. // }
  127. }
  128.  
  129.  
  130. function toStyleStr(obj, selector) {
  131. var stack = [],
  132. key;
  133. for (key in obj) {
  134. if (obj.hasOwnProperty(key)) {
  135. stack.push(key + ':' + obj[key]);
  136. }
  137. }
  138. if (selector) {
  139. return selector + '{' + stack.join(';') + '}';
  140. } else {
  141. return stack.join(';');
  142. }
  143. };