MediaWiki:Gadget-tikuInlineEditModule.js

editUrl = 'https://www.medforest.cn/medf/api.php'
editOrigin = 'https://www.medforest.cn'
inlineEditorPageText = {}

function editThis(id) {
	$('#'+id).fadeOut('fast')
    var timuList = gDomTimuList()
	console.log(timuList)
	var order = timuList.order
	var timu = timuList.timu
    var dataJSON = timu[id].dataJSON
    var inputBoxes = loadPreview(dataJSON)
    
    var form = renderPreviewInputBoxes(inputBoxes, id)
    render(id, dataJSON.type, form,'#'+id,true)
    setTimeout(function(){
    $("html,body").animate({scrollTop:$("#edit-"+id).position().top},500)	
    },250)
    
}

function typeOfObj(object){
	return Object.prototype.toString.call(object);
}

function loadPreview(dataJSON){
    var timuJSON = dataJSON
    console.log(timuJSON)
    var order = ['source', 'pos', 'inputbox', 'sourceRange', 'title', 'choices', 'answer', 'explain', 'info']
    var chineseName = {
        'source':'编号'
        , 'pos':'挖空点符号'
        , 'inputbox':'是否显示输入框'
        , 'sourceRange':'子题目数'
        , 'title':'题目'
        , 'choices':'选项'
        , 'answer':'答案'
        , 'explain':'解释'
        , 'info':'信息'
    }
    var sametypes = [ 'pos', 'inputbox', 'sourceRange', 'info']
    var notsametypes = ['title', 'titlesList', 'optionsDic','optionsList', 'answer', 'answersList', 'explain', 'explainsList']
    var inputboxes = {
        type:timuJSON.type
        ,typeHTML:'<input style="display:none" name="edit-type" value="'+timuJSON.type+'">'
        ,source: '<p class="source">'+timuJSON.type+'型题 '+timuJSON.source+'</p><input style="display:none" name="edit-source" value="'+timuJSON.source+'">'
        ,title:[]
        ,choices:[]
        , answer:[]
        , explain:[]
    }
    for(var i=0;i<sametypes.length;i++){
        if(timuJSON[sametypes[i]]===undefined){
            continue
        }else if(sametypes[i]==='info'){
            inputboxes[sametypes[i]] = textareaGroup(chineseName[sametypes[i]],timuJSON[sametypes[i]],  'edit-'+sametypes[i])
        }else{
            inputboxes[sametypes[i]] = inputGroup(chineseName[sametypes[i]],timuJSON[sametypes[i]],  'edit-'+sametypes[i])
        }
        
    }

    //处理题目
    var isTitleList = typeOfObj(timuJSON.title)==='[object Array]' ? true:false
    var titles = !isTitleList ? [timuJSON.title] :  timuJSON.title
    console.log(titles )
    inputboxes.titlesNum = titles.length
    for(var i=0;i<titles.length;i++){
        inputboxes.title.push(textareaGroup(chineseName['title'],titles[i], 'edit-title-'+i))
    }

    //处理答案
    var isAnswerList = typeOfObj(timuJSON.answer)==='[object Array]' ? true:false
    var answers = !isAnswerList ? [timuJSON.answer] :  timuJSON.answer
    console.log(answers)
    inputboxes.answersNum = answers.length
    for(var i=0;i<inputboxes.titlesNum;i++){//此处以题目数为准，有几个题目生成几个答案和解释框
    	var answerText = answers[i]===undefined?'':answers[i]
        inputboxes.answer.push(inputGroup(chineseName['answer'],answerText, 'edit-answer-'+i))
    }

    //处理解释
    var isExplainList = typeOfObj(timuJSON.explain)==='[object Array]' ? true:false
    var explains = !isExplainList ? [timuJSON.explain] :  timuJSON.explain
    console.log(explains)
    inputboxes.explainsNum = explains.length
    for(var i=0;i<inputboxes.titlesNum;i++){//此处以题目数为准，有几个题目生成几个答案和解释框
    	var explainText = explains[i]===undefined?'':explains[i]
        inputboxes.explain.push(textareaGroup(chineseName['explain'],explainText, 'edit-explain-'+i))
    }

    //处理选项
    var isOptionList = typeOfObj(timuJSON.choices)==='[object Array]' ? true:false
    var options = !isOptionList ? [timuJSON.choices] :  timuJSON.choices
    console.log(options)
    for(var i=0;i<options.length;i++){
        var dic = options[i]
        for(var k in dic){
            options[i][k] = inputGroup(chineseName['choices']+' '+k,options[i][k], 'edit-choice-'+i+'-'+k)
        }
    }
    //检测是否有选项，如果没有则不加
    if(options.length>0){
    	inputboxes.choices = options
    }
    
    console.log(inputboxes)

    return inputboxes
}

