appscms-tools-theme 4.8.5 → 4.8.6
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.
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
|