Opmerking: na het publiceren is het wellicht nodig uw browsercache te legen om de veranderingen te zien.

  • Firefox / Safari: houd Shift ingedrukt terwijl u:je 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)
  • Edge: houd Ctrl ingedrukt terwijl u:je op Vernieuwen klikt of druk op Ctrl-F5.
/**
 *
 * Made by: Sumurai8
 * Using: HTML5 technology
 *        - Database
 *        - Localstorage
 *        - Sessionstorage
 * Might not work in your browser. If your browser isn't supported,
 * make sure you take a less retarded one...
 *
 * This extension will allow the user to save drafts from pages, allow
 * to return to an earlier draft and prevent that lots of work is lost
 * when a browser fails unexpectedly
 *
 * This script might be used in a 'offline-mode'-script that allows
 * any user to store certain pages on their computers to access offline
 * and prepare edits without needing an internet-connection
 *
**/

var saveeditdbversion = "1.0";
var saveeditdb = window.openDatabase("saveedit", "", "", 100000);

//importScript("User:Sumurai8/offdb.js");

function startsaveedit() {
  if (offlinedatabasesupport()) {
    currversion = getVersionOfflineDatabase("saveedit");
    if (!currversion == saveeditdbversion) {  
      saveedit_dbupgrade(currversion);
    }
    clearolddrafts();
    if(wgAction == 'edit' || wgAction == 'submit') {
      saveedit_editmode();
    }
    else {
      saveedit_othermode();
    }
  }
}

function saveedit_othermode() {
  var result1
  var result2
  var result3
  saveeditdb.transaction( 
    function(tx) { tx.executeSql("SELECT * FROM drafts", [],
      function(tx, result) { result1 = result.rows;
      saveeditdb.transaction(
        function(tx) { tx.executeSql("SELECT * FROM drafts WHERE autosave = 0", [],
        function(tx, result) { result2 = result.rows;
        saveeditdb.transaction( 
          function(tx) { tx.executeSql("SELECT * FROM drafts WHERE page = ? AND autosave = 0", [wgPageName],
          function(tx, result) { result3 = result.rows;
            var tag = document.getElementById("offlul");
            var temp  = "Drafts saved: "+result1.length+"<br/>";
            temp += "W/o autosave: "+result2.length+"<br/>";
            temp += "Drafts this page: "+result3.length;
            var li = document.createElement("li");
            li.innerHTML = temp;
            tag.insertBefore(li, null); },
          function(tx, error) { console.error(error) }
          )
        }
      )
    },
        function(tx, error) { console.error(error) }
        )
      }
    )
  },
      function(tx, error) { console.error(error) }
      )
    }
  )
}

function saveedit_editmode() {
//  saveedit_othermode(); //For testing purposes
  var tag = document.getElementsByClassName('editButtons')[0];
  var tag2 = document.getElementById('wpPreview');
  var input = document.createElement('input');
  input.value = "Save draft";
  input.type = "button";
  input.addEventListener('click', savedraft);
  tag.insertBefore(input, tag2);
  var input = document.createElement('input');
  input.value = "Load drafts (0)";
  input.id = "saveeditloadbutton";
  input.type = "button";
  input.addEventListener('click', openloadlist);
  tag.insertBefore(input, tag2);
  var div = document.createElement('div');
  div.id = "saveeditstatus";
  div.innerText = "Offline statusbar: ";
  tag.insertBefore(div, null);
  var div = document.createElement('div');
  div.id = "saveeditloaddiv";
  var ul = document.createElement('ul');
  ul.id = "saveeditloadlist";
  div.style.display = "none";
  div.innerText = "The following drafts exist for this article:";
  div.appendChild(ul);
  loaddraftlist();
  updateloadbutton(1);

  document.getElementById('wpPreview').style['margin-left'] = "20px";
  document.getElementById('wpSave').style['font-weight'] = "bold";
  
  saveeditdb.transaction(
    function(tx) { tx.executeSql("SELECT * FROM drafts WHERE autosave = 1 and page = ?", [wgPageName],
    function(tx, result) { if(result.rows.length == 0) {
      tx.executeSql("INSERT INTO drafts (timestamp, page, last_pageid, txt, sum, autosave) VALUES (?, ?, ?, ?, ?, ?)", [currenttimestamp(), wgPageName, wgArticleId, document.getElementById("wpTextbox1").value, document.getElementById('wpSummary').value, 1],
      function(tx, result) { window.setTimeout(function() { autosavedraft() }, 20000) },
      function(tx, error) { console.error(error) }
      ) }
      else {
        if( !sessionStorage.getItem( wgPageName ) && window.confirm("There is an autosave-file available for this page. Do you want to use the contents of the autosave-file?") ) {
          document.getElementById('wpTextbox1').value = result.rows.item(0)['txt'];
          document.getElementById('wpSummary').value = result.rows.item(0)['sum'];
        }
        autosavedraft();
      }
    }, 
    function(tx, error) { console.error(error) }
  )
  }
  )
}

