Browse code

Initial commit

Benjamin Roth authored on16/03/2023 20:22:35
Showing1 changed files
1 1
new file mode 100644
... ...
@@ -0,0 +1,154 @@
1
+<?php header('Access-Control-Allow-Origin: *'); ?>
2
+
3
+<?php if (TL_MODE == 'FE') {
4
+    $GLOBALS['TL_CSS'][] = 'files/base/layout/css/elements/custom-elements/ce_rsce_videoslider.min.css|static';
5
+}
6
+?>
7
+
8
+
9
+    <div <?php echo $this->cssID; ?> class="content--element <?php echo $this->class; ?>">
10
+        <div class="ce--inner ">
11
+            <?php if ($this->headline || $this->subline || $this->topline) : ?>
12
+            <div class="ce--headline"
13
+                 data-aos="<?php if ($this->animation_type) : ?><?php echo $this->animation_type; ?><?php else : ?>animate__fadeInUp<?php endif; ?>">
14
+                <div class="container">
15
+                    <?php if ($this->topline) : ?>
16
+                        <span class="ce--topline"><?php echo $this->topline; ?></span>
17
+                    <?php endif; ?>
18
+                    <?php if ($this->headline) : ?>
19
+                    <<?php echo($this->hl); ?>>
20
+                    <?php echo($this->headline); ?>
21
+                </<?php echo($this->hl); ?>>
22
+                <?php endif; ?>
23
+                <?php if ($this->subline) : ?>
24
+                    <span class="ce--subline"><?php echo $this->subline; ?></span>
25
+                <?php endif; ?>
26
+            </div>
27
+        </div>
28
+        <?php endif; ?>
29
+        <div class="ce--videoslider"
30
+             data-aos="<?php if ($this->animation_type) : ?><?php echo $this->animation_type; ?><?php else : ?>animate__fadeInUp<?php endif; ?>">
31
+
32
+            <div class="ce--inner <?php if (!$this->fullwidth) : ?>container <?php endif; ?>">
33
+
34
+                <div class="video-slider video-slider_<?= $this->id; ?> swiper custom">
35
+                    <!-- Additional required wrapper -->
36
+                    <div class="swiper-wrapper ">
37
+                        <!-- Slides -->
38
+                        <?php foreach ($this->elements as $slide) : ?>
39
+                            <div class="swiper-slide"
40
+                            >
41
+
42
+
43
+                                <?php if ($slide->video_type == "inline"): ?>
44
+                                    <div class="video_container">
45
+                                        <embed data-source="//www.youtube-nocookie.com/embed/<?php echo $slide->video_id; ?>"
46
+                                               title="<?php echo $slide->text; ?>" frameborder="0"
47
+                                               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
48
+                                               allowfullscreen>
49
+                                    </div>
50
+                                <?php else: ?>
51
+
52
+                                    <a <?php if ($slide->video_type == "new_tab"): ?> target="_blank" <?php else : ?> class="video-link cboxElement" data-lightbox <?php endif; ?>
53
+                                            href='//www.youtube-nocookie.com/watch?v=<?php echo $slide->video_id; ?>'>
54
+                                        <img class="swiper-lazy"
55
+                                             data-src="<?= Image::get(FilesModel::findByUuid($slide->image)->path, null, null, null); ?>">
56
+                                    </a>
57
+                                <?php endif; ?>
58
+
59
+
60
+                                <?php if ($slide->text) : ?>
61
+                                    <span class="slide-caption"><?php echo $slide->text; ?></span>
62
+                                <?php endif; ?>
63
+
64
+
65
+                                <?php if ($slide->longtext) : ?>
66
+                                    <span class="slide-description"><?php echo $slide->longtext; ?></span>
67
+                                <?php endif; ?>
68
+
69
+                            </div>
70
+                        <?php endforeach ?>
71
+
72
+                    </div>
73
+
74
+                </div>
75
+                <?php if (count($this->elements) > 1) : ?>
76
+                    <div class="video-slider_<?= $this->id; ?> swiper-pagination"></div>
77
+                    <div class="video-slider_<?= $this->id; ?> swiper-button-prev"></div>
78
+                    <div class="video-slider_<?= $this->id; ?> swiper-button-next"></div>
79
+                <?php endif; ?>
80
+
81
+            </div>
82
+
83
+        </div>
84
+    </div>
85
+    </div>
86
+
87
+<?php if (TL_MODE == 'FE'): ?>
88
+    <script>
89
+        window.addEventListener('load', function () {
90
+            if ($('.swiper.video-slider_<?= $this->id;?>').length) {
91
+
92
+                const swiper_<?php echo $this->id; ?> = new Swiper('.swiper.video-slider_<?php echo $this->id; ?>', {
93
+                    direction: 'horizontal',
94
+
95
+                    <?php if (count($this->elements) > 1) : ?>
96
+                    navigation: {
97
+                        nextEl: '.video-slider_<?= $this->id;?>.swiper-button-next',
98
+                        prevEl: '.video-slider_<?= $this->id;?>.swiper-button-prev',
99
+                    },
100
+
101
+                    pagination: {
102
+                        el: '.video-slider_<?php echo $this->id; ?>.swiper-pagination',
103
+                        clickable: true,
104
+                    },
105
+
106
+                    loop: true,
107
+                    <?php endif; ?>
108
+
109
+                    preloadImages: false,
110
+                    lazy: {
111
+                        loadPrevNext: true,
112
+                    },
113
+                    slidesPerView: 1,
114
+                    spaceBetween: 10,
115
+                    checkInView: true,
116
+                    // Responsive breakpoints
117
+                    breakpoints: {
118
+                        320: {
119
+                            slidesPerView: 1,
120
+                            spaceBetween: <?php echo $this->gutter; ?>
121
+                        },
122
+                        480: {
123
+                            slidesPerView: 2,
124
+                            spaceBetween: <?php echo $this->gutter; ?>
125
+                        },
126
+                        <?php if ($this->columns == 6) : ?>
127
+                        768: {
128
+                            slidesPerView: 3,
129
+                            spaceBetween: <?php echo $this->gutter; ?>
130
+                        },
131
+                        992: {
132
+                            slidesPerView: 4,
133
+                            spaceBetween: <?php echo $this->gutter; ?>
134
+                        },
135
+                        1200: {
136
+                            slidesPerView: 5,
137
+                            spaceBetween: <?php echo $this->gutter; ?>
138
+                        },
139
+                        1400: {
140
+                            slidesPerView: 6,
141
+                            spaceBetween: <?php echo $this->gutter; ?>
142
+                        },
143
+                        <?php else : ?>
144
+                        992: {
145
+                            slidesPerView: <?php echo $this->columns; ?>,
146
+                            spaceBetween: <?php echo $this->gutter; ?>
147
+                        }
148
+                        <?php endif; ?>
149
+                    }
150
+                });
151
+            }
152
+        }, {passive: true})
153
+    </script>
154
+<?php endif; ?>
0 155
\ No newline at end of file