lookbook 0.8.3 → 1.0.0.beta.1

data/app/assets/lookbook/css/code_theme.css

@@ -1,214 +0,0 @@
-/*
- * GitHub style for Pygments
- * Courtesy of GitHub.com
- */
-
-.highlight .hll {
-  background-color: #f8f8f8;
-  border: 1px solid #ccc;
-  padding: 6px 10px;
-  border-radius: 3px;
-}
-.highlight .c {
-  color: #999988;
-  font-style: italic;
-}
-.highlight .err {
-  color: #a61717;
-  background-color: #e3d2d2;
-}
-.highlight .k {
-  font-weight: bold;
-}
-.highlight .o {
-  font-weight: bold;
-}
-.highlight .cm {
-  color: #999988;
-  font-style: italic;
-}
-.highlight .cp {
-  color: #999999;
-  font-weight: bold;
-}
-.highlight .c1 {
-  color: #999988;
-  font-style: italic;
-}
-.highlight .cs {
-  color: #999999;
-  font-weight: bold;
-  font-style: italic;
-}
-.highlight .gd {
-  color: #000000;
-  background-color: #ffdddd;
-}
-.highlight .gd .x {
-  color: #000000;
-  background-color: #ffaaaa;
-}
-.highlight .ge {
-  font-style: italic;
-}
-.highlight .gr {
-  color: #aa0000;
-}
-.highlight .gh {
-  color: #999999;
-}
-.highlight .gi {
-  color: #000000;
-  background-color: #ddffdd;
-}
-.highlight .gi .x {
-  color: #000000;
-  background-color: #aaffaa;
-}
-.highlight .go {
-  color: #888888;
-}
-.highlight .gp {
-  color: #555555;
-}
-.highlight .gs {
-  font-weight: bold;
-}
-.highlight .gu {
-  color: #800080;
-  font-weight: bold;
-}
-.highlight .gt {
-  color: #aa0000;
-}
-.highlight .kc {
-  font-weight: bold;
-}
-.highlight .kd {
-  font-weight: bold;
-}
-.highlight .kn {
-  font-weight: bold;
-}
-.highlight .kp {
-  font-weight: bold;
-}
-.highlight .kr {
-  font-weight: bold;
-}
-.highlight .kt {
-  color: #445588;
-  font-weight: bold;
-}
-.highlight .m {
-  color: #009999;
-}
-.highlight .s {
-  color: #dd1144;
-}
-.highlight .n {
-  color: #333333;
-}
-.highlight .na {
-  color: teal;
-}
-.highlight .nb {
-  color: #0086b3;
-}
-.highlight .nc {
-  color: #445588;
-  font-weight: bold;
-}
-.highlight .no {
-  color: teal;
-}
-.highlight .ni {
-  color: purple;
-}
-.highlight .ne {
-  color: #990000;
-  font-weight: bold;
-}
-.highlight .nf {
-  color: #990000;
-  font-weight: bold;
-}
-.highlight .nn {
-  color: #555555;
-}
-.highlight .nt {
-  color: navy;
-}
-.highlight .nv {
-  color: teal;
-}
-.highlight .ow {
-  font-weight: bold;
-}
-.highlight .w {
-  color: #bbbbbb;
-}
-.highlight .mf {
-  color: #009999;
-}
-.highlight .mh {
-  color: #009999;
-}
-.highlight .mi {
-  color: #009999;
-}
-.highlight .mo {
-  color: #009999;
-}
-.highlight .sb {
-  color: #dd1144;
-}
-.highlight .sc {
-  color: #dd1144;
-}
-.highlight .sd {
-  color: #dd1144;
-}
-.highlight .s2 {
-  color: #dd1144;
-}
-.highlight .se {
-  color: #dd1144;
-}
-.highlight .sh {
-  color: #dd1144;
-}
-.highlight .si {
-  color: #dd1144;
-}
-.highlight .sx {
-  color: #dd1144;
-}
-.highlight .sr {
-  color: #009926;
-}
-.highlight .s1 {
-  color: #dd1144;
-}
-.highlight .ss {
-  color: #990073;
-}
-.highlight .bp {
-  color: #999999;
-}
-.highlight .vc {
-  color: teal;
-}
-.highlight .vg {
-  color: teal;
-}
-.highlight .vi {
-  color: teal;
-}
-.highlight .il {
-  color: #009999;
-}
-.highlight .gc {
-  color: #999;
-  background-color: #eaf2f5;
-}

data/app/assets/lookbook/js/components/app.js

