1
+
2
+ ( function ( ) {
3
+ "use strict" ;
4
+
5
+ /**
6
+ * Easy selector helper function
7
+ */
8
+ const select = ( el , all = false ) => {
9
+ el = el . trim ( )
10
+ if ( all ) {
11
+ return [ ...document . querySelectorAll ( el ) ]
12
+ } else {
13
+ return document . querySelector ( el )
14
+ }
15
+ }
16
+
17
+ /**
18
+ * Easy event listener function
19
+ */
20
+ const on = ( type , el , listener , all = false ) => {
21
+ let selectEl = select ( el , all )
22
+ if ( selectEl ) {
23
+ if ( all ) {
24
+ selectEl . forEach ( e => e . addEventListener ( type , listener ) )
25
+ } else {
26
+ selectEl . addEventListener ( type , listener )
27
+ }
28
+ }
29
+ }
30
+
31
+ /**
32
+ * Easy on scroll event listener
33
+ */
34
+ const onscroll = ( el , listener ) => {
35
+ el . addEventListener ( 'scroll' , listener )
36
+ }
37
+
38
+ /**
39
+ * Navbar links active state on scroll
40
+ */
41
+ let navbarlinks = select ( '#navbar .scrollto' , true )
42
+ const navbarlinksActive = ( ) => {
43
+ let position = window . scrollY + 200
44
+ navbarlinks . forEach ( navbarlink => {
45
+ if ( ! navbarlink . hash ) return
46
+ let section = select ( navbarlink . hash )
47
+ if ( ! section ) return
48
+ if ( position >= section . offsetTop && position <= ( section . offsetTop + section . offsetHeight ) ) {
49
+ navbarlink . classList . add ( 'active' )
50
+ } else {
51
+ navbarlink . classList . remove ( 'active' )
52
+ }
53
+ } )
54
+ }
55
+ window . addEventListener ( 'load' , navbarlinksActive )
56
+ onscroll ( document , navbarlinksActive )
57
+
58
+ /**
59
+ * Scrolls to an element with header offset
60
+ */
61
+ const scrollto = ( el ) => {
62
+ let header = select ( '#header' )
63
+ let offset = header . offsetHeight
64
+
65
+ let elementPos = select ( el ) . offsetTop
66
+ window . scrollTo ( {
67
+ top : elementPos - offset ,
68
+ behavior : 'smooth'
69
+ } )
70
+ }
71
+
72
+ /**
73
+ * Toggle .header-scrolled class to #header when page is scrolled
74
+ */
75
+ let selectHeader = select ( '#header' )
76
+ if ( selectHeader ) {
77
+ const headerScrolled = ( ) => {
78
+ if ( window . scrollY > 100 ) {
79
+ selectHeader . classList . add ( 'header-scrolled' )
80
+ } else {
81
+ selectHeader . classList . remove ( 'header-scrolled' )
82
+ }
83
+ }
84
+ window . addEventListener ( 'load' , headerScrolled )
85
+ onscroll ( document , headerScrolled )
86
+ }
87
+
88
+ /**
89
+ * Back to top button
90
+ */
91
+ let backtotop = select ( '.back-to-top' )
92
+ if ( backtotop ) {
93
+ const toggleBacktotop = ( ) => {
94
+ if ( window . scrollY > 100 ) {
95
+ backtotop . classList . add ( 'active' )
96
+ } else {
97
+ backtotop . classList . remove ( 'active' )
98
+ }
99
+ }
100
+ window . addEventListener ( 'load' , toggleBacktotop )
101
+ onscroll ( document , toggleBacktotop )
102
+ }
103
+
104
+ /**
105
+ * Mobile nav toggle
106
+ */
107
+ on ( 'click' , '.mobile-nav-toggle' , function ( e ) {
108
+ select ( '#navbar' ) . classList . toggle ( 'navbar-mobile' )
109
+ this . classList . toggle ( 'bi-list' )
110
+ this . classList . toggle ( 'bi-x' )
111
+ } )
112
+
113
+ /**
114
+ * Mobile nav dropdowns activate
115
+ */
116
+ on ( 'click' , '.navbar .dropdown > a' , function ( e ) {
117
+ if ( select ( '#navbar' ) . classList . contains ( 'navbar-mobile' ) ) {
118
+ e . preventDefault ( )
119
+ this . nextElementSibling . classList . toggle ( 'dropdown-active' )
120
+ }
121
+ } , true )
122
+
123
+ /**
124
+ * Scrool with ofset on links with a class name .scrollto
125
+ */
126
+ on ( 'click' , '.scrollto' , function ( e ) {
127
+ if ( select ( this . hash ) ) {
128
+ e . preventDefault ( )
129
+
130
+ let navbar = select ( '#navbar' )
131
+ if ( navbar . classList . contains ( 'navbar-mobile' ) ) {
132
+ navbar . classList . remove ( 'navbar-mobile' )
133
+ let navbarToggle = select ( '.mobile-nav-toggle' )
134
+ navbarToggle . classList . toggle ( 'bi-list' )
135
+ navbarToggle . classList . toggle ( 'bi-x' )
136
+ }
137
+ scrollto ( this . hash )
138
+ }
139
+ } , true )
140
+
141
+ /**
142
+ * Scroll with ofset on page load with hash links in the url
143
+ */
144
+ window . addEventListener ( 'load' , ( ) => {
145
+ if ( window . location . hash ) {
146
+ if ( select ( window . location . hash ) ) {
147
+ scrollto ( window . location . hash )
148
+ }
149
+ }
150
+ } ) ;
151
+
152
+ /**
153
+ * Preloader
154
+ */
155
+ let preloader = select ( '#preloader' ) ;
156
+ if ( preloader ) {
157
+ window . addEventListener ( 'load' , ( ) => {
158
+ preloader . remove ( )
159
+ } ) ;
160
+ }
161
+
162
+ /**
163
+ * Clients Slider
164
+ */
165
+ new Swiper ( '.clients-slider' , {
166
+ speed : 400 ,
167
+ loop : true ,
168
+ autoplay : {
169
+ delay : 5000 ,
170
+ disableOnInteraction : false
171
+ } ,
172
+ slidesPerView : 'auto' ,
173
+ pagination : {
174
+ el : '.swiper-pagination' ,
175
+ type : 'bullets' ,
176
+ clickable : true
177
+ } ,
178
+ breakpoints : {
179
+ 320 : {
180
+ slidesPerView : 2 ,
181
+ spaceBetween : 40
182
+ } ,
183
+ 480 : {
184
+ slidesPerView : 3 ,
185
+ spaceBetween : 60
186
+ } ,
187
+ 640 : {
188
+ slidesPerView : 4 ,
189
+ spaceBetween : 80
190
+ } ,
191
+ 992 : {
192
+ slidesPerView : 6 ,
193
+ spaceBetween : 120
194
+ }
195
+ }
196
+ } ) ;
197
+
198
+ /**
199
+ * Porfolio isotope and filter
200
+ */
201
+ window . addEventListener ( 'load' , ( ) => {
202
+ let portfolioContainer = select ( '.portfolio-container' ) ;
203
+ if ( portfolioContainer ) {
204
+ let portfolioIsotope = new Isotope ( portfolioContainer , {
205
+ itemSelector : '.portfolio-item'
206
+ } ) ;
207
+
208
+ let portfolioFilters = select ( '#portfolio-flters li' , true ) ;
209
+
210
+ on ( 'click' , '#portfolio-flters li' , function ( e ) {
211
+ e . preventDefault ( ) ;
212
+ portfolioFilters . forEach ( function ( el ) {
213
+ el . classList . remove ( 'filter-active' ) ;
214
+ } ) ;
215
+ this . classList . add ( 'filter-active' ) ;
216
+
217
+ portfolioIsotope . arrange ( {
218
+ filter : this . getAttribute ( 'data-filter' )
219
+ } ) ;
220
+ portfolioIsotope . on ( 'arrangeComplete' , function ( ) {
221
+ AOS . refresh ( )
222
+ } ) ;
223
+ } , true ) ;
224
+ }
225
+
226
+ } ) ;
227
+
228
+ /**
229
+ * Initiate portfolio lightbox
230
+ */
231
+ const portfolioLightbox = GLightbox ( {
232
+ selector : '.portfolio-lightbox'
233
+ } ) ;
234
+
235
+ /**
236
+ * Portfolio details slider
237
+ */
238
+ new Swiper ( '.portfolio-details-slider' , {
239
+ speed : 400 ,
240
+ loop : true ,
241
+ autoplay : {
242
+ delay : 5000 ,
243
+ disableOnInteraction : false
244
+ } ,
245
+ pagination : {
246
+ el : '.swiper-pagination' ,
247
+ type : 'bullets' ,
248
+ clickable : true
249
+ }
250
+ } ) ;
251
+
252
+ /**
253
+ * Testimonials slider
254
+ */
255
+ new Swiper ( '.testimonials-slider' , {
256
+ speed : 600 ,
257
+ loop : true ,
258
+ autoplay : {
259
+ delay : 5000 ,
260
+ disableOnInteraction : false
261
+ } ,
262
+ slidesPerView : 'auto' ,
263
+ pagination : {
264
+ el : '.swiper-pagination' ,
265
+ type : 'bullets' ,
266
+ clickable : true
267
+ }
268
+ } ) ;
269
+
270
+ /**
271
+ * Animation on scroll
272
+ */
273
+ window . addEventListener ( 'load' , ( ) => {
274
+ AOS . init ( {
275
+ duration : 1000 ,
276
+ easing : "ease-in-out" ,
277
+ once : true ,
278
+ mirror : false
279
+ } ) ;
280
+ } ) ;
281
+
282
+ } ) ( )
0 commit comments