get rid of jquery dependency

content/games/wonderland-dizzy.md

@@ -3,7 +3,6 @@ title: "Wonderland Dizzy: Better Left Undiscovered?"
 date: 2022-01-26
 score: 2
 howlongtobeat_id: undefined
-howlongtobeat_hrs: undefined
 game_name: "Wonderland Dizzy"
 game_release_year: 2015
 game_developer: 'The Oliver Twins'

themes/jefklak-creative-portfolio/assets/sass/_codex.sass

@@ -95,14 +95,6 @@ button
 	color: white !important
 	border-color: darkgrey !important
 
-.sorted
-	box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.35)
-
-	&-asc:before
-		content: "​ ▼ ​"
-	&-desc:before
-		content: "​ ▲ ​"
-
 
 .small-navbar button 
 	position: fixed

themes/jefklak-creative-portfolio/assets/sass/_grid.sass

@@ -24,3 +24,15 @@
 .gamegridcontrols
 	background: scale-color($bglight, $lightness: -10%)
 	padding: 0.7rem
+
+	button
+		font-size: 0.8em
+
+	.sorted
+		box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.35)
+
+		&-asc:before
+			content: "​ ▼ ​"
+		&-desc:before
+			content: "​ ▲ ​"
+

themes/jefklak-creative-portfolio/layouts/partials/footer.html

@@ -1,3 +1,3 @@
 <footer>
-  <a style="cursor: pointer;" id="totop" class="no-border"><img src="/img/bg-back.gif" class="no-border" alt="back to top" /></a>
+  <a style="cursor: pointer;" class="no-border" href="#top"><img src="/img/bg-back.gif" class="no-border" alt="back to top" /></a>
 </footer>  

themes/jefklak-creative-portfolio/layouts/partials/portfoliolite.html

@@ -12,9 +12,16 @@
           <h2>Game Codex &raquo;</h2>
 
           <div class="gamegridcontrols">
-          Sort by: <button class="sortbtn sorted sorted-asc" data-sort="date">Date added</button>&nbsp;&nbsp;<button class="sortbtn" data-sort="name">Title</button>&nbsp;&nbsp;<button class="sortbtn" data-sort="year">Release year</button>&nbsp;&nbsp;<button class="sortbtn" data-sort="hours">How long to beat</button>
+            Sort by: 
+            <button class="sortbtn sorted sorted-asc" data-sort="date" data-sorted="asc">Date added</button>&nbsp;&nbsp;
+            <button class="sortbtn" data-sort="name">Title</button>&nbsp;&nbsp;
+            <button class="sortbtn" data-sort="year">Release year</button>&nbsp;&nbsp;
+            <button class="sortbtn" data-sort="hours">How long to beat</button>&nbsp;&nbsp;
+            <button class="sortbtn" data-sort="rating">Rating</button>
           </div>
-
+          <noscript>
+            Sorting relies on JavaScript which is currently disabled.
+          </noscript>          
           <div class="gamegrid">
           {{ range .Pages }}
               {{ partial "portfoliolite-block.html" . }}

themes/jefklak-creative-portfolio/layouts/partials/score.html

@@ -3,7 +3,9 @@
   <p>
   {{ $score := $.Params.score }}
   {{ if not $simplescore }}
-    <strong>Verdict</strong>: {{ $score }}/5
+    <strong>Verdict</strong>: <span class="rating">{{ $score }}</span>/5
+  {{ else }}
+    <span class="rating" style="display: none;">{{ $score }}</span>
   {{ end }}
   {{ range after 0 (seq $score)}}
     <img src="/img/random/4.gif" class="score score-on" title="Score: {{ $score }}/5" />

themes/jefklak-creative-portfolio/layouts/partials/scripts.html

@@ -1,4 +1,3 @@
 <script defer src="{{ "js/scrollingelement.js" | absURL }}"></script>
-<script src="{{ "js/jquery.min.js" | absURL }}"></script>
 <script defer src='/js/simple-lightbox.min.js'></script>
 <script src="{{ "js/codex.js" | absURL }}"></script>

themes/jefklak-creative-portfolio/layouts/platforms/single.html

@@ -20,12 +20,19 @@
         <h2>Games &raquo;</h2>
 
         <div class="gamegridcontrols">
