Background opacity and some bugfixes

jonnitto · Apr 24, 2016 · f5ffea4 · f5ffea4
1 parent 94fa5c2
commit f5ffea4
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 35 deletions.
diff --git a/Configuration/Settings.yaml b/Configuration/Settings.yaml
@@ -13,6 +13,7 @@ Jonnitto:
     includeJavascript: TRUE
     includeCSS: Dark  # Light / Dark / FALSE
     preloaderMarkup: '<div class="pswp__preloader__icn"><div class="pswp__preloader__cut"><div class="pswp__preloader__donut"></div></div></div>'
+    bgOpacity: 0.8
     show:
       topbar: TRUE
       counter: TRUE

diff --git a/Resources/Private/Javascripts/PhotoSwipe.js b/Resources/Private/Javascripts/PhotoSwipe.js
@@ -4,37 +4,36 @@ var PhotoSwipeUI = require('photoswipe/dist/photoswipe-ui-default.js');
 window.initPhotoSwipeFromDOM = function(gallerySelector) {
 	var lightboxSelector = '.lightbox';
 	var parseThumbnailElements = function(el) {
-		var thumbElements = el.querySelectorAll(lightboxSelector);
-		var numNodes = thumbElements.length;
+		var lighboxElements = el.querySelectorAll(lightboxSelector);
+		var numNodes = lighboxElements.length;
 		var items = [];
-		var figureEl;
-		var linkEl;
+		var element;
 		var size;
 		var item;
+		var image;
 		var figcaption;
 
 		for (var i = 0; i < numNodes; i++) {
-			linkEl = thumbElements[i];
-			size = linkEl.getAttribute('data-size').split('x');
+			element = lighboxElements[i];
+			size = element.getAttribute('data-size').split('x');
 			item = {
-				src: linkEl.getAttribute('href'),
+				src: element.getAttribute('href'),
 				w: parseInt(size[0], 10),
 				h: parseInt(size[1], 10)
 			};
-			figureEl = linkEl.parentNode;
+			figcaption = element.parentNode.querySelector('figcaption');
+			image = element.querySelector('img');
 
-			if (figureEl.children.length > 1) {
-				figcaption = figureEl.children[1];
+			if (figcaption) {
 				item.title = figcaption.innerText || figcaption.textContent || false;
 			}
 
-			if (linkEl.children.length > 0) {
-				// <img> thumbnail element, retrieving thumbnail url
-				item.msrc = linkEl.children[0].getAttribute('src');
+			if (image) {
+				item.msrc = image.getAttribute('src');
 			}
 
-			item.el = figureEl; // save link to element for getThumbBoundsFn
-			items.push(item);
+			item.el = element;
+			items[items.length] = item;
 		}
 
 		return items;
@@ -77,9 +76,7 @@ window.initPhotoSwipeFromDOM = function(gallerySelector) {
 		}
 
 		if (index >= 0) {
-			// open PhotoSwipe if valid index found
 			openPhotoSwipe(index, clickedGallery);
-
 		}
 		return false;
 	};
@@ -113,15 +110,15 @@ window.initPhotoSwipeFromDOM = function(gallerySelector) {
 	};
 
 	var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
-		var pswpElement = document.querySelectorAll('.pswp')[0];
+		var pswpElement = document.getElementById('pswp');
+		var opacity = pswpElement.getAttribute('data-opacity');
 		var gallery;
 		var options;
-		var items;
-
-		items = parseThumbnailElements(galleryElement);
+		var items = parseThumbnailElements(galleryElement);
 
 		// define options (if needed)
 		options = {
+			bgOpacity: opacity ? parseFloat(opacity) : 0,
 
 			// define gallery index (for URL)
 			galleryUID: galleryElement.getAttribute('data-pswp-uid'),

diff --git a/Resources/Private/Styles/PhotoSwipe-Light.scss b/Resources/Private/Styles/PhotoSwipe-Light.scss
@@ -1,7 +1,9 @@
 $pswp__background-color: #fff;
 $pswp__placeholder-color: #fff;
 $pswp__template-filemame: light-skin;
-
+$pswp__counter-color: #000;
+$pswp__caption-small-color: #222;
+$pswp__caption-color: #333;
 
 @import 'main';
 @import 'default-skin/default-skin';
diff --git a/Resources/Private/Templates/TypoScriptObjects/Markup.html b/Resources/Private/Templates/TypoScriptObjects/Markup.html
@@ -1,4 +1,4 @@
-<div id="pswp" class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+<div id="pswp" class="pswp" tabindex="-1" role="dialog" aria-hidden="true"{f:if(condition:photoswipe.bgOpacity,then: 'data-opacity="{photoswipe.bgOpacity}"')}>
 	<div class="pswp__bg"></div>
 	<div class="pswp__scroll-wrap">
 		<div class="pswp__container">
@@ -8,9 +8,7 @@
 		</div>
 		<div class="pswp__ui pswp__ui--hidden">
 			<f:if condition="{photoswipe.show.topbar}"><div class="pswp__top-bar"></f:if>
-				<f:if condition="{photoswipe.show.counter}">
-					<div class="pswp__counter"></div>
-				</f:if>
+				<div class="pswp__counter"{f:if(condition:photoswipe.show.counter,else: 'style="display:none;"')}></div>
 				<f:if condition="{photoswipe.show.close}">
 					<button class="pswp__button pswp__button--close" title="{f:translate(id:'close',package:'Jonnitto.PhotoSwipe')}"></button>
 				</f:if>
@@ -38,9 +36,7 @@
 				<button class="pswp__button pswp__button--arrow--left" title="{f:translate(id:'prev',package:'Jonnitto.PhotoSwipe')}"></button>
 				<button class="pswp__button pswp__button--arrow--right" title="{f:translate(id:'next',package:'Jonnitto.PhotoSwipe')}"></button>
 			</f:if>
-			<f:if condition="{photoswipe.show.caption}">
-				<div class="pswp__caption"><div class="pswp__caption__center"></div></div>
-			</f:if>
+			<div class="pswp__caption"{f:if(condition:photoswipe.show.caption,else: 'style="display:none;"')}><div class="pswp__caption__center"></div></div>
 		</div>
 	</div>
 </div>
diff --git a/Resources/Public/Main.js b/Resources/Public/Main.js
diff --git a/Resources/Public/PhotoSwipe-Light.css b/Resources/Public/PhotoSwipe-Light.css
diff --git a/composer.json b/composer.json
@@ -1,7 +1,7 @@
 {
     "name": "jonnitto/photoswipe",
     "type": "typo3-flow-plugin",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "license": "MIT",
     "description": "PhotoSwipe for Neos CMS",
     "keywords": ["flow", "neos", "gallery", "lightbox", "photo", "image"],

diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
   },
   "scripts": {
     "build:assets": "rsync -av node_modules/photoswipe/dist/default-skin/* Resources/Public --exclude *.css",
-    "build:js": "browserify Resources/Private/Javascripts/PhotoSwipe.js | uglifyjs -c > Resources/Public/Main.js",
+    "build:js": "browserify Resources/Private/Javascripts/PhotoSwipe.js | uglifyjs --mangle --compress > Resources/Public/Main.js",
     "build:rawjs":  "browserify Resources/Private/Javascripts/PhotoSwipe.js -o Resources/Public/Main.js",
     "build:dark": "node-sass --include-path node_modules/photoswipe/src/css Resources/Private/Styles/PhotoSwipe-Dark.scss Resources/Public/PhotoSwipe-Dark.css | cssnano Resources/Public/PhotoSwipe-Dark.css Resources/Public/PhotoSwipe-Dark.css  --autoprefixer.add true --autoprefixer.browsers: '> 1%' --no-zindex --discardComments.removeAll true",
     "build:light": "node-sass --include-path node_modules/photoswipe/src/css Resources/Private/Styles/PhotoSwipe-Light.scss Resources/Public/PhotoSwipe-Light.css | cssnano Resources/Public/PhotoSwipe-Light.css Resources/Public/PhotoSwipe-Light.css  --autoprefixer.add true --autoprefixer.browsers: '> 1%' --no-zindex --discardComments.removeAll true",