[WIP] Discover page horizontal scroll implementation #394
|
|
@ -15,22 +15,13 @@ 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
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
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 prevIcon = ReactDOM.findDOMNode(this.refs.scrollPrevious);
|
||||
|
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 nextIcon = ReactDOM.findDOMNode(this.refs.scrollNext);
|
||||
|
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.scrollPreviousHandler = this.handleScrollPrevious.bind(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
|
||||
this.scrollNextHandler = this.handleScrollNext.bind(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
|
||||
prevIcon.addEventListener("click", this.scrollPreviousHandler);
|
||||
|
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
|
||||
nextIcon.addEventListener("click", this.scrollNextHandler);
|
||||
|
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
|
||||
handleScrollPrevious() {
|
||||
const cardRow = ReactDOM.findDOMNode(this.refs.rowitems);
|
||||
if (cardRow.scrollLeft > 0) {
|
||||
// check the visible cards
|
||||
const cards = cardRow.getElementsByTagName("section");
|
||||
var firstVisibleCard = null;
|
||||
|
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 firstVisibleIdx = -1;
|
||||
|
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
|
||||
let firstVisibleCard = null;
|
||||
|
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
|
||||
let firstVisibleIdx = -1;
|
||||
|
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++) {
|
||||
if (this.isCardVisible(cards[i], cardRow, false)) {
|
||||
firstVisibleCard = cards[i];
|
||||
|
|
@ -61,8 +52,8 @@ 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
|
||||
|
||||
// check the visible cards
|
||||
const cards = cardRow.getElementsByTagName("section");
|
||||
var lastVisibleCard = null;
|
||||
|
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 lastVisibleIdx = -1;
|
||||
|
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
|
||||
let lastVisibleCard = null;
|
||||
|
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
|
||||
let lastVisibleIdx = -1;
|
||||
|
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++) {
|
||||
if (this.isCardVisible(cards[i], cardRow, true)) {
|
||||
lastVisibleCard = cards[i];
|
||||
|
|
@ -108,8 +99,8 @@ 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
|
||||
}
|
||||
|
||||
const component = this;
|
||||
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
|
||||
const 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
|
||||
const 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(() => {
|
||||
cardRow.scrollLeft = cardRow.scrollLeft + tick;
|
||||
if (cardRow.scrollLeft === target) {
|
||||
|
|
@ -157,13 +148,6 @@ 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
|
||||
return 1;
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
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 prevIcon = ReactDOM.findDOMNode(this.refs.scrollPrevious);
|
||||
|
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 nextIcon = ReactDOM.findDOMNode(this.refs.scrollNext);
|
||||
|
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
|
||||
prevIcon.removeEventListener("click", this.scrollPreviousHandler);
|
||||
|
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
|
||||
nextIcon.removeEventListener("click", this.scrollNextHandler);
|
||||
|
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
|
||||
render() {
|
||||
const { category, names } = this.props;
|
||||
const leftNavClassName =
|
||||
|
|
@ -176,10 +160,20 @@ 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
|
||||
return (
|
||||
<div className="card-row card-row--small">
|
||||
<div className={leftNavClassName}>
|
||||
<Icon ref="scrollPrevious" icon="icon-chevron-left" />
|
||||
|
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
|
||||
<a
|
||||
|
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
|
||||
className="card-row__scroll-button"
|
||||
|
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
|
||||
onClick={this.handleScrollPrevious.bind(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
|
||||
>
|
||||
|
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
|
||||
<Icon icon="icon-chevron-left" />
|
||||
|
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
|
||||
</a>
|
||||
|
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
|
||||
</div>
|
||||
<div className={rightNavClassName}>
|
||||
<Icon ref="scrollNext" icon="icon-chevron-right" />
|
||||
|
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
|
||||
<a
|
||||
|
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
|
||||
className="card-row__scroll-button"
|
||||
|
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
|
||||
onClick={this.handleScrollNext.bind(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
|
||||
>
|
||||
|
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
|
||||
<Icon icon="icon-chevron-right" />
|
||||
|
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
|
||||
</a>
|
||||
|
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
|
||||
</div>
|
||||
<h3 className="card-row__header">
|
||||
{category}
|
||||
|
|
|
|||
|
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
|
||||
|
|
@ -205,18 +205,19 @@ $height-card-small: $spacing-vertical * 15;
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
|
||||
/*hacky way to give space for hover */
|
||||
padding-right: 20px;
|
||||
margin-right: -20px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
.card-row__items {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
/*hacky way to give space for hover */
|
||||
padding-top: 20px;
|
||||
margin-top: -20px;
|
||||
padding-right: 20px;
|
||||
margin-right: -20px;
|
||||
padding-right: 30px;
|
||||
margin-right: -30px;
|
||||
}
|
||||
.card-row__header {
|
||||
margin-bottom: $spacing-vertical / 3;
|
||||
|
|
@ -229,7 +230,7 @@ $height-card-small: $spacing-vertical * 15;
|
|||
top: ($font-size * 1.4 * $font-line-height) + ($spacing-vertical / 3);
|
||||
height: ($width-card-small * 9 / 16) + ($font-size * 0.82 * $font-line-height * 4) + ($spacing-vertical * 4/3)
|
||||
}
|
||||
.card-row__nav .icon {
|
||||
.card-row__nav .card-row__scroll-button {
|
||||
background: $color-bg;
|
||||
color: $color-help;
|
||||
box-shadow: $box-shadow-layer;
|
||||
|
|
@ -239,6 +240,13 @@ $height-card-small: $spacing-vertical * 15;
|
|||
left: 0;
|
||||
top: 36%;
|
||||
z-index: 2;
|
||||
opacity: 0.5;
|
||||
transition: transform 60ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
opacity: 1.0;
|
||||
transform: scale($card-link-scaling * 1.1)
|
||||
}
|
||||
}
|
||||
.card-row__nav.left-nav {
|
||||
left: 0;
|
||||
|
|
@ -248,4 +256,4 @@ $height-card-small: $spacing-vertical * 15;
|
|||
}
|
||||
.card-row__nav.can-scroll {
|
||||
display: block
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Would it be cleaner to handle this just by wrapping the
<Icon>in something like<a onClick={this.handleScrollNext.bind(this)} />?No
var:P