Provide support for Sticky ad units in AMP #2472 (#3119)

* Provide support for sticky ad units, initial implementation * delete EXPERIMENT tag * change layout type to NODISPLAY * add .md file
ampproject · May 9, 2016 · 98129cf · 98129cf
1 parent 2087f87
commit 98129cf
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 0 deletions.
diff --git a/builtins/amp-ad.js b/builtins/amp-ad.js
@@ -32,6 +32,7 @@ import {viewerFor} from '../src/viewer';
 /** @private @const These tags are allowed to have fixed positioning */
 const POSITION_FIXED_TAG_WHITELIST = {
   'AMP-LIGHTBOX': true,
+  'AMP-STICKY-AD': true,
 };
 
 /**

diff --git a/examples/sticky.ads.amp.html b/examples/sticky.ads.amp.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Sticky ad examples</title>
+  <link rel="canonical" href="http://nonblocking.io/" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-0.1.js"></script>
+  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+
+</head>
+<body>
+  <h2>Sticky Ad Demo</h2>
+  <amp-sticky-ad layout="nodisplay">
+    <amp-ad width="300" height="250"
+      type="adman"
+      data-ws="17342"
+      data-s="300x250"
+      data-host="talos.adman.gr">
+    </amp-ad>
+  </amp-sticky-ad>
+</body>
+</html>
diff --git a/extensions/amp-sticky-ad/0.1/amp-sticky-ad.css b/extensions/amp-sticky-ad/0.1/amp-sticky-ad.css
@@ -0,0 +1,18 @@
+/**
+ * Copyright 2016 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ amp-sticky-ad {
+ }
diff --git a/extensions/amp-sticky-ad/0.1/amp-sticky-ad.js b/extensions/amp-sticky-ad/0.1/amp-sticky-ad.js
@@ -0,0 +1,43 @@
+/**
+ * Copyright 2016 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {CSS} from '../../../build/amp-sticky-ad-0.1.css';
+import {Layout} from '../../../src/layout';
+import {dev} from '../../../src/log';
+import {isExperimentOn} from '../../../src/experiments';
+import {isLayoutSizeDefined} from '../../../src/layout';
+
+/** @const */
+const TAG = 'amp-sticky-ad';
+
+class AmpStickyAd extends AMP.BaseElement {
+  /** @override */
+  isLayoutSupported(layout) {
+    return layout == Layout.NODISPLAY;
+  }
+
+  /** @override */
+  buildCallback() {
+    /** @const @private {boolean} */
+    this.isExperimentOn_ = isExperimentOn(this.getWin(), TAG);
+    if (!this.isExperimentOn_) {
+      dev.warn(TAG, `TAG ${TAG} disabled`);
+      return;
+    }
+  }
+}
+
+AMP.registerElement('amp-sticky-ad', AmpStickyAd, CSS);
diff --git a/extensions/amp-sticky-ad/0.1/test/test-sticky-amp-ad.js b/extensions/amp-sticky-ad/0.1/test/test-sticky-amp-ad.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright 2016 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
diff --git a/extensions/amp-sticky-ad/amp-sticky-ad.md b/extensions/amp-sticky-ad/amp-sticky-ad.md
@@ -0,0 +1,15 @@
+<!---
+Copyright 2016 The AMP HTML Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS-IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
diff --git a/gulpfile.js b/gulpfile.js
@@ -75,6 +75,7 @@ function buildExtensions(options) {
   buildExtension('amp-sidebar', '0.1', true, options);
   buildExtension('amp-soundcloud', '0.1', false, options);
   buildExtension('amp-springboard-player', '0.1', false, options);
+  buildExtension('amp-sticky-ad', '0.1', true, options);
   buildExtension('amp-install-serviceworker', '0.1', false, options);
   /**
    * @deprecated `amp-slides` is deprecated and will be deleted before 1.0.
@@ -328,6 +329,7 @@ function buildExamples(watch) {
   buildExample('twitter.amp.html');
   buildExample('soundcloud.amp.html');
   buildExample('springboard-player.amp.html');
+  buildExample('sticky.ads.amp.html');
   buildExample('user-notification.amp.html');
   buildExample('vimeo.amp.html');
   buildExample('vine.amp.html');

diff --git a/tools/experiments/experiments.js b/tools/experiments/experiments.js
@@ -73,6 +73,11 @@ const EXPERIMENTS = [
     name: 'Viewability APIs for amp-analytics',
     spec: 'https://github.com/ampproject/amphtml/issues/1297#issuecomment-197441289',
   },
+  {
+    id: 'amp-sticky-ad',
+    name: 'AMP Sticky Ad',
+    spec: 'https://github.com/ampproject/amphtml/issues/2472',
+  },
 ];