cover photo: some code cleanup and fix height issue when photo was not cached

1 files changed, 39 insertions, 30 deletions

diff --git a/view/tpl/cover_photo_widget.tpl b/view/tpl/cover_photo_widget.tpl
index e8af6f6dc..a7d4e52ea 100755
--- a/view/tpl/cover_photo_widget.tpl
+++ b/view/tpl/cover_photo_widget.tpl
@@ -3,52 +3,45 @@
 	var section_padding_top;
 	var coverSlid = false;
 	var hide_cover = Boolean({{$hide_cover}});
+	var cover_height;
 
 	$(document).ready(function() {
 		if(! $('#cover-photo').length)
 			return;
 
-		aside_padding_top = parseInt($('aside').css('padding-top'));
-		section_padding_top = parseInt($('section').css('padding-top'));
-
-		$(document).on('click mouseup keyup', slideUpCover);
+		if($(window).width() < 755) {
+			$('#cover-photo').remove();
+			coverSlid = true;
+			return;
+		}
 
-		if($(window).width() > 755) {
-			$('#cover-photo').removeClass('d-none');
-			datasrc2src('#cover-photo > img');
+		$('#cover-photo').removeClass('d-none');
+		cover_height = Math.ceil($(window).width()/2.75862069);
+		$('#cover-photo').css('height', cover_height + 'px');
+		datasrc2src('#cover-photo > img');
 
-			if(hide_cover) {
-				hideCover();
-			}
+		$(document).on('click mouseup keyup', slideUpCover);
 
-			if($(window).scrollTop() < $('#cover-photo').height()) {
-				$('body').css('cursor', 'n-resize');
-				$('.navbar').removeClass('fixed-top');
-				$('main').css('margin-top', - $('nav').outerHeight(true) + 'px');
-				$('main').css('opacity', 0);
-			}
+		if(hide_cover) {
+			hideCover();
 		}
-		else {
-			$('#cover-photo').remove();
-			coverSlid = true;
+		else if(!hide_cover && !coverSlid)  {
+			coverVisibleActions();
 		}
 	});
 
 	$(window).scroll(function () {
-		if($(window).width() > 755 && $(window).scrollTop() > $('#cover-photo').height()) {
-			$('body').css('cursor', '');
-			$('.navbar').addClass('fixed-top');
-			$('main').css('margin-top', '');
-			$('main').css('opacity', 1);
+		if($(window).scrollTop() > cover_height) {
+			coverHiddenActions();
 			coverSlid = true;
 		}
-		else if ($(window).width() > 755 && $(window).scrollTop() < $('#cover-photo').height()){
+		else if ($(window).scrollTop() < cover_height){
 			if(coverSlid) {
-				$(window).scrollTop(Math.ceil($('#cover-photo').height()));
+				$(window).scrollTop(cover_height);
 				setTimeout(function(){ coverSlid = false; }, 1000);
 			}
 			else {
-				if($(window).scrollTop() < $('#cover-photo').height()) {
+				if($(window).scrollTop() < cover_height) {
 					$('body').css('cursor', 'n-resize');
 					$('.navbar').removeClass('fixed-top');
 					$('main').css('margin-top', - $('nav').outerHeight(true) + 'px');
@@ -57,11 +50,13 @@
 			}
 		}
 		if($('main').css('opacity') < 1) {
-			$('main').css('opacity', ($(window).scrollTop()/$('#cover-photo').height()).toFixed(1));
+			$('main').css('opacity', ($(window).scrollTop()/cover_height).toFixed(1));
 		}
 	});
 
 	$(window).resize(function () {
+		cover_height = Math.ceil($(window).width()/2.75862069);
+		$('#cover-photo').css('height', cover_height + 'px');
 		if($(window).width() < 755) {
 			$('#cover-photo').remove();
 			$('.navbar').addClass('fixed-top');
@@ -75,7 +70,7 @@
 		if(coverSlid) {
 			return;
 		}
-		$('html, body').animate({scrollTop: Math.ceil($('#cover-photo').height()) + 'px' }, 'fast');
+		$('html, body').animate({scrollTop: cover_height + 'px'}, 'fast');
 		return;
 	}
 
@@ -83,7 +78,21 @@
 		if(coverSlid) {
 			return;
 		}
-		window.scrollTo(0, Math.ceil($('#cover-photo').height()));
+		window.scrollTo(0, cover_height);
+	}
+
+	function coverVisibleActions() {
+		$('body').css('cursor', 'n-resize');
+		$('.navbar').removeClass('fixed-top');
+		$('main').css('margin-top', - $('nav').outerHeight(true) + 'px');
+		$('main').css('opacity', 0);
+	}
+
+	function coverHiddenActions() {
+		$('body').css('cursor', '');
+		$('.navbar').addClass('fixed-top');
+		$('main').css('margin-top', '');
+		$('main').css('opacity', 1);
 	}
 </script>