Fixed an issue with displaying tag #1. Fixed image ratios, though it …

…broke the descriptions on the archive page.
KenEucker · Jun 23, 2020 · a7c9365 · a7c9365
1 parent d7642aa
commit a7c9365
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 57 deletions.
diff --git a/templates/base/js/biketag.js b/templates/base/js/biketag.js
@@ -315,14 +315,16 @@ class BikeTag {
 		return tagNumberIndex;
 	}
 
-	renderBikeTag(tag, heading, targetSelector) {
+	renderBikeTag(tag, heading, targetSelector, fadeIn = false) {
 		var targetContainer = document.querySelector(targetSelector || '.content .inner');
 
 		if (targetContainer) {
 			var tagContainer = document.createElement('div')
-			tagContainer.className = "m-imgur-post"
+			tagContainer.className = "m-imgur-post fadeIn"
 			var tagTemplate = this.biketagImageTemplate(tag, heading || "Tag", true)
+
 			tagContainer.innerHTML = tagTemplate
+
 			tagContainer.querySelector('a').addEventListener('click', function (e) {
 				var isArchive = document.body.classList.contains('archive')
 				var content = '<img src="' + this.getAttribute('href') + '"></img>'
@@ -366,24 +368,25 @@ class BikeTag {
 		var imageLinkStringSplit = image.link.split('.')
 		var imageLinkStringEnd = '.' + imageLinkStringSplit[imageLinkStringSplit.length - 1]
 		var thumbnail = image.link.replace(imageLinkStringEnd, 'l' + imageLinkStringEnd)
-		var tagNumber = '';
+		var tagNumber = '0', tagCredit = "your'e it";
 
 		if (image.gifv) {
 			thumbnail = image.link;
 		}
 
 		if (image.description) {
 			var split = image.description.split(' ')
-			var tagNumber = split[0].replace('#', poundSymbol)
+			tagNumber = split[0].replace('#', poundSymbol)
+
 			var split = image.description.split('by')
-			var tagCredit = split[split.length - 1]
+			tagCredit = split[split.length - 1]
 		}
 
 		// console.log('setting image link', image.link, image);
 		return `<a href="${image.link}" target="_blank">
 					<span>${tagNumber}</span>
 					<span>${tagCredit}</span>
-					<img ${!!loadImage ? `src="${thumbnail}"` : ''} data-src="${thumbnail}">
+					<img class="${!!loadImage ? '' : 'hidden'}" ${!!loadImage ? `src="${thumbnail}"` : ''} data-src="${thumbnail}">
 					<h2 class="description">${title}</h2>
 				</a>`
 	}
@@ -398,15 +401,15 @@ class BikeTag {
 		}
 
 		if (imgur.imgurAlbumPictures.length) {
-			tagInformation.currentTag = imgur.imgurAlbumPictures[0]
+			tagInformation.currentTag = !!imgur.imgurAlbumPictures[0].description ? imgur.imgurAlbumPictures[0] : (imgur.imgurAlbumPictures.length > 1 ? imgur.imgurAlbumPictures[1] : 0)
 
 			if (tagInformation.currentTag) {
-				var tagHintSplit = tagInformation.currentTag.description.split('(')
-				var tagHint = tagHintSplit.length > 1 ? tagHintSplit[1].split(')')[0] : null
-				var tagCreditSplit = tagInformation.currentTag.description.split('by')
-				var tagCredit = tagCreditSplit[tagCreditSplit.length - 1]
-				var tagNumberSplit = tagInformation.currentTag.description.split(' ')
-				var tagNumberString = tagNumberSplit.length ? tagNumberSplit[0].substr(1) : -1
+				var tagHintSplit = tagInformation.currentTag.description ? tagInformation.currentTag.description.split('(') : []
+				var tagHint = tagHintSplit.length > 1 ? tagHintSplit[1].split(')')[0] : ''
+				var tagCreditSplit = tagInformation.currentTag.description ? tagInformation.currentTag.description.split('by') : []
+				var tagCredit = tagCreditSplit.length ? tagCreditSplit[tagCreditSplit.length - 1] : ''
+				var tagNumberSplit = tagInformation.currentTag.description ? tagInformation.currentTag.description.split(' ') : []
+				var tagNumberString = tagNumberSplit.length ? tagNumberSplit[0].substr(1) : 0
 
 				tagInformation.hasTag = true
 				tagInformation.currentTagNumber = Number(tagNumberString)
@@ -500,10 +503,10 @@ class BikeTag {
 			fileReader.readAsArrayBuffer(file)
 		}
 	}
-
-	setLatestTagInformation() {
+	
+	setLatestTagInformation(cb) {
 		if (!imgur.imgurAlbumPictures) {
-			return imgur.getImgurAlbumPictures(null, this.setLatestTagInformation.bind(this))
+			return imgur.getImgurAlbumPictures(null, !!cb ? cb.bind(this) : this.setLatestTagInformation.bind(this))
 		}
 
 		if (!this.latestTagInformationHasBeenSet) {
@@ -512,21 +515,22 @@ class BikeTag {
 			return
 		}
 
-		console.log('loading lazy load images')
-		window.lazyLoadInstance = new LazyLoad()
+		// console.log('loading lazy load images')
+		// window.lazyLoadInstance = new LazyLoad()
 
 		var images = imgur.imgurAlbumPictures
 		if (!!images && images.length) {
-			var lastImage = images[0]
-			this.renderBikeTag(lastImage, "Current mystery location to find", `#${this.formID} #heading`)
+			var currentTagInfo = this.getCurrentTagInformation()
+
+			this.renderBikeTag(currentTagInfo.currentTag, "Current mystery location to find", `#${this.formID} #heading`)
 
 			// Set the form with the tag information
-			var currentTagInfo = this.getCurrentTagInformation()
 			$('#biketagUploadForm h1').html($('#biketagUploadForm h1').text() + ' ' + poundSymbol + currentTagInfo.currentTagNumber + '?')
 			$('#previousTag h3').html($('#previousTag h3').text() + ' ' + poundSymbol + currentTagInfo.currentTagNumber)
 			$('#nextTag h3').html($('#nextTag h3').text() + ' ' + poundSymbol + currentTagInfo.nextTagNumber)
 			$('#tagNumber').html(poundSymbol + currentTagInfo.nextTagNumber)
 			$('#proofNumber').html(poundSymbol + currentTagInfo.currentTagNumber)
+
 			if (!!currentTagInfo.hint && currentTagInfo.hint.length) {
 				$('#hintText').text(currentTagInfo.hint)
 				$('#userLeftHintMessage').text('provided the following hint:')
@@ -540,26 +544,26 @@ class BikeTag {
 				$('#userCredit').text('user did not provide a name')
 			}
 		}
+
+		return currentTagInfo
 	}
 
 	showLatestTagImages(count = -1) {
 		if (!imgur.imgurAlbumPictures) {
 			return imgur.getImgurAlbumPictures(null, this.showLatestTagImages.bind(this))
 		}
 
-		this.setLatestTagInformation()
 		var countParam = this.getUrlParam('count')
 		count = count == -1 ? false : (Number.isInteger(count) ? count : (countParam === 'all' ? countParam : Number(countParam)))
 
 		if (count) {
 			this.showArchiveTags(count)
 		} else {
+			const currentTagInfo = this.setLatestTagInformation()
+
 			document.body.classList.remove('archive')
 			$('#header .content .inner').empty()
-
-			var images = imgur.imgurAlbumPictures;
-			var lastImage = images[0]
-			this.renderBikeTag(lastImage, "Current mystery location to find")
+			this.renderBikeTag(currentTagInfo.currentTag, "Current mystery location to find")
 		}
 	}
 
@@ -601,13 +605,13 @@ class BikeTag {
 				this.renderBikeTag(theTag, "Original Tag");
 			}
 
-			window.lazyLoadInstance = new LazyLoad();
+			// window.lazyLoadInstance = new LazyLoad();
 		} else if (tagNumber == imageCount) {
 			var newTag = images[this.getTagNumberIndex(tagNumber)];
 
 			this.renderBikeTag(newTag, "Current Tag");
 
-			window.lazyLoadInstance = new LazyLoad();
+			// window.lazyLoadInstance = new LazyLoad();
 		}
 	}
 

diff --git a/templates/biketag1/css/main.css b/templates/biketag1/css/main.css
diff --git a/templates/biketag1/css/main.css.map b/templates/biketag1/css/main.css.map
diff --git a/templates/biketag1/index.ejs b/templates/biketag1/index.ejs
@@ -169,6 +169,21 @@
 			console.log('Could not load sexy page data', { error: e })
 		}
 	</script>
+	<script>
+		(function (w, d) {
+			var b = d.getElementsByTagName('body')[0];
+			var s = d.createElement("script");
+			s.async = true;
+			var v = !("IntersectionObserver" in w) ? "8.7.1" : "10.5.2";
+			s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";
+			w.lazyLoadOptions = {
+				class_loading: 'invisible',
+				class_loaded: 'fadeIn',
+			}; // Your options here. See "recipes" for more information about async.
+			b.appendChild(s);
+
+		}(window, document));
+	</script>
 	<script src="js/biketag.js"></script>
 	<script>
 		var biketagUploadContainerSelector = '#tagit'
@@ -183,19 +198,6 @@
 			biketagUploadContainerEl.innerHTML = "<h3>Region not supported</h3><p>Currently, this version of biketag is being managed elsewhere. If you need to create a biketag post that is not affiliated with any region, go to <a href='Http://post.biketag.org'>here to post a global tag</a>.</p>"
 		<% } %>
 	</script>
-
-	<script>
-		(function (w, d) {
-			var b = d.getElementsByTagName('body')[0];
-			var s = d.createElement("script");
-			s.async = true;
-			var v = !("IntersectionObserver" in w) ? "8.7.1" : "10.5.2";
-			s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";
-			w.lazyLoadOptions = {}; // Your options here. See "recipes" for more information about async.
-			b.appendChild(s);
-
-		}(window, document));
-	</script>
 	<script>
 	</script>
 

diff --git a/templates/biketag1/js/main.js b/templates/biketag1/js/main.js
@@ -254,6 +254,7 @@
 			// Add state?
 			if (typeof addState != 'undefined' &&
 				addState === true)
+				console.log({history: '#'})
 				history.pushState(null, null, '#');
 
 			// Handle lock.
@@ -448,8 +449,7 @@
 			location.hash != '#')
 			$window.on('load', function () {
 				$main._show(location.hash.substr(1), true);
-			});
-
+			})
 	});
 
 })(jQuery);
