mobile home and friends

js/lib/ftellipsis.min.js

@@ -0,0 +1 @@
+(function(){"use strict";function t(t,e){t&&(this.el=t,this.container=e&&e.container,this.reRender=e&&e.reRender)}function e(e){e.style.display="none",t.r=e.offsetTop,e.style.display=""}function i(t,e){if(t)for(var i=e&&e.display,n=t.parentNode.children,l=a.call(n,t),o=l+1,s=n.length;s>o;o++)n[o].style.display=i}function n(t,e){var i=t.getClientRects(),n=0;return p(i,function(t){n+=l(t.height,e)}),n}function l(t,e){return Math.floor(t/e)}function o(){var t=document.createElement("test"),e={},i={Webkit:["WebkitColumnCount","WebkitColumnGap"],Moz:["MozColumnCount","MozColumnGap"],ms:["msColumnCount","msColumnGap"],"":["columnCount","columnGap"]};for(var n in i)i[n][0]in t.style&&(e.columnCount=i[n][0],e.columnGap=i[n][1],e[n.toLowerCase()]=!0);return e}function s(t){return parseInt(t[y.columnCount],10)||1}function h(t){return parseInt(t[y.columnGap],10)||0}function r(t){var e=parseInt(t.lineHeight,10);if(!e)throw Error(f[0]);return e}function u(t){return[t.offsetWidth,t.offsetHeight]}function p(t,e){for(var i=0,n=t.length;n>i&&!e(t[i]);i++);}var a=Array.prototype.indexOf,c=window.getComputedStyle,d="ellipsis-overflowing-child",m="ellipsis-set",f=["The ellipsis container must have line-height set on it"],y=o();t.prototype.calc=function(){if(!this.el)return this;var t=c(this.el),e=u(this.el);return this.columnHeight=e[1],this.columnCount=s(t),this.columnGap=h(t),this.columnWidth=e[0]/this.columnCount,this.lineHeight=r(t),this.deltaHeight=e[1]%this.lineHeight,this.linesPerColumn=Math.floor(this.columnHeight/this.lineHeight),this.totalLines=this.linesPerColumn*this.columnCount,!this.deltaHeight&&this.columnCount>1&&(this.el.style.height=this.columnHeight+"px"),this.child=this.getOverflowingChild(),this},t.prototype.set=function(){return this.el&&this.child?(this.clampChild(),i(this.child.el,{display:"none"}),this.markContainer(),this):this},t.prototype.unset=function(){return this.el&&this.child?(this.el.style.height="",this.unclampChild(this.child),i(this.child.el,{display:""}),this.unmarkContainer(),this.child=null,this):this},t.prototype.destroy=function(){return this.el=this.child=this.container=null,this},t.prototype.getOverflowingChild=function(){var t=this,e={},i=0;return p(this.el.children,function(n){var l,o,s,h=Math.floor(i/t.linesPerColumn)||0;return i+=l=t.getLineCount(n),i>=t.totalLines?(o=i-t.totalLines,s=l-o,e.el=n,e.clampedLines=s,e.clampedHeight=e.clampedLines*t.lineHeight,e.visibleColumnSpan=t.columnCount-h,e.gutterSpan=e.visibleColumnSpan-1,e.applyTopMargin=t.shouldApplyTopMargin(e),y.webkit&&e.clampedLines>1&&(e.clampedHeight+=e.gutterSpan*t.deltaHeight),e):void 0}),e},t.prototype.getLineCount=function(t){return t.offsetWidth>this.columnWidth?n(t,this.lineHeight):l(t.clientHeight,this.lineHeight)},t.prototype.markContainer=function(){this.container&&(this.container.classList.add(m),this.reRender&&e(this.container))},t.prototype.unmarkContainer=function(){this.container&&(this.container.classList.remove(m),this.reRender&&e(this.container))},t.prototype.shouldApplyTopMargin=function(t){var e=t.el;if(y.webkit&&1!==this.columnCount&&!(3>=this.deltaHeight)&&e.previousElementSibling)return 0===e.offsetTop||e.offsetTop===this.columnHeight},t.prototype.clampChild=function(){var t=this.child;t&&t.el&&(t.el.style.height=t.clampedHeight+"px",y.webkit&&(t.el.style.webkitLineClamp=t.clampedLines,t.el.style.display="-webkit-box",t.el.style.webkitBoxOrient="vertical"),this.shouldHideOverflow()&&(t.el.style.overflow="hidden"),t.applyTopMargin&&(t.el.style.marginTop="2em"),t.el.classList.add(d),y.webkit||(t.el.style.position="relative",t.helper=t.el.appendChild(this.helperElement())))},t.prototype.unclampChild=function(t){t&&t.el&&(t.el.style.display="",t.el.style.height="",t.el.style.webkitLineClamp="",t.el.style.webkitBoxOrient="",t.el.style.marginTop="",t.el.style.overflow="",t.el.classList.remove(d),t.helper&&t.helper.parentNode.removeChild(t.helper))},t.prototype.helperElement=function(){var t,e,i=document.createElement("span"),n=this.child.visibleColumnSpan-1;return i.className="ellipsis-helper",i.style.display="block",i.style.height=this.lineHeight+"px",i.style.width="5em",i.style.position="absolute",i.style.bottom=0,i.style.right=0,y.moz&&n&&(t=-(100*n),e=-(n*this.columnGap),i.style.right=t+"%",i.style.marginRight=e+"px",i.style.marginBottom=this.deltaHeight+"px"),i},t.prototype.shouldHideOverflow=function(){var t=this.columnCount>1;return this.columnHeight<this.lineHeight?!0:!t},"object"==typeof exports?(module.exports=function(e,i){return new t(e,i)},module.exports.Ellipsis=t):"function"==typeof define&&define.amd?define(function(){return t}):window.Ellipsis=t})();

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);
+		}
+
 
 
 		/**