The "on this day" section is easy to deploy, but @Jdlrobson has suggested to add a switcher/slider to create "today and tomorrow" kind of interactivity.
Description
Description
Status | Subtype | Assigned | Task | ||
---|---|---|---|---|---|
Open | Theklan | T363142 Create a grid Main Page for euwiki that anyone can copy | |||
Resolved | Jdlrobson | T364118 Add a switcher/slider so you can choose previous and next day for "on this day" section |
Event Timeline
Comment Actions
Code [[MediaWiki:Gadget-definitions]]
otd[ResourceLoader|default|categories=Azala]|otd.js
Code [[MediaWiki:Gadget-otd.js]]
(function () { const tfa = document.getElementById( 'efemerideak' ); const tfaHeading = document.getElementById( 'efemerideak-heading' ); let curYear = tfa.dataset.year; let curMonth = tfa.dataset.month; let curDay = tfa.dataset.day; function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); } function today() { const currentDate = new Date(); const day = currentDate.getDate() const month = currentDate.getMonth() + 1 const year = currentDate.getFullYear(); return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`; } function humanMonth( m ) { return [ 'urtarrila', 'otsaila', 'martxoa', 'apirila', 'maiatza', 'ekaina', 'uztaila', 'abuztua', 'iraila', 'urria', 'azaroa', 'abendua' ][ m ]; } function fetchTFA(month, day) { const url = `/api/rest_v1/page/html/Txantiloi%3A${capitalizeFirstLetter(humanMonth(month))}_${day}`; try { return fetch( url ).then((r) => r.text()).then(( html ) => { const doc = (new DOMParser()).parseFromString(html, "text/html"); return doc.querySelector( 'body' ).firstChild; } ); } catch ( error ) { return Promise.resolve( null ); } }; const tfaBody = document.getElementById( 'efemerideak-content' ); const btn = document.createElement( 'input' ); const click = () => { const date = new Date( btn.valueAsNumber ); const y = date.getFullYear(); const m = date.getMonth(); const d = date.getDate() fetchTFA( m, d ).then((element) => { tfaBody.innerHTML = ''; tfaBody.append( element ); tfaHeading.querySelector( 'span' ).textContent = `${y}ko ${humanMonth(m)}ren ${d}a`; } ); } btn.type = 'date'; btn.setAttribute( 'value', `${curYear}-${curMonth.padStart(2, '0')}-${curDay.padStart(2, '0')}` ); btn.setAttribute( 'max', today() ); tfaHeading.appendChild(btn); btn.addEventListener( 'input', click); }())
Comment Actions
Code for the Gadget-definitions
otd[ResourceLoader|hidden|default|categories=Azala]|otd.js|otd.css
Code for otd.css
#efemerideak input {display:block;}