UserscriptAPIDom

https://gitee.com/liangjiancang/userscript/tree/master/lib/UserscriptAPI

目前為 2021-09-19 提交的版本,檢視 最新版本

此腳本不應該直接安裝,它是一個供其他腳本使用的函式庫。欲使用本函式庫,請在腳本 metadata 寫上: // @require https://update.gf.qytechs.cn/scripts/431998/971986/UserscriptAPIDom.js

  1. /**
  2. * UserscriptAPIDom
  3. *
  4. * 依赖于 `UserscriptAPI`。
  5. * @version 1.2.0.20210919
  6. * @author Laster2800
  7. * @see {@link https://gitee.com/liangjiancang/userscript/tree/master/lib/UserscriptAPI UserscriptAPI}
  8. */
  9. class UserscriptAPIDom {
  10. /**
  11. * @param {UserscriptAPI} api `UserscriptAPI`
  12. */
  13. constructor(api) {
  14. this.api = api
  15. }
  16.  
  17. /**
  18. * 查找符合条件的祖先元素
  19. * @param {HTMLElement} target 目标元素
  20. * @param {(el: HTMLElement) => boolean} condition 条件
  21. * @param {boolean} [positioned] 以 `offsetParent` 而非 `parentElement` 上溯
  22. * @returns {HTMLElement} 符合条件的祖先元素
  23. */
  24. findAncestor(target, condition, positioned) {
  25. const p = positioned ? 'offsetParent' : 'parentElement'
  26. let element = target[p]
  27. while (element && !condition(element)) {
  28. element = element[p]
  29. }
  30. return element
  31. }
  32.  
  33. /**
  34. * 设定元素位置,默认设定为绝对居中
  35. *
  36. * 要求该元素此时可见且尺寸为确定值(一般要求为块状元素)。
  37. * @param {HTMLElement} target 目标元素
  38. * @param {Object} [options] 选项
  39. * @param {string} [options.position='fixed'] 定位方式
  40. * @param {string} [options.top='50%'] `style.top`
  41. * @param {string} [options.left='50%'] `style.left`
  42. */
  43. setPosition(target, options) {
  44. options = {
  45. position: 'fixed',
  46. top: '50%',
  47. left: '50%',
  48. ...options,
  49. }
  50. target.style.position = options.position
  51. const style = window.getComputedStyle(target)
  52. const top = (Number.parseFloat(style.height) + Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom)) / 2
  53. const left = (Number.parseFloat(style.width) + Number.parseFloat(style.paddingLeft) + Number.parseFloat(style.paddingRight)) / 2
  54. target.style.top = `calc(${options.top} - ${top}px)`
  55. target.style.left = `calc(${options.left} - ${left}px)`
  56. }
  57.  
  58. /**
  59. * @typedef FadeTargetElement
  60. * @property {string} [fadeInDisplay] 渐显开始后的 `display` 样式。若没有设定:
  61. * * 若当前 `display` 与 `fadeOutDisplay` 不同,默认值为当前 `display`。
  62. * * 若当前 `display` 与 `fadeOutDisplay` 相同,默认值为 `block`。
  63. * @property {string} [fadeOutDisplay='none'] 渐隐开始后的 `display` 样式
  64. * @property {number} [fadeInTime] 渐显时间;缺省时,元素的 `transition-duration` 必须与 `api.options.fadeTime` 一致
  65. * @property {number} [fadeOutTime] 渐隐时间;缺省时,元素的 `transition-duration` 必须与 `api.options.fadeTime` 一致
  66. * @property {string} [fadeInFunction='ease-in-out'] 渐显效果,应为符合 `transition-timing-function` 的有效值
  67. * @property {string} [fadeOutFunction='ease-in-out'] 渐隐效果,应为符合 `transition-timing-function` 的有效值
  68. * @property {boolean} [fadeInNoInteractive] 渐显期间是否禁止交互
  69. * @property {boolean} [fadeOutNoInteractive] 渐隐期间是否禁止交互
  70. */
  71. /**
  72. * 处理 HTML 元素的渐显和渐隐
  73. * @param {boolean} inOut 渐显/渐隐
  74. * @param {HTMLElement & FadeTargetElement} target HTML 元素
  75. * @param {() => void} [callback] 渐显/渐隐完成的回调函数
  76. */
  77. fade(inOut, target, callback) {
  78. const api = this.api
  79. let transitionChanged = false
  80. const fadeId = Date.now() // 等同于当前时间戳,其意义在于保证对于同一元素,后执行的操作必将覆盖前的操作
  81. const fadeOutDisplay = target.fadeOutDisplay ?? 'none'
  82. target._fadeId = fadeId
  83. if (inOut) { // 渐显
  84. let displayChanged = false
  85. if (typeof target.fadeInTime == 'number' || target.fadeInFunction) {
  86. target.style.transition = `opacity ${target.fadeInTime ?? api.options.fadeTime}ms ${target.fadeInFunction ?? 'ease-in-out'}`
  87. transitionChanged = true
  88. }
  89. if (target.fadeInNoInteractive) {
  90. target.style.pointerEvents = 'none'
  91. }
  92. const originalDisplay = window.getComputedStyle(target).display
  93. let fadeInDisplay = target.fadeInDisplay
  94. if (!fadeInDisplay) {
  95. if (originalDisplay != fadeOutDisplay) {
  96. fadeInDisplay = originalDisplay
  97. } else {
  98. fadeInDisplay = 'block'
  99. }
  100. }
  101. if (originalDisplay != fadeInDisplay) {
  102. target.style.display = fadeInDisplay
  103. displayChanged = true
  104. }
  105. setTimeout(() => {
  106. let success = false
  107. if (target._fadeId <= fadeId) {
  108. target.style.opacity = '1'
  109. success = true
  110. }
  111. setTimeout(() => {
  112. callback?.(success)
  113. if (target._fadeId <= fadeId) {
  114. if (transitionChanged) {
  115. target.style.transition = ''
  116. }
  117. if (target.fadeInNoInteractive) {
  118. target.style.pointerEvents = ''
  119. }
  120. }
  121. }, target.fadeInTime ?? api.options.fadeTime)
  122. }, displayChanged ? 10 : 0) // 此处的 10ms 是为了保证修改 display 后在浏览器上真正生效;按 HTML5 定义,浏览器需保证 display 在修改后 4ms 内生效,但实际上大部分浏览器貌似做不到,等个 10ms 再修改 opacity
  123. } else { // 渐隐
  124. if (typeof target.fadeOutTime == 'number' || target.fadeOutFunction) {
  125. target.style.transition = `opacity ${target.fadeOutTime ?? api.options.fadeTime}ms ${target.fadeOutFunction ?? 'ease-in-out'}`
  126. transitionChanged = true
  127. }
  128. if (target.fadeOutNoInteractive) {
  129. target.style.pointerEvents = 'none'
  130. }
  131. target.style.opacity = '0'
  132. setTimeout(() => {
  133. let success = false
  134. if (target._fadeId <= fadeId) {
  135. target.style.display = fadeOutDisplay
  136. success = true
  137. }
  138. callback?.(success)
  139. if (success) {
  140. if (transitionChanged) {
  141. target.style.transition = ''
  142. }
  143. if (target.fadeOutNoInteractive) {
  144. target.style.pointerEvents = ''
  145. }
  146. }
  147. }, target.fadeOutTime ?? api.options.fadeTime)
  148. }
  149. }
  150.  
  151. /**
  152. * 判断 HTML 元素类名中是否含有 `class`
  153. * @param {HTMLElement} el 目标元素
  154. * @param {string | string[]} className `class`,支持同时判断多个
  155. * @param {boolean} [and] 同时判断多个 `class` 时,默认采取 `OR` 逻辑,是否采用 `AND` 逻辑
  156. * @returns {boolean} 是否含有 `class`
  157. */
  158. containsClass(el, className, and = false) {
  159. if (el.classList) {
  160. const trim = clz => clz.startsWith('.') ? clz.slice(1) : clz
  161. if (Array.isArray(className)) {
  162. if (and) {
  163. for (const c of className) {
  164. if (!el.classList.contains(trim(c))) {
  165. return false
  166. }
  167. }
  168. return true
  169. } else {
  170. for (const c of className) {
  171. if (el.classList.contains(trim(c))) {
  172. return true
  173. }
  174. }
  175. return false
  176. }
  177. } else {
  178. return el.classList.contains(trim(className))
  179. }
  180. }
  181. return false
  182. }
  183.  
  184. /**
  185. * 判断 HTML 元素是否为 `fixed` 定位,或其是否在 `fixed` 定位的元素下
  186. * @param {HTMLElement} el 目标元素
  187. * @param {HTMLElement} [endEl] 终止元素,当搜索到该元素时终止判断(不会判断该元素)
  188. * @returns {boolean} HTML 元素是否为 `fixed` 定位,或其是否在 `fixed` 定位的元素下
  189. */
  190. isFixed(el, endEl) {
  191. while (el && el != endEl) {
  192. if (window.getComputedStyle(el).position == 'fixed') return true
  193. el = el.offsetParent
  194. }
  195. return false
  196. }
  197. }
  198.  
  199. /* global UserscriptAPI */
  200. { UserscriptAPI.registerModule('dom', UserscriptAPIDom) }

QingJ © 2025

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