fpaste/public/js/main.js

$(document).ready(() => {
  const menu = document.querySelector("menu");
  switch(window.location.pathname.split(/\//)[1]) {
    case "v": menu.querySelector("li:nth-child(2)").classList.add("active"); break;
    case "u":
      menu.querySelector("li:nth-child(4)").classList.add("active");
      menu.querySelector("li:nth-child(4) > ul").classList.remove("hidden");
    break;
    case "a":
      menu.querySelector("li:nth-child(6)").classList.add("active");
      menu.querySelector("li:nth-child(6) > ul").classList.remove("hidden");
    break;
    default:
      menu.querySelector("li:nth-child(1)").classList.add("active");
    break;
  }

  // timeago
  const epochs = [
    ["year", 31536000],
    ["month", 2592000],
    ["day", 86400],
    ["hour", 3600],
    ["minute", 60],
    ["second", 1]
  ];
  const getDuration = timeAgoInSeconds => {
    for (let [name, seconds] of epochs) {
      const interval = ~~(timeAgoInSeconds / seconds);
      if (interval >= 1) {
        return {
          interval: interval,
          epoch: name
        };
      }
    }
  };
  const timeAgo = date => {
    const timeAgoInSeconds = ~~((new Date() - new Date(date)) / 1000);
    const {interval, epoch} = getDuration(timeAgoInSeconds);
    const suffix = interval === 1 ? "" : "s";
    return `${interval} ${epoch}${suffix} ago`;
  };

  document.querySelectorAll("time").forEach(e => e.innerHTML = timeAgo(e.title));

  $.widget("custom.combobox", {
    _create: function() {
      this.wrapper = $("<span>")
        .addClass("custom-combobox")
        .insertAfter(this.element);
      this.element.hide();
      this._createAutocomplete();
      this._createShowAllButton();
    },
    _createAutocomplete: function() {
      var selected = this.element.children(":selected"),
          value = selected.val() ? selected.text() : "";
      this.input = $("<input>")
        .appendTo(this.wrapper)
        .val(value)
        .attr("title", "")
        .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
        .autocomplete({
          delay: 0,
          minLength: 0,
          source: $.proxy(this, "_source")
        })
        .tooltip({
          classes: {
            "ui-tooltip": "ui-state-highlight"
          }
        });
      this._on(this.input, {
        autocompleteselect: function(event, ui) {
          ui.item.option.selected = true;
          this._trigger("select", event, {
            item: ui.item.option
          });
        },
        autocompletechange: "_removeIfInvalid"
      });
    },
    _createShowAllButton: function() {
      var input = this.input,
        wasOpen = false;
      $("<a>")
        .attr("tabIndex", -1)
        .attr("title", "Show All Items")
        .tooltip()
        .appendTo(this.wrapper)
        .button({
          icons: {
            primary: "ui-icon-triangle-1-s"
          },
          text: false
        })
        .removeClass("ui-corner-all")
        .addClass("custom-combobox-toggle ui-corner-right")
        .on("mousedown", function() {
          wasOpen = input.autocomplete("widget").is(":visible");
        })
        .on("click", function() {
          input.trigger("focus");
          if (wasOpen) return;
          input.autocomplete("search", "");
        });
    },
    _source: function(request, response) {
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
      response(this.element.children("option").map(function() {
        var text = $(this).text();
        if (this.value && (!request.term || matcher.test(text)))
          return {
            label: text,
            value: text,
            option: this
          };
      }));
    },
    _removeIfInvalid: function(event, ui) {
      if (ui.item) return;
      var value = this.input.val(),
        valueLowerCase = value.toLowerCase(),
        valid = false;
      this.element.children("option").each(function() {
        if ($(this).text().toLowerCase() === valueLowerCase) {
          this.selected = valid = true;
          return false;
        }
      });
      if (valid) return;
      this.input
        .val("")
        .attr("title", value + " didn't match any item")
        .tooltip("open");
      this.element.val("");
      this._delay(function() {
        this.input.tooltip("close").attr("title", "");
      }, 2500);
      this.input.autocomplete("instance").term = "";
    },
    _destroy: function() {
      this.wrapper.remove();
      this.element.show();
    }
  });
  $("#lang").combobox();
  $("#toggle").on("click", function() {
    $("#lang").toggle();
  });
});