create amp-hulu

use es6 syntax

use const instead of let

added validator file

remove size expect

code reviewed

some updated

added amp-hulu

reviewd validator

extensions/amp-hulu/0.1/amp-hulu.js

@@ -0,0 +1,63 @@
+/**
+ * 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 {isLayoutSizeDefined} from '../../../src/layout';
+import {user} from '../../../src/log';
+
+class AmpHulu extends AMP.BaseElement {
+  /** @param {!AmpElement} element */
+  constructor(element) {
+    super(element);
+
+    /** @private {?Element} */
+    this.iframe_ = null;
+  }
+
+  /** @override */
+  preconnectCallback() {
+    this.preconnect.url('https://secure.hulu.com/dash/mobile_embed.html');
+  }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    return isLayoutSizeDefined(layout);
+  }
+
+  /** @override */
+  layoutCallback() {
+    const eid = user().assert(this.element.getAttribute('data-eid'),
+        'The data-eid attribute is required for <amp-hulu> %s',
+        this.element);
+
+    const iframe = document.createElement('iframe');
+    iframe.setAttribute('frameborder', '0');
+    iframe.setAttribute('allowfullscreen', 'true');
+    iframe.src = 'https://secure.hulu.com/dash/mobile_embed.html?eid=' + encodeURIComponent(eid);
+    this.applyFillContent(iframe);
+    this.element.appendChild(iframe);
+    /** @private {?Element} */
+    this.iframe_ = iframe;
+
+    return this.loadPromise(iframe);
+  }
+
+  /** @override */
+  unlayoutOnPause() {
+    return true;
+  }
+};
+
+AMP.registerElement('amp-hulu', AmpHulu);

extensions/amp-hulu/0.1/test/test-amp-hulu.js

@@ -0,0 +1,61 @@
+/**
+ * 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 {createIframePromise} from '../../../../testing/iframe';
+import '../amp-hulu';
+import {adopt} from '../../../../src/runtime';
+
+adopt(window);
+
+describe('amp-hulu', () => {
+
+  function getHulu(eid, opt_responsive) {
+    return createIframePromise().then(iframe => {
+      const hulu = iframe.doc.createElement('amp-hulu');
+      hulu.setAttribute('data-eid', eid);
+      hulu.setAttribute('width', '111');
+      hulu.setAttribute('height', '222');
+      if (opt_responsive) {
+        hulu.setAttribute('layout', 'responsive');
+      }
+      iframe.doc.body.appendChild(hulu);
+      hulu.implementation_.layoutCallback();
+      return hulu;
+    });
+  }
+
+  it('renders', () => {
+    return getHulu('Bx6H30RBVFNpOe-iiOxp3A').then(hulu => {
+      const iframe = hulu.querySelector('iframe');
+      expect(iframe).to.not.be.null;
+      expect(iframe.tagName).to.equal('IFRAME');
+      expect(iframe.src).to.equal('https://secure.hulu.com/dash/mobile_embed.html?eid=Bx6H30RBVFNpOe-iiOxp3A');
+    });
+  });
+
+  it('renders responsively', () => {
+    return getHulu('Bx6H30RBVFNpOe-iiOxp3A', true).then(hulu => {
+      const iframe = hulu.querySelector('iframe');
+      expect(iframe).to.not.be.null;
+      expect(iframe.className).to.match(/-amp-fill-content/);
+    });
+  });
+
+  it('requires data-eid', () => {
+    return getHulu('').should.eventually.be.rejectedWith(
+        /The data-eid attribute is required for/);
+  });
+});

extensions/amp-hulu/0.1/validator-amp-hulu.protoascii

@@ -0,0 +1,68 @@
+#
+# 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.
+#
+
+tags: {  # amp-hulu
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "SCRIPT"
+  spec_name: "amp-hulu extension .js script"
+  mandatory_parent: "HEAD"
+  attrs: {
+    name: "async"
+    mandatory: true
+    value: ""
+  }
+  attrs: {
+    name: "custom-element"
+    mandatory: true
+    value: "amp-hulu"
+    dispatch_key: true
+  }
+  attrs: {
+    name: "src"
+    mandatory: true
+    value_regex: "https://cdn\\.ampproject\\.org/v0/amp-hulu-(latest|0\\.1)\\.js"
+  }
+  attrs: {
+    name: "type"
+    value_casei: "text/javascript"
+  }
+  cdata: {
+    blacklisted_cdata_regex: {
+      regex: "."
+      error_message: "contents"
+    }
+  }
+}
+tags: {  # <amp-hulu>
+  html_format: AMP
+  html_format: AMP4ADS
+  tag_name: "AMP-HULU"
+  disallowed_ancestor: "AMP-SIDEBAR"
+  also_requires_tag: "amp-hulu extension .js script"
+  attrs: {
+    name: "data-eid"
+    mandatory: true
+  }
+  attr_lists: "extended-amp-global"
+  amp_layout: {
+    supported_layouts: FILL
+    supported_layouts: FIXED
+    supported_layouts: FIXED_HEIGHT
+    supported_layouts: FLEX_ITEM
+    supported_layouts: RESPONSIVE
+  }
+}

extensions/amp-hulu/amp-hulu.md

@@ -0,0 +1,51 @@
+<!---
+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.
+-->
+
+# <a name="amp-hulu"></a> `amp-hulu`
+
+<table>
+  <tr>
+    <td width="40%"><strong>Description</strong></td>
+    <td>Displays a Hulu simple embed.</td>
+  </tr>
+  <tr>
+    <td width="40%"><strong>Availability</strong></td>
+    <td>Stable</td>
+  </tr>
+  <tr>
+    <td width="40%"><strong>Required Script</strong></td>
+    <td><code>&lt;script async custom-element="amp-hulu" src="https://cdn.ampproject.org/v0/amp-hulu-0.1.js">&lt;/script></code></td>
+  </tr>
+  <tr>
+    <td class="col-fourty"><strong><a href="https://www.ampproject.org/docs/guides/responsive/control_layout.html">Supported Layouts</a></strong></td>
+    <td>fill, fixed, fixed-height, flex-item, nodisplay, responsive</td>
+  </tr>
+</table>
+
+## Example
+
+```html
+<amp-hulu width="412" height="213" layout="responsive"
+  data-eid="Bx6H30RBVFNpOe-iiOxp3A">
+</amp-hulu>
+```
+
+## Attributes
+
+**data-eid**
+
+In a URL like https://secure.hulu.com/embed.html?eid=Bx6H30RBVFNpOe-iiOxp3A `Bx6H30RBVFNpOe-iiOxp3A` is the eid.
+

gulpfile.js

@@ -72,6 +72,7 @@ declareExtension('amp-form', '0.1', true);
 declareExtension('amp-fresh', '0.1', true);
 declareExtension('amp-fx-flying-carpet', '0.1', true);
 declareExtension('amp-gfycat', '0.1', false);
+declareExtension('amp-hulu', '0.1', false, 'NO_TYPE_CHECK');
 declareExtension('amp-iframe', '0.1', false, 'NO_TYPE_CHECK');
 declareExtension('amp-image-lightbox', '0.1', true);
 declareExtension('amp-instagram', '0.1', false);