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

nainar · 2018-02-20T09:25:53Z

Fixes #13550 by adding the ability to toggle the selected attribute on an element inside <amp-selector>

The attribute has two attributes:

The index of the element in the list of options that needs to be toggled
(optional) what the value should be set to. Defaults to flipping the selected attribute.

E.g.:
<button on="tap:mySelector.toggle(index=3, value=true)">Select the third option</button>

P.S. The parent of this branch was #13439. Will rebase once that lands.

nainar · 2018-02-20T09:26:28Z

@cvializ could you TAL?

Also sorry for the PRs, feel free to distribute amongst others on the team as needed! :)

cvializ

Hey it's no problem, will do : )

cvializ · 2018-02-20T18:13:53Z

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

+  /**
+   * Handles toggle action.
+   * @param {number} index
+   * @param {boolean} value


Typically for toggle functions the value parameter is optional. This will help eliminate the branches in the action callback.

You can base your toggle implementation on the toggleExperiments function in src/experiments.js

Changed the code.

Hmm, I was thinking that this method would have @param {boolean=} opt_value, then in the registerAction callback just call this.toggle_(args['index'], args['value']) since you're checking hasAttribute and if value is undefined twice.

Yup that makes sense. Made the change.

cvializ · 2018-02-20T18:14:12Z

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

+    // past the beginning or end.
+    const selectedIndex_ = this.options_.indexOf(this.selectedOptions_[0]);
+
+    if (value == true) {


nit: you can simplify this to if (value) {

Changed the code.

nainar

Rewrote the code to be cleaner hopefully, PTAL? Thanks!

nainar · 2018-02-21T05:35:18Z

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

+  /**
+   * Handles toggle action.
+   * @param {number} index
+   * @param {boolean} value


Changed the code.

nainar · 2018-02-21T05:35:19Z

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

+    // past the beginning or end.
+    const selectedIndex_ = this.options_.indexOf(this.selectedOptions_[0]);
+
+    if (value == true) {


Changed the code.

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

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

+    // The selection should loop around if the user attempts to go one
+    // past the beginning or end.
+    const indexCurrentStatus = this.options_[index].hasAttribute('selected');
+    const indexFinalStatus =


The !! shouldn't be necessary here, since value and indexCurrentStatus are already boolean.

cvializ · 2018-02-21T16:27:09Z

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

+    const selectedIndex = this.options_.indexOf(this.selectedOptions_[0]);
+
+    // There is a change of the `selected` attribute for the element
+    if (indexFinalStatus !== indexCurrentStatus) {


Usually we use shortcut if statements to avoid nested ifs, like

if (indexFinalStatus === indexCurrentStatus) { return; } if (selectedIndex !== index) { /*...*/ } else { /*...*/ }

cvializ · 2018-02-21T16:27:13Z

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

