Skip to content

Commit c92e0d1

Browse files
author
Bernhard Grünewaldt
committed
fix es5 module exports
1 parent db25c0f commit c92e0d1

9 files changed

+241
-20
lines changed

‎.babelrc

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
{
2-
"presets": ["es2015"]
2+
"presets": ["es2015"],
3+
"plugins": [
4+
"add-module-exports"
5+
]
36
}

‎README.md

+6-5
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,9 @@ $ npm install --save cc-image-lightbox
3636
</html>
3737
```
3838

39+
<p>&nbsp;</p>
40+
41+
3942
**Webpack es6**
4043

4144
JS
@@ -45,13 +48,11 @@ import CCImageLightbox from 'cc-image-lightbox';
4548
new CCImageLightbox();
4649
```
4750

48-
If you use `css-loader` the css is imported by the JS component already.
49-
5051
----
5152

52-
SCSS
53-
```scss
54-
@import "../node_modules/cc-image-lightbox/build/cc-image-lightbox";
53+
CSS
54+
```
55+
./node_modules/cc-image-lightbox/build/cc-image-lightbox.css
5556
```
5657

5758
<p>&nbsp;</p>

‎build/cc-image-lightbox.es5-module.js

+213
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
7+
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
8+
9+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
10+
11+
var CCImageLightbox = function () {
12+
function CCImageLightbox() {
13+
_classCallCheck(this, CCImageLightbox);
14+
15+
this.store = {
16+
current: {
17+
galleryId: null,
18+
index: null
19+
},
20+
galleries: []
21+
};
22+
this.init();
23+
}
24+
25+
_createClass(CCImageLightbox, [{
26+
key: '_setCurrentOpenImage',
27+
value: function _setCurrentOpenImage(galleryId, index) {
28+
this.store.current.galleryId = galleryId;
29+
this.store.current.index = index;
30+
}
31+
}, {
32+
key: '_getCurrentOpenImage',
33+
value: function _getCurrentOpenImage() {
34+
return this.store.current;
35+
}
36+
}, {
37+
key: '_clearCurrentOpenImage',
38+
value: function _clearCurrentOpenImage() {
39+
this.store.current.galleryId = null;
40+
this.store.current.index = null;
41+
}
42+
}, {
43+
key: '_isCurrentOpenImage',
44+
value: function _isCurrentOpenImage() {
45+
return this.store.current.galleryId !== null;
46+
}
47+
}, {
48+
key: '_getGallery',
49+
value: function _getGallery(galleryId) {
50+
if (this.store[galleryId] === undefined || this.store[galleryId] === null) {
51+
this.store[galleryId] = [];
52+
}
53+
return this.store[galleryId];
54+
}
55+
}, {
56+
key: '_getImage',
57+
value: function _getImage(galleryId, index) {
58+
var gallery = this._getGallery(galleryId);
59+
if (gallery[index] === undefined || gallery[index] === null) {
60+
gallery[index] = {};
61+
}
62+
return gallery[index];
63+
}
64+
}, {
65+
key: '_isImage',
66+
value: function _isImage(galleryId, index) {
67+
var image = this._getImage(galleryId, index);
68+
return !(image.src === undefined || image.src === null);
69+
}
70+
}, {
71+
key: '_renderNextOrPreviousButton',
72+
value: function _renderNextOrPreviousButton(galleryId, index, direction) {
73+
var self = this;
74+
var button = document.createElement('div');
75+
button.setAttribute('class', 'cc-lightbox--' + direction);
76+
if (self._isImage(galleryId, index)) {
77+
button.setAttribute('class', direction === 'left' ? 'cc-lightbox--left cc-lightbox--left--has-previous' : 'cc-lightbox--right cc-lightbox--right--has-next');
78+
button.onclick = function () {
79+
return self.open(galleryId, index);
80+
};
81+
}
82+
return button;
83+
}
84+
}, {
85+
key: 'closeIfOpen',
86+
value: function closeIfOpen() {
87+
var self = this;
88+
var lightboxWrapper = document.getElementsByClassName('cc-lightbox-wrapper');
89+
if (lightboxWrapper[0] !== undefined && lightboxWrapper[0] !== null) {
90+
lightboxWrapper[0].remove();
91+
}
92+
self._clearCurrentOpenImage();
93+
}
94+
}, {
95+
key: 'open',
96+
value: function open(galleryId, index) {
97+
this.closeIfOpen();
98+
this._setCurrentOpenImage(galleryId, index);
99+
this.create(galleryId, index);
100+
}
101+
}, {
102+
key: 'create',
103+
value: function create(galleryId, index) {
104+
var self = this;
105+
var indexInt = parseInt(index, 10);
106+
107+
// WRAPPER
108+
var wrapper = document.createElement('div');
109+
wrapper.setAttribute('class', 'cc-lightbox-wrapper');
110+
wrapper.setAttribute('data-cc-lightbox-gallery-id', galleryId);
111+
document.body.appendChild(wrapper);
112+
113+
// TOPBAR
114+
var topBar = document.createElement('div');
115+
topBar.setAttribute('class', 'cc-lightbox--top');
116+
wrapper.appendChild(topBar);
117+
118+
// TITLEBAR
119+
var titleBar = document.createElement('div');
120+
titleBar.setAttribute('class', 'cc-lightbox--top-title');
121+
titleBar.innerHTML = self._getImage(galleryId, index).title;
122+
topBar.appendChild(titleBar);
123+
124+
// CLOSEBUTTON
125+
var closeButton = document.createElement('div');
126+
closeButton.setAttribute('class', 'cc-lightbox--top-close');
127+
closeButton.onclick = function () {
128+
return self.closeIfOpen();
129+
};
130+
topBar.appendChild(closeButton);
131+
132+
// PREVIOUS BUTTON
133+
wrapper.appendChild(self._renderNextOrPreviousButton(galleryId, indexInt - 1, 'left'));
134+
135+
// IMAGE
136+
var image = document.createElement('div');
137+
image.setAttribute('class', 'cc-lightbox--image');
138+
wrapper.appendChild(image);
139+
var imageInner = document.createElement('div');
140+
imageInner.setAttribute('class', 'cc-lightbox--image-inner');
141+
image.appendChild(imageInner);
142+
var img = document.createElement('img');
143+
img.setAttribute('src', self._getImage(galleryId, index).src);
144+
img.setAttribute('class', 'cc-lightbox--image-img');
145+
imageInner.appendChild(img);
146+
147+
// NEXT BUTTON
148+
wrapper.appendChild(self._renderNextOrPreviousButton(galleryId, indexInt + 1, 'right'));
149+
return false;
150+
}
151+
}, {
152+
key: 'init',
153+
value: function init() {
154+
var self = this;
155+
var lightboxElements = document.querySelectorAll('[data-cc-lightbox]');
156+
157+
var _loop = function _loop(i) {
158+
var lightboxElement = lightboxElements[i];
159+
var galleryId = lightboxElement.getAttribute('data-cc-lightbox');
160+
var nextIndex = self._getGallery(galleryId).length;
161+
var nextImage = self._getImage(galleryId, nextIndex);
162+
nextImage.title = lightboxElement.getAttribute('data-cc-title');
163+
nextImage.src = lightboxElement.parentNode.getAttribute('href');
164+
165+
//
166+
// THUMBNAIL CLICK OPENS LIGHTBOX
167+
//
168+
lightboxElement.parentNode.onclick = function () {
169+
self.open(galleryId, nextIndex);
170+
return false;
171+
};
172+
};
173+
174+
for (var i = 0; i < lightboxElements.length; i++) {
175+
_loop(i);
176+
}
177+
178+
//
179+
// CLOSE ON ESCAPE KEY PRESS
180+
//
181+
document.addEventListener('keydown', function (event) {
182+
if (event.keyCode === 27) {
183+
self.closeIfOpen();
184+
}
185+
if (event.keyCode === 37) {
186+
// left
187+
if (self._isCurrentOpenImage()) {
188+
var current = self._getCurrentOpenImage();
189+
if (self._isImage(current.galleryId, current.index - 1)) {
190+
self.open(current.galleryId, current.index - 1);
191+
}
192+
}
193+
}
194+
if (event.keyCode === 39) {
195+
// right
196+
if (self._isCurrentOpenImage()) {
197+
var _current = self._getCurrentOpenImage();
198+
if (self._isImage(_current.galleryId, _current.index + 1)) {
199+
self.open(_current.galleryId, _current.index + 1);
200+
}
201+
}
202+
}
203+
}, false);
204+
}
205+
}]);
206+
207+
return CCImageLightbox;
208+
}();
209+
210+
;
211+
212+
exports.default = CCImageLightbox;
213+
module.exports = exports['default'];

‎build/cc-image-lightbox.js

+8-6
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,6 @@ Object.defineProperty(exports, "__esModule", {
7979

8080
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
8181

82-
__webpack_require__(1);
83-
8482
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
8583

8684
var CCImageLightbox = function () {
@@ -285,6 +283,7 @@ var CCImageLightbox = function () {
285283
;
286284

287285
exports.default = CCImageLightbox;
286+
module.exports = exports['default'];
288287

289288
/***/ }),
290289
/* 1 */
@@ -299,16 +298,19 @@ exports.default = CCImageLightbox;
299298
"use strict";
300299

301300

301+
__webpack_require__(1);
302+
302303
var _ccImageLightbox = __webpack_require__(0);
303304

304305
var _ccImageLightbox2 = _interopRequireDefault(_ccImageLightbox);
305306

306307
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
307308

308-
new _ccImageLightbox2.default(); /**
309-
* USED TO GENERATE A BROWSER VERSION WITH WEBPACK.
310-
* SEE build/* FILES
311-
*/
309+
/**
310+
* USED TO GENERATE A BROWSER VERSION WITH WEBPACK.
311+
* SEE build/* FILES
312+
*/
313+
new _ccImageLightbox2.default();
312314

313315
/***/ })
314316
/******/ ]);

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

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

0 commit comments

Comments
 (0)