Skip to content

Commit

Permalink
Prepare for publishing
Browse files Browse the repository at this point in the history
  • Loading branch information
@leandrowd
leandrowd committed Apr 29, 2017
1 parent 17f3c6e commit 05148db
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 72 deletions.
137 changes: 67 additions & 70 deletions lib/components/Carousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,6 @@ var _cssClasses = require('../cssClasses');

var _cssClasses2 = _interopRequireDefault(_cssClasses);

var _objectAssign = require('../object-assign');

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _CSSTranslate = require('../CSSTranslate');

var _CSSTranslate2 = _interopRequireDefault(_CSSTranslate);
Expand All @@ -54,6 +50,8 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var noop = function noop() {};

var Carousel = function (_Component) {
_inherits(Carousel, _Component);

Expand All @@ -63,12 +61,20 @@ var Carousel = function (_Component) {
var _this = _possibleConstructorReturn(this, (Carousel.__proto__ || Object.getPrototypeOf(Carousel)).call(this, props));

_this.autoPlay = function () {
if (!_this.props.autoPlay) {
return;
}

_this.timer = setTimeout(function () {
_this.increment();
}, _this.props.interval);
};

_this.clearAutoPlay = function () {
if (!_this.props.autoPlay) {
return;
}

clearTimeout(_this.timer);
};

Expand Down Expand Up @@ -117,18 +123,14 @@ var Carousel = function (_Component) {

_this.handleClickItem = function (index, item) {
if (_this.state.cancelClick) {
_this.selectItem({
_this.setState({
cancelClick: false
});

return;
}

var handler = _this.props.onClickItem;

if (typeof handler === 'function') {
handler(index, item);
}
_this.props.onClickItem(index, item);

if (index !== _this.state.selectedItem) {
_this.setState({
Expand All @@ -138,36 +140,29 @@ var Carousel = function (_Component) {
};

_this.handleOnChange = function (index, item) {
var handler = _this.props.onChange;

if (typeof handler === 'function') {
handler(index, item);
}
_this.props.onChange(index, item);
};

_this.handleClickThumb = function (index, item) {
var handler = _this.props.onClickThumb;

if (typeof handler === 'function') {
handler(index, item);
}
_this.props.onClickThumb(index, item);

_this.selectItem({
selectedItem: index
});
};

_this.onSwipeStart = function () {
_this.clearAutoPlay();
_this.setState({
swiping: true
});
};

_this.onSwipeEnd = function () {
_this.setState({
swiping: false,
cancelClick: true
swiping: false
});
_this.autoPlay();
};

_this.onSwipeMove = function (delta) {
Expand Down Expand Up @@ -199,7 +194,15 @@ var Carousel = function (_Component) {
});

// allows scroll if the swipe was within the tolerance
return Math.abs(axisDelta) > _this.props.swipeScrollTolerance;
var hasMoved = Math.abs(axisDelta) > _this.props.swipeScrollTolerance;

if (hasMoved && !_this.state.cancelClick) {
_this.setState({
cancelClick: true
});
}

return hasMoved;
};

_this.decrement = function (positions) {
Expand Down Expand Up @@ -244,6 +247,36 @@ var Carousel = function (_Component) {
_this.handleOnChange(state.selectedItem, _this.props.children[state.selectedItem]);
};

_this.getInitialImage = function () {
var selectedItem = _this.props.selectedItem;
var item = _this.refs['item' + selectedItem];
var images = item && item.getElementsByTagName('img');
return images && images[selectedItem];
};

_this.getVariableImageHeight = function (position) {
var item = _this.refs['item' + position];
var images = item && item.getElementsByTagName('img');
if (_this.state.hasMount && images.length > 0) {
var image = images[0];

if (!image.complete) {
// if the image is still loading, the size won't be available so we trigger a new render after it's done
var onImageLoad = function onImageLoad() {
_this.forceUpdate();
image.removeEventListener('load', onImageLoad);
};

image.addEventListener('load', onImageLoad);
}

var height = image.clientHeight;
return height > 0 ? height : null;
}

return null;
};

_this.state = {
initialized: false,
selectedItem: props.selectedItem,
Expand Down Expand Up @@ -437,40 +470,6 @@ var Carousel = function (_Component) {
this.props.children
);
}
}, {
key: 'getInitialImage',
value: function getInitialImage() {
var selectedItem = this.props.selectedItem;
var item = this.refs['item' + selectedItem];
var images = item && item.getElementsByTagName('img');
return images && images[selectedItem];
}
}, {
key: 'getVariableImageHeight',
value: function getVariableImageHeight(position) {
var _this4 = this;

var item = this.refs['item' + position];
var images = item && item.getElementsByTagName('img');
if (this.state.hasMount && images.length > 0) {
var image = images[0];

if (!image.complete) {
// if the image is still loading, the size won't be available so we trigger a new render after it's done
var onImageLoad = function onImageLoad() {
_this4.forceUpdate();
image.removeEventListener('load', onImageLoad);
};

image.addEventListener('load', onImageLoad);
}

var height = image.clientHeight;
return height > 0 ? height : null;
}

return null;
}
}, {
key: 'render',
value: function render() {
Expand Down Expand Up @@ -526,22 +525,17 @@ var Carousel = function (_Component) {
var containerStyles = {};

if (isHorizontal) {
(0, _objectAssign2.default)(swiperProps, {
onSwipeLeft: this.increment,
onSwipeRight: this.decrement
});
swiperProps.onSwipeLeft = this.increment;
swiperProps.onSwipeRight = this.decrement;

if (this.props.dynamicHeight) {
var itemHeight = this.getVariableImageHeight(this.state.selectedItem);
swiperProps.style.height = itemHeight || 'auto';
containerStyles.height = itemHeight || 'auto';
}
} else {
(0, _objectAssign2.default)(swiperProps, {
onSwipeUp: this.decrement,
onSwipeDown: this.increment
});

swiperProps.onSwipeUp = this.decrement;
swiperProps.onSwipeDown = this.increment;
swiperProps.style.height = this.state.itemSize;
containerStyles.height = this.state.itemSize;
}
Expand Down Expand Up @@ -584,9 +578,9 @@ Carousel.propTypes = {
infiniteLoop: _propTypes2.default.bool,
showThumbs: _propTypes2.default.bool,
selectedItem: _propTypes2.default.number,
onClickItem: _propTypes2.default.func,
onClickThumb: _propTypes2.default.func,
onChange: _propTypes2.default.func,
onClickItem: _propTypes2.default.func.isRequired,
onClickThumb: _propTypes2.default.func.isRequired,
onChange: _propTypes2.default.func.isRequired,
axis: _propTypes2.default.oneOf(['horizontal', 'vertical']),
width: customPropTypes.unit,
useKeyboardArrows: _propTypes2.default.bool,
Expand Down Expand Up @@ -614,6 +608,9 @@ Carousel.defaultProps = {
transitionTime: 350,
swipeScrollTolerance: 5,
dynamicHeight: false,
emulateTouch: false
emulateTouch: false,
onClickItem: noop,
onClickThumb: noop,
onChange: noop
};
exports.default = Carousel;
3 changes: 2 additions & 1 deletion lib/styles/carousel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,8 @@
background: none; }
.carousel img {
width: 100%;
display: inline-block; }
display: inline-block;
pointer-events: none; }
.carousel .carousel {
position: relative; }
.carousel .control-arrow {
Expand Down
2 changes: 1 addition & 1 deletion lib/styles/carousel.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 05148db

Please sign in to comment.