File size: 3,374 Bytes
b39afbe
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<div class="relative flex"><div
    x-data="gallery"
    class="flex w-full justify-center"
  >
    <div
      x-show="value?.length > 0"
      x-on:keydown.right="next"
      x-on:keydown.left="prev"
      tabindex="0"
      role="region"
      aria-labelledby="carousel-label"
      class="flex"
    >
      <h2 id="carousel-label" class="sr-only" hidden>Carousel</h2>
      <div class="flex justify-center items-center">
        <!-- Prev Button -->
        <button
          x-on:click="prev"
          x-show="value?.length > 1"
          class="absolute left-0 top-1/2 transform -translate-y-1/2 text-6xl"
          :aria-disabled="atBeginning"
          :tabindex="atEnd ? -1 : 0"
          :class="{ 'opacity-50 cursor-not-allowed': atBeginning }"
        >
          <span aria-hidden="true">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-8 w-8 text-gray-600"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="3"
            ><path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M15 19l-7-7 7-7"
              /></svg>
          </span>
          <span class="sr-only">Skip to previous slide page</span>
        </button>
        <!-- Next Button -->
        <button
          x-on:click="next"
          x-show="value?.length > 1"
          class="absolute right-0 top-1/2 transform -translate-y-1/2 text-6xl"
          :aria-disabled="atEnd"
          :tabindex="atEnd ? -1 : 0"
          :class="{ 'opacity-50 cursor-not-allowed': atEnd }"
        >
          <span aria-hidden="true">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-8 w-8 text-gray-600"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="3"
            ><path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M9 5l7 7-7 7"
              /></svg>
          </span>
          <span class="sr-only">Skip to next slide page</span>
        </button>

        <span id="carousel-content-label" class="sr-only" hidden>Carousel</span>
        <ul
          x-ref="slider"
          tabindex="0"
          role="listbox"
          aria-labelledby="carousel-content-label"
          class="flex w-full snap-x snap-mandatory overflow-x-scroll"
        >
          <template x-for="(image, index) in value" :key="index">
            <li
              x-bind="disableNextAndPreviousButtons"
              class="flex w-full shrink-0 snap-start flex-col items-center justify-center"
              role="option"
              @click="workbench.showExtension('omni-core-filemanager',{focusedObject:image})"
            >

              <img
                class="w-full"
                :src="'/fid/'+(image.fid || image.ticket?.fid) + '?width=256&height=256&fit=contain'"
                x-show="'/fid/'+(image.fid)"
                @error="$event.target.dataset.failedOnce ? console.error('missing error.jpg') : ($event.target.dataset.failedOnce = true, $event.target.src = 'error.jpg')"
              />
              <button x-bind="focusableWhenVisible" class="text-sm"></button>
            </li>
          </template>
        </ul>
      </div>
    </div>
  </div>
</div>