Skip to content

Commit 6a9d830

Browse files
gillstromgillstrom
committed
Initial commit
0 parents  commit 6a9d830

12 files changed

+475
-0
lines changed

‎.editorconfig

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
root = true
2+
3+
[*]
4+
indent_style = tab
5+
end_of_line = lf
6+
charset = utf-8
7+
trim_trailing_whitespace = true
8+
insert_final_newline = true
9+
10+
[{package.json,*.yml}]
11+
indent_style = space
12+
indent_size = 2
13+
14+
[*.md]
15+
trim_trailing_whitespace = false

‎.gitattributes

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
* text=auto

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
dist.js
2+
example/build.js
3+
node_modules

‎.travis.yml

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
language: node_js
2+
node_js:
3+
- 'stable'
4+
- '0.12'
5+
- '0.10'

‎example/index.css

+62
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>deku-slide</title>
7+
<link href="index.css" rel="stylesheet">
8+
</head>
9+
<body>
10+
<script src="build.js"></script>
11+
</body>
12+
</html>

‎example/index.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/** @jsx dom */
2+
import dom from 'magic-virtual-element';
3+
import {render, tree} from 'deku';
4+
import Slide from '../';
5+
6+
const options1 = {
7+
breakpoints: {
8+
320: {
9+
slidesPerView: 1,
10+
spaceBetweenSlides: 10
11+
}
12+
},
13+
centeredSlides: true,
14+
slidesPerView: 3,
15+
spaceBetween: 30
16+
};
17+
18+
const app = tree(
19+
<div>
20+
<Slide options={options1} onInit={x => console.log(x)} arrows loop pagination>
21+
<div><img src='http://placehold.it/960x500'/></div>
22+
<div><img src='http://placehold.it/960x400'/></div>
23+
<div><img src='http://placehold.it/960x550'/></div>
24+
<div><img src='http://placehold.it/960x450'/></div>
25+
<div><img src='http://placehold.it/960x350'/></div>
26+
<div><img src='http://placehold.it/960x300'/></div>
27+
<div><img src='http://placehold.it/960x600'/></div>
28+
<div><img src='http://placehold.it/960x250'/></div>
29+
</Slide>
30+
<Slide duration={2000} pagination play vertical>
31+
<div><img src='http://placehold.it/960x500'/></div>
32+
<div><img src='http://placehold.it/960x400'/></div>
33+
<div><img src='http://placehold.it/960x550'/></div>
34+
<div><img src='http://placehold.it/960x450'/></div>
35+
<div><img src='http://placehold.it/960x350'/></div>
36+
<div><img src='http://placehold.it/960x300'/></div>
37+
<div><img src='http://placehold.it/960x600'/></div>
38+
<div><img src='http://placehold.it/960x250'/></div>
39+
</Slide>
40+
</div>
41+
);
42+
43+
render(app, document.body);

‎index.css

