Depuración de tamplete

resources/public/js/examples/examples.animations.js

@@ -0,0 +1,128 @@
+/*
+Name: 			Elements - Animations - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version:	12.1.0
+*/
+
+(($ => {
+    /*
+	Spotlight Cursor Text - Credits: https://codepen.io/carolineartz/pen/rNaGQYo
+	*/
+    if( $('.spotlight-cursor-text').length ) {
+		if (typeof gsap !== 'undefined') {
+
+			document.body.addEventListener('mousemove', ({clientX, clientY}) => {
+				const mouseX = clientX;
+				const mouseY = clientY;
+
+				gsap.to('.shape', {
+					x: mouseX,
+					y: mouseY,
+					stagger: -0.1
+				});
+			});
+
+		} else {
+
+			theme.fn.showErrorMessage('Failed to Load File', 'Failed to load: GSAP - Include the following file(s): (vendor/gsap/gsap.min.js)');
+
+		}
+	}
+
+    /*
+	Scroll Rotate Up/Down
+	*/
+    if( $('.scroll-rotate').length ) {
+		$('.scroll-rotate').each(function() {
+
+			const elem = $(this);
+
+			$(window).on('scroll', () => {
+				elem.css('transform', 'translatex(-50%) translatey(-50%) rotate(' + window.scrollY * 0.25 + 'deg)');
+				elem.css('top', (elem.height()/2) + 'px');
+				elem.css('left', (elem.width()/2) + 'px');
+			});
+
+		});
+
+		$(window).trigger('scroll');
+	}
+
+    /*
+	GSAP Text Reveal
+	*/
+    if (typeof gsap !== 'undefined') {
+
+		if( $('.gsap-text-wrapper').length ) {
+
+			// Animation 1
+			$('.gsap-text-wrapper[data-gsap-text-anim-1]').each(function() {
+
+				const wrapper = $(this), text = wrapper.find('>:first-child')[0];
+
+				wrapper.css('perspective', '100px');
+
+				const tl1Options = $.extend(true, {}, {
+						toggleActions: 'restart none none none',
+						duration: 1.3,
+						opacity: 0,
+						rotationX: -90,
+						transformOrigin: '50% 50% -100',
+						stagger: .25,
+						ease: 'expo.out'
+					},
+					theme.fn.getOptions(wrapper.data('plugin-options'))
+				);
+
+				const tl1 = gsap.timeline({
+				    scrollTrigger: {
+				        trigger: wrapper,
+				        toggleActions: tl1Options.toggleActions
+				    }
+				});
+
+				tl1.from(text, tl1Options);
+
+			});
+
+			// Animation 2
+			$('.gsap-text-wrapper[data-gsap-text-anim-2]').each(function() {
+
+				const wrapper = $(this), text = wrapper.find('>:first-child');
+
+				const tl2 = gsap.timeline({
+				    scrollTrigger: {
+				        trigger: wrapper,
+				        toggleActions: 'restart none none none'
+				    }
+				});
+
+				text.html((i, html) => {
+				  const chars = $.trim(html).split("");
+
+				  return '<span class="d-inline-block ws-pre-wrap">' + chars.join('</span><span class="d-inline-block ws-pre-wrap">') + '</span>';
+				});
+
+				const targetsSpans = wrapper.find('span');
+
+				tl2.staggerFromTo(targetsSpans, 2, {
+				    opacity: 0,
+				    y: 90,
+				    ease: Elastic.easeOut.config(1.2, 0.5)
+				}, {
+				    opacity: 1,
+				    y: 0,
+				    ease: Elastic.easeOut.config(1.2, 0.5)
+				}, 0.03);
+
+			});
+
+
+		}
+
+	} else {
+
+		theme.fn.showErrorMessage('Failed to Load File', 'Failed to load: GSAP - Include the following file(s): (vendor/gsap/gsap.min.js)');
+
+	}
+})).apply( this, [ jQuery ]);

resources/public/js/examples/examples.carousels.js

@@ -0,0 +1,116 @@
+/*
+Name: 			Elements - Carousels - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version:	12.1.0
+*/
+
+(($ => {
+    /*
+	Carousel
+	*/
+    $('#carousel').owlCarousel({
+		loop: true,
+		responsive: {
+			0: {
+				items: 1
+			},
+			479: {
+				items: 1
+			},
+			768: {
+				items: 2
+			},
+			979: {
+				items: 3
+			},
+			1199: {
+				items: 6
+			}
+		},
+		navText: [],
+		margin: 10,
+		autoWidth: false,
+		items: 6,
+		rtl: ( $('html').attr('dir') == 'rtl' ) ? true : false
+	});
+
+    /*
+	Videos
+	*/
+    $('#videos').owlCarousel({
+		items:1,
+		merge:true,
+		loop:true,
+		margin:10,
+		video:true,
+		lazyLoad:true,
+		center:true,
+		responsive:{
+			480:{
+				items:2
+			},
+			600:{
+				items:4
+			}
+		},
+		rtl: ( $('html').attr('dir') == 'rtl' ) ? true : false
+	});
+
+    /*
+	Horizontal Scroller Section
+	*/
+    if( $('.horizontal-scroller-item').length ) {
+		if (typeof gsap !== 'undefined') {
+
+			// Copy Original HTML to clone on Resize.
+			const originalScrollHTML = $('.horizontal-scroller').html();
+
+			// Generate Scroller
+			const generateScroller = () => {
+
+				let images = gsap.utils.toArray('.horizontal-scroller-item');
+
+				gsap.to(images, {
+					xPercent: -100 * (images.length - ( $(window).width() > 991 ? 3 : 1 )),
+					ease: 'none',
+					scrollTrigger: {
+						trigger: '.horizontal-scroller',
+						pin: true,
+						scrub: 1,
+						snap: 1 / (images.length - 1),
+						end: () => '+=' + document.querySelector('.horizontal-scroller-images').offsetWidth
+					}
+				});
+
+			};
+
+			// Resize Event removing and restarting
+			$(window).afterResize(() => {
+
+				setTimeout(() => {
+
+					scrollerInitialized = false;
+
+					let Alltrigger = ScrollTrigger.getAll();
+
+					for (let i = 0; i < Alltrigger.length; i++) {
+						Alltrigger[i].kill(true);
+					}
+
+					$('.horizontal-scroller-wrapper').empty().html('<section class="horizontal-scroller bg-dark">' + originalScrollHTML + '</section>');
+
+					generateScroller();
+
+				}, 500);
+
+			});
+
+			generateScroller();
+
+		} else {
+
+			theme.fn.showErrorMessage('Failed to Load File', 'Failed to load: GSAP - Include the following file(s): (vendor/gsap/gsap.min.js)');
+
+		}
+	}
+})).apply( this, [ jQuery ]);

resources/public/js/examples/examples.forms.js

