Flyout: initial work for the flyout

public/_/readthedocs-config.json

@@ -63,7 +63,13 @@
       "inject_styles": true
     },
     "flyout": {
-      "translations": [],
+      "enabled": true,
+      "translations": [
+        {
+          "slug": "es",
+          "url": "/es/"
+        }
+      ],
       "versions": [
         {
           "slug": "stable",
@@ -86,7 +92,12 @@
           "url": "/en/v2.0/"
         }
       ],
-      "downloads": [],
+      "downloads": [
+        {
+          "name": "PDF",
+          "url": "/_/downloads/en/latest/"
+        }
+      ],
       "vcs": {
         "url": "https://github.com",
         "username": "readthedocs",

src/index.js

@@ -2,6 +2,7 @@ import { getReadTheDocsConfig } from "./readthedocs-config";
 import * as notification from "./notification";
 import * as analytics from "./analytics";
 import * as search from "./search";
+import * as newflyout from "./new-flyout";
 import { domReady, isReadTheDocsEmbedPresent } from "./utils";
 
 export function setup() {
@@ -21,6 +22,7 @@ export function setup() {
 
         if (!IS_PRODUCTION) {
           addons.push(search.SearchAddon);
+          addons.push(newflyout.FlyoutAddon);
         }
 
         for (const addon of addons) {

src/new-flyout.css

@@ -0,0 +1,46 @@
+/* New */
+
+:host {
+  position: fixed;
+  right: 150px;
+  bottom: 0;
+  width: 350px;
+  height: 250px;
+}
+
+:host > div {
+  border-radius: 0.5rem 0.5rem 0 0;
+  font-family: var(
+    --readthedocs-flyout-font-family,
+    "Lato",
+    "proxima-nova",
+    "Helvetica Neue",
+    "Arial",
+    "sans-serif"
+  );
+  font-size: var(--readthedocs-flyout-font-size, 0.8rem);
+  color: var(--readthedocs-flyout-color, rgb(64, 64, 64));
+  background-color: var(
+    --readthedocs-flyout-background-color,
+    rgb(234, 234, 234)
+  );
+  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12),
+    0 2px 10px 0 rgba(34, 36, 38, 0.15);
+  z-index: 3000;
+  padding: 10px;
+  overflow-y: scroll;
+}
+
+:host > div > img.logo {
+  text-align: center;
+  width: 150px;
+}
+
+:host li {
+  list-style: none;
+  display: inline-block;
+}
+
+:host li > a {
+  text-decoration: none;
+}

src/new-flyout.js

@@ -0,0 +1,171 @@
+import READTHEDOCS_LOGO from "./images/logo-wordmark-dark.svg";
+import { html, nothing, render, LitElement } from "lit";
+
+import styleSheet from "./new-flyout.css";
+import { AddonBase } from "./utils";
+
+export class FlyoutElement extends LitElement {
+  static elementName = "readthedocs-flyout";
+
+  static properties = {
+    config: { state: true },
+  };
+
+  static styles = styleSheet;
+
+  constructor() {
+    super();
+
+    this.className = this.className || "raised floating bottom-right";
+    this.config = {};
+  }
+
+  loadConfig(config) {
+    this.config = config;
+  }
+
+  renderFooter() {
+    return nothing;
+  }
+
+  renderSearch() {
+    return nothing;
+  }
+
+  renderVCS() {
+    return nothing;
+  }
+
+  renderReadTheDocs() {
+    return nothing;
+  }
+
+  renderDownloads() {
+    return html`
+      <div class="downloads">
+        <h3>Downloads</h3>
+        <ul>
+          <li><a href="">PDF</a></li>
+        </ul>
+      </div>
+    `;
+  }
+
+  renderDownloads() {
+    if (!this.config.addons.flyout.downloads) {
+      return nothing;
+    }
+
+    // NOTE: all these `render*()` functions could be merged together and use attributes
+    // to deal with the small differences between each of them
+    return html`
+      <div class="downloads">
+        <h3>Downloads</h3>
+        <ul>
+          ${this.config.addons.flyout.downloads.map(
+            (download, index) => html`
+              <li><a href="${download.url}">${download.name}</a></li>
+            `
+          )}
+        </ul>
+      </div>
+    `;
+  }
+
+  renderVersions() {
+    // TODO: use `this.config.versions.flyout` instead here.
+    // This "filter" will implies `active=True and hidden=False`
+    if (!this.config.addons.flyout.versions) {
+      return nothing;
+    }
+
+    // NOTE: all these `render*()` functions could be merged together and use attributes
+    // to deal with the small differences between each of them
+    return html`
+      <div class="versions">
+        <h3>Versions</h3>
+        <ul>
+          ${this.config.addons.flyout.versions.map(
+            (version, index) => html`
+              <li><a href="${version.url}">${version.slug}</a></li>
+            `
+          )}
+        </ul>
+      </div>
+    `;
+  }
+
+  renderLanguages() {
+    if (!this.config.addons.flyout.translations) {
+      return nothing;
+    }
+
+    // NOTE: all these `render*()` functions could be merged together and use attributes
+    // to deal with the small differences between each of them
+    return html`
+      <div class="languages">
+        <h3>Languages</h3>
+        <ul>
+          ${this.config.addons.flyout.translations.map(
+            (translation, index) => html`
+              <li><a href="${translation.url}">${translation.slug}</a></li>
+            `
+          )}
+        </ul>
+      </div>
+    `;
+    return html`
+      <div class="languages">
+        <h3>Languages</h3>
+        <ul>
+          <li><a href="">es</a></li>
+        </ul>
+      </div>
+    `;
+  }
+
+  render() {
+    // The element doesn't yet have our config, don't render it.
+    if (!this.config) {
+      // nothing is a special Lit response type
+      return nothing;
+    }
+
+    return html`
+      <div class="container">
+        <img class="logo" src="${READTHEDOCS_LOGO}" alt="Read the Docs" />
+        ${this.renderLanguages()} ${this.renderVersions()}
+        ${this.renderDownloads()} ${this.renderReadTheDocs()}
+        ${this.renderVCS()} ${this.renderSearch()} ${this.renderFooter()}
+      </div>
+    `;
+  }
+}
+
+/**
+ * Flyout addon
+ *
+ * @param {Object} config - Addon configuration object
+ */
+export class FlyoutAddon extends AddonBase {
+  constructor(config) {
+    super();
+
+    customElements.define("readthedocs-flyout", FlyoutElement);
+
+    // If there are no elements found, inject one
+    let elems = document.querySelectorAll("readthedocs-flyout");
+    if (!elems.length) {
+      elems = [new FlyoutElement()];
+      render(elems[0], document.body);
+    }
+
+    for (const elem of elems) {
+      elem.loadConfig(config);
+    }
+  }
+
+  static isEnabled(config) {
+    return config.addons && config.addons.flyout.enabled;
+  }
+}