index : cgit

/*
 * The client side script that cgit serves with every page. Its main job is
 * to refresh the relative ages that cgit_print_age renders in
 * source/ui-shared.c, so the thresholds, suffixes and class names tabulated
 * below mirror the constants there and the two have to move together. Two
 * smaller pieces follow, the highlight laid over the source line a URL
 * fragment names, and the tabs kept in view on a window too narrow for them.
 * Each piece is wrapped in a function of its own so that nothing is left
 * behind in the global scope.
 */

(function () {

// Written the way SECONDS_PER_* are derived in source/cgit.h, so that the
// bucket a browser picks is the bucket cgit_print_age already picked on the
// server. A month is a twelfth of a year rather than thirty days.
var MINUTE = 60;
var HOUR   = 60 * MINUTE;
var DAY    = 24 * HOUR;
var WEEK   = 7 * DAY;
var YEAR   = 365 * DAY;
var MONTH  = YEAR / 12;

// The five arrays are indexed together by the bucket an age falls into.
// Each limit is twice the next unit up, matching the thresholds
// cgit_print_age compares against, and an age past the last is in years.
var age_classes = [ "age-mins", "age-hours", "age-days", "age-weeks", "age-months", "age-years" ];
var age_suffix = [ "min.", "hours", "days", "weeks", "months", "years" ];
var age_unit = [ MINUTE, HOUR, DAY, WEEK, MONTH, YEAR ];
var age_limit = [ 2 * HOUR, 2 * DAY, 2 * WEEK, 2 * MONTH, 2 * YEAR ];
var update_delay = [ 10, 5 * MINUTE, 30 * MINUTE, DAY, DAY, DAY ];

function render_age(element, age) {
  var text, bucket;

  for (bucket = 0; bucket < age_limit.length; bucket++)
    if (age < age_limit[bucket])
      break;

  text = Math.round(age / age_unit[bucket]) + " " + age_suffix[bucket];

  // Every age on the page is measured again on each pass, so most of them
  // are already reading correctly and writing to them would cost a repaint
  // for nothing.
  if (element.textContent != text) {
    element.textContent = text;
    if (element.className != age_classes[bucket])
      element.className = age_classes[bucket];
  }
}

/*
 * Measures every age on the page against the clock and returns how many
 * seconds may pass before one of them could read differently. There is no
 * point coming back before the finest unit on the page could change, so a
 * page already counted in hours is left alone for minutes and one counted in
 * years for a day.
 */
function update_ages() {
  var bucket, elements, i, age;
  var delay = DAY;
  var now = Math.round(new Date().getTime() / 1000);

  for (bucket = 0; bucket < age_classes.length; bucket++) {
    elements = document.querySelectorAll("." + age_classes[bucket]);

    if (elements.length && update_delay[bucket] < delay)
      delay = update_delay[bucket];

    for (i = 0; i < elements.length; i++) {
      age = now - elements[i].getAttribute("data-ut");

      // A commit dated ahead of the viewer's clock would otherwise show
      // a negative age, and ui-shared.c clamps it the same way.
      if (age < 0)
        age = 0;

      render_age(elements[i], age);
    }
  }

  return delay;
}

function refresh_ages() {
  window.setTimeout(refresh_ages, update_ages() * 1000);
}

document.addEventListener("DOMContentLoaded", refresh_ages);

// A site script that adds rows of its own can ask for one pass over them.
window.cgit = window.cgit || {};
window.cgit.updateAges = update_ages;

})();

/*
 * Washes a faded highlight over the source line a URL fragment names, either
 * a single line as in #n231 or a range as in #n5-n12. The line anchors live
 * in the number gutter, so the anchor is measured and a bar of the same
 * height is laid across the full width of the code. Without scripting the
 * CSS target rule still tints the line number itself.
 */

(function () {

var bar = null;

function place_bar() {
  var match, first, last, table;
  var table_box, first_box, last_box, leading, origin, top, bottom;

  if (bar) {
    bar.remove();
    bar = null;
  }
  match = /^#n(\d+)(?:-n?(\d+))?$/.exec(location.hash);
  if (!match)
    return;
  first = document.getElementById("n" + match[1]);
  if (!first)
    return;
  last = (match[2] && document.getElementById("n" + match[2])) || first;
  table = first.closest("table");
  if (!table)
    return;
  table_box = table.getBoundingClientRect();
  first_box = first.getBoundingClientRect();
  last_box = last.getBoundingClientRect();

  // An anchor's box holds only its digits, centred in a line that the line
  // height makes taller, so the bar reaches out by the difference to cover
  // whole lines. A line height of normal leaves nothing to add.
  leading = parseFloat(getComputedStyle(first).lineHeight);
  leading = (leading - first_box.height) / 2 || 0;

  // The bar is placed from inside the table's border, not from its edge.
  origin = table_box.top + table.clientTop;
  top = Math.min(first_box.top, last_box.top) - leading - origin;
  bottom = Math.max(first_box.bottom, last_box.bottom) + leading - origin;
  bar = document.createElement("div");
  bar.className = "line-hl";
  bar.style.top = top + "px";
  bar.style.height = (bottom - top) + "px";
  // A table too wide for the page scrolls sideways, and the bar has to run
  // to the end of its longest line rather than to the edge of the view.
  bar.style.width = table.scrollWidth + "px";
  table.appendChild(bar);

  // A browser only scrolls to a fragment that names a real id, which a range
  // never does, so bring the start of one into view here. The scroll margin
  // on the anchors centres it the way it centres a single line.
  if (match[2])
    first.scrollIntoView();
}

document.addEventListener("DOMContentLoaded", place_bar);
window.addEventListener("hashchange", place_bar);

// A site script that moves the lines about can ask for the bar to be laid
// again.
window.cgit = window.cgit || {};
window.cgit.highlightLines = place_bar;

})();

/*
 * The tabs scroll sideways when the window is too narrow for them, so the
 * active one is brought into view, and the edge past which more tabs are
 * hidden is faded to show that the row goes on.
 */

(function () {

function fit_tabs() {
  var list = document.querySelector("nav.tabs ul");
  var active, list_box, tab_box;

  function fade_tabs() {
    var hidden = list.scrollWidth - list.clientWidth;

    // A fractional scroll position can stop a pixel short of either end.
    list.classList.toggle("fade-start", list.scrollLeft > 1);
    list.classList.toggle("fade-end", list.scrollLeft < hidden - 1);
  }

  if (!list)
    return;
  active = list.querySelector("a.active");
  if (active && list.scrollWidth > list.clientWidth) {
    list_box = list.getBoundingClientRect();
    tab_box = active.getBoundingClientRect();
    list.scrollLeft += tab_box.left - list_box.left - (list_box.width - tab_box.width) / 2;
  }
  fade_tabs();
  list.addEventListener("scroll", fade_tabs, { passive: true });
  window.addEventListener("resize", fade_tabs);
}

document.addEventListener("DOMContentLoaded", fit_tabs);

})();