@@ -0,0 +1,262 @@
+/*
+Name: 			Forms
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version:	12.1.0
+*/
+
+(($ => {
+    /*
+	Custom Rules
+	*/
+
+    // No White Space
+    $.validator.addMethod("noSpace", (value, element) => {
+		if( $(element).attr('required') ) {
+			return value.search(/^(?! *$)[^]+$/) == 0;
+		}
+
+		return true;
+	}, 'Please fill this empty field.');
+
+    /*
+	Assign Custom Rules on Fields
+	*/
+    $.validator.addClassRules({
+	    'form-control': {
+	        noSpace: true
+	    }
+	});
+
+    /*
+	Contact Form: Basic
+	*/
+    $('.contact-form').each(function(){
+		$(this).validate({
+			errorPlacement(error, element) {
+				if(element.attr('type') == 'radio' || element.attr('type') == 'checkbox') {
+					error.appendTo(element.closest('.form-group'));
+				} else if( element.is('select') && element.closest('.custom-select-1') ) {
+					error.appendTo(element.closest('.form-group'));
+				} else {
+					if( element.closest('.form-group').length ) {
+						error.appendTo(element.closest('.form-group'));
+					} else {
+						error.insertAfter(element);
+					}
+				}
+			},
+			submitHandler(form) {
+
+				const $form = $(form), $messageSuccess = $form.find('.contact-form-success'), $messageError = $form.find('.contact-form-error'), $submitButton = $(this.submitButton), $errorMessage = $form.find('.mail-error-message'), submitButtonText = $submitButton.val();
+
+				$submitButton.val( $submitButton.data('loading-text') ? $submitButton.data('loading-text') : 'Loading...' ).attr('disabled', true);
+
+				// Fields Data
+				const formData = $form.serializeArray(), data = {};
+
+				$(formData).each((index, {name, value}) => {
+					if( data[name] ) {
+						data[name] = data[name] + ', ' + value;						
+					} else {
+						data[name] = value;
+					}
+				});
+
+				// Google Recaptcha v2
+				if( data["g-recaptcha-response"] != undefined ) {
+					data["g-recaptcha-response"] = $form.find('#g-recaptcha-response').val();
+				}
+
+				// Ajax Submit
+				$.ajax({
+					type: 'POST',
+					url: $form.attr('action'),
+					data
+				}).always(({response, errorMessage, responseText}, textStatus, jqXHR) => {
+
+					$errorMessage.empty().hide();
+
+					if (response == 'success') {
+
+						// Uncomment the code below to redirect for a thank you page
+						// self.location = 'thank-you.html';
+
+						$messageSuccess.removeClass('d-none');
+						$messageError.addClass('d-none');
+
+						// Reset Form
+						$form.find('.form-control')
+							.val('')
+							.blur()
+							.parent()
+							.removeClass('has-success')
+							.removeClass('has-danger')
+							.find('label.error')
+							.remove();
+
+						if (($messageSuccess.offset().top - 80) < $(window).scrollTop()) {
+							$('html, body').animate({
+								scrollTop: $messageSuccess.offset().top - 80
+							}, 300);
+						}
+
+						$form.find('.form-control').removeClass('error');
+
+						$submitButton.val( submitButtonText ).attr('disabled', false);
+						
+						return;
+
+					} else if (response == 'error' && typeof errorMessage !== 'undefined') {
+						$errorMessage.html(errorMessage).show();
+					} else {
+						$errorMessage.html(responseText).show();
+					}
+
+					$messageError.removeClass('d-none');
+					$messageSuccess.addClass('d-none');
+
+					if (($messageError.offset().top - 80) < $(window).scrollTop()) {
+						$('html, body').animate({
+							scrollTop: $messageError.offset().top - 80
+						}, 300);
+					}
+
+					$form.find('.has-success')
+						.removeClass('has-success');
+						
+					$submitButton.val( submitButtonText ).attr('disabled', false);
+
+				});
+			}
+		});
+	});
+
+    /*
+	Contact Form: Advanced
+	*/
+    $('#contactFormAdvanced').validate({
+		onkeyup: false,
+		onclick: false,
+		onfocusout: false,
+		rules: {
+			'captcha': {
+				captcha: true
+			},
+			'checkboxes[]': {
+				required: true
+			},
+			'radios': {
+				required: true
+			}
+		},
+		errorPlacement(error, element) {
+			if(element.attr('type') == 'radio' || element.attr('type') == 'checkbox') {
+				error.appendTo(element.closest('.form-group'));
+			} else if( element.is('select') && element.closest('.custom-select-1') ) {
+				error.appendTo(element.closest('.form-group'));
+			} else {
+				error.insertAfter(element);
+			}
+		}
+	});
+
+    /*
+	Contact Form: reCaptcha v3
+	*/
+    $('.contact-form-recaptcha-v3').each(function(){
+		$(this).validate({
+			errorPlacement(error, element) {
+				if(element.attr('type') == 'radio' || element.attr('type') == 'checkbox') {
+					error.appendTo(element.closest('.form-group'));
+				} else if( element.is('select') && element.closest('.custom-select-1') ) {
+					error.appendTo(element.closest('.form-group'));
+				} else {
+					error.insertAfter(element);
+				}
+			},
+			submitHandler(form) {
+
+				const $form = $(form), $messageSuccess = $form.find('.contact-form-success'), $messageError = $form.find('.contact-form-error'), $submitButton = $(this.submitButton), $errorMessage = $form.find('.mail-error-message'), submitButtonText = $submitButton.val();
+
+				$submitButton.val( $submitButton.data('loading-text') ? $submitButton.data('loading-text') : 'Loading...' ).attr('disabled', true);
+
+				const recaptchaSrcURL = $('#google-recaptcha-v3').attr('src'), newURL          = new URL(recaptchaSrcURL), site_key        = newURL.searchParams.get("render");
+
+				grecaptcha.execute(site_key, {action: 'contact_us'}).then(token => {
+
+					// Fields Data
+					const formData = $form.serializeArray(), data = {};
+
+					$(formData).each((index, {name, value}) => {
+					    data[name] = value;
+					});
+
+					// Recaptcha v3 Token
+					data["g-recaptcha-response"] = token;
+
+					// Ajax Submit
+					$.ajax({
+						type: 'POST',
+						url: $form.attr('action'),
+						data
+					}).always(({response, errorMessage, responseText}, textStatus, jqXHR) => {
+
+						$errorMessage.empty().hide();
+
+						if (response == 'success') {
+
+							// Uncomment the code below to redirect for a thank you page
+							// self.location = 'thank-you.html';
+
+							$messageSuccess.removeClass('d-none');
+							$messageError.addClass('d-none');
+
+							// Reset Form
+							$form.find('.form-control')
+								.val('')
+								.blur()
+								.parent()
+								.removeClass('has-success')
+								.removeClass('has-danger')
+								.find('label.error')
+								.remove();
+
+							if (($messageSuccess.offset().top - 80) < $(window).scrollTop()) {
+								$('html, body').animate({
+									scrollTop: $messageSuccess.offset().top - 80
+								}, 300);
+							}
+
+							$form.find('.form-control').removeClass('error');
+
+							$submitButton.val( submitButtonText ).attr('disabled', false);
+							
+							return;
+
+						} else if (response == 'error' && typeof errorMessage !== 'undefined') {
+							$errorMessage.html(errorMessage).show();
+						} else {
+							$errorMessage.html(responseText).show();
+						}
+
+						$messageError.removeClass('d-none');
+						$messageSuccess.addClass('d-none');
+
+						if (($messageError.offset().top - 80) < $(window).scrollTop()) {
+							$('html, body').animate({
+								scrollTop: $messageError.offset().top - 80
+							}, 300);
+						}
+
+						$form.find('.has-success')
+							.removeClass('has-success');
+							
+						$submitButton.val( submitButtonText ).attr('disabled', false);
+
+					});
+
+				});
+			}
+		});
+	});
+})).apply(this, [jQuery]);

resources/public/js/examples/examples.gallery.js

