https://learn-english-online.org/js2020/examples/examples.portfolio.js

1/*
2Name: 			Portfolio - Examples
3Written by: 	Okler Themes - (http://www.okler.net)
4Theme Version:	8.1.0
5*/
6(function($) {
7
8	'use strict';
9
10	/*
11	Portfolio on Modal
12	*/
13	$('a[data-portfolio-on-modal]').magnificPopup({
14		mainClass: 'portfolio-modal',
15		type: 'inline',
16		gallery: {
17			enabled: true
18		},
19		callbacks: {
20		  	open: function() {
21		  		$('.owl-carousel').owlCarousel('refresh');
22		  	},
23		  	change: function() {
24		  		setTimeout(function(){
25			  		$('.owl-carousel').owlCarousel('refresh');
26		  		}, 1);
27		  	}
28		}
29	});
30
31	$('a[data-portfolio-close]').on('click', function(e) {
32		e.preventDefault();
33		$.magnificPopup.instance.close();
34		return false;
35	});
36
37	$('a[data-portfolio-prev]').on('click', function(e) {
38		e.preventDefault();
39		$.magnificPopup.instance.prev();
40		return false;
41	});
42
43	$('a[data-portfolio-next]').on('click', function(e) {
44		e.preventDefault();
45		$.magnificPopup.instance.next();
46		return false;
47	});
48
49	/*
50	Carousel
51	*/
52	if ($.isFunction($.fn.revolution)) {
53		$("#revolutionSliderCarousel").show().revolution({
54			sliderType: "carousel",
55			sliderLayout: "fullwidth",
56			dottedOverlay: "none",
57			delay: 4000,
58			navigation: {
59				keyboardNavigation: "off",
60				keyboard_direction: "horizontal",
61				mouseScrollNavigation: "off",
62				onHoverStop: "off",
63				arrows: {
64					style: "tparrows-carousel",
65					enable: true,
66					hide_onmobile: false,
67					hide_onleave: false,
68					tmp: '',
69					left: {
70						h_align: "left",
71						v_align: "center",
72						h_offset: 30,
73						v_offset: 0
74					},
75					right: {
76						h_align: "right",
77						v_align: "center",
78						h_offset: 30,
79						v_offset: 0
80					}
81				}
82			},
83			carousel: {
84				maxRotation: 65,
85				vary_rotation: "on",
86				minScale: 55,
87				vary_scale: "off",
88				horizontal_align: "center",
89				vertical_align: "center",
90				fadeout: "on",
91				vary_fade: "on",
92				maxVisibleItems: 5,
93				infinity: "on",
94				space: -150,
95				stretch: "off"
96			},
97			gridwidth: 600,
98			gridheight: 600,
99			lazyType: "none",
100			shadow: 0,
101			spinner: "off",
102			stopLoop: "on",
103			stopAfterLoops: 0,
104			stopAtSlide: -1,
105			shuffle: "off",
106			autoHeight: "off",
107			disableProgressBar: "on",
108			hideThumbsOnMobile: "off",
109			hideSliderAtLimit: 0,
110			hideCaptionAtLimit: 0,
111			hideAllCaptionAtLilmit: 0,
112			debugMode: false,
113			fallbacks: {
114				simplifyAll: "off",
115				nextSlideOnWindowFocus: "off",
116				disableFocusListener: false,
117			}
118		});
119	}
120
121	/*
122	Medias
123	*/
124	if ($.isFunction($.fn.revolution)) {
125		$("#revolutionSliderMedias").show().revolution({
126			sliderType: "standard",
127			sliderLayout: "auto",
128			dottedOverlay: "none",
129			delay: 9000,
130			navigation: {
131				keyboardNavigation: "off",
132				keyboard_direction: "horizontal",
133				mouseScrollNavigation: "off",
134				onHoverStop: "off",
135				tabs: {
136					style: "hesperiden hesperiden-custom",
137					enable: true,
138					width: 250,
139					height: 80,
140					min_width: 250,
141					wrapper_padding: 20,
142					wrapper_color: "#ffffff",
143					wrapper_opacity: "1",
144					tmp: '<div class="tp-tab-content">  <span class="tp-tab-date">{{param1}}</span>  <span class="tp-tab-title">{{title}}</span></div><div class="tp-tab-image"></div>',
145					visibleAmount: 5,
146					hide_onmobile: false,
147					hide_onleave: false,
148					hide_delay: 200,
149					direction: "horizontal",
150					span: false,
151					position: "outer-bottom",
152					space: 0,
153					h_align: "left",
154					v_align: "bottom",
155					h_offset: 0,
156					v_offset: 0
157				}
158			},
159			gridwidth: 1230,
160			gridheight: 692,
161			lazyType: "smart",
162			shadow: 0,
163			spinner: "off",
164			stopLoop: "on",
165			stopAfterLoops: 0,
166			stopAtSlide: 1,
167			shuffle: "off",
168			autoHeight: "off",
169			disableProgressBar: "on",
170			hideThumbsOnMobile: "off",
171			hideSliderAtLimit: 0,
172			hideCaptionAtLimit: 0,
173			hideAllCaptionAtLilmit: 0,
174			debugMode: false,
175			fallbacks: {
176				simplifyAll: "off",
177				nextSlideOnWindowFocus: "off",
178				disableFocusListener: false,
179			}
180		});
181	}
182
183	/*
184	Ajax on Page
185	*/
186	var ajaxOnPage = {
187
188		pages: [],
189		currentPage: 0,
190		total: 0,
191		$ajaxBox: $('#porfolioAjaxBox'),
192		$ajaxBoxContent: $('#porfolioAjaxBoxContent'),
193
194		build: function() {
195
196			var self = this;
197
198			$('a[data-ajax-on-page]').each(function() {
199				self.add($(this));
200			});
201
202			$(document).on('mousedown', 'a[data-ajax-on-page]', function (ev) {
203				if (ev.which == 2) {
204					ev.preventDefault();
205					return false;
206				}
207			});
208
209			// Key Press
210			$(document.documentElement).on('keyup', function(e) {
211
212				if( !$('.mfp-wrap').get(0) ) {
213
214					// Next
215					if (e.keyCode == 39) {
216						self.next();
217					}
218
219					// Prev
220					if (e.keyCode == 37) {
221						self.prev();
222					}
223
224				}
225
226			});
227
228		},
229
230		add: function($el) {
231
232			var self = this,
233				href = $el.attr('data-href');
234
235			self.pages.push(href);
236			self.total++;
237
238			$el.on('click', function(e) {
239				e.preventDefault();
240				self.show(self.pages.indexOf(href));
241			});
242
243		},
244
245		events: function() {
246
247			var self = this;
248
249			// Close
250			$('a[data-ajax-portfolio-close]').on('click', function(e) {
251				e.preventDefault();
252				self.close();
253			});
254
255			if (self.total <= 1) {
256
257				$('a[data-ajax-portfolio-prev], a[data-ajax-portfolio-next]').remove();
258
259			} else {
260
261				// Prev
262				$('a[data-ajax-portfolio-prev]').on('click', function(e) {
263					e.preventDefault();
264					self.prev();
265				});
266
267				// Next
268				$('a[data-ajax-portfolio-next]').on('click', function(e) {
269					e.preventDefault();
270					self.next();
271				});
272
273			}
274
275			// Carousel
276			if ($.isFunction($.fn['themePluginCarousel'])) {
277
278				$(function() {
279					$('[data-plugin-carousel]:not(.manual), .owl-carousel:not(.manual)').each(function() {
280						var $this = $(this),
281							opts;
282
283						var pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
284						if (pluginOptions)
285							opts = pluginOptions;
286
287						$this.themePluginCarousel(opts);
288					});

289				});
290
291			}
292
293		},
294
295		close: function() {
296
297			var self = this;
298
299			self.$ajaxBoxContent.empty();
300			self.$ajaxBox.removeClass('ajax-box-init').removeClass('ajax-box-loading');
301
302		},
303
304		next: function() {
305
306			var self = this;
307
308			if(self.currentPage + 1 < self.total) {
309				self.show(self.currentPage + 1);
310			} else {
311				self.show(0);
312			}
313		},
314
315		prev: function() {
316
317			var self = this;
318
319			if((self.currentPage - 1) >= 0) {
320				self.show(self.currentPage - 1);
321			} else {
322				self.show(self.total - 1);
323			}
324		},
325
326		show: function(i) {
327
328			var self = this;
329
330			self.$ajaxBoxContent.empty();
331			self.$ajaxBox.removeClass('ajax-box-init').addClass('ajax-box-loading');
332
333			$('html, body').animate({
334				scrollTop: self.$ajaxBox.offset().top - 100
335			}, 300, 'easeOutQuad');
336
337			self.currentPage = i;
338
339			if (i < 0 || i > (self.total-1)) {
340				self.close();
341				return false;
342			}
343
344			// Ajax
345			$.ajax({
346				url: self.pages[i],
347				cache: false,
348				complete: function(data) {
349				
350					setTimeout(function() {
351
352						self.$ajaxBoxContent.html(data.responseText).append('<div class="row"><div class="col-md-12"><hr class="tall mt-4"></div></div>');
353						self.$ajaxBox.removeClass('ajax-box-loading');
354
355						self.events();
356
357					}, 1000);
358
359				}
360			});
361
362		}
363
364	}
365
366	if($('#porfolioAjaxBox').get(0)) {
367		ajaxOnPage.build();
368	}
369
370	/*
371	Ajax on Modal
372	*/
373	$('a[data-ajax-on-modal]').magnificPopup({
374		type: 'ajax',
375		tLoading: '<div class="bounce-loader"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>',
376		mainClass: 'portfolio-ajax-modal',
377		closeBtnInside: true,
378		gallery: {
379			enabled: true
380		},
381		callbacks: {
382			ajaxContentAdded: function() {
383
384				// Wrapper
385				var $wrapper = $('.portfolio-ajax-modal');
386
387				// Close
388				$wrapper.find('a[data-ajax-portfolio-close]').on('click', function(e) {
389					e.preventDefault();
390					$.magnificPopup.close();
391				});
392
393				// Remove Next and Close
394				if($('a[data-ajax-on-modal]').length <= 1) {
395					
396					$wrapper.find('a[data-ajax-portfolio-prev], a[data-ajax-portfolio-next]').remove();
397
398				} else {
399
400					// Prev
401					$wrapper.find('a[data-ajax-portfolio-prev]').on('click', function(e) {
402						e.preventDefault();
403						$('.mfp-arrow-left').trigger('click');
404						return false;
405					});
406
407					// Next
408					$wrapper.find('a[data-ajax-portfolio-next]').on('click', function(e) {
409						e.preventDefault();
410						$('.mfp-arrow-right').trigger('click');
411						return false;
412					});
413
414				}
415
416				// Carousel
417				$(function() {
418					$('[data-plugin-carousel]:not(.manual), .owl-carousel:not(.manual)').each(function() {
419						var $this = $(this),
420							opts;
421
422						var pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
423						if (pluginOptions)
424							opts = pluginOptions;
425
426						$this.themePluginCarousel(opts);
427					});
428				});
429
430			}
431		}
432	});
433
434	/*
435	Load More
436	*/
437	var portfolioLoadMore = {
438
439		pages: 0,
440		currentPage: 1,
441		$wrapper: $('#portfolioLoadMoreWrapper'),
442		$btn: $('#portfolioLoadMore'),
443		$btnWrapper: $('#portfolioLoadMoreBtnWrapper'),
444		$loader: $('#portfolioLoadMoreLoader'),
445
446		build: function() {
447
448			var self = this
449
450			self.pages = self.$wrapper.data('total-pages');
451
452			if(self.pages <= 1) {
453
454				self.$btnWrapper.remove();
455				return;
456
457			} else {
458
459				self.$btn.on('click', function() {
460					self.loadMore();
461				});
462
463				// Infinite Scroll
464				if(self.$btn.hasClass('btn-portfolio-infinite-scroll')) {
465					self.$btn.appear(function() {
466						self.$btn.trigger('click');
467					}, {
468						data: undefined,
469						one: false,
470						accX: 0,
471						accY: 0
472					});
473				}
474
475			}
476
477		},
478		loadMore: function() {
479
480			var self = this,
481				ajax_url = ( self.$wrapper.data('ajax-url') ) ? self.$wrapper.data('ajax-url') : 'ajax/portfolio-ajax-load-more-';
482
483			self.$btn.hide();
484			self.$loader.addClass('portfolio-load-more-loader-showing').show();
485
486			// Ajax
487			$.ajax({
488				url: ajax_url + (parseInt(self.currentPage)+1) + '.html',
489				complete: function(data) {
490
491					var $items = $(data.responseText);
492
493					setTimeout(function() {
494
495						self.$wrapper.append($items)
496
497						self.$wrapper.isotope('appended', $items);
498
499						self.currentPage++;
500
501						if(self.currentPage < self.pages) {
502							self.$btn.show().blur();
503						} else {
504							self.$btnWrapper.remove();
505						}
506
507						// Carousel
508						$(function() {
509							$('[data-plugin-carousel]:not(.manual), .owl-carousel:not(.manual)').each(function() {
510								var $this = $(this),
511									opts;
512
513								var pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
514								if (pluginOptions)
515									opts = pluginOptions;
516
517								$this.themePluginCarousel(opts);
518							});

519						});
520
521						self.$loader.removeClass('portfolio-load-more-loader-showing').hide();
522
523					}, 1000);
524
525				}
526			});
527
528		}
529
530	}
531
532	if($('#portfolioLoadMoreWrapper').get(0)) {
533		portfolioLoadMore.build();
534	}
535
536	/*
537	Pagination
538	*/
539	var portfolioPagination = {
540
541		pages: 0,
542		$wrapper: $('#portfolioPaginationWrapper'),
543		$filter: $('#portfolioPaginationFilter'),
544		$pager: $('#portfolioPagination'),
545
546		init: function() {
547
548			var self = this;
549
550			self.$filter.on('filtered', function(event, laidOutItems) {
551				self.build();
552				self.$filter.find('.active').trigger('click');
553			});
554
555		},
556
557		calcPages: function() {
558
559			var self = this,
560				filter = self.$wrapper.attr('data-filter'),
561				itemsPerPage = parseInt(self.$wrapper.attr('data-items-per-page')),
562				$activeItems = self.$wrapper.find(filter + '.isotope-item');
563
564			self.$wrapper.find('.isotope-item').removeAttr('data-page-rel');
565
566			$activeItems.each(function(i) {
567				var itemPage = Math.ceil((i+1)/itemsPerPage);
568
569				$(this).attr('data-page-rel', ((itemPage == 0) ? 1 : itemPage));
570
571				if (itemPage > 1) {
572					$(this).hide();
573				}
574			});
575
576			self.$wrapper.isotope('layout');
577
578			return Math.ceil($activeItems.length/itemsPerPage);
579		},
580
581		build: function() {
582
583			var self = this;
584
585			self.pages = self.calcPages();
586
587			self.$wrapper.removeAttr('data-current-page');
588
589			self.$pager.empty().unbind();
590
591			if(self.pages <= 1) {
592
593				return;
594
595			} else {
596
597				self.$wrapper.attr('data-current-page', 1);
598
599				self.$pager.bootpag({
600					total: self.pages,
601					page: 1,
602					next: '<i class="fas fa-angle-right"></i>',
603					prev: '<i class="fas fa-angle-left"></i>'
604				}).on('page', function(event, num) {
605					self.$wrapper.attr('data-current-page', num);
606					self.$filter.find('.active').trigger('click');
607				});
608
609			}
610
611			self.$filter.find('.active').trigger('click');
612
613			self.$pager.find('li').addClass('page-item');
614			self.$pager.find('a').addClass('page-link');
615
616		}
617
618	}
619
620	if($('#portfolioPagination').get(0)) {
621		portfolioPagination.init();
622	}
623
624	/*
625	Combination Filters
626	*/
627	if($('#combinationFilters').get(0)) {
628
629		$(window).on('load', function() {
630
631			setTimeout(function() {
632
633				var $grid = $('.portfolio-list').isotope({
634					itemSelector: '.isotope-item',
635					layoutMode: 'masonry',
636					filter: '*',
637					hiddenStyle: {
638						opacity: 0
639					},
640					visibleStyle: {
641						opacity: 1
642					},
643					stagger: 30,
644					isOriginLeft: ($('html').attr('dir') == 'rtl' ? false : true)
645				});
646
647				var filters = {},
648					$loader = $('.sort-destination-loader');
649
650				$('.filters').on('click', 'a', function(e) {
651					
652					e.preventDefault();
653					
654					var $this = $(this);
655
656					var $buttonGroup = $this.parents('.portfolio-filter-group');
657					var filterGroup = $buttonGroup.attr('data-filter-group');
658					
659					filters[filterGroup] = $this.parent().attr('data-option-value');
660					
661					var filterValue = concatValues(filters);
662					
663					$grid.isotope({
664						filter: filterValue
665					});
666				});
667
668				$('.portfolio-filter-group').each(function(i, buttonGroup) {
669					var $buttonGroup = $(buttonGroup);
670					$buttonGroup.on('click', 'a', function() {
671						$buttonGroup.find('.active').removeClass('active');
672						$(this).parent().addClass('active');
673						$(this).addClass('active');
674					});
675				});
676
677				var concatValues = function(obj) {
678					var value = '';
679					for (var prop in obj) {
680						value += obj[prop];
681					}
682					return value;
683				}
684
685				$(window).on('resize', function() {
686					setTimeout(function() {
687						$grid.isotope('layout');
688					}, 300);
689				});
690
691				if ($loader) {
692					$loader.removeClass('sort-destination-loader-showing');
693
694					setTimeout(function() {
695						$loader.addClass('sort-destination-loader-loaded');
696					}, 500);
697				}
698
699			}, 1000);
700
701		});
702
703	}
704
705}).apply(this, [jQuery]);