[WIP] Discover page horizontal scroll implementation #394
|
|
@ -41,11 +41,18 @@ class FeaturedCategory extends React.PureComponent {
|
|||
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
const numDisplayed = this.numDisplayedCards(cardRow);
|
||||
const scrollToIdx = firstVisibleIdx - numDisplayed;
|
||||
cardRow.scrollLeft = scrollToIdx < 0 ? 0 : cards[scrollToIdx].offsetLeft;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const animationCallback = () => {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
this.setState({
|
||||
canScrollPrevious: cardRow.scrollLeft !== 0,
|
||||
canScrollNext: true,
|
||||
});
|
||||
};
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
this.scrollCardItemsLeftAnimated(
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
cardRow,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
scrollToIdx < 0 ? 0 : cards[scrollToIdx].offsetLeft,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
100,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
animationCallback
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
);
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -65,23 +72,63 @@ class FeaturedCategory extends React.PureComponent {
|
|||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
if (lastVisibleCard) {
|
||||
const numDisplayed = this.numDisplayedCards(cardRow);
|
||||
cardRow.scrollLeft = Math.min(
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
lastVisibleCard.offsetLeft,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
cardRow.scrollWidth - cardRow.clientWidth
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
);
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const animationCallback = () => {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
// update last visible index after scroll
|
||||
lastVisibleIdx += numDisplayed;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
for (var i = 0; i < cards.length; i++) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
if (this.isCardVisible(cards[i], cardRow, true)) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
lastVisibleIdx = i;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
if (lastVisibleIdx > cards.length - 1) {
|
||||
lastVisibleIdx = cards.length - 1;
|
||||
}
|
||||
|
||||
this.setState({ canScrollPrevious: true });
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
if (lastVisibleIdx === cards.length - 1) {
|
||||
this.setState({ canScrollNext: false });
|
||||
}
|
||||
};
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
this.scrollCardItemsLeftAnimated(
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
cardRow,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
Math.min(
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
lastVisibleCard.offsetLeft,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
cardRow.scrollWidth - cardRow.clientWidth
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
),
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
100,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
animationCallback
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
);
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
scrollCardItemsLeftAnimated(cardRow, target, duration, callback) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
if (!duration || duration <= diff) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
cardRow.scrollLeft = target;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
if (callback) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
callback();
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
return;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const component = this;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
var diff = target - cardRow.scrollLeft;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
var tick = diff / duration * 10;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
setTimeout(() => {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
cardRow.scrollLeft = cardRow.scrollLeft + tick;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
if (cardRow.scrollLeft === target) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
if (callback) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
callback();
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
return;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
component.scrollCardItemsLeftAnimated(
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
cardRow,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
target,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
duration - 10,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
callback
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
);
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}, 10);
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
||||
isCardVisible(section, cardRow, partialVisibility) {
|
||||
|
|
|
|||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
Would it be cleaner to handle this just by wrapping the
<Icon>in something like<a onClick={this.handleScrollNext.bind(this)} />?No
var:P