微件:SaltInPageCSSLoader：修订间差异
Salt lovely（留言 | 贡献） （创建页面，内容为“<noinclude> <pre><div name="test" class="salt InPageCSSLoader"><nowiki> h1{ color: royalblue; background-color: #f0f6ff; } </nowiki></div> {{#Widget:Sa…”） |
（// Edit via Wikiplus） |
||
| （未显示1个用户的11个中间版本） | |||
| 第1行： | 第1行： | ||
<noinclude> | <noinclude> | ||
<pre><div | 已弃用，请使用 <code><nowiki>{{#inline-css}}</nowiki></code> 解析器函数代替。 | ||
<pre><div id="test" class="salt InPageCSSLoader"><pre> | |||
h1{ | h1{ | ||
color: royalblue; | color: royalblue; | ||
background-color: #f0f6ff; | background-color: #f0f6ff; | ||
} | } | ||
</ | </pre></div> | ||
{{#Widget:SaltInPageCSSLoader}}</pre> | {{#Widget:SaltInPageCSSLoader}}</pre> | ||
<div | <div id="test" class="salt InPageCSSLoader"><pre> | ||
h1{ | h1{ | ||
color: royalblue; | color: royalblue; | ||
background-color: #f0f6ff; | background-color: #f0f6ff; | ||
} | } | ||
</ | </pre></div> | ||
{{#Widget:SaltInPageCSSLoader}} | {{#Widget:SaltInPageCSSLoader}} | ||
这个页面的标题（<h1>）变成了蓝字蓝底。 | 这个页面的标题（<h1>）变成了蓝字蓝底。 | ||
</noinclude><includeonly>< | </noinclude><includeonly><script defer> | ||
/** | |||
* 搬运须知: 您必须在**显眼处**标识来源“MCBBS Wiki”与作者“Salt_lovely”, **不**接受任何形式的简称或不署名。 | * 搬运须知: 您必须在**显眼处**标识来源“MCBBS Wiki”与作者“Salt_lovely”, **不**接受任何形式的简称或不署名。 | ||
* Notice: You have to mark origin "MCBBS Wiki" and author "Salt_lovely" in CONSPICUOS PLACE, abbreviation or omissions are NOT allowed. | * Notice: You have to mark origin "MCBBS Wiki" and author "Salt_lovely" in CONSPICUOS PLACE, abbreviation or omissions are NOT allowed. | ||
* 许可证: CC BY-NC-SA 4.0 | * 许可证: CC BY-NC-SA 4.0 | ||
* License: CC BY-NC-SA 4.0 | * License: CC BY-NC-SA 4.0 | ||
*/ | */ | ||
function () { | (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 + '个') } | |||
for (let el of elems) { | for (let el of elems) { | ||
// 去除标记 | // 去除标记 | ||
el.classList.remove('InPageCSSLoader') | el.classList.remove('InPageCSSLoader') | ||
el.classList.remove('SaltCSS') | |||
let toolbar = el.querySelector('.toolbar') // Prism处理 | |||
if (toolbar) { toolbar.remove() } // Prism处理 | |||
// 根据id查重（MW不支持id、class之外其他可以存放字符串的属性） | |||
if (el.hasAttribute('id')) { | |||
let id = el.getAttribute('id') || '' | |||
if (document.head.querySelector( 'style#' + id )) { | |||
console.log('[SaltInPageCSSLoader]检测到重复CSS id: ' + id) | |||
el.removeAttribute('id') | |||
el.style.display = 'none' | |||
continue | |||
} | |||
} | |||
// 内容简单处理 | // 内容简单处理 | ||
let text = (el.textContent || '').replace(/^\n+|\n+$/gm, '') // 去除首尾的空行 | let text = (el.textContent || '').replace(/^\n+|\n+$/gm, '') // 去除首尾的空行 | ||
el.textContent = text | // el.textContent = text | ||
let handler = () => { | let handler = () => { | ||
// 处理这个元素 | // 处理这个元素 | ||
| 第54行： | 第67行： | ||
document.head.appendChild(style) | document.head.appendChild(style) | ||
} | } | ||
if (ps == 0) { | if (ps == 0 || el.classList.contains('nopreview')) { | ||
handler() | handler() | ||
} else { // 页面编写者模式 | } else { // 页面编写者模式 | ||
el.textContent = text | |||
highlightEl(el, '点击应用CSS(页面编写完毕后CSS将默认启用)') | highlightEl(el, '点击应用CSS(页面编写完毕后CSS将默认启用)') | ||
el.addEventListener('click', handler) | el.addEventListener('click', handler) | ||
| 第74行： | 第88行： | ||
* 1 - 编辑/预览页面 */ | * 1 - 编辑/预览页面 */ | ||
function pageState() { | function pageState() { | ||
if (mw && mw.config && typeof mw.config.get == 'function') { | if (typeof mw != 'undefined' && typeof mw.config != 'undefined' && typeof mw.config.get == 'function') { | ||
switch (mw.config.get('wgAction')) { | switch (mw.config.get('wgAction')) { | ||
case 'view': | case 'view': | ||
| 第98行： | 第112行： | ||
} | } | ||
} | } | ||
)() | if (document.readyState == 'loading') { | ||
</ | document.addEventListener('DOMContentLoaded', main) | ||
} else { | |||
main() | |||
} | |||
})() | |||
</script></includeonly> | |||
2023年4月29日 (六) 01:31的最新版本
已弃用，请使用 {{#inline-css}} 解析器函数代替。
<div id="test" class="salt InPageCSSLoader"><pre>
h1{
color: royalblue;
background-color: #f0f6ff;
}
</pre></div>
{{#Widget:SaltInPageCSSLoader}}
h1{
color: royalblue;
background-color: #f0f6ff;
}
这个页面的标题（<h1>）变成了蓝字蓝底。