MediaWiki:Gadget-Gallery.js
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/**
* Gallery gadget — Instagram-style image gallery with drag-and-drop upload.
* Powers the full 图库 page and the homepage mini-widget.
*/
( function () {
'use strict';
var CAT = 'Category:图库';
var PAGE_NAME = '图库';
var api = new mw.Api();
/* ── Fetch images from the 图库 category ─────────────────────── */
function fetchImages( limit, cb ) {
api.get( {
action: 'query',
generator: 'categorymembers',
gcmtitle: CAT, gcmtype: 'file',
gcmlimit: limit, gcmsort: 'timestamp', gcmdir: 'descending',
prop: 'imageinfo',
iiprop: 'url|dimensions|timestamp',
iiurlwidth: 400,
format: 'json'
} ).done( function ( data ) {
if ( !data.query || !data.query.pages ) { cb( [] ); return; }
var pages = Object.values( data.query.pages ).filter( function ( p ) {
return p.imageinfo && p.imageinfo[ 0 ];
} );
pages.sort( function ( a, b ) {
return b.imageinfo[ 0 ].timestamp.localeCompare( a.imageinfo[ 0 ].timestamp );
} );
cb( pages );
} ).fail( function () { cb( [] ); } );
}
/* ── Build one grid item ────────────────────────────────────────*/
function makeItem( page, cls ) {
var info = page.imageinfo[ 0 ];
var thumb = info.thumburl || info.url;
var title = page.title;
var href = mw.util.getUrl( title );
var a = document.createElement( 'a' );
a.href = href;
a.className = cls + ' image';
a.title = title.replace( /^(File|文件):/, '' );
var img = document.createElement( 'img' );
img.src = thumb;
img.alt = a.title;
img.loading = 'lazy';
a.appendChild( img );
return a;
}
/* ── Upload a single file, auto-renaming on conflict ────────────
* Strategy: try original name → on exists/duplicate warning,
* insert "_N" before the extension and retry (up to 99 times).
* ─────────────────────────────────────────────────────────────── */
function uploadOne( file, token, attempt ) {
attempt = attempt || 0;
/* Build filename with optional suffix */
var filename;
if ( attempt === 0 ) {
filename = file.name;
} else {
var m = file.name.match( /^(.*?)(\.[^.]+)?$/ );
var base = m[ 1 ] || file.name;
var ext = m[ 2 ] || '';
filename = base + '_' + attempt + ext;
}
if ( attempt > 99 ) {
return Promise.resolve( { ok: false, filename: filename, error: '重命名次数超限' } );
}
var fd = new FormData();
fd.append( 'action', 'upload' );
fd.append( 'format', 'json' );
fd.append( 'filename', filename );
fd.append( 'file', file );
fd.append( 'token', token );
/* No ignorewarnings — let MediaWiki tell us about conflicts */
fd.append( 'text', '[[Category:图库]]\n上传自图库。' );
fd.append( 'comment', '图库上传' );
return fetch( mw.config.get( 'wgScriptPath' ) + '/api.php', {
method: 'POST', body: fd, credentials: 'same-origin'
} )
.then( function ( r ) { return r.json(); } )
.then( function ( res ) {
/* Success */
if ( res.upload && res.upload.result === 'Success' ) {
return { ok: true, filename: filename };
}
/* Conflict warnings → retry with next suffix */
var w = res.upload && res.upload.warnings;
if ( w && ( w.exists || w[ 'page-exists' ] || w.duplicate || w.badfilename ) ) {
return uploadOne( file, token, attempt + 1 );
}
/* Any other error */
var msg = ( res.error && res.error.info ) ||
( w && JSON.stringify( w ) ) || '未知错误';
return { ok: false, filename: filename, error: msg };
} )
.catch( function () {
return { ok: false, filename: filename, error: '网络错误' };
} );
}
/* ════════════════════════════════════════════════════════════════
FULL GALLERY PAGE
════════════════════════════════════════════════════════════════ */
function initFullGallery() {
var root = document.getElementById( 'mw-gallery-root' );
if ( !root ) { return; }
var groups = mw.config.get( 'wgUserGroups' ) || [];
var canUpload = groups.indexOf( 'user' ) !== -1 || groups.indexOf( 'sysop' ) !== -1;
root.innerHTML =
( canUpload
? '<div id="gal-drop">' +
' <div class="gal-drop-inner">' +
' <span class="gal-drop-icon">📷</span>' +
' <p>将图片拖放至此上传（支持同时拖入多张）</p>' +
' <p class="gal-drop-sub">或 <label class="gal-browse">点击选择文件（可多选）' +
' <input type="file" id="gal-file-input" multiple accept="image/*" style="display:none">' +
' </label></p>' +
' </div>' +
' <div id="gal-status"></div>' +
'</div>'
: '' ) +
'<div id="gal-grid" class="gal-grid"></div>';
var grid = document.getElementById( 'gal-grid' );
var status = document.getElementById( 'gal-status' );
function reload() {
grid.innerHTML = '<div class="gal-loading">加载中…</div>';
fetchImages( 200, function ( pages ) {
grid.innerHTML = '';
if ( !pages.length ) {
grid.innerHTML = '<div class="gal-empty">还没有图片，快来上传第一张吧！</div>';
return;
}
pages.forEach( function ( p ) { grid.appendChild( makeItem( p, 'gal-item' ) ); } );
} );
}
reload();
if ( !canUpload ) { return; }
var drop = document.getElementById( 'gal-drop' );
var input = document.getElementById( 'gal-file-input' );
drop.addEventListener( 'dragover', function ( e ) { e.preventDefault(); drop.classList.add( 'gal-dragover' ); } );
drop.addEventListener( 'dragleave', function () { drop.classList.remove( 'gal-dragover' ); } );
drop.addEventListener( 'drop', function ( e ) { e.preventDefault(); drop.classList.remove( 'gal-dragover' ); uploadFiles( e.dataTransfer.files ); } );
input.addEventListener( 'change', function () { uploadFiles( input.files ); input.value = ''; } );
function uploadFiles( fileList ) {
var files = Array.from( fileList );
var total = files.length, done = 0, renamed = [];
status.innerHTML = '<span class="gal-progress">上传中 0/' + total + '…</span>';
api.getToken( 'csrf' ).done( function ( token ) {
/* Upload sequentially to avoid token races */
files.reduce( function ( chain, file ) {
return chain.then( function () {
return uploadOne( file, token, 0 ).then( function ( res ) {
done++;
if ( res.ok && res.filename !== file.name ) {
renamed.push( file.name + ' → ' + res.filename );
}
var progress = '上传中 ' + done + '/' + total + '…';
if ( renamed.length ) {
progress += '<br><span class="gal-rename-note">已自动重命名：' +
renamed.join( '，' ) + '</span>';
}
if ( !res.ok ) {
progress += '<br><span class="gal-err">' + res.filename + ' 失败：' + res.error + '</span>';
}
status.innerHTML = '<span class="gal-progress">' + progress + '</span>';
if ( done === total ) {
var summary = '✓ 全部上传完成！';
if ( renamed.length ) {
summary += '<br><span class="gal-rename-note">以下文件因重名已自动重命名：<br>' +
renamed.join( '<br>' ) + '</span>';
}
status.innerHTML = '<span class="gal-ok">' + summary + '</span>';
reload();
}
} );
} );
}, Promise.resolve() );
} );
}
}
/* ════════════════════════════════════════════════════════════════
HOMEPAGE MINI WIDGET
════════════════════════════════════════════════════════════════ */
function initWidget() {
var root = document.getElementById( 'mw-gallery-widget' );
if ( !root ) { return; }
root.innerHTML = '<div class="gal-widget-grid"></div>' +
'<a href="' + mw.util.getUrl( PAGE_NAME ) + '" class="gal-widget-more">查看全部 →</a>';
var grid = root.querySelector( '.gal-widget-grid' );
fetchImages( 8, function ( pages ) {
if ( !pages.length ) {
root.innerHTML = '<p class="gal-widget-empty">图库暂无图片</p>' +
'<a href="' + mw.util.getUrl( PAGE_NAME ) + '">前往图库上传 →</a>';
return;
}
pages.slice( 0, 8 ).forEach( function ( p ) {
grid.appendChild( makeItem( p, 'gal-widget-item' ) );
} );
} );
}
$( function () {
if ( mw.config.get( 'wgPageName' ) === PAGE_NAME ) { initFullGallery(); }
initWidget();
} );
}() );