Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    11.1 Bug in alignment of Events while printing Timeline

    Hi there,
    If we are printing a timeline as simple as

    the corresponding getPrintHTML of this timeline is

    All events are shifted by a few pixels. As soon as there are more lanes, it will move even more downwards.
    This is reproducible in all browsers with the latest downloadable version of 11.1p (SmartClient_v111p_2019-08-02_Pro).

    For reproduction save this file:
    Code:
    <!DOCTYPE html><HTML><HEAD><meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </SCRIPT>
    <SCRIPT SRC="/isomorphic/system/modules/ISC_Core.js"></SCRIPT>
    <SCRIPT SRC="/isomorphic/system/modules/ISC_Foundation.js"></SCRIPT>
    <SCRIPT SRC="/isomorphic/system/modules/ISC_Containers.js"></SCRIPT>
    <SCRIPT SRC="/isomorphic/system/modules/ISC_Grids.js"></SCRIPT>
    <SCRIPT SRC="/isomorphic/system/modules/ISC_Forms.js"></SCRIPT>
    <SCRIPT SRC="/isomorphic/system/modules/ISC_DataBinding.js"></SCRIPT>
    <SCRIPT SRC="/isomorphic/system/modules/ISC_Drawing.js"></SCRIPT>
    <SCRIPT SRC="/isomorphic/system/modules/ISC_Charts.js"></SCRIPT>
    <SCRIPT SRC="/isomorphic/system/modules/ISC_Calendar.js"></SCRIPT>
    <SCRIPT SRC="/isomorphic/system/modules/ISC_CKEditor.js"></SCRIPT>
    <SCRIPT SRC="/isomorphic/system/modules/ISC_AceEditor.js"></SCRIPT>
    <SCRIPT SRC="/isomorphic/system/modules/ISC_HTML5Video.js"></SCRIPT>
    <SCRIPT SRC="/isomorphic/system/modules/ISC_LinkButton.js"></SCRIPT>
    <SCRIPT SRC="/isomorphic/system/modules/ISC_DropzoneJS.js"></SCRIPT>
    <SCRIPT SRC="/isomorphic/system/modules/ISC_JsQR.js"></SCRIPT>
    <SCRIPT SRC="/isomorphic/system/modules/ISC_ListGridItem.js"></SCRIPT>
    <SCRIPT SRC="/isomorphic/system/modules/ISC_CroppieJS.js"></SCRIPT>
    <SCRIPT SRC="/isomorphic/system/modules/ISC_ProgressbarItem.js"></SCRIPT>
    <SCRIPT SRC="/isomorphic/system/modules/ISC_WebRtcPhoto.js"></SCRIPT>
    <SCRIPT SRC="/isomorphic/skins/Tahoe/load_skin.js"></SCRIPT>
    
    <head>
    <body>
    <script>
    
    /*
     *    PopupWindow
     *    -----------
     *    Creates a new PopupWindow.
     *
     *    If the popup loaded correctly the onLoad function gets called.
     *    If the popup gets blocked, the onBlock function gets called.
     *    To handle the events simply override the functions from the object.
     *
     *    See test folder for a usage example.
     */
    
    function PopupWindow(width, height) {
    
        // Removing this line destroys IE compatibility?! RESEARCH
        window.onPopupWindowLoad = false;
    
        var self = this,
            mainElementId = 'popupWindowContent',
            windowId = 'popupWindow',
            windowFile = '/HRworks/popupWindow.html',
            windowWidth = (width) ? width : 500,
            windowHeight = (height) ? height : 400,
            ownWindow;
    
        self.windowFile = function(path) {
            windowFile = path;
        };
    
        self.title = function(title) {
            if(title != undefined) {
                ownWindow.document.title = title;
            }
            return ownWindow.document.title;
        };
    
        self.window = function() {
            return ownWindow;
        };
    
        self.onLoad = function() {};
    
        self.onBlock = function() {};
    
        self.title = function(title) {
            if(title != undefined) {
                ownWindow.document.title = title;
            }
            return ownWindow.document.title;
        };
    
        self.content = function(data) {
            if(data != undefined) {
                ownWindow.document.getElementById(mainElementId).innerHTML = data;
            }
            return ownWindow.document.getElementById(mainElementId).innerHTML
        };
    
        self.open = function() {
            ownWindow = window.open(windowFile, windowId, 'screenX=100,screenY=100,width=' + windowWidth + ',height=' + windowHeight);
    
            if (!ownWindow) {
                // Most browsers
                self.onBlock.call(self);
            } else {
                window.onPopupWindowLoad = function() {
                    setTimeout(function() {
                        if (ownWindow.screenX === 0) {
                            // Chrome
                            ownWindow.close();
                            self.onBlock.call(self);
                        } else {
                            self.onLoad.call(self);
                        }
                    }, 0);
                };
            }
        };
    
    }
    Canvas.resizeControls(4);
    Canvas.resizeFonts(2);
    
    isc.VLayout.create({
        "ID": "rootLayout",
        "autoDraw": true,
        "width": "100%",
        "height": "100%",
        "members":
        [
            isc.Timeline.create({
                                    "ID": "theTimeline",                                
                                    "width": "100%",
                                    "height": "100%",
                                    "overflow": "hidden",
                                    "hideUsingDisplayNone": false,
                                    "hoverWidth": 200,
                                    "startDate": new Date(2019, 7, 5),
                                    "endDate": new Date(2019, 7, 18, 23, 59, 59),
                                    "headerLevels":
                                    [{
                                            "unit": "week"
                                        }, {
                                            "unit": "day",
                                            "headerWidth": 45
                                        }
                                    ],
                                    "canEditEvents": false,
                                    "canCreateEvents": false,
                                    "showControlsBar": false,
                                    "firstDayOfWeek": 1,
                                    "todayBackgroundColor": "#E0E0E0",
                                    "showEventHeaders": false,
                                    "showEventDescriptions": false,
                                    "getDateCSSText": function (date, rowNum, colNum, viewer) {
                                        if (colNum != 0 && (date.getDay() == 6 || date.getDay() == 0))
                                            return "background-color: #0C7DFB"
                                    },
                                    "eventSnapGap": 37,
                                    "labelColumnWidth": 220,
                                    "alternateLaneStyles": true,
                                    "laneFields":
                                    [{
    
                                            "name": "title",
                                            "title": "&nbsp",
                                            "type": "text",                                        
                                            "canEdit": false,
                                            "shouldPrint": true
                                        }
                                    ],
                                    "lanes":
                                    [{
                                            "hierarchyLevel": 0,
                                            "timelineGeneratedIndex": "1",
                                            "isOpen": true,
                                            "height": 30,
                                            "isFolder": true,
                                            "name": "1",
                                            "title": "a, a"
                                        }, {
                                            "hierarchyLevel": 1,
                                            "timelineGeneratedIndex": "2",
                                            "isOpen": false,
                                            "height": 30,
                                            "isFolder": true,
                                            "name": "9",
                                            "title": "b, b"
                                        }, {
                                            "hierarchyLevel": 1,
                                            "timelineGeneratedIndex": "3",
                                            "isOpen": false,
                                            "height": 30,
                                            "isFolder": true,
                                            "name": "8",
                                            "title": "c, c"
                                        }, {
                                            "hierarchyLevel": 1,
                                            "timelineGeneratedIndex": "4",
                                            "isOpen": false,
                                            "height": 30,
                                            "isFolder": true,
                                            "name": "7",
                                            "title": "d, d"
                                        }
                                    ],
                                    "data":
                                    [{
                                            "lane": "9",
                                            "isTrip": true,
                                            "description": "test1",
                                            "startDate": new Date(2019, 7, 6, 8, 0),
                                            "backgroundColor": "#FFC300",
                                            "showDate": true,
                                            "endDate": new Date(2019, 7, 7, 17, 0),
                                            "name": "&nbsp"
                                        }, {
                                            "lane": "9",
                                            "isTrip": false,
                                            "description": "test2",
                                            "startDate": new Date(2019, 7, 8, 0, 0),
                                            "backgroundColor": "#009F77",
                                            "showDate": true,
                                            "endDate": new Date(2019, 7, 9, 23, 59),
                                            "name": "&nbsp"
                                        }, {
                                            "lane": "8",
                                            "isTrip": true,
                                            "description": "test3",
                                            "startDate": new Date(2019, 7, 8, 8, 0),
                                            "backgroundColor": "#FFC300",
                                            "showDate": true,
                                            "endDate": new Date(2019, 7, 9, 17, 0),
                                            "name": "&nbsp"
                                        }, {
                                            "lane": "8",
                                            "isTrip": false,
                                            "description": "test4",
                                            "startDate": new Date(2019, 7, 7, 0, 0),
                                            "backgroundColor": "#009F77",
                                            "showDate": true,
                                            "endDate": new Date(2019, 7, 7, 23, 59),
                                            "name": "&nbsp"
                                        }
                                    ]
                                }),
            isc.Button.create({
                "ID": "printButton",
                "width": 300,
                "click": function () {
                    theTimeline.getPrintHTML({
                        printForExport: true
                    }, function (data) {
                        var popup = new PopupWindow(1200, 1000);
                        popup.windowFile('popup.html');
                        popup.onLoad = function () {
                            popup.title('printView');
                            popup.content('<SCRIPT SRC=\"/isomorphic/skins/Tahoe/load_skin.js\"><\/SCRIPT><link rel=\"stylesheet\" type=\"text/css\" href=\"http://localhost/isomorphic/skins/Tahoe/skin_styles.css\"><STYLE  TYPE=\"TEXT/CSS\"></STYLE><style></style>' + data + '');
                            this.window().setTimeout(function (data) {
                                data.print()
                            }, 1000, this.window());
                        };
                        popup.onBlock = function () {
                            isc.warn('<strong>Hint:</strong> Deactivate your popupblocker');
                        };
                        popup.open();
                    });
                },
                "title": "print"
            })
        ]});
    
    </script>
    </body>
    </html>
    And this file as "popup.html" in the same directory
    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8">
            <style type="text/css">
                body { font-family:Helvetica,Arial,sans-serif;}
            </style>
            <script type="text/javascript">
                window.onload = function() {
                    if(window.opener.onPopupWindowLoad) {
                            window.opener.onPopupWindowLoad.call(window);
                    } else {
                        document.title = "Fehler / Error";
                        document.getElementById("popupWindowError").style.display = "block";
                        document.getElementById("popupWindowContent").style.display = "none";
                    }
                };
            </script>
        </head>
        <body>
            <div id="popupWindowError" style="display: none;">
                <h2>Fehler</h2>
                <p>Das Popup Fenster konnte nicht geladen werden, da Sie einen Popup Blocker aktiviert haben. Bitte deaktivieren Sie Ihren Popup Blocker und führen Ihre letzte Aktion erneut aus.</p>
                <h2>Error</h2>
                <p>The popup window could not be loaded, because of an activated popup blocker. Please disable your popup blocker and repeat your last action.</p>
            </div>
            <div id="popupWindowContent"></div>
        </body>
    </html>
    Best regards

    #2
    This has been assigned to a developer to resolve. Thanks for the clear test case.

    Comment


      #3
      We've made some changes to improve printPreview output for Timelines - various conditions make it difficult to be pixel-perfect when placing EventCanvases for printing in different circumstances, but you should find it much better.

      Please retest with a build dated August 11 or later.

      Comment

      Working...
      X