@@ -0,0 +1,61 @@
+/*
+Name: 			Elements - Image Gallery - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version:	12.1.0
+*/
+(($ => {
+    /*
+	Thumb Gallery
+	*/
+    theme.fn.intObs( '.thumb-gallery-wrapper', function(){
+        const $thumbGalleryDetail = $(this).find('.thumb-gallery-detail');
+        const $thumbGalleryThumbs = $(this).find('.thumb-gallery-thumbs');
+        let flag = false;
+        const duration = 300;
+
+        $thumbGalleryDetail
+			.owlCarousel({
+				items: 1,
+				margin: 10,
+				nav: true,
+				dots: false,
+				loop: false,
+				autoHeight: true,
+				navText: [],
+				rtl: ( $('html').attr('dir') == 'rtl' ) ? true : false
+			})
+			.on('changed.owl.carousel', ({item}) => {
+				if (!flag) {
+					flag = true;
+					$thumbGalleryThumbs.trigger('to.owl.carousel', [item.index-1, duration, true]);
+
+					$thumbGalleryThumbs.find('.owl-item').removeClass('selected');
+					$thumbGalleryThumbs.find('.owl-item').eq( item.index ).addClass('selected');
+					flag = false;
+				}
+			});
+
+
+        $thumbGalleryThumbs
+			.owlCarousel({
+				margin: 15,
+				items: $(this).data('thumbs-items') ? $(this).data('thumbs-items') : 4,
+				nav: false,
+				center: $(this).data('thumbs-center') ? true : false,
+				dots: false,
+				rtl: ( $('html').attr('dir') == 'rtl' ) ? true : false
+			})
+			.on('click', '.owl-item', function() {
+				$thumbGalleryDetail.trigger('to.owl.carousel', [$(this).index(), duration, true]);
+			})
+			.on('changed.owl.carousel', ({item}) => {
+				if (!flag) {
+					flag = true;
+					$thumbGalleryDetail.trigger('to.owl.carousel', [item.index, duration, true]);
+					flag = false;
+				}
+			});
+
+        $thumbGalleryThumbs.find('.owl-item').eq(0).addClass('selected');
+    }, {});
+})).apply(this, [jQuery]);

resources/public/js/examples/examples.horizontal.scroll.js

@@ -0,0 +1,53 @@
+/*
+Name: 			Horizontal Scroll Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version:	12.1.0
+*/
+
+(($ => {
+    /*
+	Horizontal Scroll
+	*/
+    let locoScrollDefaults = {
+	    el: document.querySelector('[data-scroll-container]'),
+	    smooth: true,
+	    direction: "horizontal",
+		mobile: {
+			breakpoint: 0,
+			smooth: true,
+			direction: "horizontal",
+		},
+		tablet: {
+			breakpoint: 0,
+			smooth: true,
+			direction: "horizontal"
+		}
+	};
+
+    let locoScroll = new LocomotiveScroll(locoScrollDefaults);
+
+    // GSAP integration
+    gsap.registerPlugin(ScrollTrigger);
+
+    locoScroll.on("scroll", ScrollTrigger.update);
+
+    ScrollTrigger.scrollerProxy(".smoothScroll", {
+	    scrollTop(value) {
+	        return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
+	    },
+	    scrollLeft(value) {
+	        return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.x;
+	    },
+
+	    getBoundingClientRect() {
+	        return {
+	            top: 0,
+	            left: 0,
+	            width: window.innerWidth,
+	            height: window.innerHeight
+	        };
+	    },
+
+	    pinType: document.querySelector(".smoothScroll").style.transform ? "transform" : "fixed"
+	});
+})).apply( this, [ jQuery ]);

resources/public/js/examples/examples.image360.js

@@ -0,0 +1,209 @@
+/*
+Name: 			360º Image Viewer - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version:	12.1.0
+Credits: Codyhouse (https://codyhouse.co/gem/360-degrees-product-viewer)
+*/
+
+(($ => {
+    class productViewer {
+        constructor(element) {
+            this.element = element;
+            this.handleContainer = this.element.find('.cd-product-viewer-handle');
+            this.handleFill = this.handleContainer.children('.fill');
+            this.handle = this.handleContainer.children('.handle');
+            this.imageWrapper = this.element.find('.product-viewer');
+            this.slideShow = this.imageWrapper.children('.product-sprite');
+            this.frames = this.element.data('frame');
+            this.friction = this.element.data('friction');
+            this.visibleFrame = 0;
+            this.loaded = false;
+            this.animating = false;
+            this.xPosition = 0;
+            this.loadFrames();
+        }
+
+        loadFrames() {
+            const self = this, imageUrl = this.slideShow.data('image'), newImg = $('<img/>');
+
+            this.loading('0.5');
+            newImg.attr('src', imageUrl).load(imageUrl, function() {
+                $(this).remove();
+                self.loaded = true;
+            }).each(function(){
+                const image = this;
+                if(image.complete) {
+                    $(image).trigger('load');
+                }
+            });
+        }
+
+        loading(percentage) {
+            const self = this;
+            transformElement(this.handleFill, 'scaleX('+ percentage +')');
+            setTimeout(() => {
+                if( self.loaded ){
+                    //sprite image has been loaded
+                    self.element.addClass('loaded');
+                    transformElement(self.handleFill, 'scaleX(1)');
+                    self.dragImage();
+                    if(self.handle) self.dragHandle();
+                } else {
+                    const newPercentage = parseFloat(percentage) + .1;
+                    if ( newPercentage < 1 ) {
+                        self.loading(newPercentage);
+                    } else {
+                        self.loading(parseFloat(percentage));
+                    }
+                }
+            }, 500);
+        }
+
+        dragHandle() {
+            const self = this;
+            self.handle.on('mousedown touchstart', e => {
+                self.handle.addClass('cd-draggable');
+                const dragWidth = self.handle.outerWidth(), containerOffset = self.handleContainer.offset().left, containerWidth = self.handleContainer.outerWidth(), minLeft = containerOffset - dragWidth/2, maxLeft = containerOffset + containerWidth - dragWidth/2;
+
+                self.xPosition = self.handle.offset().left + dragWidth - ( ($(window).width() < 992) ? e.originalEvent.touches[0].pageX : e.pageX );
+
+                self.element.on('mousemove touchmove', e => {
+                    if( !self.animating) {
+                        self.animating =  true;
+                        ( !window.requestAnimationFrame )
+                            ? setTimeout(() => {self.animateDraggedHandle(e, dragWidth, containerOffset, containerWidth, minLeft, maxLeft);}, 100)
+                            : requestAnimationFrame(() => {self.animateDraggedHandle(e, dragWidth, containerOffset, containerWidth, minLeft, maxLeft);});
+                    }
+                }).one('mouseup touchend', e => {
+                    self.handle.removeClass('cd-draggable');
+                    self.element.off('mousemove touchmove');
+                });
+
+                e.preventDefault();
+
+            }).on('mouseup touchend', e => {
+                self.handle.removeClass('cd-draggable');
+            });
+        }
+
+        animateDraggedHandle(
+            {originalEvent, pageX},
+            dragWidth,
+            containerOffset,
+            containerWidth,
+            minLeft,
+            maxLeft
+        ) {
+            const self = this;
+            let leftValue = ( ($(window).width() < 992) ? originalEvent.touches[0].pageX : pageX ) + self.xPosition - dragWidth;
+            if (leftValue < minLeft) {
+                leftValue = minLeft;
+            } else if (leftValue > maxLeft) {
+                leftValue = maxLeft;
+            }
+
+            const widthValue = Math.ceil( (leftValue + dragWidth / 2 - containerOffset) * 1000 / containerWidth)/10;
+            self.visibleFrame = Math.ceil( (widthValue * (self.frames-1))/100 );
+
+            //update image frame
+            self.updateFrame();
+            //update handle position
+            $('.cd-draggable', self.handleContainer).css('left', widthValue + '%').one('mouseup touchend', function () {
+                $(this).removeClass('cd-draggable');
+            });
+
+            self.animating = false;
+        }
+
+        dragImage() {
+            const self = this;
+            self.slideShow.on('mousedown touchstart', e => {
+                self.slideShow.addClass('cd-draggable');
+                const containerOffset = self.imageWrapper.offset().left, containerWidth = self.imageWrapper.outerWidth(), minFrame = 0, maxFrame = self.frames - 1;
+
+                self.xPosition = ( ($(window).width() < 992) ? e.originalEvent.touches[0].pageX : e.pageX );
+
+                self.element.on('mousemove touchmove', e => {
+                    if( !self.animating) {
+                        self.animating =  true;
+                        ( !window.requestAnimationFrame )
+                            ? setTimeout(() => {self.animateDraggedImage(e, containerOffset, containerWidth);}, 100)
+                            : requestAnimationFrame(() => {self.animateDraggedImage(e, containerOffset, containerWidth);});
+                    }
+                }).one('mouseup touchend', e => {
+                    self.slideShow.removeClass('cd-draggable');
+                    self.element.off('mousemove touchmove');
+                    self.updateHandle();
+                });
+
+                e.preventDefault();
+
+            }).on('mouseup touchend', e => {
+                self.slideShow.removeClass('cd-draggable');
+            });
+        }
+
+        animateDraggedImage({originalEvent, pageX}, containerOffset, containerWidth) {
+            const self = this;
+            const leftValue = self.xPosition - ( ($(window).width() < 992) ? originalEvent.touches[0].pageX : pageX );
+            const widthValue = Math.ceil( (leftValue) * 100 / ( containerWidth * self.friction ));
+            let frame = (widthValue * (self.frames-1))/100;
+            if( frame > 0 ) {
+                frame = Math.floor(frame);
+            } else {
+                frame = Math.ceil(frame);
+            }
+            let newFrame = self.visibleFrame + frame;
+
+            if (newFrame < 0) {
+                newFrame = self.frames - 1;
+            } else if (newFrame > self.frames - 1) {
+                newFrame = 0;
+            }
+
+            if( newFrame != self.visibleFrame ) {
+                self.visibleFrame = newFrame;
+                self.updateFrame();
+                self.xPosition = ( ($(window).width() < 992) ? originalEvent.touches[0].pageX : pageX );
+            }
+
+            self.animating =  false;
+        }
+
+        updateHandle() {
+            if(this.handle) {
+                const widthValue = 100*this.visibleFrame/this.frames;
+                this.handle.animate({'left': widthValue + '%'}, 200);
+            }
+        }
+
+        updateFrame() {
+            const transformValue = - (100 * this.visibleFrame/this.frames);
+            transformElement(this.slideShow, 'translateX('+transformValue+'%)');
+        }
+    }
+
+    function transformElement(element, value) {
+		element.css({
+			'-moz-transform': value,
+			'-webkit-transform': value,
+			'-ms-transform': value,
+			'-o-transform': value,
+			'transform': value
+		});
+		
+		if(element.data('image') != undefined) {
+			element.css({
+				'background-image': 'url('+ element.data('image') +')'
+			});
+		}
+
+		element.prev().css({
+			visibility: 'hidden'
+		});
+	}
+
+    theme.fn.intObs( '.cd-product-viewer-wrapper', function(){
+		new productViewer($(this));
+	}, {});
+})).apply( this, [ jQuery ]);

