devdocs/assets/javascripts/views/sidebar/doc_list.js

// TODO: This file was created by bulk-decaffeinate.
// Sanity-check the conversion and remove this comment.
/*
 * decaffeinate suggestions:
 * DS002: Fix invalid constructor
 * DS101: Remove unnecessary use of Array.from
 * DS206: Consider reworking classes to avoid initClass
 * DS207: Consider shorter variations of null checks
 * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
 */
app.views.DocList = class DocList extends app.View {
  constructor(...args) {
    this.render = this.render.bind(this);
    this.onOpen = this.onOpen.bind(this);
    this.onClose = this.onClose.bind(this);
    this.onClick = this.onClick.bind(this);
    this.onEnabled = this.onEnabled.bind(this);
    this.afterRoute = this.afterRoute.bind(this);
    super(...args);
  }

  static initClass() {
    this.className = "_list";
    this.attributes = { role: "navigation" };

    this.events = {
      open: "onOpen",
      close: "onClose",
      click: "onClick",
    };

    this.routes = { after: "afterRoute" };

    this.elements = {
      disabledTitle: "._list-title",
      disabledList: "._disabled-list",
    };
  }

  init() {
    this.lists = {};

    this.addSubview((this.listFocus = new app.views.ListFocus(this.el)));
    this.addSubview((this.listFold = new app.views.ListFold(this.el)));
    this.addSubview((this.listSelect = new app.views.ListSelect(this.el)));

    app.on("ready", this.render);
  }

  activate() {
    if (super.activate(...arguments)) {
      for (var slug in this.lists) {
        var list = this.lists[slug];
        list.activate();
      }
      this.listSelect.selectCurrent();
    }
  }

  deactivate() {
    if (super.deactivate(...arguments)) {
      for (var slug in this.lists) {
        var list = this.lists[slug];
        list.deactivate();
      }
    }
  }

  render() {
    let html = "";
    for (var doc of Array.from(app.docs.all())) {
      html += this.tmpl("sidebarDoc", doc, {
        fullName: app.docs.countAllBy("name", doc.name) > 1,
      });
    }
    this.html(html);
    if (!app.isSingleDoc() && app.disabledDocs.size() !== 0) {
      this.renderDisabled();
    }
  }

  renderDisabled() {
    this.append(
      this.tmpl("sidebarDisabled", { count: app.disabledDocs.size() }),
    );
    this.refreshElements();
    this.renderDisabledList();
  }

  renderDisabledList() {
    if (app.settings.get("hideDisabled")) {
      this.removeDisabledList();
    } else {
      this.appendDisabledList();
    }
  }

  appendDisabledList() {
    let doc;
    let html = "";
    const docs = [].concat(...Array.from(app.disabledDocs.all() || []));

    while ((doc = docs.shift())) {
      if (doc.version != null) {
        var versions = "";
        while (true) {
          versions += this.tmpl("sidebarDoc", doc, { disabled: true });
          if ((docs[0] != null ? docs[0].name : undefined) !== doc.name) {
            break;
          }
          doc = docs.shift();
        }
        html += this.tmpl("sidebarDisabledVersionedDoc", doc, versions);
      } else {
        html += this.tmpl("sidebarDoc", doc, { disabled: true });
      }
    }

    this.append(this.tmpl("sidebarDisabledList", html));
    this.disabledTitle.classList.add("open-title");
    this.refreshElements();
  }

  removeDisabledList() {
    if (this.disabledList) {
      $.remove(this.disabledList);
    }
    this.disabledTitle.classList.remove("open-title");
    this.refreshElements();
  }

  reset(options) {
    if (options == null) {
      options = {};
    }
    this.listSelect.deselect();
    if (this.listFocus != null) {
      this.listFocus.blur();
    }
    this.listFold.reset();
    if (options.revealCurrent || app.isSingleDoc()) {
      this.revealCurrent();
    }
  }

  onOpen(event) {
    $.stopEvent(event);
    const doc = app.docs.findBy("slug", event.target.getAttribute("data-slug"));

    if (doc && !this.lists[doc.slug]) {
      this.lists[doc.slug] = doc.types.isEmpty()
        ? new app.views.EntryList(doc.entries.all())
        : new app.views.TypeList(doc);
      $.after(event.target, this.lists[doc.slug].el);
    }
  }

  onClose(event) {
    $.stopEvent(event);
    const doc = app.docs.findBy("slug", event.target.getAttribute("data-slug"));

    if (doc && this.lists[doc.slug]) {
      this.lists[doc.slug].detach();
      delete this.lists[doc.slug];
    }
  }

  select(model) {
    this.listSelect.selectByHref(model != null ? model.fullPath() : undefined);
  }

  reveal(model) {
    this.openDoc(model.doc);
    if (model.type) {
      this.openType(model.getType());
    }
    this.focus(model);
    this.paginateTo(model);
    this.scrollTo(model);
  }

  focus(model) {
    if (this.listFocus != null) {
      this.listFocus.focus(this.find(`a[href='${model.fullPath()}']`));
    }
  }

  revealCurrent() {
    let model;
    if ((model = app.router.context.type || app.router.context.entry)) {
      this.reveal(model);
      this.select(model);
    }
  }

  openDoc(doc) {
    if (app.disabledDocs.contains(doc) && doc.version) {
      this.listFold.open(
        this.find(`[data-slug='${doc.slug_without_version}']`),
      );
    }
    this.listFold.open(this.find(`[data-slug='${doc.slug}']`));
  }

  closeDoc(doc) {
    this.listFold.close(this.find(`[data-slug='${doc.slug}']`));
  }

  openType(type) {
    this.listFold.open(
      this.lists[type.doc.slug].find(`[data-slug='${type.slug}']`),
    );
  }

  paginateTo(model) {
    if (this.lists[model.doc.slug] != null) {
      this.lists[model.doc.slug].paginateTo(model);
    }
  }

  scrollTo(model) {
    $.scrollTo(this.find(`a[href='${model.fullPath()}']`), null, "top", {
      margin: app.isMobile() ? 48 : 0,
    });
  }

  toggleDisabled() {
    if (this.disabledTitle.classList.contains("open-title")) {
      this.removeDisabledList();
      app.settings.set("hideDisabled", true);
    } else {
      this.appendDisabledList();
      app.settings.set("hideDisabled", false);
    }
  }

  onClick(event) {
    let slug;
    const target = $.eventTarget(event);
    if (
      this.disabledTitle &&
      $.hasChild(this.disabledTitle, target) &&
      target.tagName !== "A"
    ) {
      $.stopEvent(event);
      this.toggleDisabled();
    } else if ((slug = target.getAttribute("data-enable"))) {
      $.stopEvent(event);
      const doc = app.disabledDocs.findBy("slug", slug);
      if (doc) {
        app.enableDoc(doc, this.onEnabled, this.onEnabled);
      }
    }
  }

  onEnabled() {
    this.reset();
    this.render();
  }

  afterRoute(route, context) {
    if (context.init) {
      if (this.activated) {
        this.reset({ revealCurrent: true });
      }
    } else {
      this.select(context.type || context.entry);
    }
  }
};
app.views.DocList.initClass();