bend-n.github.io - website


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

customElements.define(
  "screenshot-list",
  class extends HTMLElement {
    constructor() {
      super();
    }
    connectedCallback() {
      if (!this.hasAttribute("images")) throw new Error("no images supplied");
      const images = this.getAttribute("images").split(" ");
      let imgs = "";
      images.forEach((image) => {
        imgs += `<img class="screenshot" src="${image}"></img>`;
      });
      const style = `
      .screenshot {
        max-width: 350px;
        display: inline-block;
        transition: var(--transition-length) var(--ease) all;
        margin: 0 10px;
      }
      
      .screenshot:hover {
        transform: scale(1.09);
      }
      
      .screenshot_list {
        text-align: center;
        overflow-x: scroll;
      }`;
      const html = `
      <style>${style}</style>
      <div class=screenshot_list>${imgs}\n</div>`;
      this.innerHTML = html;
      console.log(html);
    }
  }
);