ADD auto fix box-shadow for printing in chrome

2017-02-07 23:21:51 +01:00 · 2017-02-07 23:21:51 +01:00 · a3a4a0075f
commit a3a4a0075f
parent 1280758d72
10 changed files with 147 additions and 87 deletions
--- a/pdf/resume-1.pdf
+++ b/pdf/resume-1.pdf
--- a/pdf/resume-2.pdf
+++ b/pdf/resume-2.pdf
--- a/pdf/resume-3.pdf
+++ b/pdf/resume-3.pdf
--- a/pdf/resume-4.pdf
+++ b/pdf/resume-4.pdf
--- a/pdf/resume-5.pdf
+++ b/pdf/resume-5.pdf
--- a/pdf/resume-6.pdf
+++ b/pdf/resume-6.pdf
--- a/public/javascript.js
+++ b/public/javascript.js
@ -20,7 +20,7 @@ function getResumeDOMElement() {
 }

 /**
- * sets variable "page" to DOM-element of <page></page>
+ * sets variable 'page' to DOM-element of <page></page>
 */
 function setPageDOMElement() {
    page = document.getElementsByTagName('page')[0];
@ -52,7 +52,9 @@ function contentIsGreaterThanPage(resume) {
 * @return {Number}         font size of element
 */
 function getFontSizeOfElement(element) {
-    var style = window.getComputedStyle(element, null).getPropertyValue('font-size');
+    var style = window
+        .getComputedStyle(element, null)
+        .getPropertyValue('font-size');
    return parseFloat(style);
 }

@ -73,7 +75,6 @@ function decreaseFontSizes() {
    var current;
    for (var i = 0; i < elements.length; i++) {
        current = elements[i];
-        console.log(getFontSizeOfElement(current));
        newFontSize = getFontSizeOfElement(current) * 0.99;
        setFontSizeOfElement(current, newFontSize);
    }
@ -88,5 +89,113 @@ function fixFont() {
    if (contentIsGreaterThanPage(resume)) fixFont();
 }

+/**
+ * checks if DOM-element has box-shadow
+ * @param  {HTMLElement}  element
+ * @return {String} '' if no shadow, otherwise shadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px'
+ */
+function hasBoxShadow(element) {
+    var style = window
+        .getComputedStyle(element, null)
+        .getPropertyValue('box-shadow');
+    if (style != 'none') return style;
+    else return '';
+}
+
+/**
+ * gets absolute position of element
+ * @param  {HTMLElement} element
+ * @return {{}}
+ */
+function getAbsolutePositionOfElement(element) {
+    return {
+        top: element.getBoundingClientRect().top,
+        left: element.getBoundingClientRect().left
+    }
+}
+
+
+/**
+ * removes box shadow from element
+ * @param  {HTMLElement} element
+ */
+function removeBoxShadowOfElement(element) {
+    element.style.boxShadow = 'none';
+}
+
+
+/**
+ * gets border radius of element
+ * @param  {HTMLElement} element
+ * @return {String}         e.g. '50%'
+ */
+function getBorderRadiusOfElement(element) {
+    return window
+        .getComputedStyle(element, null)
+        .getPropertyValue('border-radius');
+}
+
+/**
+ * adds new box shadow
+ * @param {HTMLElement} element
+ * @param {{}} position  e.g. { left: 10, top: 100}
+ * @param {String} boxShadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px'
+ */
+function addNewBoxShadow(element, position, boxShadow) {
+    var div = document.createElement('div');
+    div.style.height = element.offsetHeight;
+    div.style.width = element.offsetWidth;
+    div.style.borderRadius = getBorderRadiusOfElement(element);
+    div.style.position = 'absolute';
+    div.style.boxShadow = boxShadow;
+    div.style.webkitPrintColorAdjust = 'exact';
+    div.style.webkitFilter = 'opacity(1)';
+    div.style.top = position.top;
+    div.style.left = position.left;
+    document.getElementsByTagName('body')[0].appendChild(div);
+}
+
+/**
+ * fixes box shadow of element
+ * @param  {HTMLElement} element
+ * @param  {String} boxShadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px'
+ */
+function fixBoxShadow(element, boxShadow) {
+    var position = getAbsolutePositionOfElement(element);
+    removeBoxShadowOfElement(element);
+    addNewBoxShadow(element, position, boxShadow);
+}
+
+/**
+ * gets all elements with shadows
+ * @return {HTMLElement[]} elements with shadows
+ */
+function getElementsWithShadows() {
+    var elements = getAllDOMElements();
+    var current, boxShadow;
+    var ret = [];
+    for (var i = 0; i < elements.length; i++) {
+        current = elements[i];
+        boxShadow = hasBoxShadow(current);
+        if (hasBoxShadow(current) != '') ret.push({
+            element: current,
+            shadow: boxShadow
+        });
+    }
+    return ret;
+}
+
+/**
+ * fixes shadows, since normal box-shadow cannot be printed in chrome,
+ * see: http://stackoverflow.com/questions/13975198/text-shadow-and-box-shadow-while-printing-chrome
+ */
+function fixBoxShadows() {
+    var elementsWithShadow = getElementsWithShadows();
+    for (var i = 0; i < elementsWithShadow.length; i++) {
+        fixBoxShadow(elementsWithShadow[i].element, elementsWithShadow[i].shadow);
+    }
+}
+
+fixBoxShadows();
 setPageDOMElement();
 checkFont();
--- a/public/style.min.css
+++ b/public/style.min.css
--- a/resumes/resume-5/resume-5.less
+++ b/resumes/resume-5/resume-5.less
@ -1,25 +1,32 @@
-@pageBackground: #ECEFF1;
-@background: #009688;
-
 .resume5 {
-    background: @pageBackground;
+    background: #ECEFF1;
 }

 #resume5 {
+    .dp1 {
+        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+    }
+
+    .dp2 {
+        box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);
+    }
+
+    .dp3 {
+        box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.3);
+    }
+
+    .dp4 {
+        box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.3);
+    }
+
+    .dp5 {
+        box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3);
+    }
+
    .introduction {
        height: 25%;
        position: relative;
-        background: @background;
-
-        .dp3 {
-            box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
-            position: absolute;
-            height: 100%;
-            -webkit-print-color-adjust: exact;
-            -webkit-filter:opacity(1);
-            top: 0;
-            width: 100%;
-        }
+        background: #009688;

        .wrapper {
            width: 100%;
@ -42,19 +49,6 @@
                position: relative;
            }

-            .img-dp4 {
-                box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.3);
-                -webkit-print-color-adjust: exact;
-                -webkit-filter:opacity(1);
-                position: absolute;
-                height: 100px;
-                width: 100px;
-                top: 0;
-                left: 50%;
-                transform: translateX(-50%);
-                border-radius: 50%;
-            }
-
            .position {
                color: white;
            }
