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

Small thumbnails on home

Browse Source
This commit is contained in:
Péter Gyetvai
2019-06-06 04:08:42 +02:00
parent 2450fc6da5
commit 647e333a16
14 changed files with 575 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
js/scripts.js
View File

@@ -143,29 +143,74 @@
/* ----------------------------------- css ---------------------------------- */
var articleWrapCounter = 0
if (isHome & !isMobile) {
$('html').css({ overflowY: "hidden" })
//wrapping for big-small difference
$('article:first-child').wrap('<div class="home-wrapper-big home-wrapper-1"></div>')
$('article:nth-child(2)').wrap('<div class="home-wrapper-big home-wrapper-2"></div>')
$('article:first-child').wrap('<div class="home-wrapper-big home-wrapper-1"></div>').addClass("home-big")
$('article:nth-child(2)').wrap('<div class="home-wrapper-big home-wrapper-2"></div>').addClass("home-big")
var wrapArticles = $("article").length - 2
var n = 0
var articleWrapCounter = 0
for (let i = 0; i < wrapArticles; i++) {
var j = i + 3
if (i % 6 == 0) {
n++
articleWrapCounter++
}
$('article:nth-child(' + j + ')').addClass("home-thumbnail-small-" + n)
$('article:nth-child(' + j + ')').addClass("home-small home-thumbnail-small-" + articleWrapCounter)
}
for (let i = 0; i < n; i++) {
for (let i = 0; i < articleWrapCounter; i++) {
var j = i + 3
var k = i+1
var k = i + 1
$(".home-thumbnail-small-" + k).wrapAll('<div class="home-wrapper-small home-wrapper-' + j + '"></div>')
}
}
//returns three random numebers 0-5
function randomNumbers() {
// All numbers are equal
var numberOne = 3;
var numberTwo = 3;
var numberThree = 3;
// run this loop until numberOne is different than numberThree
do {
numberOne = Math.floor(Math.random() * 5);
} while (numberOne === numberThree);
// run this loop until numberTwo is different than numberThree and numberOne
do {
numberTwo = Math.floor(Math.random() * 5);
} while (numberTwo === numberThree || numberTwo === numberOne);
var i = [numberOne, numberTwo, numberThree]
return i
}
//jquery function, adds random class to 3 random cihldren
(function ($) {
$.fn.addRandomClasses = function () {
let rn = randomNumbers()
for (let i = 0; i < 3; i++) {
var j = rn[i] + 1
this.children("article:nth-child(" + j + ")").addClass("random")
}
return this
};
})(jQuery);
$(".home-wrapper-small").each(function () {
// var rn = randomNumbers()
// for (let i = 0; i < rn.length; i++) {
// var j = rn[i] +1
// $(this).children("article:nth-child(" + j + ")").addClass("random")
// }
// addRandomClass($(this))
$(this).addRandomClasses()
})
/* ----------------------------- Snap on mobile ----------------------------- */
@@ -199,7 +244,7 @@
// var offset = ($(nextelem).offset().left) - desktophomemargin
var offset = ($(nextelem).position().left)
console.log("scrolling to: " + nextelem.attr("id") + " - offset: " + offset)
console.log("scrolling to: " + nextelem.attr("class") + " - offset: " + offset)
$('html, body').stop().animate({ scrollLeft: offset }, 800);
return nextelem;
}
@@ -231,8 +276,8 @@
var articleWidth = $(selector + ':first-child')[0].getBoundingClientRect().width
var currscroll = $('html').scrollLeft()
var scrollnr = Math.floor(currscroll / articleWidth) + 1
currElem = $( selector + ':nth-child(' + scrollnr + ')')
// console.log(currElem.attr("id"))
currElem = $(selector + ':nth-child(' + scrollnr + ')')
console.log("start location: " + currElem.attr("class"))
}
var scrolltimer = false;
@@ -270,13 +315,63 @@
$('.misha_loadmore').on("moreload-start", function () {
currElem = $(this).prev()
console.log("currelem: " + currElem.attr("class"))
})
$('.misha_loadmore').on("moreload-finish", function () {
//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()
//Scroll to new element
currElem = homeScroll(currElem, "next")
})
/* ------------------------------ hover on home ----------------------------- */
function showTitle(th) {
$(th).children("h2").show()
$(th).children(".metadata").addClass("vis")
}
function hideTitle(th) {
$(th).children("h2").hide()
$(th).children(".metadata").removeClass("vis")
}
$(document).on({
mouseenter: function () {
if (!Modernizr.touchevents) {
showTitle(this)
}
},
mouseleave: function () {
if (!Modernizr.touchevents) {
hideTitle(this)
}
}
}, '.home-small');
$(document).on({
'touchend': function (e) {
e.preventDefault()
var art = $(this).parents("article")
var metadata = art.children(".metadata")
if (metadata.hasClass("vis")) {
hideTitle(art)
} else {
hideTitle($(".vis").parents("article"))
showTitle(art)
}
}
}, ".home-small a.thumbnailwrapper")
/* -------------------------------------------------------------------------- */
/* CIRCULAR TEXT */