[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() {
|
handleScrollPrevious() {
|
||||||
const cardRow = ReactDOM.findDOMNode(this.refs.rowitems);
|
const cardRow = ReactDOM.findDOMNode(this.refs.rowitems);
|
||||||
if (cardRow.scrollLeft > 0) {
|
if (cardRow.scrollLeft > 0) {
|
||||||
// check the visible cards
|
// check the visible cards
|
||||||
const cards = cardRow.getElementsByTagName("section");
|
const cards = cardRow.getElementsByTagName("section");
|
||||||
var firstVisibleCard = null;
|
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
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;
|
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
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++) {
|
for (var i = 0; i < cards.length; i++) {
|
||||||
if (this.isCardVisible(cards[i], cardRow, false)) {
|
if (this.isCardVisible(cards[i], cardRow, false)) {
|
||||||
firstVisibleCard = cards[i];
|
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
|
// check the visible cards
|
||||||
const cards = cardRow.getElementsByTagName("section");
|
const cards = cardRow.getElementsByTagName("section");
|
||||||
var lastVisibleCard = null;
|
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
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;
|
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
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++) {
|
for (var i = 0; i < cards.length; i++) {
|
||||||
if (this.isCardVisible(cards[i], cardRow, true)) {
|
if (this.isCardVisible(cards[i], cardRow, true)) {
|
||||||
lastVisibleCard = cards[i];
|
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;
|
const component = this;
|
||||||
var diff = target - cardRow.scrollLeft;
|
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
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;
|
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
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(() => {
|
setTimeout(() => {
|
||||||
cardRow.scrollLeft = cardRow.scrollLeft + tick;
|
cardRow.scrollLeft = cardRow.scrollLeft + tick;
|
||||||
if (cardRow.scrollLeft === target) {
|
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;
|
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() {
|
render() {
|
||||||
const { category, names } = this.props;
|
const { category, names } = this.props;
|
||||||
const leftNavClassName =
|
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 (
|
return (
|
||||||
<div className="card-row card-row--small">
|
<div className="card-row card-row--small">
|
||||||
<div className={leftNavClassName}>
|
<div className={leftNavClassName}>
|
||||||
<Icon ref="scrollPrevious" icon="icon-chevron-left" />
|
<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
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>
|
||||||
<div className={rightNavClassName}>
|
<div className={rightNavClassName}>
|
||||||
<Icon ref="scrollNext" icon="icon-chevron-right" />
|
<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
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>
|
</div>
|
||||||
<h3 className="card-row__header">
|
<h3 className="card-row__header">
|
||||||
{category}
|
{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;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
/*hacky way to give space for hover */
|
/*hacky way to give space for hover */
|
||||||
padding-right: 20px;
|
padding-right: 30px;
|
||||||
margin-right: -20px;
|
|
||||||
}
|
}
|
||||||
.card-row__items {
|
.card-row__items {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
/*hacky way to give space for hover */
|
/*hacky way to give space for hover */
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
margin-top: -20px;
|
margin-top: -20px;
|
||||||
padding-right: 20px;
|
padding-right: 30px;
|
||||||
margin-right: -20px;
|
margin-right: -30px;
|
||||||
}
|
}
|
||||||
.card-row__header {
|
.card-row__header {
|
||||||
margin-bottom: $spacing-vertical / 3;
|
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);
|
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)
|
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;
|
background: $color-bg;
|
||||||
color: $color-help;
|
color: $color-help;
|
||||||
box-shadow: $box-shadow-layer;
|
box-shadow: $box-shadow-layer;
|
||||||
|
|
@ -239,6 +240,13 @@ $height-card-small: $spacing-vertical * 15;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 36%;
|
top: 36%;
|
||||||
z-index: 2;
|
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 {
|
.card-row__nav.left-nav {
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -248,4 +256,4 @@ $height-card-small: $spacing-vertical * 15;
|
||||||
}
|
}
|
||||||
.card-row__nav.can-scroll {
|
.card-row__nav.can-scroll {
|
||||||
display: block
|
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