jeawin-astro 3.0.93 → 3.0.95

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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jeawin-astro",
3
- "version": "3.0.93",
3
+ "version": "3.0.95",
4
4
  "author": "chaegumi <chaegumi@qq.com>",
5
5
  "description": "",
6
6
  "license": "MIT",
@@ -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
- <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>
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:'100vw',
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
  }
@@ -58,7 +58,13 @@ if(num > 1){
58
58
  }
59
59
  ---
60
60
 
61
- <custom-detail-images data-nodepics={nodepics} data-video={video} data-view360={view360} data-thumbs_position={thumbs_position}>
61
+ <custom-detail-images
62
+ data-nodepics={nodepics}
63
+ data-video={video}
64
+ data-view360={view360}
65
+ data-thumbs_position={thumbs_position}
66
+ data-show_thumbs={show_thumbs}
67
+ >
62
68
  <div
63
69
  x-data={`{
64
70
  isVideoPoppedUp:false,
@@ -81,66 +87,66 @@ if(num > 1){
81
87
  }
82
88
  }`}
83
89
  >
84
- <div class:list={["flex flex-col", {"lg:flex-row":thumbs_position=='left'}, "gap-5"]}>
90
+ <div class:list={["flex flex-col", {"lg:flex-row":thumbs_position=='left'}, "gap-4"]}>
85
91
  {
86
92
  show_thumbs ? (
87
- <div class:list={["order-2", {
88
- "flex flex-row items-center md:order-1 md:w-2/12 md:flex md:flex-col":thumbs_position=='left',
89
- "flex items-center justify-center":thumbs_position=='bottom'
90
- }, "gap-3"]}>
91
- <!-- thumbs swiper -->
92
- <div class="flex justify-center cursor-pointer thumbSwiper-prev-btn">{thumbs_position == 'left'?<Icon name="fa6-solid:angle-up" /> :<Icon name="fa6-solid:angle-left" />}</div>
93
- <swiper-container
94
- init="false"
95
- class="thumbSwiper"
96
- watch-slides-progress="true"
97
- slides-per-view="5"
98
- space-between="10"
99
- >
100
-
101
- {
102
- nodepics.map((pic: any, idx: number) => (
103
- <swiper-slide lazy={idx > 0 ? "true" : "false"}
104
- class:list={[
105
- "swiper-slide",
106
- { hidden: idx > 0 },
107
- " lg:flex-0 lg:h-[60px] lg:w-[60px]",
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" />
112
- </div>
113
- </swiper-slide>
114
- ))
115
- }
116
-
117
- {
118
- video && video.poster ? (
119
- <swiper-slide class="swiper-slide lg:flex-0 lg:h-[60px] lg:w-[60px] hidden">
120
- <div class="content-wrapper border border-white min-h-[100px] lg:min-h-[60px] p-1 cursor-pointer flex items-center justify-center">
121
- <Icon name="fa6-solid:file-video" class="size-10" />
122
- </div>
123
- </swiper-slide>
124
- ) : null
125
- }
126
-
127
- {
128
- view360 ? (
129
- <swiper-slide class="swiper-slide lg:flex-0 hidden">
130
- <div class="content-wrapper border border-white p-1 cursor-pointer">
131
- <img src={view360img.src} alt="360° viewer" class="w-[50px] h-[50px] max-w-[50px]" />
132
- </div>
133
- </swiper-slide>
134
- ) : null
135
- }
93
+ <Fragment>
94
+ <div class:list={["order-2", "relative", {
95
+ "flex flex-row items-center md:order-1 md:w-2/12 md:flex md:flex-col":thumbs_position=='left',
136
96
 
137
- </swiper-container>
138
- <div class="flex justify-center cursor-pointer thumbSwiper-next-btn">{thumbs_position =='left'?<Icon name="fa6-solid:angle-down" />:<Icon name="fa6-solid:angle-right" />}</div>
139
- </div>
140
- ) : null
141
- }
97
+ }, "px-5"]}>
98
+ <div class="flex justify-center cursor-pointer absolute left-0 top-1/2 thumbSwiper-prev-btn">
99
+ {thumbs_position == 'left'?<Icon name="fa6-solid:angle-up" class="size-4" /> :<Icon name="fa6-solid:angle-left" class="size-4" />}
100
+ </div>
101
+ <swiper-container
102
+ init="false"
103
+ class="thumbSwiper grid"
104
+ watch-slides-progress="true"
105
+ slides-per-view="5"
106
+ free-mode="true"
107
+ >
108
+
109
+ {
110
+ nodepics.map((pic: any, idx: number) => (
111
+ <swiper-slide lazy={true} class:list={[
112
+ "swiper-slide",
113
+ "hidden"
114
+ ]}>
115
+ <div class="content-wrapper size-full flex items-center justify-center border border-gray-200 cursor-pointer">
116
+ <JeawinImage img_html={pic} add_classes="lazyload" />
117
+ </div>
118
+ </swiper-slide>
119
+ ))
120
+ }
121
+
122
+ {
123
+ video && video.poster ? (
124
+ <swiper-slide class="swiper-slide">
125
+ <div class="content-wrapper size-full flex items-center justify-center border border-gray-200 cursor-pointer">
126
+ <Icon name="fa6-solid:file-video" class="size-10" />
127
+ </div>
128
+
129
+ </swiper-slide>
130
+ ) : null
131
+ }
142
132
 
143
- <div class:list={["order-1", {"lg:order-2":thumbs_position=='left'}, "w-full", {"lg:w-10/12":thumbs_position=='left'}]}>
133
+ {
134
+ view360 ? (
135
+ <swiper-slide class="swiper-slide">
136
+ <div class="content-wrapper size-full flex items-center justify-center border border-gray-200 cursor-pointer">
137
+ <img src={view360img.src} alt="360° viewer" />
138
+ </div>
139
+
140
+ </swiper-slide>
141
+ ) : null
142
+ }
143
+
144
+ </swiper-container>
145
+ <div class="flex justify-center cursor-pointer absolute right-0 top-1/2 thumbSwiper-next-btn">
146
+ {thumbs_position =='left'?<Icon name="fa6-solid:angle-down" class="size-4" />:<Icon name="fa6-solid:angle-right" class="size-4" />}
147
+ </div>
148
+ </div>
149
+ <div class:list={["order-1", {"lg:order-2":thumbs_position=='left'}, "w-full", {"lg:w-10/12":thumbs_position=='left'}]}>
144
150
  <!-- main swiper, pass thumbs swiper as CSS selector -->
145
151
  <swiper-container
146
152
  init="false"
@@ -149,7 +155,7 @@ if(num > 1){
149
155
  slides-per-view="1"
150
156
  thumbs-swiper={show_thumbs ? ".thumbSwiper" : null}
151
157
  navigation="false"
152
- pagination="true" auto-height="true"
158
+ pagination="true" auto-height="false"
153
159
  >
154
160
  {
155
161
  nodepics.map((pic: any, idx: number) => (
@@ -161,7 +167,7 @@ if(num > 1){
161
167
 
162
168
  {
163
169
  video && video.poster ? (
164
- <swiper-slide class="swiper-slide hidden" lazy="true">
170
+ <swiper-slide class="swiper-slide hidden">
165
171
  <div class="flex min-h-[343px] xl:min-h-[605px] w-full">
166
172
  <img src={video.poster} alt={video.title ? video.title : node_title} />
167
173
  <button
@@ -184,7 +190,7 @@ if(num > 1){
184
190
 
185
191
  {
186
192
  view360 ? (
187
- <swiper-slide class="swiper-slide hidden" lazy="true">
193
+ <swiper-slide class="swiper-slide hidden">
188
194
  <div class="cloudimage-360 swiper-no-swiping" data-image-list-x={`${JSON.stringify(view360)}`} data-magnifier="2" data-fullscreen>
189
195
  </div>
190
196
  </swiper-slide>
@@ -250,6 +256,18 @@ if(num > 1){
250
256
  ) : null
251
257
  }
252
258
  </div>
259
+ </Fragment>
260
+ ) : (
261
+ <div class="content-wrapper border border-white p-1 h-full cursor-pointer overflow-hidden flex items-center justify-center relative">
262
+ <div class="relative magnifier w-full h-full">
263
+ <JeawinImage img_html={img_change_attrs(nodepics[0], {style:'width:100%;height:100%;'}, {})} add_classes="lazyload w-full h-full" />
264
+ </div>
265
+
266
+ </div>
267
+ )
268
+ }
269
+
270
+
253
271
  </div>
254
272
  </div>
255
273
  </custom-detail-images>
@@ -270,26 +288,26 @@ src="/js-cloudimage-360-view/build/js-cloudimage-360-view.min.js" async defer
270
288
  <style is:inline>
271
289
 
272
290
  .thumbSwiper {
273
- max-height: 300px;
274
- max-width:300px;
275
- min-width:300px;
276
291
  overflow: hidden;
277
292
  }
278
293
 
279
-
294
+ .thumbSwiper .swiper-slide{
295
+ width:20%;
296
+ box-sizing: border-box;
297
+ height: 100%;
298
+ }
280
299
  .thumbSwiper .swiper-slide img {
281
- object-fit: contain;
282
- max-height: 100%;
300
+ object-fit: cover;
301
+ height: 100%;
302
+ width:100%;
303
+ display: block;
283
304
  }
284
-
285
- /* .thumbSwiper .swiper-slide {
286
- border: 1px solid white;
287
- } */
288
-
289
- .thumbSwiper .swiper-slide-thumb-active .content-wrapper {
290
- border: 1px solid var(--themeColor);
305
+ .thumbSwiper .swiper-slide .content-wrapper{
306
+ border:1px solid #ffffff;
307
+ }
308
+ .thumbSwiper .swiper-slide-thumb-active .content-wrapper{
309
+ border:1px solid var(--themeColor);
291
310
  }
292
-
293
311
  .thumbSwiper .swiper-button-prev {
294
312
  top: 20px;
295
313
  left: 50%;
@@ -365,7 +383,7 @@ src="/js-cloudimage-360-view/build/js-cloudimage-360-view.min.js" async defer
365
383
  if(!this.glass) return;
366
384
 
367
385
  this.container.style.overflow = 'visible';
368
- this.container.style.zIndex = 100000;
386
+ // this.container.style.zIndex = 100000;
369
387
  this.container.removeChild(this.glass);
370
388
 
371
389
  this.glass = null;
@@ -385,79 +403,21 @@ src="/js-cloudimage-360-view/build/js-cloudimage-360-view.min.js" async defer
385
403
 
386
404
  const view360 = this.dataset.view360;
387
405
 
406
+ const show_thumbs = this.dataset.show_thumbs;
407
+ if(show_thumbs == 'true'){
388
408
  initSwiper(".mainSwiper", {
389
- pagination:{
390
- clickable: true
391
- }
392
- });
393
- initSwiper(".thumbSwiper", {
394
- direction: this.dataset.thumbs_position=='left' ? "vertical" : 'horizontal',
395
- navigation: {
396
- prevEl: '.thumbSwiper-prev-btn',
397
- nextEl: '.thumbSwiper-next-btn'
398
- },
399
- breakpoints: {
400
- 768: {
401
- direction: this.dataset.thumbs_position == 'left' ? "vertical" : 'horizontal',
402
- },
403
- },
404
- on:{
405
- init: function(swiper: any){
406
- // console.log('swiper initialized');
407
- const swiperEl: any = document.querySelector(".thumbSwiper");
408
- const slides: any[] = swiperEl.querySelectorAll('swiper-slide');
409
-
410
- slides.forEach((slide, idx: number) => {
411
- slide.style.display = 'block';
412
- });
413
- swiper.update();
414
-
415
- const mainSwiperEl: any = document.querySelector('.mainSwiper');
416
-
417
-
418
- slides.forEach((slide, idx: number) => {
419
- slide.addEventListener('mouseover', _.debounce(function(e: any){
420
- // console.log('mouseover', idx);
421
- // console.log(mainSwiperEl.swiper);
422
- // swiper.slideTo(idx, 1000, false);
423
- mainSwiperEl.swiper.slideTo(idx, 1000, false);
424
- },300));
425
- });
426
-
427
- }
428
- }
429
- });
430
-
431
-
432
- const thisSelf = this;
433
-
434
- thisSelf
435
- .querySelector(".mainSwiper")
436
- ?.addEventListener("swiperslidechange", (e: any) => {
437
- // console.log("slide changed");
438
- const [swiper] = e.detail;
439
- // console.log(swiper.isEnd);
440
-
441
- this.closeMagnifier();
442
-
443
- if(view360){
444
- // @ts-ignore
445
- window.CI360.init();
446
- }
447
-
448
- });
449
-
450
-
451
- document.addEventListener("astro:after-swap", () => {
452
- initSwiper(".mainSwiper", {
453
409
  pagination:{
454
410
  clickable: true
455
411
  }
456
412
  });
457
413
  initSwiper(".thumbSwiper", {
458
- direction: "horizontal",
414
+ direction: this.dataset.thumbs_position=='left' ? "vertical" : 'horizontal',
415
+ navigation: {
416
+ prevEl: '.thumbSwiper-prev-btn',
417
+ nextEl: '.thumbSwiper-next-btn'
418
+ },
459
419
  breakpoints: {
460
- 1024: {
420
+ 768: {
461
421
  direction: this.dataset.thumbs_position == 'left' ? "vertical" : 'horizontal',
462
422
  },
463
423
  },
@@ -486,21 +446,32 @@ src="/js-cloudimage-360-view/build/js-cloudimage-360-view.min.js" async defer
486
446
 
487
447
  }
488
448
  }
449
+ });
450
+
451
+ const thisSelf = this;
452
+
453
+ thisSelf
454
+ .querySelector(".mainSwiper")
455
+ ?.addEventListener("swiperslidechange", (e: any) => {
456
+ // console.log("slide changed");
457
+ const [swiper] = e.detail;
458
+ // console.log(swiper.isEnd);
459
+
460
+ this.closeMagnifier();
461
+
462
+ if(view360){
463
+ // @ts-ignore
464
+ window.CI360.init();
465
+ }
466
+
489
467
  });
490
- thisSelf
491
- .querySelector(".mainSwiper")
492
- ?.addEventListener("swiperslidechange", (e) => {
493
- // console.log("slide changed");
468
+ }else{
469
+
470
+ }
471
+
494
472
 
495
- this.closeMagnifier();
496
473
 
497
- if(view360){
498
- // @ts-ignore
499
- window.CI360.init();
500
- }
501
474
 
502
- });
503
- });
504
475
  }
505
476
  }
506
477
 
@@ -343,7 +343,7 @@ src="/js-cloudimage-360-view/build/js-cloudimage-360-view.min.js" async defer
343
343
  if(!this.glass) return;
344
344
 
345
345
  this.container.style.overflow = 'visible';
346
- this.container.style.zIndex = 100000;
346
+ // this.container.style.zIndex = 100000;
347
347
  this.container.removeChild(this.glass);
348
348
 
349
349
  this.glass = null;
@@ -179,6 +179,8 @@ export default class JeawinApi {
179
179
 
180
180
  return Promise.resolve(res);
181
181
  } catch (error) {
182
+ console.log(url);
183
+ console.log(fetchOptions);
182
184
  console.error('Fetch failed:', error);
183
185
  return Promise.reject(error);
184
186
  }