From 0118c3ac14d0e554e390800b669e9f21f1b1f6c1 Mon Sep 17 00:00:00 2001
From: Lorenzo Giacomelli <l.giacomelli@asdynamics.it>
Date: Thu, 24 Mar 2016 18:54:12 +0100
Subject: [PATCH] implementazione photoswipe; modifica path immagini
 all'interno di default-skin.css; la funzione clickable dalle immagini non fa
 nulla;

---
 .../lib/media/mediaRenderers/MediaImage.php   |   2 +-
 public/articolo.php                           | 145 +++++++++++++++---
 public/js/functions.js                        |   2 +-
 public/style/default-skin.css                 |   4 +-
 public/style/public.css                       |   2 +-
 5 files changed, 127 insertions(+), 28 deletions(-)

diff --git a/private/lib/media/mediaRenderers/MediaImage.php b/private/lib/media/mediaRenderers/MediaImage.php
index 31cf8ee..5df7170 100644
--- a/private/lib/media/mediaRenderers/MediaImage.php
+++ b/private/lib/media/mediaRenderers/MediaImage.php
@@ -17,7 +17,7 @@ class MediaImage extends MediaRenderer{
 		if (array_key_exists("clickable", $opt)){
 			$clickable = $opt["clickable"];
 			if($clickable){
-				$click='onclick="javascript:previewImage(\''.GUIHandler::getBaseUrl().'getImage.php?id='.$this->id.'&size='.MediaRendererInterface::SIZE_BIG.'\')"';
+// 				$click='onclick="javascript:loadFoto(\''.$this->id.'\')"';
 			}
 		}
 		
diff --git a/public/articolo.php b/public/articolo.php
index 22a219b..b8331af 100644
--- a/public/articolo.php
+++ b/public/articolo.php
@@ -107,11 +107,11 @@ try {
 }
 GUIHandler::generateHtmlHeaders(array("additionalHeaders"=>$additionalHeaders));
 ?>
-<div class="imageOverlay" onclick="javascript:hidePreview()">
-<!--	<div class="imagePreviewBefore"><img src="images/leftImage.png" /></div> 
- 	<div class="imagePreviewAfter"><img src="images/rightImage.png" /></div>  -->
+<!--<div class="imageOverlay" onclick="javascript:hidePreview()">
+	<div class="imagePreviewBefore"><img src="images/leftImage.png" /></div> 
+ 	<div class="imagePreviewAfter"><img src="images/rightImage.png" /></div>  
 </div>
-<div class="clickableImageContainer" onclick="javascript:hidePreview()"></div>
+<div class="clickableImageContainer" onclick="javascript:hidePreview()"></div> -->
 <div style="width:1000px;margin-left:auto;margin-right:auto;" itemscope itemtype="http://schema.org/Article">
 <?php 	
 	
@@ -128,7 +128,11 @@ GUIHandler::generateHtmlHeaders(array("additionalHeaders"=>$additionalHeaders));
 		<div class="headArticolo">
 			<div class="articoloMainMedia mediaContent" >
 			<?php 	if(!is_null($media)) {
-						$media->renderMedia(array("size"=>MediaRenderer::SIZE_BIG,"clickable"=>true));
+			?>
+				<div onclick="javascript:loadImage('<?php echo $media->id;?>')">
+					<?php $media->renderMedia(array("size"=>MediaRenderer::SIZE_BIG,"clickable"=>true));?>
+				</div>
+			<?php 
 					}
 			?>
 			</div>
@@ -185,14 +189,26 @@ GUIHandler::generateHtmlHeaders(array("additionalHeaders"=>$additionalHeaders));
 							<div class="moreMedia"><span>Altri contenuti</span></div>
 						</div>
 						<div class="caroselContainer">
+						<script type="text/javascript">
+							var items = [];
+						</script>
 						<?php 
-								
+								$i=0;
 								foreach($medias as $mediaImage){?>
 									<div class="carosImage mediaContent">
 										<span class="helper"></span>
-										<?php $mediaImage->renderMedia(array("size"=>MediaRenderer::SIZE_MINI,"clickable"=>true));?>
-									</div>							
-							<?php 		
+										<div style="display:inline-block;" onclick="javascript:loadImage('<?php echo $i;?>')"><?php $mediaImage->renderMedia(array("size"=>MediaRenderer::SIZE_MINI,"clickable"=>true));?></div>
+									</div>	
+									<script type="text/javascript">
+										var ele ={
+													src: '<?php echo GUIHandler::getBaseUrl()."getImage.php?id=".$mediaImage->id."&size=".MediaRenderer::SIZE_BIG;?>',
+													w:<?php echo MediaRenderer::SIZE_BIG_W;?>,
+													h:<?php echo MediaRenderer::SIZE_BIG_H;?>
+												}
+										items.push(ele);
+									</script>						
+							<?php
+								$i++;	
 								}
 							?>
 						</div>
@@ -261,8 +277,98 @@ GUIHandler::generateHtmlHeaders(array("additionalHeaders"=>$additionalHeaders));
 	GUIHandler::generateFooter();
 ?>
 </div>
+<!-- Root element of PhotoSwipe. Must have class pswp. -->
+<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
 
+    <!-- Background of PhotoSwipe. 
+         It's a separate element as animating opacity is faster than rgba(). -->
+    <div class="pswp__bg"></div>
+
+    <!-- Slides wrapper with overflow:hidden. -->
+    <div class="pswp__scroll-wrap">
+
+        <!-- Container that holds slides. 
+            PhotoSwipe keeps only 3 of them in the DOM to save memory.
+            Don't modify these 3 pswp__item elements, data is added later on. -->
+        <div class="pswp__container">
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+        </div>
+
+        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
+        <div class="pswp__ui pswp__ui--hidden">
+
+            <div class="pswp__top-bar">
+
+                <!--  Controls are self-explanatory. Order can be changed. -->
+
+                <div class="pswp__counter"></div>
+
+                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
+
+<!-- Eliminato share                <button class="pswp__button pswp__button--share" title="Share"></button> -->
+
+                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
+
+                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+
+                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
+                <!-- element will get class pswp__preloader--active when preloader is running -->
+                <div class="pswp__preloader">
+                    <div class="pswp__preloader__icn">
+                      <div class="pswp__preloader__cut">
+                        <div class="pswp__preloader__donut"></div>
+                      </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+                <div class="pswp__share-tooltip"></div> 
+            </div>
+
+            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
+            </button>
+
+            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
+            </button>
+
+            <div class="pswp__caption">
+                <div class="pswp__caption__center"></div>
+            </div>
+
+        </div>
+
+    </div>
+
+</div>
 <script type="text/javascript">
+<?php 
+if(sizeof($medias)>0){
+?>
+	function loadImage(pos){
+// 		var position = items.indexOf(imageId);
+		var pswpElement = document.querySelectorAll('.pswp')[0];
+	
+		//build items array
+	
+	
+		//define options (if needed)
+		var options = {
+		 // optionName: 'option value'
+		 // for example:
+		 index: pos // start at slide
+		};
+	//		alert(items);
+		//Initializes and opens PhotoSwipe
+		var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
+		gallery.init();
+	}
+<?php 
+}
+?>
+
 	$(document).ready(function(event){
 
 		$("#submit").click(function (){
@@ -310,19 +416,12 @@ GUIHandler::generateHtmlHeaders(array("additionalHeaders"=>$additionalHeaders));
 		});
 <?php }
 ?>
-// 		$("form#commentoForm").on('submit',function (){
-// 			$.ajax({
-// 				type:'post',
-// 				url:'sendCommentoBackend.php',
-// 				dataType:'html',
-// 				data:$("#commentoForm").serialize(),
-// 				target: '#sentMessage',
-// 				complete: function(){
-// 						$("#commentoArea").remove();
-
-// 					}
-// 			});
-// 		});
-	});
+<?php 
+// if(sizeof($medias)>0){?>
+	
+<?php 
+// }
+?>
+});
 </script>
 <?php GUIHandler::generateGoogleAnalyticsScripts();?>
