infeeeee/dis-2019
1
0
Fork 0
Code Issues 6 Pull Requests Releases 19 Wiki Activity

onresize and big js cleanup

Browse Source
This commit is contained in:
infeeeee
2019-09-06 23:36:17 +02:00
parent 752ff9c0aa
commit 58be407f0a
2 changed files with 321 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

762
js/scripts.js
View File

@@ -54,8 +54,11 @@
// console.log(cssWidths)
/* --------------------------- css values to vars --------------------------- */
/* -------------------------------------------------------------------------- */
/* FUNCTIONS */
/* -------------------------------------------------------------------------- */
/* --------------------------- css values to vars --------------------------- */
function calcWidths() {
let wow = window.outerWidth
@@ -84,9 +87,6 @@
}
}
var isMobile = checkDevice('mobile')
var isTablet = checkDevice('tablet')
/**
* Checks if body has a class
@@ -110,242 +110,66 @@
}
}
//isHome
const isHome = bodyHasClass('home')
//isArchive
const isArchive = bodyHasClass('archive', 'category-esemeny')
//isSearch
const isSearch = bodyHasClass('search-results')
//isSearchNoResults
const isSearchNoResults = bodyHasClass('search-no-results')
//isEsemeny
const isEsemeny = bodyHasClass('category-esemeny')
//isSingle
const isSingle = bodyHasClass('single')
// Masonrypage: archive, home or search results
var isMasonryPage = isArchive || isHome || isSearch || isSearchNoResults
/* -------------------------------------------------------------------------- */
/* Black logo on scroll on mobile */
/* -------------------------------------------------------------------------- */
$.fn.scrollStopped = function (callback) {
var that = this, $this = $(that);
$this.scroll(function (ev) {
clearTimeout($this.data('scrollTimeout'));
$this.data('scrollTimeout', setTimeout(callback.bind(that), 250, ev));
});
};
var isMenuOpen = function () {
let menuopen = ($('#sidebar').attr('data-simplersidebar') == 'opened') ? true : false
return menuopen
}
$(window).scroll(function () {
if (isMobile && !isMenuOpen()) {
$('.dis-logo, .menubutton-icon').addClass('black')
}
})
$(window).scrollStopped(function () {
if (isMobile && !isMenuOpen()) {
$('.dis-logo, .menubutton-icon').removeClass('black')
}
})
/* -------------------------------------------------------------------------- */
/* SEARCH */
/* -------------------------------------------------------------------------- */
// on mobile add to sidebar:
// if (isMobile) {
// $(".search-box>.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 {
let ww = calcWidths()
//if it's closed open:
bar.show().stop().animate({ width: ww.wiw - (ww.desktophomemargin * 2) }, 400, function () {
bar.addClass("opensearch")
$(".search-input").focus()
})
// console.log("calc(100% - " + (desktophomemargin * 2) + "px)")
}
})
}
/* ========================================================================== */
/* MENU */
/* ========================================================================== */
var rotateMenuButton = function () {
if ($(".menubutton button").hasClass("rotated")) {
$(".menubutton button").removeClass("rotated");
} else {
$(".menubutton button").addClass("rotated").addClass("inverted");
}
}
function mwCalc() {
let ww = calcWidths()
if (isMobile) {
return ww.wow
} else if (isTablet) {
return 350
} else {
return 500
}
}
var menuWidth = mwCalc()
// var menuWidth = 100
// if (isTablet) {
// menuWidth = 350
// }
// if (!isMobile && !isTablet) {
// 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: {
open: function () {
if (isMobile) {
$('.social-link, .events-link').removeClass('hidden')
}
},
close: function () {
$(".menubutton button").removeClass("inverted")
if (isMobile) {
$('.social-link, .events-link').addClass('hidden')
}
},
freezePage: false
}
/**
* finds a name of a class, from the first element
* @param {Array} classlist the list of classes to search from as an array
* @param {String} startString the string to search for
* @param {String} sep the separator that separates the startString from the rest of the classname
*/
function findClassByStart(classlist, startString, sep = "-") {
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
}
/* --------------------- generic page load for onresize --------------------- */
/* ----------------------------- random ----------------------------- */
var articleWrapCounter = 0
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]
}
function loadPage() {
if (isMobile) {
// hide social buttons
$('.social-link, .events-link').addClass('hidden')
// move search to menu
$(".search-box>.search-bar").prependTo("#sidebar-wrapper")
// set up no results
$('article.no-result').show()
$('body.no-result .archivetitle>h2').appendTo('article.no-result')
} else {
// not mobile
//show social links
$('.social-link, .events-link').removeClass('hidden')
// move search to back
$("#sidebar-wrapper>.search-bar").appendTo(".search-box")
// set up no results
$('article.no-result h2').appendTo('.archivetitle')
$('article.no-result').hide()
}
if (isMasonryPage) {
if (isMobile) {
//no overflowY
$('html').css({ overflowY: "unset" })
unWrapArts()
} else {
//no overflowY
$('html').css({ overflowY: "hidden" })
wrapArts()
$("body:not(.no-result) .archivetitle h1").fitText(0.7)
//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")
}
}
}
loadPage()
return this
};
})(jQuery);
/* -------------------------------------------------------------------------- */
/* HOME & ARCHIVES */
/* HOME & ARCHIVES FUNCTIONS */
/* -------------------------------------------------------------------------- */
/* ------------------------------- no results ------------------------------- */
if (isMasonryPage && $("article").hasClass('no-result')) {
$('body').addClass("no-result")
// if (!isMobile) {
// $('article.no-result h2').appendTo('.archivetitle')
// $('article.no-result').hide()
// }
}
/* ------------------------------ wrap articles ----------------------------- */
function wrapArts() {
//calculate wrappable elements
if ($(".hbox").length) {
return
}
$('#content>*:not(.misha_loadmore)').addClass("hbox")
$('#content>article, #content>.archivetitle, #content>.archivedescription').addClass("hbox")
var wrapArticles = $(".hbox").length
if (isHome) {
@@ -395,160 +219,32 @@
function unWrapArts() {
$('.home_wrapper-big .hbox').unwrap('.home_wrapper-big')
var wrapArticles = $(".hbox").length
for (let i = 0; i < wrapArticles.length + 1; i++) {
$('article').removeClass('.home-thumbnail-small-' + i)
var wrapArticles = $(".hbox").length
for (let i = 0; i < wrapArticles; i++) {
let hs = 'home-thumbnail-small-' + (i + 1)
$('.' + hs).removeClass(hs)
}
$('.hbox').removeClass('home-small').removeClass('hbox').unwrap('.home_wrapper-small')
$('.home_wrapper-s1').removeClass('home_wrapper-s1')
$('.home-big').removeClass('home-big')
}
if (!isMobile) {
if (isMasonryPage) {
// //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")
// }
// }
/* -------------------------------- other css ------------------------------- */
//add bottom scrollbar to div on bottom:
// if (bottomScrollHeight > 0) {
// $(".home_wrapper-big .metadata").css({ bottom: bottomScrollHeight })
// }
//fit title
// $("body:not(.no-result) .archivetitle h1").fitText(0.7)
}//isMasonryPage end
}// !isMobile end
/* ---------------- move bevezeto out from metadata on mobile --------------- */
if (isHome && isMobile) {
function moveBevezetoMobile() {
$("article .metadata .bevezetoWrapper").each(function () {
$(this).parents('article').append($(this))
})
}
/* ----------------------------- random cutouts ----------------------------- */
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]
function moveBevezetoDesktop() {
$("article>.bevezetoWrapper").each(function () {
$(this).parent('article').children('.metadata').append($(this))
})
}
//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()
})
/* ---------------------------- Cutouts on mobile --------------------------- */
//add class to odd elems
// function mobileHomeClass() {
// if (isMobile && isMasonryPage) {
// $('article:not(.post_nr):not(.cutOk) ').addClass('cutCurr')
// $('article.cutCurr:nth-child(even)').addClass('cut-even')
// $('article.cutCurr').addClass('cutOk').removeClass('cutCurr')
// }
// }
// mobileHomeClass()
/* ----------------------------- Snap on mobile ----------------------------- */
// if (isMobile) {
// if (isMasonryPage) {
// $("article.post").SnapScroll({
// animateDuration: 400
// });
// }
// }
/* --------------------------------- To top --------------------------------- */
// $(".totop>a").click(function (e) {
// e.preventDefault()
// $('html, body').stop().animate({ scrollTop: 0 }, 800);
// })
// //hide totop if not needed
// if (!($("main").height() > $(window).height()) && isMobile) {
// $(".totop").hide()
// }
/* ---------------------------- Scroll on desktop --------------------------- */
/**
@@ -628,8 +324,150 @@
}
}
/* -------------------------------------------------------------------------- */
/* SEARCH */
/* -------------------------------------------------------------------------- */
//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 {
let ww = calcWidths()
//if it's closed open:
bar.show().stop().animate({ width: ww.wiw - (ww.desktophomemargin * 2) }, 400, function () {
bar.addClass("opensearch")
$(".search-input").focus()
})
}
})
}
/* -------------------------------------------------------------------------- */
/* MENU */
/* -------------------------------------------------------------------------- */
/* ------------------------------ menufunctions ----------------------------- */
var rotateMenuButton = function () {
if ($(".menubutton button").hasClass("rotated")) {
$(".menubutton button").removeClass("rotated");
} else {
$(".menubutton button").addClass("rotated").addClass("inverted");
}
}
function mwCalc() {
let ww = calcWidths()
if (isMobile) {
return ww.wow
} else if (isTablet) {
return 350
} else {
return 500
}
}
/* ----------------------------- Set up the menu ---------------------------- */
var menuWidth = mwCalc()
$("#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: {
open: function () {
if (isMobile) {
$('.social-link, .events-link').removeClass('hidden')
}
},
close: function () {
$(".menubutton button").removeClass("inverted")
if (isMobile) {
$('.social-link, .events-link').addClass('hidden')
}
},
freezePage: false
}
}
}
});
/* -------------------------------------------------------------------------- */
/* BOOLEANS */
/* -------------------------------------------------------------------------- */
var isMobile = checkDevice('mobile')
var isTablet = checkDevice('tablet')
//isHome
const isHome = bodyHasClass('home')
//isArchive
const isArchive = bodyHasClass('archive', 'category-esemeny')
//isSearch
const isSearch = bodyHasClass('search-results')
//isSearchNoResults
const isSearchNoResults = bodyHasClass('search-no-results')
//isEsemeny
const isEsemeny = bodyHasClass('category-esemeny')
//isSingle
const isSingle = bodyHasClass('single')
// Masonrypage: archive, home or search results
var isMasonryPage = isArchive || isHome || isSearch || isSearchNoResults
/* -------------------------------------------------------------------------- */
/* Set up specific pages */
/* -------------------------------------------------------------------------- */
/* ------------------------------- no results ------------------------------- */
if (isMasonryPage && $("article").hasClass('no-result')) {
$('body').addClass("no-result")
}
const selector = isEsemeny ? 'main>section>article' : 'main>#content>div'
// default current elem for scrolling
var currElem = $(selector + ':first-child')
//checking the current scroll location for refresh:
@@ -668,14 +506,126 @@
// console.log("currscroll", currscroll, "scrollnr", scrollnr, "closest", closest)
console.log("start location: " + currElem.attr("class"))
}
}
/* -------------------------- on scroll on desktop -------------------------- */
/* -------------------------------------------------------------------------- */
/* EVENTS - ESEMÉNYEK */
/* -------------------------------------------------------------------------- */
if (isEsemeny) {
if (!isMobile) {
$('html').css({ overflowY: "hidden" })
}
}
/* --------------------- generic page load for onresize --------------------- */
var articleWrapCounter = 0
function loadPage() {
if (isMobile) {
// hide social buttons
$('.social-link, .events-link').addClass('hidden')
// move search to menu
$(".search-box>.search-bar").prependTo("#sidebar-wrapper")
// set up no results
$('article.no-result').show()
$('body.no-result .archivetitle>h2').appendTo('article.no-result')
} else {
// not mobile
//show social links
$('.social-link, .events-link').removeClass('hidden')
// move search to back
$("#sidebar-wrapper>.search-bar").appendTo(".search-box")
// set up no results
$('article.no-result h2').appendTo('.archivetitle')
$('article.no-result').hide()
}
if (isMasonryPage) {
if (isMobile) {
//no overflowY
$('html').css({ overflowY: "unset" })
unWrapArts()
moveBevezetoMobile()
} else {
//no overflowY
$('html').css({ overflowY: "hidden" })
wrapArts()
$("body:not(.no-result) .archivetitle h1").fitText(0.7)
moveBevezetoDesktop()
// add random classes
if (!$('.random').length) {
$(".home_wrapper-small").each(function () {
$(this).addRandomClasses()
})
}
}
}
if (isMasonryPage || isEsemeny) {
if (isMobile) {
} else {
currElem = $(selector + ':first-child')
}
}
}
loadPage()
/* -------------------------------------------------------------------------- */
/* Black logo on scroll on mobile */
/* -------------------------------------------------------------------------- */
$.fn.scrollStopped = function (callback) {
var that = this, $this = $(that);
$this.scroll(function (ev) {
clearTimeout($this.data('scrollTimeout'));
$this.data('scrollTimeout', setTimeout(callback.bind(that), 250, ev));
});
};
var isMenuOpen = function () {
let menuopen = ($('#sidebar').attr('data-simplersidebar') == 'opened') ? true : false
return menuopen
}
$(window).scroll(function () {
if (isMobile && !isMenuOpen()) {
$('.dis-logo, .menubutton-icon').addClass('black')
}
})
$(window).scrollStopped(function () {
if (isMobile && !isMenuOpen()) {
$('.dis-logo, .menubutton-icon').removeClass('black')
}
})
/* -------------------------------------------------------------------------- */
/* SCROLL */
/* -------------------------------------------------------------------------- */
/* ------------------------ scroll on home on desktop ----------------------- */
var scrolltimer = false;
$(window).on('wheel DOMMouseScroll', function (e) {
@@ -867,8 +817,6 @@
/* ------------------------------ hover on home ----------------------------- */
const metadataHeights = {}
//hover on big articles
@@ -979,6 +927,7 @@
})
}
// Uncomment for debugging hover
// if (!isMobile && isHome) {
// setTimeout(() => {
// bigArticleHoverShow($(".home_wrapper-1 .home-big h2 a"))
@@ -986,31 +935,13 @@
// }
/* ------------------------- hover on small articles ------------------------ */
/**
* finds a name of a class, from the first element
* @param {Array} classlist the list of classes to search from as an array
* @param {String} startString the string to search for
* @param {String} sep the separator that separates the startString from the rest of the classname
*/
function findClassByStart(classlist, startString, sep = "-") {
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) {
if (!$('body').hasClass('no-result')) {
$(th).children("h2").show()
$(th).children(".metadata").addClass("vis")
}
}
function hideTitle(th) {
@@ -1050,17 +981,6 @@
}, ".home-small a.thumbnailwrapper")
/* -------------------------------------------------------------------------- */
/* EVENTS - ESEMÉNYEK */
/* -------------------------------------------------------------------------- */
if (isEsemeny) {
if (!isMobile) {
$('html').css({ overflowY: "hidden" })
}
}
/* -------------------------------------------------------------------------- */
/* CIRCULAR TEXT */
/* -------------------------------------------------------------------------- */
@@ -1069,26 +989,6 @@
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 () {
@@ -1138,36 +1038,23 @@
//hide caption on desktop
if (!isMobile) {
// $('.wp-block-gallery img, .wp-block-image img, .vis').hover(function () {
// $(this).parent('a').next("figcaption").addClass("vis")
// }, function () {
// $('.wp-block-gallery .vis, .wp-block-image .vis')
// .removeClass("vis")
// })
$('.wp-block-gallery .blocks-gallery-item, .wp-block-image').hover(function () {
$(this).find("figcaption").addClass("vis")
}, function () {
$('.wp-block-gallery .vis, .wp-block-image .vis').removeClass("vis")
})
}
/* -------------------------------- 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 })
let captiontext = $(this).html()
$(this).prev('.cb-gallery').attr({ title: captiontext })
})
const lightBoxMaxHeight = isMobile ? '65%' : '80%'
@@ -1256,17 +1143,8 @@
}
}
}//if single end
/* ------------------------------- IOS fix try ------------------------------ */
// $(".logo a").click(function(e){
// e.preventDefault()
// alert('hello')
// })
/* -------------------------------------------------------------------------- */
/* window resize event */
/* -------------------------------------------------------------------------- */