The following react component here:
http://engineering.kapost.com/2018/05/horizontal-react-component-slider/
Working example for the react component: https://codesandbox.io/s/nkm614n740?from-embed
I have been trying to figure out how to convert this into a simplified jquery component/function, but I just can't get around some of the functions that are working in react out of the box.
Here is the full code below:
this.state = {
marginLeft: 0,
};
renderLeftArrow = () => {
if (this.state.marginLeft !== 0) {
return (
<button className="caret caret-left" onClick={this.handleLeftClicked}>
{this.props.renderLeftArrow()}
</button>
);
}
return null;
}
const remainingWidth = contentWidth - (sliderWidth) - currentMarginLeft;
handleLeftClicked = () => {
const currentMarginLeft = this.state.marginLeft;
const sliderWidth = this.slider.offsetWidth;
let marginLeft;
if (currentMarginLeft > sliderWidth) {
marginLeft = currentMarginLeft - sliderWidth;
} else {
marginLeft = 0;
}
this.setState({ marginLeft });
}
handleRightClicked = () => {
const currentMarginLeft = this.state.marginLeft;
const sliderWidth = this.slider.offsetWidth
const contentWidth = this.sliderContent.offsetWidth;
const remainingWidth = contentWidth - (sliderWidth - arrowWidth) - currentMarginLeft;
let marginLeft;
if (remainingWidth > 0) {
if (remainingWidth <= sliderWidth) {
marginLeft = currentMarginLeft + remainingWidth;
} else {
marginLeft = currentMarginLeft + sliderWidth;
}
} else {
marginLeft = currentMarginLeft;
}
this.setState({ marginLeft });
};
componentDidMount() {
window.addEventListener('resize', this.handleResize());
this.resetMargin();
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize());
}
Below is what I was able to achieve thus far trying to 'reverse-engineer' it. Looks like its somewhat working but could use some pointers...
$(".nav-menu").css('margin-left', '0px');
var navWrapper = $("#js-nav-menu-wrapper"),
sliderWidth = navWrapper.outerWidth(),
contentWidth = navWrapper.children('.nav-menu').outerWidth(),
currentMarginLeft = parseFloat(navWrapper.children('.nav-menu').css('margin-left')),
remainingWidth,
setMargin;
var updateSlider = function() {
if ('#js-nav-menu-wrapper') {
sliderWidth = navWrapper.outerWidth();
contentWidth = navWrapper.children('.nav-menu').outerWidth();
currentMarginLeft = parseFloat(navWrapper.children('.nav-menu').css('margin-left'));
remainingWidth = contentWidth - sliderWidth - currentMarginLeft;
console.log(remainingWidth);
return this;
} else {
navWrapper.children('.nav-menu').css('margin-left', '0px');
}
};
var navMenuScrollRight = function() {
updateSlider();
if (currentMarginLeft > sliderWidth) {
setMargin = currentMarginLeft - sliderWidth;
} else {
setMargin = 0;
}
navWrapper.children('.nav-menu').css({
marginLeft: setMargin
});
};
var navMenuScrollLeft = function() {
updateSlider();
if (remainingWidth > 0) {
if (remainingWidth <= sliderWidth) {
setMargin = currentMarginLeft + remainingWidth;
} else {
setMargin = currentMarginLeft + sliderWidth;
}
} else {
setMargin = currentMarginLeft;
}
navWrapper.children('.nav-menu').css({
marginLeft: setMargin
});
};
$('#js-scroll-right').click(function() {
navMenuScrollRight();
event.preventDefault();
});
$('#js-scroll-left').click(function() {
navMenuScrollLeft();
event.preventDefault();
});
.main-menu {
flex: 1;
display: flex;
align-items: stretch;
overflow: initial;
-ms-overflow-style: -ms-autohiding-scrollbar;
transition: 1s all;
}
.nav-menu-wrapper {
-webkit-box-flex: 0;
-ms-flex: 0 1 100%;
display: flex;
flex: 0 1 100%;
width: 0;
overflow: hidden;
}
.nav-menu {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
align-items: stretch;
-ms-flex: 0 1 100%;
flex: 0 1 100%;
transition: margin 0.5s ease-out 0s;
list-style: none;
}
.nav-menu li {
display: inline-flex;
align-items: center;
padding: 1rem;
min-width: 100px;
border: 1px solid #f3f3f3;
}
.nav-padel-left,
.nav-padel-right {
display: flex;
align-items: center;
justify-content: center;
min-width:50px;
border: 1px solid;
background-color: skyblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-menu">
<div id="js-scroll-left" class="nav-padel-left"><<</div>
<div id="js-nav-menu-wrapper" class="nav-menu-wrapper">
<ul class="nav-menu js-nav-built" style="margin-left: 0px;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
</ul>
</div>
<div id="js-scroll-right" class="nav-padel-left">>></div>
</div>
marginLeft. Just copy the code as is, remove theextends React.Componentbit, change all the JSX to jQuery DOM manipulation, and callthis.render()in the constructor. That should get you on the right track. Once you have made progress, post again if you get stuck with the specific problem. – GregL Jan 3 at 21:54