@@ -1,55 +0,0 @@
-import createSocket from "../lib/socket";
-
-const morphOpts = {
-  key(el) {
-    return el.getAttribute("key") ? el.getAttribute("key") : el.id;
-  },
-  lookahead: false,
-  updating(el, toEl, childrenOnly, skip) {
-    if (
-      el.getAttribute &&
-      el.getAttribute("data-morph-strategy") === "replace"
-    ) {
-      el.innerHTML = toEl.innerHTML;
-      return skip();
-    }
-  },
-};
-
-export default function app() {
-  return {
-    init() {
-      if (window.SOCKET_PATH) {
-        const socket = createSocket(window.SOCKET_PATH);
-        socket.addListener("Lookbook::ReloadChannel", () => this.refresh());
-      }
-    },
-    async update() {
-      const response = await fetch(window.document.location);
-      if (!response.ok) return window.location.reload();
-      const html = await response.text();
-      const newDoc = new DOMParser().parseFromString(html, "text/html");
-      this.morph(newDoc);
-      document.title = newDoc.title;
-    },
-    setLocation(loc) {
-      let path;
-      if (loc instanceof Event) {
-        path = loc.currentTarget.href;
-        loc.preventDefault();
-      } else {
-        path = loc;
-      }
-      history.pushState({}, null, path);
-      this.$dispatch("popstate");
-    },
-    refresh() {
-      this.$dispatch("refresh");
-    },
-    morph(dom) {
-      const pageHtml = dom.getElementById(this.$root.id).outerHTML;
-      Alpine.morph(this.$root, pageHtml, morphOpts);
-      this.$dispatch("page:morphed");
-    },
-  };
-}

data/app/assets/lookbook/js/components/code.js

@@ -1,5 +0,0 @@
-export default function code() {
-  return {
-    wrap: false,
-  };
-}

data/app/assets/lookbook/js/components/copy.js

@@ -1,20 +0,0 @@
-export default function copy() {
-  return {
-    get content() {
-      const target = document.getElementById(
-        this.$root.getAttribute("data-target")
-      );
-      const decoder = document.createElement("textarea");
-      decoder.innerHTML = target ? target.innerHTML : "";
-      return decoder.value.trim();
-    },
-    done: false,
-    async save() {
-      await window.navigator.clipboard.writeText(this.content);
-      this.done = true;
-      setTimeout(() => {
-        this.done = false;
-      }, 1000);
-    },
-  };
-}

data/app/assets/lookbook/js/components/embed.js

@@ -1,89 +0,0 @@
-import "iframe-resizer/js/iframeResizer";
-
-export default function embed() {
-  return {
-    init() {
-      if (!this.$store.pages.embeds[this.$root.id]) {
-        this.$store.pages.embeds[this.$root.id] = {
-          width: "100%",
-        };
-      }
-    },
-    lastWidth: null,
-    reflowing: false,
-    get resizer() {
-      if (this.$refs.iframe) {
-        if (!this.$refs.iframe.iFrameResizer) {
-          window.iFrameResize(
-            {
-              heightCalculationMethod: "lowestElement",
-              onResized: this.onIframeResized.bind(this),
-            },
-            this.$refs.iframe
-          );
-        }
-        return this.$refs.iframe.iFrameResizer;
-      }
-      return null;
-    },
-    set width(value) {
-      this.store.width = value;
-    },
-    get width() {
-      return this.store.width || "100%";
-    },
-    get height() {
-      return this.store.height;
-    },
-    get parentWidth() {
-      return Math.round(this.$root.parentElement.clientWidth);
-    },
-    get maxWidth() {
-      return this.width === "100%" ? "100%" : `${this.width}px`;
-    },
-    get store() {
-      return this.$store.pages.embeds[this.$root.id];
-    },
-    recaclulateIframeHeight() {
-      if (this.resizer) this.resizer.resize();
-    },
-    onIframeResized({ iframe, height }) {
-      if (iframe.isSameNode(this.$refs.iframe)) {
-        this.store.height = height;
-      }
-    },
-    onResizeWidth(e) {
-      const width =
-        this.resizeStartWidth - (this.resizeStartPositionX - e.pageX);
-      const boundedWidth = Math.min(
-        Math.max(Math.round(width), 200),
-        this.parentWidth
-      );
-      this.width = boundedWidth === this.parentWidth ? "100%" : boundedWidth;
-      this.recaclulateIframeHeight();
-    },
-    onResizeWidthStart(e) {
-      this.reflowing = true;
-      this.onResizeWidth = this.onResizeWidth.bind(this);
-      this.onResizeWidthEnd = this.onResizeWidthEnd.bind(this);
-      this.resizeStartPositionX = e.pageX;
-      this.resizeStartWidth = this.$refs.resizer.clientWidth;
-      window.addEventListener("pointermove", this.onResizeWidth);
-      window.addEventListener("pointerup", this.onResizeWidthEnd);
-    },
-    onResizeWidthEnd() {
-      window.removeEventListener("pointermove", this.onResizeWidth);
-      window.removeEventListener("pointerup", this.onResizeWidthEnd);
-      this.reflowing = false;
-    },
-    toggleFullWidth() {
-      if (this.width === "100%" && this.lastWidth) {
-        this.width = this.lastWidth;
-      } else {
-        this.lastWidth = this.width;
-        this.width = "100%";
-      }
-      this.$nextTick(() => this.recaclulateIframeHeight());
-    },
-  };
-}