diff --git a/public/js/functions.js b/public/js/functions.js
index 61c0d0c..d8c8e08 100644
--- a/public/js/functions.js
+++ b/public/js/functions.js
@@ -74,4 +74,4 @@ function hidePreview(){
 	$('.imageOverlay').css("display","none");
 	$('.clickableImageContainer').css("display","none");
 	$('#clickImage').remove();
-}
\ No newline at end of file
+}
diff --git a/public/style/default-skin.css b/public/style/default-skin.css
index f99db1b..c8a9d6d 100644
--- a/public/style/default-skin.css
+++ b/public/style/default-skin.css
@@ -52,7 +52,7 @@
 .pswp__button,
 .pswp__button--arrow--left:before,
 .pswp__button--arrow--right:before {
-  background: url(default-skin.png) 0 0 no-repeat;
+  background: url(../images/default-skin.png) 0 0 no-repeat;
   background-size: 264px 88px;
   width: 44px;
   height: 44px; }
@@ -62,7 +62,7 @@
   .pswp--svg .pswp__button,
   .pswp--svg .pswp__button--arrow--left:before,
   .pswp--svg .pswp__button--arrow--right:before {
-    background-image: url(default-skin.svg); }
+    background-image: url(../images/default-skin.svg); }
   .pswp--svg .pswp__button--arrow--left,
   .pswp--svg .pswp__button--arrow--right {
     background: none; } }
diff --git a/public/style/public.css b/public/style/public.css
index 38cc819..7ce147f 100644
--- a/public/style/public.css
+++ b/public/style/public.css
@@ -369,7 +369,7 @@ display: inline-block;
 .carosImage{width:85px;height:100%;display:inline-block;vertical-align:middle;text-align:center;}
 .carosImage > .helper{height:100%;display:inline-block;vertical-align:middle;}
 .carosImage > img {vertical-align:middle; cursor:pointer;}
-
+.carosImage > div {vertical-align:middle; cursor:pointer;}
 .commentiContainer{padding:5px;}
 
 .oldCommentiContainer{margin:5px 0px; padding-left: 30px;}