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
|
||||
score: 2
|
||||
howlongtobeat_id: undefined
|
||||
howlongtobeat_hrs: undefined
|
||||
game_name: "Wonderland Dizzy"
|
||||
game_release_year: 2015
|
||||
game_developer: 'The Oliver Twins'
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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: " ▲ "
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -12,9 +12,16 @@
|
|||
<h2>Game Codex »</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<noscript>
|
||||
Sorting relies on JavaScript which is currently disabled.
|
||||
</noscript>
|
||||
<div class="gamegrid">
|
||||
{{ range .Pages }}
|
||||
{{ partial "portfoliolite-block.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" />
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -20,12 +20,19 @@
|
|||
<h2>Games »</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<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" . }}
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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();
|
||||
});
|
||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue