initial commit

js/scripts.js

@@ -0,0 +1,281 @@
+(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);