Difference between revisions of "MediaWiki:Common.js"

Revision as of 15:46, 29 November 2020

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(function (resolve, reject) {
    fetch(url, {
      method: "GET"
    }).then(function (response) {
      if (response.ok) {
        response.json().then(resolve); //.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(e) {
        reject(e);
      }
    });
  });
}

/**
 * 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 (e) {
        reject(e);
      }
    });
  });
}

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 wrap (element, maxWidth, end) {
  if (maxWidth === null) {
    maxWidth = 40;
  }

  if (end === null) {
    end = ' \\';
  }

  var lines = element.textContent.split("\n"),
      wrapped = [];

  for (var l=0; l < lines.length; l++) {
    if (lines[l].length > maxWidth) {
      var line = lines[l];
      wrapped.push(line.substring(0, maxWidth).replace(/\s/g, '&nbsp;'));
      line = line.substring(maxWidth);

      do {
        wrapped.push((end + line.substring(0, maxWidth - end.length).trim()).replace(/\s/g, '&nbsp;'));
        line = line.substring(maxWidth - end.length);
      } while (line.length > 0);
    }
    else {
      wrapped.push(lines[l].replace(/\s/g, '&nbsp;'))
    }
  }

  var codeElement = document.createElement('code');
  codeElement.innerHTML = '<span class="line">' + wrapped.join('</span><span class="line">') + '</span>';
  element.replaceWith(codeElement);
}

function unWikifyReferences () {
  var links = document.querySelectorAll('a');

  for (var i = 0; i < links.length; i++) {
    var a = links[i];

    if (a.href.includes('#cite_note')) {
      var content = a.textContent;

      if (content.startsWith('[') && content.endsWith(']')) {
        a.textContent = content.substring(1, content.length - 1);
      }
    }
  }
}

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


  if (!paged || paged != 'paged') {
    restructurePage();

    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>

*/

(function () {
  var urlParameters = new URLSearchParams(window.location.search),
      paged = urlParameters.get('paged');
      prevent = urlParameters.get('prevent');
      etherstyles = urlParameters.get('etherstyles');
  if (paged == 'paged' && prevent !== 'prevent') {
    /*
    var pre = document.querySelectorAll('pre');
    while (pre.length > 0) {
      wrap(pre[0], 50, '                        ');
      pre = document.querySelectorAll('pre');
    }
    */

    unWikifyReferences();
    /* mw.loader.load('https://unpkg.com/pagedjs@0.1.40/dist/paged.polyfill.js'); */
    /* mw.loader.load('https://unpkg.com/pagedjs@0.1.33/dist/paged.polyfill.js'); */
    /* mw.loader.load('https://unpkg.com/pagedjs@0.1.28/dist/paged.polyfill.js'); */
    
    const pagedPreviewCSS = ":root{--color-background:whitesmoke;--color-pageBox:#666;--color-paper:white;--color-marginBox:transparent}@media screen{body{background-color:var(--color-background)}.pagedjs_pages{display:flex;width:calc(var(--pagedjs-width) * 2);flex:0;flex-wrap:wrap;margin:0 auto}.pagedjs_page{background-color:var(--color-paper);box-shadow:0 0 0 1px var(--color-pageBox);margin:0;flex-shrink:0;flex-grow:0;margin-top:10mm}.pagedjs_first_page{margin-left:var(--pagedjs-width)}.pagedjs_page:last-of-type{margin-bottom:10mm}.pagedjs_margin-bottom,.pagedjs_margin-bottom-center,.pagedjs_margin-bottom-left,.pagedjs_margin-bottom-left-corner-holder,.pagedjs_margin-bottom-right,.pagedjs_margin-bottom-right-corner-holder,.pagedjs_margin-left,.pagedjs_margin-left-bottom,.pagedjs_margin-left-middle,.pagedjs_margin-left-top,.pagedjs_margin-right,.pagedjs_margin-right-bottom,.pagedjs_margin-right-middle,.pagedjs_margin-right-top,.pagedjs_margin-top,.pagedjs_margin-top-center,.pagedjs_margin-top-left,.pagedjs_margin-top-left-corner-holder,.pagedjs_margin-top-right,.pagedjs_margin-top-right-corner-holder{box-shadow:0 0 0 1px inset var(--color-marginBox)}}";
    previewStyles = document.createElement('style');
    previewStyles.textContent = pagedPreviewCSS;
    document.head.appendChild(previewStyles);
 
    if (etherstyles == 'etherstyles') {
      window.setTimeout(function () { mw.loader.load('https://unpkg.com/pagedjs/dist/paged.polyfill.js'); }, 4000);
    } else {
      mw.loader.load('https://unpkg.com/pagedjs/dist/paged.polyfill.js');
    }
  }
})();

function loadEtherStyle(url, interval) {
  function load(url) {
    fetch(url)
      .then(function(r) { return r.text()})
      .then(function (styles) {
        var el = document.createElement('style');
        el.appendChild(document.createTextNode(styles));
        el.setAttribute('data-type', 'etherstyle');
        document.head.appendChild(el);
        window.requestAnimationFrame(function () {
          var styles = document.querySelectorAll('[data-type="etherstyle"]');
          for (var i=0;i<(styles.length-1);i++) {
            styles[i].remove();
          }
        });
      });
  }

  load(url);
  var urlParameters = new URLSearchParams(window.location.search),
      reload = urlParameters.get('reload');
  if (reload == 'reload') {
    window.setInterval(function () { load(url); }, interval);
  }
}

(function () {
  var urlParameters = new URLSearchParams(window.location.search),
      etherstyles = urlParameters.get('etherstyles');
  if (etherstyles == 'etherstyles') {
    loadEtherStyle('https://pad.constantvzw.org/p/diversions.css/export/txt', 7500);
  }
})();