data/app/assets/lookbook/js/components/filter.js

@@ -1,35 +0,0 @@
-export default function filter() {
-  return {
-    get active() {
-      return this.$store.filter.active;
-    },
-    focussed: false,
-    checkEsc($event) {
-      if ($event.key === "Escape") {
-        this.active ? this.clear() : this.blur();
-      }
-    },
-    clear() {
-      this.$store.filter.raw = "";
-    },
-    focus($event) {
-      if ($event && $event.target.tagName === "INPUT") {
-        return;
-      }
-      setTimeout(() => {
-        this.$dispatch("filter:focus");
-        this.$nextTick(() => {
-          this.focussed = true;
-          this.$refs.input.focus();
-        });
-      }, 0);
-    },
-    blur() {
-      setTimeout(() => {
-        this.focussed = false;
-        this.$refs.input.blur();
-        this.$dispatch("filter:blur");
-      }, 0);
-    },
-  };
-}

data/app/assets/lookbook/js/components/inspector.js

@@ -1,66 +0,0 @@
-import sizeObserver from "./sizes";
-
-export default function inspector() {
-  return {
-    width: 0,
-    height: 0,
-    init() {
-      const ro = new ResizeObserver((entries) => {
-        const rect = entries[0].contentRect;
-        this.width = Math.round(rect.width);
-        this.height = Math.round(rect.height);
-      });
-      ro.observe(this.$el);
-      this.width = Math.round(this.$el.clientWidth);
-      this.height = Math.round(this.$el.clientHeight);
-    },
-    get orientation() {
-      return this.$store.inspector.drawer.orientation;
-    },
-    get view() {
-      return this.$store.inspector.preview.view;
-    },
-    get horizontal() {
-      return this.canBeVertical ? this.orientation === "horizontal" : true;
-    },
-    get vertical() {
-      return !this.horizontal;
-    },
-    get canBeVertical() {
-      return this.width > 800;
-    },
-    get drawerHidden() {
-      return this.$store.inspector.drawer.hidden;
-    },
-    get maxDrawerHeight() {
-      return Math.round(this.height * 0.7);
-    },
-    get maxDrawerWidth() {
-      return Math.round(this.width * 0.7);
-    },
-    isActiveDrawerPanel(panel) {
-      return this.$store.inspector.drawer.panel === panel;
-    },
-    switchDrawerPanel(panel) {
-      this.$store.inspector.drawer.panel = panel;
-    },
-    isActivePreviewPanel(panel) {
-      return this.$store.inspector.preview.panel === panel;
-    },
-    switchPreviewPanel(panel) {
-      this.$store.inspector.preview.panel = panel;
-    },
-    toggleOrientation() {
-      this.$store.inspector.drawer.orientation =
-        this.orientation === "horizontal" ? "vertical" : "horizontal";
-    },
-    toggleDrawer() {
-      this.$store.inspector.drawer.hidden =
-        !this.$store.inspector.drawer.hidden;
-    },
-    preview: {
-      width: null,
-      height: null,
-    },
-  };
-}

data/app/assets/lookbook/js/components/nav-group.js

@@ -1,47 +0,0 @@
-export default function navGroup() {
-  return {
-    hidden: false,
-    children: [],
-    get id() {
-      return this.$root.id;
-    },
-    get open() {
-      return this.$store.nav.isOpen(this.id);
-    },
-    toggle() {
-      this.$store.nav.toggle(this.id);
-    },
-    getChildren() {
-      return this.$refs.items
-        ? Array.from(this.$refs.items.querySelectorAll(":scope > li > div"))
-        : [];
-    },
-    navigateToFirstChild() {
-      if (this.open) {
-        const child = this.firstVisibleChild();
-        if (child) {
-          const link = child.querySelector(":scope > a.nav-link");
-          if (link) {
-            this.setLocation(link.getAttribute("href"));
-          }
-        }
-      }
-    },
-    filter(text) {
-      this.hidden = true;
-      this.getChildren().forEach((child) => {
-        const data = Alpine.$data(child);
-        data.filter(text);
-        if (!data.hidden) {
-          this.hidden = false;
-        }
-      });
-    },
-    firstVisibleChild() {
-      return this.getChildren().find((child) => {
-        const data = Alpine.$data(child);
-        return data.hidden === false;
-      });
-    },
-  };
-}

