add card autoscaling

This commit is contained in:
Bengt Brodersen 2015-06-02 13:42:42 +02:00
parent 2c09d321ea
commit 8bcc27cbab

View File

@ -114,26 +114,8 @@
} }
///////////////////////////////////////// SCRIPT SHOULD ADDED TO PRINT PAGE ///////////////////////////////////////// SCRIPT SHOULD ADDED TO PRINT PAGE
printWindow.addEventListener("resize", refreshCard); printWindow.addEventListener("resize", function(){refreshCard;});
printWindow.matchMedia("print").addListener(refreshCard); printWindow.matchMedia("print").addListener(function(){refreshCard;});
function refreshCard() {
var cardElements = printDocument.querySelectorAll(".card");
forEach(cardElements, function (cardElement) {
var cardContent = cardElement.querySelectorAll(".card-body")[0];
if (cardContent.scrollHeight > cardContent.offsetHeight) {
cardContent.classList.add("zigzag");
} else {
cardContent.classList.remove("zigzag");
}
});
}
function forEach(array, callback) {
for (i = 0; i < array.length; i++) {
callback(array[i]);
}
}
///////////////////////////////////////// /////////////////////////////////////////
@ -155,7 +137,6 @@
jQuery("head", printDocument).append(cardCss()); jQuery("head", printDocument).append(cardCss());
// jQuery("head", printDocument).append(cardJavaScript()); // NOT WORKING // jQuery("head", printDocument).append(cardJavaScript()); // NOT WORKING
console.log("load " + issueKeyList.length + " issues..."); console.log("load " + issueKeyList.length + " issues...");
var deferredList = []; var deferredList = [];
@ -173,7 +154,7 @@
} }
fillCard(page, cardData); fillCard(page, cardData);
page.show(); page.show();
resizeIframe(printFrame); refreshCard();
deferred.resolve(); deferred.resolve();
}); });
}); });
@ -190,11 +171,17 @@
}); });
} }
function closePrintPreview() { function refreshCard() {
jQuery("#card-print-overlay").remove();
jQuery("#card-print-overlay-style").remove(); scaleCards();
cropCards();
var printFrame = jQuery("#card-print-dialog-content-iframe");
resizeIframe(printFrame);
} }
function fillCard(card, data) { function fillCard(card, data) {
//Key //Key
card.find('.issue-id').text(data.key); card.find('.issue-id').text(data.key);
@ -255,41 +242,63 @@
card.find(".issue-qr-code").css("background-image", "url('" + qrCodeUrl + "')"); card.find(".issue-qr-code").css("background-image", "url('" + qrCodeUrl + "')");
} }
//############################################################################################################################
//############################################################################################################################
//############################################################################################################################
function scaleCards(){ function scaleCards(){
// var printFrame = jQuery("#card-print-dialog-content-iframe"); var printFrame = jQuery("#card-print-dialog-content-iframe");
// var printWindow = printFrame[0].contentWindow; var printWindow = printFrame[0].contentWindow;
// var printDocument = printWindow.document; var printDocument = printWindow.document;
//
// jQuery("html", printDocument).css("font-size", "1cm"); jQuery("html", printDocument).css("font-size", "1cm");
//
// var currentFontSize = jQuery("html", printDocument).css("font-size").replace("px", ""); // scale width
// // substract one pixel due to rounding problems
// //scale width var cardMaxWidth = jQuery(".card", printDocument).outerWidth() / jQuery("#columnCount").val() - 1;
// // substract one pixel due to rounding problems var cardMinWidth = jQuery(".card", printDocument).css("min-width").replace("px", "");
// var cardMaxWidth = jQuery("body", printDocument).width() / jQuery(this).val() - 1; var scaleWidth = cardMaxWidth / cardMinWidth;
// var cardMinWidth = jQuery(".card", printDocument).outerWidth();
// // scale height
// var scaleWidth = cardMaxWidth / cardMinWidth; // substract one pixel due to rounding problems
// var cardMaxHeight = jQuery(".card", printDocument).outerHeight() / jQuery("#rowCount").val() - 1;
// var cardMinHeight = jQuery(".card", printDocument).css("min-height").replace("px", "");
// // //scale height var scaleHeight = cardMaxHeight / cardMinHeight;
// // // substract one pixel due to rounding problems
// // var cardMaxHeight = jQuery("body", printDocument).height() / jQuery(this).val() - 1; // scale min
// // var cardMinHeight = jQuery(".card", printDocument).outerHeight(); var scale = Math.min(scaleWidth, scaleHeight);
// // if(scale < 1) {
// // var scaleWidth = cardMaxWidth / cardMinWidth; jQuery("html", printDocument).css("font-size",scale +"cm");
// }
//
// var scale = scaleWidth;
// var fontSize = currentFontSize * scale;
//
// jQuery("html", printDocument).css("font-size",fontSize +"px");
} }
function cropCards() {
var printFrame = jQuery("#card-print-dialog-content-iframe");
var printWindow = printFrame[0].contentWindow;
var printDocument = printWindow.document;
var cardElements = printDocument.querySelectorAll(".card");
forEach(cardElements, function (cardElement) {
var cardContent = cardElement.querySelectorAll(".card-body")[0];
if (cardContent.scrollHeight > cardContent.offsetHeight) {
cardContent.classList.add("zigzag");
} else {
cardContent.classList.remove("zigzag");
}
});
}
function forEach(array, callback) {
for (i = 0; i < array.length; i++) {
callback(array[i]);
}
}
function closePrintPreview() {
jQuery("#card-print-overlay").remove();
jQuery("#card-print-overlay-style").remove();
}
//############################################################################################################################
//############################################################################################################################
//############################################################################################################################
// http://www.cssdesk.com/T9hXg // http://www.cssdesk.com/T9hXg
function printOverlayHTML() { function printOverlayHTML() {
@ -353,7 +362,7 @@
style.innerHTML = ".card { page-break-after: always; float: none; }" style.innerHTML = ".card { page-break-after: always; float: none; }"
jQuery("head", printDocument).append(style); jQuery("head", printDocument).append(style);
resizeIframe(printFrame); refreshCard();
} }
return true; return true;
}); });
@ -375,7 +384,7 @@
style.innerHTML = ".issue-description { display: none; }" style.innerHTML = ".issue-description { display: none; }"
jQuery("head", printDocument).append(style); jQuery("head", printDocument).append(style);
resizeIframe(printFrame); refreshCard();
} }
return true; return true;
}); });
@ -391,7 +400,7 @@
jQuery("html", printDocument).css("font-size", jQuery(this).val() + "cm"); jQuery("html", printDocument).css("font-size", jQuery(this).val() + "cm");
resizeIframe(printFrame); refreshCard();
}); });
// grid // grid
@ -410,9 +419,7 @@
style.innerHTML = ".card { height: calc( 100% / " + jQuery(this).val() + "); }" style.innerHTML = ".card { height: calc( 100% / " + jQuery(this).val() + "); }"
jQuery("head", printDocument).append(style); jQuery("head", printDocument).append(style);
//scale to fit refreshCard();
resizeIframe(printFrame);
}); });
result.find("#columnCount").on("input", function() { result.find("#columnCount").on("input", function() {
@ -429,10 +436,7 @@
style.innerHTML = ".card { width: calc( 100% / " + jQuery(this).val() + "); }" style.innerHTML = ".card { width: calc( 100% / " + jQuery(this).val() + "); }"
jQuery("head", printDocument).append(style); jQuery("head", printDocument).append(style);
//scale to fit refreshCard();
scaleCards();
resizeIframe(printFrame);
}); });
@ -916,6 +920,7 @@
.card { .card {
height: 100%; height: 100%;
width: 100%; width: 100%;
page-break-inside: avoid;
} }
} }
} }