life-diary/public/comp/ld-home-album.html

Life Diary ❤️ your albums, your journey, your data

<style>
  ul > li[is="ld-home-album"] {
    list-style: none;
    display: flex;
    padding: 0;
    border-radius: 4px;
    opacity: .7;
  }
  ul > li[is="ld-home-album"]:hover {
    opacity: 1;
    z-index: 1;
    box-shadow: 0 8px 6px -6px silver;
    transform: scale(1.01);
  }
  ul > li[is="ld-home-album"] > * {
    padding: 16px;
  }
</style>

<style scoped>
  a, a:visited {
    flex-grow: 1;
    color: initial;
    font-weight: bold;
  }
  small {
    cursor: default;
  }
</style>

<li is="ld-home-album">
  <a onclick={{visualize}} href={{href}}>{{this.name}}</a>
  <small>{{this.details}}</small>
  <button class="remover" title="Delete" onclick={{remove}}>❎</button>
</li>

<script type="module">

  /**
   * ISC License
   *
   * Copyright (c) 2020, Andrea Giammarchi, @WebReflection
   *
   * Permission to use, copy, modify, and/or distribute this software for any
   * purpose with or without fee is hereby granted, provided that the above
   * copyright notice and this permission notice appear in all copies.
   *
   * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
   * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
   * AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
   * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
   * LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
   * OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
   * PERFORMANCE OF THIS SOFTWARE.
   *
   */

  const stop = event => {
    event.preventDefault();
    event.stopImmediatePropagation();
  };

  const style = element => {
    element.style.transition = 'all 0.2s ease-in';
  };

  export default {
    props: {name: this.name || '', details: ''},
    setup(element) {
      const encoded = () => encodeURIComponent(element.name);
      const endPoint = () => `/album/${encoded()}`;
      const dispatch = (type, detail) => element.dispatchEvent(
        new CustomEvent(type, {detail})
      );
      Promise.all([
        fetch(`/files/${encoded()}`).then(b => b.text()),
        fetch(`/size/${encoded()}`).then(b => b.text())
      ])
      .then(([files, bytes]) => {
        element.details = `${files} - ${bytes}`;
      });

      // avoid transition moving everything around
      setTimeout(style, 0, element);

      return {
        get href() { return endPoint(); },
        remove(event) {
          stop(event);
          if (confirm(`Are you sure to delete ${element.name}?\nIt has ${element.details}`)) {
            fetch(endPoint(), {method: 'DELETE'}).then(b => b.text()).then(() => {
              dispatch('deleted');
            });
          }
        },
        visualize(event) {
          stop(event);
          dispatch('visualize', element.name);
        }
      };
    }
  };
</script>