diff --git a/templates/biketag1/sass/base/_animations.scss b/templates/biketag1/sass/base/_animations.scss
@@ -0,0 +1,12 @@
+@keyframes fadeIn{
+	from {
+		opacity:0;
+	}
+	to {
+		opacity:1;
+	}
+}
+
+.fadeIn {
+	animation:fadeIn 2.5s;
+}
diff --git a/templates/biketag1/sass/layout/_main.scss b/templates/biketag1/sass/layout/_main.scss
@@ -6,6 +6,10 @@
 
 /* Main */
 
+.insivible {
+	visibility: hidden;
+}
+
 .bg-green {
 	background-color: _palette(green);
 }

diff --git a/templates/biketag1/sass/main.scss b/templates/biketag1/sass/main.scss
@@ -28,6 +28,7 @@
 	@import 'base/reset';
 	@import 'base/page';
 	@import 'base/typography';
+	@import 'base/animations';
 
 // Component.
 

diff --git a/templates/biketag1/sass/views/_imgurPost.scss b/templates/biketag1/sass/views/_imgurPost.scss
@@ -2,6 +2,13 @@
 	margin-bottom: 2em;
 	border-top-left-radius: 10px;
 	border-top-right-radius: 10px;
+	max-width: 80vw;
+	min-width: 50vw;
+
+	img, .descrtipion {
+		min-width: 50vw;
+		max-width: 80vw;
+	}
 
 	.description {
 		border-style: solid;
@@ -12,8 +19,6 @@
 		margin: 0;
 		border-top-right-radius: 0;
 		border-top-left-radius: 0;
-		width: 640px;
-		max-width: 75vw;
 		margin-top: -0.6em;
 		background-color: _palette(postcard-white);
 		color: black;
@@ -50,15 +55,13 @@
 		border-top-right-radius: 10px;
 		border-top-left-radius: 10px;
 		border: 1px _palette(postcard-white) solid;
-		width: 640px;
-		max-width: 75vw;
 		border-bottom: 0;
 		border-top: 0;
 		background-color: rgba(0, 0, 0, 0.7);
 		padding: 0.5em;
 		padding-top: 0.1em;
-		max-height: 60vh;
-		height: auto;
+		max-height: 100vh;
+		min-height: 50vh;
 	}
 
 	@include breakpoint('>=medium') {

diff --git a/templates/home/js/webflow.js b/templates/home/js/webflow.js
@@ -3507,4 +3507,4 @@ Webflow.define('gplus', module.exports = function ($) {
 });
 
 /***/ })
-/******/ ]);
+/******/ ]);