meta-lightbox/src/js/window.js

/*
 * Lightbox window
 */

import Events from "./_events";

const W = window;
const axios = require("axios");

class MetaWindow {
  state = {
    content: "",
    type: ["empty"],
    shown: false,
    loading: false,
    error: false,
    embed: false,
    collections: [],
    current: null,
    target: null,
  };

  init() {
    const ui = this;
    console.log(`MetaWindow: [links] init`);

    // collect new collections
    document
      .querySelectorAll('[data-toggle="lightbox"],[data-gallery="${gallery}"]')
      .forEach((el) => {
        const gallery = el.getAttribute("data-gallery");
        if (gallery) {
          ui.state.collections[gallery] = [];
          document
            .querySelectorAll(
              `[data-toggle="lightbox"][data-gallery="${gallery}"]`
            )
            .forEach((el) => {
              ui.state.collections[gallery].push(el);
            });
        }

        // click handler
        el.addEventListener("click", (e) => {
          e.preventDefault();
          console.log(`MetaWindow: [link] click`);

          const el = e.currentTarget;
          const link = el.getAttribute("href") || el.getAttribute("data-href");
          const embed = el.getAttribute("data-embed");
          ui.state.current = el;

          if (embed) {
            ui.embed(link);
          } else {
            ui.load(link);
          }

          const title = el.getAttribute("data-title");
          if (title) {
            ui.setCaption(title);
          }
        });
      });
  }

  constructor(
    state = {
      shown: false,
    },
    action
  ) {
    const ui = this;

    ui.name = ui.constructor.name;
    console.log(`${ui.name}: init`);
    ui.axios = axios;

    ui.setState(state);
    switch (action) {
      case "show":
        ui.hide();
        break;
      case "hide":
        ui.hide();
        break;
    }

    W.dispatchEvent(new Event(`{ui.name}.init`));
  }

  show = () => {
    const ui = this;
    console.log(`${ui.name}: show`);

    ui.setState({
      shown: true,
    });
    W.dispatchEvent(new Event(`{ui.name}.show`));
  };

  hide = () => {
    const ui = this;

    console.log(`${ui.name}: hide`);
    ui.setState({
      shown: false,
    });
    W.dispatchEvent(new Event(`{ui.name}.hide`));
  };

  next = () => {
    const ui = this;
    const el = ui.state.current;
    const gallery = el.getAttribute("data-gallery");

    let i = ui._currIndex();
    if (i < ui.state.collections[gallery].length - 1) {
      i++;
    } else {
      i = 0;
    }

    ui.state.collections[gallery][i].click();

    console.log(`${ui.name}: next`);
    W.dispatchEvent(new Event(`{ui.name}.next`));
  };

  prev = () => {
    const ui = this;
    const el = ui.state.current;
    const gallery = el.getAttribute("data-gallery");

    let i = ui._currIndex();
    if (i > 0) {
      i--;
    } else {
      i = ui.state.collections[gallery].length - 1;
    }

    ui.state.collections[gallery][i].click();

    console.log(`${ui.name}: prev`);
    W.dispatchEvent(new Event(`{ui.name}.prev`));
  };

  reset = () => {
    const ui = this;

    ui.setState({
      content: "",
      type: ["empty"],
      shown: false,
      loading: false,
      error: false,
      embed: false,
      //collections: [],
      //current: null,
      //target: null,
    });
  };

  load = (link) => {
    const ui = this;
    const axios = ui.axios;

    ui.reset();
    ui.setState({
      loading: true,
    });
    ui.show();

    axios
      .get(link, {
        responseType: "arraybuffer",
      })
      .then((resp) => {
        // handle success
        console.log(
          `${ui.name}: response content-type: ${resp.headers["content-type"]}`
        );
        const json = false;

        switch (resp.headers["content-type"]) {
          case "image/jpeg":
          case "image/png":
          case "image/svg+xml":
          case "image/bmp":
          case "image/gif":
          case "image/tiff":
          case "image/webp":
          // irregular types:
          case "image/jpg":
          case "image/svg":
            //json = JSON.parse(ui._abToString(resp.data));
            ui.setContent(
              `<img src="data:${
                resp.headers["content-type"]
              };base64,${ui._imageEncode(resp.data)}" />`,
              `meta-${ui.name}--image`
            );
            break;
          case "application/json":
          case "application/ld+json":
          // irregular types:
          case "application/json; charset=UTF-8":
            ui.setContent(`${json["Content"]}`, [
              `meta-${ui.name}--text`,
              `meta-${ui.name}--html`,
              `meta-${ui.name}--json`,
            ]);

            break;
          case "text/html":
          case "application/xhtml+xml":
          case "text/plain":
          // irregular types:
          case "text/html; charset=UTF-8":
          case "application/xhtml+xml; charset=UTF-8":
          case "text/plain; charset=UTF-8":
            ui.setContent(ui._abToString(resp.data), [
              `meta-${ui.name}--text`,
              `meta-${ui.name}--html`,
              `meta-${ui.name}--pajax`,
            ]);
            break;
          default:
            console.warn(`${ui.name}: Unknown response content-type!`);
            break;
        }

        W.dispatchEvent(new Event(`{ui.name}.loaded`));
      })
      .catch((error) => {
        console.error(error);

        let msg = "";

        if (error.response) {
          switch (error.response.status) {
            case 404:
              msg = "Not Found.";
              break;
            case 500:
              msg = "Server issue, please try again latter.";
              break;
            default:
              msg = "Something went wrong.";
              break;
          }
        } else if (error.request) {
          msg = "No response received";
        } else {
          console.warn("Error", error.message);
        }

        ui.setState({
          error: msg,
        });

        W.dispatchEvent(new Event(`{ui.name}.error`));
      })
      .then(() => {
        ui.setState({
          loading: false,
        });
      });
  };

