1+ class CCImageLightbox {
2+ constructor ( ) {
3+ this . store = {
4+ current : {
5+ galleryId : null ,
6+ index : null
7+ } ,
8+ galleries : [ ]
9+ } ;
10+ this . init ( ) ;
11+ }
12+
13+ _setCurrentOpenImage ( galleryId , index ) {
14+ this . store . current . galleryId = galleryId ;
15+ this . store . current . index = index ;
16+ }
17+ _getCurrentOpenImage ( ) {
18+ return this . store . current ;
19+ }
20+ _clearCurrentOpenImage ( ) {
21+ this . store . current . galleryId = null ;
22+ this . store . current . index = null ;
23+ }
24+ _isCurrentOpenImage ( ) {
25+ return this . store . current . galleryId !== null ;
26+ }
27+
28+ _getGallery ( galleryId ) {
29+ if ( this . store [ galleryId ] === undefined || this . store [ galleryId ] === null ) {
30+ this . store [ galleryId ] = [ ] ;
31+ }
32+ return this . store [ galleryId ] ;
33+ }
34+
35+ _getImage ( galleryId , index ) {
36+ const gallery = this . _getGallery ( galleryId ) ;
37+ if ( gallery [ index ] === undefined || gallery [ index ] === null ) {
38+ gallery [ index ] = { } ;
39+ }
40+ return gallery [ index ] ;
41+ }
42+
43+ _isImage ( galleryId , index ) {
44+ const image = this . _getImage ( galleryId , index ) ;
45+ return ! ( image . src === undefined || image . src === null ) ;
46+ }
47+
48+ _renderNextOrPreviousButton ( galleryId , index , direction ) {
49+ var self = this ;
50+ const button = document . createElement ( 'div' ) ;
51+ button . setAttribute ( 'class' , 'cc-lightbox--' + direction ) ;
52+ if ( self . _isImage ( galleryId , index ) ) {
53+ button . setAttribute ( 'class' , direction === 'left' ? 'cc-lightbox--left cc-lightbox--left--has-previous' : 'cc-lightbox--right cc-lightbox--right--has-next' ) ;
54+ button . onclick = ( ) => self . open ( galleryId , index ) ;
55+ }
56+ return button ;
57+ } ;
58+
59+ _generateId ( galleryId , index ) {
60+ return 'cc-lightbox--' + galleryId + '--' + index ;
61+ }
62+
63+
64+ closeIfOpen ( ) {
65+ const self = this ;
66+ const lightboxWrapper = document . getElementsByClassName ( 'cc-lightbox-wrapper' ) ;
67+ if ( lightboxWrapper [ 0 ] !== undefined && lightboxWrapper [ 0 ] !== null ) {
68+ lightboxWrapper [ 0 ] . remove ( ) ;
69+ }
70+ self . _clearCurrentOpenImage ( ) ;
71+ }
72+
73+ open ( galleryId , index ) {
74+ this . closeIfOpen ( ) ;
75+ this . _setCurrentOpenImage ( galleryId , index ) ;
76+ this . create ( galleryId , index ) ;
77+ }
78+
79+ create ( galleryId , index ) {
80+ const self = this ;
81+ const indexInt = parseInt ( index , 10 ) ;
82+
83+ // WRAPPER
84+ const wrapper = document . createElement ( 'div' ) ;
85+ wrapper . setAttribute ( 'class' , 'cc-lightbox-wrapper' ) ;
86+ wrapper . setAttribute ( 'data-cc-lightbox-gallery-id' , galleryId ) ;
87+ document . body . appendChild ( wrapper ) ;
88+
89+ // TOPBAR
90+ const topBar = document . createElement ( 'div' ) ;
91+ topBar . setAttribute ( 'class' , 'cc-lightbox--top' ) ;
92+ wrapper . appendChild ( topBar ) ;
93+
94+ // TITLEBAR
95+ const titleBar = document . createElement ( 'div' ) ;
96+ titleBar . setAttribute ( 'class' , 'cc-lightbox--top-title' ) ;
97+ titleBar . innerHTML = self . _getImage ( galleryId , index ) . title ;
98+ topBar . appendChild ( titleBar ) ;
99+
100+ // CLOSEBUTTON
101+ const closeButton = document . createElement ( 'div' ) ;
102+ closeButton . setAttribute ( 'class' , 'cc-lightbox--top-close' ) ;
103+ closeButton . onclick = ( ) => self . closeIfOpen ( ) ;
104+ topBar . appendChild ( closeButton ) ;
105+
106+ // PREVIOUS BUTTON
107+ wrapper . appendChild ( self . _renderNextOrPreviousButton ( galleryId , ( indexInt - 1 ) , 'left' ) ) ;
108+
109+ // IMAGE
110+ const image = document . createElement ( 'div' ) ;
111+ image . setAttribute ( 'class' , 'cc-lightbox--image' ) ;
112+ wrapper . appendChild ( image ) ;
113+ const imageInner = document . createElement ( 'div' ) ;
114+ imageInner . setAttribute ( 'class' , 'cc-lightbox--image-inner' ) ;
115+ image . appendChild ( imageInner ) ;
116+ const imageInnerWrap = document . createElement ( 'div' ) ;
117+ imageInnerWrap . setAttribute ( 'class' , 'cc-lightbox--image-inner-wrap' ) ;
118+ imageInner . appendChild ( imageInnerWrap ) ;
119+ const img = document . createElement ( 'img' ) ;
120+ img . onload = function ( ) {
121+ image . setAttribute ( 'class' , 'cc-lightbox--image cc-lightbox--image-loaded' ) ;
122+ } ;
123+ img . setAttribute ( 'src' , self . _getImage ( galleryId , index ) . src ) ;
124+ img . setAttribute ( 'class' , 'cc-lightbox--image-img' ) ;
125+ img . setAttribute ( 'id' , self . _generateId ( galleryId , index ) ) ;
126+ imageInnerWrap . appendChild ( img ) ;
127+
128+ // NEXT BUTTON
129+ wrapper . appendChild ( self . _renderNextOrPreviousButton ( galleryId , ( indexInt + 1 ) , 'right' ) ) ;
130+
131+ return false ;
132+ }
133+
134+ init ( ) {
135+ const self = this ;
136+ const lightboxElements = document . querySelectorAll ( '[data-cc-lightbox]' ) ;
137+
138+ for ( let i = 0 ; i < lightboxElements . length ; i ++ ) {
139+ const lightboxElement = lightboxElements [ i ] ;
140+ const galleryId = lightboxElement . getAttribute ( 'data-cc-lightbox' ) ;
141+ const nextIndex = self . _getGallery ( galleryId ) . length ;
142+ const nextImage = self . _getImage ( galleryId , nextIndex ) ;
143+ nextImage . title = lightboxElement . getAttribute ( 'data-cc-title' ) ;
144+ nextImage . src = lightboxElement . parentNode . getAttribute ( 'href' ) ;
145+
146+ //
147+ // THUMBNAIL CLICK OPENS LIGHTBOX
148+ //
149+ lightboxElement . parentNode . onclick = ( ) => {
150+ self . open ( galleryId , nextIndex ) ;
151+ return false ;
152+ } ;
153+ }
154+
155+ //
156+ // CLOSE ON ESCAPE KEY PRESS
157+ //
158+ document . addEventListener ( 'keydown' , function ( event ) {
159+ if ( event . keyCode === 27 ) {
160+ self . closeIfOpen ( ) ;
161+ }
162+ if ( event . keyCode === 37 ) { // left
163+ if ( self . _isCurrentOpenImage ( ) ) {
164+ const current = self . _getCurrentOpenImage ( ) ;
165+ if ( self . _isImage ( current . galleryId , current . index - 1 ) ) {
166+ self . open ( current . galleryId , current . index - 1 ) ;
167+ }
168+ }
169+ }
170+ if ( event . keyCode === 39 ) { // right
171+ if ( self . _isCurrentOpenImage ( ) ) {
172+ const current = self . _getCurrentOpenImage ( ) ;
173+ if ( self . _isImage ( current . galleryId , current . index + 1 ) ) {
174+ self . open ( current . galleryId , current . index + 1 ) ;
175+ }
176+ }
177+ }
178+ } , false ) ;
179+
180+ } ;
181+ } ;
182+
183+ export default CCImageLightbox ;
0 commit comments