diff --git a/bookmarklet.js b/bookmarklet.js index bdcad85..3801625 100644 --- a/bookmarklet.js +++ b/bookmarklet.js @@ -64,8 +64,8 @@ } // open print preview - jQuery("body").append(printOverlayHTML()); - jQuery("#card-print-overlay").prepend(printOverlayStyle()); + jQuery("body").append(printPreviewElement()); + jQuery("#card-print-overlay").prepend(printOverlayStyleElement()); var printFrame = jQuery("#card-print-dialog-content-iframe"); var printWindow = printFrame[0].contentWindow; @@ -122,6 +122,14 @@ global.cardCss = data.replace(/https:\/\/qoomon.github.io\/Jira-Issue-Card-Printer\/resources/g, global.resourceOrigin); })); + promises.push(httpGetCors(global.hostOrigin + "printPreview.html", function(data){ + global.printPreviewHtml = data + })); + + promises.push(httpGetCors(global.hostOrigin + "printPreview.css", function(data){ + global.printPreviewCss = data.replace(/https:\/\/qoomon.github.io\/Jira-Issue-Card-Printer\/resources/g, global.resourceOrigin); + })); + return Promise.all(promises); } @@ -138,6 +146,7 @@ } function renderCards(issueKeyList) { + var promises = []; var printFrame = jQuery("#card-print-dialog-content-iframe"); var printWindow = printFrame[0].contentWindow; @@ -146,13 +155,12 @@ printDocument.open(); printDocument.write(""); - jQuery("head", printDocument).append(cardCss()); + jQuery("head", printDocument).append(cardElementStyle()); jQuery("body", printDocument).append("
"); jQuery("#preload", printDocument).append("
"); console.log("load " + issueKeyList.length + " issues..."); - var promises = []; jQuery.each(issueKeyList, function(index, issueKey) { var card = cardElement(issueKey); card.attr("index", index); @@ -166,12 +174,12 @@ ga('send', 'event', 'card', 'generate', cardData.type); } fillCard(card, cardData); - card.show(); redrawCards(); + card.show(); })); }); - console.log("wait for issues loaded..."); + console.log("wait for issues loaded..."); return Promise.all(promises).then(function() { console.log("...all issues loaded."); @@ -399,40 +407,8 @@ // http://www.cssdesk.com/T9hXg - function printOverlayHTML() { - var result = jQuery(document.createElement('div')) - .attr("id", "card-print-overlay") - .html(multilineString(function() { -/*! -
-
-
Card Printer
-
- - - -
-
-
- -
- -
-*/ - })); + function printPreviewElement() { + var result = jQuery('
').html(global.printPreviewHtml).contents(); // info result.find("#report-issue").click(function(event) { @@ -536,154 +512,43 @@ }); result.click(function(event) { - if (event.target == this) { - closePrintPreview(); - } + if (event.target == this) { + closePrintPreview(); + } return true; }); jQuery(document).keyup(function(e) { - if (e.keyCode == 27) { // esc + if (e.keyCode == 27) { // ESC closePrintPreview(); } }); // prevent background scrolling result.scroll(function(event) { - return false; + return false; }); return result; } - function printOverlayStyle() { + function printOverlayStyleElement() { var result = jQuery(document.createElement('style')) .attr("id", "card-print-overlay-style") .attr("type", "text/css") - .html(multilineString(function() { -/*! -#card-print-overlay { - position: fixed; - height: 100%; - width: 100%; - top: 0; - left: 0; - background:rgba(0, 0, 0, 0.5); - - box-sizing: border-box; - word-wrap:break-word; - z-index: 99999; - -} - -#card-print-dialog { - position: relative; - - top: 60px; - right:0px; - left:0px; - - height: calc(100% - 120px); - width: 1000px; - margin: auto; - - border-style: solid; - border-color: #cccccc; - border-width: 1px; - -webkit-border-radius: 4px; - border-radius: 4px; - - overflow: hidden; -} - -#card-print-dialog-header { - position: relative; - background: #f0f0f0; - height: 25px; - - border-bottom: 1px solid #cccccc; - - padding: 15px 20px 15px 20px; -} - -#card-print-dialog-content { - position: relative; - background: white; - height: calc(100% - 106px); - width: 100%; - - overflow: hidden; -} - -#card-print-dialog-content-iframe { - position: relative; - height: 100%; - width: 100%; - - overflow: hidden; - border:none; -} - -#card-print-dialog-footer { - position: relative; - background: #f0f0f0; - border-top: 1px solid #cccccc; - height: 30px; - padding: 10px; - text-align: right; -} - -#buttons { - position: relative; - float: right; - display: inline-block; - height 30px; -} - -#info { - position: relative; - float: right; - display: inline-block; - height 30px; -} -#info-line { - padding-left: 3rem; - padding-right: 3rem; -} - -#card-print-dialog-title{ - position: relative; - float: left; - color: rgb(51, 51, 51); - display: block; - font-family: Arial, sans-serif; - font-size: 20px; - font-weight: normal; - height: 30px; - line-height: 30px; -} -.cancel{ - cursor: pointer; - font-size: 14px; - display: inline-block; - padding: 5px 10px; - vertical-align: baseline; -} -*/ - })); + .html(global.printPreviewCss); return result; } // card layout: http://jsfiddle.net/qoomon/ykbLb2pw/76 function cardElement(issueKey) { - var page = jQuery(document.createElement('div')) + var result = jQuery('
').html(global.cardHtml).contents() .attr("id", issueKey) - .html(global.cardHtml); - return page; + return result; } - function cardCss() { + function cardElementStyle() { var result = jQuery(document.createElement('style')) .attr("type", "text/css") .html(global.cardCss); diff --git a/printPreview.css b/printPreview.css new file mode 100644 index 0000000..cdd60b5 --- /dev/null +++ b/printPreview.css @@ -0,0 +1,107 @@ +#card-print-overlay { + position: fixed; + height: 100%; + width: 100%; + top: 0; + left: 0; + background:rgba(0, 0, 0, 0.5); + + box-sizing: border-box; + word-wrap:break-word; + z-index: 99999; + +} + +#card-print-dialog { + position: relative; + + top: 60px; + right:0px; + left:0px; + + height: calc(100% - 120px); + width: 1000px; + margin: auto; + + border-style: solid; + border-color: #cccccc; + border-width: 1px; + -webkit-border-radius: 4px; + border-radius: 4px; + + overflow: hidden; +} + +#card-print-dialog-header { + position: relative; + background: #f0f0f0; + height: 25px; + + border-bottom: 1px solid #cccccc; + + padding: 15px 20px 15px 20px; +} + +#card-print-dialog-content { + position: relative; + background: white; + height: calc(100% - 106px); + width: 100%; + + overflow: hidden; +} + +#card-print-dialog-content-iframe { + position: relative; + height: 100%; + width: 100%; + + overflow: hidden; + border:none; +} + +#card-print-dialog-footer { + position: relative; + background: #f0f0f0; + border-top: 1px solid #cccccc; + height: 30px; + padding: 10px; + text-align: right; +} + +#buttons { + position: relative; + float: right; + display: inline-block; + height 30px; +} + +#info { + position: relative; + float: right; + display: inline-block; + height 30px; +} +#info-line { + padding-left: 3rem; + padding-right: 3rem; +} + +#card-print-dialog-title{ + position: relative; + float: left; + color: rgb(51, 51, 51); + display: block; + font-family: Arial, sans-serif; + font-size: 20px; + font-weight: normal; + height: 30px; + line-height: 30px; +} +.cancel{ + cursor: pointer; + font-size: 14px; + display: inline-block; + padding: 5px 10px; + vertical-align: baseline; +} diff --git a/printPreview.html b/printPreview.html new file mode 100644 index 0000000..0172fa3 --- /dev/null +++ b/printPreview.html @@ -0,0 +1,29 @@ +
+
+
+
Card Printer
+
+ + + +
+
+
+ +
+ +
+