MediaWiki:Gadget-QuickEdit.js

/* _____________________________________________________________________________
 * |                                                                             |
 * |                    === WARNING: GLOBAL GADGET FILE ===                      |
 * |                  Changes to this page affect many users.                    |
 * | Please discuss changes on the talk page or on [[WP:WKT]] before editing.    |
 * |_____________________________________________________________________________|
 */
/** Quick Edit **/
// WARNING:
// This is NOT a drop-in update of the original QuickEdit code in enwiki.
// Do not copy/paste changes from the original implementation without adapting
// them to this version. The UI and underlying implementation are different,
// including the use of Parsoid Section DOM and Codex.
//
// Edit sections of a page without leaving the article
// Modernized with Parsoid Section DOM support
// UI is based on Codex (https://www.mediawiki.org/wiki/Codex)
// Original code [[en:w:User:BrandonXLF/QuickEdit]]
// By [[en:w:User:BrandonXLF]]
(function(){
varmobile=mw.config.get('skin')==='minerva',
apiSingleton,
titleRegexp=newRegExp(
mw.config.get('wgArticlePath').replace(/[.*+?^${}()|[\]\\]/g,'\\$&').replace(/\\\$1/,'([^?]+)')+
'|[?&]title=([^&#]*)'
);
functionapi(func,params){
if(!apiSingleton)apiSingleton=newmw.Api();
$.extend(params,{
errorformat:'html',
errorlang:mw.config.get('wgUserLanguage'),
errorsuselocal:true
});
returnapiSingleton[func](params).fail(function(_,data){
mw.notify(apiSingleton.getErrorMessage(data),{
type:'error',
tag:'quickedit'
});
});
}
functiongetPageInfo(title,sectionID){
returnapi('get',{
action:'query',
curtimestamp:1,
prop:'revisions',
indexpageids:1,
titles:title,
rvprop:['timestamp','content'],
rvslots:'main',
rvsection:sectionID
}).then(function(res){
varrev=res.query.pages[res.query.pageids[0]].revisions[0];
return{
start:res.curtimestamp,
base:rev.timestamp,
full:rev.slots.main['*']
};
});
}
functiongetPreviewCallback(editor){
editor.children('.preview').remove();
varprogress=$('<div>').addClass('cdx-progress-bar cdx-progress-bar--inline preview').attr({
role:'progressbar',
'aria-valuemin':'0',
'aria-valuemax':'100'
}).css({width:'auto',minWidth:'0',maxWidth:'none',margin:'8px 0'}).append(
$('<div>').addClass('cdx-progress-bar__bar')
);
progress.appendTo(editor);
returnfunction(html){
editor.children('.preview').remove();
$('<div>').html(html).css({
margin:'8px 0',
border:'1px solid #a2a9b1',
padding:'8px',
overflowX:'hidden'
}).addClass('preview').appendTo(editor);
};
}
functionshowCompare(editor,title,from,to){
mw.loader.load('mediawiki.diff.styles');
api('post',{
action:'compare',
fromslots:'main',
'fromtext-main':from,
fromtitle:title,
frompst:'true',
toslots:'main',
'totext-main':to,
totitle:title,
topst:'true'
}).then(function(r){
returnr.compare['*']?$('<table>').addClass('diff').append(
$('<colgroup>').append(
$('<col>').addClass('diff-marker'),
$('<col>').addClass('diff-content'),
$('<col>').addClass('diff-marker'),
$('<col>').addClass('diff-content')
)
).append(r.compare['*']):'Tidak ada perbedaan.';
}).then(getPreviewCallback(editor));
}
// Parts taken from EditPage::extractSectionTitle and Parser::stripSectionName
functiongetSectionSummary(text,sectionID){
if(sectionID==='0'||sectionID===0){
return'/* Top */ ';
}
varmatch=text.match(/^(=+)(.+)\1\s*(\n|$)/);
return!match?'':'/* '+match[2].trim()
// Strip internal link markup
.replace(/\[\[:?([^[|]+)\|([^[]+)\]\]/g,'$2')
.replace(/\[\[:?([^[]+)\|?\]\]/g,'$1')
// Strip external link markup
.replace(newRegExp('\\[(?:'+mw.config.get('wgUrlProtocols')+')([^ ]+?) ([^\\[]+)\\]','ig'),'$2')
// Remove wikitext quotes
.replace(/(''|'''|''''')(?!')/g,'')
// Strip HTML tags
.replace(/<[^>]+?>/g,'')+' */ ';
}
functionshowEditor(el){
varprogress=$('<div>').addClass('cdx-progress-bar cdx-progress-bar--inline').attr({
role:'progressbar','aria-valuemin':'0','aria-valuemax':'100'
}).css({width:'auto',minWidth:'0',maxWidth:'none',margin:'8px 0'}).append($('<div>').addClass('cdx-progress-bar__bar'));
varheading=el.parents('.mw-heading, :header').last(),
targetEl=el.siblings('.quickedit-target').last(),
titleMatch=targetEl.attr('href').match(titleRegexp),
title=decodeURIComponent(titleMatch[1]||titleMatch[2]),
sectionID=/[?&]v?e?section=T?-?(\d*)/.exec(targetEl.attr('href'))[1],
headingChanges=!!$('#mw-content-text .mw-parser-output .mw-heading').length;
varmatcher,inserter,partSection,fullSection;
varparsoidSection=heading.length?heading.closest('section[data-mw-section-id]'):$();
if(!parsoidSection.length&&!heading.closest('.mw-parser-output').length){
vararticleContent=$('#mw-content-text .mw-parser-output');
if(articleContent.children('section[data-mw-section-id="0"]').length){
parsoidSection=articleContent.children('section[data-mw-section-id="0"]');
}else{
matcher=function(selector){
varchild=articleContent.children(selector).first();
returnchild.length?child.prevAll():articleContent.children();
};
inserter=articleContent.prepend.bind(articleContent);
}
}
if(parsoidSection.length){
partSection=parsoidSection.children().not('section').not(heading);
fullSection=parsoidSection.children().not(heading);
varheadingInSection=heading.length&&
heading.closest('section[data-mw-section-id]')[0]===parsoidSection[0];
if(headingInSection){
inserter=heading.after.bind(heading);
}else{
inserter=parsoidSection.prepend.bind(parsoidSection);
}
}elseif(!inserter){
matcher=heading.nextUntil.bind(heading);
inserter=heading.after.bind(heading);
varlevel=parseInt(
heading.prop('tagName').replace(/\D/g,'')||
heading.find(':header').prop('tagName').replace(/\D/g,'')||
2
);
varlevelMatch=headingChanges?'.mw-heading1':'h1:has(*)';
for(vari=2;i<=level;i++){
levelMatch+=','+(
headingChanges
?'.mw-heading'+i
:'h'+i+':has(*)'
);
}
partSection=matcher(
(headingChanges?'.mw-heading':':header:has(*)')+
',section[data-mw-section-id]'
);
fullSection=matcher(levelMatch);
}
inserter(progress);
el.addClass('quickedit-loading');
$('.quickedit-hide').removeClass('quickedit-hide');
$('.quickedit-heading').removeClass('quickedit-heading');
$('#quickedit-editor').remove();
getPageInfo(title,sectionID).then(function(r){
varstart=r.start,
base=r.base,
full=r.full,
saving=false,
expanded=false,
remainderStart=full.match(/\n=+.+=+(?:\n|$)/),
part=remainderStart?full.substring(0,remainderStart.index):full,
remainder=remainderStart?full.substring(remainderStart.index):'',
editor;
vartextarea=$('<textarea>').addClass('cdx-text-area__textarea quickedit-textarea').val(part).css({
width:'100%',minHeight:'0',resize:'vertical',fontFamily:'monospace, monospace',boxSizing:'border-box',display:'block'
});
vartextareaMetrics=null,
resizeFrame=null;
functionautosizeTextarea(){
varel=textarea[0];
if(!textareaMetrics){
varstyle=getComputedStyle(el),
lineHeight=parseFloat(style.lineHeight),
padding=parseFloat(style.paddingTop)+parseFloat(style.paddingBottom);
textareaMetrics={
minHeight:lineHeight+padding,
maxHeight:lineHeight*20+padding
};
}
el.style.height='auto';
varmaxHeight=textareaMetrics.maxHeight,
height=Math.max(
textareaMetrics.minHeight,
Math.min(el.scrollHeight,maxHeight)
);
el.style.height=height+'px';
el.style.overflowY=el.scrollHeight>maxHeight?'auto':'hidden';
}
functionscheduleAutosizeTextarea(){
if(resizeFrame!==null)return;
resizeFrame=requestAnimationFrame(function(){
resizeFrame=null;
autosizeTextarea();
});
}
textarea.on('input change',scheduleAutosizeTextarea);
setTimeout(autosizeTextarea,0);
varsummary=$('<input>').attr({type:'text',placeholder:'Ringkasan'}).addClass('cdx-text-input__input').val(getSectionSummary(part,sectionID));
varminorId='qe-minor-'+Date.now();
varminor=$('<input>').attr({type:'checkbox',id:minorId}).addClass('cdx-checkbox__input');
varsaveBtn=$('<button>').addClass('cdx-button cdx-button--action-progressive cdx-button--weight-primary').text('Terbitkan').attr('title','Terbitkan perubahan Anda');
varpreviewBtn=$('<button>').addClass('cdx-button').text('Pratayang').attr('title','Pratayang perubahan Anda, harap gunakan ini sebelum menyimpan!');
varcompareBtn=$('<button>').addClass('cdx-button').text('Bandingkan').attr('title','Lihat perbedaan antara perubahan Anda dengan revisi sebelumnya');
varmoreBtn=$('<button>').addClass('cdx-button').attr('title','Sunting semua bagian (termasuk subbagian)').text('+');
varcancelBtn=$('<button>').addClass('cdx-button cdx-button--action-destructive').text('Batalkan').attr('title','Tutup jendela penyuntingan dan buang perubahan');
if(partSection)partSection.addClass('quickedit-hide');
heading.addClass('quickedit-heading');
el.removeClass('quickedit-loading');
progress.remove();
summary.on('keyup',function(e){
if(e.key==='Enter')saveBtn.trigger('click');
});
saveBtn.on('click',function(){
if(saving)return;
varfullText=textarea.val()+(expanded?'':remainder);
saving=true;
saveBtn.text('Menyimpan...').prop('disabled',true);
compareBtn.prop('disabled',true);
previewBtn.prop('disabled',true);
cancelBtn.prop('disabled',true);
moreBtn.prop('disabled',true);
api('postWithEditToken',{
action:'edit',
title:title,
section:sectionID,
summary:summary.val()+' (via [[Wikipedia:QuickEdit|QuickEdit]])',
text:fullText,
minor:minor.prop('checked')?true:undefined,
notminor:minor.prop('checked')?undefined:true,
starttimestamp:start,
basetimestamp:base
}).then(function(r){
api('get',{
action:'parse',
oldid:r.edit.newrevid,
prop:['text','categorieshtml']
}).then(function(r){
varcontentText=$('#mw-content-text'),
catLinks=$('#catlinks');
contentText.find('.mw-parser-output').replaceWith(r.parse.text['*']);
mw.hook('wikipage.content').fire(contentText);
catLinks.replaceWith(r.parse.categorieshtml['*']);
mw.hook('wikipage.categories').fire(catLinks);
saving=false;
});
},function(code){
if(code=='editconflict'){
showEditConflict(editor,title,sectionID,fullText).then(function(r){
start=r.start;
base=r.base;
textarea=r.textarea;
expanded=true;
});
}
compareBtn.prop('disabled',false);
previewBtn.prop('disabled',false);
cancelBtn.prop('disabled',false);
moreBtn.prop('disabled',expanded);
saving=false;
saveBtn.text('Terbitkan').prop('disabled',false);
});
});
previewBtn.on('click',function(){
api('post',{
action:'parse',
title:title,
prop:'text',
pst:'true',
disablelimitreport:'true',
disableeditsection:'true',
sectionpreview:'true',
disabletoc:'true',
text:textarea.val()
}).then(function(r){
returnr.parse.text['*']+'<div style="clear:both;"></div>';
}).then(getPreviewCallback(editor));
});
compareBtn.on('click',function(){
showCompare(editor,title,part+(expanded?remainder:''),textarea.val());
});
cancelBtn.on('click',function(){
editor.remove();
heading.removeClass('quickedit-heading');
if(fullSection)fullSection.removeClass('quickedit-hide');
if(partSection)partSection.removeClass('quickedit-hide');
});
moreBtn.on('click',function(){
expanded=true;
textarea.val(textarea.val()+remainder).trigger('input');
if(fullSection)fullSection.addClass('quickedit-hide');
moreBtn.prop('disabled',true);
});
varbuttonList=[saveBtn,previewBtn,compareBtn];
if(part!=full)buttonList.push(moreBtn);
buttonList.push(cancelBtn);
editor=$('<div id="quickedit-editor">').css({
overflowX:'hidden'
}).append(
$('<div>').css({
backgroundColor:'#eaecf0',
borderBottom:'1px solid #a2a9b1',
marginBottom:'8px'
}).append(
textarea,
$('<div>').addClass('quickedit-summary-row').css({
display:'flex',
alignItems:'center',
flexWrap:'wrap',
border:'1px solid #a2a9b1',
borderWidth:'0 1px',
borderTop:'none',
padding:'8px',
gap:'8px'
}).append(
$('<div>').css({
whiteSpace:'nowrap',
fontWeight:'bold',
flex:'0 0 auto'
}).html('Ringkasan:'),
$('<div>').addClass('cdx-text-input quickedit-summary-input').css({
flex:'1 1 160px',
minWidth:'0'
}).append(
summary.css({
width:'100%',
boxSizing:'border-box'
})
),
$('<div>').addClass('cdx-checkbox quickedit-minor-checkbox').css({
display:'flex',
alignItems:'center',
whiteSpace:'nowrap',
flex:'0 0 auto',
marginLeft:'4px'
}).append(
minor,
$('<span>').addClass('cdx-checkbox__icon'),
$('<label>').attr('for',minorId).addClass('cdx-checkbox__label').html('Suntingan&nbsp;kecil?')
)
),
$('<div>').css({
display:'flex',
flexWrap:'wrap',
gap:'8px',
border:'1px solid #a2a9b1',
borderWidth:'0 1px',
padding:'8px',
boxSizing:'border-box',
alignItems:'center'
}).append(
buttonList.map(function(button){
returnbutton.css({
flex:'0 0 auto',
whiteSpace:'nowrap'
});
})
),
title!==mw.config.get('wgPageName')?$('<div>').css({
border:'1px solid #a2a9b1',
borderWidth:'0 1px',
padding:'0px 8px 8px'
}).append(
'Menyunting halaman: ',
$('<a>').attr('href',mw.config.get('wgArticlePath').replace('$1',title)).css({
fontWeight:'bold'
}).text(title.replace(/_/g,' '))
):undefined
)
);
if(mobile)editor.addClass('mf-collapsible-content');
inserter(editor);
},function(){
el.removeClass('quickedit-loading');
progress.remove();
});
}
functionshowEditConflict(editor,title,sectionID,text){
returngetPageInfo(title,sectionID).then(function(r){
vartextarea1=$('<textarea>').addClass('cdx-text-area__textarea quickedit-textarea').val(part).css({
width:'100%',minHeight:'180px',resize:'vertical',fontFamily:'monospace, monospace',boxSizing:'border-box',display:'block'
});
vartextarea2=$('<textarea>').addClass('cdx-text-area__textarea quickedit-textarea').val(part).css({
width:'100%',minHeight:'180px',resize:'vertical',fontFamily:'monospace, monospace',boxSizing:'border-box',display:'block'
});
functionautosize(textarea){
varel=textarea[0];
el.style.height='auto';
varstyle=getComputedStyle(el);
varlineHeight=parseFloat(style.lineHeight);
varpadding=parseFloat(style.paddingTop)+parseFloat(style.paddingBottom);
varmaxHeight=(lineHeight*20)+padding;
el.style.height=Math.max(300,Math.min(el.scrollHeight,maxHeight))+'px';
el.style.overflowY=el.scrollHeight>maxHeight?'auto':'hidden';
}
functionsyncSize(){
autosize(textarea1);
autosize(textarea2);
varheight=Math.max(
textarea1.outerHeight(),
textarea2.outerHeight()
);
textarea1.height(height);
textarea2.height(height);
}
editor.find('> :first-child > :first-child').remove();
$('<table>').css({
width:'100%',
border:'1px solid #a2a9b1',
borderBottom:'none',
borderSpacing:'0',
margin:'0 !important'
}).append(
$('<tr>').append(
$('<th>').css({
width:'50%',
paddingTop:'4px'
}).text('Versi mereka (untuk disimpan)'),
$('<th>').css({
width:'50%',
paddingTop:'4px'
}).text('Versi Anda')
),
$('<tr>').append(
$('<td>').css({
width:'50%',
padding:'4px 4px 0 8px'
}).append(
$('<div>').addClass('cdx-text-area').append(
textarea1
)
),
$('<td>').css({
width:'50%',
padding:'4px 8px 0 4px'
}).append(
$('<div>').addClass('cdx-text-area').append(
textarea2
)
)
)
).prependTo(editor.find('> :first-child'));
textarea1.on('input change',function(){
syncSize();
});
textarea2.on('input change',function(){
syncSize();
});
setTimeout(syncSize,0);
showCompare(editor,title,text,r.full);
r.textarea=textarea1;
returnr;
});
}
functionclickHandler(e){
varel=$(e.target);
if(!el.hasClass('quickedit-editlink')||el.hasClass('quickedit-loading'))return;
e.preventDefault();
showEditor(el);
}
functionaddLinksToChildren(element){
element.find('.mw-editsection').each(function(){
vareditSection=$(this);
if(editSection.find('.quickedit-section').length)return;
$('[href*="section="]',this).last().after(
mobile?'':'<span class="quickedit-section mw-editsection-divider"> | </span>',
$('<a>')
.html(mobile?'&nbsp;S':'sunting cepat')
.addClass('quickedit-section quickedit-editlink')
.attr('href','#')
).addClass('quickedit-target');
});
}
$(function(){
varbody=$(document.body);
body.on('click',clickHandler);
addLinksToChildren(body);
mw.hook('wikipage.content').add(addLinksToChildren);
});
mw.loader.addStyleTag(
'.skin-minerva .mw-editsection { white-space: nowrap; }'+
'.skin-minerva .content .collapsible-heading .quickedit-section { visibility: hidden; }'+
'.skin-minerva .content .collapsible-heading.open-block .quickedit-section { visibility: visible; }'+
'.skin-minerva .quickedit-editlink { margin-right: 1rem; }'+
'.quickedit-hide { display: none !important; }'+
'.quickedit-loading, .quickedit-heading { color: #777; }'+
'.skin-minerva #quickedit-editor .quickedit-summary-row { width: 100%; box-sizing: border-box; }'+
'.skin-minerva #quickedit-editor .quickedit-summary-input { min-width: 0; }'+
'.skin-minerva #quickedit-editor .quickedit-minor-checkbox { margin-left: 0; }'
);
})();