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

fixed hover on big articles on resize

Browse Source
This commit is contained in:
infeeeee
2019-09-07 00:09:19 +02:00
parent 58be407f0a
commit 9393e8be06
1 changed files with 108 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
js/scripts.js
View File

@@ -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('<div class="home_wrapper-small home_wrapper-' + j + '"></div>')
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()