From 21444a604787f618724ca5a6ba73e23b621651ae Mon Sep 17 00:00:00 2001
From: oliver <coderkun@users.noreply.github.com>
Date: Fri, 21 Aug 2015 10:25:47 +0200
Subject: [PATCH] 1) move JavaScript-code to scripts.js 2) add image sources
 for Questtext images

---
 views/html/html.tpl         | 21 +--------
 views/html/quests/quest.tpl | 22 +++++++++-
 www/css/desktop.css         |  2 +
 www/js/scripts.js           | 87 ++++++++++++++++++++++++++++++++++++-
 4 files changed, 109 insertions(+), 23 deletions(-)

diff --git a/views/html/html.tpl b/views/html/html.tpl
index 778b84d1..aa7d33a6 100644
--- a/views/html/html.tpl
+++ b/views/html/html.tpl
@@ -18,26 +18,7 @@
     <script type="text/javascript" src="<?=$linker->link(array('js','jquery-ui.min.js'))?>"></script>
     <script type="text/javascript" src="<?=$linker->link(array('js','jquery.nicescroll.min.js'))?>"></script>
     <script type="text/javascript" src="<?=$linker->link(array('js','ol.js'))?>"></script>
-    <script type="text/javascript">
-    $(document).ready(
-    function() {
-        $(".qtextbox").niceScroll({autohidemode:false,cursorcolor:"#c2beb9"});
-    }
-    );
-    </script>
-    <script src="/js/imagelightbox.min.js"></script>
-    <script type="text/javascript">
-    $( function()
-    {
-        $( 'a' ).imageLightbox();
-    });
-    </script>
-    <script type="text/javascript">
-    $(document).ready(function(){
-        setTimeout(function() { $(".notify").fadeOut(1500); }, 5000);
-        $('body').click(function() { $(".notify").fadeOut(200); });
-    });
-    </script>
+    <script type="text/javascript" src="<?=$linker->link(array('js','imagelightbox.min.js'))?>"></script>
     <!--[if lt IE 9]>
     <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
diff --git a/views/html/quests/quest.tpl b/views/html/quests/quest.tpl
index 93525cbc..05d14f93 100644
--- a/views/html/quests/quest.tpl
+++ b/views/html/quests/quest.tpl
@@ -19,7 +19,16 @@
         <?php foreach($questtexts['Prolog'] as &$questtext) : ?>
         <p class="qtext cf">
             <?php if(array_key_exists('media', $questtext)) : ?>
-            <a href="<?=$linker->link(array('media','seminary',$seminary['url'],$questtext['media']['url']))?>"><img src="<?=$linker->link(array('media','seminary',$seminary['url'],$questtext['media']['url'], 'quest'))?>" /></a>
+            <a href="<?=$linker->link(array('media','seminary',$seminary['url'],$questtext['media']['url']))?>">
+                <img src="<?=$linker->link(array('media','seminary',$seminary['url'],$questtext['media']['url'], 'quest'))?>" />
+            </a>
+            <?php if(!empty($questtext['media']['sourceurl'])) : ?>
+            <span class="source">
+                <a href="<?=$questtext['media']['sourceurl']?>" target="_blank" title="<?=_('Image source')?>" rel="nofollow">
+                    <i class="fa fa-external-link"></i>
+                </a>
+            </span>
+            <?php endif ?>
             <?php elseif(!is_null($media) && !$mediaShown) : ?>
             <?php $mediaShown = true; ?>
             <a href="<?=$linker->link(array('media','seminary',$seminary['url'],$media['url']))?>"><img src="<?=$linker->link(array('media','seminary',$seminary['url'],$media['url'],'quest'))?>" /></a>
@@ -85,7 +94,16 @@
         <?php foreach($questtexts['Epilog'] as &$questtext) : ?>
         <p class="qtext cf">
             <?php if(array_key_exists('media', $questtext)) : ?>
