Skip to content

Commit 6b7de4b

Browse files
nicolas-tnicolas-t
authored
Merge pull request #96 from nicolas-t/rollup
Version 1
2 parents 232614c + 4d73c4d commit 6b7de4b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+6243
-21264
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
node_modules
2+
.idea/

‎.travis.yml

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
language: node_js
22
node_js:
3-
- "8"
43
- "10"
54
install:
6-
- npm install
5+
- yarn install
76
before_script:
8-
- phantomjs --version
9-
- mocha-phantomjs --version
10-
- gulp compile-coffee &
117
- sleep 5
128
script:
139
- prettier-check src/js/*.js test/*.js
14-
- mocha-phantomjs test/index.html
10+
- yarn test

‎dist/demo-images/1.jpg ‎demo/demo-images/1.jpg

File renamed without changes.

‎demo/demo-images/1280x720.png

4.68 KB
Loading

‎demo/demo-images/1920x1080.png

7.75 KB
Loading

‎dist/demo-images/2.jpg ‎demo/demo-images/2.jpg

File renamed without changes.

‎dist/demo-images/3.jpg ‎demo/demo-images/3.jpg

File renamed without changes.

‎demo/demo-images/320x180.png

1.15 KB
Loading

‎dist/demo-images/4.jpg ‎demo/demo-images/4.jpg

File renamed without changes.

‎dist/demo-images/5.jpg ‎demo/demo-images/5.jpg

File renamed without changes.

‎dist/demo-images/6.jpg ‎demo/demo-images/6.jpg

File renamed without changes.

‎demo/demo-images/640x360.png

2.46 KB
Loading

‎dist/demo-images/7.jpg ‎demo/demo-images/7.jpg

File renamed without changes.

‎demo/demo-images/75x50.png

242 Bytes
Loading

‎dist/demo-images/8.jpg ‎demo/demo-images/8.jpg

File renamed without changes.

‎demo/demo-images/960x540.png

3.66 KB
Loading

‎demo/index.html

+255
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,255 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="stylesheet" href="../dist/css/chocolat.css" />
6+
<script type="text/javascript" src="../dist/js/chocolat.js"></script>
7+
<style>
8+
body {
9+
text-align: center;
10+
font-family: Arial, sans-serif;
11+
font-size: 12px;
12+
}
13+
h2 {
14+
padding-top:20px;
15+
font-size: 14px;
16+
font-weight: normal;
17+
border-top:1px solid #eeeeee;
18+
}
19+
a {
20+
border:0;
21+
color: #2645FF;
22+
text-decoration: none;
23+
}
24+
</style>
25+
<title>Chocolat — demo</title>
26+
27+
</head>
28+
<body>
29+
<div style="text-align: center;background: #E8E8E8; padding: 10px;margin-bottom: 10px;">
30+
<a href="https://github.com/nicolas-t/Chocolat"> Chocolat on github</a>
31+
</div>
32+
33+
<h2>
34+
Full window, contain, click the numbers to open:
35+
</h2>
36+
<div id="example0">
37+
<a class="chocolat-image" href="demo-images/5.jpg" title="HO">
38+
1
39+
</a>
40+
<a class="chocolat-image" href="demo-images/6.jpg" title="HAI">
41+
2
42+
</a>
43+
<a class="chocolat-image" href="demo-images/3.jpg" title="IO">
44+
3
45+
</a>
46+
</div>
47+
48+
<h2>
49+
Full window, cover, looping :
50+
</h2>
51+
<div id="example1">
52+
<a class="chocolat-image" href="demo-images/1.jpg" title="foo">
53+
C
54+
</a>
55+
<a class="chocolat-image" href="demo-images/2.jpg" title="bar">
56+
D
57+
</a>
58+
</div>
59+
60+
<h2>
61+
Display in a container, cover, with thumbnails :
62+
</h2>
63+
64+
<div id="example3">
65+
<a class="chocolat-image" href="demo-images/3.jpg" title="Rose">
66+
<img src="demo-images/3.jpg" style="width:75px; height:50px" alt="">
67+
</a>
68+
<a class="chocolat-image" href="demo-images/4.jpg" title="Black">
69+
<img src="demo-images/4.jpg" style="width:75px; height:50px" alt="">
70+
</a>
71+
<a class="chocolat-image" href="demo-images/5.jpg" title="Yellow">
72+
<img src="demo-images/5.jpg" style="width:75px; height:50px" alt="">
73+
</a>
74+
</div>
75+
<!-- Container (notice the relative width) : -->
76+
<div id="container2" style="width: 80%; max-width:1000px; height: 600px; background: #E0E0E0; margin:auto;"></div>
77+
78+
<h2>
79+
Display in a container, looping :
80+
</h2>
81+
82+
<div id="example2">
83+
<a class="chocolat-image" href="demo-images/3.jpg" title="Rose">
84+
A
85+
</a>
86+
<a class="chocolat-image" href="demo-images/4.jpg" title="Black">
87+
B
88+
</a>
89+
<a class="chocolat-image" href="demo-images/5.jpg" title="Yellow">
90+
C
91+
</a>
92+
</div>
93+
<!-- Container (notice the relative width) : -->
94+
<div id="container1" style="width: 80%; max-width:1000px; height: 600px; background: #E0E0E0; margin:auto;"></div>
95+
96+
97+
<h2>
98+
API use, in container, see code source <br>
99+
Open console to have details abouts events
100+
</h2>
101+
102+
<a class="api-open" href="#">Open</a> then try <br>
103+
<a class="api-next" href="#">Next</a>
104+
<a class="api-prev" href="#">Prev</a>
105+
<br>
106+
<a class="api-cover" href="#">Enter cover mode</a> /
107+
<a class="api-contain" href="#">Enter contain mode</a>
108+
109+
<br>
110+
<br>
111+
<a class="api-close" href="#">Close</a>
112+
<!-- Container (notice the relative width) : -->
113+
<div id="container3" style="width: 80%; max-width:1000px; height: 600px; background: #E0E0E0; margin:auto;"></div>
114+
115+
<h2>Usage with srcset and sizes attributes. Full window, contained.</h2>
116+
<p>Be careful while using "cover" and data-sizes="100vw", the image could be wider than the viewport width.</p>
117+
<div id="example4">
118+
<a class="chocolat-image" href="demo-images/1920x1080.png" title="responsive"
119+
data-srcset="demo-images/320x180.png 320w,
120+
demo-images/640x360.png 640w,
121+
demo-images/960x540.png 960w,
122+
demo-images/1280x720.png 1280w,
123+
demo-images/1920x1080.png 1920w"
124+
data-sizes="100vw">
125+
<img src="demo-images/75x50.png" style="width:75px; height:50px" alt="">
126+
</a>
127+
</div>
128+
129+
130+
<script>
131+
// standard demos
132+
Chocolat(document.querySelectorAll('#example0 .chocolat-image'), {
133+
imageSize: 'contain',
134+
})
135+
136+
Chocolat(document.querySelectorAll('#example1 .chocolat-image'), {
137+
loop: true,
138+
imageSize: 'cover',
139+
overlayOpacity: 0.9
140+
})
141+
142+
Chocolat(document.querySelectorAll('#example2 .chocolat-image'), {
143+
container: document.querySelector('#container1'),
144+
imageSize: 'contain',
145+
loop: true,
146+
})
147+
148+
Chocolat(document.querySelectorAll('#example3 .chocolat-image'), {
149+
container: document.querySelector('#container2'),
150+
imageSize: 'cover',
151+
})
152+
Chocolat(document.querySelectorAll('#example4 .chocolat-image'), {
153+
imageSize: 'contain',
154+
})
155+
</script>
156+
<script>
157+
// api demo
158+
var instance = Chocolat([
159+
{src : 'demo-images/1.jpg', title : 'caption 1'},
160+
{src : 'demo-images/6.jpg', title : 'caption 2'},
161+
{src : 'demo-images/8.jpg', title : 'caption 3'},
162+
], {
163+
setTitle : function () { return 'set title' },
164+
loop: true,
165+
imageSize : 'contain',
166+
container: document.querySelector('#container3'),
167+
afterMarkup: function () {
168+
console.log('afterMarkup hook is called')
169+
},
170+
afterImageLoad: function () {
171+
console.log('afterImageLoad hook is called')
172+
},
173+
afterInitialize: function () {
174+
console.log('afterInitialize hook is called')
175+
},
176+
zoomedPaddingX: function (imgWidth, canvasWidth) {
177+
// add a padding around the zoomed image
178+
// default to 0
179+
return canvasWidth / 4;
180+
},
181+
zoomedPaddingY: function (imgHeight, canvasHeight) {
182+
// add a padding around the zoomed image
183+
// default to 0
184+
return canvasHeight / 4;
185+
}
186+
});
187+
document.querySelector('.api-open').addEventListener('click', function(e) {
188+
e.preventDefault()
189+
190+
console.log('open start');
191+
var promise = instance.api.open()
192+
193+
promise.then(function(){
194+
console.log('open done');
195+
})
196+
})
197+
198+
document.querySelector('.api-close').addEventListener('click', function(e) {
199+
e.preventDefault()
200+
201+
console.log('close start');
202+
var promise = instance.api.close()
203+
204+
promise.then(function(){
205+
console.log('close done');
206+
})
207+
})
208+
document.querySelector('.api-prev').addEventListener('click', function(e) {
209+
e.preventDefault()
210+
211+
console.log('prev start');
212+
var promise = instance.api.prev()
213+
214+
promise.then(function(){
215+
console.log('prev done');
216+
})
217+
})
218+
document.querySelector('.api-next').addEventListener('click', function(e) {
219+
e.preventDefault()
220+
221+
console.log('next start');
222+
var promise = instance.api.next()
223+
224+
promise.then(function(){
225+
console.log('next done');
226+
})
227+
})
228+
229+
document.querySelector('.api-cover').addEventListener('click', function(e) {
230+
e.preventDefault()
231+
232+
console.log('cover mode start')
233+
instance.api.set('imageSize', 'cover')
234+
var promise = instance.api.position()
235+
236+
promise.then(function(){
237+
console.log('cover mode done')
238+
})
239+
})
240+
241+
document.querySelector('.api-contain').addEventListener('click', function(e) {
242+
e.preventDefault()
243+
244+
console.log('contain mode start')
245+
instance.api.set('imageSize', 'contain')
246+
var promise = instance.api.position()
247+
248+
promise.then(function(){
249+
console.log('contain mode done')
250+
})
251+
})
252+
</script>
253+
</body>
254+
255+
</html>

0 commit comments

Comments
 (0)