Skip to content

Commit

Permalink
Add a screen that tells users that their browser is unsupported (ampp…
Browse files Browse the repository at this point in the history 
…roject#13137)

* Add unsupported browser screen.

* Remove testing condition.

* Add expected error and prevent layoutCallback

* Fix line length

* Assume browser is supported during tests.

* Remove testing condition.
  • Loading branch information
@newmuis
newmuis authored and protonate committed Mar 15, 2018
1 parent a357000 commit f9a6bdf
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 20 deletions.
32 changes: 24 additions & 8 deletions extensions/amp-story/0.1/amp-story.css
View file
Expand Up @@ -883,33 +883,41 @@ amp-story[standalone] .i-amphtml-story-developer-log {
white-space: nowrap !important;
}

amp-story[standalone] .i-amphtml-story-no-rotation-overlay {
amp-story[standalone] .i-amphtml-story-no-rotation-overlay,
.i-amphtml-story-unsupported-browser-overlay {
position: fixed !important;
z-index: 9999 !important;
z-index: 200000!important;
font-family: 'Roboto', sans-serif;
font-weight: 700 !important;
line-height: 1.5;
padding: 32px;
background-color: #000 !important;
top:0 !important;
left:0 !important;
width:100% !important;
height: 100% !important;
right:0 !important;
bottom:0 !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
display: none !important;
}

[desktop] .i-amphtml-story-no-rotation-overlay {
display: none !important;
}

amp-story[standalone].i-amphtml-story-landscape .i-amphtml-story-no-rotation-overlay {
amp-story[standalone].i-amphtml-story-landscape .i-amphtml-story-no-rotation-overlay,
.i-amphtml-story-unsupported-browser-overlay {
display: flex !important;
}

.i-amphtml-story-no-rotation-overlay{
.i-amphtml-story-no-rotation-overlay,
.i-amphtml-story-unsupported-browser-overlay {
color: #fff!important;
}

.i-amphtml-rotate-icon {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.48 2.52c3.27 1.55 5.61 4.72 5.97 8.48h1.5C23.44 4.84 18.29 0 12 0l-.66.03 3.81 3.81 1.33-1.32zm-6.25-.77c-.59-.59-1.54-.59-2.12 0L1.75 8.11c-.59.59-.59 1.54 0 2.12l12.02 12.02c.59.59 1.54.59 2.12 0l6.36-6.36c.59-.59.59-1.54 0-2.12L10.23 1.75zm4.6 19.44L2.81 9.17l6.36-6.36 12.02 12.02-6.36 6.36zm-7.31.29C4.25 19.94 1.91 16.76 1.55 13H.05C.56 19.16 5.71 24 12 24l.66-.03-3.81-3.81-1.33 1.32z"/></svg>')!important;
.i-amphtml-rotate-icon,
.i-amphtml-gear-icon {
background-repeat: no-repeat!important;
background-position: center center!important;
border-radius: 50%!important;
Expand All @@ -920,6 +928,14 @@ amp-story[standalone].i-amphtml-story-landscape .i-amphtml-story-no-rotation-ove
margin: 16px auto!important;
}

.i-amphtml-rotate-icon {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.48 2.52c3.27 1.55 5.61 4.72 5.97 8.48h1.5C23.44 4.84 18.29 0 12 0l-.66.03 3.81 3.81 1.33-1.32zm-6.25-.77c-.59-.59-1.54-.59-2.12 0L1.75 8.11c-.59.59-.59 1.54 0 2.12l12.02 12.02c.59.59 1.54.59 2.12 0l6.36-6.36c.59-.59.59-1.54 0-2.12L10.23 1.75zm4.6 19.44L2.81 9.17l6.36-6.36 12.02 12.02-6.36 6.36zm-7.31.29C4.25 19.94 1.91 16.76 1.55 13H.05C.56 19.16 5.71 24 12 24l.66-.03-3.81-3.81-1.33 1.32z"/></svg>')!important;
}

.i-amphtml-gear-icon {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 20 20" fill="#000000"><path fill="none" d="M0 0h20v20H0V0z"/><path d="M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12 2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39 0-.49.18l-1.6 2.77c-.1.18-.06.39.1.51l1.69 1.32c-.04.25-.07.52-.07.78s.02.53.06.78L2.37 12.1c-.15.12-.19.34-.1.51l1.6 2.77c.1.18.31.24.49.18l1.99-.8c.42.32.86.58 1.35.78l.3 2.12c.04.2.2.34.4.34h3.2c.2 0 .37-.14.39-.34l.3-2.12c.49-.2.94-.47 1.35-.78l1.99.8c.18.07.39 0 .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z"/></svg>')!important;
}

.i-amphtml-story-button-container {
display: none !important;
}
Expand Down
74 changes: 62 additions & 12 deletions extensions/amp-story/0.1/amp-story.js
View file
Expand Up @@ -140,7 +140,32 @@ const LANDSCAPE_ORIENTATION_WARNING = [
},
{
tag: 'div',
text: 'The page is best viewed in Portrait mode.',
text: 'The page is best viewed in portrait mode',
},
],
},
],
},
];


