✨ Allow bind on [expanded] on an amp-accordion > section. (#22755)

ampproject · Jun 20, 2019 · ecf86b9 · ecf86b9
1 parent 92908d4
commit ecf86b9
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 37 deletions.
diff --git a/examples/accordion.amp.html b/examples/accordion.amp.html
@@ -7,6 +7,7 @@
   <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>
   <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
+  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
   <style amp-custom>
     .menu {
       padding: 1em;
@@ -31,13 +32,18 @@
   </style>
 </head>
 <body>
+  <button on="tap:AMP.setState({expandAc1: true})">Expand item 1</button>
+  <button on="tap:AMP.setState({expandAc1: false})">Collapse item 1</button>
+
+  <button on="tap:AMP.setState({expandAc2: true})">Expand section 1</button>
+  <button on="tap:AMP.setState({expandAc2: false})">Collapse section 1</button>
   <header class="menu">
     <h3>MENU</h3>
     <nav>
       <ul>
         <li>
           <amp-accordion id="ac1" animate>
-            <section id="item1" on="expand:ac2.collapse(section='item2')">
+            <section id="item1" on="expand:ac2.collapse(section='item2'),AMP.setState({expandAc1: true});collapse:AMP.setState({expandAc1: false})" [data-expand]="expandAc1">
               <h1>Item 1 (Expanding it closes Item 2)</h1>
               <div>
                 <p>1A</p>
@@ -62,7 +68,7 @@ <h1>Item 2 (Expanding it closes Item 1)</h1>
   </header>
 
   <amp-accordion expand-single-section>
-    <section>
+    <section [data-expand]="expandAc2" on="expand:AMP.setState({expandAc2: true});collapse:AMP.setState({expandAc2: false})">
       <h2>Section 1</h2>
       <p>Bunch of awesome content</p>
     </section>

diff --git a/extensions/amp-accordion/0.1/amp-accordion.js b/extensions/amp-accordion/0.1/amp-accordion.js
@@ -152,6 +152,14 @@ class AmpAccordion extends AMP.BaseElement {
         }
       });
 
+      // Listen for mutations on the 'data-expand' attribute.
+      const expandObserver = new this.win.MutationObserver(mutations => {
+        this.toggleExpandMutations_(mutations);
+      });
+      expandObserver.observe(section, {
+        attributeFilter: ['data-expand'],
+      });
+
       if (this.currentState_[contentId]) {
         section.setAttribute('expanded', '');
       } else if (this.currentState_[contentId] === false) {
@@ -601,6 +609,21 @@ class AmpAccordion extends AMP.BaseElement {
       tryFocus(newFocusHeader);
     }
   }
