Compare commits
4 Commits
041b35094a
...
e436b2a8d9
| Author | SHA1 | Date |
|---|---|---|
 Síle Ekaterin Liszka
|
e436b2a8d9
|
|
|
Síle Ekaterin Liszka
|
38f1a995d1
|
|
|
Síle Ekaterin Liszka
|
eca4da86c3
|
|
|
Síle Ekaterin Liszka
|
09cefeb12d
|
|
|
@ -1,5 +1,6 @@
|
|||
config/_default/params.toml
|
||||
public/*
|
||||
resources/
|
||||
.hugo_build.lock
|
||||
.*.sw?
|
||||
.DS_Store
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
.theme--dark .body,
|
||||
.theme--dark .post,
|
||||
.theme--dark .nav__list {
|
||||
background-color: #2C1438;
|
||||
}
|
||||
.theme--dark .post__content a:link,
|
||||
.theme--dark .post__content a:visited {
|
||||
color: #BAB1ED;
|
||||
}
|
||||
.theme--dark a:hover,
|
||||
.theme--dark .post__content a:hover {
|
||||
color: hsl(249, 62%, 61%);
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inclusive Sans';
|
||||
src: url(/font/InclusiveSans-Regular.ttf);
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inclusive Sans';
|
||||
src: url('/font/InclusiveSans-Italic.ttf');
|
||||
font-style: italic;
|
||||
}
|
||||
body {
|
||||
font-family: 'Inclusive Sans', sans-serif;
|
||||
font-size: 16pt;
|
||||
}
|
||||
|
|
@ -1,9 +1,45 @@
|
|||
baseURL = 'https://vulpine.house'
|
||||
languageCode = 'en-us'
|
||||
title = 'The Fridge'
|
||||
author = 'Síle Ekaterin Liszka'
|
||||
theme = 'clean'
|
||||
title = "A Vulpine House"
|
||||
theme = 'anatole'
|
||||
disableKinds = ['RSS', 'sitemap']
|
||||
|
||||
[Params]
|
||||
Fediverse = ['https://social.treehouse.systems/@VulpineAmethyst']
|
||||
[params]
|
||||
title = "A Vulpine House"
|
||||
author = 'Síle Ekaterin Liszka'
|
||||
info = 'Ace arctic fox kit'
|
||||
description = "A vulpine system's den"
|
||||
displayMode = 'dark'
|
||||
profilePicture = 'img/logo.png'
|
||||
disableThemeSwitcher = true
|
||||
singleDateFormat = '2006 Jan 2'
|
||||
indexDateFormat = '2006 Jan 2'
|
||||
listDateFormat = '2 Jan'
|
||||
customCss = ["css/custom.css"]
|
||||
contentRatio = 0.65
|
||||
mainSections = []
|
||||
|
||||
[[params.socialIcons]]
|
||||
title = 'Mastodon'
|
||||
icon = 'fab fa-mastodon'
|
||||
url = 'https://social.treehouse.systems/@VulpineAmethyst'
|
||||
|
||||
[[params.socialIcons]]
|
||||
title = 'Gitea'
|
||||
icon = 'fab fa-git'
|
||||
url = 'https://gitea.treehouse.systems/VulpineAmethyst'
|
||||
|
||||
[[params.socialIcons]]
|
||||
title = 'Discord'
|
||||
icon = 'fab fa-discord'
|
||||
url = 'https://discordapp.com/users/165317317138317313'
|
||||
|
||||
[[params.socialIcons]]
|
||||
title = 'Tumblr'
|
||||
icon = 'fab fa-tumblr'
|
||||
url = 'https://vulpineamethyst.tumblr.com/'
|
||||
|
||||
[[params.socialIcons]]
|
||||
title = 'AO3'
|
||||
icon = 'fas fa-book-open-reader'
|
||||
url = 'https://archiveofourown.org/users/VulpineAmethyst/'
|
||||
|
|
|
|||
|
|
@ -2,53 +2,62 @@
|
|||
identifier = 'home'
|
||||
name = 'Home'
|
||||
url = '/'
|
||||
weight = 1
|
||||
weight = 10
|
||||
|
||||
[[main]]
|
||||
identifier = 'blog'
|
||||
name = 'Blog'
|
||||
url = 'https://acefox.life'
|
||||
weight = 2
|
||||
weight = 20
|
||||
|
||||
[[main]]
|
||||
identifier = 'about'
|
||||
name = 'About'
|
||||
url = '/about'
|
||||
weight = 3
|
||||
weight = 30
|
||||
|
||||
[[main]]
|
||||
identifier = 'projects'
|
||||
name = 'Projects'
|
||||
weight = 40
|
||||
|
||||
[[main]]
|
||||
identifier = 'programs'
|
||||
name = 'Programs'
|
||||
url = '/programs'
|
||||
weight = 4
|
||||
weight = 41
|
||||
parent = 'projects'
|
||||
|
||||
[[main]]
|
||||
identifier = 'translations'
|
||||
name = 'Translations'
|
||||
url = '/translations'
|
||||
weight = 5
|
||||
weight = 42
|
||||
parent = 'projects'
|
||||
|
||||
[[main]]
|
||||
identifier = 'recipes'
|
||||
name = 'Recipes'
|
||||
url = '/recipe'
|
||||
weight = 6
|
||||
weight = 43
|
||||
parent = 'projects'
|
||||
|
||||
[[main]]
|
||||
identifier = 'commissions'
|
||||
name = 'Commissions'
|
||||
url = '/commissions'
|
||||
weight = 7
|
||||
weight = 44
|
||||
parent = 'projects'
|
||||
|
||||
[[main]]
|
||||
identifier = 'system'
|
||||
name = 'System Reference'
|
||||
url = '/system'
|
||||
weight = 8
|
||||
weight = 50
|
||||
|
||||
[[main]]
|
||||
identifier = 'links'
|
||||
name = 'Links'
|
||||
url = '/links'
|
||||
weight = 9
|
||||
weight = 60
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Home
|
||||
description: A deafblind, autistic/ADHD fox family's den.
|
||||
description: A deafblind, autistic/ADHD fox system's den.
|
||||
---
|
||||
Welcome! This site is a handy collection of links to my various accounts, as well as information about us and our endeavors.
|
||||
|
||||
We are primarily nonverbal; we prefer to communicate in text unless verbal communication is required. We are deafblind, which is maintained in all of our facets; we use hearing aids and a white cane where possible.
|
||||
We are primarily non-speaking; we prefer to communicate in text unless verbal communication is required. We are deafblind, which is maintained in all of our facets. We wear hearing aids, and we are a power chair user. If we need to walk, which we are capable of doing for short distances, we navigate with a white cane.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: py-xbc
|
||||
---
|
||||
py-xbc is a Python library for reading and writing documents written in the 'eXtra Boot Configuration' format used by the Linux kernel. It can be found on [PyPI] and the [Treehouse Gitea].
|
||||
|
||||
[PyPI]: https://pypi.org/project/py-xbc/
|
||||
[Treehouse Gitea]: https://gitea.treehouse.systems/VulpineAmethyst/py-xbc
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
{{ define "main" }}
|
||||
<div
|
||||
class="post {{ with .Site.Params.doNotLoadAnimations }}
|
||||
.
|
||||
{{ else }}
|
||||
animated fadeInDown
|
||||
{{ end }}"
|
||||
>
|
||||
{{ if .Params.thumbnail }}
|
||||
<div class="post__thumbnail-wrapper">
|
||||
<img class="post__thumbnail" src="{{ .Params.thumbnail | relURL }}" alt="Thumbnail image" />
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="post__content">
|
||||
<h1>{{ title .Title }}</h1>
|
||||
{{ if or (eq .Type "post") (eq .Type .Site.Params.postSectionName) }}
|
||||
<ul class="post__meta">
|
||||
<li class="post__meta-item">
|
||||
<em class="fas fa-calendar-day post__meta-icon"></em>
|
||||
<span class="post__meta-text"
|
||||
>{{ if isset .Site.Params "singledateformat" }}
|
||||
{{ if .Site.Params.localizedDates }}
|
||||
{{ time.Format .Site.Params.singleDateFormat .Date }}
|
||||
{{ else }}
|
||||
{{ .Date.Format .Site.Params.singleDateFormat }}
|
||||
{{ end }}
|
||||
|
||||
{{ else }}
|
||||
{{ if .Site.Params.localizedDates }}
|
||||
{{ time.Format "Mon, Jan 2, 2006" .Date }}
|
||||
{{ else }}
|
||||
{{ .Date.Format "Mon, Jan 2, 2006" }}
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
</span>
|
||||
</li>
|
||||
<li class="post__meta-item">
|
||||
<em class="fas fa-stopwatch post__meta-icon"></em>
|
||||
<span class="post__meta-text">{{ i18n "reading_time" .ReadingTime }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
{{ end }}
|
||||
|
||||
{{- partial "expirationnote.html" . -}}
|
||||
|
||||
{{- if (eq .Params.toc true) -}}
|
||||
{{- partial "toc.html" . -}}
|
||||
{{- end -}}
|
||||
|
||||
{{ .Content }}
|
||||
|
||||
<ul>{{ range .Pages.ByTitle }}
|
||||
<li><a href="{{.Permalink}}">{{.Title}}</a></li>{{ end }}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="post__footer">
|
||||
{{ with .Page.Params.Categories }}
|
||||
{{ partial "taxonomy/categories.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ with .Page.Params.Tags }}
|
||||
{{ partial "taxonomy/tags.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ if and (or (eq .Type "post") (eq .Type .Site.Params.postSectionName)) (ne .Page.Params.disableComments true) }}
|
||||
{{- if .Site.DisqusShortname -}}
|
||||
<div id="comment">
|
||||
<h2>{{ i18n "comments" }}</h2>
|
||||
{{ template "_internal/disqus.html" . }}
|
||||
</div>
|
||||
{{- end -}}
|
||||
{{- if .Site.Params.utterances.repo -}}
|
||||
<div id="comment">
|
||||
<h2>{{ i18n "comments" }}</h2>
|
||||
{{ partial "comments/utterances.html" . }}
|
||||
</div>
|
||||
{{- end -}}
|
||||
{{- if .Site.Params.giscus.repo -}}
|
||||
<div id="comment">
|
||||
<h2>{{ i18n "comments" }}</h2>
|
||||
{{ partial "comments/giscus.html" . }}
|
||||
</div>
|
||||
{{- end -}}
|
||||
{{- if .Site.Params.CommentoURL -}}
|
||||
<div id="comment">
|
||||
<h2>{{ i18n "comments" }}</h2>
|
||||
{{ partial "comments/commento.html" . }}
|
||||
</div>
|
||||
{{- end -}}
|
||||
{{- if .Site.Params.gitalk.repo -}}
|
||||
<div id="comment">
|
||||
<h2>{{ i18n "comments" }}</h2>
|
||||
{{ partial "comments/gitalk.html" . }}
|
||||
</div>
|
||||
{{- end -}}
|
||||
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1 @@
|
|||
</table>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<table>
|
||||
<thead><tr>
|
||||
<th>Lang</th><th>Text</th>
|
||||
</tr></thead>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<tr>
|
||||
<td colspan="2">{{ .Get "name" }} ({{ .Get "jpname" }})</td>
|
||||
</tr><tr>
|
||||
<th>Japanese</th><td>{{ .Get "japanese" }} {{ .Get "jpname" }}!</td>
|
||||
</tr><tr>
|
||||
<th>Romaji</th><td>{{ .Get "romaji" }}</td>
|
||||
</tr><tr>
|
||||
<th>Síle</th><td>{{ .Get "sheila" }} {{ .Get "name" }}!</td>
|
||||
</tr>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<a href="{{ .Get "href" }}" rel="me">{{ .Get "text" }}</a>
|
||||
Binary file not shown.
Binary file not shown.
|
|
@ -16,11 +16,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>{{ range .Site.Menus.main }}
|
||||
<li><a href="{{ .URL | relURL }}">{{ .Name }}</a></li>{{ end }}
|
||||
</ul>
|
||||
</nav>
|
||||
{{ partial "nav.html" . }}
|
||||
</header>
|
||||
{{ block "main" . }} {{ end }}
|
||||
<hr/>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
<script src="/js/clicky-menus.js"></script>
|
||||
<nav id="navigation">
|
||||
<ul class="clicky-menu no-js">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
<li><a href="https://acefox.life" rel="me">Blog</a></li>
|
||||
<li><a href="#">Projects</a>
|
||||
<ul>
|
||||
<li><a href="/commissions">Art</a></li>
|
||||
<li><a href="/programs">Programs</a></li>
|
||||
<li><a href="/recipe">Recipes</a></li>
|
||||
<li><a href="/translations">Translations</a></li>
|
||||
</ul></li>
|
||||
<li><a href="/system">System Reference</a></li>
|
||||
<li><a href="/links">Links</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -2,6 +2,9 @@ html {
|
|||
font-family: var(--font);
|
||||
}
|
||||
article, hr, footer {
|
||||
max-width: 40em;
|
||||
margin: 0 auto;
|
||||
width: 48em;
|
||||
margin-left: var(--char-width);
|
||||
}
|
||||
article p {
|
||||
text-indent: calc(var(--char-width) * 5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
:root {
|
||||
--font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||
--font-size: 14pt;
|
||||
/* for whatever reason, this is how wide a character is. 1em is wider. */
|
||||
--char-width: calc(3em / 5);
|
||||
|
||||
/* colours */
|
||||
--normal-red: #B00;
|
||||
|
|
@ -20,25 +22,29 @@
|
|||
--bright-purple: #F5F;
|
||||
--bright-black: #555;
|
||||
--bright-white: #FFF;
|
||||
|
||||
--accent-main: #BAB1ED;
|
||||
--accent-second: #639;
|
||||
|
||||
--terminal-fg: var(--normal-white);
|
||||
--terminal-bg: var(--normal-black);
|
||||
--link-normal: var(--normal-cyan);
|
||||
--link-active: var(--normal-red);
|
||||
--link-visited: var(--normal-cyan);
|
||||
--terminal-fg: #B5ABBF;
|
||||
--terminal-bg: #2C1438;
|
||||
--link-normal: var(--accent-main);
|
||||
--link-active: var(--accent-second);
|
||||
--bold: var(--bright-white);
|
||||
--italic: var(--normal-purple);
|
||||
--italic: var(--normal-cyan);
|
||||
}
|
||||
body {
|
||||
html {
|
||||
background-color: var(--terminal-bg);
|
||||
color: var(--terminal-fg);
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: var(--font-size);
|
||||
font-weight: normal;
|
||||
color: var(--bright-white);
|
||||
color: var(--accent-main);
|
||||
}
|
||||
b, strong {
|
||||
color: var(--bold);
|
||||
|
|
@ -49,55 +55,78 @@ i, em {
|
|||
font-style: normal;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:link {
|
||||
a:link, a:visited {
|
||||
color: var(--link-normal);
|
||||
}
|
||||
a:hover, a:active, a:visited:hover {
|
||||
color: var(--link-active);
|
||||
color: var(--terminal-bg);
|
||||
background-color: var(--terminal-fg);
|
||||
}
|
||||
a:visited {
|
||||
color: var(--link-visited);
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 1ex;
|
||||
}
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
}
|
||||
nav a:link, nav a:visited, nav {
|
||||
color: var(--normal-black);
|
||||
background-color: var(--normal-white);
|
||||
nav button {
|
||||
font-family: var(--font);
|
||||
font-size: var(--font-size);
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
nav a:hover, nav a:active, nav a:visited:hover {
|
||||
nav a:link, nav a:visited, nav, nav button {
|
||||
color: var(--bright-white);
|
||||
background-color: var(--normal-black);
|
||||
background-color: var(--accent-second);
|
||||
}
|
||||
nav a:hover, nav a:active, nav a:visited:hover, nav button:hover {
|
||||
color: var(--accent-second);
|
||||
background-color: var(--normal-white);
|
||||
}
|
||||
nav > ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
padding: 0;
|
||||
}
|
||||
nav li {
|
||||
display: inline-block;
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
article, hr, footer {
|
||||
margin: 0 auto;
|
||||
margin: 0 var(--char-width);
|
||||
padding: 0;
|
||||
margin-top: 2ex;
|
||||
margin-bottom: 2ex;
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
}
|
||||
nav li > ul {
|
||||
position: absolute;
|
||||
padding: 12px 0;
|
||||
background-color: var(--accent-second);
|
||||
visibility: hidden;
|
||||
}
|
||||
nav li > ul li {
|
||||
display: block;
|
||||
}
|
||||
nav li:hover.no-js > ul {
|
||||
visibility: visible;
|
||||
}
|
||||
nav li:focus-within.no-js > ul { /* separate from above for older browsers. */
|
||||
visibility: visible;
|
||||
}
|
||||
/* JavaScript menus */
|
||||
nav ul[aria-hidden="false"] {
|
||||
visibility: visible;
|
||||
}
|
||||
article {
|
||||
margin-top: 2.5em;
|
||||
}
|
||||
article ul {
|
||||
list-style-type: '- ';
|
||||
padding-left: 0;
|
||||
margin-left: 3em;
|
||||
margin-left: calc(var(--char-width) * 5);
|
||||
}
|
||||
article ol {
|
||||
padding-left: 3em;
|
||||
padding-left: calc(var(--char-width) * 5);
|
||||
}
|
||||
article li {
|
||||
margin-bottom: 2ex;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,166 @@
|
|||
/**
|
||||
* Object for creating click-triggered navigation submenus
|
||||
*
|
||||
* Thanks for the inspiration:
|
||||
* - https://www.lottejackson.com/learning/a-reusable-javascript-toggle-pattern
|
||||
* - https://codepen.io/lottejackson/pen/yObQRM
|
||||
*
|
||||
* from https://github.com/mrwweb/clicky-menus
|
||||
*/
|
||||
|
||||
( function() {
|
||||
'use strict';
|
||||
|
||||
const ClickyMenus = function( menu ) {
|
||||
// DOM element(s)
|
||||
const container = menu.parentElement;
|
||||
let currentMenuItem,
|
||||
i,
|
||||
len;
|
||||
|
||||
this.init = function() {
|
||||
menuSetup();
|
||||
document.addEventListener( 'click', closeOpenMenu );
|
||||
};
|
||||
|
||||
/*===================================================
|
||||
= Menu Open / Close Functions =
|
||||
===================================================*/
|
||||
function toggleOnMenuClick( e ) {
|
||||
const button = e.currentTarget;
|
||||
|
||||
// close open menu if there is one
|
||||
if ( currentMenuItem && button !== currentMenuItem ) {
|
||||
toggleSubmenu( currentMenuItem );
|
||||
}
|
||||
|
||||
toggleSubmenu( button );
|
||||
}
|
||||
|
||||
function toggleSubmenu( button ) {
|
||||
const submenu = document.getElementById( button.getAttribute( 'aria-controls' ) );
|
||||
|
||||
if ( 'true' === button.getAttribute( 'aria-expanded' ) ) {
|
||||
button.setAttribute( 'aria-expanded', false );
|
||||
submenu.setAttribute( 'aria-hidden', true );
|
||||
currentMenuItem = false;
|
||||
} else {
|
||||
button.setAttribute( 'aria-expanded', true );
|
||||
submenu.setAttribute( 'aria-hidden', false );
|
||||
preventOffScreenSubmenu( submenu );
|
||||
currentMenuItem = button;
|
||||
}
|
||||
}
|
||||
|
||||
function preventOffScreenSubmenu( submenu ) {
|
||||
const screenWidth = window.innerWidth ||
|
||||
document.documentElement.clientWidth ||
|
||||
document.body.clientWidth,
|
||||
parent = submenu.offsetParent,
|
||||
menuLeftEdge = parent.getBoundingClientRect().left,
|
||||
menuRightEdge = menuLeftEdge + submenu.offsetWidth;
|
||||
|
||||
if ( menuRightEdge + 32 > screenWidth ) { // adding 32 so it's not too close
|
||||
submenu.classList.add( 'sub-menu--right' );
|
||||
}
|
||||
}
|
||||
|
||||
function closeOnEscKey( e ) {
|
||||
if ( 27 === e.keyCode ) {
|
||||
// we're in a submenu item
|
||||
if ( null !== e.target.closest( 'ul[aria-hidden="false"]' ) ) {
|
||||
currentMenuItem.focus();
|
||||
toggleSubmenu( currentMenuItem );
|
||||
|
||||
// we're on a parent item
|
||||
} else if ( 'true' === e.target.getAttribute( 'aria-expanded' ) ) {
|
||||
toggleSubmenu( currentMenuItem );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function closeOpenMenu( e ) {
|
||||
if ( currentMenuItem && ! e.target.closest( '#' + container.id ) ) {
|
||||
toggleSubmenu( currentMenuItem );
|
||||
}
|
||||
}
|
||||
|
||||
/*===========================================================
|
||||
= Modify Menu Markup & Bind Listeners =
|
||||
=============================================================*/
|
||||
function menuSetup() {
|
||||
menu.classList.remove( 'no-js' );
|
||||
const submenuSelector = 'clickySubmenuSelector' in menu.dataset ? menu.dataset.clickySubmenuSelector : 'ul';
|
||||
|
||||
menu.querySelectorAll( submenuSelector ).forEach( ( submenu ) => {
|
||||
const menuItem = submenu.parentElement;
|
||||
|
||||
if ( 'undefined' !== typeof submenu ) {
|
||||
const button = convertLinkToButton( menuItem );
|
||||
|
||||
setUpAria( submenu, button );
|
||||
|
||||
// bind event listener to button
|
||||
button.addEventListener( 'click', toggleOnMenuClick );
|
||||
menu.addEventListener( 'keyup', closeOnEscKey );
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
/**
|
||||
* Why do this? See https://justmarkup.com/articles/2019-01-21-the-link-to-button-enhancement/
|
||||
*
|
||||
* @param {HTMLElement} menuItem An element representing a link to be converted to a button
|
||||
*/
|
||||
function convertLinkToButton( menuItem ) {
|
||||
const link = menuItem.getElementsByTagName( 'a' )[ 0 ],
|
||||
linkHTML = link.innerHTML,
|
||||
linkAtts = link.attributes,
|
||||
button = document.createElement( 'button' );
|
||||
|
||||
if ( null !== link ) {
|
||||
// copy button attributes and content from link
|
||||
button.innerHTML = linkHTML.trim();
|
||||
for ( i = 0, len = linkAtts.length; i < len; i++ ) {
|
||||
const attr = linkAtts[ i ];
|
||||
if ( 'href' !== attr.name ) {
|
||||
button.setAttribute( attr.name, attr.value );
|
||||
}
|
||||
}
|
||||
|
||||
menuItem.replaceChild( button, link );
|
||||
}
|
||||
|
||||
return button;
|
||||
}
|
||||
|
||||
function setUpAria( submenu, button ) {
|
||||
const submenuId = submenu.getAttribute( 'id' );
|
||||
|
||||
let id;
|
||||
if ( null === submenuId ) {
|
||||
id = button.textContent.trim().replace( /\s+/g, '-' ).toLowerCase() + '-submenu';
|
||||
} else {
|
||||
id = submenuId + '-submenu';
|
||||
}
|
||||
|
||||
// set button ARIA
|
||||
button.setAttribute( 'aria-controls', id );
|
||||
button.setAttribute( 'aria-expanded', false );
|
||||
|
||||
// set submenu ARIA
|
||||
submenu.setAttribute( 'id', id );
|
||||
submenu.setAttribute( 'aria-hidden', true );
|
||||
}
|
||||
};
|
||||
|
||||
/* Create a ClickMenus object and initiate menu for any menu with .clicky-menu class */
|
||||
document.addEventListener( 'DOMContentLoaded', function() {
|
||||
const menus = document.querySelectorAll( '.clicky-menu' );
|
||||
|
||||
menus.forEach( ( menu ) => {
|
||||
const clickyMenu = new ClickyMenus( menu );
|
||||
clickyMenu.init();
|
||||
} );
|
||||
} );
|
||||
}() );
|
||||
Loading…
Reference in New Issue