User:Jon Harald Søby/mobilePreview

Video som viser hvordan skriptet funker

mobilePreview er et brukerskript som lar deg forhåndsvise mobilversjonen av en hvilken som helst wikiside med et elegant og intuitivt grensesnitt. Det bruker CSS-variabler for å la brukerne tilpasse forskjellige deler av forhåndsvisningen.

Formålet med skriptet er å la bidragsytere, som primært bidrar på datamaskin, enkelt se hvordan sider ser ut på mobil, som er det majoriteten av leserne bruker når de besøker Wikipedia og andre wikier.

Slå på

For å slå på brukerskriptet, legg til følgende i global.js- (på Meta) eller common.js-fila di (på hvilken som helst wiki):

// [[m:User:Jon Harald Søby/mobilePreview.js]]
mw.loader.load( '//meta.wikimedia.org/w/index.php?title=User:Jon_Harald_Søby/mobilePreview.js&action=raw&ctype=text/javascript' );

Funksjoner

Skriptet legger til ei lenke i toppfanene som viser en imitasjon av en telefonskjerm i en <iframe>-tagg. Under visse omstendigheter, som når skjermen er for liten til å vise telefonen, eller hvis wgBreakFrames er sant for siden (dette gjelder vanligvis redigeringssider og visse spesialsider), åpner den i stedet mobilforhåndsvisningen i et sprettoppvindu.

Både i iframes og sprettoppvinduer legger skriptet til håndtering av Esc-tasten, slik at man raskt kan lukke forhåndsvisningen.

Tilpasning

De fleste aspekter ved vinduet kan tilpasses ved å legge til CSS i din global.css (på Meta-Wiki) eller common.css (på en hvilken som helst wiki).

/* Tilpasning for [[m:User:Jon Harald Søby/mobilePreview.js]] */
:root.userjs-mobilepreview {
	/* Bredden på telefonskjermen i antall piksler, uten px-enheten */
	--userjs-mobilepreview-phone-width: 360;
	/* Høyden på telefonskjermen i antall piksler, uten px-enheten */
	--userjs-mobilepreview-phone-height: 800;
	/* Kantradius for telefonen */
	--userjs-mobilepreview-border-radius: 2rem;
	/* Varigheten på overganger. Sett denne til 0 for å deaktivere overganger */
	--userjs-mobilepreview-transition-duration: 2s;
	/* Hvor langt fra siden av skjermen telefonen skal være */
	--userjs-mobilepreview-distance-from-side: 4vw;
	/* Backdrop-filter for resten av siden når telefonen vises */
	--userjs-mobilepreview-backdrop-filter: blur( 2px );
}