+
+  /**
+   * Callback function to execute when mutations are observed on "data-expand".
+   * @param {!Array<!MutationRecord>} mutations
+   */
+  toggleExpandMutations_(mutations) {
+    mutations.forEach(mutation => {
+      const sectionEl = dev().assertElement(mutation.target);
+      const toExpand = sectionEl.hasAttribute('data-expand');
+      const isExpanded = sectionEl.hasAttribute('expanded');
+      if (isExpanded !== toExpand) {
+        this.toggle_(sectionEl, toExpand);
+      }
+    });
+  }
 }
 
 AMP.extension(TAG, '0.1', AMP => {

diff --git a/extensions/amp-accordion/0.1/test/integration/test-amp-accordion.js b/extensions/amp-accordion/0.1/test/integration/test-amp-accordion.js
@@ -14,10 +14,13 @@
  * limitations under the License.
  */
 
-describe('amp-accordion', function() {
-  this.timeout(10000);
-  const extensions = ['amp-accordion'];
-  const body = `
+describe
+  .configure()
+  .skipEdge()
+  .run('amp-accordion', function() {
+    this.timeout(10000);
+    const extensions = ['amp-accordion'];
+    const body = `
   <amp-accordion media="(min-width: 500px)" id="media-accordion">
     <section>
       <h1>
@@ -27,36 +30,38 @@ describe('amp-accordion', function() {
     </section>
   </amp-accordion>
   `;
-  describes.integration(
-    'amp-accordion',
-    {
-      body,
-      extensions,
-    },
-    env => {
-      let win, iframe, doc;
-      beforeEach(() => {
-        win = env.win;
-        iframe = env.iframe;
-        doc = win.document;
-        iframe.width = 300;
-      });
+    describes.integration(
+      'amp-accordion',
+      {
+        body,
+        extensions,
+      },
+      env => {
+        let win, iframe, doc;
+        beforeEach(() => {
+          win = env.win;
+          iframe = env.iframe;
+          doc = win.document;
+          iframe.width = 300;
+        });
 
-      it('should respect the media attribute', () => {
-        const accordion = doc.getElementById('media-accordion');
-        expect(iframe.clientWidth).to.equal(300);
-        expect(accordion.className).to.match(/i-amphtml-hidden-by-media-query/);
-        iframe.width = 600;
-        expect(iframe.clientWidth).to.equal(600);
-        return timeout(200).then(() => {
-          expect(accordion.className).to.not.match(
+        it('should respect the media attribute', () => {
+          const accordion = doc.getElementById('media-accordion');
+          expect(iframe.clientWidth).to.equal(300);
+          expect(accordion.className).to.match(
             /i-amphtml-hidden-by-media-query/
           );
+          iframe.width = 600;
+          expect(iframe.clientWidth).to.equal(600);
+          return timeout(200).then(() => {
+            expect(accordion.className).to.not.match(
+              /i-amphtml-hidden-by-media-query/
+            );
+          });
         });
-      });
-    }
-  );
-});
+      }
+    );
+  });
 
 /**
  * @param {number} ms

diff --git a/extensions/amp-accordion/0.1/test/validator-amp-accordion.html b/extensions/amp-accordion/0.1/test/validator-amp-accordion.html
@@ -55,6 +55,10 @@ <h2>Nested section</h2>
       <header>The header tag is supported as well.</header>
       <p>Even more awesome.</p>
     </section>
+    <section [data-expand]="">
+      <h2>Section with bound [data-expand] attribute</h2>
+      <amp-img src="/awesome.png" width="300" height="300"></amp-img>
+    </section>
   </amp-accordion>
 
   <!-- invalid example -->

diff --git a/extensions/amp-accordion/0.1/test/validator-amp-accordion.out b/extensions/amp-accordion/0.1/test/validator-amp-accordion.out
@@ -56,26 +56,30 @@ FAIL
 |        <header>The header tag is supported as well.</header>
 |        <p>Even more awesome.</p>
 |      </section>
+|      <section [data-expand]="">
+|        <h2>Section with bound [data-expand] attribute</h2>
+|        <amp-img src="/awesome.png" width="300" height="300"></amp-img>
+|      </section>
 |    </amp-accordion>
 |
 |    <!-- invalid example -->
 |    <amp-accordion>
 |      <amp-accordion> <!-- can't nest amp-accordion -->
 >>     ^~~~~~~~~
-amp-accordion/0.1/test/validator-amp-accordion.html:62:4 Tag 'amp-accordion' is disallowed as child of tag 'amp-accordion'. Child tag must be one of ['section']. (see https://amp.dev/documentation/components/amp-accordion) [AMP_TAG_PROBLEM]
+amp-accordion/0.1/test/validator-amp-accordion.html:66:4 Tag 'amp-accordion' is disallowed as child of tag 'amp-accordion'. Child tag must be one of ['section']. (see https://amp.dev/documentation/components/amp-accordion) [AMP_TAG_PROBLEM]
 |      </amp-accordion>
 |      <p>Some paragraph of text that doesn't belong here.</p>
 >>     ^~~~~~~~~
-amp-accordion/0.1/test/validator-amp-accordion.html:64:4 Tag 'p' is disallowed as child of tag 'amp-accordion'. Child tag must be one of ['section']. (see https://amp.dev/documentation/components/amp-accordion) [AMP_TAG_PROBLEM]
+amp-accordion/0.1/test/validator-amp-accordion.html:68:4 Tag 'p' is disallowed as child of tag 'amp-accordion'. Child tag must be one of ['section']. (see https://amp.dev/documentation/components/amp-accordion) [AMP_TAG_PROBLEM]
 |      <section>
 >>     ^~~~~~~~~
-amp-accordion/0.1/test/validator-amp-accordion.html:65:4 Tag 'amp-accordion > section' must have 2 child tags - saw 3 child tags. [AMP_TAG_PROBLEM]
+amp-accordion/0.1/test/validator-amp-accordion.html:69:4 Tag 'amp-accordion > section' must have 2 child tags - saw 3 child tags. [AMP_TAG_PROBLEM]
 |        <div>header which isn't h1-h6.</div>
 >>       ^~~~~~~~~
-amp-accordion/0.1/test/validator-amp-accordion.html:66:6 Tag 'div' is disallowed as first child of tag 'amp-accordion > section'. First child tag must be one of ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header']. [AMP_TAG_PROBLEM]
+amp-accordion/0.1/test/validator-amp-accordion.html:70:6 Tag 'div' is disallowed as first child of tag 'amp-accordion > section'. First child tag must be one of ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header']. [AMP_TAG_PROBLEM]
 |        <div>a second child</div>
 |        <div>a third child</div>
 |      </section>
 |    </amp-accordion>
 |  </body>
-|  </html>
+|  </html>
diff --git a/extensions/amp-accordion/amp-accordion.md b/extensions/amp-accordion/amp-accordion.md
@@ -126,6 +126,10 @@ The events below will be triggered on `section`s of `accordion`.
     <td width="40%"><strong><code>expand-single-section</code></strong></td>
     <td>Set this attribute on the <code>&lt;amp-accordion&gt;</code> to only allow one <code>&lt;section&gt;</code> to be expanded at a time. If the user focuses on one <code>&lt;section&gt;</code> any other previously expanded <code>&lt;section&gt;</code> will be collapsed.</td>
   </tr>
+  <tr>
+    <td width="40%"><strong><code>[data-expand]</code></strong></td>
+    <td>Bind this attribute on a <code>&lt;section&gt;</code> to expand or collapse the section. An expression that evaluates to <code>false</code> will collapse the section if it is expanded, and anything else will expand the section if it is collapsed.</td>
+  </tr>
 </table>
 
 ## Styling

diff --git a/extensions/amp-accordion/validator-amp-accordion.protoascii b/extensions/amp-accordion/validator-amp-accordion.protoascii
@@ -61,6 +61,10 @@ tags: {  # <amp-accordion> > <section>
   spec_name: "amp-accordion > section"
   mandatory_parent: "AMP-ACCORDION"
   attrs: { name: "expanded" value: "" }
+  # amp-bind
+  attrs: {
+    name: "[data-expand]"
+  }
   child_tags: {
     mandatory_num_child_tags: 2
     first_child_tag_name_oneof: "H1"

diff --git a/extensions/amp-bind/0.1/bind-validator.js b/extensions/amp-bind/0.1/bind-validator.js
@@ -406,6 +406,9 @@ function createElementRules_() {
       'disabled': null,
       'label': null,
     },
+    'SECTION': {
+      'data-expand': null,
+    },
     'SELECT': {
       'autofocus': null,
       'disabled': null,

diff --git a/extensions/amp-bind/amp-bind.md b/extensions/amp-bind/amp-bind.md
@@ -539,6 +539,11 @@ Only binding to the following components and attributes are allowed:
     <td><code>[disabled]</code><br><code>[label]</code></td>
     <td>See corresponding <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup#Attributes">optgroup attributes</a></td>
   </tr>
+  <tr>
+    <td><code>&lt;section&gt;</code></td>
+    <td><code>[data-expand]</code></td>
+    <td>Changes the expansion of a <code>section</code> in an <a href="https://amp.dev/documentation/components/amp-accordion">amp-accordion</a>.</td>
+  </tr>
   <tr>
     <td><code>&lt;select&gt;</code></td>
     <td><code>[autofocus]</code><br><code>[disabled]</code><br><code>[multiple]</code><br><code>[required]</code><br><code>[size]</code></td>