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>

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 c210a5b..2a189a1 100644 (file)
--- 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');