Skip to content

Commit

Permalink
New: Add pseudo fullscreen to mobile Safari (#246)
Browse files Browse the repository at this point in the history
* New: Add pseudo fullscreen to mobile Safari
  • Loading branch information
Jeremy Press authored Jul 31, 2017
1 parent 41b1af0 commit b8c776d
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 11 deletions.
1 change: 1 addition & 0 deletions src/lib/Controls.scss
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
opacity: .7;
outline: 0;
padding: 0;
// disables non-standard gestures such as double-tap to zoom
touch-action: manipulation;
user-select: none;
width: 48px;
Expand Down
11 changes: 11 additions & 0 deletions src/lib/_common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ $header-height: 48px;
overflow: hidden;
padding: 0;
position: relative;
// disables non-standard gestures such as double-tap to zoom
touch-action: manipulation;
width: 100%;

a {
Expand Down Expand Up @@ -131,6 +133,15 @@ $header-height: 48px;
right: 0;
top: 0;

// Pseudo fullscreen for iOS Safari which doesn't support the fullscreen API
&.bp-fullscreen-unsupported {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
}

&.bp-dark {
background-color: $black;
}
Expand Down
1 change: 1 addition & 0 deletions src/lib/constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export const CLASS_BOX_PREVIEW_TOGGLE_OVERLAY = 'bp-toggle-overlay';
export const CLASS_BOX_PREVIEW_THEME_DARK = 'bp-theme-dark';
export const CLASS_ELEM_KEYBOARD_FOCUS = 'bp-has-keyboard-focus';
export const CLASS_FULLSCREEN = 'bp-is-fullscreen';
export const CLASS_FULLSCREEN_UNSUPPORTED = 'bp-fullscreen-unsupported';
export const CLASS_INVISIBLE = 'bp-is-invisible';
export const CLASS_IS_VISIBLE = 'bp-is-visible';
export const CLASS_IS_SCROLLABLE = 'bp-is-scrollable';
Expand Down
28 changes: 18 additions & 10 deletions src/lib/viewers/BaseViewer.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import Browser from '../Browser';
import {
PERMISSION_ANNOTATE,
CLASS_FULLSCREEN,
CLASS_FULLSCREEN_UNSUPPORTED,
CLASS_HIDDEN,
CLASS_BOX_PREVIEW_MOBILE,
SELECTOR_BOX_PREVIEW,
Expand Down Expand Up @@ -329,17 +330,9 @@ class BaseViewer extends EventEmitter {
*/
addCommonListeners() {
// Attach common full screen event listeners
/* istanbul ignore next */
fullscreen.addListener('enter', () => {
this.containerEl.classList.add(CLASS_FULLSCREEN);
this.resize();
});
fullscreen.addListener('enter', this.onFullscreenToggled);

/* istanbul ignore next */
fullscreen.addListener('exit', () => {
this.containerEl.classList.remove(CLASS_FULLSCREEN);
this.resize();
});
fullscreen.addListener('exit', this.onFullscreenToggled);

// Add a resize handler for the window
document.defaultView.addEventListener('resize', this.debouncedResizeHandler);
Expand All @@ -357,13 +350,28 @@ class BaseViewer extends EventEmitter {

/**
* Enters or exits fullscreen
*
* @protected
* @return {void}
*/
toggleFullscreen() {
fullscreen.toggle(this.containerEl);
}

/**
* Applies appropriate styles and resizes the document depending on fullscreen state
*
* @return {void}
*/
onFullscreenToggled() {
this.containerEl.classList.toggle(CLASS_FULLSCREEN);
if (!fullscreen.isSupported()) {
this.containerEl.classList.toggle(CLASS_FULLSCREEN_UNSUPPORTED);
}

this.resize();
}

/**
* Resizing logic
*
Expand Down
30 changes: 30 additions & 0 deletions src/lib/viewers/__tests__/BaseViewer-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -322,6 +322,36 @@ describe('lib/viewers/BaseViewer', () => {
});
});

describe('onFullscreenToggled()', () => {
beforeEach(() => {
base.containerEl = document.createElement('div');
sandbox.stub(fullscreen, 'isSupported').returns(false);
sandbox.stub(base, 'resize');

});

it('should toggle the fullscreen class', () => {
base.onFullscreenToggled();
expect(base.containerEl.classList.contains(constants.CLASS_FULLSCREEN)).to.be.true;

base.onFullscreenToggled();
expect(base.containerEl.classList.contains(constants.CLASS_FULLSCREEN)).to.be.false;
});

it('should toggle the unsupported class if the browser does not support the fullscreen API', () => {
base.onFullscreenToggled();
expect(base.containerEl.classList.contains(constants.CLASS_FULLSCREEN_UNSUPPORTED)).to.be.true;

base.onFullscreenToggled();
expect(base.containerEl.classList.contains(constants.CLASS_FULLSCREEN_UNSUPPORTED)).to.be.false;
});

it('should resize the viewer', () => {
base.onFullscreenToggled();
expect(base.resize).to.be.called;
});
});

describe('resize()', () => {
it('should broadcast resize event', () => {
sandbox.stub(base, 'emit');
Expand Down
2 changes: 1 addition & 1 deletion src/lib/viewers/doc/DocBaseViewer.js
Original file line number Diff line number Diff line change
Expand Up @@ -361,7 +361,7 @@ class DocBaseViewer extends BaseViewer {
const previousPageButtonEl = this.containerEl.querySelector('.bp-previous-page');
const nextPageButtonEl = this.containerEl.querySelector('.bp-next-page');

// Safari disables keyboard input in fullscreen
// Safari disables keyboard input in fullscreen before Safari 10.1
const isSafariFullscreen = Browser.getName() === 'Safari' && fullscreen.isFullscreen(this.containerEl);

// Disable page number selector if there is only one page or less
Expand Down

0 comments on commit b8c776d

Please sign in to comment.