<amp-selector> Add select{Up/Down} actions #13439

nainar · 2018-02-12T12:28:30Z

Fixes #10947

This PR:

Adds the select{Up/Down} actions to <amp-selector> elements which change the option selected by 1, however don't shift focus to that element.
Adds tests in test-amp-selector.js to test these actions.
Adds an example page for <amp-selector> elements that is copied from the validator page.

Things to consider:

If the multiple attribute is set on <amp-selector> elements, should we change the first selection or not handle the case?
- DECISION: It is supported and should change the first selection.
Is there a need for select{Up/Down} action to be passed the number of options to skip or should it always be 1?
- Fo extensibility you can provide the number of positions to skip, and there is the default value

nainar · 2018-02-12T12:44:47Z

Hi @cvializ,

Wanted to get some initial feedback re:the 2 questions in the PR.

cvializ · 2018-02-16T15:41:02Z

If multiple is set it does make sense to move the first one. I think we could also open another feature request issue to add a toggle function that accepts an index and an optional value to toggle arbitrary values in the amp-selector. e.g. <button on="tap:mySelector.toggle(index=3, value=true)">Select the third option</button>. But for selectUp and selectDown moving just the first selected makes sense to me.

Cool, I can see the number of items to skip being a useful optional parameter. Feel free to add it if you think it'll improve the usefulness of the component

nainar · 2018-02-20T06:49:51Z

extensions/amp-selector/0.1/amp-selector.js

@@ -113,6 +113,24 @@ export class AmpSelector extends AMP.BaseElement {
      this.element.addEventListener('click', this.clickHandler_.bind(this));
      this.element.addEventListener('keydown', this.keyDownHandler_.bind(this));
    }
