dis-2019/js/scripts.js

(function ($, root, undefined) {

	$(function () {

		'use strict';

		// DOM ready, take it away

		/* ========================================================================== */
		/*                                  VARIABLES                                 */
		/* ========================================================================== */

		const vw = $(window).width()
		const wow = window.outerWidth
		console.log(vw, wow)
		var isMobile
		var isHome = false



		if (wow < 769) {
			isMobile = true
			//mobile settings
			$('.social-link').addClass('hidden')

		} else {
			isMobile = false
		}

		if ($('body').hasClass("home")) {
			isHome = true
		}

		var desktophomemargin = $(".header-1")[0].getBoundingClientRect().width


		/* ========================================================================== */
		/*                                  FUNCTIONS                                 */
		/* ========================================================================== */

		var focusSearch = function () {

			$(".search-bar input").focus()
		}

		var rotateMenuButton = function () {
			if ($(".menubutton button").hasClass("rotated")) {
				$(".menubutton button").removeClass("rotated");
			} else {
				$(".menubutton button").addClass("rotated");
			}
		}

		var showHideSocial = function () {
			if (isMobile && $('.social-link').hasClass('hidden')) {
				$('.social-link').removeClass('hidden')
			} else if (isMobile) {
				$('.social-link').addClass('hidden')
			}
		}

		function convertRemToPixels(rem) {
			return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
		}

		/* ========================================================================== */
		/*                                   SEARCH                                   */
		/* ========================================================================== */

		if (isMobile) {
			$(".search-bar").prependTo("#sidebar-wrapper")
		}

		/* ========================================================================== */
		/*                                    MENU                                    */
		/* ========================================================================== */

		var menuWidth = wow
		if (!isMobile) {
			menuWidth = 420
		}

		$("#sidebar").simplerSidebar({

			selectors: {
				trigger: "#toggle-sidebar",
				quitter: "#toggle-sidebar"
			},
			sidebar: {
				width: menuWidth
			},
			mask: {
				display: false,
				css: {
					backgroundColor: "black",
					opacity: 1,
					filter: "Alpha(opacity=100)" // IE opacity fix
				}
			},
			gap: 0,
			events: {
				on: {
					animation: {
						both: rotateMenuButton

					}
				},
				callbacks: {
					animation: {
						both: showHideSocial,
						freezePage: false
					}
				}
			}

		});

		/* --------------------------------- Search --------------------------------- */

		if (!isMobile) {
			$(".search-box button").click(function (e) {
				e.preventDefault()
				var bar = $(this).next(".search-bar")
				if (bar.hasClass("opensearch")) {
					bar.stop().animate({ width: "0" }, 400, function () {
						bar.hide().removeClass("opensearch")
					})
				} else {
					bar.show().stop().animate({ width: "20rem" }, 400, function () {
						bar.addClass("opensearch")
					})
				}

			})
		}



		/* -------------------------------------------------------------------------- */
		/*                                    HOME                                    */
		/* -------------------------------------------------------------------------- */


		/* ----------------------------------- css ---------------------------------- */

		if (isHome & !isMobile) {
			$('html').css({ overflowY: "hidden" })

		}

		/* ----------------------------- Snap on mobile ----------------------------- */

		if (isHome & isMobile) {
			$("article.post").SnapScroll({
				animateDuration: 400
			});
		}

		/* --------------------------------- To top --------------------------------- */

		$(".totop>a").click(function (e) {
			e.preventDefault()
			$('html, body').stop().animate({ scrollTop: 0 }, 800);
		})

		/* ---------------------------- Scroll on desktop --------------------------- */

		//scroll to the next or prev article
		function homeScroll(target, direction) {
			var nextelem;

			if (direction == "next") {
				nextelem = target.next()
			} else {
				nextelem = target.prev()
			}
			if (nextelem.length == 0) {
				nextelem = target
			}

			// var offset = ($(nextelem).offset().left) - desktophomemargin
			var offset = ($(nextelem).position().left) - desktophomemargin
			console.log("scrolling to: " + nextelem.attr("id") + " - offset: " + offset)
			$('html, body').stop().animate({ scrollLeft: offset }, 800);
			return nextelem;
		}

		//extractDelta(e): extract the scroll length from an event
		function extractDelta(e) {
			if (e.wheelDelta) {
				return e.wheelDelta;
			}

			if (e.originalEvent.detail) {
				return e.originalEvent.detail;
			}

			if (e.originalEvent.deltaY) {
				return e.originalEvent.deltaY * -1;
			}

			if (e.originalEvent && e.originalEvent.wheelDelta) {
				return e.originalEvent.wheelDelta;
			}
		}

		var currElem = $('article:first-child')

		//checking the current scroll location for refresh:
		if (isHome & !isMobile) {
			var articleWidth = $('article:first-child')[0].getBoundingClientRect().width
			var currscroll = $('html').scrollLeft()
			var scrollnr = Math.floor(currscroll / articleWidth) + 1
			currElem = $('article:nth-child(' + scrollnr + ')')
			console.log(currElem.attr("id"))
		}

		var scrolltimer = false;
		$(window).on('wheel DOMMouseScroll', function (e) {
			//e.preventDefault();
			if (isHome & !isMobile) {
				if (scrolltimer) {
					return false;
				}
				scrolltimer = true;
				setTimeout(() => {
					scrolltimer = false;
				}, 500);

				var wd = extractDelta(e)

				if (wd > 0) {
					currElem = homeScroll(currElem, "prev")
				}
				else {
					currElem = homeScroll(currElem, "next")
				}
			}
		});

		/* -------------------------- scroll click on home -------------------------- */
		$(".header-scroll-left button").click(() => {
			currElem = homeScroll(currElem, "prev")
		})
		$(".header-scroll-right button").click(() => {
			currElem = homeScroll(currElem, "next")
		})

		/* -------------------------- loadmore: ajax loads -------------------------- */

		$('.misha_loadmore').on("moreload-start", function () {
			currElem = $(this).prev()

		})

		$('.misha_loadmore').on("moreload-finish", function () {
			currElem = homeScroll(currElem, "next")
		})


		/* -------------------------------------------------------------------------- */
		/*                                CIRCULAR TEXT                               */
		/* -------------------------------------------------------------------------- */

		var charnum = 0
		$(".wrapper .header #tag-nav ul li a").each(function () {
			let chars = $(this).html().length + 1
			$(this).lettering()
			$(this).children("span").each(function () {
				let origClass = $(this).attr("class")
				let origClassNum = parseInt(origClass.split("r")[1])
				let newClassNum = origClassNum + charnum
				$(this).removeClass(origClass).addClass("char" + newClassNum)
			})
			charnum += chars
		})


	});

})(jQuery, this);