word-games-theme 2.1.1 → 2.1.2
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 +4 -4
- data/_data/xyzPagesData/en/words-with-letters-cheat.json +23 -0
- data/_includes/infographics/infographics.html +177 -298
- data/_includes/section/xyzGroup.html +1 -1
- data/_layouts/xyzpages.html +7 -0
- data/assets/js/xyz.js +179 -0
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 024671d37804d60cd3d9383a57668db0a71f0e9436d948d09f54fead1c1db21c
|
|
4
|
+
data.tar.gz: 145f84998e92c34216142461250c96ea759c9c695f4a635c719c684d9ebde945
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 626a0ab1c711de046c2b436d9085a41f884ad6ca0bd16b45239d505e773b3f9aaed0341a84d7dda3eb7954a633769898ea776b92551bc042dd2527ee7005294c
|
|
7
|
+
data.tar.gz: 73a9819289f6caaa849d0d5013abf7575f9007e8291b54aff7681bf445a19cdf9f93a46c3cb3543e168916f0ccdd584b77d5ee5fa829018a4ea8a193f08711e1
|
|
@@ -363,6 +363,29 @@
|
|
|
363
363
|
}
|
|
364
364
|
]
|
|
365
365
|
],
|
|
366
|
+
"infographics": [
|
|
367
|
+
{
|
|
368
|
+
"image": "/assets/images/1.png",
|
|
369
|
+
"description": "How to set alarm on wake me up at 4:45 am tool"
|
|
370
|
+
},
|
|
371
|
+
{
|
|
372
|
+
"image": "/assets/images/2.png",
|
|
373
|
+
"description": "5 benefits of using wake me up at 4:45 am tool"
|
|
374
|
+
},
|
|
375
|
+
{
|
|
376
|
+
"image": "/assets/images/3.png",
|
|
377
|
+
"description": "Additional features of wake me up at 4:45 am tool"
|
|
378
|
+
},
|
|
379
|
+
{
|
|
380
|
+
"image": "/assets/images/3.png",
|
|
381
|
+
"description": "Additional features of wake me up at 4:45 am tool"
|
|
382
|
+
},
|
|
383
|
+
{
|
|
384
|
+
"image": "/assets/images/3.png",
|
|
385
|
+
"description": "Additional features of wake me up at 4:45 am tool"
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
],
|
|
366
389
|
"featureList": [
|
|
367
390
|
{
|
|
368
391
|
"feature_heading": "Free to use",
|
|
@@ -1,342 +1,221 @@
|
|
|
1
|
-
<!-- <style>
|
|
2
|
-
/* Reset default browser styles */
|
|
3
|
-
|
|
4
|
-
.infographic {
|
|
5
|
-
display: flex;
|
|
6
|
-
justify-content: space-between;
|
|
7
|
-
align-items: center;
|
|
8
|
-
margin: 50px auto;
|
|
9
|
-
max-width: 800px;
|
|
10
|
-
}
|
|
11
|
-
.infographic-item {
|
|
12
|
-
flex-basis: 30%;
|
|
13
|
-
text-align: center;
|
|
14
|
-
/* background-color: #404040; */
|
|
15
|
-
/* border-radius: 10px; */
|
|
16
|
-
/* padding: 30px; */
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.infographic-item img {
|
|
20
|
-
max-width: 100%;
|
|
21
|
-
height: auto;
|
|
22
|
-
border-radius: 8px;
|
|
23
|
-
margin-bottom: 10px;
|
|
24
|
-
box-shadow: 15px 15px 40px rgba(0, 0, 0, 50%);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.infographic-item h3 {
|
|
28
|
-
font-size: 20px;
|
|
29
|
-
margin-bottom: 10px;
|
|
30
|
-
color: #fff;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.infographic-item p {
|
|
34
|
-
font-size: 16px;
|
|
35
|
-
margin-bottom: 0px;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
@media (max-width: 600px) {
|
|
39
|
-
.infographic {
|
|
40
|
-
flex-wrap: wrap;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.infographic-item {
|
|
44
|
-
flex-basis: 100%;
|
|
45
|
-
margin-bottom: 30px;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
</style>
|
|
49
|
-
<div class="infographics_section">
|
|
50
|
-
<h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
|
|
51
|
-
<div class="infographic">
|
|
52
|
-
{%- for item in dataToShow.infographics -%}
|
|
53
|
-
<div class="infographic-item">
|
|
54
|
-
<img src="{{item.image}}" alt="Image 1">
|
|
55
|
-
<p class="infographic-desc">{{item.description | capitalize }}</p>
|
|
56
|
-
</div>
|
|
57
|
-
{%- endfor -%}
|
|
58
|
-
</div>
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
<div class="slider">
|
|
62
|
-
<div class="row">
|
|
63
|
-
<div class="col-md-12 mx-auto">
|
|
64
|
-
<div id="carousel">
|
|
65
|
-
{%- for item in featureData.infographics -%}
|
|
66
|
-
<div class="slide">
|
|
67
|
-
<img src="{{item.image}}" alt="Photo1" />
|
|
68
|
-
<p class="infographics-desc">{{item.description | capitalize }}</p>
|
|
69
|
-
</div>
|
|
70
|
-
{%- endfor -%}
|
|
71
|
-
</div>
|
|
72
|
-
</div>
|
|
73
|
-
</div>
|
|
74
|
-
<button class="btn-slide prev"><i class="fas fa-3x fa-chevron-circle-left"></i></button>
|
|
75
|
-
<button class="btn-slide next"><i class="fas fa-3x fa-chevron-circle-right"></i></button>
|
|
76
|
-
</div>
|
|
77
|
-
<div class="dots-container">
|
|
78
|
-
{%- for item in featureData.infographics -%}
|
|
79
|
-
<span class="dot active" data-slide="{{ forloop.index0 }}"></span>
|
|
80
|
-
{%- endfor -%}
|
|
81
|
-
</div> -->
|
|
82
|
-
<!-- </div> -->
|
|
83
|
-
|
|
84
|
-
<!-- <script>
|
|
85
|
-
function Slider() {
|
|
86
|
-
const carouselSlides = document.querySelectorAll('.slide');
|
|
87
|
-
const btnPrev = document.querySelector('.prev');
|
|
88
|
-
const btnNext = document.querySelector('.next');
|
|
89
|
-
const dotsSlide = document.querySelector('.dots-container');
|
|
90
|
-
let currentSlide = 0;
|
|
91
|
-
|
|
92
|
-
const activeDot = function (slide) {
|
|
93
|
-
document.querySelectorAll('.dot').forEach(dot => dot.classList.remove('active'));
|
|
94
|
-
document.querySelector(`.dot[data-slide="${slide}"]`).classList.add('active');
|
|
95
|
-
};
|
|
96
|
-
activeDot(currentSlide);
|
|
97
|
-
|
|
98
|
-
const changeSlide = function (slides) {
|
|
99
|
-
carouselSlides.forEach((slide, index) => (slide.style.transform = `translateX(${100 * (index - slides)}%)`));
|
|
100
|
-
};
|
|
101
|
-
changeSlide(currentSlide);
|
|
102
|
-
|
|
103
|
-
btnNext.addEventListener('click', function () {
|
|
104
|
-
currentSlide++;
|
|
105
|
-
if (carouselSlides.length - 1 < currentSlide) {
|
|
106
|
-
currentSlide = 0;
|
|
107
|
-
};
|
|
108
|
-
changeSlide(currentSlide);
|
|
109
|
-
activeDot(currentSlide);
|
|
110
|
-
});
|
|
111
|
-
btnPrev.addEventListener('click', function () {
|
|
112
|
-
currentSlide--;
|
|
113
|
-
if (0 >= currentSlide) {
|
|
114
|
-
currentSlide = 0;
|
|
115
|
-
};
|
|
116
|
-
changeSlide(currentSlide);
|
|
117
|
-
activeDot(currentSlide);
|
|
118
|
-
});
|
|
119
|
-
|
|
120
|
-
dotsSlide.addEventListener('click', function (e) {
|
|
121
|
-
if (e.target.classList.contains('dot')) {
|
|
122
|
-
const slide = e.target.dataset.slide;
|
|
123
|
-
changeSlide(slide);
|
|
124
|
-
activeDot(slide);
|
|
125
|
-
}
|
|
126
|
-
});
|
|
127
|
-
};
|
|
128
|
-
Slider();
|
|
129
|
-
</script> -->
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
1
|
|
|
143
2
|
<style>
|
|
144
|
-
.
|
|
145
|
-
display: flex;
|
|
146
|
-
align-items: center;
|
|
147
|
-
justify-content: center;
|
|
148
|
-
overflow-x: hidden;
|
|
149
|
-
overflow-y: hidden;
|
|
150
|
-
height: 130vh;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
.infographics-wrapper .container {
|
|
3
|
+
.inforgraphics_section {
|
|
154
4
|
width: 100%;
|
|
155
|
-
|
|
5
|
+
padding: 50px 0px 50px 0px;
|
|
6
|
+
border-top: 1px solid rgb(224, 224, 224);
|
|
156
7
|
display: flex;
|
|
157
|
-
transform-style: preserve-3d;
|
|
158
|
-
align-items: center;
|
|
159
8
|
flex-direction: column;
|
|
9
|
+
align-items: center;
|
|
160
10
|
}
|
|
161
11
|
|
|
162
|
-
.
|
|
12
|
+
.inforgraphics_section .wrapper {
|
|
13
|
+
display: flex;
|
|
14
|
+
max-width: 700px;
|
|
163
15
|
position: relative;
|
|
164
|
-
width: 300px;
|
|
165
|
-
height: 300px;
|
|
166
|
-
margin-bottom: 20px;
|
|
167
|
-
perspective: 1000px;
|
|
168
|
-
transform-style: preserve-3d;
|
|
169
16
|
}
|
|
170
17
|
|
|
171
|
-
.
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
margin: auto;
|
|
18
|
+
.inforgraphics_section .wrapper svg {
|
|
19
|
+
top: 50%;
|
|
20
|
+
height: 44px;
|
|
21
|
+
width: 44px;
|
|
22
|
+
color: #343F4F;
|
|
177
23
|
cursor: pointer;
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
.infographics-wrapper .cards .card {
|
|
182
|
-
position: relative;
|
|
183
|
-
height: 100%;
|
|
184
|
-
background-color: #323444;
|
|
185
|
-
border-radius: 10px;
|
|
186
|
-
padding: 5px;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
.infographics-wrapper .card .image {
|
|
190
|
-
display: flex;
|
|
191
|
-
justify-content: space-between;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
.infographics-wrapper .card .image img {
|
|
195
|
-
border-radius: 5px;
|
|
196
|
-
box-shadow: 15px 15px 40px rgba(0, 0, 0, 50%);
|
|
197
|
-
margin-top: 23px;
|
|
198
|
-
width: 86%;
|
|
199
|
-
object-fit: cover;
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
.infographics-wrapper .card .image .dots {
|
|
24
|
+
font-size: 1.15rem;
|
|
25
|
+
position: absolute;
|
|
203
26
|
text-align: center;
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
.dots div {
|
|
207
|
-
width: 10px;
|
|
208
|
-
height: 10px;
|
|
27
|
+
line-height: 44px;
|
|
28
|
+
background: #eee;
|
|
209
29
|
border-radius: 50%;
|
|
210
|
-
|
|
30
|
+
transform: translateY(-50%);
|
|
31
|
+
transition: transform 0.1s linear;
|
|
211
32
|
}
|
|
212
33
|
|
|
213
|
-
.
|
|
214
|
-
|
|
34
|
+
.inforgraphics_section .wrapper svg:active {
|
|
35
|
+
transform: translateY(-50%) scale(0.9);
|
|
215
36
|
}
|
|
216
37
|
|
|
217
|
-
.
|
|
218
|
-
background
|
|
38
|
+
.inforgraphics_section .wrapper svg:hover {
|
|
39
|
+
background: #f2f2f2;
|
|
219
40
|
}
|
|
220
41
|
|
|
221
|
-
.
|
|
222
|
-
|
|
223
|
-
|
|
42
|
+
.inforgraphics_section .wrapper svg:first-child {
|
|
43
|
+
left: 0px;
|
|
44
|
+
display: none;
|
|
45
|
+
z-index: 999;
|
|
224
46
|
}
|
|
225
47
|
|
|
226
|
-
.
|
|
227
|
-
|
|
228
|
-
text-align: end;
|
|
229
|
-
padding-top: 2rem;
|
|
48
|
+
.inforgraphics_section .wrapper svg:last-child {
|
|
49
|
+
right: 0px;
|
|
230
50
|
}
|
|
231
51
|
|
|
232
|
-
.
|
|
233
|
-
|
|
234
|
-
|
|
52
|
+
.carousel {
|
|
53
|
+
display: flex;
|
|
54
|
+
max-width: 700px;
|
|
55
|
+
overflow-x: scroll;
|
|
56
|
+
scroll-snap-type: x mandatory;
|
|
57
|
+
scroll-behavior: smooth;
|
|
235
58
|
}
|
|
236
59
|
|
|
237
|
-
.
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
letter-spacing: 8px;
|
|
241
|
-
margin-bottom: 20px;
|
|
242
|
-
padding-left: 25%;
|
|
243
|
-
transition: all .6s ease;
|
|
60
|
+
.carousel-inner {
|
|
61
|
+
display: flex;
|
|
62
|
+
flex-wrap: nowrap;
|
|
244
63
|
}
|
|
245
64
|
|
|
246
|
-
.
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
text-align: center;
|
|
65
|
+
.slide {
|
|
66
|
+
flex: 0 0 calc(100% / 3);
|
|
67
|
+
scroll-snap-align: start;
|
|
68
|
+
padding: 20px;
|
|
251
69
|
}
|
|
252
70
|
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
--current-color1: #ECEAED;
|
|
260
|
-
--current-color2: #404457;
|
|
71
|
+
.carousel img {
|
|
72
|
+
width: 100%;
|
|
73
|
+
object-fit: contain;
|
|
74
|
+
max-width: 100%;
|
|
75
|
+
height: auto;
|
|
76
|
+
border-radius: 8px;
|
|
261
77
|
}
|
|
262
78
|
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
transform: translate3d(-35%, 0, -120px);
|
|
270
|
-
--current-color1: #ECEAED;
|
|
271
|
-
--current-color2: #404457;
|
|
79
|
+
.carousel-inner p {
|
|
80
|
+
text-align: center;
|
|
81
|
+
margin: 10px 0;
|
|
82
|
+
font-size: 14px;
|
|
83
|
+
white-space: normal;
|
|
84
|
+
word-wrap: break-word;
|
|
272
85
|
}
|
|
273
86
|
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
#s5:checked~.cards #slide5 {
|
|
279
|
-
transform: translate3d(0, 0, 0);
|
|
280
|
-
--current-color1: #fad00c;
|
|
281
|
-
--current-color2: #ECEAED;
|
|
282
|
-
}
|
|
87
|
+
@media screen and (max-width: 768px) {
|
|
88
|
+
.inforgraphics_section .wrapper {
|
|
89
|
+
max-width: 100%;
|
|
90
|
+
}
|
|
283
91
|
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
#s4:checked~.cards #slide5,
|
|
288
|
-
#s5:checked~.cards #slide1 {
|
|
92
|
+
.carousel-inner p {
|
|
93
|
+
font-size: 20px;
|
|
94
|
+
}
|
|
289
95
|
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
96
|
+
.inforgraphics_section .wrapper i:first-child {
|
|
97
|
+
left: 0;
|
|
98
|
+
/* margin-left: 14px; */
|
|
99
|
+
z-index: 99;
|
|
100
|
+
}
|
|
294
101
|
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
transform: translate3d(70%, 0, -220px);
|
|
301
|
-
--current-color1: #ECEAED;
|
|
302
|
-
--current-color2: #404457;
|
|
303
|
-
}
|
|
102
|
+
.inforgraphics_section .wrapper i:last-child {
|
|
103
|
+
right: 0;
|
|
104
|
+
z-index: 99;
|
|
105
|
+
display: block !important;
|
|
106
|
+
}
|
|
304
107
|
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
108
|
+
.carousel {
|
|
109
|
+
overflow-x: hidden;
|
|
110
|
+
}
|
|
111
|
+
.slide {
|
|
112
|
+
flex: 0 0 100%;
|
|
113
|
+
margin-right: 0;
|
|
308
114
|
}
|
|
309
|
-
|
|
310
115
|
}
|
|
311
116
|
</style>
|
|
312
117
|
|
|
313
|
-
<div class="
|
|
314
|
-
<
|
|
315
|
-
|
|
316
|
-
<
|
|
317
|
-
<
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
{%- for item in dataToShow.infographics -%}
|
|
324
|
-
<label for="s{{ forloop.index }}" id="slide{{ forloop.index }}">
|
|
325
|
-
<div class="card">
|
|
326
|
-
<div class="image">
|
|
327
|
-
<img src="{{item.image}}" alt="">
|
|
328
|
-
<div class="dots">
|
|
329
|
-
<div class="dot1"></div>
|
|
330
|
-
<div class="dot2"></div>
|
|
331
|
-
<div class="dot3"></div>
|
|
332
|
-
</div>
|
|
333
|
-
</div>
|
|
334
|
-
<div class="infos">
|
|
335
|
-
<span class="lorem">{{item.description | capitalize }}</span>
|
|
336
|
-
</div>
|
|
118
|
+
<div class="inforgraphics_section">
|
|
119
|
+
<h3 class="text-center w-100 mb-5" style="font-size:22px"><b>Other useful information</b></h3>
|
|
120
|
+
<div class="wrapper">
|
|
121
|
+
<svg id="left" fill="#000000" viewBox="-12 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>angle-left</title> <path d="M7.28 23.28c-0.2 0-0.44-0.080-0.6-0.24l-6.44-6.44c-0.32-0.32-0.32-0.84 0-1.2l6.44-6.44c0.32-0.32 0.84-0.32 1.2 0 0.32 0.32 0.32 0.84 0 1.2l-5.8 5.84 5.84 5.84c0.32 0.32 0.32 0.84 0 1.2-0.16 0.16-0.44 0.24-0.64 0.24z"></path> </g></svg>
|
|
122
|
+
<div class="carousel">
|
|
123
|
+
<div class="carousel-inner">
|
|
124
|
+
{%- for item in dataToShow.infographics -%}
|
|
125
|
+
<div class="slide">
|
|
126
|
+
<img src="{{ item.image }}" alt="img" draggable="false">
|
|
127
|
+
<p class="infographic-desc">{{ item.description | capitalize }}</p>
|
|
337
128
|
</div>
|
|
338
|
-
|
|
339
|
-
|
|
129
|
+
{% endfor %}
|
|
130
|
+
</div>
|
|
340
131
|
</div>
|
|
132
|
+
<svg id="right" fill="#000000" viewBox="-12 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>angle-right</title> <path d="M0.88 23.28c-0.2 0-0.44-0.080-0.6-0.24-0.32-0.32-0.32-0.84 0-1.2l5.76-5.84-5.8-5.84c-0.32-0.32-0.32-0.84 0-1.2 0.32-0.32 0.84-0.32 1.2 0l6.44 6.44c0.16 0.16 0.24 0.36 0.24 0.6s-0.080 0.44-0.24 0.6l-6.4 6.44c-0.2 0.16-0.4 0.24-0.6 0.24z"></path> </g></svg>
|
|
341
133
|
</div>
|
|
342
|
-
</div>
|
|
134
|
+
</div>
|
|
135
|
+
|
|
136
|
+
<script>
|
|
137
|
+
const carousel = document.querySelector(".carousel-inner"),
|
|
138
|
+
firstImg = carousel.querySelectorAll("img")[0],
|
|
139
|
+
arrowIcons = document.querySelectorAll(".wrapper svg")
|
|
140
|
+
|
|
141
|
+
const numImages = carousel.querySelectorAll("img").length;
|
|
142
|
+
const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
|
|
143
|
+
|
|
144
|
+
if (numImages > 3) {
|
|
145
|
+
arrowIcons[1].style.display = "block"
|
|
146
|
+
} else {
|
|
147
|
+
arrowIcons[0].style.display = "none";
|
|
148
|
+
arrowIcons[1].style.display = "none";
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;
|
|
152
|
+
const showHideIcons = () => {
|
|
153
|
+
let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
|
|
154
|
+
arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
|
|
155
|
+
arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
arrowIcons.forEach(icon => {
|
|
159
|
+
icon.addEventListener("click", () => {
|
|
160
|
+
let firstImgWidth = firstImg.clientWidth + 40;
|
|
161
|
+
const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
|
|
162
|
+
carousel.scrollBy({
|
|
163
|
+
left: scrollAmount,
|
|
164
|
+
behavior: "smooth",
|
|
165
|
+
});
|
|
166
|
+
setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
|
|
167
|
+
});
|
|
168
|
+
});
|
|
169
|
+
|
|
170
|
+
// const autoSlide = () => {
|
|
171
|
+
// // if there is no image left to scroll then return from here
|
|
172
|
+
// if (carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
|
|
173
|
+
|
|
174
|
+
// positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
|
|
175
|
+
// let firstImgWidth = firstImg.clientWidth + 14;
|
|
176
|
+
// // getting difference value that needs to add or reduce from carousel left to take middle img center
|
|
177
|
+
// let valDifference = firstImgWidth - positionDiff;
|
|
178
|
+
|
|
179
|
+
// if (carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
|
|
180
|
+
// return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
|
|
181
|
+
// }
|
|
182
|
+
// // if user is scrolling to the left
|
|
183
|
+
// carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
|
|
184
|
+
// }
|
|
185
|
+
|
|
186
|
+
// const dragStart = (e) => {
|
|
187
|
+
// // updatating global variables value on mouse down event
|
|
188
|
+
// isDragStart = true;
|
|
189
|
+
// prevPageX = e.pageX || e.touches[0].pageX;
|
|
190
|
+
// prevScrollLeft = carousel.scrollLeft;
|
|
191
|
+
// }
|
|
192
|
+
|
|
193
|
+
// const dragging = (e) => {
|
|
194
|
+
// // scrolling images/carousel to left according to mouse pointer
|
|
195
|
+
// if (!isDragStart) return;
|
|
196
|
+
// e.preventDefault();
|
|
197
|
+
// isDragging = true;
|
|
198
|
+
// carousel.classList.add("dragging");
|
|
199
|
+
// positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
|
|
200
|
+
// carousel.scrollLeft = prevScrollLeft - positionDiff;
|
|
201
|
+
// showHideIcons();
|
|
202
|
+
// }
|
|
203
|
+
|
|
204
|
+
// const dragStop = () => {
|
|
205
|
+
// isDragStart = false;
|
|
206
|
+
// carousel.classList.remove("dragging");
|
|
207
|
+
|
|
208
|
+
// if (!isDragging) return;
|
|
209
|
+
// isDragging = false;
|
|
210
|
+
// autoSlide();
|
|
211
|
+
// }
|
|
212
|
+
|
|
213
|
+
// carousel.addEventListener("mousedown", dragStart);
|
|
214
|
+
// carousel.addEventListener("touchstart", dragStart);
|
|
215
|
+
|
|
216
|
+
// document.addEventListener("mousemove", dragging);
|
|
217
|
+
// carousel.addEventListener("touchmove", dragging);
|
|
218
|
+
|
|
219
|
+
// document.addEventListener("mouseup", dragStop);
|
|
220
|
+
// carousel.addEventListener("touchend", dragStop);
|
|
221
|
+
</script>
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
{%- assign value = item.word -%}
|
|
31
31
|
<a class="anchor__style" title="Lookup python in Dictionary" target="_blank"
|
|
32
32
|
href="/word-meaning?search={{item.word}}">
|
|
33
|
-
<li>{{item.word}}
|
|
33
|
+
<li class="list_word">{{item.word}}
|
|
34
34
|
<span class="points" value="14" style="position:relative; top:4px; font-size:12px">
|
|
35
35
|
{{item.points}}</span>
|
|
36
36
|
</li>
|
data/_layouts/xyzpages.html
CHANGED
|
@@ -104,6 +104,13 @@
|
|
|
104
104
|
{% endif %}
|
|
105
105
|
{% endif %}
|
|
106
106
|
|
|
107
|
+
|
|
108
|
+
{%- include Rating/rating.html -%}
|
|
109
|
+
|
|
110
|
+
{%- if dataToShow.infographics.size > 0 -%}
|
|
111
|
+
{%- include infographics/infographics.html -%}
|
|
112
|
+
{%- endif -%}
|
|
113
|
+
|
|
107
114
|
{%- include share/socialshare.html -%}
|
|
108
115
|
|
|
109
116
|
{% include adBlocker/adBlocker.html %}
|
data/assets/js/xyz.js
CHANGED
|
@@ -107,3 +107,182 @@ const close = document.querySelector('.times')
|
|
|
107
107
|
close.addEventListener('click', () => {
|
|
108
108
|
fillterWrapper.classList.add('hide')
|
|
109
109
|
})
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
// sorting for words
|
|
114
|
+
theSelect.addEventListener("change", () => {
|
|
115
|
+
sortValue = theSelect[theSelect.selectedIndex].text;
|
|
116
|
+
let list_word = document.getElementsByClassName("list_word")
|
|
117
|
+
let data = []
|
|
118
|
+
Array.from(list_word).forEach(item => {
|
|
119
|
+
item.removeChild(item.lastElementChild);
|
|
120
|
+
data.push(item.innerHTML.replace(/\s/g, ''))
|
|
121
|
+
})
|
|
122
|
+
if (sortValue == "Z-A") {
|
|
123
|
+
sortBool = "Z-A";
|
|
124
|
+
sortby(sortBool, data);
|
|
125
|
+
} else if (sortValue == "Points") {
|
|
126
|
+
sortBool = "Points";
|
|
127
|
+
sortPointsby(sortBool, data);
|
|
128
|
+
} else {
|
|
129
|
+
sortBool = "A-Z";
|
|
130
|
+
sortby(sortBool, data);
|
|
131
|
+
}
|
|
132
|
+
});
|
|
133
|
+
|
|
134
|
+
// sort by aplhabets
|
|
135
|
+
function sortby(sortValue, data) {
|
|
136
|
+
if (sortValue === "Z-A") {
|
|
137
|
+
appendData(sortValue, data.reverse())
|
|
138
|
+
}
|
|
139
|
+
else if (sortValue === "A-Z") {
|
|
140
|
+
appendData(sortValue, data.sort())
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
// sorting by points
|
|
144
|
+
function sortPointsby(sortValue, data) {
|
|
145
|
+
if (sortValue === "Points") {
|
|
146
|
+
let newArray = [];
|
|
147
|
+
data.map((item) => {
|
|
148
|
+
if (item.length === 1) {
|
|
149
|
+
ok = false;
|
|
150
|
+
} else {
|
|
151
|
+
let ScrabbleLetterScore = ScrabbleScore();
|
|
152
|
+
let points = 0;
|
|
153
|
+
let word = item.replace(/<\/?[^>]+>/gi, '')
|
|
154
|
+
for (let i = 0; i < word.length; i++) {
|
|
155
|
+
points += ScrabbleLetterScore[word[i]] || 0;
|
|
156
|
+
}
|
|
157
|
+
const value = {
|
|
158
|
+
words: item,
|
|
159
|
+
points: points,
|
|
160
|
+
};
|
|
161
|
+
newArray.push(value);
|
|
162
|
+
}
|
|
163
|
+
});
|
|
164
|
+
newArray.sort(function (a, b) {
|
|
165
|
+
return b.points - a.points;
|
|
166
|
+
});
|
|
167
|
+
appendData(sortValue, newArray)
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
function appendData(sortValue, data) {
|
|
172
|
+
main.innerHTML = "";
|
|
173
|
+
let newWordsLength = 0;
|
|
174
|
+
for (let i = 15; i > 0; i--) {
|
|
175
|
+
let newdata
|
|
176
|
+
if (sortValue === "Points") {
|
|
177
|
+
newdata = data.filter((item) => item.words.replace(/<\/?[^>]+>/gi, '').length === i)
|
|
178
|
+
} else {
|
|
179
|
+
newdata = data.filter((item) => item.replace(/<\/?[^>]+>/gi, '').length === i)
|
|
180
|
+
}
|
|
181
|
+
if (newdata.length === 0) {
|
|
182
|
+
main.innerHTML += "";
|
|
183
|
+
} else {
|
|
184
|
+
newWordsLength += newdata.length;
|
|
185
|
+
const result = newdata.map((item) => {
|
|
186
|
+
let ScrabbleLetterScore = ScrabbleScore();
|
|
187
|
+
let points = 0;
|
|
188
|
+
let word
|
|
189
|
+
if (sortValue === "Points") {
|
|
190
|
+
word = item.words.replace(/<\/?[^>]+>/gi, '')
|
|
191
|
+
item = item.words
|
|
192
|
+
} else {
|
|
193
|
+
word = item.replace(/<\/?[^>]+>/gi, '')
|
|
194
|
+
}
|
|
195
|
+
for (let i = 0; i < word.length; i++) {
|
|
196
|
+
points += ScrabbleLetterScore[word[i]] || 0; // for unknown characters
|
|
197
|
+
}
|
|
198
|
+
return `
|
|
199
|
+
<a class="anchor__style" title="Lookup ${item.replace(/<\/?[^>]+>/gi, '')} in Dictionary" target="_blank"
|
|
200
|
+
href="/word-meaning?search=${item.replace(/<\/?[^>]+>/gi, '')}">
|
|
201
|
+
<li class="list_word">
|
|
202
|
+
${item}
|
|
203
|
+
<span class="points" value="${points}" style="position:relative; top:4px; font-size:12px">${points}</span>
|
|
204
|
+
</li>
|
|
205
|
+
</a>
|
|
206
|
+
`});
|
|
207
|
+
|
|
208
|
+
main.innerHTML += `
|
|
209
|
+
<div class="allGroupWords wordlistContainer" id="alpha_${i}">
|
|
210
|
+
<div class="wordListHeading">
|
|
211
|
+
<h3 class="lead">${i} Letter Words</h3>
|
|
212
|
+
</div>
|
|
213
|
+
<div class="wordList">
|
|
214
|
+
<ul class="ul list-unstyled">
|
|
215
|
+
${result.join('')}
|
|
216
|
+
</ul>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
`
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
// Scrabble Point Array
|
|
224
|
+
const ScrabbleScore = () => {
|
|
225
|
+
let twl06_sowpods = {
|
|
226
|
+
a: 1,
|
|
227
|
+
e: 1,
|
|
228
|
+
i: 1,
|
|
229
|
+
o: 1,
|
|
230
|
+
u: 1,
|
|
231
|
+
l: 1,
|
|
232
|
+
n: 1,
|
|
233
|
+
r: 1,
|
|
234
|
+
s: 1,
|
|
235
|
+
t: 1,
|
|
236
|
+
d: 2,
|
|
237
|
+
g: 2,
|
|
238
|
+
b: 3,
|
|
239
|
+
c: 3,
|
|
240
|
+
m: 3,
|
|
241
|
+
p: 3,
|
|
242
|
+
f: 4,
|
|
243
|
+
h: 4,
|
|
244
|
+
v: 4,
|
|
245
|
+
w: 4,
|
|
246
|
+
y: 4,
|
|
247
|
+
k: 5,
|
|
248
|
+
j: 8,
|
|
249
|
+
x: 8,
|
|
250
|
+
q: 10,
|
|
251
|
+
z: 10,
|
|
252
|
+
};
|
|
253
|
+
|
|
254
|
+
let wwfScore = {
|
|
255
|
+
a: 1,
|
|
256
|
+
b: 4,
|
|
257
|
+
c: 4,
|
|
258
|
+
d: 2,
|
|
259
|
+
e: 1,
|
|
260
|
+
f: 4,
|
|
261
|
+
g: 3,
|
|
262
|
+
h: 3,
|
|
263
|
+
i: 1,
|
|
264
|
+
j: 10,
|
|
265
|
+
k: 5,
|
|
266
|
+
l: 2,
|
|
267
|
+
m: 4,
|
|
268
|
+
n: 2,
|
|
269
|
+
o: 1,
|
|
270
|
+
p: 4,
|
|
271
|
+
q: 10,
|
|
272
|
+
r: 1,
|
|
273
|
+
s: 1,
|
|
274
|
+
t: 1,
|
|
275
|
+
u: 2,
|
|
276
|
+
v: 5,
|
|
277
|
+
w: 4,
|
|
278
|
+
x: 8,
|
|
279
|
+
y: 3,
|
|
280
|
+
z: 10,
|
|
281
|
+
};
|
|
282
|
+
|
|
283
|
+
// if (dictonary === "wwf") {
|
|
284
|
+
// return wwfScore;
|
|
285
|
+
// } else {
|
|
286
|
+
return twl06_sowpods;
|
|
287
|
+
// }
|
|
288
|
+
};
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: word-games-theme
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 2.1.
|
|
4
|
+
version: 2.1.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- manpreet-appscms
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2023-06-
|
|
11
|
+
date: 2023-06-26 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|