+
+    this.registerAction('selectUp', invocation => {


Bikeshed naming - should the attribute be changed to skip and then the dev can pass in negative or positive values to the function select?

maybe count? skip could be confusing, like is skip=1 might imply moving and skipping over an option, instead of moving to it.

Changed this to delta since I thought it best reflected the attribute and matched up with your suggestion for the input argument to select_()

nainar

@cvializ could you TAL? I have made the changes as per the discussion. Also filed a seperate issue for the toggling the select attribute on an element

cvializ · 2018-02-20T17:45:54Z

extensions/amp-selector/0.1/amp-selector.js

@@ -113,6 +113,24 @@ export class AmpSelector extends AMP.BaseElement {
      this.element.addEventListener('click', this.clickHandler_.bind(this));
      this.element.addEventListener('keydown', this.keyDownHandler_.bind(this));
    }
+
+    this.registerAction('selectUp', invocation => {


maybe count? skip could be confusing, like is skip=1 might imply moving and skipping over an option, instead of moving to it.

cvializ · 2018-02-20T17:48:48Z

extensions/amp-selector/0.1/amp-selector.js

+
+    this.registerAction('selectDown', invocation => {
+      const args = invocation.args;
+      if (args && args['decrementPos'] !== undefined) {


nit: this could be simplified to eliminate the branch.

const decrementPos = (args && args['decrementPos'] !== undefined) ? args['decrementPos'] : 1; this.select_(decrementPos);

cvializ · 2018-02-20T17:55:12Z

extensions/amp-selector/0.1/amp-selector.js

+    this.registerAction('selectUp', invocation => {
+      const args = invocation.args;
+      if (args && args['incrementPos'] !== undefined) {
+        this.select_(-1 * args['incrementPos']);


nit: you can use the unary - operator: -args['incrementPos']

cvializ · 2018-02-20T17:59:32Z

extensions/amp-selector/0.1/amp-selector.js

+    // Change the selection to the next element in the specified direction.
+    // The selection should loop around if the user attempts to go one
+    // past the beginning or end.
+    let selectedIndex_ = this.options_.indexOf(this.selectedOptions_[0]);


I would stick to consts here to eliminate branching and mutations.

const previousIndex = this.options_.indexOf(this.selectedOptions_[0]); const index = previousIndex + incrementPos; const normalizedIndex = index < 0 ? index + this.options_.length : index % this.options_.length;

And what if the user passes a negative incrementPos that is over twice the length of the options? We may still need to modulo the negative value.

Done.

Good catch! Made the change

cvializ · 2018-02-20T18:03:40Z

extensions/amp-selector/0.1/amp-selector.js

@@ -319,6 +337,27 @@ export class AmpSelector extends AMP.BaseElement {
    }
  }

+  /**
+   * Handles selectUp events.
+   * @param {number} incrementPos


bikeshed: maybe rename this delta, since it could be an increment or a decrement

Done. I am renaming the select{Up,Down} argument to delta too. I like it.

cvializ · 2018-02-20T18:07:21Z

spec/amp-actions-and-events.md

+  </tr>
+  <tr>
+    <td><code>selectUp(incrementPos=INTEGER)</code></td>
+    <td>Changes the selected element to the currentPos-incrementPos. If no increment value is specified, the default is 1.</td>


nit: put backticks `` around variable names in docs

nainar

@cvializ made the changes you asked for, PTAL?

nainar · 2018-02-20T23:14:43Z

extensions/amp-selector/0.1/amp-selector.js

@@ -113,6 +113,24 @@ export class AmpSelector extends AMP.BaseElement {
      this.element.addEventListener('click', this.clickHandler_.bind(this));
      this.element.addEventListener('keydown', this.keyDownHandler_.bind(this));
    }
+
+    this.registerAction('selectUp', invocation => {


Changed this to delta since I thought it best reflected the attribute and matched up with your suggestion for the input argument to select_()

nainar · 2018-02-20T23:14:52Z

extensions/amp-selector/0.1/amp-selector.js

+    this.registerAction('selectUp', invocation => {
+      const args = invocation.args;
+      if (args && args['incrementPos'] !== undefined) {
+        this.select_(-1 * args['incrementPos']);


nainar · 2018-02-20T23:17:06Z

extensions/amp-selector/0.1/amp-selector.js

+
+    this.registerAction('selectDown', invocation => {
+      const args = invocation.args;
+      if (args && args['decrementPos'] !== undefined) {


nainar · 2018-02-20T23:18:33Z

extensions/amp-selector/0.1/amp-selector.js

@@ -319,6 +337,27 @@ export class AmpSelector extends AMP.BaseElement {
    }
  }

+  /**
+   * Handles selectUp events.
+   * @param {number} incrementPos


Done. I am renaming the select{Up,Down} argument to delta too. I like it.

nainar · 2018-02-20T23:19:15Z

spec/amp-actions-and-events.md

+  </tr>
+  <tr>
+    <td><code>selectUp(incrementPos=INTEGER)</code></td>
+    <td>Changes the selected element to the currentPos-incrementPos. If no increment value is specified, the default is 1.</td>


nainar · 2018-02-20T23:35:30Z

extensions/amp-selector/0.1/amp-selector.js

+    // Change the selection to the next element in the specified direction.
+    // The selection should loop around if the user attempts to go one
+    // past the beginning or end.
+    let selectedIndex_ = this.options_.indexOf(this.selectedOptions_[0]);


Done.

Good catch! Made the change

cvializ · 2018-02-21T01:31:58Z

spec/amp-actions-and-events.md

+    <td>Changes the selected element to the currentPos - `delta`. The default `delta` is set to 1.</td>
+  </tr>
+  <tr>
+    <td><code>selectDown(decrementPos=INTEGER)</code></td>


nit: replace decrementPos with delta

cvializ · 2018-02-21T01:34:41Z

spec/amp-actions-and-events.md

+  </tr>
+  <tr>
+    <td><code>selectUp(delta=INTEGER)</code></td>
+    <td>Changes the selected element to the currentPos - `delta`. The default `delta` is set to 1.</td>


currentPos isn't a variable so it seems kind of out of context. Consider changing the wording to something like "Moves the selection up by delta"

cvializ · 2018-02-21T01:36:52Z

extensions/amp-selector/0.1/amp-selector.js

+    // Change the selection to the next element in the specified direction.
+    // The selection should loop around if the user attempts to go one
+    // past the beginning or end.
+    const previousIndex = this.options_.indexOf(this.selectedOptions_[0]);


Will this still work if the user calls myAmpSelector.selectDown(-1000)?

TIL: Javascript % is not true modulo.

Adapted the answer here to work: https://stackoverflow.com/a/47354356

I have also added tests to check select{Up,Down}(1001)

Nice! This could be a good utility method to add to src/math.js since I'm sure it'd be generally useful.

Done. Also added tests to test-math.js which helped me catch another issue in the code.

nainar

@cvializ PTAL? Thanks!

nainar · 2018-02-21T02:32:36Z

spec/amp-actions-and-events.md

+    <td>Changes the selected element to the currentPos - `delta`. The default `delta` is set to 1.</td>
+  </tr>
+  <tr>
+    <td><code>selectDown(decrementPos=INTEGER)</code></td>


nainar · 2018-02-21T02:33:31Z

spec/amp-actions-and-events.md

+  </tr>
+  <tr>
+    <td><code>selectUp(delta=INTEGER)</code></td>
+    <td>Changes the selected element to the currentPos - `delta`. The default `delta` is set to 1.</td>


nainar · 2018-02-21T03:00:51Z

extensions/amp-selector/0.1/amp-selector.js

+    // Change the selection to the next element in the specified direction.
+    // The selection should loop around if the user attempts to go one
+    // past the beginning or end.
+    const previousIndex = this.options_.indexOf(this.selectedOptions_[0]);


TIL: Javascript % is not true modulo.

Adapted the answer here to work: https://stackoverflow.com/a/47354356

I have also added tests to check select{Up,Down}(1001)

cvializ

LGTM!

cvializ · 2018-02-21T16:16:50Z

extensions/amp-selector/0.1/amp-selector.js

+    // Change the selection to the next element in the specified direction.
+    // The selection should loop around if the user attempts to go one
+    // past the beginning or end.
+    const previousIndex = this.options_.indexOf(this.selectedOptions_[0]);


Nice! This could be a good utility method to add to src/math.js since I'm sure it'd be generally useful.

cvializ · 2018-02-21T16:28:43Z

extensions/amp-selector/0.1/amp-selector.js

+      ((index % this.options_.length) +
+      this.options_.length) % this.options_.length;
+
+    user().assert(normalizedIndex >= 0,


With the true modulo change, is it mathematically possible that normalizedIndex could ever be negative? I'm not sure this user assert is necessary.

nainar

@cvializ PTAL? Thanks!

nainar · 2018-02-21T22:18:12Z

extensions/amp-selector/0.1/amp-selector.js

+      ((index % this.options_.length) +
+      this.options_.length) % this.options_.length;
+
+    user().assert(normalizedIndex >= 0,


nainar · 2018-02-21T23:08:45Z

extensions/amp-selector/0.1/amp-selector.js

+    // Change the selection to the next element in the specified direction.
+    // The selection should loop around if the user attempts to go one
+    // past the beginning or end.
+    const previousIndex = this.options_.indexOf(this.selectedOptions_[0]);


Done. Also added tests to test-math.js which helped me catch another issue in the code.

cvializ

Double LGTM!

nainar · 2018-02-22T00:06:36Z

@cvializ feel free to merge since the checks are passing!

* WIP * Finalize implementation and tests * Make cvializ@ suggestions - change input argument name and clean up code * Cater for large negative numbers and add tests to check for that too * Move mod functionality to helper and add tests too

googlebot added the cla: yes label Feb 12, 2018

nainar added 2 commits February 20, 2018 13:56

WIP

6ddfed6

Finalize implementation and tests

524a18a

nainar force-pushed the amp_selector_actions branch from f58b751 to 524a18a Compare February 20, 2018 06:48

nainar commented Feb 20, 2018

View reviewed changes

nainar mentioned this pull request Feb 20, 2018

<amp-selector> element toggle the 'selected' attribute #13553

Merged

cvializ suggested changes Feb 20, 2018

View reviewed changes

Make cvializ@ suggestions - change input argument name and clean up code

2d3bd60

nainar commented Feb 21, 2018

View reviewed changes

cvializ suggested changes Feb 21, 2018

View reviewed changes

Cater for large negative numbers and add tests to check for that too

33f521e

nainar commented Feb 21, 2018

View reviewed changes

cvializ approved these changes Feb 21, 2018

View reviewed changes

cvializ reviewed Feb 21, 2018

View reviewed changes

Move mod functionality to helper and add tests too

a848f21

nainar commented Feb 21, 2018

View reviewed changes

cvializ approved these changes Feb 21, 2018

View reviewed changes

cvializ merged commit 5546290 into ampproject:master Feb 22, 2018

aghassemi mentioned this pull request Feb 22, 2018

Status Update 2018-02-19 #13549

Closed

4lbertoC mentioned this pull request Jul 23, 2019

🐛 Fix amp-selector in form not submitted when using selectUp/selectDown actions #23477

Merged

<amp-selector> Add select{Up/Down} actions #13439

<amp-selector> Add select{Up/Down} actions #13439

Conversation

nainar commented Feb 12, 2018 • edited Loading

nainar commented Feb 12, 2018

cvializ commented Feb 16, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nainar left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nainar left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nainar left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cvializ left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nainar left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cvializ left a comment

Choose a reason for hiding this comment

nainar commented Feb 22, 2018

nainar commented Feb 12, 2018 •

edited

Loading