397 lines
10 KiB
JavaScript
397 lines
10 KiB
JavaScript
(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 ---------------------------------- */
|
|
|
|
var articleWrapCounter = 0
|
|
|
|
if (isHome & !isMobile) {
|
|
$('html').css({ overflowY: "hidden" })
|
|
|
|
//wrapping for big-small difference
|
|
$('article:first-child').wrap('<div class="home-wrapper-big home-wrapper-1"></div>').addClass("home-big")
|
|
$('article:nth-child(2)').wrap('<div class="home-wrapper-big home-wrapper-2"></div>').addClass("home-big")
|
|
var wrapArticles = $("article").length - 2
|
|
var articleWrapCounter = 0
|
|
for (let i = 0; i < wrapArticles; i++) {
|
|
var j = i + 3
|
|
if (i % 6 == 0) {
|
|
articleWrapCounter++
|
|
}
|
|
$('article:nth-child(' + j + ')').addClass("home-small home-thumbnail-small-" + articleWrapCounter)
|
|
}
|
|
for (let i = 0; i < articleWrapCounter; i++) {
|
|
var j = i + 3
|
|
var k = i + 1
|
|
$(".home-thumbnail-small-" + k).wrapAll('<div class="home-wrapper-small home-wrapper-' + j + '"></div>')
|
|
}
|
|
}
|
|
|
|
|
|
//returns three random numebers 0-5
|
|
function randomNumbers() {
|
|
// All numbers are equal
|
|
var numberOne = 3;
|
|
var numberTwo = 3;
|
|
var numberThree = 3;
|
|
|
|
// run this loop until numberOne is different than numberThree
|
|
do {
|
|
numberOne = Math.floor(Math.random() * 5);
|
|
} while (numberOne === numberThree);
|
|
|
|
// run this loop until numberTwo is different than numberThree and numberOne
|
|
do {
|
|
numberTwo = Math.floor(Math.random() * 5);
|
|
} while (numberTwo === numberThree || numberTwo === numberOne);
|
|
|
|
var i = [numberOne, numberTwo, numberThree]
|
|
return i
|
|
}
|
|
|
|
//jquery function, adds random class to 3 random cihldren
|
|
(function ($) {
|
|
$.fn.addRandomClasses = function () {
|
|
let rn = randomNumbers()
|
|
for (let i = 0; i < 3; i++) {
|
|
var j = rn[i] + 1
|
|
this.children("article:nth-child(" + j + ")").addClass("random")
|
|
}
|
|
return this
|
|
};
|
|
})(jQuery);
|
|
|
|
|
|
$(".home-wrapper-small").each(function () {
|
|
// var rn = randomNumbers()
|
|
// for (let i = 0; i < rn.length; i++) {
|
|
// var j = rn[i] +1
|
|
// $(this).children("article:nth-child(" + j + ")").addClass("random")
|
|
// }
|
|
// addRandomClass($(this))
|
|
$(this).addRandomClasses()
|
|
})
|
|
|
|
/* ----------------------------- 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)
|
|
console.log("scrolling to: " + nextelem.attr("class") + " - 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 selector = 'main>#content>div'
|
|
var articleWidth = $(selector + ':first-child')[0].getBoundingClientRect().width
|
|
var currscroll = $('html').scrollLeft()
|
|
var scrollnr = Math.floor(currscroll / articleWidth) + 1
|
|
currElem = $(selector + ':nth-child(' + scrollnr + ')')
|
|
console.log("start location: " + currElem.attr("class"))
|
|
}
|
|
|
|
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()
|
|
console.log("currelem: " + currElem.attr("class"))
|
|
|
|
})
|
|
|
|
$('.misha_loadmore').on("moreload-finish", function () {
|
|
|
|
//wrap new elements on load
|
|
articleWrapCounter++
|
|
var wrapnum = articleWrapCounter + 2
|
|
$("#content>article")
|
|
.addClass("home-small home-thumbnail-small-" + articleWrapCounter)
|
|
.wrapAll('<div class="home-wrapper-small home-wrapper-' + wrapnum + '"></div>')
|
|
$(".home-wrapper-" + wrapnum).addRandomClasses()
|
|
|
|
//Scroll to new element
|
|
currElem = homeScroll(currElem, "next")
|
|
})
|
|
|
|
/* ------------------------------ hover on home ----------------------------- */
|
|
|
|
function showTitle(th) {
|
|
$(th).children("h2").show()
|
|
$(th).children(".metadata").addClass("vis")
|
|
}
|
|
|
|
function hideTitle(th) {
|
|
$(th).children("h2").hide()
|
|
$(th).children(".metadata").removeClass("vis")
|
|
}
|
|
|
|
$(document).on({
|
|
mouseenter: function () {
|
|
if (!Modernizr.touchevents) {
|
|
showTitle(this)
|
|
}
|
|
},
|
|
mouseleave: function () {
|
|
if (!Modernizr.touchevents) {
|
|
hideTitle(this)
|
|
}
|
|
}
|
|
}, '.home-small');
|
|
|
|
$(document).on({
|
|
'touchend': function (e) {
|
|
e.preventDefault()
|
|
var art = $(this).parents("article")
|
|
var metadata = art.children(".metadata")
|
|
if (metadata.hasClass("vis")) {
|
|
hideTitle(art)
|
|
} else {
|
|
hideTitle($(".vis").parents("article"))
|
|
showTitle(art)
|
|
}
|
|
}
|
|
}, ".home-small a.thumbnailwrapper")
|
|
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* 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);
|