MediaWiki:Common.js
Uit Dorpsbelang Den Hout
Opmerking: nadat u de wijzigingen hebt opgeslagen is het wellicht nodig uw browsercache te legen.
- Firefox / Safari: houd Shift ingedrukt terwijl u op Vernieuwen klikt of druk op Ctrl-F5 of Ctrl-R (⌘-Shift-R op een Mac)
- Google Chrome: druk op Ctrl-Shift-R (⌘-Shift-R op een Mac)
- Internet Explorer: houd Ctrl ingedrukt terwijl u op Vernieuwen klikt of druk op Ctrl-F5
- Opera: ga naar Menu → Instellingen (Opera → Voorkeuren op een Mac) en daarna naar Privacy & beveiliging → Browsegegevens wissen... → Tijdelijk opgeslagen afbeeldingen en bestanden.
// JavaScript die hier wordt geplaatst heeft invloed op alle pagina's voor alle gebruikers <script>
function removeFile(el, file){
var message = confirm("Weet je zeker dat je dit bestand wilt verwijderen?")
if(message == true){
var params = {
action: 'delete',
title: file,
format: 'json'
},
api = new mw.Api();
api.postWithToken( 'csrf', params ).done( function ( data ) {
console.log( data );
el.closest('.upload-group').remove();
} );
}
}
function postBericht(el, template, mode){
var titel = "";
var domein = "";
var parameters = "";
var multiparameters = {};
var inputs = el.closest('form').querySelectorAll('textarea, input:not([name="mwreturn"] ):not([name="mwdb"] ):not([name="mwtoken"] ):not([type="file"]):not([name="mwaction"]):not([name="exclude"])'), i;
for(i = 0; i < inputs.length; ++i){
if(inputs[i].name == "Titel"){titel = inputs[i].value};
if(inputs[i].name == "Domein"){domein = inputs[i].value};
if(inputs[i].type == "radio"){
if(inputs[i].checked){
parameters += '|'+inputs[i].name+'='+inputs[i].value;
}
}else{
if(inputs[i].name.includes("[]")){
if(!multiparameters[inputs[i].name.replace('[]', '')]){
multiparameters[inputs[i].name.replace('[]', '')] = [];
}
multiparameters[inputs[i].name.replace('[]', '')].push(inputs[i].value);
}else{
parameters += '|'+inputs[i].name+'='+inputs[i].value;
}
}
}
if(mode == "domein"){
var url = domein.replace('.','-');
}else{
var url = domein.replace('.','-')+'/'+titel.replace(' ', '-');
}
var multi = "";
for(i = 0; i < Object.keys(multiparameters).length; ++i){
multi += '|'+Object.keys(multiparameters)[i]+'='+multiparameters[Object.keys(multiparameters)[i]].toString();
}
var wikitext = '{{'+template+parameters+multi+'}}'
console.log(wikitext)
var params = {
action: 'edit',
title: url,
text: wikitext,
format: 'json'
},
api = new mw.Api();
api.postWithToken( 'csrf', params ).done( function ( html ) {
window.location.href = window.location.origin+'/index.php/'+url;
})
}
//js for file uplaod
var counter = 0;
var dropped;
var fileInput = document.getElementById('widget-file-upload-files');
var settingsPreview, settingsCaption, settingsDrop, settingsFilepagetemplate, settingsFilepageparameters, settingsFilename;
if(fileInput){
settingsPreview = fileInput.getAttribute('data-preview');
settingsCaption = fileInput.getAttribute('data-caption');
settingsDrop = fileInput.getAttribute('data-drop');
settingsFilepagetemplate = fileInput.getAttribute('data-filepagetemplate');
settingsFilepageparameters = fileInput.getAttribute('data-filepageparameters');
settingsFilename = fileInput.getAttribute('data-filename');
fileInput.addEventListener('change', handleFileSelect, false); //is a <input type="file" id="files" name="files[]" multiple />
}
function createFilename(filename){
var output = settingsFilename;
var regex = /<(\w+)>/gm;
var m;
var name = filename.split('.')[0];
var type = filename.split('.')[1];
while ((m = regex.exec(settingsFilename)) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}
// The result can be accessed through the `m`-variable.
m.forEach((match, groupIndex) => {
if(match == "FILENAME"){
output = output.replace('<'+match+'>', name);
}else{
var input = fileInput.closest('form').querySelector('[name="'+match+'"]');
if(input){
val = input.value;
output = output.replace('<'+match+'>', val);
}
}
// console.log(`Found match, group ${groupIndex}: ${match}`);
});
}
return output+'.'+type;
}
function createWikitext(filename, caption){
var output = settingsFilepageparameters;
var regex = /<(\w+)>/gm;
var m;
var name = filename.split('.')[0];
var type = filename.split('.')[1];
while ((m = regex.exec(settingsFilepageparameters)) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}
// The result can be accessed through the `m`-variable.
m.forEach((match, groupIndex) => {
if(match == "FILENAME"){
output = output.replace('<'+match+'>', name);
}else{
var input = fileInput.closest('form').querySelector('[name="'+match+'"]');
if(input){
val = input.value;
output = output.replace('<'+match+'>', val);
}
}
// console.log(`Found match, group ${groupIndex}: ${match}`);
});
}
output = output.replace(/:/g,'=');
output = output.replace(/;/g,'|');
if(caption){
output = '{{'+settingsFilepagetemplate+'|'+output+'|caption='+caption+'|type='+type+'}}';
}else{
output = '{{'+settingsFilepagetemplate+'|'+output+'|type='+type+'}}';
}
return output;
}
function handleFileSelect() {
if(settingsPreview != "false"){
createPreviews(fileInput.files);
}
fileInput.closest('form').querySelector('[type="submit"]').addEventListener('click', uploadFiles, false)
}
function uploadFiles(evt){
evt.preventDefault();
if(dropped){
var files = dropped;
}else{
var files = fileInput.files;
}
var proms = [];
for(i = 0; i < files.length; ++i){
file = files[i];
var fileName = files[i].name;
var prom = doApiCall(file, fileName);
proms.push(prom)
}
Promise.all(proms).then(function(values) {
fileInput.closest('form').submit();
});
}
function doApiCall(fileToUpload,fileName){
return new Promise(function(resolve, reject){
formdata = new FormData();
formdata.append("action", "upload");
formdata.append("filename", createFilename(fileName));
//formdata.append("filename", fileName);
formdata.append("token", mw.user.tokens.get( 'editToken' ) );
formdata.append("file", fileToUpload);
formdata.append("ignorewarnings", "true");
formdata.append("format", "json");
//as we now have created the data to send, we send it...
$.ajax( { //http://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery
url: mw.util.wikiScript( 'api' ), //url to api.php
contentType:false,
processData:false,
type:'POST',
data: formdata,//the formdata object we created above
success:function(data){
resolve(data)
// setTimeout(function(){
editFilePage(fileName);
// },100)
},
error:function(xhr,status, error){
console.log(error)
reject(error)
}
});
});
}
function createPreviews(filesSelected){
if (filesSelected.length > 0) {
for(i = 0; i < filesSelected.length; ++i){
var fileToLoad = filesSelected[i];
var fname = fileToLoad.name;
if(fname.substr( fname.length -3 ) === "pdf"){
//add somthing here
}else{
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
var newImage = document.createElement('img');
newImage.src = srcData;
var dt = filesSelected[counter]
counter = counter + 1;
if(settingsCaption){
document.getElementById("widget-file-upload-preview").innerHTML = document.getElementById("widget-file-upload-preview").innerHTML+'<div class="upload-group">'+newImage.outerHTML+'<input data="'+dt.name+'" type="text" placeholder="caption" class="form-control" /></div>';
}else{
document.getElementById("widget-file-upload-preview").innerHTML = document.getElementById("widget-file-upload-preview").innerHTML+'<div class="upload-group">'+newImage.outerHTML+'</div>';
}
}
fileReader.readAsDataURL(fileToLoad);
}
}
}
}
function editFilePage(file){
if(settingsCaption){
var caption = document.querySelector('[data="'+file+'"]').value;
var newWikitextEdit = createWikitext(file, caption);
}else{
var newWikitextEdit = createWikitext(file);
}
var params = {
action: 'edit',
title: 'File:'+createFilename(file),
text: newWikitextEdit,
format: 'json'
},
api = new mw.Api();
api.postWithToken( 'csrf', params ).done( function ( data ) {
console.log( data );
} );
}
var dropArea = document.getElementById('drop-area');
if(dropArea){
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(function(eventName){
dropArea.addEventListener(eventName, preventDefaults, false)
})
function preventDefaults (e) {
e.preventDefault()
e.stopPropagation()
}
;['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false)
})
;['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false)
})
function highlight(e) {
dropArea.classList.add('highlight')
}
function unhighlight(e) {
dropArea.classList.remove('highlight')
}
dropArea.addEventListener('drop', handleDrop, false)
function handleDrop(e) {
var dt = e.dataTransfer
var files = dt.files
dropped = files;
if(settingsPreview != "false"){
createPreviews(files);
}
fileInput.closest('form').querySelector('[type="submit"]').addEventListener('click', uploadFiles, false)
}
}