Files
dis-2019/js/scripts.js
2019-07-03 23:20:48 +02:00

741 lines
20 KiB
JavaScript

(function ($, root, undefined) {
$(function () {
'use strict';
// DOM ready, take it away
/* ========================================================================== */
/* VARIABLES */
/* ========================================================================== */
/* -------------------------------- geometry -------------------------------- */
const vw = $(window).width()
const wow = window.outerWidth
const wiw = window.innerWidth
const bw = $('body').width()
const wih = window.innerHeight
const vh = $(window).height()
const desktophomemargin = $(".header-1")[0].getBoundingClientRect().width
// height of scrollbar at bottom
const bottomScrollHeight = (_ => {
if (wih / vh > 1.5) {
return 0
} else {
let bs = wih - vh
return bs
}
})()
const cssWidths = {
vw: vw,
wow: wow,
wiw: wiw,
bw: bw,
desktophomemargin: desktophomemargin,
wih: wih,
vh: vh,
bottomScrollHeight: bottomScrollHeight
}
console.log(cssWidths)
/* --------------------------- css values to vars --------------------------- */
//isMobile
const isMobile = (_ => {
if (wow < 769) {
//mobile settings
$('.social-link').addClass('hidden')
return true
} else {
return false
}
})()
// checks if body has a class
function bodyHasClass(classname, notclassname){
if ($('body').hasClass(classname)) {
if (notclassname) {
if ($('body').hasClass(notclassname)) {
return false
}else{
return true
}
} else{
return true
}
} else {
return false
}
}
//isHome
const isHome = bodyHasClass('home')
//isArchive
const isArchive = bodyHasClass('archive','category-esemeny')
//isEsemeny
const isEsemeny = bodyHasClass('category-esemeny')
//isSingle
const isSingle = bodyHasClass('single')
/* ========================================================================== */
/* FUNCTIONS */
/* ========================================================================== */
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 */
/* ========================================================================== */
// on mobile add to sidebar:
if (isMobile) {
$(".search-bar").prependTo("#sidebar-wrapper")
}
//clicking on desktop
if (!isMobile) {
$(".search-box button").click(function (e) {
// e.preventDefault()
var bar = $(this).next(".search-bar")
if (bar.hasClass("opensearch")) {
//if search is opened close:
bar.stop().animate({ width: "0" }, 400, function () {
bar.hide().removeClass("opensearch")
})
} else {
//if it's closed open:
bar.show().stop().animate({ width: wiw - (desktophomemargin * 3) }, 400, function () {
bar.addClass("opensearch")
$(".search-input").focus()
})
// console.log("calc(100% - " + (desktophomemargin * 2) + "px)")
}
})
}
/* ========================================================================== */
/* MENU */
/* ========================================================================== */
var menuWidth = wow
if (!isMobile) {
menuWidth = 500
}
$("#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
}
}
}
});
/* -------------------------------------------------------------------------- */
/* HOME & ARCHIVES */
/* -------------------------------------------------------------------------- */
/* ----------------------------------- css ---------------------------------- */
if (!isMobile) {
if (isHome || isArchive) {
//no overflowY
$('html').css({ overflowY: "hidden" })
//calculate wrappable elements
$('#content>*:not(.misha_loadmore)').addClass("hbox")
var wrapArticles = $(".hbox").length
//wrapping for big-small difference
if (isHome) {
$('.hbox:first-child').wrap('<div class="home-wrapper-big home-wrapper-1"></div>').addClass("home-big")
$('.hbox:nth-child(2)').wrap('<div class="home-wrapper-big home-wrapper-2"></div>').addClass("home-big")
wrapArticles = $(".hbox").length - 2
}
//add classes to articles and elements
var articleWrapCounter = 0
for (let i = 0; i < wrapArticles; i++) {
var j = i + 1
if (isHome) {
j = i + 3
}
if (i % 6 == 0) {
articleWrapCounter++
}
//console.log($('.hbox:nth-child(' + j + ')').attr("id"), i, j)
$('.hbox:nth-child(' + j + ')').addClass("home-small home-thumbnail-small-" + articleWrapCounter)
//change order if there is a description
if ($("body").is('.archive, .tag') && articleWrapCounter == 1) {
if (j == 3 || j == 4) {
$('.hbox:nth-child(' + j + ')').css({ order: j - 1 })
} else if (j == 5 || j == 6) {
$('.hbox:nth-child(' + j + ')').css({ order: j })
}
}
}
//wrap classes
for (let i = 0; i < articleWrapCounter; i++) {
var j = i + 1
if (isHome) {
j = i + 3
}
var k = i + 1
$(".home-thumbnail-small-" + k).wrapAll('<div class="home-wrapper-small home-wrapper-' + j + '"></div>')
if (i == 0) {
$(".home-wrapper-" + j).addClass("home-wrapper-s1")
}
}
//add bottom scrollbar to div on bottom:
if (bottomScrollHeight > 0) {
$(".home-wrapper-big .metadata").css({ bottom: bottomScrollHeight })
} else {
$(".home-wrapper-big .metadata").addClass("noBottomScrollbar")
}
}//isHome || isArchive end
}// !isMobile end
//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
}
function random2() {
const choices = [
[1, 3],
[1, 5],
[1, 6],
[2, 4],
[2, 6],
[3, 4],
[3, 5],
[4, 6]
]
let nr = Math.floor(Math.random() * choices.length);
return choices[nr]
}
//jquery function, adds random class to 3 random cihldren
(function ($) {
$.fn.addRandomClasses = function () {
let rn = random2()
for (let i = 0; i < 2; i++) {
var j = rn[i]
this.children("article:nth-child(" + j + ")").addClass("random")
}
return this
};
})(jQuery);
$(".home-wrapper-small").each(function () {
$(this).addRandomClasses()
})
/* ----------------------------- Snap on mobile ----------------------------- */
if (isMobile) {
if (isHome || isArchive) {
$("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).position().left)
//if loadmore is the next, do not scroll, but load
if ($(nextelem).attr("class") == "misha_loadmore") {
loadmore()
return target
} else {
//from the third wrap modify the offset
var wNum = parseInt($(nextelem).attr("class").split(" ")[1].split("-")[2])
if (wNum == 3 || !isHome) {
offset = offset - (desktophomemargin / 2)
} else if (wNum > 4 || !isHome) {
offset = offset - desktophomemargin
}
}
console.log("scrolling to: " + nextelem.attr("class") + " - offset: " + offset)
$('html, body, .wrapper').stop().animate({ scrollLeft: offset }, 800);
return nextelem;
}
//extractDelta(e): extract the scroll direction and 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;
}
}
const selector = 'main>#content>div'
var currElem = $(selector + ':first-child')
//checking the current scroll location for refresh:
if (!isMobile) {
if (isHome || isArchive) {
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 (!isMobile) {
if (isHome || isArchive) {
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")
})
/* ----------------------------- loadmore click ----------------------------- */
$('.misha_loadmore').click(function (e) {
e.preventDefault()
loadmore($(this))
});
var noMoreAjax = false
function loadmore(element) {
if (noMoreAjax) {
console.log("no more ajax")
return false
}
// var button = $(this),
var button = element || $('.misha_loadmore'),
data = {
'action': 'loadmore',
'query': misha_loadmore_params.posts, // that's how we get params from wp_localize_script() function
'page': misha_loadmore_params.current_page
};
button.trigger("moreload-start")
$.ajax({ // you can also use $.post here
url: misha_loadmore_params.ajaxurl, // AJAX handler
data: data,
type: 'POST',
beforeSend: function (xhr) {
button.html('<p>Betöltés...</p>'); // change the button text, you can also add a preloader image
},
success: function (data) {
if (data) {
if (data.length < 100) {
button.children().remove(); // if last page, remove the button
noMoreAjax = true
return false
}
button.html('<a>Mutass többet</a>').before(data); // insert new posts
misha_loadmore_params.current_page++;
button.trigger("moreload-finish")
console.log(data.length)
// you can also fire the "post-load" event here if you use a plugin that requires it
// $( document.body ).trigger( 'post-load' );
} else {
button.children().remove(); // if no data, remove the button as well
noMoreAjax = true
console.log("no data")
}
}
});
}
/* ------------------------------ hover on home ----------------------------- */
//hover on big articles
$(".home-big h2 a").hover(function () {
let cc = $(this)
let cArticle = cc.parents("article")
let cMetadata = cArticle.children(".metadata")
//add hovered class
cArticle.addClass("hovered")
//add tag to header for bg
let artClasses = cArticle.attr("class").split(" ")
let theTag = findClassByStart(artClasses, "tag")
$("body, .header-1, .header-2").addClass("hover-" + theTag)
//transparent metadata
cMetadata.children(".categories, .postedon").addClass("transparent")
//animate border
cMetadata.stop().animate({ height: "25rem" }, 400, _ => {
//hide metadata
cMetadata.children(".categories, .postedon").hide().removeClass("transparent")
cMetadata.children(".alcim, .bevezeto").show().removeClass("transparent")
})
}, function () {
let cc = $(this)
let cArticle = cc.parents("article")
let cMetadata = cArticle.children(".metadata")
//remove hovered class
cArticle.removeClass("hovered")
//remove tag from header and body
let headerClasses = $(".header-1").attr("class").split(" ")
var hoverClass = findClassByStart(headerClasses, "hover")
$("body, .header-1, .header-2").removeClass(hoverClass)
//transparent metadata
cMetadata.children(".alcim, .bevezeto").addClass("transparent")
//animate height change
cMetadata.stop().animate({ height: "10rem" }, 400, _ => {
//hide and show metadata
cMetadata.children(".alcim, .bevezeto").hide().removeClass("transparent")
cMetadata.children(".categories, .postedon").removeClass("transparent").show()
})
})
function findClassByStart(classlist, startString, sep = "-") {
//finds a name of a class, from the first elemnt
var fullstring
for (let i = 0; i < classlist.length; i++) {
let curr = classlist[i].split(sep)
if (curr[0] == startString) {
fullstring = classlist[i]
}
}
return fullstring
}
//hover on small articles
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');
//touch on small articles
$(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")
/* -------------------------------------------------------------------------- */
/* EVENTS - ESEMÉNYEK */
/* -------------------------------------------------------------------------- */
if (isEsemeny) {
//add spaces to date
$(".event-metadata .ev-date").each(function () {
let repl = $(this).html().replace(/\.\b/g, ". ")
$(this).html(repl)
})
}
/* -------------------------------------------------------------------------- */
/* CIRCULAR TEXT */
/* -------------------------------------------------------------------------- */
const bedoListItems = ".wrapper .header #tag-nav ul li"
const bedoWords = bedoListItems + " a"
const bedoLetters = bedoWords + " span"
//move subs to wrapper
$(bedoListItems).each(function () {
let itemId = $(this).attr("id")
let tagClass = $(this).attr("class").split(" ")
let itemClass = findClassByStart(tagClass, 'tag')
// add wrapper div
// $(".sub-wrapper").append('<div id="' + itemId + '" class="bedo-sub-wrapper ' + itemClass + '"></div>')
// add tag title
// $(this).children("a").clone().appendTo(".sub-wrapper #" + itemId)
//add sub text
// $(this).children("span").appendTo(".sub-wrapper #" + itemId)
//add circle
// $(".sub-wrapper #" + itemId + " span").append('<div class="circle">')
})
//wrap each letter to spans
var charnum = 0
$(bedoWords).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
})
/* ---------------------------------- hover --------------------------------- */
$(bedoWords).hover(function () {
$(bedoLetters).addClass("pause")
$(this).children("span").addClass("current")
let currTagClass = $(this).parent().attr("class").split(" ")
let tagClass = findClassByStart(currTagClass, "tag")
console.log(".bedo-sub-wrapper ." + tagClass)
$(".sub-wrapper>.opened").removeClass("opened")
$(".sub-wrapper>." + tagClass).addClass("opened")
}, function () {
$(bedoLetters).removeClass("pause")
$(this).children("span").removeClass("current")
$(".sub-wrapper>.opened").removeClass("opened")
})
/* -------------------------------------------------------------------------- */
/* SINGLE */
/* -------------------------------------------------------------------------- */
if (isSingle) {
/* -------------------------------- Lightbox -------------------------------- */
//group gallery images:
$('.wp-block-gallery a, .wp-block-image a').addClass('cb-gallery')
//copy figcaption to title
$("a.cb-gallery ~ figcaption").each(function(){
let captiotext = $(this).html()
$(this).prev('.cb-gallery').attr({title:captiotext})
})
//http://www.jacklmoore.com/colorbox/
const colorboxSettings = {
transition:'fade',
rel:'cb-ballery',
maxWidth: '90%',
maxHeight: '80%',
trapFocus: false,
scrolling: false,
fixed: true,
previous: '',
next:'',
close:'',
}
// lightbox for galleries
$(".wp-block-gallery a").colorbox(colorboxSettings)
//single images
$(".wp-block-image a").colorbox(colorboxSettings)
}
/* ------------------------------- END OF FILE ------------------------------ */
});
})(jQuery, this);