(function() { // Public Instances // Jira: https://connect.atlassian.net/browse/NERDS-33286 // PivotTracker: https://www.pivotaltracker.com/n/projects/510733 // Trello: https://trello.com/b/8zlPSh70/spike // YouTrack: http://qoomon.myjetbrains.com/youtrack/dashboard var global = {}; global.version = "4.4.0"; global.issueTrackingUrl = "https://github.com/qoomon/Jira-Issue-Card-Printer"; global.isDev = document.currentScript == null; global.isProd = !global.isDev; if (typeof jQuery == 'undefined') { alert("jQuery is required!\n\nPlease create an issue at " + global.issueTrackingUrl); return; } var $ = jQuery; try { init().then(main).catch(handleError); } catch (e) { handleError(e); } function main() { var promises = []; ga('send', 'pageview'); //preconditions if ($("#card-printer-iframe").length > 0) { alert("Card Printer already opened!"); return; } console.log("Run...") // determine application if ($("meta[name='application-name'][ content='JIRA']").length > 0) { console.log("App: " + "Jira"); global.appFunctions = jiraFunctions; } else if (/.*pivotaltracker.com\/.*/g.test(document.URL)) { console.log("App: " + "PivotalTracker"); global.appFunctions = pivotalTrackerFunctions; } else if (/.*trello.com\/.*/g.test(document.URL)) { console.log("App: " + "Trello"); global.appFunctions = trelloFunctions; } else if (/.*myjetbrains.com\/youtrack\/.*/g.test(document.URL) || /.*youtrack.jetbrains.com\/.*/g.test(document.URL) ) { console.log("App: " + "YouTrack"); global.appFunctions = youTrackFunctions; } else { alert("Unsupported app. Please create an issue at " + global.issueTrackingUrl); return; } // collect selcted issues var issueKeyList = global.appFunctions.getSelectedIssueKeyList(); if (issueKeyList.length <= 0) { alert("Please select at least one issue."); return; } else if (issueKeyList.length > 30) { confirm("Are you sure you want select " + issueKeyList.length + " issues?"); return; } // add overlay frame var appFrame = createOverlayFrame(); $("body").append(appFrame); // add convinient fields appFrame.window = appFrame.contentWindow; appFrame.document = appFrame.window.document; global.appFrame = appFrame; // add print dialog content $("head", global.appFrame.document).prepend(printPreviewElementStyle()); $("body", global.appFrame.document).append(printPreviewElement()); updatePrintDialoge(); // get print content frame var printFrame = $("#card-print-dialog-content-iframe", global.appFrame.document)[0]; // add convinient fields printFrame.window = printFrame.contentWindow; printFrame.document = printFrame.window.document; global.printFrame = printFrame; // add listeners to redraw crads on print event printFrame.window.addEventListener("resize", redrawCards); printFrame.window.matchMedia("print").addListener(redrawCards); $("#card-print-dialog-title", global.appFrame.document).text("Card Printer " + global.version + " - Loading issues..."); promises.push(renderCards(issueKeyList).then(function() { $("#card-print-dialog-title", global.appFrame.document).text("Card Printer " + global.version); })); return Promise.all(promises); } function init() { var promises = []; console.log("Init...") initGoogleAnalytics(); addStringFunctions(); loadSettings(); global.hostOrigin = "https://qoomon.github.io/Jira-Issue-Card-Printer/"; if (global.isDev) { console.log("DEVELOPMENT"); global.hostOrigin = "https://rawgit.com/qoomon/Jira-Issue-Card-Printer/develop/"; } global.resourceOrigin = global.hostOrigin + "resources/"; promises.push(httpGetCORS(global.hostOrigin + "card.html").then(function(data){ global.cardHtml = data; })); promises.push(httpGetCORS(global.hostOrigin + "card.css").then(function(data){ global.cardCss = data.replace(/https:\/\/qoomon.github.io\/Jira-Issue-Card-Printer\/resources/g, global.resourceOrigin); })); promises.push(httpGetCORS(global.hostOrigin + "printPreview.html").then(function(data){ global.printPreviewHtml = data })); promises.push(httpGetCORS(global.hostOrigin + "printPreview.css").then(function(data){ global.printPreviewCss = data.replace(/https:\/\/qoomon.github.io\/Jira-Issue-Card-Printer\/resources/g, global.resourceOrigin); })); return Promise.all(promises); } function handleError(error){ console.log("ERROR " + error.stack); ga('send', 'exception', { 'exDescription': error.message,'exFatal': true }); alert("Sorry something went wrong.\n\n" + error.message +"\n\nPlease create an issue at " + global.issueTrackingUrl + "\n\n" + error.stack); } function saveSettings(){ var settings = global.settings; writeCookie("card_printer_scale", settings.scale); writeCookie("card_printer_row_count", settings.rowCount); writeCookie("card_printer_column_count", settings.colCount); writeCookie("card_printer_single_card_page", settings.singleCardPage); writeCookie("card_printer_hide_description", settings.hideDescription); writeCookie("card_printer_hide_assignee", settings.hideAssignee); writeCookie("card_printer_hide_due_date", settings.hideDueDate); writeCookie("card_printer_hide_qr_code", settings.hideQrCode); } function loadSettings(){ var settings = global.settings = global.settings || {}; settings.scale = parseFloat(readCookie("card_printer_scale")) || 0.0; settings.rowCount = parseInt(readCookie("card_printer_row_count")) || 2; settings.colCount = parseInt(readCookie("card_printer_column_count")) || 1; settings.singleCardPage = parseBool(readCookie("card_printer_single_card_page"), true ); settings.hideDescription = parseBool(readCookie("card_printer_hide_description"), false); settings.hideAssignee = parseBool(readCookie("card_printer_hide_assignee"), false); settings.hideDueDate = parseBool(readCookie("card_printer_hide_due_date"), false); settings.hideQrCode = parseBool(readCookie("card_printer_hide_qr_code"), false); } function print() { ga('send', 'event', 'button', 'click', 'print', $(".card", global.printFrame.contentWindow.document).length); global.printFrame.contentWindow.print(); } function createOverlayFrame(){ var appFrame = document.createElement('iframe'); appFrame.id = "card-printer-iframe"; $(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' }); return appFrame; } function updatePrintDialoge(){ var appFrameDocument = global.appFrame.document; var settings = global.settings; $("#scaleRange", appFrameDocument).val(settings.scale); $("#scaleRange", appFrameDocument).parent().find("output").val(settings.scale); $("#rowCount", appFrameDocument).val(settings.rowCount); $("#columnCount", appFrameDocument).val(settings.colCount); $("#single-card-page-checkbox", appFrameDocument).attr('checked', settings.singleCardPage ); $("#description-checkbox", appFrameDocument).attr('checked', !settings.hideDescription ); $("#assignee-checkbox", appFrameDocument).attr('checked', !settings.hideAssignee ); $("#due-date-checkbox", appFrameDocument).attr('checked', !settings.hideDueDate ); $("#qr-code-checkbox", appFrameDocument).attr('checked', !settings.hideQrCode ); } function renderCards(issueKeyList) { var promises = []; var printFrameDocument = global.printFrame.document; printFrameDocument.open(); printFrameDocument.write("
"); $("head", printFrameDocument).append(cardElementStyle()); $("body", printFrameDocument).append(""); $("#preload", printFrameDocument).append(""); console.log("load " + issueKeyList.length + " issues..."); $.each(issueKeyList, function(index, issueKey) { var card = cardElement(issueKey); card.attr("index", index); card.hide(); card.find('.issue-id').text(issueKey); $("body", printFrameDocument).append(card); promises.push(global.appFunctions.getCardData(issueKey).then(function(cardData) { console.log("cardData: " + JSON.stringify(cardData,2,2)); ga('send', 'event', 'card', 'generate', cardData.type); fillCard(card, cardData); redrawCards(); card.show(); })); }); printFrameDocument.close(); promises.push(new Promise(function(resolve){ printFrameDocument.onload = resolve; })); console.log("wait for issues loaded..."); return Promise.all(promises).then(function() { console.log("...all issues loaded."); redrawCards(); }); } function redrawCards() { styleCards(); scaleCards(); cropCards(); resizeIframe(global.printFrame); } function fillCard(card, data) { //Key card.find('.issue-id').text(data.key); //Type card.find(".issue-icon").attr("type", data.type); //Summary card.find('.issue-summary').text(data.summary); //Description if (data.description) { card.find('.issue-description').html(data.description); } else { card.find(".issue-description").addClass("hidden"); } //Assignee if (data.assignee) { if (data.avatarUrl) { card.find(".issue-assignee").css("background-image", "url('" + data.avatarUrl + "')"); } else { card.find(".issue-assignee").text(data.assignee[0].toUpperCase()); } } else { card.find(".issue-assignee").remove(); } //Due-Date if (data.dueDate) { card.find(".issue-due-date").text(data.dueDate); } else { card.find(".issue-due-box").remove(); } //Attachment if (data.hasAttachment) {} else { card.find('.issue-attachment').remove(); } //Story Points if (data.storyPoints) { card.find(".issue-estimate").text(data.storyPoints); } else { card.find(".issue-estimate").remove(); } //Epic if (data.superIssue) { card.find(".issue-epic-id").text(data.superIssue.key); card.find(".issue-epic-name").text(data.superIssue.summary); } else { card.find(".issue-epic-box").remove(); } //QR-Code var qrCodeUrl = 'https://chart.googleapis.com/chart?cht=qr&chs=256x256&chld=L|1&chl=' + encodeURIComponent(data.url); card.find(".issue-qr-code").css("background-image", "url('" + qrCodeUrl + "')"); } function styleCards() { var settings = global.settings; var printFrame = global.printFrame // hide/show description $(".issue-description", printFrame.document).toggle(!settings.hideDescription); // hide/show assignee $(".issue-assignee", printFrame.document).toggle(!settings.hideAssignee); // hide/show assignee $(".issue-due-box", printFrame.document).toggle(!settings.hideDueDate); // hide/show cr code $(".issue-qr-code", printFrame.document).toggle(!settings.hideQrCode); // enable/disable single card page $(".card", printFrame.document).css({ 'page-break-after' : '', 'float' : '', 'margin-bottom': '' }); if (settings.singleCardPage) { $(".card", printFrame.document).css({ 'page-break-after': 'always', 'float': 'none', 'margin-bottom': '20px' }); } else { $(".card", printFrame.document).each(function(index, element){ if(index % (settings.colCount * settings.rowCount ) >= (settings.colCount * (settings.rowCount - 1))){ $(element).css({ 'margin-bottom': '20px' }); } }); } } function scaleCards() { var settings = global.settings; var printFrame = global.printFrame; var scaleValue = settings.scale * 2.0; var scaleRoot; if(scaleValue < 0) { scaleRoot = 1.0 / (1.0 - scaleValue); } else { scaleRoot = 1.0 * (1.0 + scaleValue); } var rowCount = settings.rowCount; var columnCount = settings.colCount; // scale // reset scale $("html", printFrame.document).css("font-size", scaleRoot + "cm"); $("#gridStyle", printFrame.document).remove(); // calculate scale var bodyElement = $("body", printFrame.document); var cardMaxWidth = Math.floor(bodyElement.outerWidth() / columnCount); var cardMaxHeight = Math.floor(bodyElement.outerHeight() / rowCount); var cardElement = $(".card", printFrame.document); var cardMinWidth = cardElement.css("min-width").replace("px", ""); var cardMinHeight = cardElement.css("min-height").replace("px", ""); var scaleWidth = cardMaxWidth / cardMinWidth ; var scaleHeight = cardMaxHeight / cardMinHeight ; var scale = Math.min(scaleWidth, scaleHeight, 1); // scale $("html", printFrame.document).css("font-size", ( scaleRoot * scale ) + "cm"); // grid size var style = document.createElement('style'); style.id = 'gridStyle'; style.type = 'text/css'; style.innerHTML = ".card { "+ "width: calc( 100% / " + columnCount + " );" + "height: calc( 100% / " + rowCount + " );"+ "}"; $("head", printFrame.document).append(style); } function cropCards() { var cardElements = global.printFrame.document.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() { $("#card-printer-iframe").remove(); } //############################################################################################################################ //############################################################################################################################ //############################################################################################################################ // http://www.cssdesk.com/T9hXg function printPreviewElement() { var result = $('').html(global.printPreviewHtml).contents(); // info result.find("#report-issue").click(function(event) { window.open('https://github.com/qoomon/Jira-Issue-Card-Printer/issues'); return false; }); result.find("#about").click(function(event) { window.open('http://qoomon.blogspot.de/2014/01/jira-issue-card-printer-bookmarklet.html'); return false; }); // enable single card page result.find("#single-card-page-checkbox").click(function() { global.settings.singleCardPage = this.checked; saveSettings(); redrawCards(); return true; }); // hide description result.find("#description-checkbox").click(function() { global.settings.hideDescription = !this.checked; saveSettings(); redrawCards(); return true; }); // show assignee result.find("#assignee-checkbox").click(function() { global.settings.hideAssignee = !this.checked; saveSettings(); redrawCards(); return true; }); // show due date result.find("#due-date-checkbox").click(function() { global.settings.hideDueDate = !this.checked; saveSettings(); redrawCards(); return true; }); // show QR Code result.find("#qr-code-checkbox").click(function() { global.settings.hideQrCode = !this.checked; saveSettings(); redrawCards(); return true; }); // scale font result.find("#scaleRange").on("input", function() { global.settings.scale = $(this).val(); saveSettings(); redrawCards(); }); // grid result.find("#rowCount").on("input", function() { global.settings.rowCount = $(this).val(); saveSettings(); redrawCards(); }); result.find("#rowCount").click(function() { this.select(); }); result.find("#columnCount").on("input", function() { global.settings.colCount = $(this).val(); saveSettings(); redrawCards(); }); result.find("#columnCount").click(function() { this.select(); }); // print result.find("#card-print-dialog-print") .click(function(event) { print(); return false; }); // closePrintPreview result.find("#card-print-dialog-cancel") .click(function(event) { closePrintPreview(); return false; }); result.click(function(event) { if (event.target == this) { closePrintPreview(); } return true; }); $(document).keyup(function(e) { if (e.keyCode == 27) { // ESC closePrintPreview(); } }); // prevent background scrolling result.scroll(function(event) { return false; }); return result; } function printPreviewElementStyle() { var result = $(document.createElement('style')) .attr("type", "text/css") .html(global.printPreviewCss); return result; } // card layout: http://jsfiddle.net/qoomon/ykbLb2pw/76 function cardElement(issueKey) { var result = $('').html(global.cardHtml).contents() .attr("id", issueKey) return result; } function cardElementStyle() { var result = $(document.createElement('style')) .attr("type", "text/css") .html(global.cardCss); return result; } //############################################################################################################################ //############################################################################################################################ //############################################################################################################################ function initGoogleAnalytics() { if (global.isDev) { this.ga = function(){ console.log("GoogleAnalytics: " + Object.keys(arguments).map(key => arguments[key]))} return; } //