User:Jon Harald Søby/mobilePreview

Video som viser korleis skriptet funkar

mobilePreview er eit brukarskript som lét deg førehandsvise mobilversjonen av kva wikiside som helst med eit elegant og intuitivt grensesnitt. Det nyttar CSS-variablar for å la brukarane tilpasse forskjellige delar av førehandsvisinga.

Føremålet med skriptet er å la bidragsytarar, som primært bidreg på datamaskin, enkelt sjå korleis sider ser ut på mobil, som er det majoriteten av lesarane nyttar når dei vitjar Wikipedia og andre wikiar.

Slå på

Legg til følgjande i din global.js (på Meta) eller common.js (på kva for ein wiki) for å slå på brukarskriptet:

// [[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' );

Funksjonar

Skriptet legg til ei lenkje i toppfanene som viser ein imitasjon av ein mobilskjerm i ein <iframe>-tagg. I visse omstende, som når skjermen er for liten til å visa telefonen, eller viss wgBreakFrames er sant for sida (dette gjeld vanlegvis for redigeringssider og visse spesialsider), opnar det mobilførehandsvisinga i eit sprettoppvindu i staden.

Både i iframes og sprettoppvindu legg skriptet til handtering av Esc-tasten, så ein kan lukke førehandsvisinga raskt.

Tilpassing

Ein kan tilpassa dei fleste aspekt ved vinduet ved å leggja til CSS i global.css-en (på Meta-Wiki) eller common.css-en sin (på kva for wiki som helst).

/* Tilpassing for [[m:User:Jon Harald Søby/mobilePreview.js]] */
:root.userjs-mobilepreview {
	/* Breidda på telefonskjermen i pikslar, utan px-eininga */
	--userjs-mobilepreview-phone-width: 360;
	/* Høgda på telefonskjermen i pikslar, utan px-eininga */
	--userjs-mobilepreview-phone-height: 800;
	/* Kantradius for telefonen */
	--userjs-mobilepreview-border-radius: 2rem;
	/* Varigheita på overgangar. Sett ho til 0 for å slå av overgangar */
	--userjs-mobilepreview-transition-duration: 2s;
	/* Kor langt frå sida av skjermen telefonen skal vera */
	--userjs-mobilepreview-distance-from-side: 4vw;
	/* Backdrop-filter for resten av sida når telefonen blir vist */
	--userjs-mobilepreview-backdrop-filter: blur( 2px );
}