Skip to content

Commit 15d35af

Browse files
author
Bernhard Grünewaldt
committed
support left and right arrow keypress for next and previous image
1 parent d94cfb2 commit 15d35af

File tree

4 files changed

+161
-17
lines changed

4 files changed

+161
-17
lines changed

‎build/cc-image-lightbox.js‎

Lines changed: 84 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -87,11 +87,39 @@ var CCImageLightbox = function () {
8787
function CCImageLightbox() {
8888
_classCallCheck(this, CCImageLightbox);
8989

90-
this.store = [];
90+
this.store = {
91+
current: {
92+
galleryId: null,
93+
index: null
94+
},
95+
galleries: []
96+
};
9197
this.init();
9298
}
9399

94100
_createClass(CCImageLightbox, [{
101+
key: '_setCurrentOpenImage',
102+
value: function _setCurrentOpenImage(galleryId, index) {
103+
this.store.current.galleryId = galleryId;
104+
this.store.current.index = index;
105+
}
106+
}, {
107+
key: '_getCurrentOpenImage',
108+
value: function _getCurrentOpenImage() {
109+
return this.store.current;
110+
}
111+
}, {
112+
key: '_clearCurrentOpenImage',
113+
value: function _clearCurrentOpenImage() {
114+
this.store.current.galleryId = null;
115+
this.store.current.index = null;
116+
}
117+
}, {
118+
key: '_isCurrentOpenImage',
119+
value: function _isCurrentOpenImage() {
120+
return this.store.current.galleryId !== null;
121+
}
122+
}, {
95123
key: '_getGallery',
96124
value: function _getGallery(galleryId) {
97125
if (this.store[galleryId] === undefined || this.store[galleryId] === null) {
@@ -131,36 +159,68 @@ var CCImageLightbox = function () {
131159
}, {
132160
key: 'closeIfOpen',
133161
value: function closeIfOpen() {
162+
var self = this;
134163
var lightboxWrapper = document.getElementsByClassName('cc-lightbox-wrapper');
135164
if (lightboxWrapper[0] !== undefined && lightboxWrapper[0] !== null) {
136165
lightboxWrapper[0].remove();
137166
}
167+
self._clearCurrentOpenImage();
138168
}
139169
}, {
140170
key: 'open',
141171
value: function open(galleryId, index) {
142172
this.closeIfOpen();
173+
this._setCurrentOpenImage(galleryId, index);
143174
this.create(galleryId, index);
144175
}
145176
}, {
146177
key: 'create',
147178
value: function create(galleryId, index) {
148179
var self = this;
149180
var indexInt = parseInt(index, 10);
181+
182+
// WRAPPER
150183
var wrapper = document.createElement('div');
151184
wrapper.setAttribute('class', 'cc-lightbox-wrapper');
152185
wrapper.setAttribute('data-cc-lightbox-gallery-id', galleryId);
186+
document.body.appendChild(wrapper);
187+
188+
// TOPBAR
153189
var topBar = document.createElement('div');
154190
topBar.setAttribute('class', 'cc-lightbox--top');
155-
topBar.innerHTML = ' <div class="cc-lightbox--top-title">' + self._getImage(galleryId, index).title;+' </div>' + ' <div class="cc-lightbox--top-closeIfOpen" onclick="this.parentNode.parentNode.remove()">' + ' </div>';
156191
wrapper.appendChild(topBar);
192+
193+
// TITLEBAR
194+
var titleBar = document.createElement('div');
195+
titleBar.setAttribute('class', 'cc-lightbox--top-title');
196+
titleBar.innerHTML = self._getImage(galleryId, index).title;
197+
topBar.appendChild(titleBar);
198+
199+
// CLOSEBUTTON
200+
var closeButton = document.createElement('div');
201+
closeButton.setAttribute('class', 'cc-lightbox--top-close');
202+
closeButton.onclick = function () {
203+
return self.closeIfOpen();
204+
};
205+
topBar.appendChild(closeButton);
206+
207+
// PREVIOUS BUTTON
157208
wrapper.appendChild(self._renderNextOrPreviousButton(galleryId, indexInt - 1, 'left'));
209+
210+
// IMAGE
158211
var image = document.createElement('div');
159212
image.setAttribute('class', 'cc-lightbox--image');
160-
image.innerHTML = ' <div class="cc-lightbox--image-inner">' + ' <img src="' + self._getImage(galleryId, index).src + '" ' + ' class="cc-lightbox--image-img" />' + ' </div>';
161213
wrapper.appendChild(image);
214+
var imageInner = document.createElement('div');
215+
imageInner.setAttribute('class', 'cc-lightbox--image-inner');
216+
image.appendChild(imageInner);
217+
var img = document.createElement('img');
218+
img.setAttribute('src', self._getImage(galleryId, index).src);
219+
img.setAttribute('class', 'cc-lightbox--image-img');
220+
imageInner.appendChild(img);
221+
222+
// NEXT BUTTON
162223
wrapper.appendChild(self._renderNextOrPreviousButton(galleryId, indexInt + 1, 'right'));
163-
document.body.appendChild(wrapper);
164224
return false;
165225
}
166226
}, {
@@ -197,6 +257,26 @@ var CCImageLightbox = function () {
197257
if (event.keyCode === 27) {
198258
self.closeIfOpen();
199259
}
260+
if (event.keyCode === 37) {
261+
// left
262+
if (self._isCurrentOpenImage()) {
263+
var current = self._getCurrentOpenImage();
264+
if (self._isImage(current.galleryId, current.index - 1)) {
265+
console.log('left');
266+
self.open(current.galleryId, current.index - 1);
267+
}
268+
}
269+
}
270+
if (event.keyCode === 39) {
271+
// right
272+
if (self._isCurrentOpenImage()) {
273+
var _current = self._getCurrentOpenImage();
274+
if (self._isImage(_current.galleryId, _current.index + 1)) {
275+
console.log('right');
276+
self.open(_current.galleryId, _current.index + 1);
277+
}
278+
}
279+
}
200280
}, false);
201281
}
202282
}]);

‎build/cc-image-lightbox.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,6 @@ <h2>Demo Gallery #02</h2>
9494
/></a>
9595

9696

97-
<script src="../build/cc-image-lightbox.min.js"></script>
97+
<script src="../build/cc-image-lightbox.min.js?c"></script>
9898
</body>
9999
</html>

‎src/components.es6/ccImageLightbox.js‎

Lines changed: 75 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,31 @@ import './ccImageLightbox.css';
22

33
class CCImageLightbox {
44
constructor() {
5-
this.store = [];
5+
this.store = {
6+
current: {
7+
galleryId: null,
8+
index: null
9+
},
10+
galleries: []
11+
};
612
this.init();
713
}
814

15+
_setCurrentOpenImage(galleryId, index) {
16+
this.store.current.galleryId = galleryId;
17+
this.store.current.index = index;
18+
}
19+
_getCurrentOpenImage() {
20+
return this.store.current;
21+
}
22+
_clearCurrentOpenImage() {
23+
this.store.current.galleryId = null;
24+
this.store.current.index = null;
25+
}
26+
_isCurrentOpenImage() {
27+
return this.store.current.galleryId !== null;
28+
}
29+
930
_getGallery(galleryId) {
1031
if (this.store[galleryId] === undefined || this.store[galleryId] === null) {
1132
this.store[galleryId] = [];
@@ -39,39 +60,64 @@ class CCImageLightbox {
3960

4061

4162
closeIfOpen() {
63+
const self = this;
4264
const lightboxWrapper = document.getElementsByClassName('cc-lightbox-wrapper');
4365
if (lightboxWrapper[0] !== undefined && lightboxWrapper[0] !== null) {
4466
lightboxWrapper[0].remove();
4567
}
68+
self._clearCurrentOpenImage();
4669
}
4770

4871
open(galleryId, index) {
4972
this.closeIfOpen();
73+
this._setCurrentOpenImage(galleryId, index);
5074
this.create(galleryId, index);
5175
}
5276

5377
create(galleryId, index) {
5478
const self = this;
5579
const indexInt = parseInt(index, 10);
80+
81+
// WRAPPER
5682
const wrapper = document.createElement('div');
5783
wrapper.setAttribute('class', 'cc-lightbox-wrapper');
5884
wrapper.setAttribute('data-cc-lightbox-gallery-id', galleryId);
85+
document.body.appendChild(wrapper);
86+
87+
// TOPBAR
5988
const topBar = document.createElement('div');
60-
topBar.setAttribute('class', 'cc-lightbox--top');
61-
topBar.innerHTML = ' <div class="cc-lightbox--top-title">' + self._getImage(galleryId, index).title; + ' </div>' +
62-
' <div class="cc-lightbox--top-closeIfOpen" onclick="this.parentNode.parentNode.remove()">' +
63-
' </div>';
89+
topBar.setAttribute('class', 'cc-lightbox--top');
6490
wrapper.appendChild(topBar);
91+
92+
// TITLEBAR
93+
const titleBar = document.createElement('div');
94+
titleBar.setAttribute('class', 'cc-lightbox--top-title');
95+
titleBar.innerHTML = self._getImage(galleryId, index).title;
96+
topBar.appendChild(titleBar);
97+
98+
// CLOSEBUTTON
99+
const closeButton = document.createElement('div');
100+
closeButton.setAttribute('class', 'cc-lightbox--top-close');
101+
closeButton.onclick = () => self.closeIfOpen();
102+
topBar.appendChild(closeButton);
103+
104+
// PREVIOUS BUTTON
65105
wrapper.appendChild(self._renderNextOrPreviousButton(galleryId, (indexInt - 1), 'left'));
106+
107+
// IMAGE
66108
const image = document.createElement('div');
67-
image.setAttribute('class', 'cc-lightbox--image');
68-
image.innerHTML = ' <div class="cc-lightbox--image-inner">' +
69-
' <img src="' + self._getImage(galleryId, index).src + '" ' +
70-
' class="cc-lightbox--image-img" />' +
71-
' </div>';
109+
image.setAttribute('class', 'cc-lightbox--image');
72110
wrapper.appendChild(image);
111+
const imageInner = document.createElement('div');
112+
imageInner.setAttribute('class', 'cc-lightbox--image-inner');
113+
image.appendChild(imageInner);
114+
const img = document.createElement('img');
115+
img.setAttribute('src', self._getImage(galleryId, index).src);
116+
img.setAttribute('class', 'cc-lightbox--image-img');
117+
imageInner.appendChild(img);
118+
119+
// NEXT BUTTON
73120
wrapper.appendChild(self._renderNextOrPreviousButton(galleryId, (indexInt + 1), 'right'));
74-
document.body.appendChild(wrapper);
75121
return false;
76122
}
77123

@@ -103,6 +149,24 @@ class CCImageLightbox {
103149
if (event.keyCode === 27) {
104150
self.closeIfOpen();
105151
}
152+
if (event.keyCode === 37) { // left
153+
if (self._isCurrentOpenImage()) {
154+
const current = self._getCurrentOpenImage();
155+
if (self._isImage(current.galleryId, current.index - 1)) {
156+
console.log('left');
157+
self.open(current.galleryId, current.index - 1);
158+
}
159+
}
160+
}
161+
if (event.keyCode === 39) { // right
162+
if (self._isCurrentOpenImage()) {
163+
const current = self._getCurrentOpenImage();
164+
if (self._isImage(current.galleryId, current.index + 1)) {
165+
console.log('right');
166+
self.open(current.galleryId, current.index + 1);
167+
}
168+
}
169+
}
106170
}, false);
107171

108172
};

0 commit comments

Comments
 (0)