-          Sort by: <button class="sortbtn sorted sorted-asc" data-sort="date">Date added</button>&nbsp;&nbsp;<button class="sortbtn" data-sort="name">Title</button>&nbsp;&nbsp;<button class="sortbtn" data-sort="year">Release year</button>&nbsp;&nbsp;<button class="sortbtn" data-sort="hours">How long to beat</button>
+          Sort by: 
+          <button class="sortbtn sorted sorted-asc" data-sort="date" data-sorted="asc">Date added</button>&nbsp;&nbsp;
+          <button class="sortbtn" data-sort="name">Title</button>&nbsp;&nbsp;
+          <button class="sortbtn" data-sort="year">Release year</button>&nbsp;&nbsp;
+          <button class="sortbtn" data-sort="hours">How long to beat</button>&nbsp;&nbsp;
+          <button class="sortbtn" data-sort="rating">Rating</button>
         </div>
-
+        <noscript>
+          Sorting relies on JavaScript which is currently disabled.
+        </noscript>
         <div class="gamegrid">
           {{ $targetplatform := .Params.platform | lower }}
-          {{ range sort (where .Site.Pages ".Section" "in" (slice  "games" "articles")) ".Params.game_name" "asc" }}
+          {{ range (where .Site.Pages ".Section" "in" (slice  "games" "articles")) }}
             {{ $platform := .Params.game_platform | lower }}
             {{ if eq $targetplatform $platform }}
               {{ partial "portfoliolite-block.html" . }}

themes/jefklak-creative-portfolio/static/js/codex.js

