appscms-tools-theme 4.8.5 → 4.8.6
Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ae9825c20f03eee64a536a32700a3cd46ccce4a273c47e38c1c19c3786f80268
|
|
4
|
+
data.tar.gz: 36eed1340f35436d0ebc51fc4d27526fa0b3ea6aaf756ecc97d1886c61625765
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c1f82195160cf40e10aa7f5d7e4eb75f69ce9c1d2a10760d85ee6a316f695417b44190149b72a6cee7be45bb4026c4399535ab387eae9e76cc2d9a32af1b7295
|
|
7
|
+
data.tar.gz: 7ddcbd7bae8eb50d0580eb1d2d25db7d5563e574777bcb6779d3b56546c08c8837e26abc2f8f1fd9c8f9a707c2eb5431c7f33d6638b95087bec6dc36db8dde38
|
|
@@ -1,168 +1,108 @@
|
|
|
1
1
|
<style>
|
|
2
|
-
.
|
|
3
|
-
width: 100%;
|
|
4
|
-
padding: 50px 0px 50px 0px;
|
|
5
|
-
border-top: 1px solid rgb(224, 224, 224);
|
|
6
|
-
display: flex;
|
|
7
|
-
flex-direction: column;
|
|
8
|
-
align-items: center;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.inforgraphics_section .wrapper {
|
|
12
|
-
display: flex;
|
|
13
|
-
max-width: 700px;
|
|
14
|
-
position: relative;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.inforgraphics_section .wrapper i {
|
|
18
|
-
top: 50%;
|
|
19
|
-
height: 44px;
|
|
20
|
-
width: 44px;
|
|
21
|
-
color: #343f4f;
|
|
22
|
-
cursor: pointer;
|
|
23
|
-
font-size: 1.15rem;
|
|
24
|
-
position: absolute;
|
|
25
|
-
text-align: center;
|
|
26
|
-
line-height: 44px;
|
|
27
|
-
background: #eee;
|
|
28
|
-
border-radius: 50%;
|
|
29
|
-
transform: translateY(-50%);
|
|
30
|
-
transition: transform 0.1s linear;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.inforgraphics_section .wrapper i:active {
|
|
34
|
-
transform: translateY(-50%) scale(0.9);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.inforgraphics_section .wrapper i:hover {
|
|
38
|
-
background: #f2f2f2;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.inforgraphics_section .wrapper i:first-child {
|
|
42
|
-
left: 0px;
|
|
2
|
+
.modal1 {
|
|
43
3
|
display: none;
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
display: flex;
|
|
53
|
-
max-width: 700px;
|
|
54
|
-
overflow-x: scroll;
|
|
55
|
-
scroll-snap-type: x mandatory;
|
|
56
|
-
scroll-behavior: smooth;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.carousel-inner {
|
|
60
|
-
display: flex;
|
|
61
|
-
flex-wrap: nowrap;
|
|
4
|
+
position: fixed;
|
|
5
|
+
z-index: 1000;
|
|
6
|
+
left: 0;
|
|
7
|
+
top: 0;
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
overflow: auto;
|
|
11
|
+
background-color: rgba(59, 58, 58, 0.9);
|
|
62
12
|
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
13
|
+
.modal1-content1 {
|
|
14
|
+
margin: auto;
|
|
15
|
+
display: block;
|
|
16
|
+
width: 80%;
|
|
17
|
+
max-width: 800px;
|
|
18
|
+
margin-top: 20px;
|
|
68
19
|
}
|
|
69
|
-
|
|
70
|
-
.carousel img {
|
|
20
|
+
.modal1-body img {
|
|
71
21
|
width: 100%;
|
|
72
|
-
object-fit: contain;
|
|
73
|
-
max-width: 100%;
|
|
74
22
|
height: auto;
|
|
75
|
-
border-radius: 8px;
|
|
76
23
|
}
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
font-size:
|
|
82
|
-
|
|
83
|
-
|
|
24
|
+
.close1 {
|
|
25
|
+
position: absolute;
|
|
26
|
+
top: 10px;
|
|
27
|
+
right: 10px;
|
|
28
|
+
font-size: 24px;
|
|
29
|
+
color: #fff;
|
|
30
|
+
cursor: pointer;
|
|
84
31
|
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
.inforgraphics_section .wrapper {
|
|
88
|
-
max-width: 100%;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.carousel-inner p {
|
|
92
|
-
font-size: 20px;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.inforgraphics_section .wrapper i:first-child {
|
|
96
|
-
left: 0;
|
|
97
|
-
/* margin-left: 14px; */
|
|
98
|
-
z-index: 99;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.inforgraphics_section .wrapper i:last-child {
|
|
102
|
-
right: 0;
|
|
103
|
-
z-index: 99;
|
|
104
|
-
display: block !important;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.carousel {
|
|
108
|
-
overflow-x: hidden;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
.slide {
|
|
112
|
-
flex: 0 0 100%;
|
|
113
|
-
margin-right: 0;
|
|
114
|
-
}
|
|
32
|
+
.close1:hover {
|
|
33
|
+
color: #ccc;
|
|
115
34
|
}
|
|
116
35
|
</style>
|
|
117
|
-
|
|
118
36
|
<div class="inforgraphics_section">
|
|
119
37
|
<h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
|
|
120
38
|
<div class="wrapper">
|
|
121
|
-
<
|
|
39
|
+
<img
|
|
40
|
+
class="infographics-arrow"
|
|
41
|
+
id="left"
|
|
42
|
+
src="/assets/images/arrow-left.svg"
|
|
43
|
+
alt=""
|
|
44
|
+
/>
|
|
122
45
|
<div class="carousel">
|
|
123
46
|
<div class="carousel-inner">
|
|
124
|
-
{%- if
|
|
125
|
-
<div class="slide">
|
|
126
|
-
<img
|
|
127
|
-
loading="lazy"
|
|
128
|
-
src="{{ item.image }}"
|
|
129
|
-
alt="img"
|
|
130
|
-
draggable="false"
|
|
131
|
-
/>
|
|
132
|
-
<p class="infographic-desc">{{ item.description | capitalize }}</p>
|
|
133
|
-
</div>
|
|
134
|
-
{% endfor %} {%- else -%} {% for item in featureData.infographics %}
|
|
47
|
+
{%- if pageData.infographics -%} {% for item in pageData.infographics %}
|
|
135
48
|
<div class="slide">
|
|
136
49
|
<img
|
|
137
50
|
loading="lazy"
|
|
138
51
|
src="{{ item.image }}"
|
|
139
52
|
alt="img"
|
|
140
53
|
draggable="false"
|
|
54
|
+
class="infographic-img"
|
|
55
|
+
onclick="openModal1('{{ item.image }}')"
|
|
141
56
|
/>
|
|
142
57
|
<p class="infographic-desc">{{ item.description | capitalize }}</p>
|
|
143
58
|
</div>
|
|
144
59
|
{% endfor %} {%- endif -%}
|
|
145
60
|
</div>
|
|
146
61
|
</div>
|
|
147
|
-
<
|
|
62
|
+
<img
|
|
63
|
+
class="infographics-arrow"
|
|
64
|
+
id="right"
|
|
65
|
+
src="/assets/images/arrow-right.svg"
|
|
66
|
+
alt=""
|
|
67
|
+
/>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
<div id="imageModal1" class="modal1" onclick="closeModal1()">
|
|
71
|
+
<span class="close1" onclick="closeModal1()">×</span>
|
|
72
|
+
<div class="modal1-content1">
|
|
73
|
+
<div class="modal1-body">
|
|
74
|
+
<img id="modal1Image" src="" alt="Image" />
|
|
75
|
+
</div>
|
|
148
76
|
</div>
|
|
149
77
|
</div>
|
|
150
|
-
|
|
151
78
|
<script>
|
|
79
|
+
function openModal1(imageSrc) {
|
|
80
|
+
var modal1 = document.getElementById("imageModal1");
|
|
81
|
+
var modal1Img = document.getElementById("modal1Image");
|
|
82
|
+
modal1.style.display = "block";
|
|
83
|
+
modal1Img.src = imageSrc;
|
|
84
|
+
}
|
|
85
|
+
function closeModal1() {
|
|
86
|
+
var modal1 = document.getElementById("imageModal1");
|
|
87
|
+
modal1.style.display = "none";
|
|
88
|
+
}
|
|
89
|
+
document.addEventListener("click", function (event) {
|
|
90
|
+
var modal1 = document.getElementById("imageModal1");
|
|
91
|
+
if (event.target === modal1) {
|
|
92
|
+
closeModal1();
|
|
93
|
+
}
|
|
94
|
+
});
|
|
152
95
|
const carousel = document.querySelector(".carousel-inner"),
|
|
153
96
|
firstImg = carousel.querySelectorAll("img")[0],
|
|
154
|
-
arrowIcons = document.querySelectorAll(".
|
|
155
|
-
|
|
97
|
+
arrowIcons = document.querySelectorAll(".infographics-arrow");
|
|
156
98
|
const numImages = carousel.querySelectorAll("img").length;
|
|
157
99
|
const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
|
|
158
|
-
|
|
159
100
|
if (numImages > 3) {
|
|
160
101
|
arrowIcons[1].style.display = "block";
|
|
161
102
|
} else {
|
|
162
103
|
arrowIcons[0].style.display = "none";
|
|
163
104
|
arrowIcons[1].style.display = "none";
|
|
164
105
|
}
|
|
165
|
-
|
|
166
106
|
let isDragStart = false,
|
|
167
107
|
isDragging = false,
|
|
168
108
|
prevPageX,
|
|
@@ -174,7 +114,6 @@
|
|
|
174
114
|
arrowIcons[1].style.display =
|
|
175
115
|
carousel.scrollLeft == scrollWidth ? "none" : "block";
|
|
176
116
|
};
|
|
177
|
-
|
|
178
117
|
arrowIcons.forEach((icon) => {
|
|
179
118
|
icon.addEventListener("click", () => {
|
|
180
119
|
let firstImgWidth = firstImg.clientWidth + 40;
|
|
@@ -186,56 +125,4 @@
|
|
|
186
125
|
setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
|
|
187
126
|
});
|
|
188
127
|
});
|
|
189
|
-
|
|
190
|
-
// const autoSlide = () => {
|
|
191
|
-
// // if there is no image left to scroll then return from here
|
|
192
|
-
// if (carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
|
|
193
|
-
|
|
194
|
-
// positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
|
|
195
|
-
// let firstImgWidth = firstImg.clientWidth + 14;
|
|
196
|
-
// // getting difference value that needs to add or reduce from carousel left to take middle img center
|
|
197
|
-
// let valDifference = firstImgWidth - positionDiff;
|
|
198
|
-
|
|
199
|
-
// if (carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
|
|
200
|
-
// return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
|
|
201
|
-
// }
|
|
202
|
-
// // if user is scrolling to the left
|
|
203
|
-
// carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
|
|
204
|
-
// }
|
|
205
|
-
|
|
206
|
-
// const dragStart = (e) => {
|
|
207
|
-
// // updatating global variables value on mouse down event
|
|
208
|
-
// isDragStart = true;
|
|
209
|
-
// prevPageX = e.pageX || e.touches[0].pageX;
|
|
210
|
-
// prevScrollLeft = carousel.scrollLeft;
|
|
211
|
-
// }
|
|
212
|
-
|
|
213
|
-
// const dragging = (e) => {
|
|
214
|
-
// // scrolling images/carousel to left according to mouse pointer
|
|
215
|
-
// if (!isDragStart) return;
|
|
216
|
-
// e.preventDefault();
|
|
217
|
-
// isDragging = true;
|
|
218
|
-
// carousel.classList.add("dragging");
|
|
219
|
-
// positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
|
|
220
|
-
// carousel.scrollLeft = prevScrollLeft - positionDiff;
|
|
221
|
-
// showHideIcons();
|
|
222
|
-
// }
|
|
223
|
-
|
|
224
|
-
// const dragStop = () => {
|
|
225
|
-
// isDragStart = false;
|
|
226
|
-
// carousel.classList.remove("dragging");
|
|
227
|
-
|
|
228
|
-
// if (!isDragging) return;
|
|
229
|
-
// isDragging = false;
|
|
230
|
-
// autoSlide();
|
|
231
|
-
// }
|
|
232
|
-
|
|
233
|
-
// carousel.addEventListener("mousedown", dragStart);
|
|
234
|
-
// carousel.addEventListener("touchstart", dragStart);
|
|
235
|
-
|
|
236
|
-
// document.addEventListener("mousemove", dragging);
|
|
237
|
-
// carousel.addEventListener("touchmove", dragging);
|
|
238
|
-
|
|
239
|
-
// document.addEventListener("mouseup", dragStop);
|
|
240
|
-
// carousel.addEventListener("touchend", dragStop);
|
|
241
128
|
</script>
|
|
@@ -3,57 +3,60 @@
|
|
|
3
3
|
{%- elsif site.internationalizationall -%}
|
|
4
4
|
|
|
5
5
|
<div class="internationalization-section">
|
|
6
|
-
<div class="
|
|
7
|
-
<div class="
|
|
8
|
-
<div class="
|
|
9
|
-
<
|
|
6
|
+
<div class="container">
|
|
7
|
+
<div class="row">
|
|
8
|
+
<div class="col-md-12 mx-auto">
|
|
9
|
+
<div class="d-flex justify-content-center mt-1">
|
|
10
|
+
<h3>Available in</h3>
|
|
11
|
+
</div>
|
|
12
|
+
<div class="internationalization-languages">
|
|
13
|
+
{%- for item in matchurls -%} {%- if item != 'zh-TW' -%} {%- if item ==
|
|
14
|
+
'en'-%} {%- if dataFile.htmlLangAtt == item -%}
|
|
15
|
+
|
|
16
|
+
<a
|
|
17
|
+
class="active-lang internationalization-language-drop-down-item font-weight-bold"
|
|
18
|
+
href="{{ page.permalink}}"
|
|
19
|
+
>English <i class="fas fa-check ml-auto"></i>
|
|
20
|
+
</a>
|
|
21
|
+
|
|
22
|
+
{%- else -%} {%- if dataFile.features -%}
|
|
23
|
+
<a class="internationalization-language-drop-down-item" href="/">English</a>
|
|
24
|
+
{%- else -%}
|
|
25
|
+
<a
|
|
26
|
+
class="internationalization-language-drop-down-item"
|
|
27
|
+
href="/{{ page.permalink | split: '/' | last}}"
|
|
28
|
+
>English
|
|
29
|
+
</a>
|
|
30
|
+
{%- endif -%} {%- endif -%} {%- else -%} {%- if dataFile.htmlLangAtt == item
|
|
31
|
+
-%} < > {%- if page.permalink | split: '/' | last != item -%}
|
|
32
|
+
<a
|
|
33
|
+
class="internationalization-language-drop-down-item font-weight-bold active-lang"
|
|
34
|
+
href="{{ page.permalink}}"
|
|
35
|
+
>{{[item][1]}}
|
|
36
|
+
<i class="fas fa-check ml-auto"></i>
|
|
37
|
+
</a>
|
|
38
|
+
{%- else -%}
|
|
39
|
+
<a class="active-lang" href="/{{item}}"
|
|
40
|
+
>{{[item][1]}}
|
|
41
|
+
<i class="fas fa-check ml-auto"></i>
|
|
42
|
+
</a>
|
|
43
|
+
{%- endif -%} {%- else -%} {%- if page.permalink | split: '/' | last != item
|
|
44
|
+
-%} {%- if dataFile.features -%}
|
|
45
|
+
<a class="internationalization-language-drop-down-item" href="/{{item}}">{{[item][1]}} </a>
|
|
46
|
+
{%- else -%}
|
|
47
|
+
<a
|
|
48
|
+
class="internationalization-language-drop-down-item"
|
|
49
|
+
href="/{{item}}/{{ page.permalink | split: '/' | last}}"
|
|
50
|
+
>{{[item][1]}}
|
|
51
|
+
</a>
|
|
52
|
+
{%- endif -%} {%- else -%}
|
|
53
|
+
<a class="internationalization-language-drop-down-item" href="/{{item}}">{{[item][1]}} </a>
|
|
54
|
+
{%- endif -%} {%- endif -%} {%- endif -%} {%- endif -%} {%- endfor -%}
|
|
55
|
+
</ul>
|
|
56
|
+
</div>
|
|
10
57
|
</div>
|
|
11
|
-
<div class="internationalization-languages">
|
|
12
|
-
{%- for item in matchurls -%} {%- if item != 'zh-TW' -%} {%- if item ==
|
|
13
|
-
'en'-%} {%- if dataFile.htmlLangAtt == item -%}
|
|
14
|
-
|
|
15
|
-
<a
|
|
16
|
-
class="active-lang internationalization-language-drop-down-item font-weight-bold"
|
|
17
|
-
href="{{ page.permalink}}"
|
|
18
|
-
>English <i class="fas fa-check ml-auto"></i>
|
|
19
|
-
</a>
|
|
20
|
-
|
|
21
|
-
{%- else -%} {%- if dataFile.features -%}
|
|
22
|
-
<a class="internationalization-language-drop-down-item" href="/">English</a>
|
|
23
|
-
{%- else -%}
|
|
24
|
-
<a
|
|
25
|
-
class="internationalization-language-drop-down-item"
|
|
26
|
-
href="/{{ page.permalink | split: '/' | last}}"
|
|
27
|
-
>English
|
|
28
|
-
</a>
|
|
29
|
-
{%- endif -%} {%- endif -%} {%- else -%} {%- if dataFile.htmlLangAtt == item
|
|
30
|
-
-%} < > {%- if page.permalink | split: '/' | last != item -%}
|
|
31
|
-
<a
|
|
32
|
-
class="internationalization-language-drop-down-item font-weight-bold active-lang"
|
|
33
|
-
href="{{ page.permalink}}"
|
|
34
|
-
>{{[item][1]}}
|
|
35
|
-
<i class="fas fa-check ml-auto"></i>
|
|
36
|
-
</a>
|
|
37
|
-
{%- else -%}
|
|
38
|
-
<a class="active-lang" href="/{{item}}"
|
|
39
|
-
>{{[item][1]}}
|
|
40
|
-
<i class="fas fa-check ml-auto"></i>
|
|
41
|
-
</a>
|
|
42
|
-
{%- endif -%} {%- else -%} {%- if page.permalink | split: '/' | last != item
|
|
43
|
-
-%} {%- if dataFile.features -%}
|
|
44
|
-
<a class="internationalization-language-drop-down-item" href="/{{item}}">{{[item][1]}} </a>
|
|
45
|
-
{%- else -%}
|
|
46
|
-
<a
|
|
47
|
-
class="internationalization-language-drop-down-item"
|
|
48
|
-
href="/{{item}}/{{ page.permalink | split: '/' | last}}"
|
|
49
|
-
>{{[item][1]}}
|
|
50
|
-
</a>
|
|
51
|
-
{%- endif -%} {%- else -%}
|
|
52
|
-
<a class="internationalization-language-drop-down-item" href="/{{item}}">{{[item][1]}} </a>
|
|
53
|
-
{%- endif -%} {%- endif -%} {%- endif -%} {%- endif -%} {%- endfor -%}
|
|
54
|
-
</ul>
|
|
55
|
-
</div>
|
|
56
58
|
</div>
|
|
59
|
+
|
|
57
60
|
</div>
|
|
58
61
|
|
|
59
62
|
</div>
|
|
@@ -2149,3 +2149,44 @@ select:focus {
|
|
|
2149
2149
|
color: var(--black-color);
|
|
2150
2150
|
padding: 10px 20px;
|
|
2151
2151
|
}
|
|
2152
|
+
.infographics-arrow {
|
|
2153
|
+
height: 35px;
|
|
2154
|
+
width: 35px;
|
|
2155
|
+
filter: invert(1);
|
|
2156
|
+
position: absolute;
|
|
2157
|
+
top: 50%;
|
|
2158
|
+
background-color: #000;
|
|
2159
|
+
border-radius: 50%;
|
|
2160
|
+
padding: 8px;
|
|
2161
|
+
}
|
|
2162
|
+
#left {
|
|
2163
|
+
left: 3%;
|
|
2164
|
+
}
|
|
2165
|
+
#right {
|
|
2166
|
+
right: 3%;
|
|
2167
|
+
}
|
|
2168
|
+
|
|
2169
|
+
.internationalization-languages {
|
|
2170
|
+
display: grid;
|
|
2171
|
+
grid-template-columns: repeat(4, auto); /* Default: 4 columns */
|
|
2172
|
+
gap: 10px;
|
|
2173
|
+
padding: 10px;
|
|
2174
|
+
}
|
|
2175
|
+
|
|
2176
|
+
@media (max-width: 1200px) {
|
|
2177
|
+
.internationalization-languages {
|
|
2178
|
+
grid-template-columns: repeat(3, auto); /* 3 columns for large screens */
|
|
2179
|
+
}
|
|
2180
|
+
}
|
|
2181
|
+
|
|
2182
|
+
@media (max-width: 900px) {
|
|
2183
|
+
.internationalization-languages {
|
|
2184
|
+
grid-template-columns: repeat(2, auto); /* 2 columns for medium screens */
|
|
2185
|
+
}
|
|
2186
|
+
}
|
|
2187
|
+
|
|
2188
|
+
@media (max-width: 600px) {
|
|
2189
|
+
.internationalization-languages {
|
|
2190
|
+
grid-template-columns: auto; /* 1 column for small screens */
|
|
2191
|
+
}
|
|
2192
|
+
}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
function openModal1(imageSrc) {
|
|
2
|
-
var modal1 = document.getElementById("imageModal1");
|
|
3
|
-
var modal1Img = document.getElementById("modal1Image");
|
|
4
|
-
modal1.style.display = "block";
|
|
5
|
-
modal1Img.src = imageSrc;
|
|
6
|
-
}
|
|
7
|
-
function closeModal1() {
|
|
8
|
-
var modal1 = document.getElementById("imageModal1");
|
|
9
|
-
modal1.style.display = "none";
|
|
10
|
-
}
|
|
11
|
-
document.addEventListener("click", function (event) {
|
|
12
|
-
var modal1 = document.getElementById("imageModal1");
|
|
13
|
-
if (event.target === modal1) {
|
|
14
|
-
closeModal1();
|
|
15
|
-
}
|
|
16
|
-
});
|
|
17
|
-
const carousel = document.querySelector(".carousel-inner"),
|
|
18
|
-
firstImg = carousel.querySelectorAll("img")[0],
|
|
19
|
-
arrowIcons = document.querySelectorAll(".wrapper i");
|
|
20
|
-
const numImages = carousel.querySelectorAll("img").length;
|
|
21
|
-
const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
|
|
22
|
-
if (numImages > 3) {
|
|
23
|
-
arrowIcons[1].style.display = "block";
|
|
24
|
-
} else {
|
|
25
|
-
arrowIcons[0].style.display = "none";
|
|
26
|
-
arrowIcons[1].style.display = "none";
|
|
27
|
-
}
|
|
28
|
-
let isDragStart = false,
|
|
29
|
-
isDragging = false,
|
|
30
|
-
prevPageX,
|
|
31
|
-
prevScrollLeft,
|
|
32
|
-
positionDiff;
|
|
33
|
-
const showHideIcons = () => {
|
|
34
|
-
let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
|
|
35
|
-
arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
|
|
36
|
-
arrowIcons[1].style.display =
|
|
37
|
-
carousel.scrollLeft == scrollWidth ? "none" : "block";
|
|
38
|
-
};
|
|
39
|
-
arrowIcons.forEach((icon) => {
|
|
40
|
-
icon.addEventListener("click", () => {
|
|
41
|
-
let firstImgWidth = firstImg.clientWidth + 40;
|
|
42
|
-
const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
|
|
43
|
-
carousel.scrollBy({
|
|
44
|
-
left: scrollAmount,
|
|
45
|
-
behavior: "smooth",
|
|
46
|
-
});
|
|
47
|
-
setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
|
|
48
|
-
});
|
|
49
|
-
});
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: appscms-tools-theme
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 4.8.
|
|
4
|
+
version: 4.8.6
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- vivek-appscms
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2024-08-
|
|
11
|
+
date: 2024-08-24 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|