-            <a href="<?=$linker->link(array('media','seminary',$seminary['url'],$questtext['media']['url']))?>"><img src="<?=$linker->link(array('media','seminary',$seminary['url'],$questtext['media']['url'],'quest'))?>" /></a>
+            <a href="<?=$linker->link(array('media','seminary',$seminary['url'],$questtext['media']['url']))?>">
+                <img src="<?=$linker->link(array('media','seminary',$seminary['url'],$questtext['media']['url'],'quest'))?>" />
+            </a>
+            <?php if(!empty($questtext['media']['sourceurl'])) : ?>
+            <span class="source">
+                <a href="<?=$questtext['media']['sourceurl']?>" target="_blank" title="<?=_('Image source')?>" rel="nofollow">
+                    <i class="fa fa-external-link"></i>
+                </a>
+            </span>
+            <?php endif ?>
             <?php endif ?>
             <?=str_replace('<p>', '', str_replace('</p>', '', $t->t($questtext['text'])))?>
         </p>
diff --git a/www/css/desktop.css b/www/css/desktop.css
index 3aa859bf..57187941 100644
--- a/www/css/desktop.css
+++ b/www/css/desktop.css
@@ -129,8 +129,10 @@ aside{display:none}
 .qtextbox{font-size:.875em;border-radius:5px;background:#fff;border:15px solid #fff;max-height:200px;overflow:hidden}
 .qtext{padding-right:15px}
 .qtext img,.grpqimg{float:right;margin-left:15px;max-width:30%;max-height:200px;border-radius:3px}
+.qtext .source{display:none}
 
 #imagelightbox{cursor:pointer;position:fixed;z-index:10000;-ms-touch-action:none;touch-action:none;-webkit-box-shadow:0 0 3.125em rgba( 0, 0, 0, .75 ); -moz-box-shadow:0 0 3.125em rgba( 0, 0, 0, .75 );box-shadow:0 0 3.125em rgba( 0, 0, 0, .75 )}
+#imagelightbox-caption{position:fixed;z-index:10001}
 
 .xpinfo{display:none}
 .xpbar{width:60%;float:left;height:10px;position:relative;background:#eee;border-radius:25px;margin:8px 0 16px}
diff --git a/www/js/scripts.js b/www/js/scripts.js
index b7fa97b6..24603c5f 100644
--- a/www/js/scripts.js
+++ b/www/js/scripts.js
@@ -130,7 +130,92 @@ function notify()
 
 
 
+/**
+ * Image lightbox functions
+ */
+
+/**
+ * Show caption for image.
+ */
+function captionOn()
+{
+    var description = $('a[href="' + $('#imagelightbox').attr('src') + '"] ~ span.source');
+    var div = $('<div id="imagelightbox-caption"></div>');
+    if(description.size() > 0)
+    {
+        description.first().clone().appendTo(div);
+        div.appendTo('body');
+        //$('<div id="imagelightbox-caption">' + description + '</div>' ).appendTo('body');
+    }
+    captionResize();
+    setTimeout(captionResize, 255);
+}
+
+/**
+ * Position caption.
+ */
+function captionResize()
+{
+    var lightbox = $('#imagelightbox');
+    var caption = $('#imagelightbox-caption');
+    if(lightbox.size() > 0 && caption.size() > 0)
+    {
+        var right = $(window).width() - lightbox.position().left - lightbox.width();
+        var bottom = $(window).height() - lightbox.position().top - lightbox.height();
+        caption.css('right', right+'px');
+        caption.css('bottom', bottom+'px');
+    }
+}
+
+/**
+ * Remove caption.
+ */
+function captionOff()
+{
+    $('#imagelightbox-caption').remove();
+}
+
+
+
+
+
+/**
+ * Start up
+ */
 $(function() {
-    // Play notification
+    // Add image lightbox
+    $('a').imageLightbox({
+        animationSpeed: 250,
+        onLoadStart: function() {
+            captionOff();
+        },
+        onLoadEnd: function() {
+            captionOn();
+        },
+        onEnd: function() {
+            captionOff();
+        }
+    });
+    // Position caption
+    $(window).on('resize', function() {
+        setTimeout(captionResize, 10);
+    });
+
+    // Add scroll
+    $(".qtextbox").niceScroll({
+        autohidemode:false,
+        cursorcolor:"#c2beb9"
+    });
+
+    // Notification
     notify();
+    setTimeout(
+        function() {
+            $(".notify").fadeOut(1500);
+        },
+        5000
+    );
+    $('body').click(function() {
+        $(".notify").fadeOut(200);
+    });
 });