function inputGroup(label, value, name, id, classes , placeholder){
	id = id === undefined ?'':id
	classes = classes ===undefined ?'':classes
	placeholder = placeholder===undefined ? '':placeholder
    return $('<div class="mb-1">'+
    '<div class="input-group">'+
    '<div class="input-group-prepend">'+
    ' <div class="input-group-text"><b>'+label+'</b></div>'+
    '</div>'+
    '<input type="text" class="m-0 form-control '+classes+'" id="'+id+'" name="'+name+'" style="height:25px" placeholder="'+ placeholder +'" value="'+value+'">'+
    '</div>'+
    '</div>')
}
function textareaGroup(label, value, name, id, classes){
	id = id === undefined ?'':id
	classes = classes ===undefined ?'':classes
    return $('<div class="mb-1"><div class="input-group">'+
    '<div class="input-group-prepend">'+
      '<span class="input-group-text"><b>'+label+'</b></span>'+
    '</div>'+
        '<textarea class="form-control" '+classes+'" id="'+id+'" name="'+name+'">'+value+'</textarea>'+
    '</div></div>')
}
function renderPreviewInputBoxes(inputBoxes,id){
	console.log(id,inputBoxes)
    var form = $('<form id="edit-'+id+'" name="edit-'+id+'"><input name="edit-titleCount" style="display:none" value="'+inputBoxes.titlesNum+'">'+
    '<br>正在编辑：</form>')
    console.log(form)
    var sametypes = ['typeHTML','source','pos', 'inputbox', 'sourceRange', 'info']
    var differenttypes = ['title', 'choices', 'answer', 'explain']
    for(var i=0;i<sametypes.length;i++){
        form.append(inputBoxes[sametypes[i]])
    }
    if('B,C'.includes(inputBoxes.type)){
        for(var i in inputBoxes.choices){
            console.log(i)
            for(k in inputBoxes.choices[i]){
              form.append(inputBoxes.choices[i][k])  
            }
        }
    }
    for(var i=0;i<inputBoxes.titlesNum;i++){
        var card = 
            $('<div class="card mt-2">'+
                '<div class="card-body p-2">'+
                '</div>'+
            '</div>')
		if(inputBoxes.titlesNum>1){
			card.children('.card-body').append('<h6 class="card-title m-1">子题目-'+(i+1)+'</h5>')
		}
        card.children('.card-body').append(inputBoxes.title[i])
        if('A,A2,A3,X'.includes(inputBoxes.type)){
            for(k in inputBoxes.choices[i]){
                card.children('.card-body').append(inputBoxes.choices[i][k])  
            }
        }
        card.children('.card-body').append(inputBoxes.answer[i])
        card.children('.card-body').append(inputBoxes.explain[i])
        form.append(card)
    }
    var submitBtn = new OO.ui.ButtonWidget( {
	label: '提交',
	flags: [
		'primary',
		'progressive'
			]
		} )
	var cancelBtn = new OO.ui.ButtonWidget( {
	label: '取消',
	flags: [
		'destructive'
			]
		} )
	submitBtn.$element.bind('click',function(){confirmEditAndCheckDifference(id)})
	cancelBtn.$element.bind('click',function(){cancelEdit(id)})
	var btns = $('<div class="m-1"></div>')
	btns.append(submitBtn.$element, cancelBtn.$element)
	form.append(btns,'<hr>')
    console.log(form)
    return form
}
function cancelEdit(id){
	$('#'+id).fadeIn('fast')
	$('#edit-'+id).fadeOut('fast')
	setTimeout(function(){
    	$("html,body").animate({scrollTop:$("#"+id).position().top},500)	
    },250)
}
function confirmEditAndCheckDifference(id){
	var formatedData = formatEditText(id)
	var oldData = gDomTimuList().timu[id].dataJSON
	var compareChanges = findChangedItem(oldData,formatedData )
	console.log(formatedData, oldData, compareChanges)
	var afterEditWikiText = JSONtoTemplate(formatedData)
	console.log(afterEditWikiText)
	var namespace = $('.mw-page-title-namespace').text()===''?'':$('.mw-page-title-namespace').text()+':'
	var pageName = namespace+$('.mw-page-title-main').text()
	//设置弹出框按钮功能
	var processDialog = newProcessDialog()
	var MyProcessDialog = processDialog.MyProcessDialog
	$('.oo-ui-windowManager').remove()
	var windowManager = new OO.ui.WindowManager();
	$( document.body ).append( windowManager.$element );
	
	MyProcessDialog.prototype.getActionProcess = function ( action ) {
	    var dialog = this;
	    if( action === 'submit'){
	    	submitChange(pageName,afterEditWikiText)
	    }
	    if ( action ) {
	        return new OO.ui.Process( function () {
	            dialog.close( { action: action } );
	        } );
	    }
	    return MyProcessDialog.super.prototype.getActionProcess.call( this, action );
	};
	openWindows(MyProcessDialog,windowManager)
	
	//获取页面内容

	getOriginalText(pageName,formatedData)
	$('#newWikiText').html('<pre>'+afterEditWikiText+'</pre>')
}
function getOriginalText(pageTitle, timuData, editedText) {
	var api = new mw.Api();
	api.get( {
        "action": "query",
        "format": "json",
        "prop": "revisions",
        "titles": pageTitle,
        "utf8": 1,
        "rvprop": "content",
        "rvlimit": 1,
        "rvslots": "*",
        "rvdir": "older"
    } ).done( function ( data ) {
    	var pages = data.query.pages
	    console.log( data );
	    if(pages[-1]===undefined){
	    	var wikitext = ''
	    	for(var i in pages){wikitext = pages[i].revisions[0].slots.main['*']}
	    	console.log(wikitext)
	    	var regMatchInner = new RegExp('(?<=\\{\\{' + timuData.type + '型题\\n\\|source=' + timuData.source + '\\n)[^}}]*(?=\\}\\}?)', 'g')
		    var regMatchFull = new RegExp('(\\{\\{' + timuData.type + '型题\\n\\|source=' + timuData.source + '\\n)[^}}]*(\\}\\})', 'g')
		    
		    console.log(regMatchInner)
		    var inner = wikitext.match(regMatchInner)
		    sInnerMatchList(inner)
		    console.log(inner)
			var options = $('<div></div>')
			if(inner.length>0){
				for(var i=0;i<inner.length;i++){
					if(i===0){
						options.append($('<label style="display: flex;"><input checked type="radio" style="margin-right:5px" name="multiMatchInner" value="'+i+'"><pre>'+inner[i]+'</pre></label>'))
					}else{
						options.append($('<label style="display: flex;"><input type="radio" style="margin-right:5px" name="multiMatchInner" value="'+i+'"><pre>'+inner[i]+'</pre></label>'))
					}
				}
			}
			
		    $('#oldWikiText').html(options)
	    }
	    
	} );
    
}
function submitChange(pageTitle,newText){
	var selectedOldText = gInnerMatchList()[$('input:radio[name="multiMatchInner"]:checked').val()]
	console.log(selectedOldText)
	new mw.Api().edit(
    pageTitle,
    function ( revision ) {
        return {
            text: revision.content.replace( selectedOldText, newText ),
            summary: newText+'替换'+selectedOldText,
            tags:"tiku-inline-editor"
	        };
	    }
	)
	.then( function () {
		alertDialog('成功',"编辑成功",'三秒后将自动刷新页面',false)
		setTimeout(function(){location.reload()},3000)
	    console.log( 'Saved!' );
	} );
}
function findChangedItem(oldObj, newObj ){
	var lenOld = dicLen(oldObj)
	var lenNew = dicLen(newObj)
	var result = []
	for(var i in oldObj){
		if(newObj[i] === undefined){
			result.push({key:i,status:'deleted'})
		}
		if(oldObj[i]!==newObj[i]){
			result.push({key:i,status:'changed'})
		}
	}
	for(var i in newObj){
		if(oldObj[i] === undefined){
			result.push({key:i,status:'new'})
		}
	}
	return result
}
function newProcessDialog(){
	// Example: Creating and opening a process dialog window.
	MyProcessDialog = function ( config ) {
	    MyProcessDialog.super.call( this, config );
	}
	OO.inheritClass( MyProcessDialog, OO.ui.ProcessDialog );
	
	MyProcessDialog.static.name = 'myProcessDialog';
	MyProcessDialog.static.title = '上传前检查';
	MyProcessDialog.static.actions = [
	    { action: 'submit', label: '确认提交', flags: [ 'primary', 'progressive' ] },
	    { label: '返回', flags: 'safe' }
	];
	MyProcessDialog.static.size='full'
	
	MyProcessDialog.prototype.initialize = function () {
	    MyProcessDialog.super.prototype.initialize.apply( this, arguments );
	    this.content = new OO.ui.PanelLayout( { padded: true, expanded: false } );
	    this.content.$element.append( '<div id="process-header"></div><div id="process-content"><h3>编辑前的文本(如有多个可能是编号相同，请选择与本题相应文本)</h3><form id="oldWikiText"></form><h3>编辑后</h3><div id="newWikiText"></div></div><div id="process-append"></div>' );
	    this.$body.append( this.content.$element );
	};

	return {MyProcessDialog:MyProcessDialog}
}
function openWindows(MyProcessDialog,windowManager){
	var dialog = new MyProcessDialog();
	windowManager.addWindows( [ dialog ] );
	windowManager.openWindow( dialog );
	return windowManager
}
function formatEditText(id) {
	var formData = formToJSON($('#edit-'+id),true)
	var titleCount = formData['edit-titleCount']*1
	console.log(titleCount,formData)
	var sametypes = [ 'type','source','pos', 'inputbox', 'sourceRange', 'info']
	
	var result = {
		titlesList:[],
		answersList:[],
		explainsList:[],
	}
	for(var i=0;i<sametypes.length;i++){
		if(formData['edit-'+sametypes[i]]!==undefined){
			result[sametypes[i]] = formData['edit-'+sametypes[i]]
		}
	}
	
	//处理title,answers,explain
	for(var i=0;i<titleCount;i++){
		result.titlesList.push(formData['edit-title-'+i])
		result.answersList.push(formData['edit-answer-'+i])
		result.explainsList.push(formData['edit-explain-'+i])
	}
	result.title = arrayToString(result.titlesList, false)
	result.answer = arrayToString(result.answersList, false)
	result.explain = arrayToString(result.explainsList, false)
	
	//处理选项
	console.log(getItemByPrefix(formData,'edit-choice-',true))
	if(dicLen(getItemByPrefix(formData,'edit-choice-',true))>0){
		result.choicesDicList=[],
		result.choicesTextList=[],
		result.choices=''
		for(var i=0;i<titleCount;i++){
			var optionsRelatedToThis = getItemByPrefix(formData,'edit-choice-'+i+'-',true)
			result.choicesDicList.push(optionsRelatedToThis)
			console.log(formData.type)
			if(formData['edit-type']==='A3'){
				result.choicesTextList.push('{'+JSON.stringify(optionsRelatedToThis).match(RegExp(/(?<=\{).+(?=\})/))[0]+'}')
			}else{
				console.log(JSON.stringify(optionsRelatedToThis))
				result.choicesTextList.push(JSON.stringify(optionsRelatedToThis).match(RegExp(/(?<=\{).+(?=\})/))[0])
			}
	
		}
	result.choices =  arrayToString(result.choicesTextList,false)
	}
	
	console.log(result)
	return result
}
function getItemByPrefix(obj, prefix, removePrefix){
	var result = {}
	for(var key in obj){
		if(key.includes(prefix)){
			if(removePrefix){
				result[key.replace(prefix,'')] = obj[key]
			}else{
				result[key] = obj[key]
			}
		}
	}
	return result
}
function arrayToString(array,needQuote){
	needQuote = needQuote===undefined?'':needQuote
  if(needQuote){
    return '"' +  array.join('","') + '"'
  }
  return array.join(',')
}



