jeawin-astro 3.0.91 → 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
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
/**
|
|
3
|
-
* banner
|
|
3
|
+
* banner切换组件-splide版
|
|
4
4
|
*
|
|
5
|
-
* jeawin-astro/src/components/
|
|
5
|
+
* jeawin-astro/src/components/banner_splide.astro
|
|
6
6
|
*
|
|
7
7
|
* @package jeawin-astro
|
|
8
8
|
* @author Chaegumi
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
* @email chaegumi@jeawin.com
|
|
11
11
|
* @filesource
|
|
12
12
|
*/
|
|
13
|
-
import '@splidejs/splide/css
|
|
13
|
+
import '@splidejs/splide/css';
|
|
14
14
|
import _ from "lodash";
|
|
15
15
|
import { img_change_attrs, render_value, render_url, render_lang } from "../scripts/util.js";
|
|
16
16
|
import JeawinApi from "../scripts/cms.js";
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
* @email chaegumi@jeawin.com
|
|
11
11
|
* @filesource
|
|
12
12
|
*/
|
|
13
|
+
import '@splidejs/splide/css';
|
|
13
14
|
import { Icon } from "astro-icon/components";
|
|
14
15
|
import Youtube from "./youtube.astro";
|
|
15
16
|
import Vimeo from "./vimeo.astro";
|
|
@@ -89,92 +90,101 @@ if(num > 1){
|
|
|
89
90
|
>
|
|
90
91
|
<div class:list={["flex flex-col", {"lg:flex-row":thumbs_position=='left'}, "gap-4"]}>
|
|
91
92
|
|
|
92
|
-
|
|
93
|
-
<section class="mainSplide splide" aria-label={node_title}>
|
|
94
|
-
<div class="splide__track">
|
|
95
|
-
<ul class="splide__list">
|
|
96
|
-
{
|
|
97
|
-
nodepics.map((pic: any, idx: number) => (
|
|
98
|
-
<li class:list={["splide__slide"]}>
|
|
99
|
-
<div class="magnifier">
|
|
100
|
-
<JeawinImage img_html={pic} loading={idx > 0 ? "lazy" : "eager"} fetchpriority={idx > 0 ? 'low' : 'high'} />
|
|
101
|
-
</div>
|
|
102
|
-
|
|
103
|
-
</li>
|
|
104
|
-
))
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
{
|
|
108
|
-
video && video.poster ? (
|
|
109
|
-
<li class="splide__slide">
|
|
110
|
-
<div class="flex min-h-[343px] xl:min-h-[605px] w-full">
|
|
111
|
-
<img src={video.poster} alt={video.title ? video.title : node_title} />
|
|
112
|
-
<button
|
|
113
|
-
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"
|
|
114
|
-
x-on:click="openVideo()"
|
|
115
|
-
>
|
|
116
|
-
<svg
|
|
117
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
118
|
-
viewBox="0 0 20 20"
|
|
119
|
-
fill="currentColor"
|
|
120
|
-
class="w-6 h-6 m-auto"
|
|
121
|
-
>
|
|
122
|
-
<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" />
|
|
123
|
-
</svg>
|
|
124
|
-
</button>
|
|
125
|
-
</div>
|
|
126
|
-
</li>
|
|
127
|
-
) : null
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
{
|
|
131
|
-
view360 ? (
|
|
132
|
-
<li class="splide__slide no-drag">
|
|
133
|
-
<div class="cloudimage-360 swiper-no-swiping no-drag" data-image-list-x={`${JSON.stringify(view360)}`} data-magnifier="2" data-fullscreen>
|
|
134
|
-
</div>
|
|
135
|
-
</li>
|
|
136
|
-
) : null
|
|
137
|
-
}
|
|
138
|
-
</ul>
|
|
139
|
-
</div>
|
|
140
|
-
</section>
|
|
141
93
|
{show_thumbs ? (
|
|
142
|
-
<
|
|
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
|
-
|
|
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" />
|
|
175
184
|
</div>
|
|
176
|
-
|
|
177
|
-
|
|
185
|
+
|
|
186
|
+
</div>
|
|
187
|
+
)}
|
|
178
188
|
|
|
179
189
|
{
|
|
180
190
|
video && video.poster ? (
|
|
@@ -353,18 +363,19 @@ src="/js-cloudimage-360-view/build/js-cloudimage-360-view.min.js" async defer
|
|
|
353
363
|
|
|
354
364
|
const view360 = this.dataset.view360;
|
|
355
365
|
|
|
356
|
-
|
|
357
|
-
const main = new Splide(elemMain, {
|
|
358
|
-
type: 'fade',
|
|
359
|
-
rewind: true,
|
|
360
|
-
pagination: false,
|
|
361
|
-
arrows: false,
|
|
362
|
-
noDrag: 'input, textarea, .no-drag',
|
|
363
|
-
drag: false
|
|
364
|
-
});
|
|
366
|
+
|
|
365
367
|
const show_thumbs = this.dataset.show_thumbs;
|
|
366
368
|
// console.log(show_thumbs);
|
|
367
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
|
+
});
|
|
368
379
|
const elemThumbnail: any = this.querySelector('.thumbnailSplide');
|
|
369
380
|
const thumbnails = new Splide(elemThumbnail,{
|
|
370
381
|
// width:'100vw',
|
|
@@ -390,22 +401,26 @@ src="/js-cloudimage-360-view/build/js-cloudimage-360-view.min.js" async defer
|
|
|
390
401
|
main.sync(thumbnails);
|
|
391
402
|
main.mount();
|
|
392
403
|
thumbnails.mount();
|
|
393
|
-
|
|
394
|
-
main.mount();
|
|
395
|
-
}
|
|
404
|
+
main.on("move", (e: any) => {
|
|
396
405
|
|
|
397
|
-
|
|
406
|
+
this.closeMagnifier();
|
|
398
407
|
|
|
399
|
-
|
|
408
|
+
if(view360){
|
|
409
|
+
// @ts-ignore
|
|
410
|
+
window.CI360.init();
|
|
411
|
+
}
|
|
400
412
|
|
|
413
|
+
});
|
|
414
|
+
}else{
|
|
401
415
|
this.closeMagnifier();
|
|
402
416
|
|
|
403
417
|
if(view360){
|
|
404
418
|
// @ts-ignore
|
|
405
419
|
window.CI360.init();
|
|
406
420
|
}
|
|
421
|
+
}
|
|
407
422
|
|
|
408
|
-
|
|
423
|
+
const thisSelf = this;
|
|
409
424
|
}
|
|
410
425
|
}
|
|
411
426
|
|
package/src/components/index.ts
CHANGED
|
@@ -55,6 +55,7 @@ export {default as SocialMedia} from "./social_media.astro";
|
|
|
55
55
|
export {default as Star} from "./star.astro";
|
|
56
56
|
export {default as Stat} from "./stat.astro";
|
|
57
57
|
export {default as Swiper} from "./swiper.astro";
|
|
58
|
+
export {default as Splide} from "./splide.astro";
|
|
58
59
|
export {default as Tabs} from "./tabs.astro";
|
|
59
60
|
export {default as TagsCategoryList} from "./tags_category_list.astro";
|
|
60
61
|
export {default as Vimeo} from "./vimeo.astro";
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
---
|
|
2
|
+
/**
|
|
3
|
+
* 图片切换展示组件-splide版
|
|
4
|
+
*
|
|
5
|
+
* jeawin-astro/src/components/splide.astro
|
|
6
|
+
*
|
|
7
|
+
* @package jeawin-astro
|
|
8
|
+
* @author Chaegumi
|
|
9
|
+
* @copyright Copyright (c) 2024-2099 jeawin.com
|
|
10
|
+
* @email chaegumi@jeawin.com
|
|
11
|
+
* @filesource
|
|
12
|
+
*/
|
|
13
|
+
import '@splidejs/splide/css';
|
|
14
|
+
import CommonCard from "./common_card.astro";
|
|
15
|
+
const {
|
|
16
|
+
splideID,
|
|
17
|
+
items,
|
|
18
|
+
autoPlay = true,
|
|
19
|
+
slidesPerView = 1,
|
|
20
|
+
spaceBetween = 15,
|
|
21
|
+
mdSlidesPerView = 1,
|
|
22
|
+
mdSpaceBetween = 15,
|
|
23
|
+
...other_props
|
|
24
|
+
} = Astro.props;
|
|
25
|
+
|
|
26
|
+
let html = "";
|
|
27
|
+
if (Astro.slots.has("default")) {
|
|
28
|
+
html = await Astro.slots.render("default", [items]);
|
|
29
|
+
}
|
|
30
|
+
---
|
|
31
|
+
<astro-splide
|
|
32
|
+
data-swiper_id={splideID}
|
|
33
|
+
data-slides_per_view={slidesPerView}
|
|
34
|
+
data-space_between={spaceBetween}
|
|
35
|
+
data-md_slides_per_view={mdSlidesPerView}
|
|
36
|
+
data-md_space_between={mdSpaceBetween}>
|
|
37
|
+
<section class="splide" aria-label="Splide Basic HTML Example">
|
|
38
|
+
<div class="splide__track">
|
|
39
|
+
<ul class="splide__list">
|
|
40
|
+
{
|
|
41
|
+
Astro.slots.has("default") ? (
|
|
42
|
+
<Fragment set:html={html} />
|
|
43
|
+
) : (
|
|
44
|
+
<Fragment>
|
|
45
|
+
{items.map((item: any, idx: number) => (
|
|
46
|
+
<li class="splide__slide">
|
|
47
|
+
<CommonCard node={item} />
|
|
48
|
+
</li>
|
|
49
|
+
))}
|
|
50
|
+
</Fragment>
|
|
51
|
+
)
|
|
52
|
+
}
|
|
53
|
+
</ul>
|
|
54
|
+
</div>
|
|
55
|
+
</section>
|
|
56
|
+
</astro-splide>
|
|
57
|
+
<style>
|
|
58
|
+
.splide{
|
|
59
|
+
margin:0 auto;
|
|
60
|
+
}
|
|
61
|
+
.splide__slide img{
|
|
62
|
+
width:100%;
|
|
63
|
+
/* height: auto; */
|
|
64
|
+
height:100%;
|
|
65
|
+
object-fit: cover;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.splide__slide.is-active {
|
|
69
|
+
opacity: 1;
|
|
70
|
+
}
|
|
71
|
+
</style>
|
|
72
|
+
<script>
|
|
73
|
+
import Splide from "@splidejs/splide";
|
|
74
|
+
|
|
75
|
+
class AstroSplide extends HTMLElement{
|
|
76
|
+
constructor(){
|
|
77
|
+
super();
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
connectedCallback(){
|
|
81
|
+
const splideElem: any = this.querySelector('.splide');
|
|
82
|
+
if(splideElem){
|
|
83
|
+
|
|
84
|
+
const perPage = this.dataset.md_slides_per_view;
|
|
85
|
+
const spaceBetween = this.dataset.md_space_between;
|
|
86
|
+
|
|
87
|
+
const splide = new Splide( splideElem, {
|
|
88
|
+
autoplay: true,
|
|
89
|
+
perPage: Number(perPage) || 6,
|
|
90
|
+
gap: Number(spaceBetween) || 10,
|
|
91
|
+
rewind : true
|
|
92
|
+
} );
|
|
93
|
+
|
|
94
|
+
splide.mount();
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
customElements.define('astro-splide', AstroSplide);
|
|
101
|
+
|
|
102
|
+
</script>
|