resources/public/js/examples/examples.lightboxes.js

@@ -0,0 +1,96 @@
+/*
+Name: 			Elements - Lightboxes - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version:	12.1.0
+*/
+
+(($ => {
+    /*
+	Popup with video or map
+	*/
+    theme.fn.execOnceTroughEvent( $('.popup-youtube, .popup-vimeo, .popup-gmaps'), 'mouseover.trigger.iframe.lightbox', function(){
+		$(this).magnificPopup({
+			type: 'iframe',
+			mainClass: 'mfp-fade',
+			removalDelay: 160,
+			preloader: false,
+
+			fixedContentPos: false
+		});
+	});
+
+    /*
+	Dialog with CSS animation
+	*/
+    theme.fn.execOnceTroughEvent( $('.popup-with-zoom-anim'), 'mouseover.trigger.zoom.lightbox', function(){
+		$(this).magnificPopup({
+			type: 'inline',
+
+			fixedContentPos: false,
+			fixedBgPos: true,
+
+			overflowY: 'auto',
+
+			closeBtnInside: true,
+			preloader: false,
+
+			midClick: true,
+			removalDelay: 300,
+			mainClass: 'my-mfp-zoom-in'
+		});
+	});
+
+    theme.fn.execOnceTroughEvent( $('.popup-with-move-anim'), 'mouseover.trigger.slide.lightbox', function(){
+		$(this).magnificPopup({
+			type: 'inline',
+
+			fixedContentPos: false,
+			fixedBgPos: true,
+
+			overflowY: 'auto',
+
+			closeBtnInside: true,
+			preloader: false,
+
+			midClick: true,
+			removalDelay: 300,
+			mainClass: 'my-mfp-slide-bottom'
+		});
+	});
+
+    /*
+	Form
+	*/
+    theme.fn.execOnceTroughEvent( $('.popup-with-form'), 'mouseover.trigger.form.lightbox', function(){
+		$(this).magnificPopup({
+			type: 'inline',
+			preloader: false,
+			focus: '#name',
+			callbacks: {
+				open() {
+					$('html').addClass('lightbox-opened');
+				},
+				close() {
+					$('html').removeClass('lightbox-opened');
+				}
+			}
+		});
+	});
+
+    /*
+	Ajax
+	*/
+    theme.fn.execOnceTroughEvent( $('.simple-ajax-popup'), 'mouseover.trigger.ajax.lightbox', function(){
+		$(this).magnificPopup({
+			type: 'ajax',
+			callbacks: {
+				open() {
+					$('html').addClass('lightbox-opened');
+				},
+				close() {
+					$('html').removeClass('lightbox-opened');
+				}
+			}
+		});
+	});
+})).apply( this, [ jQuery ]);

resources/public/js/examples/examples.locomotive.scroll.js

@@ -0,0 +1,36 @@
+/*
+Name: 			Locomotive Scroll Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version:	12.1.0
+*/
+
+(($ => {
+    /*
+	Locomotive
+	*/
+    if (typeof LocomotiveScroll !== 'undefined') {
+
+		const scroller = new LocomotiveScroll({
+			el: document.querySelector("[data-scroll-container]"),
+			smooth: true,
+			mobile: {
+				breakpoint: 0,
+				smooth: true
+			},
+			tablet: {
+				breakpoint: 0,
+				smooth: true
+			}
+		});
+
+		// Scroll to Top
+		$('.scroll-to-top').on('click', e => {
+			scroller.scrollTo(0);
+		});
+
+	} else {
+
+		theme.fn.showErrorMessage('Failed to Load File', 'Failed to load: Locomotive Scroll - Include the following file(s): (vendor/locomotive-scroll/locomotive-scroll.min.js)');
+
+	}
+})).apply( this, [ jQuery ]);

resources/public/js/examples/examples.mouse.hover.split.js

@@ -0,0 +1,18 @@
+/*
+Name: 			Mouse Hover Split
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version:	12.1.0
+*/
+
+(($ => {
+	// Mouse Hover Split
+	const left = document.getElementById("side-left");
+  
+	const handleMove = ({clientX}) => {
+	  left.style.width = `${clientX / window.innerWidth * 100}%`;
+	}
+  
+	document.onmousemove = e => handleMove(e);
+  
+	document.ontouchmove = ({touches}) => handleMove(touches[0]);
+  })).apply( this, [ jQuery ]);

