Rinkusu/assets/js/script.js

/* ========================================================================= */
/*	Page Preloader
/* ========================================================================= */

$(window).on('load', function () {
	$('.preloader').fadeOut(100);
});

/* ========================================================================= */
/*	lazy load initialize
/* ========================================================================= */
const observer = lozad(); // lazy loads elements with default selector as ".lozad"
observer.observe();

/* ========================================================================= */
/* init Masonry for blog list
/* ========================================================================= */
var grids = document.querySelectorAll('.masonry-grid');

grids.forEach(function(grid) {
  if (grid) {
    var msnry = new Masonry(grid, {
      percentPosition: true
    });

    imagesLoaded(grid).on('progress', function() {
      // layout Masonry after each image loads
      msnry.layout();
    });

    // layout Masonry after page load
    $(window).on('load', function() {
      msnry.layout();
    });
  }
});

/* ========================================================================= */
/*	Image Preloader
/* ========================================================================= */
function imgIsLoaded(imgElement) {
	$(imgElement).addClass("loaded");
	$(imgElement).removeClass("unloaded");
}

/* ========================================================================= */
/*	Code Copy Button
/* ========================================================================= */
function createCopyButton(highlightDiv) {
	const button = document.createElement("button");
	button.className = "copy-code-button";
	button.type = "button";
	button.innerText = "Copy";
	button.addEventListener("click", () => copyCodeToClipboard(button, highlightDiv));
	addCopyButtonToDom(button, highlightDiv);
  }
  
  async function copyCodeToClipboard(button, highlightDiv) {
	const codeToCopy = highlightDiv.querySelector(":last-child > .chroma > code").innerText;
	try {
	  result = await navigator.permissions.query({ name: "clipboard-write" });
	  if (result.state == "granted" || result.state == "prompt") {
		await navigator.clipboard.writeText(codeToCopy);
	  } else {
		copyCodeBlockExecCommand(codeToCopy, highlightDiv);
	  }
	} catch (_) {
	  copyCodeBlockExecCommand(codeToCopy, highlightDiv);
	}
	finally {
	  codeWasCopied(button);
	}
  }
  
  function copyCodeBlockExecCommand(codeToCopy, highlightDiv) {
	const textArea = document.createElement("textArea");
	textArea.contentEditable = 'true'
	textArea.readOnly = 'false'
	textArea.className = "copyable-text-area";
	textArea.value = codeToCopy;
	highlightDiv.insertBefore(textArea, highlightDiv.firstChild);
	const range = document.createRange()
	range.selectNodeContents(textArea)
	const sel = window.getSelection()
	sel.removeAllRanges()
	sel.addRange(range)
	textArea.setSelectionRange(0, 999999)
	document.execCommand("copy");
	highlightDiv.removeChild(textArea);
  }
  
  function codeWasCopied(button) {
	button.blur();
	button.innerText = "Copied!";
	setTimeout(function() {
	  button.innerText = "Copy";
	}, 2000);
  }
  
  function addCopyButtonToDom(button, highlightDiv) {
	highlightDiv.insertBefore(button, highlightDiv.firstChild);
	const wrapper = document.createElement("div");
	wrapper.className = "highlight-wrapper";
	highlightDiv.parentNode.insertBefore(wrapper, highlightDiv);
	wrapper.appendChild(highlightDiv);
  }
  
  document.querySelectorAll(".highlight")
	.forEach(highlightDiv => createCopyButton(highlightDiv));
  

jQuery(function ($) {
	"use strict";

	/* ========================================================================= */
	/*	lazy load initialize
	/* ========================================================================= */

	const observer = lozad(); // lazy loads elements with default selector as ".lozad"
	observer.observe();

	/* ========================================================================= */
	/*	Magnific popup
	/* =========================================================================  */
	$('.image-popup-gallery').magnificPopup({
		type: 'image',
		removalDelay: 160, //delay removal by X to allow out-animation
		callbacks: {
			beforeOpen: function () {
				// just a hack that adds mfp-anim class to markup
				this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
				this.st.mainClass = this.st.el.attr('data-effect');
			}
		},
		gallery:{
			enabled:true
		},
		closeOnContentClick: true,
		midClick: true,
		fixedContentPos: false,
		fixedBgPos: true
	});

	/* ========================================================================= */
	/*	Portfolio Filtering Hook
	/* =========================================================================  */

	var containerEl = document.querySelector('.shuffle-wrapper');
	if (containerEl) {
		var Shuffle = window.Shuffle;
		var myShuffle = new Shuffle(document.querySelector('.shuffle-wrapper'), {
			itemSelector: '.shuffle-item',
			buffer: 1
		});

		jQuery('input[name="shuffle-filter"]').on('change', function (evt) {
			var input = evt.currentTarget;
			if (input.checked) {
				myShuffle.filter(input.value);
			}
		});
	}

	/* ========================================================================= */
	/*	Art Carousel
	/* =========================================================================  */

	$("#ArtCarousel").slick({
		infinite: true,
		arrows:	false,
		autoplay: true,
		autoplaySpeed: 1500,
		slidesToShow: 1,
		slidesToScroll: 1,
		lazyLoad: 'progressive', /* ondemand */
		centerMode: true,
  		variableWidth: true
	});


	/* ========================================================================= */
	/*	animation scroll js
	/* ========================================================================= */
	function myFunction(x) {
		if (x.matches) {
			var topOf = 50
		} else {
			var topOf = 350
		}
	}

	var html_body = $('html, body');
	$('nav a, .page-scroll').on('click', function () { //use page-scroll class in any HTML tag for scrolling
		if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
			var target = $(this.hash);
			target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
			if (target.length) {
				html_body.animate({
					scrollTop: target.offset().top - 82 // Value for scroll-padding 
				}, 1500, 'easeInOutExpo');
				return false;
			}
		}
	});

	// easeInOutExpo Declaration
	jQuery.extend(jQuery.easing, {
		easeInOutExpo: function (x, t, b, c, d) {
			if (t === 0) {
				return b;
			}
			if (t === d) {
				return b + c;
			}
			if ((t /= d / 2) < 1) {
				return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
			}
			return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
		}
	});

	/* ========================================================================= */
	/*	counter up
	/* ========================================================================= */
	function counter() {
		var oTop;
		if ($('.count').length !== 0) {
			oTop = $('.count').offset().top - window.innerHeight;
		}
		if ($(window).scrollTop() > oTop) {
			$('.count').each(function () {
				var $this = $(this),
					countTo = $this.attr('data-count');
				$({
					countNum: $this.text()
				}).animate({
					countNum: countTo
				}, {
					duration: 1000,
					easing: 'swing',
					step: function () {
						$this.text(Math.floor(this.countNum));
					},
					complete: function () {
						$this.text(this.countNum);
					}
				});
			});
		}
	}
	$(window).on('scroll', function () {
		counter();
	});

});