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();
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import CCImageLightbox from 'cc-image-lightbox';

		new CCImageLightbox();