pinpot

A little bookmark tool
log files refs
popup.html (4642B)
      1<!doctype html>
      2<html lang="en">
      3  <head>
      4    <meta charset="utf-8">
      5    <link rel="stylesheet" href="styles.css">
      6    <script src="libs/alpine.js" defer></script>
      7    <script src="popup.js" defer></script>
      8  </head>
      9  <body>
     10    <div id="popup" x-data="{ data: null, current: null, list: [], more: false }">
     11      <template x-if="current">
     12        <div
     13          id="preview"
     14          x-bind:class="current.id ? 'preview--saved' : ''"
     15        >
     16          <div class="preview-image">
     17            <a
     18              x-bind:href="current.url"
     19              x-on:click.debounce.10ms="window.close()"
     20            >
     21              <img
     22                x-bind:src="current.image"
     23                x-on:load="pp_load_image($event)"
     24              >
     25            </a>
     26          </div>
     27          <div class="preview-info">
     28            <h4>
     29              <a
     30                x-bind:href="current.url"
     31                x-bind:title="current.title"
     32                x-text="current.title"
     33                x-on:click.debounce.10ms="window.close()"
     34              ></a>
     35            </h4>
     36            <template x-if="current.description">
     37              <p x-text="current.description"></p>
     38            </template>
     39            <span x-text="current.host"></span>
     40              <div class="actions">
     41                <button
     42                  x-show="current.id && !current.is_pinned"
     43                  x-on:click="pp_do_update(current.id, true)"
     44                  class="pin"
     45                >Pin</button>
     46                <button
     47                  x-show="current.id && current.is_pinned"
     48                  x-on:click="pp_do_update(current.id, false)"
     49                  class="unpin"
     50                >Unpin</button>
     51                <button
     52                  x-show="current.id"
     53                  class="delete"
     54                  x-on:click="pp_do_delete(current.id)"
     55                >Delete</button>
     56                <button
     57                  x-show="!current.id"
     58                  class="create"
     59                  x-on:click="pp_do_create(current)"
     60                >Save</button>
     61              </div>
     62          </div>
     63        </div>
     64      </template>
     65      <ul id="pins">
     66        <template
     67          x-for="(item, idx) in list"
     68          :key="item.id"
     69        >
     70          <template x-if="item.is_pinned">
     71            <li
     72              x-bind:class="data?.id === item.id ? 'pin--active' : ''"
     73              x-bind:title="item.title"
     74              class="list-pin"
     75            >
     76              <div class="pin-image">
     77                <a
     78                  x-bind:href="item.url"
     79                  x-on:click.debounce.10ms="window.close()"
     80                >
     81                  <img
     82                    x-bind:src="item.image"
     83                    x-on:load="pp_load_image($event)"
     84                  >
     85                </a>
     86              </div>
     87            </li>
     88          </template>
     89        </template>
     90      </ul>
     91      <input
     92        id="search"
     93        type="search"
     94        placeholder="Search"
     95        autocomplete="off"
     96        spellcheck="false"
     97      >
     98      <ul id="list">
     99        <template
    100          x-for="(item, idx) in list"
    101          :key="item.id"
    102        >
    103          <li
    104            x-show="more || idx < 3"
    105            x-bind:class="data?.id === item.id ? 'item--active' : ''"
    106            class="list-item"
    107          >
    108            <div class="item-image">
    109              <a
    110                x-bind:href="item.url"
    111                x-on:click.debounce.10ms="window.close()"
    112              >
    113                <img
    114                  x-bind:src="item.image"
    115                  x-on:load="pp_load_image($event)"
    116                >
    117              </a>
    118            </div>
    119            <div class="item-info">
    120              <h4>
    121                <a
    122                  x-bind:href="item.url"
    123                  x-ind:title="item.title"
    124                  x-text="item.title"
    125                  x-on:click.debounce.10ms="window.close()"
    126                ></a>
    127              </h4>
    128              <span x-text="item.host"></span>
    129            </div>
    130            <button
    131              x-show="current?.id !== item.id"
    132              x-on:click="pp_do_open(item)"
    133              class="item-open"
    134            >
    135              <span class="icon"></span>
    136            </button>
    137            <button
    138              x-show="current?.id === item.id"
    139              x-on:click="pp_do_close()"
    140              class="item-close"
    141            >
    142              <span class="icon"></span>
    143            </button>
    144          </li>
    145        </template>
    146      </ul>
    147      <button
    148        x-show="!more"
    149        class="list-more"
    150        x-on:click="more = true"
    151      >View all</button>
    152    </div>
    153  </body>
    154</html>