function dicValueToList(obj) {
    var result = []
    for (var i in obj) {
        result.push(obj[i])
    }
    return result
}

function formToJSON (selector, decode) {
  var result = {}
  var data
  if (typeof selector === 'object') {
    data = selector.serialize()
  } else {
    data = $(selector).serialize()
  }

  var dataSplitted = data.split('&')
  for (var i = 0; i < dataSplitted.length; i++) {
    var value = dataSplitted[i].split('=')[1]
    if (decode === true) {
      value = decodeURIComponent(value)
    }
    result[dataSplitted[i].split('=')[0]] = value
  }
  return result
}

function JSONtoTemplate(json, templateName) {
    var order = ['pos', 'inputbox', 'sourceRange', 'title', 'choices', 'answer', 'explain', 'info']
    // var result = '{{'+templateName +'\n'
    var result = ''
    for (var i = 0; i < order.length; i++) {
        if (json[order[i]] !== undefined) {
            result += '|' + order[i] + '=' + json[order[i]].replace('\n') + '\n'
        }
    }
    // result += '}}\n\n'
    return result
}

function alertDialog(title, message, btnLabel, disabled){
    var messageDialog = new OO.ui.MessageDialog();
    var windowManager = new OO.ui.WindowManager();
    $( 'body' ).append( windowManager.$element );
    windowManager.addWindows( [ messageDialog ] );
    windowManager.openWindow( messageDialog, {
        title:title,
        message: message,
        actions: [
            {
            action: 'accept',
            label:  btnLabel,
            flags: 'primary',
            disabled: disabled,
            }
        ]
        });
    return windowManager
}


function sInnerMatchList(obj){
	sessionStorage.setItem("edit-innerMatchList", JSON.stringify(obj));
}
function gInnerMatchList(){
	return JSON.parse(sessionStorage.getItem("edit-innerMatchList"));
}