  _currIndex = () => {
    const ui = this;
    const el = ui.state.current;
    const gallery = el.getAttribute("data-gallery");

    return ui.state.collections[gallery].indexOf(el);
  };

  embed = (link) => {
    const ui = this;
    console.log(`${ui.name}: embed`);

    ui.reset();
    ui.setState({
      embed: link,
      loading: false,
      type: [`meta-${ui.name}--embed`, `meta-${ui.name}--video`],
    });

    ui.show();
  };

  setCaption = (title) => {
    const ui = this;
    console.log(`${ui.name}: setCaption`);

    ui.state.caption = title;
  };

  getCaption = () => {
    const ui = this;
    return ui.state.caption;
  };

  _abToString = (arrayBuffer) => {
    return String.fromCharCode.apply(null, new Uint8Array(arrayBuffer));
  };

  _imageEncode = (arrayBuffer) => {
    const u8 = new Uint8Array(arrayBuffer);
    const b64encoded = btoa(
      [].reduce.call(
        new Uint8Array(arrayBuffer),
        (p, c) => {
          return p + String.fromCharCode(c);
        },
        ""
      )
    );

    return b64encoded;
  };

  setContent = (html, type) => {
    const ui = this;
    console.log(`${ui.name}: setContent`);

    let typeArr = type
      ? type
      : [`meta-${ui.name}--html`, `meta-${ui.name}--text`];
    if (!Array.isArray(typeArr)) {
      typeArr = type.split(" ");
    }

    ui.setState({
      content: html,
      type: typeArr,
    });
  };

  getHtml = () => {
    const ui = this;

    if (ui.state.embed) {
      const youtubeEmbed = require("youtube-embed");
      const embedLink = youtubeEmbed(ui.state.embed);
      ui.state.content = `<iframe width="600" height="380" src="${embedLink}" frameborder="0"></iframe>`;
    }

    return ui.state.content;
  };

  setState(state) {
    const ui = this;
    ui.state = Object.assign({}, ui.state, state);
    ui.render();
  }

  render() {
    const ui = this;
    const name = ui.name;

    const navs = null;
    const el = ui.state.current;

    ui.state.target.innerHTML = "";
    const meta = document.createElement("div");
    meta.classList.add(`meta-${name}`);
    meta.classList.add(...ui.state.type);
    ui.state.target.append(meta);

    const metaOverlay = document.createElement("div");
    metaOverlay.classList.add(`meta-${name}-overlay`);
    if (ui.state.shown) {
      metaOverlay.classList.add(`meta-${name}-overlay--open`);
    }
    if (ui.state.loading) {
      metaOverlay.classList.add(`meta-${name}-overlay--loading`);
    }
    if (ui.state.error) {
      metaOverlay.classList.add(`meta-${name}-overlay--error`);
    }
    meta.append(metaOverlay);

    const metaContent = document.createElement("div");
    metaContent.classList.add("meta-content");
    metaOverlay.append(metaContent);

    const btnClose = document.createElement("button");
    btnClose.classList.add("meta-nav", "meta-close", "a");
    btnClose.innerHTML =
      '<i class="icon fa fas fa-times"></i>' +
      ' <span class="visually-hidden">Close</span>';
    btnClose.addEventListener("click", (e) => {
      e.preventDefault();
      ui.hide();
    });
    metaContent.append(btnClose);

    if (el) {
      const gallery = el.getAttribute("data-gallery");
      if (gallery && ui.state.collections[gallery].length > 1) {
        const navs = document.createElement("nav");
        navs.classList.add("meta-navs");

        const prevBtn = document.createElement("button");
        prevBtn.classList.add(
          "meta-nav",
          "meta-nav-arrow",
          "meta-nav-arrow__prev",
          "a"
        );
        prevBtn.innerHTML =
          '<i class="icon fa fas fa-chevron-left"></i>' +
          ' <span class="visually-hidden">Previous</span>';
        prevBtn.addEventListener("click", (e) => {
          e.preventDefault();
          ui.prev();
        });
        navs.append(prevBtn);

        const nextBtn = document.createElement("button");
        nextBtn.classList.add(
          "meta-nav",
          "meta-nav-arrow",
          "meta-nav-arrow__next",
          "a"
        );
        nextBtn.innerHTML =
          '<i class="icon fa fas fa-chevron-right"></i>' +
          ' <span class="visually-hidden">Next</span>';
        nextBtn.addEventListener("click", (e) => {
          e.preventDefault();
          ui.next();
        });
        navs.append(nextBtn);

        metaContent.append(navs);
      }
    }

    const content = document.createElement("section");
    content.classList.add("meta-wrap", "typography");
    content.innerHTML = ui.getHtml();
    metaContent.append(content);

    if (ui.state.error) {
      const error = document.createElement("div");
      error.classList.add("meta-error");
      error.innerHTML = ui.state.error;
      metaContent.append(error);
    } else if (ui.state.caption) {
      const caption = document.createElement("div");
      caption.classList.add("meta-caption");
      caption.innerHTML = ui.getCaption();
      metaContent.append(caption);
    }

    return ui;
  }
}

export default MetaWindow;