You're Invited:Meet the Socket Team at RSAC and BSidesSF 2026, March 23–26.RSVP →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

deku-carousel

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

deku-carousel - npm Package Compare versions

Comparing version
1.1.2
 to
1.2.0
+192
dist.js
/** @jsx dom */
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _magicVirtualElement = require('magic-virtual-element');
var _magicVirtualElement2 = _interopRequireDefault(_magicVirtualElement);
var _swipe = require('swipe');
var _swipe2 = _interopRequireDefault(_swipe);
var propTypes = {
arrows: {
type: 'boolean'
},
arrowNext: {
type: 'string'
},
arrowPrev: {
type: 'string'
},
'class': {
type: 'string'
},
duration: {
type: 'number'
},
fastThreshold: {
type: 'number'
},
interval: {
type: 'number'
},
onChange: {
type: 'function'
},
play: {
type: 'boolean'
},
threshold: {
type: 'number'
}
};
function initialState() {
return {
active: 0
};
}
function afterMount(_ref, el, setState) {
var props = _ref.props;
var arrows = props.arrows;
var duration = props.duration;
var fastThreshold = props.fastThreshold;
var indicator = props.indicator;
var interval = props.interval;
var onChange = props.onChange;
var play = props.play;
var threshold = props.threshold;
var swipe = new _swipe2['default'](el);
window.addEventListener('resize', function () {
return swipe.refresh();
});
swipe.on('show', function (i, el) {
setState({ active: i });
if (onChange) {
onChange(el, i);
}
});
if (typeof duration === 'number') {
swipe.duration(duration);
}
if (typeof fastThreshold === 'number') {
swipe.fastThreshold(fastThreshold);
}
if (typeof interval === 'number') {
swipe.interval(interval);
}
if (typeof threshold === 'number') {
swipe.threshold(threshold);
}
if (arrows) {
var prev = el.querySelector('.Carousel-control--prev');
var next = el.querySelector('.Carousel-control--next');
prev.addEventListener('click', function (e) {
e.preventDefault();
swipe.prev();
});
next.addEventListener('click', function (e) {
e.preventDefault();
swipe.next();
});
}
if (indicator) {
var selector = el.querySelectorAll('.Carousel-indicator');
Array.from(selector).forEach(function (el, i) {
el.addEventListener('click', function (e) {
e.preventDefault();
swipe.show(i);
});
});
}
if (play) {
swipe.play();
}
}
function render(_ref2) {
var props = _ref2.props;
var state = _ref2.state;
var arrows = props.arrows;
var arrowNext = props.arrowNext;
var arrowPrev = props.arrowPrev;
var children = props.children;
var indicator = props.indicator;
var active = state.active;
function getArrows() {
if (!arrows) {
return null;
}
return (0, _magicVirtualElement2['default'])(
'div',
{ 'class': 'Carousel-controls' },
(0, _magicVirtualElement2['default'])(
'button',
{ 'class': 'Carousel-control Carousel-control--prev' },
arrowPrev || null
),
(0, _magicVirtualElement2['default'])(
'button',
{ 'class': 'Carousel-control Carousel-control--next' },
arrowNext || null
)
);
}
function getIndicators() {
if (!indicator) {
return null;
}
return children.map(function (el, i) {
return (0, _magicVirtualElement2['default'])(
'div',
{ 'class': ['Carousel-indicator', { 'is-active': active === i }] },
typeof indicator === 'boolean' ? null : indicator
);
});
}
return (0, _magicVirtualElement2['default'])(
'div',
{ 'class': ['Carousel', props['class']] },
(0, _magicVirtualElement2['default'])(
'div',
{ 'class': 'Carousel-body' },
children
),
getArrows(),
(0, _magicVirtualElement2['default'])(
'div',
{ 'class': 'Carousel-indicators' },
getIndicators()
)
);
}
exports['default'] = { afterMount: afterMount, initialState: initialState, propTypes: propTypes, render: render };
module.exports = exports['default'];
+3
-2
package.json
{
"name": "deku-carousel",
"version": "1.1.2",
"version": "1.2.0",
"description": "Carousel component for deku",

@@ -17,6 +17,7 @@ "license": "MIT",

"build": "browserify example/index.js -o example/build.js -dv",
"prepublish": "babel index.js --out-file dist.js",
"test": "./node_modules/.bin/eslint index.js"
},
"files": [
"index.js"
"dist.js"
],

@@ -23,0 +24,0 @@ "keywords": [

-149
index.js
/** @jsx dom */
import dom from 'magic-virtual-element';
import Swipe from 'swipe';
const propTypes = {
arrows: {
type: 'boolean'
},
arrowNext: {
type: 'string'
},
arrowPrev: {
type: 'string'
},
class: {
type: 'string'
},
duration: {
type: 'number'
},
fastThreshold: {
type: 'number'
},
interval: {
type: 'number'
},
onChange: {
type: 'function'
},
play: {
type: 'boolean'
},
threshold: {
type: 'number'
}
};
function initialState() {
return {
active: 0
};
}
function afterMount({props}, el, setState) {
const {arrows, duration, fastThreshold, indicator, interval, onChange, play, threshold} = props;
const swipe = new Swipe(el);
window.addEventListener('resize', () => swipe.refresh());
swipe.on('show', (i, el) => {
setState({active: i});
if (onChange) {
onChange(el, i);
}
});
if (typeof duration === 'number') {
swipe.duration(duration);
}
if (typeof fastThreshold === 'number') {
swipe.fastThreshold(fastThreshold);
}
if (typeof interval === 'number') {
swipe.interval(interval);
}
if (typeof threshold === 'number') {
swipe.threshold(threshold);
}
if (arrows) {
const prev = el.querySelector('.Carousel-control--prev');
const next = el.querySelector('.Carousel-control--next');
prev.addEventListener('click', e => {
e.preventDefault();
swipe.prev();
});
next.addEventListener('click', e => {
e.preventDefault();
swipe.next();
});
}
if (indicator) {
const selector = el.querySelectorAll('.Carousel-indicator');
Array.from(selector).forEach((el, i) => {
el.addEventListener('click', e => {
e.preventDefault();
swipe.show(i);
});
});
}
if (play) {
swipe.play();
}
}
function render({props, state}) {
const {arrows, arrowNext, arrowPrev, children, indicator} = props;
const {active} = state;
function getArrows() {
if (!arrows) {
return null;
}
return (
<div class='Carousel-controls'>
<button class='Carousel-control Carousel-control--prev'>
{arrowPrev || null}
</button>
<button class='Carousel-control Carousel-control--next'>
{arrowNext || null}
</button>
</div>
);
}
function getIndicators() {
if (!indicator) {
return null;
}
return children.map((el, i) => {
return (
<div class={['Carousel-indicator', {'is-active': active === i}]}>
{typeof indicator === 'boolean' ? null : indicator}
</div>
);
});
}
return (
<div class={['Carousel', props.class]}>
<div class='Carousel-body'>{children}</div>
{getArrows()}
<div class='Carousel-indicators'>{getIndicators()}</div>
</div>
);
}
export default {afterMount, initialState, propTypes, render};