function savedraft() {
  saveeditdb.transaction(
    function(tx) { tx.executeSql("INSERT INTO drafts (timestamp, page, last_pageid, txt, sum, autosave) VALUES (?, ?, ?, ?, ?, ?)", [currenttimestamp(), wgPageName, wgArticleId, document.getElementById('wpTextbox1').value, document.getElementById('wpSummary').value, 0],
      function(tx, result) { saveedit_status("A draft is saved "+timestamptodate(currenttimestamp())); },
      function(tx, error) { saveedit_status("Failed to save a draft "+timestamptodate(currenttimestamp())); }
      )
    }
  )
}

function loaddraft(timestamp) {
  if( typeof(timestamp) == "string" ) {
    timestamp = parseInt(timestamp);
  }
  saveedit_status("Loading failed");
}

function autosavedraft() {
  console.info("Autosave: " + currenttimestamp());
  addsessstore(wgPageName, currenttimestamp());
  saveeditdb.transaction(
    function(tx) { tx.executeSql("UPDATE drafts SET txt=?, sum=?, timestamp=? WHERE page = ? and autosave = 1", [document.getElementById('wpTextbox1').value, document.getElementById('wpSummary').value, currenttimestamp(), wgPageName],
      function(tx, result) { saveedit_status("Autosave succes "+timestamptodate(currenttimestamp())) },
      function(tx, error) { saveedit_status("Autosave FAILED! "+timestamptodate(currenttimestamp())) }
    ) }
  )
  window.setTimeout(function() { autosavedraft() }, 20000);
}

function saveedit_status(state) {
  document.getElementById('saveeditstatus').innerText = "Offline statusbar: "+state;
}

function saveedit_dbupgrade(version) {
  if(version == saveeditdbversion) {
    setVersionOfflineDatabase("saveedit", version);
    return true;
  }
  else {
    if(version == "") {
      version = "1.0"
      saveeditdb.transaction( 
        function(tx) { tx.executeSql("CREATE TABLE drafts ( timestamp TIMESTAMP(8) PRIMARY KEY UNIQUE, autosave TINYINT(1), page VARCHAR(255), last_pageid INT(15), txt BLOB, SUM VARCHAR(255) )", [],
          function(result) { saveedit_dbupgrade(version) },
          function(tx, error) { console.error(error) }
          )
        }
      )
    }
    setVersionOfflineDatabase("saveedit", version);
  }
}

function addsessstore(key, value) {
  s = localStorage.getItem('autosaves')? localStorage.getItem('autosaves').split(',') : [];
  if( !inlist(key, s) ) {
    s[s.length] = key;
    localStorage.setItem('autosaves', s.join(','));
  }
  sessionStorage.setItem(key, value);
}

function clearolddrafts() {
  s = localStorage.getItem('autosaves')? localStorage.getItem('autosaves').split(',') : [];
  u = [];
  for( var i = 0; i < s.length; i++ ) {
    var item = s[i];
    t = sessionStorage.getItem( item );
    if( t && currenttimestamp - t > 45 ) {
      sessionStorage.removeItem( item );
    }
    else {
      u[u.length] = item;
    }
  }
  localStorage.setItem('autosaves', u.join(','));
}

function openloadlist() {
  saveeditloaddiv.style.display = "block";
}

function loaddraftlist() {
  document.getElementById('saveeditloadlist').innerText = ""; //Reset everything

  saveeditdb.transaction(
    function(tx) { tx.executeSql("SELECT timestamp, autosave FROM drafts WHERE page=? SORT BY timestamp DESCENDING", [wgPageName],
      function(tx, result) { 
        l = result.rows;
        for( var i = 0; i < l.length; l++ ) {
          var li = document.createElement('li');
          li.id = "saveedit_"+l[i]['timestamp'];
          li.innerHTML = "<a href=\"javascript:deletedraft("+l[i]['timestamp']+")\">[X]</a> <a href=\"javascript:loaddraft("+l[i]['timestamp']+")\">"+timestamptodate(l[i]['timestamp'])+"</a> ("+timesincenow(l[i]['timestamp'])+" ago)"
          if( autosave == "1" ) {
            li.innerHTML += "- autosave";
          }
          document.getElementById('saveeditloadlist').appendChild(li);
        }
      },
      function(tx, error) { 
        var li = document.createElement('li')
        li.id = "saveeditloaderror";
        li.innerHTML = "<a href=\"javascript:loaddraftlist()\">Please click here to load the list again</a>";
        saveeditloadlist.appendChild(li);
      }
      )
    }
  )
}

function updateloadbutton( option ) {
  if( typeof(option) == "string" ) {
    //Set to this text
    saveeditloadbutton.value = option;
  }
  else if( option == 1 ) {
    //Verkrijg aantal drafts voor wgPageName
    saveeditdb.transaction(
      function(tx) { tx.executeSql("SELECT timestamp FROM drafts WHERE page=?", [wgPageName],
        function(tx, result) { saveeditloadbutton.value = "Load drafts (" + result.rows.length + ")"; },
        function(tx, error) { saveeditloadbutton.value = "Load drafts (error)"; }
        )
      }
    )
  }
}

function deletedraft( timestamp ) {
  console.info("I won't delete this draft :'(");
}

$(startsaveedit);