Add support for Bind's linked carousels use case #6797

dreamofabear · 2016-12-22T22:19:49Z

Partial for #6199.

Adds partial binding support to <amp-carousel> and <amp-selector> for the "linked carousels" Bind use case.

Support binding to [slide] in <amp-carousel> and add event slidechange with param slide
Support binding to [selected] in <amp-selector> and add event select with params option and options
Add linked carousels example HTML to examples/bind.amp.html.

Requires #6779 to be merged first.

camelburrito · 2016-12-28T20:46:33Z

extensions/amp-carousel/0.1/slidescroll.js

@@ -479,6 +499,11 @@ export class AmpSlideScroll extends BaseSlides {
    this.slideIndex_ = newIndex;
    this.hideRestOfTheSlides_(showIndexArr);
    this.setControlsState();
+
+    if (opt_isUserAction) {


i think we should make this var something like , !isBindAction it would be hard to quantify what is userAction right?

The idea is I only want to trigger an action if showSlide_() is invoked as a result of a user gesture (e.g. tap/swipe rather than during initialization). IMO isBindAction is not a good name here since it's not actually caused by Bind.

in that case lets have a wrapper and not tax showSlide_ with an extra param.

camelburrito · 2016-12-28T21:03:02Z

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

+      options.push(element.getAttribute('option'));
+    });
+    const detail = {
+      option: el.getAttribute('option'),


lets call this targetOption

and the other one selectedOptions

camelburrito · 2016-12-28T21:07:49Z

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

+    // 'options' - comma-delimited option values of all selected elements.
+    const options = [];
+    this.selectedOptions_.forEach(element => {
+      options.push(element.getAttribute('option'));


probably better to maintain a value array in setInputs_ rather than reading from the DOM again

Added a return value to setInputs_. I think this is better than maintaining an instance var since it requires less state tracking and avoids confusion about when it's updated.

camelburrito · 2016-12-28T21:12:42Z

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

+            const selectors = [];
+            for (let i = 0; i < options.length; i++) {
+              // Only use first value if multiple selection is disabled.
+              if (i > 0 && !this.isMultiple_) {


splice the array before the loop and we can get rid of breaks in the loop.

Creating a new array is less performant and not as readable IMO.

camelburrito · 2016-12-28T21:22:21Z

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

+              selectors.push(`[option='${options[i]}']`);
+            }
+            const query = selectors.join(',');
+            const elements = this.element.querySelectorAll(query);


on a second thought
lets loop through this.options_ and see if the value is in the newSelectionList and setSelection or clearSelection

camelburrito · 2016-12-28T21:24:28Z

extensions/amp-carousel/0.1/slidescroll.js

@@ -479,6 +499,11 @@ export class AmpSlideScroll extends BaseSlides {
    this.slideIndex_ = newIndex;
    this.hideRestOfTheSlides_(showIndexArr);
    this.setControlsState();
+
+    if (opt_isUserAction) {


in that case lets have a wrapper and not tax showSlide_ with an extra param.

dreamofabear

Thanks for the review.

dreamofabear · 2017-01-03T17:31:20Z

extensions/amp-carousel/0.1/slidescroll.js

@@ -479,6 +499,11 @@ export class AmpSlideScroll extends BaseSlides {
    this.slideIndex_ = newIndex;
    this.hideRestOfTheSlides_(showIndexArr);
    this.setControlsState();
+
+    if (opt_isUserAction) {


dreamofabear · 2017-01-03T17:31:32Z

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

+            const selectors = [];
+            for (let i = 0; i < options.length; i++) {
+              // Only use first value if multiple selection is disabled.
+              if (i > 0 && !this.isMultiple_) {


Creating a new array is less performant and not as readable IMO.

dreamofabear · 2017-01-03T18:11:59Z

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

+              selectors.push(`[option='${options[i]}']`);
+            }
+            const query = selectors.join(',');
+            const elements = this.element.querySelectorAll(query);


dreamofabear · 2017-01-03T18:14:40Z

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

+    // 'options' - comma-delimited option values of all selected elements.
+    const options = [];
+    this.selectedOptions_.forEach(element => {
+      options.push(element.getAttribute('option'));


Added a return value to setInputs_. I think this is better than maintaining an instance var since it requires less state tracking and avoids confusion about when it's updated.

dreamofabear · 2017-01-03T18:14:51Z

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

+      options.push(element.getAttribute('option'));
+    });
+    const detail = {
+      option: el.getAttribute('option'),


jridgewell · 2017-01-03T18:42:26Z

extensions/amp-carousel/0.1/slidescroll.js

+        case 'slide':
+          const slide = parseInt(newValue, 10);
+          user().assert(isFinite(slide), 'Invalid [slide] value: %s', newValue);
+          this.showSlide_(slide);


Why doesn't this deserve an event?

mutatedAttributesCallback is not a direct result of user action; it's called when a bound attribute has its value changed during a Bind digest.

When to fire events/actions is a design choice in Bind to avoid cycles. More discussion here.

because this was invoked by another event and we would not want to have an infinite event cycle?

camelburrito · 2017-01-03T19:11:39Z

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

+      const name = 'select';
+      const detail = {
+        targetOption: el.getAttribute('option'),
+        selectedOptions: selectedValues.join(','),


what if a value contains a comma inside of it? may be we should come up with a universal separator (and have this validated)

Good point, though any separator we'd pick would pose a similar problem. Changed mutatedAttributesCallback to allow Array values to avoid string conversion entirely.

camelburrito · 2017-01-03T19:16:47Z

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

+      const newValue = mutation.newValue;
+
+      switch (mutation.name) {
+        case 'selected':


could we not re-use the clickHandler_ (we could create a method handleChenge_(element)) for this case - would the mutation object have the target element triggering on which the change happens?

Moved to a new private method selectedAttributeMutated_.

camelburrito · 2017-01-03T19:24:08Z

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

+            return;
+          }
+          // Generate map from comma-delimited option values in `newValue`.
+          const selectedArray = String(newValue).split(',');


i think we will have to come up with something better than , to split.

camelburrito · 2017-01-03T19:25:47Z

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

+          const selectedMap = selectedArray.reduce((map, value) => {
+            map[value] = true;
+            return map;
+          }, {});


could we not just check for selectedOptions.indexOf(this.options_[i]) ? i dont think we need reduce

also we could do selectedOptions = [selectedOptions[0]] , if you dont like splice for the multiple selection case and we could get rid of the break condition below.

IMO splice on such a small array is probably negligible and break is certainly confusing :)

I used indexOf originally but thought O(n * m) performance was not great. Reverted to use indexOf which should be fine as long as number of selections is small.

Changed to use slice since you insist. :)

camelburrito · 2017-01-03T19:29:50Z

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

+    // Exit if `element` is already selected.
+    if (this.selectedOptions_.indexOf(element) >= 0) {
+      return;
+    }


im ok with this change but we should not be calling this on already selected elements :)

Acknowledged. :)

Note that this could happen in this PR since we iterate over this.options_.

camelburrito · 2017-01-03T19:35:42Z

extensions/amp-carousel/0.1/slidescroll.js

+        case 'slide':
+          const slide = parseInt(newValue, 10);
+          user().assert(isFinite(slide), 'Invalid [slide] value: %s', newValue);
+          this.showSlide_(slide);


because this was invoked by another event and we would not want to have an infinite event cycle?

camelburrito · 2017-01-03T19:40:21Z

extensions/amp-carousel/0.1/slidescroll.js

+   * @param {number} newIndex
+   * @private
+   */
+  showSlideAndTriggerAction_(newIndex) {


see if we can trigger this action on goCallback in base-slides.js and then we will be able to avoid this wrapper completely.

I think we still need it since it's called from updateOnScroll_ and scroll events are not supported by the base class.

camelburrito

LGTM - please add tests :)

dreamofabear · 2017-01-06T20:35:52Z

Good call, added tests.

camelburrito · 2017-01-07T01:08:57Z

extensions/amp-carousel/0.1/test/test-slidescroll.js

+            newValue: 2,
+          }
+        ]);
+        expect(showSlideSpy).to.have.been.calledWith(2);


we should also test for how we handle invalid values

camelburrito · 2017-01-07T01:10:43Z

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

+        newValue: '3',
+      }]);
+
+      expect(impl.options_[0].hasAttribute('selected')).to.be.false;


also check of setInputs_ is being called after each mutate.

* initial commit for linked carousels support * fix lint and type errors * PR comments * more PR comments * add unit tests * PR comments and API updates * add tag to warn()

dreamofabear requested a review from camelburrito December 22, 2016 22:19

camelburrito reviewed Dec 28, 2016

View reviewed changes

camelburrito suggested changes Dec 28, 2016

View reviewed changes

dreamofabear commented Jan 3, 2017

View reviewed changes

jridgewell reviewed Jan 3, 2017

View reviewed changes

camelburrito suggested changes Jan 3, 2017

View reviewed changes

dreamofabear force-pushed the linked-carousels branch from 158f14a to 3dc5c14 Compare January 4, 2017 18:15

camelburrito approved these changes Jan 4, 2017

View reviewed changes

camelburrito suggested changes Jan 4, 2017

View reviewed changes

camelburrito mentioned this pull request Jan 6, 2017

Expose move to slide method on slidescroll to enable flim-strip experience #6914

Merged

dreamofabear force-pushed the linked-carousels branch from 3dc5c14 to 6a0101f Compare January 6, 2017 20:35

camelburrito reviewed Jan 7, 2017

View reviewed changes

William Chou added 6 commits January 11, 2017 17:36

initial commit for linked carousels support

74c39ed

fix lint and type errors

8efb676

PR comments

4958308

more PR comments

be24ae6

add unit tests

1b4ad55

PR comments and API updates

0b75da1

dreamofabear force-pushed the linked-carousels branch from 6a0101f to 0b75da1 Compare January 11, 2017 22:39

camelburrito approved these changes Jan 11, 2017

View reviewed changes

add tag to warn()

0c6b565

dreamofabear force-pushed the linked-carousels branch from 0b27871 to 0c6b565 Compare January 12, 2017 01:23

dreamofabear merged commit eca0ca6 into ampproject:master Jan 12, 2017

dreamofabear deleted the linked-carousels branch January 12, 2017 02:36

kul3r4 mentioned this pull request Jan 25, 2017

amp-bind carousel and default selected thumbnail preview #7201

Closed

This was referenced Dec 7, 2020

🚨 Error: Attempting to access a non-existant slide %s / %s NaN 2 #31470

Closed

🚨 Error: Attempting to access a non-existant slide %s / %s NaN 2 #31471

Closed

🚨 Error: Attempting to access a non-existant slide %s / %s NaN 2 #31472

Closed

ampprojectbot mentioned this pull request Jan 11, 2021

🚨 Error: Attempting to access a non-existant slide %s / %s NaN 8 #31891

Closed

Add support for Bind's linked carousels use case #6797

Add support for Bind's linked carousels use case #6797

Conversation

dreamofabear commented Dec 22, 2016 • edited

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

dreamofabear 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

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

camelburrito left a comment

Choose a reason for hiding this comment

dreamofabear commented Jan 6, 2017

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

dreamofabear commented Dec 22, 2016 •

edited