data/app/assets/lookbook/js/components/nav-item.js

@@ -1,29 +0,0 @@
-export default function navItem(matchers) {
-  return {
-    hidden: false,
-    get id() {
-      return this.$root.id;
-    },
-    get path() {
-      return this.$root.getAttribute("data-path");
-    },
-    get active() {
-      return this.$store.nav.active === this.id;
-    },
-    navigate() {
-      this.setLocation(this.path);
-      if (this.$store.layout.mobile) {
-        this.$store.sidebar.open = false;
-      }
-    },
-    filter(text) {
-      this.hidden = false;
-      if (text.length) {
-        const matched = matchers.map((m) => m.includes(text));
-        this.hidden = !matched.filter((m) => m).length;
-      } else {
-        this.hidden = false;
-      }
-    },
-  };
-}

data/app/assets/lookbook/js/components/nav.js

@@ -1,28 +0,0 @@
-export default function nav(filterable = true) {
-  return {
-    empty: false,
-    init() {
-      if (filterable) {
-        this.$watch("$store.filter.text", () => this.filter());
-        this.$nextTick(() => {
-          this.filter();
-        });
-      }
-    },
-    filter() {
-      this.empty = true;
-      this.getChildren().forEach((child) => {
-        const data = Alpine.$data(child);
-        data.filter(this.$store.filter.text);
-        if (!data.hidden) {
-          this.empty = false;
-        }
-      });
-    },
-    getChildren() {
-      return this.$refs.items
-        ? Array.from(this.$refs.items.querySelectorAll(":scope > li > div"))
-        : [];
-    },
-  };
-}

data/app/assets/lookbook/js/components/page.js

@@ -1,25 +0,0 @@
-export default function page() {
-  return {
-    init() {},
-    scrollToTop() {
-      this.$refs.scroller.scrollTop = 0;
-    },
-    checkForNavigation(event) {
-      const link = event.target.closest("a[href]");
-      if (
-        link &&
-        !isExternalLink(link.href) &&
-        link.getAttribute("target") !== "_blank"
-      ) {
-        event.preventDefault();
-        this.setLocation(link.href);
-      }
-    },
-  };
-}
-
-function isExternalLink(url) {
-  const tmp = document.createElement("a");
-  tmp.href = url;
-  return tmp.host !== window.location.host;
-}

data/app/assets/lookbook/js/components/param.js

@@ -1,34 +0,0 @@
-import debounce from "debounce";
-
-export default function param(name, value, opts = {}) {
-  return {
-    name,
-    value,
-    updating: false,
-    init() {
-      if (opts.debounce) {
-        this.$watch(
-          "value",
-          debounce(() => this.updateIfValid(), opts.debounce)
-        );
-      } else {
-        this.$watch("value", () => this.updateIfValid());
-      }
-    },
-    setFocus() {
-      setTimeout(() => this.$root.focus(), 0);
-    },
-    updateIfValid() {
-      if (this.validate()) this.update();
-    },
-    update() {
-      const searchParams = new URLSearchParams(window.location.search);
-      searchParams.set(this.name, this.value);
-      const path = location.href.replace(location.search, "");
-      this.setLocation(`${path}?${searchParams.toString()}`);
-    },
-    validate() {
-      return this.$root.reportValidity ? this.$root.reportValidity() : true;
-    },
-  };
-}

data/app/assets/lookbook/js/components/sidebar.js

@@ -1,18 +0,0 @@
-export default function sidebar() {
-  return {
-    init() {
-      this.$nextTick(() => this.setActiveNavItem());
-    },
-    setActiveNavItem() {
-      const target = this.$el.querySelector(
-        `[data-path="${window.location.pathname}"]`
-      );
-      this.$store.nav.active = target ? target.id : "";
-    },
-    setSplits(splits) {
-      if (splits.length) {
-        this.$store.sidebar.panelSplits = [splits[0] || 1.0, splits[2] || 1.0];
-      }
-    },
-  };
-}

data/app/assets/lookbook/js/components/sizes.js

@@ -1,16 +0,0 @@
-export default function sizeObserver() {
-  return {
-    width: 0,
-    height: 0,
-    init() {
-      const ro = new ResizeObserver((entries) => {
-        const rect = entries[0].contentRect;
-        this.width = Math.round(rect.width);
-        this.height = Math.round(rect.height);
-      });
-      ro.observe(this.$el);
-      this.width = Math.round(this.$el.clientWidth);
-      this.height = Math.round(this.$el.clientHeight);
-    },
-  };
-}