-
Notifications
You must be signed in to change notification settings - Fork 3.9k
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.
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
<amp-selector> element toggle the 'selected' attribute #13553
Changes from 7 commits
6ddfed6
524a18a
bf28c8d
2d3bd60
33f521e
4ec3718
bfd6e11
a848f21
6c8031d
29b52d8
e51d475
861554f
79f93c7
6f988ae
d043d7f
c6c85cb
0cb7e6b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -113,6 +113,28 @@ 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 => { | ||
const args = invocation.args; | ||
const delta = (args && args['delta'] !== undefined) ? -args['delta'] : -1; | ||
this.select_(delta); | ||
}, ActionTrust.LOW); | ||
|
||
this.registerAction('selectDown', invocation => { | ||
const args = invocation.args; | ||
const delta = (args && args['delta'] !== undefined) ? args['delta'] : 1; | ||
this.select_(delta); | ||
}, ActionTrust.LOW); | ||
|
||
this.registerAction('toggle', invocation => { | ||
const args = invocation.args; | ||
if (args && args['index'] !== undefined) { | ||
this.toggle_(args['index'], | ||
args['value'] !== undefined ? | ||
args['value'] : | ||
!this.options_[args['index']].hasAttribute('selected')); | ||
} | ||
}, ActionTrust.LOW); | ||
} | ||
|
||
/** @override */ | ||
|
@@ -319,6 +341,54 @@ export class AmpSelector extends AMP.BaseElement { | |
} | ||
} | ||
|
||
/** | ||
* Handles toggle action. | ||
* @param {number} index | ||
* @param {boolean} value | ||
*/ | ||
toggle_(index, value) { | ||
// 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 indexCurrentStatus = this.options_[index].hasAttribute('selected'); | ||
const indexFinalStatus = | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Done |
||
!!(value !== undefined ? value : !indexCurrentStatus); | ||
const selectedIndex = this.options_.indexOf(this.selectedOptions_[0]); | ||
|
||
// There is a change of the `selected` attribute for the element | ||
if (indexFinalStatus !== indexCurrentStatus) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Usually we use shortcut if (indexFinalStatus === indexCurrentStatus) {
return;
}
if (selectedIndex !== index) { /*...*/ } else { /*...*/ } There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Done. |
||
if (selectedIndex !== index) { | ||
this.setSelection_(this.options_[index]); | ||
this.clearSelection_(this.options_[selectedIndex]); | ||
} else { | ||
this.clearSelection_(this.options_[index]); | ||
} | ||
} | ||
} | ||
|
||
|
||
/** | ||
* Handles selectUp events. | ||
* @param {number} delta | ||
*/ | ||
select_(delta) { | ||
// 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]); | ||
const index = previousIndex + delta; | ||
const normalizedIndex = index > 0 ? | ||
index % this.options_.length : | ||
((index % this.options_.length) + | ||
this.options_.length) % this.options_.length; | ||
|
||
user().assert(normalizedIndex >= 0, | ||
'This should have been positive'); | ||
|
||
this.setSelection_(this.options_[normalizedIndex]); | ||
this.clearSelection_(this.options_[previousIndex]); | ||
} | ||
|
||
/** | ||
* Handles keyboard events. | ||
* @param {!Event} event | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Typically for toggle functions the
value
parameter is optional. This will help eliminate the branches in the action callback.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can base your toggle implementation on the
toggleExperiments
function insrc/experiments.js
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Changed the code.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmm, I was thinking that this method would have
@param {boolean=} opt_value
, then in theregisterAction
callback just callthis.toggle_(args['index'], args['value'])
since you're checkinghasAttribute
and ifvalue
is undefined twice.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yup that makes sense. Made the change.