resources/public/js/examples/examples.particles.js

@@ -0,0 +1,440 @@
+/*
+Name: 			Elements - Particles - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version:	12.1.0
+*/
+
+(($ => {
+    // Particles 1
+    particlesJS("particles-1", {
+	    "particles": {
+	        "number": {
+	            "value": 80,
+	            "density": {
+	                "enable": true,
+	                "value_area": 800
+	            }
+	        },
+	        "color": {
+	            "value": "#0088cc"
+	        },
+	        "shape": {
+	            "type": "circle",
+	            "stroke": {
+	                "width": 0,
+	                "color": "#000000"
+	            },
+	            "polygon": {
+	                "nb_sides": 5
+	            }
+	        },
+	        "opacity": {
+	            "value": 1,
+	            "random": true,
+	            "anim": {
+	                "enable": true,
+	                "speed": 1,
+	                "opacity_min": 0,
+	                "sync": false
+	            }
+	        },
+	        "size": {
+	            "value": 8,
+	            "random": true,
+	            "anim": {
+	                "enable": false,
+	                "speed": 4,
+	                "size_min": 0.3,
+	                "sync": false
+	            }
+	        },
+	        "line_linked": {
+	            "enable": false,
+	            "distance": 150,
+	            "color": "#0088cc",
+	            "opacity": 0.4,
+	            "width": 1
+	        },
+	        "move": {
+	            "enable": true,
+	            "speed": 1,
+	            "direction": "none",
+	            "random": true,
+	            "straight": false,
+	            "out_mode": "out",
+	            "bounce": false,
+	            "attract": {
+	                "enable": false,
+	                "rotateX": 600,
+	                "rotateY": 600
+	            }
+	        }
+	    },
+	    "interactivity": {
+	        "detect_on": "canvas",
+	        "events": {
+	            "onhover": {
+	                "enable": true,
+	                "mode": "bubble"
+	            },
+	            "onclick": {
+	                "enable": true,
+	                "mode": "repulse"
+	            },
+	            "resize": true
+	        },
+	        "modes": {
+	            "grab": {
+	                "distance": 400,
+	                "line_linked": {
+	                    "opacity": 1
+	                }
+	            },
+	            "bubble": {
+	                "distance": 250,
+	                "size": 0,
+	                "duration": 2,
+	                "opacity": 0,
+	                "speed": 3
+	            },
+	            "repulse": {
+	                "distance": 400,
+	                "duration": 0.4
+	            },
+	            "push": {
+	                "particles_nb": 4
+	            },
+	            "remove": {
+	                "particles_nb": 2
+	            }
+	        }
+	    },
+	    "retina_detect": true
+	});
+
+    // Particles 2
+    particlesJS("particles-2", {
+	    "particles": {
+	        "number": {
+	            "value": 160,
+	            "density": {
+	                "enable": true,
+	                "value_area": 800
+	            }
+	        },
+	        "color": {
+	            "value": "#0088cc"
+	        },
+	        "shape": {
+	            "type": "circle",
+	            "stroke": {
+	                "width": 0,
+	                "color": "#000000"
+	            },
+	            "polygon": {
+	                "nb_sides": 5
+	            }
+	        },
+	        "opacity": {
+	            "value": 1,
+	            "random": true,
+	            "anim": {
+	                "enable": true,
+	                "speed": 1,
+	                "opacity_min": 0,
+	                "sync": false
+	            }
+	        },
+	        "size": {
+	            "value": 3,
+	            "random": true,
+	            "anim": {
+	                "enable": false,
+	                "speed": 4,
+	                "size_min": 0.3,
+	                "sync": false
+	            }
+	        },
+	        "line_linked": {
+	            "enable": false,
+	            "distance": 150,
+	            "color": "#0088cc",
+	            "opacity": 0.4,
+	            "width": 1
+	        },
+	        "move": {
+	            "enable": true,
+	            "speed": 1,
+	            "direction": "none",
+	            "random": true,
+	            "straight": false,
+	            "out_mode": "out",
+	            "bounce": false,
+	            "attract": {
+	                "enable": false,
+	                "rotateX": 600,
+	                "rotateY": 600
+	            }
+	        }
+	    },
+	    "interactivity": {
+	        "detect_on": "canvas",
+	        "events": {
+	            "onhover": {
+	                "enable": true,
+	                "mode": "bubble"
+	            },
+	            "onclick": {
+	                "enable": true,
+	                "mode": "repulse"
+	            },
+	            "resize": true
+	        },
+	        "modes": {
+	            "grab": {
+	                "distance": 400,
+	                "line_linked": {
+	                    "opacity": 1
+	                }
+	            },
+	            "bubble": {
+	                "distance": 250,
+	                "size": 0,
+	                "duration": 2,
+	                "opacity": 0,
+	                "speed": 3
+	            },
+	            "repulse": {
+	                "distance": 400,
+	                "duration": 0.4
+	            },
+	            "push": {
+	                "particles_nb": 4
+	            },
+	            "remove": {
+	                "particles_nb": 2
+	            }
+	        }
+	    },
+	    "retina_detect": true
+	});
+
+    // Particles 3
+    particlesJS("particles-3", {
+	    "particles": {
+	        "number": {
+	            "value": 20,
+	            "density": {
+	                "enable": true,
+	                "value_area": 800
+	            }
+	        },
+	        "color": {
+	            "value": "#0088cc"
+	        },
+	        "shape": {
+	            "type": "polygon",
+	            "stroke": {
+	                "width": 0,
+	                "color": "#000"
+	            },
+	            "polygon": {
+	                "nb_sides": 6
+	            },
+	        },
+	        "opacity": {
+	            "value": 0.1,
+	            "random": true,
+	            "anim": {
+	                "enable": false,
+	                "speed": 1,
+	                "opacity_min": 0.1,
+	                "sync": false
+	            }
+	        },
+	        "size": {
+	            "value": 60,
+	            "random": false,
+	            "anim": {
+	                "enable": true,
+	                "speed": 10,
+	                "size_min": 40,
+	                "sync": false
+	            }
+	        },
+	        "line_linked": {
+	            "enable": false,
+	            "distance": 200,
+	            "color": "#ffffff",
+	            "opacity": 1,
+	            "width": 2
+	        },
+	        "move": {
+	            "enable": true,
+	            "speed": 8,
+	            "direction": "none",
+	            "random": false,
+	            "straight": false,
+	            "out_mode": "out",
+	            "bounce": false,
+	            "attract": {
+	                "enable": false,
+	                "rotateX": 600,
+	                "rotateY": 1200
+	            }
+	        }
+	    },
+	    "interactivity": {
+	        "detect_on": "canvas",
+	        "events": {
+	            "onhover": {
+	                "enable": false,
+	                "mode": "grab"
+	            },
+	            "onclick": {
+	                "enable": false,
+	                "mode": "push"
+	            },
+	            "resize": true
+	        },
+	        "modes": {
+	            "grab": {
+	                "distance": 400,
+	                "line_linked": {
+	                    "opacity": 1
+	                }
+	            },
+	            "bubble": {
+	                "distance": 400,
+	                "size": 40,
+	                "duration": 2,
+	                "opacity": 8,
+	                "speed": 3
+	            },
+	            "repulse": {
+	                "distance": 200,
+	                "duration": 0.4
+	            },
+	            "push": {
+	                "particles_nb": 4
+	            },
+	            "remove": {
+	                "particles_nb": 2
+	            }
+	        }
+	    },
+	    "retina_detect": true
+	});
+
+    // Particles 4
+    particlesJS("particles-4", {
+	      "particles": {
+	        "number": {
+	            "value": 80,
+	            "density": {
+	                "enable": true,
+	                "value_area": 800
+	            }
+	        },
+	        "color": {
+	            "value": "#0088cc"
+	        },
+	        "shape": {
+	            "type": "circle",
+	            "stroke": {
+	                "width": 0,
+	                "color": "#000000"
+	            },
+	            "polygon": {
+	                "nb_sides": 5
+	            },
+	            "image": {
+	                "src": "img/github.svg",
+	                "width": 100,
+	                "height": 100
+	            }
+	        },
+	        "opacity": {
+	            "value": 0.5,
+	            "random": false,
+	            "anim": {
+	                "enable": false,
+	                "speed": 1,
+	                "opacity_min": 0.1,
+	                "sync": false
+	            }
+	        },
+	        "size": {
+	            "value": 3,
+	            "random": true,
+	            "anim": {
+	                "enable": false,
+	                "speed": 40,
+	                "size_min": 0.1,
+	                "sync": false
+	            }
+	        },
+	        "line_linked": {
+	            "enable": true,
+	            "distance": 150,
+	            "color": "#0088cc",
+	            "opacity": 0.4,
+	            "width": 1
+	        },
+	        "move": {
+	            "enable": true,
+	            "speed": 6,
+	            "direction": "none",
+	            "random": false,
+	            "straight": false,
+	            "out_mode": "out",
+	            "bounce": false,
+	            "attract": {
+	                "enable": false,
+	                "rotateX": 600,
+	                "rotateY": 1200
+	            }
+	        }
+	    },
+	    "interactivity": {
+	        "detect_on": "canvas",
+	        "events": {
+	            "onhover": {
+	                "enable": true,
+	                "mode": "repulse"
+	            },
+	            "onclick": {
+	                "enable": true,
+	                "mode": "push"
+	            },
+	            "resize": true
+	        },
+	        "modes": {
+	            "grab": {
+	                "distance": 400,
+	                "line_linked": {
+	                    "opacity": 1
+	                }
+	            },
+	            "bubble": {
+	                "distance": 400,
+	                "size": 40,
+	                "duration": 2,
+	                "opacity": 8,
+	                "speed": 3
+	            },
+	            "repulse": {
+	                "distance": 200,
+	                "duration": 0.4
+	            },
+	            "push": {
+	                "particles_nb": 4
+	            },
+	            "remove": {
+	                "particles_nb": 2
+	            }
+	        }
+	    },
+	    "retina_detect": true
+	});
+})).apply( this, [ jQuery ]);

