REFACTOR
This commit is contained in:
unpregnant
parent
60b24d8645
commit
ef25a203ea
Binary file not shown.
@ -1,97 +1,187 @@
|
||||
'use strict';
|
||||
|
||||
// minimum margin of content to bottom of page
|
||||
var marginBottom = 0;
|
||||
// DOM-element of <page></page>
|
||||
var page;
|
||||
|
||||
/**
|
||||
* gets all DOM-elements on page
|
||||
* @return {HTMLElement[]} DOM-elements
|
||||
*/
|
||||
function getAllDOMElements() {
|
||||
var getAllDOMElements = function getAllDOMElements() {
|
||||
return document.getElementsByTagName('*');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* gets DOM-element of #resumeX
|
||||
* @param {HTMLElement} page
|
||||
* @return {HTMLElement}
|
||||
*/
|
||||
function getResumeDOMElement() {
|
||||
var getResumeDOMElement = function getResumeDOMElement(page) {
|
||||
return page.children[0];
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* sets variable "page" to DOM-element of <page></page>
|
||||
* returns DOM-element of <page></page>
|
||||
* @return {HTMLElement}
|
||||
*/
|
||||
function setPageDOMElement() {
|
||||
page = document.getElementsByTagName('page')[0];
|
||||
}
|
||||
var getPageDOMElement = function getPageDOMElement() {
|
||||
return document.getElementsByTagName('page')[0];
|
||||
};
|
||||
|
||||
function autoFontEnabled(resume) {
|
||||
/**
|
||||
* checks whether auto-font adjustment is enabled for resume
|
||||
* @param {HTMLElement} resume
|
||||
* @return {boolean}
|
||||
*/
|
||||
var autoFontEnabled = function autoFontEnabled(resume) {
|
||||
return resume.hasAttribute('autofont');
|
||||
}
|
||||
|
||||
/**
|
||||
* checks whether font needs to be fixed, and if fixes it
|
||||
*/
|
||||
function checkFont() {
|
||||
var resume = getResumeDOMElement();
|
||||
if (autoFontEnabled(resume) && contentIsGreaterThanPage(resume)) fixFont();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* checks whether content is greater than page
|
||||
* @param {HTMLElement} resume
|
||||
* @return {Boolean} false if content fits to page
|
||||
* @param {HTMLElement} page
|
||||
* @return {boolean} false if content fits to page
|
||||
*/
|
||||
function contentIsGreaterThanPage(resume) {
|
||||
var contentIsGreaterThanPage = function contentIsGreaterThanPage(resume, page) {
|
||||
var pageHeight = page.offsetHeight;
|
||||
var resumeHeight = resume.offsetHeight + marginBottom;
|
||||
var resumeHeight = resume.offsetHeight;
|
||||
if (pageHeight < resumeHeight) return true;else return false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* gets font size of DOM-elemnt
|
||||
* @param {HTMLElement} element
|
||||
* @return {Number} font size of element
|
||||
* @return {number} font size of element
|
||||
*/
|
||||
function getFontSizeOfElement(element) {
|
||||
var getFontSizeOfElement = function getFontSizeOfElement(element) {
|
||||
var style = window.getComputedStyle(element, null).getPropertyValue('font-size');
|
||||
return parseFloat(style);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* sets font size of DOM-element
|
||||
* calculates new font size of all DOM-elements
|
||||
* @param {HTMLElement[]}
|
||||
*/
|
||||
var calcNewFontSizes = function calcNewFontSizes(elements) {
|
||||
return elements.map(function (el) {
|
||||
return getFontSizeOfElement(el) * 0.99;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 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'
|
||||
*/
|
||||
var hasBoxShadow = 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 {{}}
|
||||
*/
|
||||
var getAbsolutePositionOfElement = function getAbsolutePositionOfElement(element) {
|
||||
return {
|
||||
top: element.getBoundingClientRect().top,
|
||||
left: element.getBoundingClientRect().left
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* gets border radius of element
|
||||
* @param {HTMLElement} element
|
||||
* @return {string} e.g. '50%'
|
||||
*/
|
||||
var getBorderRadiusOfElement = function getBorderRadiusOfElement(element) {
|
||||
return window.getComputedStyle(element, null).getPropertyValue('border-radius');
|
||||
};
|
||||
|
||||
/**
|
||||
* adds new box shadow
|
||||
* @param {HTMLElement} element
|
||||
* @param {Number} fontSize
|
||||
* @param {{}} position e.g. { left: 10, top: 100}
|
||||
* @param {string} boxShadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px'
|
||||
*/
|
||||
function setFontSizeOfElement(element, fontSize) {
|
||||
element.style.fontSize = fontSize + 'px';
|
||||
}
|
||||
var addNewBoxShadow = 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);
|
||||
};
|
||||
|
||||
/**
|
||||
* decreases font size of all DOM-elements
|
||||
* gets all elements with shadows
|
||||
* @param {HTMLElement[]} elements on page
|
||||
* @return {HTMLElement[]} elements with shadows
|
||||
*/
|
||||
function decreaseFontSizes() {
|
||||
var getElementsWithShadows = function getElementsWithShadows(elements) {
|
||||
var ar = [].slice.call(elements);
|
||||
return ar.filter(function (el) {
|
||||
return hasBoxShadow(el) != '';
|
||||
}).map(function (el) {
|
||||
return {
|
||||
element: el,
|
||||
shadow: hasBoxShadow(el)
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
var fixBoxShadows = function fixBoxShadows() {
|
||||
var elements = getAllDOMElements();
|
||||
var current;
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
current = elements[i];
|
||||
var newFontSize = getFontSizeOfElement(current) * 0.99;
|
||||
setFontSizeOfElement(current, newFontSize);
|
||||
}
|
||||
}
|
||||
var elementsWithShadow = getElementsWithShadows(elements);
|
||||
elementsWithShadow.forEach(function (element) {
|
||||
var position = getAbsolutePositionOfElement(element.element);
|
||||
element.element.style.boxShadow = 'none';
|
||||
addNewBoxShadow(element.element, position, element.shadow);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* decreases font size until content fits to page
|
||||
* checks if the page contains a resume
|
||||
* @return {Boolean} true if page contains resume
|
||||
*/
|
||||
function fixFont() {
|
||||
decreaseFontSizes();
|
||||
var resume = getResumeDOMElement();
|
||||
if (contentIsGreaterThanPage(resume)) fixFont();
|
||||
}
|
||||
var isResume = function isResume() {
|
||||
if (document.getElementsByTagName('page')[0]) return true;else return false;
|
||||
};
|
||||
|
||||
setPageDOMElement();
|
||||
checkFont();
|
||||
/**
|
||||
* checks whether font needs to be fixed, and if fixes it
|
||||
*/
|
||||
var checkFont = function checkFont() {
|
||||
var page = getPageDOMElement();
|
||||
var resume = getResumeDOMElement(page);
|
||||
var fixFont = function fixFont(resume, page) {
|
||||
var elements = getAllDOMElements();
|
||||
var elementsAr = [].slice.call(elements);
|
||||
var newFontSizes = calcNewFontSizes(elementsAr);
|
||||
elementsAr.forEach(function (el, i) {
|
||||
return el.style.fontSize = newFontSizes[i] + 'px';
|
||||
});
|
||||
if (contentIsGreaterThanPage(resume, page)) fixFont(resume, page);
|
||||
};
|
||||
if (autoFontEnabled(resume) && contentIsGreaterThanPage(resume, page)) fixFont(resume, page);
|
||||
};
|
||||
|
||||
/**
|
||||
* fixes resume
|
||||
*/
|
||||
var fixResume = function fixResume() {
|
||||
if (!isResume()) return;
|
||||
checkFont();
|
||||
fixBoxShadows();
|
||||
};
|
||||
|
||||
fixResume();
|
||||
//# sourceMappingURL=javascript.js.map
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 126 KiB |
1
public/styles/resume-wanted.min.css
vendored
1
public/styles/resume-wanted.min.css
vendored
@ -1 +0,0 @@
|
||||
.resume4{background:#eaeaea}#resume4{font-family:Roboto,sans-serif;color:#223;padding-bottom:50px}#resume4 a,#resume4 a:focus,#resume4 a:hover{color:#223;text-decoration:none}#resume4 .card{border-radius:2px;border-radius:4px;margin-bottom:25px}#resume4 .card.contact,#resume4 .card.education{float:left}#resume4 .card.half{width:49%}#resume4 .card.half .card-content,#resume4 .card.half .card-header{padding:15px 8%;width:84%}#resume4 .card .card-header{width:92%;display:inline-block;padding:20px 4%;border-bottom:#ccc 1px solid}#resume4 .card .card-header i{float:left;font-size:32px;color:#545}#resume4 .card .card-header h3{margin:0;float:left;font-size:26px;font-weight:300;margin-left:10px;color:#545;margin-top:2px}#resume4 .card .card-content{width:92%;padding:20px 4%}#resume4 .resume-header .box{display:inline-block;background:#e56;height:150px;width:100%}#resume4 .resume-header .person-header{position:absolute;width:100%;top:50px}#resume4 .resume-header .person-header .img{background:url(/person.jpg);background-position:center;background-size:cover;background-repeat:no-repeat;height:200px;width:200px;border-radius:50%;border:#eaeaea 3px solid;position:relative;margin-left:auto;margin-right:auto;filter:grayscale(100%)}#resume4 .resume-header .person-header .person-wrapper{margin-left:auto;margin-right:auto;text-align:center}#resume4 .resume-header .person-header .person-wrapper .name{color:#223;font-size:35px;margin-top:10px}#resume4 .resume-header .person-header .person-wrapper .position{color:#545}#resume4 .resume-content{margin-top:200px;padding-left:5%;padding-right:5%}#resume4 .resume-content .experience-block{margin-bottom:10px;color:#223}#resume4 .resume-content .experience-block:last-of-type{margin-bottom:0}#resume4 .resume-content .experience-block .row:first-child{font-size:18px;color:#223}#resume4 .resume-content .experience-block .row:nth-child(2){font-size:15px;color:#545}#resume4 .resume-content .education{margin-right:2%}#resume4 .resume-content .education .education-block{margin-bottom:10px;color:#223}#resume4 .resume-content .education .education-block:last-of-type{margin-bottom:0}#resume4 .resume-content .education .education-block .row:first-child{font-size:18px;color:#223}#resume4 .resume-content .education .education-block .row:nth-child(2){font-size:15px;color:#545}#resume4 .resume-content .skills{width:100%}#resume4 .resume-content .skills .wrapper{display:inline-block;width:100%}#resume4 .resume-content .skills .wrapper .skill{display:inline-block;float:left;width:50%;font-size:#223;color:#223}#resume4 .resume-content .skills .wrapper .skill i{margin-right:5px;font-size:12px}#resume4 .resume-content .contact{color:#223}#resume4 .resume-content .contact a,#resume4 .resume-content .contact span{padding-bottom:5px;display:inline-block}
|
||||
@ -1,101 +0,0 @@
|
||||
<page class="a4 resume4">
|
||||
|
||||
<div id="resume4" class="resume" autofont>
|
||||
<div class="resume-header">
|
||||
<div class="box"></div>
|
||||
<div class="person-header">
|
||||
<div class="img"></div>
|
||||
<div class="person-wrapper">
|
||||
<div class="person">
|
||||
<div class="name">{{person.name.first}} {{person.name.last}}</div>
|
||||
<div class="position">{{person.position}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="resume-content experience">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="material-icons">work</i>
|
||||
<h3>Experience</h3>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
|
||||
{{#person.experience}}
|
||||
<div class="experience-block">
|
||||
<div class="row">
|
||||
<span class="job-title"> {{position}} - </span>
|
||||
<span class="company"> {{company}} </span>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
<span class="time-period"> {{timeperiod}}</span>
|
||||
<span class="job-description">, {{description}} </span>
|
||||
</div>
|
||||
</div>
|
||||
{{/person.experience}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card skills">
|
||||
<div class="card-header">
|
||||
<i class="material-icons">computer</i>
|
||||
<h3>Skills</h3>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="wrapper">
|
||||
{{#person.skills}}
|
||||
<span class="skill"><i class="material-icons">check</i> {{name}}</span>
|
||||
{{/person.skills}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-row">
|
||||
<div class="card education half">
|
||||
<div class="card-header">
|
||||
<i class="material-icons">school</i>
|
||||
<h3>Education</h3>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
{{#person.education}}
|
||||
<div class="education-block">
|
||||
<div class="row">
|
||||
<span class="degree">{{degree}}</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="degree-description">{{description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
{{/person.education}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card contact half">
|
||||
<div class="card-header">
|
||||
<i class="material-icons">perm_contact_calendar</i>
|
||||
<h3>Contact</h3>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<a href="mailto:{{person.contact.email}}"> {{person.contact.email}}</a>
|
||||
<br>
|
||||
<a href="tel:{{person.contact.phone}}">{{person.contact.phone}}</a>
|
||||
<br>
|
||||
<span>{{person.contact.street}}, {{person.contact.city}}</span>
|
||||
<br>
|
||||
<a href="{{person.contact.website}}">
|
||||
{{person.contact.website}}
|
||||
</a>
|
||||
<br>
|
||||
<a href="{{person.contact.github}}">
|
||||
{{person.contact.github}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</page>
|
||||
@ -1,210 +0,0 @@
|
||||
@main: #EE5566;
|
||||
@textDark: #222233;
|
||||
@textLight: #554455;
|
||||
@page4: #eaeaea;
|
||||
@cardHeader: #CCC;
|
||||
@skill: #223;
|
||||
@cardHeaderIconFontSize: 32px;
|
||||
@cardHeaderFontSize: 26px;
|
||||
@nameFontSize: 35px;
|
||||
@experienceFirstRowFontSize: 18px;
|
||||
@experienceSecondRowFontSize: 15px;
|
||||
@educationFirstRowFontSize: 18px;
|
||||
@educationSecondRowFontSize: 15px;
|
||||
@skillIconFontSize: 12px;
|
||||
|
||||
.resume4 {
|
||||
background: @page4;
|
||||
}
|
||||
|
||||
#resume4 {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
color: @textDark;
|
||||
padding-bottom: 50px;
|
||||
|
||||
a,
|
||||
a:focus,
|
||||
a:hover {
|
||||
color: @textDark;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 2px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 25px;
|
||||
|
||||
&.contact,
|
||||
&.education {
|
||||
float: left;
|
||||
}
|
||||
|
||||
&.half {
|
||||
width: 49%;
|
||||
|
||||
.card-content,
|
||||
.card-header {
|
||||
padding: 15px 8%;
|
||||
width: 84%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
width: 92%;
|
||||
display: inline-block;
|
||||
padding: 20px 4%;
|
||||
border-bottom: @cardHeader 1px solid;
|
||||
|
||||
i {
|
||||
float: left;
|
||||
font-size: @cardHeaderIconFontSize;
|
||||
color: @textLight;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
float: left;
|
||||
font-size: @cardHeaderFontSize;
|
||||
font-weight: 300;
|
||||
margin-left: 10px;
|
||||
color: @textLight;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
width: 92%;
|
||||
padding: 20px 4%;
|
||||
}
|
||||
}
|
||||
|
||||
.resume-header {
|
||||
.box {
|
||||
display: inline-block;
|
||||
background: @main;
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.person-header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 50px;
|
||||
|
||||
.img {
|
||||
background: url('/person.jpg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
border-radius: 50%;
|
||||
border: @page4 3px solid;
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.person-wrapper {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
|
||||
.name {
|
||||
color: @textDark;
|
||||
font-size: @nameFontSize;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.position {
|
||||
color: @textLight;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.resume-content {
|
||||
margin-top: 200px;
|
||||
padding-left: 5%;
|
||||
padding-right: 5%;
|
||||
|
||||
.experience-block {
|
||||
margin-bottom: 10px;
|
||||
color: @textDark;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.row {
|
||||
&:first-child {
|
||||
font-size: @experienceFirstRowFontSize;
|
||||
color: @textDark;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
font-size: @experienceSecondRowFontSize;
|
||||
color: @textLight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.education {
|
||||
margin-right: 2%;
|
||||
|
||||
.education-block {
|
||||
margin-bottom: 10px;
|
||||
color: @textDark;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.row {
|
||||
&:first-child {
|
||||
font-size: @educationFirstRowFontSize;
|
||||
color: @textDark;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
font-size: @educationSecondRowFontSize;
|
||||
color: @textLight;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skills {
|
||||
width: 100%;
|
||||
|
||||
.wrapper {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
.skill {
|
||||
i {
|
||||
margin-right: 5px;
|
||||
font-size: @skillIconFontSize;
|
||||
}
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: 50%;
|
||||
font-size: @skill;
|
||||
color: @skill;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact {
|
||||
color: @textDark;
|
||||
|
||||
a,
|
||||
span {
|
||||
padding-bottom: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,95 +1,192 @@
|
||||
// minimum margin of content to bottom of page
|
||||
var marginBottom = 0;
|
||||
// DOM-element of <page></page>
|
||||
var page;
|
||||
|
||||
/**
|
||||
* gets all DOM-elements on page
|
||||
* @return {HTMLElement[]} DOM-elements
|
||||
*/
|
||||
function getAllDOMElements() {
|
||||
const getAllDOMElements = () => {
|
||||
return document.getElementsByTagName('*');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* gets DOM-element of #resumeX
|
||||
* @param {HTMLElement} page
|
||||
* @return {HTMLElement}
|
||||
*/
|
||||
function getResumeDOMElement() {
|
||||
const getResumeDOMElement = page => {
|
||||
return page.children[0];
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* sets variable "page" to DOM-element of <page></page>
|
||||
* returns DOM-element of <page></page>
|
||||
* @return {HTMLElement}
|
||||
*/
|
||||
function setPageDOMElement() {
|
||||
page = document.getElementsByTagName('page')[0];
|
||||
}
|
||||
const getPageDOMElement = () => {
|
||||
return document.getElementsByTagName('page')[0];
|
||||
};
|
||||
|
||||
function autoFontEnabled(resume) {
|
||||
/**
|
||||
* checks whether auto-font adjustment is enabled for resume
|
||||
* @param {HTMLElement} resume
|
||||
* @return {boolean}
|
||||
*/
|
||||
const autoFontEnabled = resume => {
|
||||
return resume.hasAttribute('autofont');
|
||||
}
|
||||
|
||||
/**
|
||||
* checks whether font needs to be fixed, and if fixes it
|
||||
*/
|
||||
function checkFont() {
|
||||
var resume = getResumeDOMElement();
|
||||
if (autoFontEnabled(resume) && contentIsGreaterThanPage(resume)) fixFont();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* checks whether content is greater than page
|
||||
* @param {HTMLElement} resume
|
||||
* @return {Boolean} false if content fits to page
|
||||
* @param {HTMLElement} page
|
||||
* @return {boolean} false if content fits to page
|
||||
*/
|
||||
function contentIsGreaterThanPage(resume) {
|
||||
var pageHeight = page.offsetHeight;
|
||||
var resumeHeight = resume.offsetHeight + marginBottom;
|
||||
const contentIsGreaterThanPage = (resume, page) => {
|
||||
const pageHeight = page.offsetHeight;
|
||||
const resumeHeight = resume.offsetHeight;
|
||||
if (pageHeight < resumeHeight) return true;
|
||||
else return false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* gets font size of DOM-elemnt
|
||||
* @param {HTMLElement} element
|
||||
* @return {Number} font size of element
|
||||
* @return {number} font size of element
|
||||
*/
|
||||
function getFontSizeOfElement(element) {
|
||||
var style = window.getComputedStyle(element, null).getPropertyValue('font-size');
|
||||
const getFontSizeOfElement = element => {
|
||||
const style = window.getComputedStyle(element, null).getPropertyValue('font-size');
|
||||
return parseFloat(style);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* sets font size of DOM-element
|
||||
* calculates new font size of all DOM-elements
|
||||
* @param {HTMLElement[]}
|
||||
*/
|
||||
const calcNewFontSizes = elements => {
|
||||
return elements
|
||||
.map(el => getFontSizeOfElement(el) * 0.99);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 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'
|
||||
*/
|
||||
const hasBoxShadow = element => {
|
||||
const style = window
|
||||
.getComputedStyle(element, null)
|
||||
.getPropertyValue('box-shadow');
|
||||
if (style != 'none') return style;
|
||||
else return '';
|
||||
};
|
||||
|
||||
/**
|
||||
* gets absolute position of element
|
||||
* @param {HTMLElement} element
|
||||
* @return {{}}
|
||||
*/
|
||||
const getAbsolutePositionOfElement = element => {
|
||||
return {
|
||||
top: element.getBoundingClientRect().top,
|
||||
left: element.getBoundingClientRect().left
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* gets border radius of element
|
||||
* @param {HTMLElement} element
|
||||
* @return {string} e.g. '50%'
|
||||
*/
|
||||
const getBorderRadiusOfElement = element => {
|
||||
return window
|
||||
.getComputedStyle(element, null)
|
||||
.getPropertyValue('border-radius');
|
||||
};
|
||||
|
||||
/**
|
||||
* adds new box shadow
|
||||
* @param {HTMLElement} element
|
||||
* @param {Number} fontSize
|
||||
* @param {{}} position e.g. { left: 10, top: 100}
|
||||
* @param {string} boxShadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px'
|
||||
*/
|
||||
function setFontSizeOfElement(element, fontSize) {
|
||||
element.style.fontSize = fontSize + 'px';
|
||||
}
|
||||
const addNewBoxShadow = (element, position, boxShadow) => {
|
||||
let 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);
|
||||
};
|
||||
|
||||
/**
|
||||
* decreases font size of all DOM-elements
|
||||
* gets all elements with shadows
|
||||
* @param {HTMLElement[]} elements on page
|
||||
* @return {HTMLElement[]} elements with shadows
|
||||
*/
|
||||
function decreaseFontSizes() {
|
||||
var elements = getAllDOMElements();
|
||||
var current;
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
current = elements[i];
|
||||
var newFontSize = getFontSizeOfElement(current) * 0.99;
|
||||
setFontSizeOfElement(current, newFontSize);
|
||||
}
|
||||
}
|
||||
const getElementsWithShadows = elements => {
|
||||
const ar = [].slice.call(elements);
|
||||
return ar
|
||||
.filter(el => hasBoxShadow(el) != '')
|
||||
.map(el => {
|
||||
return {
|
||||
element: el,
|
||||
shadow: hasBoxShadow(el)
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* decreases font size until content fits to page
|
||||
* 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 fixFont() {
|
||||
decreaseFontSizes();
|
||||
var resume = getResumeDOMElement();
|
||||
if (contentIsGreaterThanPage(resume)) fixFont();
|
||||
}
|
||||
const fixBoxShadows = () => {
|
||||
const elements = getAllDOMElements();
|
||||
const elementsWithShadow = getElementsWithShadows(elements);
|
||||
elementsWithShadow.forEach(element => {
|
||||
const position = getAbsolutePositionOfElement(element.element);
|
||||
element.element.style.boxShadow = 'none';
|
||||
addNewBoxShadow(element.element, position, element.shadow);
|
||||
});
|
||||
};
|
||||
|
||||
setPageDOMElement();
|
||||
checkFont();
|
||||
/**
|
||||
* checks if the page contains a resume
|
||||
* @return {Boolean} true if page contains resume
|
||||
*/
|
||||
const isResume = () => {
|
||||
if (document.getElementsByTagName('page')[0]) return true;
|
||||
else return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* checks whether font needs to be fixed, and if fixes it
|
||||
*/
|
||||
const checkFont = () => {
|
||||
const page = getPageDOMElement();
|
||||
const resume = getResumeDOMElement(page);
|
||||
const fixFont = function(resume, page) {
|
||||
const elements = getAllDOMElements();
|
||||
const elementsAr = [].slice.call(elements);
|
||||
const newFontSizes = calcNewFontSizes(elementsAr);
|
||||
elementsAr.forEach((el, i) => el.style.fontSize = newFontSizes[i] + 'px');
|
||||
if (contentIsGreaterThanPage(resume, page)) fixFont(resume, page);
|
||||
};
|
||||
if (
|
||||
autoFontEnabled(resume) &&
|
||||
contentIsGreaterThanPage(resume, page)
|
||||
) fixFont(resume, page);
|
||||
};
|
||||
|
||||
/**
|
||||
* fixes resume
|
||||
*/
|
||||
const fixResume = () => {
|
||||
if (!isResume()) return;
|
||||
checkFont();
|
||||
fixBoxShadows();
|
||||
};
|
||||
|
||||
fixResume();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user