yvan/jira-card-printer
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: render within iframe

Browse Source
This commit is contained in:
Bengt Brodersen 2015-12-16 18:21:30 +01:00
parent b2969ceae9
commit 8a619beab5
1 changed files with 79 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
bookmarklet.js
View File

@ -59,12 +59,6 @@
return; return;
} }
//preconditions
if (jQuery("#card-print-overlay").length > 0) {
alert("Print Card already opened!");
return;
}
// collect selcted issues // collect selcted issues
var issueKeyList = global.appFunctions.getSelectedIssueKeyList(); var issueKeyList = global.appFunctions.getSelectedIssueKeyList();
if (issueKeyList.length <= 0) { if (issueKeyList.length <= 0) {
@ -75,36 +69,65 @@
return; return;
} }
// open print preview //preconditions
jQuery("body").append(printPreviewElement()); if (jQuery("#card-printer-iframe").length > 0) {
jQuery("#card-print-overlay").prepend(printOverlayStyleElement()); alert("Card Printer already opened!");
return;
}
var printFrame = jQuery("#card-print-dialog-content-iframe"); // create iFrame
var printWindow = printFrame[0].contentWindow; var appFrame = document.createElement('iframe');
printWindow.addEventListener("resize", function() { appFrame.id = "card-printer-iframe";
jQuery(appFrame).css({
'position': 'fixed',
'height': '100%',
'width': '100%',
'top': '0',
'left': '0',
'background': 'rgba(0, 0, 0, 0.5)',
'boxSizing': 'border-box',
'wordWrap': 'break-word',
'zIndex': '99999'
});
jQuery("body").append(appFrame);
appFrame.window = appFrame.contentWindow;
appFrame.document = appFrame.window.document;
global.appFrame = appFrame;
// open print preview
jQuery("head", appFrame.document).prepend(printPreviewElementStyle());
jQuery("body", appFrame.document).append(printPreviewElement());
var printFrame = jQuery("#card-print-dialog-content-iframe", appFrame.document)[0];
printFrame.window = printFrame.contentWindow;
printFrame.document = printFrame.window.document;
global.printFrame = printFrame;
printFrame.contentWindow.addEventListener("resize", function() {
redrawCards(); redrawCards();
}); });
printWindow.matchMedia("print").addListener(function() { printFrame.contentWindow.matchMedia("print").addListener(function() {
redrawCards(); redrawCards();
}); });
var settings = global.settings; var settings = global.settings;
// restore UI state // restore UI state
jQuery("#scaleRange").val(settings.scale); jQuery("#scaleRange", appFrame.document).val(settings.scale);
jQuery("#scaleRange").parent().find("output").val(settings.scale); jQuery("#scaleRange", appFrame.document).parent().find("output").val(settings.scale);
jQuery("#rowCount").val(settings.rowCount); jQuery("#rowCount", appFrame.document).val(settings.rowCount);
jQuery("#columnCount").val(settings.colCount); jQuery("#columnCount", appFrame.document).val(settings.colCount);
jQuery("#single-card-page-checkbox").attr('checked', settings.singleCardPage ); jQuery("#single-card-page-checkbox", appFrame.document).attr('checked', settings.singleCardPage );
jQuery("#description-checkbox").attr('checked', !settings.hideDescription ); jQuery("#description-checkbox", appFrame.document).attr('checked', !settings.hideDescription );
jQuery("#assignee-checkbox").attr('checked', !settings.hideAssignee ); jQuery("#assignee-checkbox", appFrame.document).attr('checked', !settings.hideAssignee );
jQuery("#due-date-checkbox").attr('checked', !settings.hideDueDate ); jQuery("#due-date-checkbox", appFrame.document).attr('checked', !settings.hideDueDate );
jQuery("#qr-code-checkbox").attr('checked', !settings.hideQrCode ); jQuery("#qr-code-checkbox", appFrame.document).attr('checked', !settings.hideQrCode );
jQuery("#card-print-dialog-title").text("Card Printer " + global.version + " - Loading issues..."); jQuery("#card-print-dialog-title", appFrame.document).text("Card Printer " + global.version + " - Loading issues...");
promises.push(renderCards(issueKeyList).then(function() { promises.push(renderCards(issueKeyList).then(function() {
jQuery("#card-print-dialog-title").text("Card Printer " + global.version); jQuery("#card-print-dialog-title", appFrame.document).text("Card Printer " + global.version);
})); }));
if (global.isProd) { if (global.isProd) {
@ -179,30 +202,24 @@
} }
function print() { function print() {
var printFrame = jQuery("#card-print-dialog-content-iframe");
var printWindow = printFrame[0].contentWindow;
var printDocument = printWindow.document;
if (global.isProd) { if (global.isProd) {
ga('send', 'event', 'button', 'click', 'print', jQuery(".card", printDocument).length); ga('send', 'event', 'button', 'click', 'print', jQuery(".card", global.printFrame.contentWindow.document).length);
} }
printWindow.print(); global.printFrame.contentWindow.print();
} }
function renderCards(issueKeyList) { function renderCards(issueKeyList) {
var promises = []; var promises = [];
var printFrame = jQuery("#card-print-dialog-content-iframe"); var printFrame = global.printFrame;
var printWindow = printFrame[0].contentWindow;
var printDocument = printWindow.document;
printDocument.open(); printFrame.document.open();
printDocument.write("<head/><body></body>"); printFrame.document.write("<head/><body></body>");
jQuery("head", printDocument).append(cardElementStyle()); jQuery("head", printFrame.document).append(cardElementStyle());
jQuery("body", printDocument).append("<div id='preload'/>"); jQuery("body", printFrame.document).append("<div id='preload'/>");
jQuery("#preload", printDocument).append("<div class='zigzag'/>"); jQuery("#preload", printFrame.document).append("<div class='zigzag'/>");
console.log("load " + issueKeyList.length + " issues..."); console.log("load " + issueKeyList.length + " issues...");
@ -211,7 +228,7 @@
card.attr("index", index); card.attr("index", index);
card.hide(); card.hide();
card.find('.issue-id').text(issueKey); card.find('.issue-id').text(issueKey);
jQuery("body", printDocument).append(card); jQuery("body", printFrame.document).append(card);
promises.push(global.appFunctions.getCardData(issueKey).then(function(cardData) { promises.push(global.appFunctions.getCardData(issueKey).then(function(cardData) {
console.log("cardData: " + JSON.stringify(cardData,2,2)); console.log("cardData: " + JSON.stringify(cardData,2,2));
@ -228,11 +245,11 @@
return Promise.all(promises).then(function() { return Promise.all(promises).then(function() {
console.log("...all issues loaded."); console.log("...all issues loaded.");
jQuery(printWindow).load(function() { jQuery(printFrame.window).load(function() {
console.log("...all resources loaded."); console.log("...all resources loaded.");
}); });
console.log("wait for resources loaded..."); console.log("wait for resources loaded...");
printDocument.close(); printFrame.document.close();
redrawCards(); redrawCards();
}); });
} }
@ -241,7 +258,7 @@
styleCards(); styleCards();
scaleCards(); scaleCards();
cropCards(); cropCards();
resizeIframe(jQuery("#card-print-dialog-content-iframe")); resizeIframe(global.printFrame);
} }
@ -307,33 +324,27 @@
function styleCards() { function styleCards() {
var settings = global.settings; var settings = global.settings;
var printFrame = global.printFrame
var printFrame = jQuery("#card-print-dialog-content-iframe");
var printWindow = printFrame[0].contentWindow;
var printDocument = printWindow.document;
// hide/show description // hide/show description
jQuery(".issue-description", printDocument).toggle(!settings.hideDescription); jQuery(".issue-description", printFrame.document).toggle(!settings.hideDescription);
// hide/show assignee // hide/show assignee
jQuery(".issue-assignee", printDocument).toggle(!settings.hideAssignee); jQuery(".issue-assignee", printFrame.document).toggle(!settings.hideAssignee);
// hide/show assignee // hide/show assignee
jQuery(".issue-due-box", printDocument).toggle(!settings.hideDueDate); jQuery(".issue-due-box", printFrame.document).toggle(!settings.hideDueDate);
// hide/show cr code // hide/show cr code
jQuery(".issue-qr-code", printDocument).toggle(!settings.hideQrCode); jQuery(".issue-qr-code", printFrame.document).toggle(!settings.hideQrCode);
// enable/disable single card page // enable/disable single card page
jQuery(".card", printDocument).css({ 'page-break-after' : '', 'float' : '', 'margin-bottom': '' }); jQuery(".card", printFrame.document).css({ 'page-break-after' : '', 'float' : '', 'margin-bottom': '' });
if (settings.singleCardPage) { if (settings.singleCardPage) {
jQuery(".card", printDocument).css({ 'page-break-after': 'always', 'float': 'none', 'margin-bottom': '10px' }); jQuery(".card", printFrame.document).css({ 'page-break-after': 'always', 'float': 'none', 'margin-bottom': '10px' });
} }
} }
function scaleCards() { function scaleCards() {
var printFrame = jQuery("#card-print-dialog-content-iframe");
var printWindow = printFrame[0].contentWindow;
var printDocument = printWindow.document;
var settings = global.settings; var settings = global.settings;
var printFrame = global.printFrame;
var scaleValue = settings.scale * 2.0; var scaleValue = settings.scale * 2.0;
var scaleRoot; var scaleRoot;
@ -349,17 +360,17 @@
// scale // scale
// reset scale // reset scale
jQuery("html", printDocument).css("font-size", scaleRoot + "cm"); jQuery("html", printFrame.document).css("font-size", scaleRoot + "cm");
jQuery("#styleColumnCount", printDocument).remove(); jQuery("#styleColumnCount", printFrame.document).remove();
jQuery("#styleRowCount", printDocument).remove(); jQuery("#styleRowCount", printFrame.document).remove();
// calculate scale // calculate scale
var bodyElement = jQuery("body", printDocument); var bodyElement = jQuery("body", printFrame.document);
var cardMaxWidth = Math.floor(bodyElement.outerWidth() / columnCount); var cardMaxWidth = Math.floor(bodyElement.outerWidth() / columnCount);
var cardMaxHeight = Math.floor(bodyElement.outerHeight() / rowCount); var cardMaxHeight = Math.floor(bodyElement.outerHeight() / rowCount);
var cardElement = jQuery(".card", printDocument); var cardElement = jQuery(".card", printFrame.document);
var cardMinWidth = cardElement.css("min-width").replace("px", ""); var cardMinWidth = cardElement.css("min-width").replace("px", "");
var cardMinHeight = cardElement.css("min-height").replace("px", ""); var cardMinHeight = cardElement.css("min-height").replace("px", "");
@ -368,7 +379,7 @@
var scale = Math.min(scaleWidth, scaleHeight, 1); var scale = Math.min(scaleWidth, scaleHeight, 1);
// scale // scale
jQuery("html", printDocument).css("font-size", ( scaleRoot * scale ) + "cm"); jQuery("html", printFrame.document).css("font-size", ( scaleRoot * scale ) + "cm");
// size // size
@ -377,22 +388,18 @@
style.id = 'styleColumnCount'; style.id = 'styleColumnCount';
style.type = 'text/css'; style.type = 'text/css';
style.innerHTML = ".card { width: calc( 100% / " + columnCount + " ); }" style.innerHTML = ".card { width: calc( 100% / " + columnCount + " ); }"
jQuery("head", printDocument).append(style); jQuery("head", printFrame.document).append(style);
// size horizontal // size horizontal
var style = document.createElement('style'); var style = document.createElement('style');
style.id = 'styleRowCount'; style.id = 'styleRowCount';
style.type = 'text/css'; style.type = 'text/css';
style.innerHTML = ".card { height: calc( 100% / " + rowCount + " ); }" style.innerHTML = ".card { height: calc( 100% / " + rowCount + " ); }"
jQuery("head", printDocument).append(style); jQuery("head", printFrame.document).append(style);
} }
function cropCards() { function cropCards() {
var printFrame = jQuery("#card-print-dialog-content-iframe"); var cardElements = global.printFrame.document.querySelectorAll(".card");
var printWindow = printFrame[0].contentWindow;
var printDocument = printWindow.document;
var cardElements = printDocument.querySelectorAll(".card");
forEach(cardElements, function(cardElement) { forEach(cardElements, function(cardElement) {
var cardContent = cardElement.querySelectorAll(".card-body")[0]; var cardContent = cardElement.querySelectorAll(".card-body")[0];
if (cardContent.scrollHeight > cardContent.offsetHeight) { if (cardContent.scrollHeight > cardContent.offsetHeight) {
@ -410,8 +417,7 @@
} }
function closePrintPreview() { function closePrintPreview() {
jQuery("#card-print-overlay").remove(); jQuery("#card-printer-iframe").remove();
jQuery("#card-print-overlay-style").remove();
} }
//############################################################################################################################ //############################################################################################################################
@ -546,9 +552,8 @@
return result; return result;
} }
function printOverlayStyleElement() { function printPreviewElementStyle() {
var result = jQuery(document.createElement('style')) var result = jQuery(document.createElement('style'))
.attr("id", "card-print-overlay-style")
.attr("type", "text/css") .attr("type", "text/css")
.html(global.printPreviewCss); .html(global.printPreviewCss);
return result; return result;
@ -651,6 +656,7 @@
} }
function resizeIframe(iframe) { function resizeIframe(iframe) {
iframe = jQuery(iframe);
iframe.height(iframe[0].contentWindow.document.body.height); iframe.height(iframe[0].contentWindow.document.body.height);
} }
//############################################################################################################################ //############################################################################################################################