Bug 31041: (follow-up) Clean up and generalise

This patch cleans out the print media css rules that were originally
added for modalprinting.  The window.open method is simpler to maintain
and will more reliably print modal content as expected.

We factor out the printer code into it's own JS asset that we can apply
to other printable modals and then use it in the two existing places
where such modals have been defined already (cashup summary and bundle
confirmation).

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
(cherry picked from commit ef880e349f)
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
(cherry picked from commit 39a8ff6bb5)
Signed-off-by: Pedro Amorim <pedro.amorim@ptfs-europe.com>
This commit is contained in:
Martin Renvoize 2023-11-07 11:35:22 +00:00 committed by Pedro Amorim
parent 1feb977d43
commit 6f798ff886
5 changed files with 65 additions and 105 deletions

View File

@ -4485,36 +4485,3 @@ div .suggestion_note {
border-bottom-right-radius: 5px;
}
}
@media print {
body.modalprinter * {
visibility: hidden;
}
body.modalprinter .modal-dialog.focused {
position: absolute;
padding: 0;
margin: 0;
left: 0;
top: 0;
}
body.modalprinter .modal-dialog.focused .modal-content {
border-width: 0;
}
body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title,
body.modalprinter .modal-dialog.focused .modal-content .modal-body,
body.modalprinter .modal-dialog.focused .modal-content .modal-body * {
visibility: visible;
}
body.modalprinter .modal-dialog.focused .modal-content .modal-header,
body.modalprinter .modal-dialog.focused .modal-content .modal-body {
padding: 0;
}
body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title {
margin-bottom: 20px;
}
}

View File

@ -1601,22 +1601,6 @@
"order": [[ 1, 'asc' ], [ 0, 'asc' ]]
}));
// print modals
$('.modal.printable').on('shown.bs.modal', function() {
$('.modal-dialog', this).addClass('focused');
$('body').addClass('modalprinter');
if ($(this).hasClass('autoprint')) {
window.print();
}
}).on('hidden.bs.modal', function() {
$('.modal-dialog', this).removeClass('focused');
$('body').removeClass('modalprinter');
});
$('.printModal').click(function() {
window.print();
});
[% IF ( !(Koha.Preference('TransfersBlockCirc')) && Koha.Preference('AutomaticConfirmTransfer') ) %]
$("#wrong-transfer-modal").on('hidden.bs.modal',function(){
$("#wrongtransferform").submit();
@ -1628,6 +1612,7 @@
[% END %]
[% END %]
});
[% Asset.js("js/modal_printer.js") | $raw %]
</script>
[% END %]

View File

@ -351,6 +351,7 @@
[% INCLUDE 'format_price.inc' %]
[% INCLUDE 'js-date-format.inc' %]
[% Asset.js("js/cashup_modal.js") | $raw %]
[% Asset.js("js/modal_printer.js") | $raw %]
[% INCLUDE 'calendar.inc' %]
<script>
var sales_table = $("#sales").dataTable($.extend(true, {}, dataTablesDefaults, {

View File

@ -41,60 +41,4 @@ $(document).ready(function() {
}
});
});
$('.modal.printable').on('shown.bs.modal', function() {
$('.modal-dialog', this).addClass('focused');
$('body').addClass('modalprinter');
if ($(this).hasClass('autoprint')) {
window.print();
}
}).on('hidden.bs.modal', function() {
$('.modal-dialog', this).removeClass('focused');
$('body').removeClass('modalprinter');
});
$('.printModal').click(function() {
let contents = $('#cashupSummaryModal .modal-body').html();
let win = window.open('','');
win.document.write(`
<style>
table {
background-color: #FFFFFF;
border-bottom: 1px solid #CCCCCC;
border-collapse: collapse;
border-left: 1px solid #CCCCCC;
margin: 3px 0 5px 0;
padding: 0;
width: 99%;
}
td {
background-color: #FFF;
border-bottom: 1px solid #CCCCCC;
border-left: 0;
border-right: 1px solid #CCCCCC;
border-top: 0;
font-size: 12px;
padding: 5px 5px 5px 5px;
}
th {
background-color: #E9E9E9;
border-bottom: 1px solid #CCCCCC;
border-left: 0;
border-right: 1px solid #CCCCCC;
border-top: 0;
font-size: 14px;
font-weight: bold;
padding: 5px 5px 5px 5px;
text-align: left;
}
</style>
`)
win.document.write( contents );
win.print();
win.close();
});
});

View File

@ -0,0 +1,63 @@
$(document).ready(function() {
function modalPrint() {
let title = $('.modal-dialog.focused .modal-title').html();
let contents = $('.modal-dialog.focused .modal-body').html();
let win = window.open('','');
win.document.write(`
<style>
table {
background-color: #FFFFFF;
border-bottom: 1px solid #CCCCCC;
border-collapse: collapse;
border-left: 1px solid #CCCCCC;
margin: 3px 0 5px 0;
padding: 0;
width: 99%;
}
td {
background-color: #FFF;
border-bottom: 1px solid #CCCCCC;
border-left: 0;
border-right: 1px solid #CCCCCC;
border-top: 0;
font-size: 12px;
padding: 5px 5px 5px 5px;
}
th {
background-color: #E9E9E9;
border-bottom: 1px solid #CCCCCC;
border-left: 0;
border-right: 1px solid #CCCCCC;
border-top: 0;
font-size: 14px;
font-weight: bold;
padding: 5px 5px 5px 5px;
text-align: left;
}
</style>
`)
win.document.write( title );
win.document.write( contents );
win.print();
win.close();
}
// Set focused on printable modals on open and autoprint if required
$('.modal.printable').on('shown.bs.modal', function() {
$('.modal-dialog', this).addClass('focused');
if ($(this).hasClass('autoprint')) {
modalPrint();
}
}).on('hidden.bs.modal', function() {
$('.modal-dialog', this).removeClass('focused');
});
// Trigger print on button click
$('.printModal').click(function() {
modalPrint();
});
});