+  /**
+   * Handles toggle action.
+   * @param {number} index
+   * @param {boolean} value


Hmm, I was thinking that this method would have @param {boolean=} opt_value, then in the registerAction callback just call this.toggle_(args['index'], args['value']) since you're checking hasAttribute and if value is undefined twice.

…tor_actions

nainar

@cvializ PTAL?

nainar · 2018-02-21T23:56:43Z

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

+  /**
+   * Handles toggle action.
+   * @param {number} index
+   * @param {boolean} value


Yup that makes sense. Made the change.

nainar · 2018-02-21T23:56:59Z

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

+    // The selection should loop around if the user attempts to go one
+    // past the beginning or end.
+    const indexCurrentStatus = this.options_[index].hasAttribute('selected');
+    const indexFinalStatus =


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

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

+    const selectedIndex = this.options_.indexOf(this.selectedOptions_[0]);
+
+    // There is a change of the `selected` attribute for the element
+    if (indexFinalStatus !== indexCurrentStatus) {


…tor_actions

cvializ · 2018-02-22T16:55:41Z

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

+    this.registerAction('toggle', invocation => {
+      const args = invocation.args;
+      if (args && args['index'] !== undefined) {
+        this.toggle_(args['index'], args['value']);


Let's do a user assert to make sure the index is valid

Added an assert to make sure that the index is > 0, could also add one to make sure it is less than length of the options

I think that both bounds would be helpful. If it ends up being too noisy we can downgrade it to a user().warn() later.

nainar

@cvializ is an assert for index >=0 enough or do you want one for <= length of options too?

nainar · 2018-02-23T00:36:30Z

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

+    this.registerAction('toggle', invocation => {
+      const args = invocation.args;
+      if (args && args['index'] !== undefined) {
+        this.toggle_(args['index'], args['value']);


Added an assert to make sure that the index is > 0, could also add one to make sure it is less than length of the options

nainar · 2018-02-24T04:47:07Z

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

+    this.registerAction('toggle', invocation => {
+      const args = invocation.args;
+      user().assert(args['index'] >= 0, '\'index\' must be greater than 0');
+      user().assert(args['index'] < this.options_.length, '\'index\' must be less than the ' +


Added the aditional assert.

nainar · 2018-02-24T04:47:20Z

@cvializ added the additional assert. PTAL?

cvializ

LGTM

) * WIP * Finalize implementation and tests * 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 * Rewrite code and tests to be cleaner * Move mod functionality to helper and add tests too * Remove unnecessary attribute logic * Add assert to ensure index is > 0 * Add additional assert * Linter error

nainar added 3 commits February 20, 2018 13:56

WIP

6ddfed6

Finalize implementation and tests

524a18a

Implementation and tests

bf28c8d

googlebot added the cla: yes label Feb 20, 2018

cvializ suggested changes Feb 20, 2018

View reviewed changes

nainar added 4 commits February 21, 2018 11:19

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

2d3bd60

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

33f521e

Merge upstream

4ec3718

Rewrite code and tests to be cleaner

bfd6e11

nainar commented Feb 21, 2018

View reviewed changes

cvializ suggested changes Feb 21, 2018

View reviewed changes

nainar added 5 commits February 22, 2018 10:23

Move mod functionality to helper and add tests too

a848f21

Merge branch 'amp_selector_actions' into amp_selector_toggle

6c8031d

Merge branch 'master' of github.com:ampproject/amphtml into amp_selec…

29b52d8

…tor_actions

Merge branch 'amp_selector_actions' into amp_selector_toggle

e51d475

Remove unnecessary attribute logic

861554f

nainar commented Feb 22, 2018

View reviewed changes

nainar added 2 commits February 22, 2018 12:26

Merge branch 'master' of github.com:ampproject/amphtml into amp_selec…

79f93c7

…tor_actions

Merge branch 'amp_selector_actions' into amp_selector_toggle

6f988ae

cvializ reviewed Feb 22, 2018

View reviewed changes

Add assert to ensure index is > 0

d043d7f

nainar commented Feb 23, 2018

View reviewed changes

Add additional assert

c6c85cb

nainar commented Feb 24, 2018

View reviewed changes

Linter error

0cb7e6b

cvializ approved these changes Feb 26, 2018

View reviewed changes

cvializ merged commit ca43a58 into ampproject:master Feb 26, 2018

kul3r4 mentioned this pull request Feb 8, 2019

Toggle() function in <amp-selector> throws exception ampproject/amp-by-example#1821

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

nainar commented Feb 20, 2018

nainar commented Feb 20, 2018

cvializ left a comment

cvializ Feb 20, 2018

cvializ Feb 20, 2018

nainar Feb 21, 2018

cvializ Feb 21, 2018

nainar Feb 21, 2018

cvializ Feb 20, 2018

nainar Feb 21, 2018

nainar left a comment

nainar Feb 21, 2018

nainar Feb 21, 2018

cvializ Feb 21, 2018

nainar Feb 21, 2018

cvializ Feb 21, 2018

nainar Feb 21, 2018

cvializ Feb 21, 2018

nainar left a comment

nainar Feb 21, 2018

nainar Feb 21, 2018

nainar Feb 21, 2018

cvializ Feb 22, 2018

nainar Feb 23, 2018

cvializ Feb 23, 2018

nainar left a comment

nainar Feb 23, 2018

nainar Feb 24, 2018

nainar commented Feb 24, 2018

cvializ left a comment

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

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

Conversation

nainar commented Feb 20, 2018

nainar commented Feb 20, 2018

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

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

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

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

nainar commented Feb 24, 2018

cvializ left a comment

Choose a reason for hiding this comment