MediaWiki:Gadget-SelectionCounter.js:修订间差异
外观
删除的内容 添加的内容
Maintenance script(留言 | 贡献) 为未加载 CSS 提供可见性兜底 |
Maintenance script(留言 | 贡献) 小 优化 SelectionCounter:事件驱动计数与低开销显示 |
||
| (未显示同一用户的1个中间版本) | |||
| 第1行: | 第1行: | ||
/* MediaWiki Gadget: SelectionCounter */ |
|||
/* ================================================================ |
|||
( function () { |
|||
MediaWiki Gadget: SelectionCounter |
|||
'use strict'; |
|||
功能: |
|||
- 选中文本时显示字数统计 |
|||
- 与 RightToolbar 风格一致 |
|||
================================================================= */ |
|||
if ( window.SelectionCounterLoaded ) { |
|||
mw.loader.using(['mediawiki.util']).then(function () { |
|||
return; |
|||
if (window.SelectionCounterLoaded) { |
|||
} |
|||
return; |
|||
window.SelectionCounterLoaded = true; |
|||
} |
|||
window.SelectionCounterLoaded = true; |
|||
mw.loader.using( [ 'jquery', 'mediawiki.util' ] ).then( function () { |
|||
var $counter; |
|||
var rafId = 0; |
|||
var hideTimer = 0; |
|||
var lastRendered = ''; |
|||
var lastShownAt = 0; |
|||
var selecting = false; |
|||
var canSegment = typeof Intl !== 'undefined' && typeof Intl.Segmenter === 'function'; |
|||
var segmenter = canSegment ? new Intl.Segmenter( mw.config.get( 'wgUserLanguage' ) || 'zh-cn', { |
|||
granularity: 'grapheme' |
|||
} ) : null; |
|||
function getMessage( count ) { |
|||
if (!$counter.length) { |
|||
var lang = ( mw.config.get( 'wgUserLanguage' ) || mw.config.get( 'wgContentLanguage' ) || 'zh-cn' ).toLowerCase(); |
|||
$counter = $('<div id="mw-selection-counter" class="mw-selection-counter" role="status" aria-live="polite"></div>') |
|||
return lang.indexOf( 'en' ) === 0 ? 'Selected ' + count + ' chars' : '已选 ' + count + ' 字'; |
|||
.hide() |
|||
} |
|||
.appendTo('body'); |
|||
} |
|||
function getSelectionText() { |
|||
var selection = window.getSelection && window.getSelection(); |
|||
var el = $counter[0]; |
|||
if ( !selection || selection.rangeCount === 0 || selection.isCollapsed ) { |
|||
if (!el) { |
|||
return ''; |
|||
return; |
|||
} |
|||
} |
|||
return selection.toString(); |
|||
var computed = window.getComputedStyle(el); |
|||
} |
|||
if (computed.position !== 'static') { |
|||
return; |
|||
} |
|||
$counter.css({ |
|||
position: 'fixed', |
|||
bottom: '24px', |
|||
right: '24px', |
|||
padding: '6px 10px', |
|||
fontSize: '12px', |
|||
borderRadius: '4px', |
|||
background: 'var(--color-surface-0, rgba(255, 255, 255, 0.85))', |
|||
border: '1px solid var(--border-color-base, #aaa)', |
|||
color: 'var(--color-base, #333)', |
|||
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.2)', |
|||
backdropFilter: 'blur(4px)', |
|||
zIndex: 2147483647, |
|||
pointerEvents: 'none' |
|||
}); |
|||
} |
|||
function countText( text ) { |
|||
ensureVisibleStyles(); |
|||
var compact = text.replace( /\s+/g, '' ); |
|||
if ( !compact ) { |
|||
return 0; |
|||
} |
|||
if ( segmenter ) { |
|||
return Array.from( segmenter.segment( compact ) ).length; |
|||
} |
|||
return Array.from( compact ).length; |
|||
} |
|||
function hideCounter() { |
|||
var rafId = null; |
|||
lastRendered = ''; |
|||
var pollTimer = null; |
|||
$counter.attr( 'hidden', 'hidden' ).text( '' ); |
|||
var lastText = ''; |
|||
} |
|||
var lastTime = 0; |
|||
var isSelecting = false; |
|||
function renderCounter( text ) { |
|||
function getSelectionText() { |
|||
var count = countText( text ); |
|||
var selection = window.getSelection(); |
|||
var rendered; |
|||
if (!selection || selection.rangeCount === 0 || selection.isCollapsed) { |
|||
return ''; |
|||
} |
|||
return selection.toString(); |
|||
} |
|||
if ( count < 1 ) { |
|||
function compactText(text) { |
|||
hideCounter(); |
|||
return text.replace(/\s+/g, ''); |
|||
return; |
|||
} |
|||
} |
|||
rendered = getMessage( count ); |
|||
function showCount(text) { |
|||
if ( rendered !== lastRendered ) { |
|||
var compact = compactText(text); |
|||
$counter.text( rendered ); |
|||
if (!compact) { |
|||
lastRendered = rendered; |
|||
return false; |
|||
} |
|||
} |
|||
lastShownAt = Date.now(); |
|||
var count = Array.from(compact).length; |
|||
$counter.removeAttr( 'hidden' ); |
|||
} |
|||
return true; |
|||
} |
|||
function updateCounter() { |
|||
var text; |
|||
rafId = null; |
|||
var text = getSelectionText(); |
|||
if (text) { |
|||
lastText = text; |
|||
lastTime = Date.now(); |
|||
showCount(text); |
|||
return; |
|||
} |
|||
rafId = 0; |
|||
if (lastText && Date.now() - lastTime < 1200) { |
|||
text = getSelectionText(); |
|||
showCount(lastText); |
|||
return; |
|||
} |
|||
if ( text ) { |
|||
$counter.hide(); |
|||
renderCounter( text ); |
|||
} |
|||
return; |
|||
} |
|||
if ( !selecting && Date.now() - lastShownAt > 800 ) { |
|||
function scheduleUpdate() { |
|||
hideCounter(); |
|||
if (rafId) { |
|||
} |
|||
return; |
|||
} |
|||
} |
|||
rafId = window.requestAnimationFrame(updateCounter); |
|||
} |
|||
function scheduleUpdate() { |
|||
if ( rafId ) { |
|||
window.setTimeout(scheduleUpdate, 0); |
|||
return; |
|||
} |
|||
} |
|||
rafId = window.requestAnimationFrame( updateCounter ); |
|||
} |
|||
function scheduleHide() { |
|||
window.clearTimeout( hideTimer ); |
|||
if (pollTimer) { |
|||
hideTimer = window.setTimeout( scheduleUpdate, 900 ); |
|||
return; |
|||
} |
|||
} |
|||
pollTimer = window.setInterval(updateCounter, 500); |
|||
} |
|||
$( function () { |
|||
$counter = $( '#mw-selection-counter' ); |
|||
if (!pollTimer) { |
|||
if ( !$counter.length ) { |
|||
return; |
|||
$counter = $( '<div>' ) |
|||
} |
|||
.attr( { |
|||
window.clearInterval(pollTimer); |
|||
id: 'mw-selection-counter', |
|||
pollTimer = null; |
|||
hidden: 'hidden', |
|||
} |
|||
role: 'status', |
|||
'aria-live': 'polite', |
|||
'aria-atomic': 'true' |
|||
} ) |
|||
.addClass( 'mw-selection-counter' ) |
|||
.appendTo( document.body ); |
|||
} |
|||
document.addEventListener( 'selectionchange', scheduleUpdate, { passive: true } ); |
|||
function onSelectMove() { |
|||
document.addEventListener( 'pointerdown', function () { |
|||
if (!isSelecting) { |
|||
selecting = true; |
|||
return; |
|||
scheduleUpdate(); |
|||
} |
|||
}, true ); |
|||
scheduleUpdate(); |
|||
document.addEventListener( 'pointermove', function () { |
|||
} |
|||
if ( selecting ) { |
|||
scheduleUpdate(); |
|||
document.addEventListener('selectionchange', function () { |
|||
} |
|||
var text = getSelectionText(); |
|||
}, { passive: true, capture: true } ); |
|||
if (text) { |
|||
document.addEventListener( 'pointerup', function () { |
|||
lastText = text; |
|||
selecting = false; |
|||
lastTime = Date.now(); |
|||
scheduleUpdate(); |
|||
} |
|||
scheduleHide(); |
|||
scheduleUpdate(); |
|||
}, true ); |
|||
}); |
|||
document.addEventListener( 'keyup', function ( event ) { |
|||
if ( event.key === 'Escape' ) { |
|||
isSelecting = true; |
|||
hideCounter(); |
|||
}, true); |
|||
return; |
|||
document.addEventListener('mouseup', function () { |
|||
} |
|||
isSelecting = false; |
|||
scheduleUpdate(); |
|||
scheduleUpdateDelayed(); |
|||
} ); |
|||
window.addEventListener( 'blur', hideCounter ); |
|||
} ); |
|||
document.addEventListener('touchstart', function () { |
|||
} ); |
|||
isSelecting = true; |
|||
}() ); |
|||
}, { passive: true, capture: true }); |
|||
document.addEventListener('touchmove', onSelectMove, { passive: true, capture: true }); |
|||
document.addEventListener('touchend', function () { |
|||
isSelecting = false; |
|||
scheduleUpdateDelayed(); |
|||
}, { passive: true, capture: true }); |
|||
document.addEventListener('keyup', scheduleUpdate); |
|||
window.addEventListener('focus', startPolling); |
|||
window.addEventListener('blur', stopPolling); |
|||
document.addEventListener('visibilitychange', function () { |
|||
if (document.hidden) { |
|||
stopPolling(); |
|||
return; |
|||
} |
|||
startPolling(); |
|||
}); |
|||
startPolling(); |
|||
}); |
|||
}); |
|||
2026年7月19日 (日) 20:11的最新版本
/* MediaWiki Gadget: SelectionCounter */
( function () {
'use strict';
if ( window.SelectionCounterLoaded ) {
return;
}
window.SelectionCounterLoaded = true;
mw.loader.using( [ 'jquery', 'mediawiki.util' ] ).then( function () {
var $counter;
var rafId = 0;
var hideTimer = 0;
var lastRendered = '';
var lastShownAt = 0;
var selecting = false;
var canSegment = typeof Intl !== 'undefined' && typeof Intl.Segmenter === 'function';
var segmenter = canSegment ? new Intl.Segmenter( mw.config.get( 'wgUserLanguage' ) || 'zh-cn', {
granularity: 'grapheme'
} ) : null;
function getMessage( count ) {
var lang = ( mw.config.get( 'wgUserLanguage' ) || mw.config.get( 'wgContentLanguage' ) || 'zh-cn' ).toLowerCase();
return lang.indexOf( 'en' ) === 0 ? 'Selected ' + count + ' chars' : '已选 ' + count + ' 字';
}
function getSelectionText() {
var selection = window.getSelection && window.getSelection();
if ( !selection || selection.rangeCount === 0 || selection.isCollapsed ) {
return '';
}
return selection.toString();
}
function countText( text ) {
var compact = text.replace( /\s+/g, '' );
if ( !compact ) {
return 0;
}
if ( segmenter ) {
return Array.from( segmenter.segment( compact ) ).length;
}
return Array.from( compact ).length;
}
function hideCounter() {
lastRendered = '';
$counter.attr( 'hidden', 'hidden' ).text( '' );
}
function renderCounter( text ) {
var count = countText( text );
var rendered;
if ( count < 1 ) {
hideCounter();
return;
}
rendered = getMessage( count );
if ( rendered !== lastRendered ) {
$counter.text( rendered );
lastRendered = rendered;
}
lastShownAt = Date.now();
$counter.removeAttr( 'hidden' );
}
function updateCounter() {
var text;
rafId = 0;
text = getSelectionText();
if ( text ) {
renderCounter( text );
return;
}
if ( !selecting && Date.now() - lastShownAt > 800 ) {
hideCounter();
}
}
function scheduleUpdate() {
if ( rafId ) {
return;
}
rafId = window.requestAnimationFrame( updateCounter );
}
function scheduleHide() {
window.clearTimeout( hideTimer );
hideTimer = window.setTimeout( scheduleUpdate, 900 );
}
$( function () {
$counter = $( '#mw-selection-counter' );
if ( !$counter.length ) {
$counter = $( '<div>' )
.attr( {
id: 'mw-selection-counter',
hidden: 'hidden',
role: 'status',
'aria-live': 'polite',
'aria-atomic': 'true'
} )
.addClass( 'mw-selection-counter' )
.appendTo( document.body );
}
document.addEventListener( 'selectionchange', scheduleUpdate, { passive: true } );
document.addEventListener( 'pointerdown', function () {
selecting = true;
scheduleUpdate();
}, true );
document.addEventListener( 'pointermove', function () {
if ( selecting ) {
scheduleUpdate();
}
}, { passive: true, capture: true } );
document.addEventListener( 'pointerup', function () {
selecting = false;
scheduleUpdate();
scheduleHide();
}, true );
document.addEventListener( 'keyup', function ( event ) {
if ( event.key === 'Escape' ) {
hideCounter();
return;
}
scheduleUpdate();
} );
window.addEventListener( 'blur', hideCounter );
} );
} );
}() );