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>