From e13c0e963514010cb98e8ad8dacad819a933b384 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
---
 .../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..c9009a8e6c 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 %]"><i class="fa fa-eye" aria-hidden="true"></i> Preview content</a>
+                                </div>
+								<div id="contentModal[% loop.count %]" class="modal" tabindex="-1" role="dialog" data-number="[% loop.count %]">
+								  <div class="modal-dialog" role="document">
+									<div class="modal-content">
+									  <div class="modal-header">
+										<h5 class="modal-title">Preview of: "[% opac_new.title %]"</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.11.0