xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

always use css transforms for presentation scaling (zoom has too many quirks even if it is slightly sharper on ldpi displays)

Browse Source
This commit is contained in:
hakimel 2022-03-31 11:19:55 +02:00
parent 918ee5610a
commit e281b3234e
6 changed files with 13 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/reveal.esm.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.esm.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.js.map vendored
View File

File diff suppressed because one or more lines are too long

33
js/reveal.js
View File

@ -898,31 +898,12 @@ export default function( revealElement, options ) {
transformSlides( { layout: '' } ); transformSlides( { layout: '' } );
} }
else { else {
// Zoom Scaling dom.slides.style.zoom = '';
// Content remains crisp no matter how much we scale. Side dom.slides.style.left = '50%';
// effects are minor differences in text layout and iframe dom.slides.style.top = '50%';
// viewports changing size. A 200x200 iframe viewport in a dom.slides.style.bottom = 'auto';
// 2x zoomed presentation ends up having a 400x400 viewport. dom.slides.style.right = 'auto';
if( scale > 1 && Device.supportsZoom && window.devicePixelRatio < 2 ) { transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );
dom.slides.style.zoom = scale;
dom.slides.style.left = '';
dom.slides.style.top = '';
dom.slides.style.bottom = '';
dom.slides.style.right = '';
transformSlides( { layout: '' } );
}
// Transform Scaling
// Content layout remains the exact same when scaled up.
// Side effect is content becoming blurred, especially with
// high scale values on ldpi screens.
else {
dom.slides.style.zoom = '';
dom.slides.style.left = '50%';
dom.slides.style.top = '50%';
dom.slides.style.bottom = 'auto';
dom.slides.style.right = 'auto';
transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );
}
} }
// Select all slides, vertical and horizontal // Select all slides, vertical and horizontal
@ -964,6 +945,8 @@ export default function( revealElement, options ) {
} }
} }
dom.viewport.style.setProperty( '--slide-scale', scale );
progress.update(); progress.update();
backgrounds.updateParallax(); backgrounds.updateParallax();

9
js/utils/device.js
View File

@ -1,15 +1,8 @@
const UA = navigator.userAgent; const UA = navigator.userAgent;
const testElement = document.createElement( 'div' );
export const isMobile = /(iphone|ipod|ipad|android)/gi.test( UA ) || export const isMobile = /(iphone|ipod|ipad|android)/gi.test( UA ) ||
( navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 ); // iPadOS ( navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 ); // iPadOS
export const isChrome = /chrome/i.test( UA ) && !/edge/i.test( UA ); export const isChrome = /chrome/i.test( UA ) && !/edge/i.test( UA );
export const isAndroid = /android/gi.test( UA ); export const isAndroid = /android/gi.test( UA );
// Flags if we should use zoom instead of transform to scale
// up slides. Zoom produces crisper results but has a lot of
// xbrowser quirks so we only use it in whitelisted browsers.
export const supportsZoom = 'zoom' in testElement.style && !isMobile &&
( isChrome || /Version\/[\d\.]+.*Safari/.test( UA ) );