mobile home and friends
This commit is contained in:
infeeeee
161
js/scripts.js
161
js/scripts.js
@@ -290,8 +290,6 @@
|
||||
//add bottom scrollbar to div on bottom:
|
||||
if (bottomScrollHeight > 0) {
|
||||
$(".home_wrapper-big .metadata").css({ bottom: bottomScrollHeight })
|
||||
} else {
|
||||
$(".home_wrapper-big .metadata").addClass("noBottomScrollbar")
|
||||
}
|
||||
|
||||
//fit title
|
||||
@@ -339,6 +337,21 @@
|
||||
})
|
||||
|
||||
|
||||
/* ---------------------------- 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) {
|
||||
@@ -580,10 +593,15 @@
|
||||
//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()
|
||||
|
||||
if (isMobile) {
|
||||
mobileHomeClass()
|
||||
} else {
|
||||
$("#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
|
||||
if (scroll) {
|
||||
@@ -615,7 +633,7 @@
|
||||
|
||||
function loadmore(element, scroll = true) {
|
||||
if (noMoreAjax) {
|
||||
console.log("no more ajax")
|
||||
// console.log("no more ajax")
|
||||
return false
|
||||
}
|
||||
// var button = $(this),
|
||||
@@ -671,58 +689,17 @@
|
||||
|
||||
/* ------------------------------ hover on home ----------------------------- */
|
||||
|
||||
var defaultMetadataHeight
|
||||
var openedMetadataHeight
|
||||
|
||||
|
||||
const metadataHeights = {}
|
||||
|
||||
//hover on big articles
|
||||
|
||||
$(".home-big h2 a").hover(function () {
|
||||
let cc = $(this)
|
||||
let cArticle = cc.parents("article")
|
||||
let cMetadata = cArticle.children(".metadata")
|
||||
let cBevezeto = cMetadata.children(".bevezeto")[0]
|
||||
|
||||
// calculate default height
|
||||
if (!defaultMetadataHeight) {
|
||||
defaultMetadataHeight = cMetadata[0].getBoundingClientRect().height
|
||||
}
|
||||
|
||||
//calculate opened height
|
||||
if (!openedMetadataHeight) {
|
||||
let h2H = 0
|
||||
$(".home-big h2").each(function () {
|
||||
if ($(this)[0].getBoundingClientRect().height > h2H) {
|
||||
h2H = $(this)[0].getBoundingClientRect().height
|
||||
}
|
||||
})
|
||||
let artH = cArticle[0].getBoundingClientRect().height
|
||||
openedMetadataHeight = artH - bottomScrollHeight - h2H
|
||||
// $('.alcim').css({width: openedMetadataHeight})
|
||||
$('.bevezeto').css({height: openedMetadataHeight})
|
||||
}
|
||||
|
||||
//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: openedMetadataHeight }, 400, _ => {
|
||||
//hide metadata
|
||||
cMetadata.children(".categories, .postedon").hide().removeClass("transparent")
|
||||
cMetadata.children(".alcim, .bevezeto").show().removeClass("transparent")
|
||||
|
||||
//clamp bevezető
|
||||
$clamp(cBevezeto, { clamp: 'auto' });
|
||||
})
|
||||
|
||||
bigArticleHoverShow($(this))
|
||||
|
||||
}, function () {
|
||||
|
||||
let cc = $(this)
|
||||
let cArticle = cc.parents("article")
|
||||
let cMetadata = cArticle.children(".metadata")
|
||||
@@ -736,45 +713,49 @@
|
||||
$("body, .header-1, .header-2").removeClass(hoverClass)
|
||||
|
||||
//transparent metadata
|
||||
cMetadata.children(".alcim, .bevezeto").addClass("transparent")
|
||||
cMetadata.children(".alcimWrapper, .bevezetoWrapper").addClass("transparent")
|
||||
|
||||
//animate height change
|
||||
cMetadata.stop().animate({ height: defaultMetadataHeight }, 400, _ => {
|
||||
cMetadata.stop().animate({ height: metadataHeights.collapsedHeight }, 400, _ => {
|
||||
//hide and show metadata
|
||||
cMetadata.children(".alcim, .bevezeto").hide().removeClass("transparent")
|
||||
cMetadata.children(".alcimWrapper, .bevezetoWrapper").css({ display: 'none' }).removeClass("transparent")
|
||||
cMetadata.children(".categories, .postedon").removeClass("transparent").show()
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
// for testing:
|
||||
var bighovertest = (function () {
|
||||
let cc = $(".home_wrapper-1 .home-big h2 a")
|
||||
function bigArticleHoverShow(cc) {
|
||||
// let cc = $(this)
|
||||
let cArticle = cc.parents("article")
|
||||
let cMetadata = cArticle.children(".metadata")
|
||||
let cBevezeto = cMetadata.children(".bevezeto")[0]
|
||||
let cBevezetoWrapper = cMetadata.children(".bevezetoWrapper")
|
||||
let cBevezeto = cBevezetoWrapper.children(".bevezeto")
|
||||
|
||||
// calculate default height
|
||||
if (!defaultMetadataHeight) {
|
||||
defaultMetadataHeight = cMetadata[0].getBoundingClientRect().height
|
||||
// calculate default metadata height
|
||||
if (!metadataHeights.collapsedHeight) {
|
||||
metadataHeights.collapsedHeight = cMetadata[0].getBoundingClientRect().height
|
||||
}
|
||||
|
||||
//calculate opened height
|
||||
if (!openedMetadataHeight) {
|
||||
//calculate opened metadata height
|
||||
if (!metadataHeights.openedHeight) {
|
||||
let h2H = 0
|
||||
$(".home-big h2").each(function () {
|
||||
if ($(this)[0].getBoundingClientRect().height > h2H) {
|
||||
h2H = $(this)[0].getBoundingClientRect().height
|
||||
}
|
||||
})
|
||||
|
||||
let artH = cArticle[0].getBoundingClientRect().height
|
||||
openedMetadataHeight = artH - bottomScrollHeight - h2H
|
||||
// cMetadata.children('.alcim').css({width: openedMetadataHeight})
|
||||
$('.bevezeto').css({height: openedMetadataHeight})
|
||||
metadataHeights.openedHeight = artH - bottomScrollHeight - h2H
|
||||
|
||||
console.log('h2h', h2H, artH)
|
||||
|
||||
//add height to bevezetoWrapper
|
||||
$('.bevezetoWrapper').css({ height: metadataHeights.openedHeight })
|
||||
|
||||
$('.alcimWrapper').css({ height: metadataHeights.openedHeight })
|
||||
}
|
||||
|
||||
|
||||
|
||||
//add hovered class
|
||||
cArticle.addClass("hovered")
|
||||
|
||||
@@ -787,15 +768,45 @@
|
||||
cMetadata.children(".categories, .postedon").addClass("transparent")
|
||||
|
||||
//animate border
|
||||
cMetadata.stop().animate({ height: openedMetadataHeight }, 400, _ => {
|
||||
cMetadata.stop().animate({ height: metadataHeights.openedHeight }, 400, _ => {
|
||||
|
||||
//hide metadata
|
||||
cMetadata.children(".categories, .postedon").hide().removeClass("transparent")
|
||||
cMetadata.children(".alcim, .bevezeto").show().removeClass("transparent")
|
||||
cMetadata.children(".bevezetoWrapper").show()
|
||||
cMetadata.children(".alcimWrapper").css({ display: 'flex' })
|
||||
|
||||
//set height for ellipsis
|
||||
if (!metadataHeights.bevezetoHeight) {
|
||||
metadataHeights.bevezetoHeight = cBevezetoWrapper.height()
|
||||
let bWidth = cBevezetoWrapper.width()
|
||||
// let bWidth = cBevezetoWrapper[0].getBoundingClientRect().width
|
||||
$('.bevezeto').css({
|
||||
height: metadataHeights.bevezetoHeight,
|
||||
width: bWidth + 'px'
|
||||
})
|
||||
$('.alcim').css({
|
||||
height: metadataHeights.bevezetoHeight,
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
//show bev+alcim
|
||||
cMetadata.children(".bevezetoWrapper, .alcimWrapper").removeClass("transparent")
|
||||
|
||||
|
||||
//clamp bevezető
|
||||
$clamp(cBevezeto, { clamp: 'auto' });
|
||||
let ellipsis = new Ellipsis(cBevezeto[0]);
|
||||
ellipsis.calc();
|
||||
ellipsis.set();
|
||||
})
|
||||
})()
|
||||
}
|
||||
|
||||
if (!isMobile && isHome) {
|
||||
setTimeout(() => {
|
||||
bigArticleHoverShow($(".home_wrapper-1 .home-big h2 a"))
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user