diff --git a/extensions/amp-story/0.1/amp-story.css b/extensions/amp-story/0.1/amp-story.css
index 60f318c49d0f..54771e855407 100644
--- a/extensions/amp-story/0.1/amp-story.css
+++ b/extensions/amp-story/0.1/amp-story.css
@@ -883,16 +883,22 @@ 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;
}
@@ -900,16 +906,18 @@ amp-story[standalone] .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,')!important;
+.i-amphtml-rotate-icon,
+.i-amphtml-gear-icon {
background-repeat: no-repeat!important;
background-position: center center!important;
border-radius: 50%!important;
@@ -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,')!important;
+}
+
+.i-amphtml-gear-icon {
+ background-image: url('data:image/svg+xml;charset=utf-8,')!important;
+}
+
.i-amphtml-story-button-container {
display: none !important;
}
diff --git a/extensions/amp-story/0.1/amp-story.js b/extensions/amp-story/0.1/amp-story.js
index ddde08cc3853..f3094a5b4f43 100644
--- a/extensions/amp-story/0.1/amp-story.js
+++ b/extensions/amp-story/0.1/amp-story.js
@@ -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',
},
],
},
@@ -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(() => {
@@ -283,8 +302,6 @@ export class AmpStory extends AMP.BaseElement {
registerServiceBuilder(this.win, 'story-variable',
() => this.variableService_);
-
- this.buildLandscapeOrientationOverlay_();
}
@@ -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.');
@@ -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);
@@ -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
@@ -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');
+ }
}
diff --git a/extensions/amp-story/0.1/test/test-amp-story.js b/extensions/amp-story/0.1/test/test-amp-story.js
index 22371a899b74..f9c3ab7e2388 100644
--- a/extensions/amp-story/0.1/test/test-amp-story.js
+++ b/extensions/amp-story/0.1/test/test-amp-story.js
@@ -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.