MediaWiki:Common.js

Note: After saving, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

var API_URL = 'https://diversions.constantvzw.org/wiki/api.php';

/**
 * Make an api url with the given parameters
 * @param {object} parameters parameters for the url
 */
function makeApiUrl(parameters) {
  var params = new URLSearchParams();

  for (k in parameters) {
    params.append(k, parameters[k]);
  }

  return API_URL + '?' + params.toString();
}

/**
 * Fetches the given url, parses data as json
 * @param {string} url url to fetch
 */
function getJSON (url) {
  return new Promise((resolve, reject) => {
    fetch(url, {
      method: "GET"
    }).then((response) => {
      if (response.ok) {
          response.json()
          .then(data => resolve(data))
          .catch(reject);
      }
      else {
        reject();
      }
    }).catch(reject);
  });
}



/**
 * Fetches a list of revisions from the wiki api
 * Returns a promise
 * Promise is revolved with a list of revions:
 * Array<Shape<
 *  comment: string
​ *  parentid: integer
​ *  revid: integer
​​ *  timestamp: string
​​ *  user: string
 * >>
 * @param {string} title Title of the lemma
 */
function getRevisions (title) {
  return new Promise(function (resolve, reject) {
    getJSON(makeApiUrl({
      action: 'query',
      prop: 'revisions',
      rvslots: '*',
      rvprop: ['timestamp', 'user', 'comment', 'ids'].join('|'),
      rvlimit: 500,
      format: 'json',
      'titles': title
    })).then(function (data) {
      try {
        var pages = data['query']['pages'],
            keys = Object.keys(pages),
            page = pages[keys[0]],
            revisions = page['revisions'];

        resolve(revisions);
      }
      catch {
        reject();
      }
    });
  });
}

/**
 * Fetches a parsed revision from the api
 * Returns a promise
 * Promise is resolved with a dictionary containing the text
 * and display title of the lemma.
 * @param {int} revid Id of the revision 
 */
function getRevision (revid) {
  return new Promise(function (resolve, reject) {
    getJSON(makeApiUrl({
      action: 'parse',
      oldid: revid,
      format: 'json'
    })).then(function (data) {
      try {
        var title = data['parse']['displaytitle'],
            text = Object.values(data['parse']['text'])[0];
        resolve({ title: title, html: text });
      } catch {
        reject();
      }
    });
  });
}

function makeTimelineEntry (revision) {

  var entry = document.createElement('section');
  entry.classList.add('timeline--entry');
  entry.dataset.revid = revision.revid;
  
  var entryData = document.createElement('section');
  entryData.classList.add('timeline--entry--data');

  var user = document.createElement('span');
  user.classList.add('timeline--user')
  user.append(document.createTextNode(revision.user));

  var timestamp = document.createElement('span');
  timestamp.classList.add('timeline--timestamp')
  timestamp.append(document.createTextNode(revision.timestamp));

  var comment = document.createElement('span');
  comment.classList.add('timeline--comment')
  comment.append(document.createTextNode(revision.comment));

  entryData.append(user, timestamp, comment);
  entry.append(entryData);

  entry.addEventListener('click', function () {
    showRevision(revision.revid);
  })

  return entry;
}

function makeRevision (revid) {
  var revision = document.createElement('section');
  revision.classList.add('revisions--revision', 'mw-body-content');
  revision.dataset.revid = revid;
  return revision;
}

// Maybe rename?
function makeRevisionStubs (revisions) {
  var container = document.getElementById('content');
  // container.classList.add('revisions');

  for (var i = 1; i < revisions.length; i++) {
    container.append(makeRevision(revisions[i].revid));
  }
}

function makeTimeline (revisions) {
  var timeline = document.createElement('section');
  timeline.classList.add('timeline');
  
  for (var i=0; i < revisions.length; i++) {
    if (i==0) {
      revisions[i].revid = 'current';
    }
    timeline.appendChild(makeTimelineEntry(revisions[i]));
  }

  return timeline;
}

function showRevision (revid) {
  var node = document.querySelector('.revisions--revision[data-revid="'+ revid + '"]'),
      current = document.querySelector('.timeline--entry[data-revid="'+ revid + '"]'),
      previous = document.querySelector('.timeline--entry.active');
  if (previous) {
    previous.classList.remove('active');
  }

  current.classList.add('active');

  node.scrollIntoView();
  if (! node.dataset.loaded) {
    node.dataset.loading = true;
    getRevision(revid).then(function (revision) {
      delete node.dataset.loading;
      node.dataset.loaded = true;
      node.innerHTML = revision.html;
      showRevision(revid);
    });
  }
}



/**
 * Transforms the content content div into the container for the revisions.
 */
function restructurePage () {
  var contentContainer = document.getElementById('content'),
      panel = makeRevision('current');

  panel.dataset.loaded = true;

  while(contentContainer.firstChild) {
    if (contentContainer.firstChild.classList) {
      contentContainer.firstChild.classList.remove('mw-body');
    }
    panel.appendChild(contentContainer.firstChild);
  }

  contentContainer.classList.add('revisions');
  contentContainer.appendChild(panel);
}


(function () {
  restructurePage();
  var urlParameters = new URLSearchParams(window.location.search),
      title = urlParameters.get('title');

  if (title) {
    getRevisions(title).then(function (revisions) {
      var container = document.getElementById('content');
      
      container.parentElement.appendChild(makeTimeline(revisions));
      
      for (var i = 0; i < revisions.length; i++) {
        container.append(makeRevision(revisions[i].revid));
      }

      showRevision('current');
    });
  }

})();


/**
- Get revisions
- Generate the timeline
  <section>
    <section class="timeline--entry" data-revision="{data}" data-time="{time}">
      <span class="timeline--user">{ user }</span>
      <span class="timeline--timestamp">{ timestamp }</span>
      <span class="timeline--comment">{ comment }</span>
    </section>
  </section>
- Generate the panels, maybe do not render them all
- <section data-revision="{revision}"></section>

*/