From 9393e8be064f816718287cdb0ccfea2c6d425b2f Mon Sep 17 00:00:00 2001 From: infeeeee Date: Sat, 7 Sep 2019 00:09:19 +0200 Subject: [PATCH] fixed hover on big articles on resize --- js/scripts.js | 207 ++++++++++++++++++++++++++------------------------ 1 file changed, 108 insertions(+), 99 deletions(-) diff --git a/js/scripts.js b/js/scripts.js index 045d491..e27a00d 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -204,11 +204,11 @@ } //wrap classes for (let i = 0; i < articleWrapCounter; i++) { - var j = i + 1 + let j = i + 1 if (isHome) { j = i + 3 } - var k = i + 1 + let k = i + 1 $(".home-thumbnail-small-" + k).wrapAll('
') if (i == 0) { $(".home_wrapper-" + j).addClass("home_wrapper-s1") @@ -241,7 +241,7 @@ function moveBevezetoDesktop() { $("article>.bevezetoWrapper").each(function () { - $(this).parent('article').children('.metadata').append($(this)) + $(this).parent('article').children('.metadata').children('.postedon').after($(this)) }) } @@ -821,110 +821,117 @@ //hover on big articles - $(".home-big h2 a").hover(function () { + $('body').on('mouseenter', '.home-big h2 a', function () { bigArticleHoverShow($(this)) - - }, 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(".alcimWrapper, .bevezetoWrapper").addClass("transparent") - - //animate height change - cMetadata.stop().animate({ height: metadataHeights.collapsedHeight }, 400, _ => { - //hide and show metadata - cMetadata.children(".alcimWrapper, .bevezetoWrapper").css({ display: 'none' }).removeClass("transparent") - cMetadata.children(".categories, .postedon").removeClass("transparent").show() - }) + }) + $('body').on('mouseleave', '.home-big h2 a', function () { + bigArticleHoverHide($(this)) }) + function bigArticleHoverHide(cc) { + // let cc = $(this) + if (!isMobile) { + 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(".alcimWrapper, .bevezetoWrapper").addClass("transparent") + + //animate height change + cMetadata.stop().animate({ height: metadataHeights.collapsedHeight }, 400, _ => { + //hide and show metadata + cMetadata.children(".alcimWrapper, .bevezetoWrapper").css({ display: 'none' }).removeClass("transparent") + cMetadata.children(".categories, .postedon").removeClass("transparent").show() + cMetadata.css({ height: '' }) + }) + } + } function bigArticleHoverShow(cc) { - // let cc = $(this) - let cArticle = cc.parents("article") - let cMetadata = cArticle.children(".metadata") - let cBevezetoWrapper = cMetadata.children(".bevezetoWrapper") - let cBevezeto = cBevezetoWrapper.children(".bevezeto") - - // calculate default metadata height - if (!metadataHeights.collapsedHeight) { - metadataHeights.collapsedHeight = cMetadata[0].getBoundingClientRect().height - } - - //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 - 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") - - //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: metadataHeights.openedHeight }, 400, _ => { - - //hide metadata - cMetadata.children(".categories, .postedon").hide().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, - }) + if (!isMobile) { + // let cc = $(this) + let cArticle = cc.parents("article") + let cMetadata = cArticle.children(".metadata") + let cBevezetoWrapper = cMetadata.children(".bevezetoWrapper") + let cBevezeto = cBevezetoWrapper.children(".bevezeto") + // calculate default metadata height + if (!metadataHeights.collapsedHeight) { + metadataHeights.collapsedHeight = cMetadata[0].getBoundingClientRect().height } - //show bev+alcim - cMetadata.children(".bevezetoWrapper, .alcimWrapper").removeClass("transparent") + //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 + 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") + + //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: metadataHeights.openedHeight }, 400, _ => { + + //hide metadata + cMetadata.children(".categories, .postedon").hide().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ő - let ellipsis = new Ellipsis(cBevezeto[0]); - ellipsis.calc(); - ellipsis.set(); - }) + //clamp bevezető + let ellipsis = new Ellipsis(cBevezeto[0]); + ellipsis.calc(); + ellipsis.set(); + }) + } } // Uncomment for debugging hover @@ -938,14 +945,14 @@ /* ------------------------- hover on small articles ------------------------ */ function showTitle(th) { - if (!$('body').hasClass('no-result')) { + if (!$('body').hasClass('no-result') && !isMobile) { $(th).children("h2").show() $(th).children(".metadata").addClass("vis") } } function hideTitle(th) { - if (!$('body').hasClass('no-result')) { + if (!$('body').hasClass('no-result') && !isMobile) { $(th).children("h2").hide() $(th).children(".metadata").removeClass("vis") } @@ -1159,6 +1166,8 @@ // calc other vars menuWidth = mwCalc() + articleWrapCounter = 0 + //run load script loadPage()