jeawin-astro 3.0.92 → 3.0.94
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
|
@@ -68,76 +68,42 @@ const banners = await jeawinapi.get_nodes({ channel_id: 5 });
|
|
|
68
68
|
banners.nodes.map((banner: any, idx: number) => (
|
|
69
69
|
<li class:list={['splide__slide', ...SlideClass]}>
|
|
70
70
|
{show_title && render_value(banner, 'show_text_block', '1') == '1' ? (
|
|
71
|
-
<div class="relative h-full w-full">
|
|
71
|
+
<div class="splide__slide__container relative h-full w-full ">
|
|
72
72
|
<div class="absolute inset-0 flex items-center justify-center text-white text-center p-4">
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
73
|
+
<div class="p-4 px-4 bg-[rgba(0,0,0,0.5)] rounded-sm">
|
|
74
|
+
{
|
|
75
|
+
idx > 0 ? (
|
|
76
|
+
<div class="text-base md:text-3xl lg:text-4xl">{banner.node_title}</div>
|
|
77
|
+
) : (
|
|
78
|
+
<h1 class="text-base md:text-3xl lg:text-4xl">{banner.node_title}</h1>
|
|
79
|
+
)
|
|
80
|
+
}
|
|
81
|
+
<div class="text-xs line-clamp-2 md:line-clamp-none md:text-lg md:mt-4">{render_value(banner, 'sub_title')}</div>
|
|
82
|
+
<Button tag_name="a" class="inline-block md:mt-2" href={render_url(render_value(banner, "linkurl"), base, null, url_suffix)}
|
|
83
|
+
title={render_value(banner, 'btntext') || render_lang(all_langs, 'read more')}>{render_value(banner, 'btntext') || render_lang(all_langs, 'read more')}</Button>
|
|
84
|
+
</div>
|
|
85
85
|
|
|
86
86
|
</div>
|
|
87
87
|
|
|
88
88
|
{idx > 0 ? (
|
|
89
89
|
<Fragment
|
|
90
|
-
set:html={img_change_attrs(
|
|
91
|
-
banner.node_picurl_html,
|
|
92
|
-
{
|
|
93
|
-
width: "100%",
|
|
94
|
-
loading: "lazy",
|
|
95
|
-
fetchpriority: "low",
|
|
96
|
-
},
|
|
97
|
-
["class", "loading"]
|
|
98
|
-
)}
|
|
90
|
+
set:html={img_change_attrs(banner.node_picurl_html, {'loading':'',class:'',fetchpriority:'high'}, ['loading'])}
|
|
99
91
|
/>
|
|
100
92
|
) : (
|
|
101
93
|
<Fragment
|
|
102
|
-
set:html={img_change_attrs(
|
|
103
|
-
banner.node_picurl_html,
|
|
104
|
-
{
|
|
105
|
-
width: "100%",
|
|
106
|
-
class: '',
|
|
107
|
-
loading: "eager",
|
|
108
|
-
fetchpriority: "high",
|
|
109
|
-
},
|
|
110
|
-
["class"]
|
|
111
|
-
)}
|
|
94
|
+
set:html={img_change_attrs(banner.node_picurl_html, {'loading':'',class:'',fetchpriority:'high'}, ['loading'])}
|
|
112
95
|
/>
|
|
113
96
|
)}
|
|
114
97
|
</div>
|
|
115
98
|
) : (
|
|
116
|
-
<a href={render_url(render_value(banner, "linkurl"), base, null, url_suffix)} title={banner.node_title}>
|
|
99
|
+
<a class="splide__slide__container" href={render_url(render_value(banner, "linkurl"), base, null, url_suffix)} title={banner.node_title}>
|
|
117
100
|
{idx > 0 ? (
|
|
118
101
|
<Fragment
|
|
119
|
-
set:html={img_change_attrs(
|
|
120
|
-
banner.node_picurl_html,
|
|
121
|
-
{
|
|
122
|
-
width: "100%",
|
|
123
|
-
loading: "lazy",
|
|
124
|
-
fetchpriority: "low",
|
|
125
|
-
},
|
|
126
|
-
["class", "loading"]
|
|
127
|
-
)}
|
|
102
|
+
set:html={img_change_attrs(banner.node_picurl_html, {'loading':'',class:'',fetchpriority:'high'}, ['loading'])}
|
|
128
103
|
/>
|
|
129
104
|
) : (
|
|
130
105
|
<Fragment
|
|
131
|
-
set:html={img_change_attrs(
|
|
132
|
-
banner.node_picurl_html,
|
|
133
|
-
{
|
|
134
|
-
width: "100%",
|
|
135
|
-
class: "",
|
|
136
|
-
loading: "eager",
|
|
137
|
-
fetchpriority: "high",
|
|
138
|
-
},
|
|
139
|
-
["class"]
|
|
140
|
-
)}
|
|
106
|
+
set:html={img_change_attrs(banner.node_picurl_html, {'loading':'',class:'',fetchpriority:'high'}, ['loading'])}
|
|
141
107
|
/>
|
|
142
108
|
)}
|
|
143
109
|
</a>
|
|
@@ -150,7 +116,7 @@ const banners = await jeawinapi.get_nodes({ channel_id: 5 });
|
|
|
150
116
|
) : null
|
|
151
117
|
}
|
|
152
118
|
</custom-banner-splide>
|
|
153
|
-
<style>
|
|
119
|
+
<style is:inline>
|
|
154
120
|
.splide__slide img{
|
|
155
121
|
width:100%;
|
|
156
122
|
/* height: auto; */
|
|
@@ -174,11 +140,11 @@ const banners = await jeawinapi.get_nodes({ channel_id: 5 });
|
|
|
174
140
|
if(splideElem){
|
|
175
141
|
const splide = new Splide(splideElem,{
|
|
176
142
|
// type:'loop',
|
|
177
|
-
// width:'
|
|
143
|
+
// width:'100%',
|
|
178
144
|
// height:'100vh',
|
|
179
145
|
autoplay: true,
|
|
180
|
-
cover: true,
|
|
181
|
-
heightRatio: Number(heightRadio),
|
|
146
|
+
// cover: true,
|
|
147
|
+
// heightRatio: Number(heightRadio) || 0.5,
|
|
182
148
|
});
|
|
183
149
|
splide.mount();
|
|
184
150
|
}
|
|
@@ -81,34 +81,32 @@ if(num > 1){
|
|
|
81
81
|
}
|
|
82
82
|
}`}
|
|
83
83
|
>
|
|
84
|
-
<div class:list={["flex flex-col", {"lg:flex-row":thumbs_position=='left'}, "gap-
|
|
84
|
+
<div class:list={["flex flex-col", {"lg:flex-row":thumbs_position=='left'}, "gap-4"]}>
|
|
85
85
|
{
|
|
86
86
|
show_thumbs ? (
|
|
87
|
-
<div class:list={["order-2", {
|
|
87
|
+
<div class:list={["order-2", "relative", {
|
|
88
88
|
"flex flex-row items-center md:order-1 md:w-2/12 md:flex md:flex-col":thumbs_position=='left',
|
|
89
|
-
|
|
90
|
-
}, "
|
|
91
|
-
|
|
92
|
-
|
|
89
|
+
|
|
90
|
+
}, "px-5"]}>
|
|
91
|
+
<div class="flex justify-center cursor-pointer absolute left-0 top-1/2 thumbSwiper-prev-btn">
|
|
92
|
+
{thumbs_position == 'left'?<Icon name="fa6-solid:angle-up" class="size-4" /> :<Icon name="fa6-solid:angle-left" class="size-4" />}
|
|
93
|
+
</div>
|
|
93
94
|
<swiper-container
|
|
94
95
|
init="false"
|
|
95
|
-
class="thumbSwiper"
|
|
96
|
+
class="thumbSwiper grid"
|
|
96
97
|
watch-slides-progress="true"
|
|
97
|
-
slides-per-view="5"
|
|
98
|
-
|
|
98
|
+
slides-per-view="5"
|
|
99
|
+
free-mode="true"
|
|
99
100
|
>
|
|
100
101
|
|
|
101
102
|
{
|
|
102
103
|
nodepics.map((pic: any, idx: number) => (
|
|
103
|
-
<swiper-slide lazy={
|
|
104
|
-
class:list={[
|
|
104
|
+
<swiper-slide lazy={true} class:list={[
|
|
105
105
|
"swiper-slide",
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
<div class="content-wrapper border border-white p-1 cursor-pointer overflow-hidden h-[60px] w-[60px] flex items-center justify-center">
|
|
111
|
-
<JeawinImage img_html={img_change_attrs(pic, {width:'50', height:'50'}, {})} add_classes="lazyload" />
|
|
106
|
+
"hidden"
|
|
107
|
+
]}>
|
|
108
|
+
<div class="content-wrapper size-full flex items-center justify-center border border-gray-200 cursor-pointer">
|
|
109
|
+
<JeawinImage img_html={pic} add_classes="lazyload" />
|
|
112
110
|
</div>
|
|
113
111
|
</swiper-slide>
|
|
114
112
|
))
|
|
@@ -116,26 +114,30 @@ if(num > 1){
|
|
|
116
114
|
|
|
117
115
|
{
|
|
118
116
|
video && video.poster ? (
|
|
119
|
-
<swiper-slide class="swiper-slide
|
|
120
|
-
<div class="content-wrapper
|
|
117
|
+
<swiper-slide class="swiper-slide">
|
|
118
|
+
<div class="content-wrapper size-full flex items-center justify-center border border-gray-200 cursor-pointer">
|
|
121
119
|
<Icon name="fa6-solid:file-video" class="size-10" />
|
|
122
120
|
</div>
|
|
121
|
+
|
|
123
122
|
</swiper-slide>
|
|
124
123
|
) : null
|
|
125
124
|
}
|
|
126
125
|
|
|
127
126
|
{
|
|
128
127
|
view360 ? (
|
|
129
|
-
<swiper-slide class="swiper-slide
|
|
130
|
-
<div class="content-wrapper border border-
|
|
131
|
-
<img src={view360img.src} alt="360° viewer"
|
|
128
|
+
<swiper-slide class="swiper-slide">
|
|
129
|
+
<div class="content-wrapper size-full flex items-center justify-center border border-gray-200 cursor-pointer">
|
|
130
|
+
<img src={view360img.src} alt="360° viewer" />
|
|
132
131
|
</div>
|
|
132
|
+
|
|
133
133
|
</swiper-slide>
|
|
134
134
|
) : null
|
|
135
135
|
}
|
|
136
136
|
|
|
137
137
|
</swiper-container>
|
|
138
|
-
<div class="flex justify-center cursor-pointer
|
|
138
|
+
<div class="flex justify-center cursor-pointer absolute right-0 top-1/2 thumbSwiper-next-btn">
|
|
139
|
+
{thumbs_position =='left'?<Icon name="fa6-solid:angle-down" class="size-4" />:<Icon name="fa6-solid:angle-right" class="size-4" />}
|
|
140
|
+
</div>
|
|
139
141
|
</div>
|
|
140
142
|
) : null
|
|
141
143
|
}
|
|
@@ -149,7 +151,7 @@ if(num > 1){
|
|
|
149
151
|
slides-per-view="1"
|
|
150
152
|
thumbs-swiper={show_thumbs ? ".thumbSwiper" : null}
|
|
151
153
|
navigation="false"
|
|
152
|
-
pagination="true" auto-height="
|
|
154
|
+
pagination="true" auto-height="false"
|
|
153
155
|
>
|
|
154
156
|
{
|
|
155
157
|
nodepics.map((pic: any, idx: number) => (
|
|
@@ -161,7 +163,7 @@ if(num > 1){
|
|
|
161
163
|
|
|
162
164
|
{
|
|
163
165
|
video && video.poster ? (
|
|
164
|
-
<swiper-slide class="swiper-slide hidden"
|
|
166
|
+
<swiper-slide class="swiper-slide hidden">
|
|
165
167
|
<div class="flex min-h-[343px] xl:min-h-[605px] w-full">
|
|
166
168
|
<img src={video.poster} alt={video.title ? video.title : node_title} />
|
|
167
169
|
<button
|
|
@@ -184,7 +186,7 @@ if(num > 1){
|
|
|
184
186
|
|
|
185
187
|
{
|
|
186
188
|
view360 ? (
|
|
187
|
-
<swiper-slide class="swiper-slide hidden"
|
|
189
|
+
<swiper-slide class="swiper-slide hidden">
|
|
188
190
|
<div class="cloudimage-360 swiper-no-swiping" data-image-list-x={`${JSON.stringify(view360)}`} data-magnifier="2" data-fullscreen>
|
|
189
191
|
</div>
|
|
190
192
|
</swiper-slide>
|
|
@@ -270,26 +272,26 @@ src="/js-cloudimage-360-view/build/js-cloudimage-360-view.min.js" async defer
|
|
|
270
272
|
<style is:inline>
|
|
271
273
|
|
|
272
274
|
.thumbSwiper {
|
|
273
|
-
max-height: 300px;
|
|
274
|
-
max-width:300px;
|
|
275
|
-
min-width:300px;
|
|
276
275
|
overflow: hidden;
|
|
277
276
|
}
|
|
278
277
|
|
|
279
|
-
|
|
278
|
+
.thumbSwiper .swiper-slide{
|
|
279
|
+
width:20%;
|
|
280
|
+
box-sizing: border-box;
|
|
281
|
+
height: 100%;
|
|
282
|
+
}
|
|
280
283
|
.thumbSwiper .swiper-slide img {
|
|
281
|
-
object-fit:
|
|
282
|
-
|
|
284
|
+
object-fit: cover;
|
|
285
|
+
height: 100%;
|
|
286
|
+
width:100%;
|
|
287
|
+
display: block;
|
|
283
288
|
}
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
.thumbSwiper .swiper-slide-thumb-active .content-wrapper {
|
|
290
|
-
border: 1px solid var(--themeColor);
|
|
289
|
+
.thumbSwiper .swiper-slide .content-wrapper{
|
|
290
|
+
border:1px solid #ffffff;
|
|
291
|
+
}
|
|
292
|
+
.thumbSwiper .swiper-slide-thumb-active .content-wrapper{
|
|
293
|
+
border:1px solid var(--themeColor);
|
|
291
294
|
}
|
|
292
|
-
|
|
293
295
|
.thumbSwiper .swiper-button-prev {
|
|
294
296
|
top: 20px;
|
|
295
297
|
left: 50%;
|
|
@@ -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
|
|
package/src/scripts/cms.js
CHANGED