get rid of jquery dependency
This commit is contained in:
parent
d3be009ca0
commit
d9f6dc042f
|
@ -3,7 +3,6 @@ title: "Wonderland Dizzy: Better Left Undiscovered?"
|
||||||
date: 2022-01-26
|
date: 2022-01-26
|
||||||
score: 2
|
score: 2
|
||||||
howlongtobeat_id: undefined
|
howlongtobeat_id: undefined
|
||||||
howlongtobeat_hrs: undefined
|
|
||||||
game_name: "Wonderland Dizzy"
|
game_name: "Wonderland Dizzy"
|
||||||
game_release_year: 2015
|
game_release_year: 2015
|
||||||
game_developer: 'The Oliver Twins'
|
game_developer: 'The Oliver Twins'
|
||||||
|
|
|
@ -95,14 +95,6 @@ button
|
||||||
color: white !important
|
color: white !important
|
||||||
border-color: darkgrey !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
|
.small-navbar button
|
||||||
position: fixed
|
position: fixed
|
||||||
|
|
|
@ -24,3 +24,15 @@
|
||||||
.gamegridcontrols
|
.gamegridcontrols
|
||||||
background: scale-color($bglight, $lightness: -10%)
|
background: scale-color($bglight, $lightness: -10%)
|
||||||
padding: 0.7rem
|
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: " ▲ "
|
||||||
|
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
<footer>
|
<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>
|
</footer>
|
||||||
|
|
|
@ -12,9 +12,16 @@
|
||||||
<h2>Game Codex »</h2>
|
<h2>Game Codex »</h2>
|
||||||
|
|
||||||
<div class="gamegridcontrols">
|
<div class="gamegridcontrols">
|
||||||
Sort by: <button class="sortbtn sorted sorted-asc" data-sort="date">Date added</button> <button class="sortbtn" data-sort="name">Title</button> <button class="sortbtn" data-sort="year">Release year</button> <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>
|
||||||
|
<button class="sortbtn" data-sort="name">Title</button>
|
||||||
|
<button class="sortbtn" data-sort="year">Release year</button>
|
||||||
|
<button class="sortbtn" data-sort="hours">How long to beat</button>
|
||||||
|
<button class="sortbtn" data-sort="rating">Rating</button>
|
||||||
</div>
|
</div>
|
||||||
|
<noscript>
|
||||||
|
Sorting relies on JavaScript which is currently disabled.
|
||||||
|
</noscript>
|
||||||
<div class="gamegrid">
|
<div class="gamegrid">
|
||||||
{{ range .Pages }}
|
{{ range .Pages }}
|
||||||
{{ partial "portfoliolite-block.html" . }}
|
{{ partial "portfoliolite-block.html" . }}
|
||||||
|
|
|
@ -3,7 +3,9 @@
|
||||||
<p>
|
<p>
|
||||||
{{ $score := $.Params.score }}
|
{{ $score := $.Params.score }}
|
||||||
{{ if not $simplescore }}
|
{{ 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 }}
|
{{ end }}
|
||||||
{{ range after 0 (seq $score)}}
|
{{ range after 0 (seq $score)}}
|
||||||
<img src="/img/random/4.gif" class="score score-on" title="Score: {{ $score }}/5" />
|
<img src="/img/random/4.gif" class="score score-on" title="Score: {{ $score }}/5" />
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
<script defer src="{{ "js/scrollingelement.js" | absURL }}"></script>
|
<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 defer src='/js/simple-lightbox.min.js'></script>
|
||||||
<script src="{{ "js/codex.js" | absURL }}"></script>
|
<script src="{{ "js/codex.js" | absURL }}"></script>
|
||||||
|
|
|
@ -20,12 +20,19 @@
|
||||||
<h2>Games »</h2>
|
<h2>Games »</h2>
|
||||||
|
|
||||||
<div class="gamegridcontrols">
|
<div class="gamegridcontrols">
|
||||||
Sort by: <button class="sortbtn sorted sorted-asc" data-sort="date">Date added</button> <button class="sortbtn" data-sort="name">Title</button> <button class="sortbtn" data-sort="year">Release year</button> <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>
|
||||||
|
<button class="sortbtn" data-sort="name">Title</button>
|
||||||
|
<button class="sortbtn" data-sort="year">Release year</button>
|
||||||
|
<button class="sortbtn" data-sort="hours">How long to beat</button>
|
||||||
|
<button class="sortbtn" data-sort="rating">Rating</button>
|
||||||
</div>
|
</div>
|
||||||
|
<noscript>
|
||||||
|
Sorting relies on JavaScript which is currently disabled.
|
||||||
|
</noscript>
|
||||||
<div class="gamegrid">
|
<div class="gamegrid">
|
||||||
{{ $targetplatform := .Params.platform | lower }}
|
{{ $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 }}
|
{{ $platform := .Params.game_platform | lower }}
|
||||||
{{ if eq $targetplatform $platform }}
|
{{ if eq $targetplatform $platform }}
|
||||||
{{ partial "portfoliolite-block.html" . }}
|
{{ partial "portfoliolite-block.html" . }}
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -1,26 +1,17 @@
|
||||||
$(function() {
|
document.addEventListener("DOMContentLoaded",function() {
|
||||||
|
function sort(grid, by, reverse) {
|
||||||
function sort(by, reverse) {
|
|
||||||
// by year, name, hours (see portfoliolite-block)
|
// by year, name, hours (see portfoliolite-block)
|
||||||
let articles = [...document.querySelectorAll('.gamegrid article')]
|
let articles = [...document.querySelectorAll('.gamegrid article')]
|
||||||
const grid = document.querySelector('.gamegrid')
|
|
||||||
const toI = (el, prop) => {
|
const toI = (el, prop) => {
|
||||||
const propEl = el.querySelector(`.${prop}`)
|
const propEl = el.querySelector(`.${prop}`)
|
||||||
return propEl ? parseInt(propEl.innerHTML) : 0
|
return propEl ? parseInt(propEl.innerHTML) : 0
|
||||||
}
|
}
|
||||||
var sorts = {
|
var sorts = {
|
||||||
"year": (a, b) => {
|
"year": (a, b) => toI(a, 'year') > toI(b, 'year'),
|
||||||
return toI(a, 'year') > toI(b, 'year')
|
"name": (a, b) => a.innerHTML.localeCompare(b.innerHTML),
|
||||||
},
|
"hours": (a, b) =>toI(a, 'hours') > toI(b, 'hours'),
|
||||||
"name": (a, b) => {
|
"date": (a, b) => a.querySelector('.date').dateTime.localeCompare(b.querySelector('.date').dateTime),
|
||||||
return a.innerHTML.localeCompare(b.innerHTML)
|
"rating": (a, b) => toI(a, 'rating') > toI(b, 'rating')
|
||||||
},
|
|
||||||
"hours": (a, b) => {
|
|
||||||
return toI(a, 'hours') > toI(b, 'hours')
|
|
||||||
},
|
|
||||||
"date": (a, b) => {
|
|
||||||
return a.querySelector('.date').dateTime.localeCompare(b.querySelector('.date').dateTime)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
articles.sort(sorts[by])
|
articles.sort(sorts[by])
|
||||||
|
@ -29,50 +20,48 @@ $(function() {
|
||||||
grid.append(...articles)
|
grid.append(...articles)
|
||||||
}
|
}
|
||||||
function toggleSort() {
|
function toggleSort() {
|
||||||
$('.sortbtn').click(function() {
|
const grid = document.querySelector('.gamegrid')
|
||||||
const me = $(this)
|
const sortbtns = [...document.querySelectorAll('.sortbtn')]
|
||||||
$('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)
|
|
||||||
|
|
||||||
sort(me.data('sort'), rev === 'desc')
|
sortbtns.forEach(sortbtn => {
|
||||||
me.addClass(`sorted-${rev}`)
|
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();
|
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 */ });
|
const box = new SimpleLightbox('.lbox', { /* options */ });
|
||||||
|
|
||||||
function enableSidebarMenuForMobile() {
|
function enableSidebarMenuForMobile() {
|
||||||
$('[data-toggle="offcanvas"]').click(function () {
|
document.querySelector('[data-toggle="offcanvas"]').addEventListener('click', function () {
|
||||||
$('.row-offcanvas').toggleClass('active')
|
document.querySelector('.row-offcanvas').classList.toggle('active')
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
enableSidebarMenuForMobile();
|
enableSidebarMenuForMobile();
|
||||||
|
|
||||||
function scrollThenFixSidebar() {
|
function scrollThenFixSidebar() {
|
||||||
const mainHeight = $('main div').height()
|
const mainHeight = document.querySelector('main div').clientHeight
|
||||||
const sidebarHeight = $('.sidebar-content').height()
|
const sidebarHeight = document.querySelector('.sidebar-content').clientHeight
|
||||||
const maxHeight = sidebarHeight - $(window).height()
|
const maxHeight = sidebarHeight - window.innerHeight
|
||||||
if(mainHeight < sidebarHeight) return
|
if(mainHeight < sidebarHeight) return
|
||||||
|
|
||||||
$(document).on('scroll', function(e) {
|
document.addEventListener('scroll', function(e) {
|
||||||
const s = document.scrollingElement.scrollTop || $('html').scrollTop() || $('body').scrollTop();
|
const s = document.scrollingElement.scrollTop || document.querySelector('html').scrollTop || document.querySelector('body').scrollTop;
|
||||||
|
const content = document.querySelector('.sidebar-content')
|
||||||
if(s > maxHeight) {
|
if(s > maxHeight) {
|
||||||
$('.sidebar-content').addClass('sidebar-fixed').removeClass('sidebar-scrolling');
|
content.classList.add('sidebar-fixed')
|
||||||
|
content.classList.remove('sidebar-scrolling')
|
||||||
} else {
|
} 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 addTargetBlankToExternalLinks = function() {
|
||||||
var host = (new URL(window.location.href)).hostname;
|
var host = (new URL(window.location.href)).hostname;
|
||||||
$('article a').each(function() {
|
[...document.querySelectorAll('article a')].forEach(function(a) {
|
||||||
var me = $(this);
|
var url = a.getAttribute('href')
|
||||||
var url = me.attr('href');
|
|
||||||
if(url && url.startsWith('http') && url.indexOf(host) === -1) {
|
if(url && url.startsWith('http') && url.indexOf(host) === -1) {
|
||||||
me.attr('target', '_blank').addClass('external');
|
a.setAttribute('target', '_blank')
|
||||||
me.attr('rel', 'noopener');
|
a.setAttribute('rel', 'noopener')
|
||||||
|
a.classList.add('external')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
addTargetBlankToExternalLinks();
|
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 addRandomImageToSideBarMenus = function() {
|
||||||
var rand = Math.floor(Math.random() * 10) + 1;
|
var rand = Math.floor(Math.random() * 10) + 1;
|
||||||
$('.sidebar-menu li').mouseenter(function() {
|
[...document.querySelectorAll('.sidebar-menu li')].forEach(function(el) {
|
||||||
$(this).css('background', '#f1f4dd url(/img/random/' + rand + '.gif) no-repeat right');
|
el.addEventListener('mouseenter', function() {
|
||||||
}).mouseleave(function() {
|
el.style.background = `#f1f4dd url(/img/random/${rand}.gif) no-repeat right`
|
||||||
$(this).css('background', 'none');
|
})
|
||||||
}).click(function() {
|
el.addEventListener('mouseleave', function() {
|
||||||
location.href = $(this).find('a').attr('href');
|
el.style.background = 'none'
|
||||||
});
|
})
|
||||||
|
el.addEventListener('click', function() {
|
||||||
|
location.href = el.querySelector('a').href
|
||||||
|
})
|
||||||
|
})
|
||||||
};
|
};
|
||||||
|
|
||||||
var obfuscateMail = function() {
|
var obfuscateMail = function() {
|
||||||
|
@ -136,7 +119,6 @@ $(function() {
|
||||||
}
|
}
|
||||||
|
|
||||||
addRandomImageToSideBarMenus();
|
addRandomImageToSideBarMenus();
|
||||||
enableScrollToTopOnInternalLinks();
|
|
||||||
obfuscateMail();
|
obfuscateMail();
|
||||||
makeTootClickable();
|
makeTootClickable();
|
||||||
});
|
});
|
||||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue