jeawin-astro 3.0.92 → 3.0.93
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -90,92 +90,101 @@ if(num > 1){
|
|
|
90
90
|
>
|
|
91
91
|
<div class:list={["flex flex-col", {"lg:flex-row":thumbs_position=='left'}, "gap-4"]}>
|
|
92
92
|
|
|
93
|
-
|
|
94
|
-
<section class="mainSplide splide" aria-label={node_title}>
|
|
95
|
-
<div class="splide__track">
|
|
96
|
-
<ul class="splide__list">
|
|
97
|
-
{
|
|
98
|
-
nodepics.map((pic: any, idx: number) => (
|
|
99
|
-
<li class:list={["splide__slide"]}>
|
|
100
|
-
<div class="magnifier">
|
|
101
|
-
<JeawinImage img_html={pic} loading={idx > 0 ? "lazy" : "eager"} fetchpriority={idx > 0 ? 'low' : 'high'} />
|
|
102
|
-
</div>
|
|
103
|
-
|
|
104
|
-
</li>
|
|
105
|
-
))
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
{
|
|
109
|
-
video && video.poster ? (
|
|
110
|
-
<li class="splide__slide">
|
|
111
|
-
<div class="flex min-h-[343px] xl:min-h-[605px] w-full">
|
|
112
|
-
<img src={video.poster} alt={video.title ? video.title : node_title} />
|
|
113
|
-
<button
|
|
114
|
-
class="absolute cursor-pointer w-16 h-16 rounded-full inset-0 m-auto duration-150 bg-blue-500 hover:bg-blue-600 ring-offset-2 focus:ring-3 focus:ring-blue-500 text-white"
|
|
115
|
-
x-on:click="openVideo()"
|
|
116
|
-
>
|
|
117
|
-
<svg
|
|
118
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
119
|
-
viewBox="0 0 20 20"
|
|
120
|
-
fill="currentColor"
|
|
121
|
-
class="w-6 h-6 m-auto"
|
|
122
|
-
>
|
|
123
|
-
<path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
|
|
124
|
-
</svg>
|
|
125
|
-
</button>
|
|
126
|
-
</div>
|
|
127
|
-
</li>
|
|
128
|
-
) : null
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
{
|
|
132
|
-
view360 ? (
|
|
133
|
-
<li class="splide__slide no-drag">
|
|
134
|
-
<div class="cloudimage-360 swiper-no-swiping no-drag" data-image-list-x={`${JSON.stringify(view360)}`} data-magnifier="2" data-fullscreen>
|
|
135
|
-
</div>
|
|
136
|
-
</li>
|
|
137
|
-
) : null
|
|
138
|
-
}
|
|
139
|
-
</ul>
|
|
140
|
-
</div>
|
|
141
|
-
</section>
|
|
142
93
|
{show_thumbs ? (
|
|
143
|
-
<
|
|
144
|
-
<
|
|
145
|
-
<
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
<
|
|
150
|
-
<
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
94
|
+
<Fragment>
|
|
95
|
+
<section class="mainSplide splide" aria-label={node_title}>
|
|
96
|
+
<div class="splide__track">
|
|
97
|
+
<ul class="splide__list">
|
|
98
|
+
{
|
|
99
|
+
nodepics.map((pic: any, idx: number) => (
|
|
100
|
+
<li class:list={["splide__slide"]}>
|
|
101
|
+
<div class="magnifier">
|
|
102
|
+
<JeawinImage img_html={pic} loading={idx > 0 ? "lazy" : "eager"} fetchpriority={idx > 0 ? 'low' : 'high'} />
|
|
103
|
+
</div>
|
|
104
|
+
|
|
105
|
+
</li>
|
|
106
|
+
))
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
{
|
|
110
|
+
video && video.poster ? (
|
|
111
|
+
<li class="splide__slide">
|
|
112
|
+
<div class="flex min-h-[343px] xl:min-h-[605px] w-full">
|
|
113
|
+
<img src={video.poster} alt={video.title ? video.title : node_title} />
|
|
114
|
+
<button
|
|
115
|
+
class="absolute cursor-pointer w-16 h-16 rounded-full inset-0 m-auto duration-150 bg-blue-500 hover:bg-blue-600 ring-offset-2 focus:ring-3 focus:ring-blue-500 text-white"
|
|
116
|
+
x-on:click="openVideo()"
|
|
117
|
+
>
|
|
118
|
+
<svg
|
|
119
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
120
|
+
viewBox="0 0 20 20"
|
|
121
|
+
fill="currentColor"
|
|
122
|
+
class="w-6 h-6 m-auto"
|
|
123
|
+
>
|
|
124
|
+
<path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
|
|
125
|
+
</svg>
|
|
126
|
+
</button>
|
|
127
|
+
</div>
|
|
128
|
+
</li>
|
|
129
|
+
) : null
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
{
|
|
133
|
+
view360 ? (
|
|
134
|
+
<li class="splide__slide no-drag">
|
|
135
|
+
<div class="cloudimage-360 swiper-no-swiping no-drag" data-image-list-x={`${JSON.stringify(view360)}`} data-magnifier="2" data-fullscreen>
|
|
136
|
+
</div>
|
|
137
|
+
</li>
|
|
138
|
+
) : null
|
|
139
|
+
}
|
|
140
|
+
</ul>
|
|
141
|
+
</div>
|
|
142
|
+
</section>
|
|
143
|
+
<section class="thumbnailSplide splide w-full px-8" aria-label={node_title}>
|
|
144
|
+
<div class="splide__track">
|
|
145
|
+
<ul class="splide__list">
|
|
146
|
+
{
|
|
147
|
+
nodepics.map((pic: any, idx: number) => (
|
|
148
|
+
<li class="splide__slide">
|
|
149
|
+
<div class="content-wrapper border border-white p-1 h-full cursor-pointer overflow-hidden flex items-center justify-center">
|
|
150
|
+
<JeawinImage img_html={pic} add_classes="lazyload" />
|
|
151
|
+
</div>
|
|
152
|
+
</li>
|
|
153
|
+
))
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
{
|
|
157
|
+
video && video.poster ? (
|
|
158
|
+
<li class="splide__slide">
|
|
159
|
+
<div class="content-wrapper border border-white p-1 h-full cursor-pointer flex items-center justify-center">
|
|
160
|
+
<Icon name="fa6-solid:file-video" class="size-10" />
|
|
161
|
+
</div>
|
|
162
|
+
</li>
|
|
163
|
+
) : null
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
{
|
|
167
|
+
view360 ? (
|
|
168
|
+
<li class="splide__slide">
|
|
169
|
+
<div class="content-wrapper border border-white p-1 h-full cursor-pointer">
|
|
170
|
+
<img src={view360img.src} alt="360° viewer" />
|
|
171
|
+
</div>
|
|
172
|
+
</li>
|
|
173
|
+
) : null
|
|
174
|
+
}
|
|
175
|
+
</ul>
|
|
176
|
+
</div>
|
|
177
|
+
</section>
|
|
178
|
+
</Fragment>
|
|
179
|
+
|
|
180
|
+
) : (
|
|
181
|
+
<div class="content-wrapper border border-white p-1 h-full cursor-pointer overflow-hidden flex items-center justify-center relative">
|
|
182
|
+
<div class="relative magnifier w-full h-full">
|
|
183
|
+
<JeawinImage img_html={img_change_attrs(nodepics[0], {style:'width:100%;height:100%;'}, {})} add_classes="lazyload w-full h-full" />
|
|
176
184
|
</div>
|
|
177
|
-
|
|
178
|
-
|
|
185
|
+
|
|
186
|
+
</div>
|
|
187
|
+
)}
|
|
179
188
|
|
|
180
189
|
{
|
|
181
190
|
video && video.poster ? (
|
|
@@ -354,18 +363,19 @@ src="/js-cloudimage-360-view/build/js-cloudimage-360-view.min.js" async defer
|
|
|
354
363
|
|
|
355
364
|
const view360 = this.dataset.view360;
|
|
356
365
|
|
|
357
|
-
|
|
358
|
-
const main = new Splide(elemMain, {
|
|
359
|
-
type: 'fade',
|
|
360
|
-
rewind: true,
|
|
361
|
-
pagination: false,
|
|
362
|
-
arrows: false,
|
|
363
|
-
noDrag: 'input, textarea, .no-drag',
|
|
364
|
-
drag: false
|
|
365
|
-
});
|
|
366
|
+
|
|
366
367
|
const show_thumbs = this.dataset.show_thumbs;
|
|
367
368
|
// console.log(show_thumbs);
|
|
368
369
|
if(show_thumbs == 'true'){
|
|
370
|
+
const elemMain: any = this.querySelector('.mainSplide');
|
|
371
|
+
const main = new Splide(elemMain, {
|
|
372
|
+
type: 'fade',
|
|
373
|
+
rewind: true,
|
|
374
|
+
pagination: false,
|
|
375
|
+
arrows: false,
|
|
376
|
+
noDrag: 'input, textarea, .no-drag',
|
|
377
|
+
drag: false
|
|
378
|
+
});
|
|
369
379
|
const elemThumbnail: any = this.querySelector('.thumbnailSplide');
|
|
370
380
|
const thumbnails = new Splide(elemThumbnail,{
|
|
371
381
|
// width:'100vw',
|
|
@@ -391,22 +401,26 @@ src="/js-cloudimage-360-view/build/js-cloudimage-360-view.min.js" async defer
|
|
|
391
401
|
main.sync(thumbnails);
|
|
392
402
|
main.mount();
|
|
393
403
|
thumbnails.mount();
|
|
394
|
-
|
|
395
|
-
main.mount();
|
|
396
|
-
}
|
|
404
|
+
main.on("move", (e: any) => {
|
|
397
405
|
|
|
398
|
-
|
|
406
|
+
this.closeMagnifier();
|
|
399
407
|
|
|
400
|
-
|
|
408
|
+
if(view360){
|
|
409
|
+
// @ts-ignore
|
|
410
|
+
window.CI360.init();
|
|
411
|
+
}
|
|
401
412
|
|
|
413
|
+
});
|
|
414
|
+
}else{
|
|
402
415
|
this.closeMagnifier();
|
|
403
416
|
|
|
404
417
|
if(view360){
|
|
405
418
|
// @ts-ignore
|
|
406
419
|
window.CI360.init();
|
|
407
420
|
}
|
|
421
|
+
}
|
|
408
422
|
|
|
409
|
-
|
|
423
|
+
const thisSelf = this;
|
|
410
424
|
}
|
|
411
425
|
}
|
|
412
426
|
|