2023-11-28 02:07:29 +00:00
const header _links = document . getElementById ( "header-links" ) ;
const hamburger = document . getElementById ( "header-links-toggle" ) ;
2023-10-02 06:30:54 +01:00
function type _out ( e ) {
const text = e . innerText ;
const original = e . innerHTML ;
e . innerText = "" ;
const delay = 25 ;
let chars = 0 ;
function insert _char ( character , parent ) {
const c = document . createElement ( "span" ) ;
c . innerText = character ;
parent . appendChild ( c ) ;
c . classList . add ( "newchar" ) ;
}
function normalize ( ) {
e . innerHTML = original ;
}
function increment _char ( ) {
const newchar = text . substring ( chars - 1 , chars ) ;
insert _char ( newchar , e ) ;
chars ++ ;
if ( chars <= text . length ) {
setTimeout ( increment _char , delay ) ;
} else {
setTimeout ( normalize , 250 ) ;
}
}
increment _char ( ) ;
}
function fill _list ( list ) {
2023-10-15 03:08:45 +01:00
const items = list . querySelectorAll ( "li a, li span" ) ;
2023-10-02 06:30:54 +01:00
items . innerText = "" ;
const delay = 100 ;
items . forEach ( ( item , iter ) => {
item . style . animationDelay = ` ${ iter * delay } ms ` ;
item . style . animationPlayState = "playing" ;
} ) ;
}
2023-10-15 04:23:53 +01:00
[ ... document . querySelectorAll ( "h1, h2, h3, h4, h5, h6" ) ]
. filter ( ( e ) => e . innerText != "" )
. forEach ( ( e ) => {
type _out ( e ) ;
} ) ;
[ ... document . querySelectorAll ( "ol, ul" ) ]
. filter ( ( e ) => e . innerText != "" )
. forEach ( ( e ) => {
fill _list ( e ) ;
} ) ;
2023-11-28 02:07:29 +00:00
function toggle _header _links ( ) {
header _links . classList . toggle ( "open" ) ;
}
document . addEventListener ( "click" , event => {
if ( ! header _links . contains ( event . target ) && ! hamburger . contains ( event . target ) ) {
header _links . classList . remove ( "open" ) ;
}
} ) ;