resources/public/js/examples/examples.portfolio.js

@@ -0,0 +1,754 @@
+/*
+Name: 			Portfolio - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version:	12.1.0
+*/
+(($ => {
+    /*
+	Portfolio on Modal
+	*/
+    $('a[data-portfolio-on-modal]').magnificPopup({
+		mainClass: 'portfolio-modal',
+		type: 'inline',
+		gallery: {
+			enabled: true
+		},
+		callbacks: {
+		  	open() {
+		  		$('.owl-carousel').owlCarousel('refresh');
+		  	},
+		  	change() {
+		  		setTimeout(() => {
+			  		$('.owl-carousel').owlCarousel('refresh');
+		  		}, 1);
+		  	}
+		}
+	});
+
+    $('a[data-portfolio-close]').on('click', e => {
+		e.preventDefault();
+		$.magnificPopup.instance.close();
+		return false;
+	});
+
+    $('a[data-portfolio-prev]').on('click', e => {
+		e.preventDefault();
+		$.magnificPopup.instance.prev();
+		return false;
+	});
+
+    $('a[data-portfolio-next]').on('click', e => {
+		e.preventDefault();
+		$.magnificPopup.instance.next();
+		return false;
+	});
+
+    /*
+	Carousel
+	*/
+    if ($.isFunction($.fn.revolution)) {
+		$("#revolutionSliderCarousel").show().revolution({
+			sliderType: "carousel",
+			sliderLayout: "fullwidth",
+			dottedOverlay: "none",
+			delay: 4000,
+			navigation: {
+				keyboardNavigation: "off",
+				keyboard_direction: "horizontal",
+				mouseScrollNavigation: "off",
+				onHoverStop: "off",
+				arrows: {
+					style: "tparrows-carousel",
+					enable: true,
+					hide_onmobile: false,
+					hide_onleave: false,
+					tmp: '',
+					left: {
+						h_align: "left",
+						v_align: "center",
+						h_offset: 30,
+						v_offset: 0
+					},
+					right: {
+						h_align: "right",
+						v_align: "center",
+						h_offset: 30,
+						v_offset: 0
+					}
+				}
+			},
+			carousel: {
+				maxRotation: 65,
+				vary_rotation: "on",
+				minScale: 55,
+				vary_scale: "off",
+				horizontal_align: "center",
+				vertical_align: "center",
+				fadeout: "on",
+				vary_fade: "on",
+				maxVisibleItems: 5,
+				infinity: "on",
+				space: -150,
+				stretch: "off"
+			},
+			gridwidth: 600,
+			gridheight: 600,
+			lazyType: "none",
+			shadow: 0,
+			spinner: "off",
+			stopLoop: "on",
+			stopAfterLoops: 0,
+			stopAtSlide: -1,
+			shuffle: "off",
+			autoHeight: "off",
+			disableProgressBar: "on",
+			hideThumbsOnMobile: "off",
+			hideSliderAtLimit: 0,
+			hideCaptionAtLimit: 0,
+			hideAllCaptionAtLilmit: 0,
+			debugMode: false,
+			fallbacks: {
+				simplifyAll: "off",
+				nextSlideOnWindowFocus: "off",
+				disableFocusListener: false,
+			}
+		});
+	}
+
+    /*
+	Medias
+	*/
+    if ($.isFunction($.fn.revolution)) {
+		$("#revolutionSliderMedias").show().revolution({
+			sliderType: "standard",
+			sliderLayout: "auto",
+			dottedOverlay: "none",
+			delay: 9000,
+			navigation: {
+				keyboardNavigation: "off",
+				keyboard_direction: "horizontal",
+				mouseScrollNavigation: "off",
+				onHoverStop: "off",
+				tabs: {
+					style: "hesperiden hesperiden-custom",
+					enable: true,
+					width: 250,
+					height: 80,
+					min_width: 250,
+					wrapper_padding: 20,
+					wrapper_color: "#ffffff",
+					wrapper_opacity: "1",
+					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>',
+					visibleAmount: 5,
+					hide_onmobile: false,
+					hide_onleave: false,
+					hide_delay: 200,
+					direction: "horizontal",
+					span: false,
+					position: "outer-bottom",
+					space: 0,
+					h_align: "left",
+					v_align: "bottom",
+					h_offset: 0,
+					v_offset: 0
+				}
+			},
+			gridwidth: 1230,
+			gridheight: 692,
+			lazyType: "smart",
+			shadow: 0,
+			spinner: "off",
+			stopLoop: "on",
+			stopAfterLoops: 0,
+			stopAtSlide: 1,
+			shuffle: "off",
+			autoHeight: "off",
+			disableProgressBar: "on",
+			hideThumbsOnMobile: "off",
+			hideSliderAtLimit: 0,
+			hideCaptionAtLimit: 0,
+			hideAllCaptionAtLilmit: 0,
+			debugMode: false,
+			fallbacks: {
+				simplifyAll: "off",
+				nextSlideOnWindowFocus: "off",
+				disableFocusListener: false,
+			}
+		});
+	}
+
+    /*
+	Ajax on Page
+	*/
+    const ajaxOnPage = {
+
+		pages: [],
+		currentPage: 0,
+		total: 0,
+		$ajaxBox: $('#porfolioAjaxBox'),
+		$ajaxBoxContent: $('#porfolioAjaxBoxContent'),
+
+		build() {
+
+			const self = this;
+
+			$('a[data-ajax-on-page]').each(function() {
+				self.add($(this));
+			});
+
+			$(document).on('mousedown', 'a[data-ajax-on-page]', ev => {
+				if (ev.which == 2) {
+					ev.preventDefault();
+					return false;
+				}
+			});
+
+			// Key Press
+			$(document.documentElement).on('keyup', ({keyCode}) => {
+
+				if( !$('.mfp-wrap').get(0) ) {
+
+					// Next
+					if (keyCode == 39) {
+						self.next();
+					}
+
+					// Prev
+					if (keyCode == 37) {
+						self.prev();
+					}
+
+				}
+
+			});
+
+		},
+
+		add($el) {
+
+			const self = this, href = $el.attr('data-href');
+
+			self.pages.push(href);
+			self.total++;
+
+			$el.on('click', e => {
+				e.preventDefault();
+				self.show(self.pages.indexOf(href));
+			});
+
+		},
+
+		events() {
+
+			const self = this;
+
+			// Close
+			$('a[data-ajax-portfolio-close]').on('click', e => {
+				e.preventDefault();
+				self.close();
+			});
+
+			if (self.total <= 1) {
+
+				$('a[data-ajax-portfolio-prev], a[data-ajax-portfolio-next]').remove();
+
+			} else {
+
+				// Prev
+				$('a[data-ajax-portfolio-prev]').on('click', e => {
+					e.preventDefault();
+					self.prev();
+				});
+
+				// Next
+				$('a[data-ajax-portfolio-next]').on('click', e => {
+					e.preventDefault();
+					self.next();
+				});
+
+			}
+
+			// Carousel
+			if ($.isFunction($.fn['themePluginCarousel'])) {
+
+				$(() => {
+					$('[data-plugin-carousel]:not(.manual), .owl-carousel:not(.manual)').each(function() {
+                        const $this = $(this);
+                        let opts;
+
+                        const pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
+                        if (pluginOptions)
+							opts = pluginOptions;
+
+                        $this.themePluginCarousel(opts);
+                    });
+				});
+
+			}
+
+		},
+
+		close() {
+
+			const self = this;
+
+			self.$ajaxBoxContent.empty();
+			self.$ajaxBox.removeClass('ajax-box-init').removeClass('ajax-box-loading');
+
+		},
+
+		next() {
+
+			const self = this;
+
+			if(self.currentPage + 1 < self.total) {
+				self.show(self.currentPage + 1);
+			} else {
+				self.show(0);
+			}
+		},
+
+		prev() {
+
+			const self = this;
+
+			if((self.currentPage - 1) >= 0) {
+				self.show(self.currentPage - 1);
+			} else {
+				self.show(self.total - 1);
+			}
+		},
+
+		show(i) {
+
+			const self = this;
+
+			self.$ajaxBoxContent.empty();
+			self.$ajaxBox.removeClass('ajax-box-init').addClass('ajax-box-loading');
+
+			$('html, body').animate({
+				scrollTop: self.$ajaxBox.offset().top - 100
+			}, 300, 'easeOutQuad');
+
+			self.currentPage = i;
+
+			if (i < 0 || i > (self.total-1)) {
+				self.close();
+				return false;
+			}
+
+			// Ajax
+			$.ajax({
+				url: self.pages[i],
+				cache: false,
+				complete({responseText}) {
+				
+					setTimeout(() => {
+
+						self.$ajaxBoxContent.html(responseText).append('<div class="row"><div class="col-md-12"><hr class="tall mt-4"></div></div>');
+						self.$ajaxBox.removeClass('ajax-box-loading');
+
+						self.events();
+
+					}, 1000);
+
+				}
+			});
+
+		}
+
+	};
+
+    if($('#porfolioAjaxBox').get(0)) {
+		ajaxOnPage.build();
+	}
+
+    /*
+	Ajax on Modal
+	*/
+    theme.fn.execOnceTroughEvent( 'a[data-ajax-on-modal]', 'mouseover.trigger.ajax.on.modal', () => {
+		$('a[data-ajax-on-modal]').magnificPopup({
+			type: 'ajax',
+			tLoading: '',
+			mainClass: 'portfolio-ajax-modal',
+			closeBtnInside: true,
+			gallery: {
+				enabled: true
+			},
+			callbacks: {
+				ajaxContentAdded() {
+
+					// Wrapper
+					const $wrapper = $('.portfolio-ajax-modal');
+
+					// Close
+					$wrapper.find('a[data-ajax-portfolio-close]').on('click', e => {
+						e.preventDefault();
+						$.magnificPopup.close();
+					});
+
+					// Remove Next and Close
+					if($('a[data-ajax-on-modal]').length <= 1) {
+						
+						$wrapper.find('a[data-ajax-portfolio-prev], a[data-ajax-portfolio-next]').remove();
+
+					} else {
+
+						// Prev
+						$wrapper.find('a[data-ajax-portfolio-prev]').on('click', e => {
+							e.preventDefault();
+							$('.mfp-arrow-left').trigger('click');
+							return false;
+						});
+
+						// Next
+						$wrapper.find('a[data-ajax-portfolio-next]').on('click', e => {
+							e.preventDefault();
+							$('.mfp-arrow-right').trigger('click');
+							return false;
+						});
+
+					}
+
+					// Carousel
+					$(() => {
+						$('[data-plugin-carousel]:not(.manual), .owl-carousel:not(.manual)').each(function() {
+                            const $this = $(this);
+                            let opts;
+
+                            const pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
+                            if (pluginOptions)
+								opts = pluginOptions;
+
+                            $this.themePluginCarousel(opts);
+                        });
+					});
+
+				}
+			}
+		});
+	});
+
+    /*
+	Load More
+	*/
+    const portfolioLoadMore = {
+
+		pages: 0,
+		currentPage: 1,
+		$wrapper: $('#portfolioLoadMoreWrapper'),
+		$btn: $('#portfolioLoadMore'),
+		$btnWrapper: $('#portfolioLoadMoreBtnWrapper'),
+		$loader: $('#portfolioLoadMoreLoader'),
+
+		build() {
+
+			const self = this;
+
+			self.pages = self.$wrapper.data('total-pages');
+
+			if(self.pages <= 1) {
+
+				self.$btnWrapper.remove();
+				return;
+
+			} else {
+
+				self.$btn.on('click', () => {
+					self.loadMore();
+				});
+
+				// Infinite Scroll
+				if(self.$btn.hasClass('btn-portfolio-infinite-scroll')) {
+					theme.fn.intObs( '#portfolioLoadMore', "$('#portfolioLoadMore').trigger('click');", {
+						rootMargin: '0px 0px 0px 0px'
+					}, true );
+				}
+
+			}
+
+		},
+		loadMore() {
+
+			const self = this, ajax_url = ( self.$wrapper.data('ajax-url') ) ? self.$wrapper.data('ajax-url') : 'ajax/portfolio-ajax-load-more-';
+
+			self.$btn.hide();
+			self.$loader.addClass('portfolio-load-more-loader-showing').show();
+
+			// Ajax
+			$.ajax({
+				url: ajax_url + (parseInt(self.currentPage)+1) + '.html',
+				complete({responseText}) {
+
+					const $items = $(responseText);
+
+					setTimeout(() => {
+
+						self.$wrapper.append($items)
+
+						self.$wrapper.isotope('appended', $items);
+
+						self.currentPage++;
+
+						if(self.currentPage < self.pages) {
+							self.$btn.show().blur();
+						} else {
+							self.$btnWrapper.remove();
+						}
+
+						// Carousel
+						$(() => {
+							$('[data-plugin-carousel]:not(.manual), .owl-carousel:not(.manual)').each(function() {
+                                const $this = $(this);
+                                let opts;
+
+                                const pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
+                                if (pluginOptions)
+									opts = pluginOptions;
+
+                                $this.themePluginCarousel(opts);
+                            });
+						});
+
+						self.$loader.removeClass('portfolio-load-more-loader-showing').hide();
+
+						self.$wrapper.waitForImages(() => {
+							self.$wrapper.isotope('layout');
+						});
+
+					}, 1000);
+
+				}
+			});
+
+		}
+
+	};
+
+    if($('#portfolioLoadMoreWrapper').get(0)) {
+		portfolioLoadMore.build();
+	}
+
+    /*
+	Pagination
+	*/
+    const portfolioPagination = {
+
+		pages: 0,
+		$wrapper: $('#portfolioPaginationWrapper'),
+		$filter: $('#portfolioPaginationFilter'),
+		$pager: $('#portfolioPagination'),
+
+		init() {
+
+			const self = this;
+
+			self.$filter.on('filtered', (event, laidOutItems) => {
+				self.build();
+				self.$filter.find('.active').trigger('click');
+			});
+
+		},
+
+		calcPages() {
+
+			const self = this, filter = self.$wrapper.attr('data-filter'), itemsPerPage = parseInt(self.$wrapper.attr('data-items-per-page')), $activeItems = self.$wrapper.find(filter + '.isotope-item');
+
+			self.$wrapper.find('.isotope-item').removeAttr('data-page-rel');
+
+			$activeItems.each(function(i) {
+				const itemPage = Math.ceil((i+1)/itemsPerPage);
+
+				$(this).attr('data-page-rel', ((itemPage == 0) ? 1 : itemPage));
+
+				if (itemPage > 1) {
+					$(this).hide();
+				}
+			});
+
+			self.$wrapper.isotope('layout');
+
+			return Math.ceil($activeItems.length/itemsPerPage);
+		},
+
+		build() {
+
+			const self = this;
+
+			self.pages = self.calcPages();
+
+			self.$wrapper.removeAttr('data-current-page');
+
+			self.$pager.empty().unbind();
+
+			if(self.pages <= 1) {
+
+				return;
+
+			} else {
+
+				self.$wrapper.attr('data-current-page', 1);
+
+				self.$pager.bootpag({
+					total: self.pages,
+					page: 1,
+					next: '<i class="fas fa-angle-right"></i>',
+					prev: '<i class="fas fa-angle-left"></i>'
+				}).on('page', (event, num) => {
+					self.$wrapper.attr('data-current-page', num);
+					self.$filter.find('.active').trigger('click');
+				});
+
+			}
+
+			self.$filter.find('.active').trigger('click');
+
+			self.$pager.find('li').addClass('page-item');
+			self.$pager.find('a').addClass('page-link');
+
+		}
+
+	};
+
+    if($('#portfolioPagination').get(0)) {
+		portfolioPagination.init();
+	}
+
+    /*
+	Combination Filters
+	*/
+    if($('#combinationFilters').get(0)) {
+
+		$(window).on('load', () => {
+
+			setTimeout(() => {
+
+				const $grid = $('.portfolio-list').isotope({
+					itemSelector: '.isotope-item',
+					layoutMode: 'masonry',
+					filter: '*',
+					hiddenStyle: {
+						opacity: 0
+					},
+					visibleStyle: {
+						opacity: 1
+					},
+					stagger: 30,
+					isOriginLeft: ($('html').attr('dir') == 'rtl' ? false : true)
+				});
+
+				const filters = {}, $loader = $('.sort-destination-loader');
+
+				$('.filters').on('click', 'a', function(e) {
+					
+					e.preventDefault();
+					
+					const $this = $(this);
+
+					const $buttonGroup = $this.parents('.portfolio-filter-group');
+					const filterGroup = $buttonGroup.attr('data-filter-group');
+					
+					filters[filterGroup] = $this.parent().attr('data-option-value');
+					
+					const filterValue = concatValues(filters);
+					
+					$grid.isotope({
+						filter: filterValue
+					});
+				});
+
+				$('.portfolio-filter-group').each((i, buttonGroup) => {
+					const $buttonGroup = $(buttonGroup);
+					$buttonGroup.on('click', 'a', function() {
+						$buttonGroup.find('.active').removeClass('active');
+						$(this).parent().addClass('active');
+						$(this).addClass('active');
+					});
+				});
+
+				var concatValues = obj => {
+					let value = '';
+					for (const prop in obj) {
+						value += obj[prop];
+					}
+					return value;
+				}
+
+				$(window).on('resize', () => {
+					setTimeout(() => {
+						$grid.isotope('layout');
+					}, 300);
+				});
+
+				if ($loader) {
+					$loader.removeClass('sort-destination-loader-showing');
+
+					setTimeout(() => {
+						$loader.addClass('sort-destination-loader-loaded');
+					}, 500);
+				}
+
+			}, 1000);
+
+		});
+
+	}
+
+    /*
+	Lazy Load Masonry
+	*/
+    if($('#portfolioLazyLoadMasonry').get(0)) {
+
+		const $window = $(window);
+
+		$window.on('load', () => {
+
+			const $grid = $('#portfolioLazyLoadMasonry .portfolio-list').isotope({
+				itemSelector: '.isotope-item',
+				layoutMode: 'masonry',
+				filter: '*',
+				hiddenStyle: {
+					opacity: 0
+				},
+				visibleStyle: {
+					opacity: 1
+				},
+				stagger: 30,
+				isOriginLeft: ($('html').attr('dir') == 'rtl' ? false : true)
+			});
+
+			let runningIsotope = false;
+
+			function reLayouIsotope() {
+
+				if(!runningIsotope) {
+
+					$grid.isotope('layout');
+					runningIsotope = true;
+
+					setTimeout(() => {
+						runningIsotope = false;
+					}, 1000);
+
+				}
+
+			}
+
+			$grid.isotope('on', 'layoutComplete', () => {
+				reLayouIsotope();
+			});
+
+			$window.on('scroll', () => {
+				reLayouIsotope();
+			});
+
+			$window.on('resize', () => {
+				setTimeout(() => {
+					reLayouIsotope();
+				}, 300);
+			});
+
+		});
+
+	}
+})).apply(this, [jQuery]);

resources/public/js/examples/examples.sections.js

@@ -0,0 +1,45 @@
+/*
+Name: 			Elements - Sections - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version:	12.1.0
+*/
+
+(($ => {
+    /*
+	Circle Expand
+	*/
+    let section = document.getElementById('circleSection'),
+	    dot = document.getElementById("circleDot");
+
+    gsap.set(dot, {
+	    width: "142vmax",
+	    height: "142vmax",
+	    xPercent: -50,
+	    yPercent: -50,
+	    top: "50%",
+	    left: "50%"
+	});
+
+    let tl1 = gsap.timeline({
+		    	scrollTrigger: {
+			        trigger: section,
+			        start: "-50%",
+			        end: "0%",
+					scrub: 2, 
+			        invalidateOnRefresh: true,
+			    },
+			    defaults: {
+			        ease: "none"
+			    }
+			});
+
+    tl1
+	    .fromTo(dot, {
+	        	scale: 0
+		    }, {
+		        x: 0,
+		        y: 0,
+		        ease: "power3.in",
+		        scale: 1
+		    });
+})).apply( this, [ jQuery ]);