const UNSUPPORTED_BROWSER_WARNING = [
{
tag: 'div',
attrs: dict({'class': 'i-amphtml-story-unsupported-browser-overlay'}),
children: [
{
tag: 'div',
attrs: dict({'class': 'i-amphtml-overlay-container'}),
children: [
{
tag: 'div',
attrs: dict({'class': 'i-amphtml-gear-icon'}),
},
{
tag: 'div',
text: 'We\'re sorry, it looks like your browser doesn\'t support ' +
'this experience',
},
],
},
Expand Down Expand Up @@ -250,12 +275,6 @@ export class AmpStory extends AMP.BaseElement {
buildCallback() {
this.assertAmpStoryExperiment_();

if (this.isDesktop_()) {
this.element.setAttribute('desktop','');
}

this.element.querySelector('amp-story-page').setAttribute('active', '');

if (this.element.hasAttribute(AMP_STORY_STANDALONE_ATTRIBUTE)) {
const html = this.win.document.documentElement;
this.mutateElement(() => {
Expand Down Expand Up @@ -283,8 +302,6 @@ export class AmpStory extends AMP.BaseElement {

registerServiceBuilder(this.win, 'story-variable',
() => this.variableService_);

this.buildLandscapeOrientationOverlay_();
}


Expand Down Expand Up @@ -512,6 +529,12 @@ export class AmpStory extends AMP.BaseElement {

/** @override */
layoutCallback() {
if (!AmpStory.isBrowserSupported(this.win)) {
this.buildUnsupportedBrowserOverlay_();
dev().expectedError(TAG, 'Unsupported browser');
return Promise.resolve();
}

const firstPageEl = user().assertElement(
scopedQuerySelector(this.element, 'amp-story-page'),
'Story must have at least one page.');
Expand All @@ -523,6 +546,7 @@ export class AmpStory extends AMP.BaseElement {
const storyLayoutPromise = this.initializePages_()
.then(() => this.buildSystemLayer_())
.then(() => this.buildHintLayer_())
.then(() => this.buildLandscapeOrientationOverlay_())
.then(() => {
this.pages_.forEach(page => {
page.setActive(false);
Expand Down Expand Up @@ -887,10 +911,27 @@ export class AmpStory extends AMP.BaseElement {
* Build overlay for Landscape mode mobile
*/
buildLandscapeOrientationOverlay_() {
this.element.insertBefore(
renderSimpleTemplate(this.win.document, LANDSCAPE_ORIENTATION_WARNING),
this.element.firstChild);
this.mutateElement(() => {
this.element.insertBefore(
renderSimpleTemplate(this.win.document,
LANDSCAPE_ORIENTATION_WARNING),
this.element.firstChild);
});
}


/**
* Build overlay for Landscape mode mobile
*/
buildUnsupportedBrowserOverlay_() {
this.mutateElement(() => {
this.element.insertBefore(
renderSimpleTemplate(this.win.document, UNSUPPORTED_BROWSER_WARNING),
this.element.firstChild);
});
}


/**
* Get the URL of the given page's background resource.
* @param {!Element} pageElement
Expand Down Expand Up @@ -1369,6 +1410,15 @@ export class AmpStory extends AMP.BaseElement {
}
this.switchTo_(dev().assertElement(this.pages_[0].element).id);
}

/**
* @param {!Window} win
* @return {boolean} true if the user's browser supports the features needed
* for amp-story.
*/
static isBrowserSupported(win) {
return win.CSS.supports('display', 'grid');
}
}


Expand Down
1 change: 1 addition & 0 deletions extensions/amp-story/0.1/test/test-amp-story.js
View file
Expand Up @@ -70,6 +70,7 @@ describes.realWin('amp-story', {
element = win.document.createElement('amp-story');
win.document.body.appendChild(element);

AmpStory.isBrowserSupported = () => true;
story = new AmpStory(element);
// TODO(alanorozco): Test active page event triggers once the stubbable
// `Services` module is part of the amphtml-story repo.
Expand Down

0 comments on commit f9a6bdf

Please sign in to comment.