add card autoscaling
This commit is contained in:
parent
2c09d321ea
commit
8bcc27cbab
141
bookmarklet.js
141
bookmarklet.js
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user