+15
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.js

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
/** @jsx dom */
2+
import condenseKeys from 'condense-keys';
3+
import dom from 'magic-virtual-element';
4+
import objectAssign from 'object-assign';
5+
import Swiper from 'swiper';
6+
7+
const propTypes = {
8+
arrows: {
9+
type: 'boolean'
10+
},
11+
class: {
12+
type: 'string'
13+
},
14+
duration: {
15+
type: 'number'
16+
},
17+
loop: {
18+
type: 'boolean'
19+
},
20+
onInit: {
21+
type: 'function'
22+
},
23+
options: {
24+
type: 'object'
25+
},
26+
pagination: {
27+
type: 'boolean'
28+
},
29+
play: {
30+
type: 'boolean'
31+
},
32+
speed: {
33+
type: 'boolean'
34+
},
35+
vertical: {
36+
type: 'boolean'
37+
}
38+
};
39+
40+
const defaultProps = {
41+
duration: 3000,
42+
loop: false,
43+
onInit: () => {},
44+
play: false,
45+
speed: 300
46+
};
47+
48+
const initialState = () => ({active: 0});
49+
50+
const afterMount = ({props}, el) => {
51+
const {arrows, duration, loop, onInit, options, pagination, play, speed, vertical} = props;
52+
const swiper = new Swiper(el.querySelector('.swiper-container'), condenseKeys(objectAssign({
53+
autoplay: play && duration,
54+
autoplayDisableOnInteraction: false,
55+
direction: vertical ? 'vertical' : 'horizontal',
56+
loop,
57+
paginationClickable: true,
58+
speed
59+
}, options, {
60+
nextButton: arrows ? '.swiper-button-next' : null,
61+
pagination: pagination ? '.swiper-pagination' : null,
62+
prevButton: arrows ? '.swiper-button-prev' : null,
63+
slideClass: 'swiper-slide',
64+
wrapperClass: 'swiper-wrapper'
65+
})));
66+
67+
onInit(swiper);
68+
};
69+
70+
const getArrows = arrows => arrows && (
71+
<div class='Swiper-controls'>
72+
<div class='swiper-button-prev'/>
73+
<div class='swiper-button-next'/>
74+
</div>
75+
);
76+
77+
const getPagination = pagination => pagination && <div class='swiper-pagination'/>;
78+
79+
const render = ({props}) => {
80+
const {arrows, children, pagination} = props;
81+
82+
children.forEach(x => {
83+
x.attributes.class = `${x.attributes.class || ''} swiper-slide`;
84+
});
85+
86+
return (
87+
<div class={['Swiper', props.class]}>
88+
<div class='swiper-container'>
89+
<div class='swiper-wrapper'>
90+
{children}
91+
</div>
92+
{getArrows(arrows)}
93+
{getPagination(pagination)}
94+
</div>
95+
</div>
96+
);
97+
};
98+
99+
export default {afterMount, defaultProps, initialState, propTypes, render};

‎license

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) Andreas Gillström <[email protected]> (github.com/gillstrom)
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎package.json

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
{
2+
"name": "deku-slide",
3+
"version": "0.0.0",
4+
"description": "Carousel component for Deku",
5+
"license": "MIT",
6+
"repository": "gillstrom/deku-slide",
7+
"author": {
8+
"name": "Andreas Gillström",
9+
"email": "[email protected]",
10+
"url": "github.com/gillstrom"
11+
},
12+
"engines": {
13+
"node": ">=0.10.0"
14+
},
15+
"scripts": {
16+
"build": "browserify -o example/build.js -d example/index.js -t [ babelify --presets [ es2015 react ] ]",
17+
"prepublish": "babel --presets es2015,react --out-file dist.js index.js ",
18+
"test": "xo"
19+
},
20+
"main": "dist.js",
21+
"styles": "index.css",
22+
"files": [
23+
"dist.js",
24+
"index.css"
25+
],
26+
"keywords": [
27+
"carousel",
28+
"component",
29+
"deku",
30+
"deku-component",
31+
"slide",
32+
"slider",
33+
"slideshow",
34+
"swipe",
35+
"swiper",
36+
"touch"
37+
],
38+
"dependencies": {
39+
"condense-keys": "^1.1.0",
40+
"magic-virtual-element": "^1.0.6",
41+
"object-assign": "^4.0.1",
42+
"swiper": "^3.3.1"
43+
},
44+
"devDependencies": {
45+
"babel-cli": "^6.4.0",
46+
"babel-preset-es2015": "^6.3.13",
47+
"babel-preset-react": "^6.3.13",
48+
"babelify": "^7.2.0",
49+
"browserify": "^13.0.0",
50+
"deku": "^1.0.0",
51+
"eslint-config-xo-react": "^0.3.0",
52+
"eslint-plugin-react": "^3.15.0",
53+
"xo": "*"
54+
},
55+
"xo": {
56+
"envs": [
57+
"browser",
58+
"node"
59+
],
60+
"esnext": true,
61+
"extends": [
62+
"xo-react"
63+
],
64+
"ignores": [
65+
"dist.js"
66+
],
67+
"rules": {
68+
"jsx-quotes": [
69+
2,
70+
"prefer-single"
71+
],
72+
"react/no-unknown-property": 0,
73+
"react/prop-types": 0,
74+
"quote-props": 0
75+
}
76+
}
77+
}

0 commit comments

Comments
 (0)