0.0.10 and esm module

codeclou · Feb 18, 2017 · 8e58938 · 8e58938
1 parent e9cb66b
commit 8e58938
Show file tree

Hide file tree

Showing 9 changed files with 309 additions and 11 deletions.
diff --git a/src/components.es6/ccImageLightbox.js → build/cc-image-lightbox.esm.js b/src/components.es6/ccImageLightbox.js → build/cc-image-lightbox.esm.js
diff --git a/example/systemjs/index.html b/example/systemjs/index.html
@@ -0,0 +1,111 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>cc-lightbox</title>
+
+</head>
+<body>
+
+
+
+<h2>Demo Gallery #01</h2>
+
+<a href="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-01/images/DSC05051.JPG" target="_blank"><img
+ src="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-01/thumbs/DSC05051.JPG"
+ style="width:200px;border:1px solid #ccc"
+ data-cc-lightbox="gallery-01"
+ data-cc-title="Image One"
+/></a>
+
+<a href="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-01/images/DSC05052.JPG" target="_blank"><img
+ src="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-01/thumbs/DSC05052.JPG"
+ style="width:200px;border:1px solid #ccc"
+ data-cc-lightbox="gallery-01"
+ data-cc-title="Image Two"
+/></a>
+
+<a href="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-01/images/DSC05053.JPG" target="_blank"><img
+ src="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-01/thumbs/DSC05053.JPG"
+ style="width:200px;border:1px solid #ccc"
+ data-cc-lightbox="gallery-01"
+ data-cc-title="Image Three"
+/></a>
+
+<a href="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-01/images/DSC05054.JPG" target="_blank"><img
+ src="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-01/thumbs/DSC05054.JPG"
+ style="width:200px;border:1px solid #ccc"
+ data-cc-lightbox="gallery-01"
+ data-cc-title="Image Four"
+/></a>
+
+<a href="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-01/images/DSC05055.JPG" target="_blank"><img
+ src="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-01/thumbs/DSC05055.JPG"
+ style="width:200px;border:1px solid #ccc"
+ data-cc-lightbox="gallery-01"
+ data-cc-title="Image Five"
+/></a>
+
+<a href="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-01/images/DSC05057.JPG" target="_blank"><img
+ src="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-01/thumbs/DSC05057.JPG"
+ style="width:200px;border:1px solid #ccc"
+ data-cc-lightbox="gallery-01"
+ data-cc-title="Image Six"
+/></a>
+
+<a href="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-01/images/DSC05069.JPG" target="_blank"><img
+ src="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-01/thumbs/DSC05069.JPG"
+ style="width:200px;border:1px solid #ccc"
+ data-cc-lightbox="gallery-01"
+ data-cc-title="Image Seven"
+/></a>
+
+<hr>
+
+<h2>Demo Gallery #02</h2>
+
+
+<a href="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-02/images/DSC05078.JPG" target="_blank"><img
+ src="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-02/thumbs/DSC05078.JPG"
+ style="width:200px;border:1px solid #ccc"
+ data-cc-lightbox="gallery-02"
+ data-cc-title="Image One"
+/></a>
+
+<a href="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-02/images/DSC05084.JPG" target="_blank"><img
+ src="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-02/thumbs/DSC05084.JPG"
+ style="width:200px;border:1px solid #ccc"
+ data-cc-lightbox="gallery-02"
+ data-cc-title="Image Two"
+/></a>
+
+<a href="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-02/images/DSC05089.JPG" target="_blank"><img
+ src="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-02/thumbs/DSC05089.JPG"
+ style="width:200px;border:1px solid #ccc"
+ data-cc-lightbox="gallery-02"
+ data-cc-title="Image Three"
+/></a>
+
+<a href="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-02/images/DSC05104.JPG" target="_blank"><img
+ src="https://codeclou.github.io/cc-image-lightbox/demo/demo-gallery-02/thumbs/DSC05104.JPG"
+ style="width:200px;border:1px solid #ccc"
+ data-cc-lightbox="gallery-02"
+ data-cc-title="Image Four"
+/></a>
+
+
+<link href="https://cdn.rawgit.com/codeclou/cc-image-lightbox/e9cb66b7/src/components.es6/ccImageLightbox.css" rel="stylesheet" />
+<script src="https://cdn.rawgit.com/systemjs/systemjs/0.20.9/dist/system.js"></script>
+<script>
+ SystemJS.config({
+ map: {
+ 'plugin-babel': 'https://cdn.rawgit.com/systemjs/plugin-babel/0.0.21/plugin-babel.js',
+ 'systemjs-babel-build': 'https://cdn.rawgit.com/systemjs/plugin-babel/0.0.21/systemjs-babel-browser.js',
+ 'cc-image-lightbox': 'https://cdn.rawgit.com/codeclou/cc-image-lightbox/e9cb66b7/src/components.es6/ccImageLightbox.js'
+ },
+ transpiler: 'plugin-babel'
+ });
+ SystemJS.import('./main.js');
+</script>
+</body>
+</html>
diff --git a/example/systemjs/main.js b/example/systemjs/main.js
@@ -0,0 +1,3 @@
+import CCImageLightbox from 'cc-image-lightbox';
+
+new CCImageLightbox();
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "cc-image-lightbox",
- "version": "0.0.9",
+ "version": "0.0.10",
  "description": "Lightweight vanilla-JS image lightbox crafted with CSS3 and inline SVG icons for modern browsers",
  "repository": {
  "type": "git",
@@ -9,8 +9,9 @@
  "author": "codeclou",
  "license": "MIT",
  "scripts": {
- "build": "npm run build:browser",
- "build:browser": "webpack --config webpack.browser.config.js && MINIFY=1 webpack --optimize-minimize --config webpack.browser.config.js"
+ "build": "npm run build:browser && npm run build:module:esm",
+ "build:browser": "webpack --config webpack.browser.config.js && MINIFY=1 webpack --optimize-minimize --config webpack.browser.config.js",
+ "build:module:esm": "cp src/ccImageLightbox.js build/cc-image-lightbox.esm.js"
  },
  "devDependencies": {
  "babel-cli": "^6.23.0",

diff --git a/src/build.browser.js b/src/build.browser.js
diff --git a/src/components.es6/ccImageLightbox.css → src/ccImageLightbox.css b/src/components.es6/ccImageLightbox.css → src/ccImageLightbox.css
diff --git a/src/ccImageLightbox.js b/src/ccImageLightbox.js
@@ -0,0 +1,183 @@
+class CCImageLightbox {
+ constructor() {
+ this.store = {
+ current: {
+ galleryId: null,
+ index: null
+ },
+ galleries: []
+ };
+ this.init();
+ }
+
+ _setCurrentOpenImage(galleryId, index) {
+ this.store.current.galleryId = galleryId;
+ this.store.current.index = index;
+ }
+ _getCurrentOpenImage() {
+ return this.store.current;
+ }
+ _clearCurrentOpenImage() {
+ this.store.current.galleryId = null;
+ this.store.current.index = null;
+ }
+ _isCurrentOpenImage() {
+ return this.store.current.galleryId !== null;
+ }
+
+ _getGallery(galleryId) {
+ if (this.store[galleryId] === undefined || this.store[galleryId] === null) {
+ this.store[galleryId] = [];
+ }
+ return this.store[galleryId];
+ }
+
+ _getImage(galleryId, index) {
+ const gallery = this._getGallery(galleryId);
+ if (gallery[index] === undefined || gallery[index] === null) {
+ gallery[index] = {};
+ }
+ return gallery[index];
+ }
+
+ _isImage(galleryId, index) {
+ const image = this._getImage(galleryId, index);
+ return !(image.src === undefined || image.src === null);
+ }
+
+ _renderNextOrPreviousButton(galleryId, index, direction) {
+ var self = this;
+ const button = document.createElement('div');
+ button.setAttribute('class', 'cc-lightbox--' + direction);
+ if (self._isImage(galleryId, index)) {
+ button.setAttribute('class', direction === 'left' ? 'cc-lightbox--left cc-lightbox--left--has-previous' : 'cc-lightbox--right cc-lightbox--right--has-next');
+ button.onclick = () => self.open(galleryId, index);
+ }
+ return button;
+ };
+
+ _generateId(galleryId, index) {
+ return 'cc-lightbox--' + galleryId + '--' + index;
+ }
+
+
+ closeIfOpen() {
+ const self = this;
+ const lightboxWrapper = document.getElementsByClassName('cc-lightbox-wrapper');
+ if (lightboxWrapper[0] !== undefined && lightboxWrapper[0] !== null) {
+ lightboxWrapper[0].remove();
+ }
+ self._clearCurrentOpenImage();
+ }
+
+ open(galleryId, index) {
+ this.closeIfOpen();
+ this._setCurrentOpenImage(galleryId, index);
+ this.create(galleryId, index);
+ }
+
+ create(galleryId, index) {
+ const self = this;
+ const indexInt = parseInt(index, 10);
+
+ // WRAPPER
+ const wrapper = document.createElement('div');
+ wrapper.setAttribute('class', 'cc-lightbox-wrapper');
+ wrapper.setAttribute('data-cc-lightbox-gallery-id', galleryId);
+ document.body.appendChild(wrapper);
+
+ // TOPBAR
+ const topBar = document.createElement('div');
+ topBar.setAttribute('class', 'cc-lightbox--top');
+ wrapper.appendChild(topBar);
+
+ // TITLEBAR
+ const titleBar = document.createElement('div');
+ titleBar.setAttribute('class', 'cc-lightbox--top-title');
+ titleBar.innerHTML = self._getImage(galleryId, index).title;
+ topBar.appendChild(titleBar);
+
+ // CLOSEBUTTON
+ const closeButton = document.createElement('div');
+ closeButton.setAttribute('class', 'cc-lightbox--top-close');
+ closeButton.onclick = () => self.closeIfOpen();
+ topBar.appendChild(closeButton);
+
+ // PREVIOUS BUTTON
+ wrapper.appendChild(self._renderNextOrPreviousButton(galleryId, (indexInt - 1), 'left'));
+
+ // IMAGE
+ const image = document.createElement('div');
+ image.setAttribute('class', 'cc-lightbox--image');
+ wrapper.appendChild(image);
+ const imageInner = document.createElement('div');
+ imageInner.setAttribute('class', 'cc-lightbox--image-inner');
+ image.appendChild(imageInner);
+ const imageInnerWrap = document.createElement('div');
+ imageInnerWrap.setAttribute('class', 'cc-lightbox--image-inner-wrap');
+ imageInner.appendChild(imageInnerWrap);
+ const img = document.createElement('img');
+ img.onload = function () {
+ image.setAttribute('class', 'cc-lightbox--image cc-lightbox--image-loaded');
+ };
+ img.setAttribute('src', self._getImage(galleryId, index).src);
+ img.setAttribute('class', 'cc-lightbox--image-img');
+ img.setAttribute('id', self._generateId(galleryId, index));
+ imageInnerWrap.appendChild(img);
+
+ // NEXT BUTTON
+ wrapper.appendChild(self._renderNextOrPreviousButton(galleryId, (indexInt + 1), 'right'));
+
+ return false;
+ }
+
+ init() {
+ const self = this;
+ const lightboxElements = document.querySelectorAll('[data-cc-lightbox]');
+
+ for (let i = 0; i < lightboxElements.length; i++) {
+ const lightboxElement = lightboxElements[i];
+ const galleryId = lightboxElement.getAttribute('data-cc-lightbox');
+ const nextIndex = self._getGallery(galleryId).length;
+ const nextImage = self._getImage(galleryId, nextIndex);
+ nextImage.title = lightboxElement.getAttribute('data-cc-title');
+ nextImage.src = lightboxElement.parentNode.getAttribute('href');
+
+ //
+ // THUMBNAIL CLICK OPENS LIGHTBOX
+ //
+ lightboxElement.parentNode.onclick = () => {
+ self.open(galleryId, nextIndex);
+ return false;
+ };
+ }
+
+ //
+ // CLOSE ON ESCAPE KEY PRESS
+ //
+ document.addEventListener('keydown', function (event) {
+ if (event.keyCode === 27) {
+ self.closeIfOpen();
+ }
+ if (event.keyCode === 37) { // left
+ if (self._isCurrentOpenImage()) {
+ const current = self._getCurrentOpenImage();
+ if (self._isImage(current.galleryId, current.index - 1)) {
+ self.open(current.galleryId, current.index - 1);
+ }
+ }
+ }
+ if (event.keyCode === 39) { // right
+ if (self._isCurrentOpenImage()) {
+ const current = self._getCurrentOpenImage();
+ if (self._isImage(current.galleryId, current.index + 1)) {
+ self.open(current.galleryId, current.index + 1);
+ }
+ }
+ }
+ }, false);
+
+ };
+};
+
+export default CCImageLightbox;
diff --git a/webpack.browser.config.js b/webpack.browser.config.js
@@ -8,7 +8,7 @@ var MINIFY = JSON.parse(process.env.MINIFY || '0');
 var jsExtension = MINIFY ? '.min.js' : '.js';
 var cssExtension = MINIFY ? '.min.css' : '.css';
 module.exports = {
- entry: './src/build.browser.js',
+ entry: './webpack.browser.main.js',
  output: {
  path: path.join(__dirname, 'build'),
  filename: 'cc-image-lightbox' + jsExtension

diff --git a/webpack.browser.main.js b/webpack.browser.main.js
@@ -0,0 +1,7 @@
+/**
+ * USED TO GENERATE A BROWSER VERSION WITH WEBPACK.
+ * SEE build/* FILES
+ */
+import './src/ccImageLightbox.css';
+import CCImageLightbox from './src/ccImageLightbox.js';
+new CCImageLightbox();