Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 5 commits into from
Feb 22, 2018
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6ddfed6
WIP
nainar Feb 20, 2018
524a18a
Finalize implementation and tests
nainar Feb 20, 2018
2d3bd60
Make cvializ@ suggestions - change input argument name and clean up code
nainar Feb 21, 2018
33f521e
Cater for large negative numbers and add tests to check for that too
nainar Feb 21, 2018
a848f21
Move mod functionality to helper and add tests too
nainar Feb 21, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions extensions/amp-selector/0.1/amp-selector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

const args = invocation.args;
if (args && args['incrementPos'] !== undefined) {
this.select_(-1 * args['incrementPos']);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

} else {
this.select_(-1);
}
}, ActionTrust.LOW);

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: this could be simplified to eliminate the branch.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

this.select_(args['decrementPos']);
} else {
this.select_(1);
}
}, ActionTrust.LOW);
}

/** @override */
Expand Down Expand Up @@ -319,6 +337,27 @@ export class AmpSelector extends AMP.BaseElement {
}
}

/**
* Handles selectUp events.
* @param {number} incrementPos
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

*/
select_(incrementPos) {
// 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]);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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;

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. Done.
  2. Good catch! Made the change

const oldSelectedIndex_ = selectedIndex_;

selectedIndex_ = (selectedIndex_ + incrementPos) % this.options_.length;
if (selectedIndex_ < 0) {
selectedIndex_ = selectedIndex_ + this.options_.length;
}

const selectedOption = this.options_[selectedIndex_];
this.setSelection_(selectedOption);
this.clearSelection_(this.options_[oldSelectedIndex_]);
}

/**
* Handles keyboard events.
* @param {!Event} event
Expand Down
58 changes: 58 additions & 0 deletions extensions/amp-selector/0.1/test/test-amp-selector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -651,6 +651,64 @@ describes.realWin('amp-selector', {
ampSelector, 'select', /* CustomEvent */ eventMatcher);
});

it('should trigger `select` action when user uses ' +
'`selectUp`/`selectDown` action with default skip value of 1', () => {
const ampSelector = getSelector({
attributes: {
id: 'ampSelector',
},
config: {
count: 6,
},
});
ampSelector.children[0].setAttribute('selected', '');
ampSelector.build();
const impl = ampSelector.implementation_;

expect(ampSelector.hasAttribute('multiple')).to.be.false;
expect(ampSelector.children[0].hasAttribute('selected')).to.be.true;

impl.executeAction({method: 'selectDown', satisfiesTrust: () => true});
expect(ampSelector.children[0].hasAttribute('selected')).to.be.false;
expect(ampSelector.children[1].hasAttribute('selected')).to.be.true;

impl.executeAction({method: 'selectUp', satisfiesTrust: () => true});

expect(ampSelector.children[1].hasAttribute('selected')).to.be.false;
expect(ampSelector.children[0].hasAttribute('selected')).to.be.true;

});

it('should trigger `select` action when user uses ' +
'`selectUp`/`selectDown` action with user specified skip value', () => {
const ampSelector = getSelector({
attributes: {
id: 'ampSelector',
},
config: {
count: 6,
},
});
ampSelector.children[0].setAttribute('selected', '');
ampSelector.build();
const impl = ampSelector.implementation_;

expect(ampSelector.hasAttribute('multiple')).to.be.false;
expect(ampSelector.children[0].hasAttribute('selected')).to.be.true;

let args = {'incrementPos': 2};
impl.executeAction(
{method: 'selectDown', args, satisfiesTrust: () => true});
expect(ampSelector.children[0].hasAttribute('selected')).to.be.false;
expect(ampSelector.children[1].hasAttribute('selected')).to.be.true;

args = {'decrementPos': 2};
impl.executeAction(
{method: 'selectUp', args, satisfiesTrust: () => true});
expect(ampSelector.children[1].hasAttribute('selected')).to.be.false;
expect(ampSelector.children[0].hasAttribute('selected')).to.be.true;
});

describe('keyboard-select-mode', () => {

it('should have `none` mode by default', () => {
Expand Down
16 changes: 16 additions & 0 deletions spec/amp-actions-and-events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -362,6 +362,22 @@ event.response</pre></td>
</tr>
</table>

### amp-selector
<table>
<tr>
<th>Action</th>
<th>Description</th>
</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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: put backticks `` around variable names in docs

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

</tr>
<tr>
<td><code>selectDown(decrementPos=INTEGER)</code></td>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: replace decrementPos with delta

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

<td>Changes the selected element to the currentPos+decrementPos. If no decrement value is specified, the default is -1.</td>
</tr>
</table>

### amp-sidebar
<table>
<tr>
Expand Down