From 8ce23ea0e9a8820ff3a298e7f553e1bbf54d4bed Mon Sep 17 00:00:00 2001
From: Lucas Gass <lucas@bywatersolutions.com>
Date: Wed, 28 Oct 2020 04:22:54 +0000
Subject: [PATCH] Bug 26804: Add modal content preview

This patch turns the 'News' column into a preview button. That preview button displays a modal with content of that rows news item.

To test:
1. Apply patch
2. Add some HTML to a News Item. I am using a bunch of lorem ipsum HTML and this image set to 1000px. '<img src="https://koha-community.org/files/2013/09/cropped-kohabanner3.jpg" width="1000" />'.
3. Make sure and have some content with a lot of width and some content with a lot of height.
4. Test the Preview content button
5. Make sure you can scroll through long modals and across modals that are wide
6. Try at different screen sizes and with different combonations of News items

Signed-off-by: Kelly  <kelly@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
---
 .../prog/en/modules/tools/koha-news.tt        | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/koha-news.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/koha-news.tt
index c210a5b707..2a189a1b6b 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/koha-news.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/koha-news.tt
@@ -155,8 +155,25 @@ Edit news item[% ELSE %]Add news item[% END %][% ELSE %]News[% END %]</div>
                             <td><span title="[% opac_new.expirationdate | html %]">[% opac_new.expirationdate | $KohaDates %] [% IF ( opac_new.expired ) %](<span class="expired">expired</span>)[% END %]</span></td>
                             <td>[% opac_new.title | html %]</td>
                             <td>[% opac_new.author_title | html %] [% opac_new.author_firstname | html %] [% opac_new.author_surname | html %]</td>
-                           <td>
-                                [% opac_new.content | $raw %]
+                            <td>
+                                <div class="btn-group">
+                                    <a class="preview_news btn btn-default btn-xs" data-number="[% loop.count | html %]"><i class="fa fa-eye" aria-hidden="true"></i> Preview content</a>
+                                </div>
+                                <div id="contentModal[% loop.count | html %]" class="modal" tabindex="-1" role="dialog" data-number="[% loop.count | html %]">
+                                  <div class="modal-dialog" role="document">
+                                    <div class="modal-content">
+                                      <div class="modal-header">
+                                        <h5 class="modal-title">Preview of: "[% opac_new.title | html %]"</h5>
+                                      </div>
+                                      <div class="modal-body">
+                                        [% opac_new.content | $raw %]
+                                      </div>
+                                      <div class="modal-footer">
+                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
                             </td>
                             <td class="actions">
                                 [% IF ( wysiwyg ) %]
@@ -242,6 +259,10 @@ Edit news item[% ELSE %]Add news item[% END %][% ELSE %]News[% END %]</div>
     [% IF ( opac_news_count ) %]
         [% INCLUDE 'datatables.inc' %]
         <script>
+            $('.preview_news').click( function() {
+                modalNumber = $(this).attr('data-number');
+                $('.modal[data-number="'+modalNumber+'"]').modal('show');
+            })
             function Checkbox(){
                 var form = document.getElementById('del_form');
                 var inputs = form.getElementsByTagName('input');
-- 
2.39.5