MediaWiki:Common.js: verschil tussen versies

Versie van 27 nov 2020 09:26

// JavaScript die hier wordt geplaatst heeft invloed op alle pagina's voor alle gebruikers <script> 


function removeImg(el){

}


function toggleDateField(el){
  var datefield =  el.closest('.grid-datum').querySelector('[type="date"]');
  var hiddenfiel =  el.closest('.grid-datum').querySelector('[type="hidden"]');
  datefield.classList.toggle('disabled');
  if(datefield.classList.contains('disabled')){
    hiddenfiel.value = "false";
  }else{
    hiddenfiel.value = "";
  }
}


//js for file uplaod

var counter = 0;
var dropped;

var fileInput = document.getElementById('widget-file-upload-files');   

var settingsPreview, settingsCaption, settingsDrop, settingsFilepagetemplate, settingsFilepageparameters, settingsFilename, settingsType;

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');
 settingsType = fileInput.getAttribute('data-type');

 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];
  
  if(settingsType){
    var type = settingsType;
  }else{
    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(function(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(function(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"){
    
   $('.grid-img img').remove()
                     

    
    createPreviews(fileInput.files);
  }  
 // fileInput.closest('label').style.display = "none"
 // fileInput.closest('form').querySelector('[type="submit"]').style.display = "inline-block"
 // fileInput.closest('form').querySelector('[type="submit"]').addEventListener('click', uploadFiles, false)  
  
}

function uploadFiles(evt){
  if(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;
    
    if(settingsType && settingsType == 'png' && fileName.split('.')[1] != 'png'){
   
    //convert jpg to png !!! yeah so cool
       var fileReader = new FileReader();

      fileReader.onload = function(fileLoadedEvent) {
        var srcData = fileLoadedEvent.target.result; // <--- data: base64


        var image = new Image();
        image.onload = function() { 

          var canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          canvas.getContext("2d").drawImage(image, 0, 0);

          //   var png = new Image();
          //    png.src = canvas.toDataURL("image/png");

           canvas.toBlob(function(blob) {

            var prom =  doApiCall(blob, fileName);
            proms.push(prom)
            //  return blob;

          },'image/png', 1)
          //   return dt;
          //  document.getElementById("widget-file-upload-preview").appendChild(png)
          }
        image.src = srcData;
      }
      fileReader.readAsDataURL(file);

    }else{
     var prom =  doApiCall(file, fileName);
     proms.push(prom)
    }
    
   
  }
  Promise.all(proms).then(function(values) {
 // fileInput.closest('form').submit();
    $('#real-submit').click();
  });
}


function jpgtopng(file){
var fs = "";
     
    

}


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;
        var name = fname.split('.')[0];
        var type = fname.split('.')[1];  
      
      if(type == "pdf" || type == "doc" || type == "docx"){
      	
      	var newImage = document.createElement('img');
          newImage.src = "https://handhavingsupport.wiki/images/d/da/File.svg";
          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+'<p>'+fname+'</p><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+'<p>'+fname+'</p></div>';
          }
        
      }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(function(eventName){
    dropArea.addEventListener(eventName, highlight, false)
  })
  
  ;['dragleave', 'drop'].forEach(function(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)
  }  
  
}

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('div').querySelector('img').remove();
  } );
  }
}


function postBericht(el, template, mode){
  var titel = "";
  var domein = "";
  var parameters = "";
  var prefix = "";
  var page = "";
  var multiparameters = {};
  var inputs = el.closest('form').querySelectorAll('select, 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 == "Pagename"){page = inputs[i].value};
   if(inputs[i].name == "Prefix"){prefix = 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{
    if(page){
      var url = page;
    }else{
      var regex = /[\s'"?’!@\n\|_&,.\/\{\}\[\]]/gm;
      var url = prefix.replace('.','-')+'/'+titel.replace(regex, '-');
    }
    
  }
  
    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;
           })
}

var multiselect = document.querySelector('#multi-select2');

if(multiselect){
   multiselect.addEventListener('change', function(){
 

var sp = document.createElement('div')

sp.innerHTML = this.value+'<input type="hidden" name="tags[]" value="'+this.value+'">';
sp.classList.add('botn');
sp.addEventListener('click', function(){
   this.remove();
}, false)
document.querySelector('.out').appendChild(sp)

this.value = ""}, false);
}


//js voor menu
 document.addEventListener('click', function(e){
   
  // if(!e.target.closest('.main-menu li')){
       document.querySelectorAll('.main-menu .hover').forEach(function(e){e.classList.remove('hover')})
     
  // }
     if(e.target.closest('.main-menu li')){
    //    if(!e.target.href && !e.target.closest('li').classList.contains('hover')){
     //      e.target.closest('li').classList.add('hover')
       
addthehover(e.target.closest('li'))
    //    }else{
     //     e.target.closest('li').classList.remove('hover')

     //   }
      }
    
  })

function addthehover(el){
  el.classList.add('hover')
  var ml = el.closest('li');
  
  if(ml == typeof Object){
    console.log('?',ml)
   addthehover(ml)
  }
}


var _onPaste_StripFormatting_IEPaste = false;

    function OnPaste_StripFormatting(elem, e) {

        if (e.originalEvent && e.originalEvent.clipboardData && e.originalEvent.clipboardData.getData) {
            e.preventDefault();
            var text = e.originalEvent.clipboardData.getData('text/plain');
            window.document.execCommand('insertText', false, text);
        }
        else if (e.clipboardData && e.clipboardData.getData) {
            e.preventDefault();
            var text = e.clipboardData.getData('text/plain');
            window.document.execCommand('insertText', false, text);
        }
        else if (window.clipboardData && window.clipboardData.getData) {
            // Stop stack overflow
            if (!_onPaste_StripFormatting_IEPaste) {
                _onPaste_StripFormatting_IEPaste = true;
                e.preventDefault();
                window.document.execCommand('ms-pasteTextOnly', false);
            }
            _onPaste_StripFormatting_IEPaste = false;
        }

    }