@@ -1,26 +1,17 @@
-$(function() {
-
-	function sort(by, reverse) {
+document.addEventListener("DOMContentLoaded",function() {
+	function sort(grid, by, reverse) {
 		// by year, name, hours (see portfoliolite-block)
 		let articles = [...document.querySelectorAll('.gamegrid article')]
-		const grid = document.querySelector('.gamegrid')
 		const toI = (el, prop) => {
 			const propEl = el.querySelector(`.${prop}`)
 			return propEl ? parseInt(propEl.innerHTML) : 0
 		}
 		var sorts = {
-			"year": (a, b) => {
-				return toI(a, 'year') > toI(b, 'year')
-			},
-			"name": (a, b) => {
-				return a.innerHTML.localeCompare(b.innerHTML)
-			},
-			"hours": (a, b) => {
-				return toI(a, 'hours') > toI(b, 'hours')
-			},
-			"date": (a, b) => {
-				return a.querySelector('.date').dateTime.localeCompare(b.querySelector('.date').dateTime)
-			}
+			"year": (a, b) => toI(a, 'year') > toI(b, 'year'),
+			"name": (a, b) => a.innerHTML.localeCompare(b.innerHTML),
+			"hours": (a, b) =>toI(a, 'hours') > toI(b, 'hours'),
+			"date": (a, b) => a.querySelector('.date').dateTime.localeCompare(b.querySelector('.date').dateTime),
+			"rating": (a, b) => toI(a, 'rating') > toI(b, 'rating')
 		}
 
 		articles.sort(sorts[by])
@@ -29,50 +20,48 @@ $(function() {
 		grid.append(...articles)
 	}
 	function toggleSort() {
-		$('.sortbtn').click(function() {
-			const me = $(this)
-			$('button.sorted').removeClass('sorted')
-			$('button.sorted-asc').removeClass('sorted-asc')
-			$('button.sorted-desc').removeClass('sorted-desc')
-			me.addClass('sorted')
-			const rev = me.data('sorted') === 'asc' ? 'desc' : 'asc'
-			me.data('sorted', rev)
+		const grid = document.querySelector('.gamegrid')
+		const sortbtns = [...document.querySelectorAll('.sortbtn')]
 
-			sort(me.data('sort'), rev === 'desc')
-			me.addClass(`sorted-${rev}`)
-		})		
+		sortbtns.forEach(sortbtn => {
+			sortbtn.addEventListener('click', function() {
+				sortbtns.forEach(btn => btn.className = 'sortbtn')
+				sortbtn.classList.add('sorted')
+
+				const rev = sortbtn.dataset.sorted === 'asc' ? 'desc' : 'asc'
+				sortbtn.dataset.sorted = rev
+
+				sort(grid, sortbtn.dataset.sort, rev === 'desc')
+				sortbtn.classList.add(`sorted-${rev}`)
+			})
+		})
 	}
 	toggleSort();
 
-	var disableResponsiveImagesForInlineLis = function() {
-		$('li img.img-responsive').each(function() {
-			$(this).removeClass('img-responsive');
-			$(this).css('border', 'none');
-		});
-	};
-	disableResponsiveImagesForInlineLis();
-
 	const box = new SimpleLightbox('.lbox', { /* options */ });
 
 	function enableSidebarMenuForMobile() {
-        $('[data-toggle="offcanvas"]').click(function () {
-            $('.row-offcanvas').toggleClass('active')
+        document.querySelector('[data-toggle="offcanvas"]').addEventListener('click', function () {
+            document.querySelector('.row-offcanvas').classList.toggle('active')
         });
 	}
 	enableSidebarMenuForMobile();
 
 	function scrollThenFixSidebar() {
-		const mainHeight = $('main div').height()
-		const sidebarHeight = $('.sidebar-content').height()
-		const maxHeight =  sidebarHeight - $(window).height()
+		const mainHeight = document.querySelector('main div').clientHeight
+		const sidebarHeight = document.querySelector('.sidebar-content').clientHeight
+		const maxHeight =  sidebarHeight - window.innerHeight
 		if(mainHeight < sidebarHeight) return
 
-		$(document).on('scroll', function(e) {
-		    const s = document.scrollingElement.scrollTop || $('html').scrollTop() || $('body').scrollTop();
+		document.addEventListener('scroll', function(e) {
+		    const s = document.scrollingElement.scrollTop || document.querySelector('html').scrollTop || document.querySelector('body').scrollTop;
+		    const content = document.querySelector('.sidebar-content')
 			if(s > maxHeight) {
-				$('.sidebar-content').addClass('sidebar-fixed').removeClass('sidebar-scrolling');
+				content.classList.add('sidebar-fixed')
+				content.classList.remove('sidebar-scrolling')
 			} else {
-				$('.sidebar-content').addClass('sidebar-scrolling').removeClass('sidebar-fixed');
+				content.classList.add('sidebar-scrolling')
+				content.classList.remove('sidebar-fixed')
 			}
 		})
 	}
@@ -80,36 +69,30 @@ $(function() {
 
 	var addTargetBlankToExternalLinks = function() {
 		var host = (new URL(window.location.href)).hostname;
-		$('article a').each(function() {
-			var me = $(this);
-			var url = me.attr('href');
+		[...document.querySelectorAll('article a')].forEach(function(a) {
+			var url = a.getAttribute('href')
 			if(url && url.startsWith('http') && url.indexOf(host) === -1) {
-				me.attr('target', '_blank').addClass('external');
-				me.attr('rel', 'noopener');
+				a.setAttribute('target', '_blank')
+				a.setAttribute('rel', 'noopener')
+				a.classList.add('external')
 			}
 		})
 	};
 	addTargetBlankToExternalLinks();
 
-	var enableScrollToTopOnInternalLinks = function() {
-		$('#totop').click(function() {
-		    $("html, body").animate({ scrollTop: 0 }, "slow");
-		});
-
-		$('a.internal').click(function() {
-			$($(this).data('to')).animate({ scrollTop: 0 }, "slow");
-		});
-	};
-
 	var addRandomImageToSideBarMenus = function() {
 		var rand = Math.floor(Math.random() * 10) + 1;
-		$('.sidebar-menu li').mouseenter(function() {
-			$(this).css('background', '#f1f4dd url(/img/random/' + rand + '.gif) no-repeat right');
-		}).mouseleave(function() {
-			$(this).css('background', 'none');
-		}).click(function() {
-			location.href = $(this).find('a').attr('href');
-		});
+		[...document.querySelectorAll('.sidebar-menu li')].forEach(function(el) {
+			el.addEventListener('mouseenter', function() {
+				el.style.background = `#f1f4dd url(/img/random/${rand}.gif) no-repeat right`
+			})
+			el.addEventListener('mouseleave', function() {
+				el.style.background = 'none'
+			})
+			el.addEventListener('click', function() {
+				location.href = el.querySelector('a').href
+			})
+		})
 	};
 
 	var obfuscateMail = function() {
@@ -136,7 +119,6 @@ $(function() {
 	}
 
 	addRandomImageToSideBarMenus();
-	enableScrollToTopOnInternalLinks();
 	obfuscateMail();
 	makeTootClickable();
 });