微件:SaltInPageCSSLoader：修订间差异

2021年1月10日 (日) 15:43的版本

<div name="test" class="salt InPageCSSLoader"><pre>
h1{
    color: royalblue;
    background-color: #f0f6ff;
}
</pre></div>
{{#Widget:SaltInPageCSSLoader}}

h1{
    color: royalblue;
    background-color: #f0f6ff;
}

这个页面的标题（<h1>）变成了蓝字蓝底。

@@ 第23行： / 第23行： @@
 */
 (function () {
+ function main() {
- let ps = pageState() // 获取页面状态
+  let ps = pageState() // 获取页面状态
- let elems = HTMLElemsFliter(Array.from(document.querySelectorAll('.salt.InPageCSSLoader')))
+  let elems = HTMLElemsFliter(Array.from(document.querySelectorAll('.salt.InPageCSSLoader')))
- if (elems.length < 1) { console.log('[SaltInPageCSSLoader]未检测到页内CSS'); return } else { console.log('[SaltInPageCSSLoader]检测到页内CSS, 共计' + elems.length + '个') }
+  if (elems.length < 1) { console.log('[SaltInPageCSSLoader]未检测到页内CSS'); return } else { console.log('[SaltInPageCSSLoader]检测到页内CSS, 共计' + elems.length + '个') }
- for (let el of elems) {
- // 去除标记
+ for (let el of elems) {
+ // 去除标记
- el.classList.remove('InPageCSSLoader')
- let toolbar = el.querySelector('.toolbar') // Prism处理
+   el.classList.remove('InPageCSSLoader')
- if (toolbar) { toolbar.remove() } // Prism处理
+  let toolbar = el.querySelector('.toolbar') // Prism处理
- // 内容简单处理
+  if (toolbar) { toolbar.remove() } // Prism处理
+ // 内容简单处理
- let text = (el.textContent || '').replace(/^\n+|\n+$/gm, '') // 去除首尾的空行
- el.textContent = text
+  let text = (el.textContent || '').replace(/^\n+|\n+$/gm, '') // 去除首尾的空行
- let handler = () => {
+  el.textContent = text
- // 处理这个元素
+ let handler = () => {
- el.style.display = 'none'
+  // 处理这个元素
- // 开始主要内容部分
+  el.style.display = 'none'
- // 简单的查错
+  // 开始主要内容部分
+ // 简单的查错
- if (text.length < 3 || text.indexOf('{') == -1 || text.indexOf('}') == -1) {
+  if (text.length < 3 || text.indexOf('{') == -1 || text.indexOf('}') == -1) {
- highlightEl(el, '检测到不可用的CSS')
- console.log('[SaltInPageCSSLoader]检测到不可用的CSS:' + text)
+  highlightEl(el, '检测到不可用的CSS')
+  console.log('[SaltInPageCSSLoader]检测到不可用的CSS:' + text)
- return
+  return
+ }
+ // 写入style
+ let style = document.createElement('style')
+  style.textContent = text
+ // 搬运id
+ if (el.hasAttribute('id')) {
+  style.setAttribute('id', el.getAttribute('id'))
+ el.removeAttribute('id')
+ }
+ document.head.appendChild(style)
  }
- // 写入style
+ if (ps == 0) {
- let style = document.createElement('style')
+  handler()
- style.textContent = text
+ } else { // 页面编写者模式
+  highlightEl(el, '点击应用CSS(页面编写完毕后CSS将默认启用)')
- // 搬运id
- if (el.hasAttribute('id')) {
+  el.addEventListener('click', handler)
- style.setAttribute('id', el.getAttribute('id'))
- el.removeAttribute('id')
  }
- document.head.appendChild(style)
+ el.style.whiteSpace = 'pre'
  }
+  /**滤出数组中所有HTMLElement */
- if (ps == 0) {
-  handler()
+ function HTMLElemsFliter(els) {
- } else { // 页面编写者模式
+ let hel = []
+  for (let el of els)
- highlightEl(el, '点击应用CSS(页面编写完毕后CSS将默认启用)')
- el.addEventListener('click', handler)
+  if (el instanceof HTMLElement)
+  hel.push(el)
+ return hel
  }
+  /** 0 - 默认, 浏览页面
- el.style.whiteSpace = 'pre'
- }
+  *
+  * 1 - 编辑/预览页面 */
- /**滤出数组中所有HTMLElement */
- function HTMLElemsFliter(els) {
+  function pageState() {
+  if (typeof mw != 'undefined' && typeof mw.config != 'undefined' && typeof mw.config.get == 'function') {
- let hel = []
- for (let el of els)
+  switch (mw.config.get('wgAction')) {
- if (el instanceof HTMLElement)
+  case 'view':
- hel.push(el)
+  return 0
- return hel
+  case 'edit':
+ case 'submit':
- }
+ return 1
- /** 0 - 默认, 浏览页面
- *
+  default:
+ return 0
- * 1 - 编辑/预览页面 */
+ }
- function pageState() {
+  } else {
- if (typeof mw != 'undefined' && typeof mw.config != 'undefined' && typeof mw.config.get == 'function') {
- switch (mw.config.get('wgAction')) {
+  return 0
- case 'view':
-  return 0
- case 'edit':
- case 'submit':
-  return 1
- default:
- return 0
  }
- } else {
+ }
-  return 0
+ /**高亮一个元素 */
+  function highlightEl(el, title = '') {
+  el.style.display = 'block'
+  el.style.fontSize = '1rem'
+  el.style.color = 'crimson'
+  el.style.border = '1px solid crimson'
+ el.style.paddingLeft = '.5rem'
+  el.title = title
  }
  }
+ if (document.readyState == 'loading') {
- /**高亮一个元素 */
+ document.addEventListener('DOMContentLoaded', main)
- function highlightEl(el, title = '') {
+ } else {
- el.style.display = 'block'
- el.style.fontSize = '1rem'
+ main()
- el.style.color = 'crimson'
- el.style.border = '1px solid crimson'
- el.style.paddingLeft = '.5rem'
- el.title = title
  }
 })()

微件:SaltInPageCSSLoader：修订间差异

2021年1月10日 (日) 15:43的版本

导航菜单