@ -87,27 +81,6 @@
        flex: 1;
        background: white;
        border-radius: 2px;
-        position: relative;
-
-        .title-shadow {
-            box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.3);
-            position: absolute;
-            width: 100%;
-            height: 79px;
-            top: 0;
-            -webkit-print-color-adjust: exact;
-            -webkit-filter:opacity(1);
-        }
-
-        .dp1 {
-            box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
-            position: absolute;
-            height: 100%;
-            width: 100%;
-            top: 0;
-            -webkit-print-color-adjust: exact;
-            -webkit-filter:opacity(1);
-        }

        .title {
            display: block;
@ -235,20 +208,6 @@
                z-index: 2;
            }

-            .circle-shadow {
-                height: 30px;
-                width: 30px;
-                display: inline-block;
-                background: #009688;
-                border-radius: 50%;
-                float: left;
-                position: absolute;
-                z-index: 2;
-                box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
-                -webkit-print-color-adjust: exact;
-                -webkit-filter:opacity(1);
-            }
-
            .job {
                margin-left: 53px;
                margin-top: -5px;
--- a/resumes/resume-5/resume-5.mustache
+++ b/resumes/resume-5/resume-5.mustache
@ -1,23 +1,21 @@
 <page class="a4 resume4">
-    <div id="resume5" class="resume">
-        <div class="introduction">
+    <div id="resume5">
+        <div class="introduction dp3">
            <div class="wrapper">
-                <div class="img">
+                <div class="img dp4">
                </div>
-                <div class="img-dp4"></div>
                <div class="text">
                    <div class="name">{{person.name}}</div>
                    <div class="position">{{person.position}}</div>
                </div>
            </div>
-            <div class="dp3"></div>
+
        </div>
        <div class="resume-content">
            <div class="card-row">
-                <div class="card">
+                <div class="card dp1">
                    <div class="content">
-                        <div class="title">Education</div>
-                        <div class="title-shadow"></div>
+                        <div class="title dp3">Education</div>
                        <div class="text">
                            {{#person.education}}
                                <div class="row line">
@ -27,21 +25,18 @@
                            {{/person.education}}
                        </div>
                    </div>
-                    <div class="dp1"></div>
                </div>
            </div>
            <div class="card-row multiple">
-                <div class="card">
+                <div class="card dp1">
                    <div class="content ">
-                        <div class="title">Experience</div>
-                        <div class="title-shadow"></div>
+                        <div class="title dp3">Experience</div>
                        <div class="text">
                            <div class="timeline">
                                {{#person.experience}}
                                    <div class="experience-block">
-                                        <div class="circle"></div>
-                                        <div class="circle-shadow"></div>
-                                        <div class="job">
+                                        <div class="circle dp1"></div>
+                                        <div class="job dp1">
                                            <div class="job-row">
                                                <span class="jobtitle">{{position}}</span>
                                            </div>
@ -60,12 +55,10 @@

                        </div>
                    </div>
-                    <div class="dp1"></div>
                </div>
-                <div class="card ">
+                <div class="card dp1">
                    <div class="content">
-                        <div class="title">Skills</div>
-                        <div class="title-shadow"></div>
+                        <div class="title dp3">Skills</div>
                        <div class="text">
                            <div class="row">
                                <div class="chips">
@ -77,7 +70,6 @@
                            </div>
                        </div>
                    </div>
-                    <div class="dp1"></div>
                </div>
            </div>
        </div>