From ea09fa398b370440f792717c3a7d015099850243 Mon Sep 17 00:00:00 2001 From: infeeeee Date: Thu, 3 Oct 2019 16:13:36 +0200 Subject: [PATCH] work on alcim on big articles --- js/scripts.js | 57 ++++++++++++++++++++++++++------------------------- 1 file changed, 29 insertions(+), 28 deletions(-) diff --git a/js/scripts.js b/js/scripts.js index 9aa97e6..13b97bb 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -862,33 +862,36 @@ if (!isMobile) { // let cc = $(this) let cArticle = cc.parents("article") + let cH2 = cc.parent('h2') let cMetadata = cArticle.children(".metadata") let cBevezetoWrapper = cMetadata.children(".bevezetoWrapper") let cBevezeto = cBevezetoWrapper.children(".bevezeto") + let cAlcimWrapper = cMetadata.children(".alcimWrapper") + let cAlcim = cAlcimWrapper.children('.alcim') // calculate default metadata height - metadataHeights.collapsedHeight = cMetadata[0].getBoundingClientRect().height + // check calculated metadata opened height + if (!cc.attr('data-metadataOpenedHeight')) { + // calculate opened metadata height: + let h2H = cH2[0].getBoundingClientRect().height - //calculate opened metadata height - 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 + // metadataHeights.openedHeight = artH - bottomScrollHeight - h2H + let metadataMaxheight = artH - bottomScrollHeight - h2H + let metadataOpenedHeight = (metadataMaxheight < metadataHeights.collapsedHeight) ? metadataHeights.collapsedHeight : metadataMaxheight + cc.attr('data-metadataOpenedHeight', metadataOpenedHeight) + // console.log('h2h', h2H, artH) + } - let artH = cArticle[0].getBoundingClientRect().height - metadataHeights.openedHeight = artH - bottomScrollHeight - h2H - - console.log('h2h', h2H, artH) + let metadataOpenedHeight = cc.attr('data-metadataOpenedHeight') //add height to bevezetoWrapper - $('.bevezetoWrapper').css({ height: metadataHeights.openedHeight }) + cBevezetoWrapper.css({ height: metadataOpenedHeight }) - $('.alcimWrapper').css({ height: metadataHeights.openedHeight }) + cAlcimWrapper.css({ height: metadataOpenedHeight }) //add hovered class @@ -903,32 +906,30 @@ cMetadata.children(".categories, .postedon").addClass("transparent") //animate border - cMetadata.stop().animate({ height: metadataHeights.openedHeight }, 400, _ => { + cMetadata.stop().animate({ height: metadataOpenedHeight }, 400, _ => { //hide metadata cMetadata.children(".categories, .postedon").hide().removeClass("transparent") - cMetadata.children(".bevezetoWrapper").show() - cMetadata.children(".alcimWrapper").css({ display: 'flex' }) + cBevezetoWrapper.show() + cAlcimWrapper.css({ display: 'flex' }) //set height for ellipsis - if (!metadataHeights.bevezetoHeight) { - metadataHeights.bevezetoHeight = cBevezetoWrapper.height() + if (!cc.attr('data-metadataBevezetoHeight')) { + let metadataBevezetoHeight = cBevezetoWrapper.height() let bWidth = cBevezetoWrapper.width() - // let bWidth = cBevezetoWrapper[0].getBoundingClientRect().width - $('.bevezeto').css({ - height: metadataHeights.bevezetoHeight, + cBevezetoWrapper.children('.bevezeto').css({ + height: metadataBevezetoHeight, width: bWidth + 'px' }) - $('.alcim').css({ - height: metadataHeights.bevezetoHeight, + cAlcim.css({ + height:metadataBevezetoHeight, }) - + cc.attr('data-metadataBevezetoHeight', metadataBevezetoHeight) } - + //show bev+alcim cMetadata.children(".bevezetoWrapper, .alcimWrapper").removeClass("transparent") - //clamp bevezető let ellipsis = new Ellipsis(cBevezeto[0]); ellipsis.calc(); @@ -940,7 +941,7 @@ // Uncomment for debugging hover // if (!isMobile && isHome) { // setTimeout(() => { - // bigArticleHoverShow($(".home_wrapper-1 .home-big h2 a")) + // bigArticleHoverShow($(".home_wrapper-2 .home-big h2 a")) // }, 2000); // }