Fix github pages styling
This commit is contained in:
unpregnant
parent
639c28695c
commit
f5967a6a54
@ -91,7 +91,7 @@ If shadows may be displayed wrong, please check that the element with a box-shad
|
||||
|
||||
### Icons
|
||||
|
||||
This project contains the [Google Material](https://material.io/icons/) and [fontawesome](http://fontawesome.io/icons/) icon set.
|
||||
This project contains the [Google Material](https://material.io/icons/) and [fontawesome](http://fontawesome.io/icons/) icon sets.
|
||||
|
||||
### Adjusting PDF-generation and page size
|
||||
|
||||
@ -99,7 +99,7 @@ This project contains the [Google Material](https://material.io/icons/) and [fon
|
||||
|
||||
### Adding fonts
|
||||
|
||||
To add a font to the project, search for the npm-module of the desired font, e.g. [roboto-fontface](https://www.npmjs.com/package/roboto-fontface) for font face 'Roboto'. Add dependency to `package.json` with `npm i --save`, e.g. `npm i --save roboto-fontface`.
|
||||
To add a font to the project, search for the npm-module of the desired font, e.g. [roboto-fontface](https://www.npmjs.com/package/roboto-fontface) for 'Roboto'. Add dependency to `package.json` with `npm i --save`, e.g. `npm i --save roboto-fontface`.
|
||||
|
||||
Create a new less file in `/less/fonts`, e.g. 'roboto.less'. `/node_modules` are accessable through localhost:3000. That means if the corresponding woff-file is under `/node_modules/roboto-fontface/anyFont.woff` the source url needs to equal `/roboto-fontface/anyFont.woff`:
|
||||
|
||||
|
||||
@ -76,11 +76,11 @@ var marginBottom = 50; // in px
|
||||
</ol>
|
||||
<p>If shadows may be displayed wrong, please check that the element with a box-shadow has a proper height, width and positioning.</p>
|
||||
<h3 id="icons">Icons</h3>
|
||||
<p>This project contains the <a href="https://material.io/icons/">Google Material</a> and <a href="http://fontawesome.io/icons/">fontawesome</a> icon set. </p>
|
||||
<p>This project contains the <a href="https://material.io/icons/">Google Material</a> and <a href="http://fontawesome.io/icons/">fontawesome</a> icon sets.</p>
|
||||
<h3 id="adjustingpdfgenerationandpagesize">Adjusting PDF-generation and page size</h3>
|
||||
<p><a href="https://github.com/mixu/electroshot">electroshot</a> is used to generate PDFs. <code>convertToPdf()</code> in <code>/src/htmlToPdf.js</code> runs a short bash script for each resume running under <code>localhost:3000/resumes/resume-X</code>. By default the PDF size is A4. For more PDF settings check <a href="https://github.com/mixu/electroshot">mixu/electroshot</a>.</p>
|
||||
<h3 id="addingfonts">Adding fonts</h3>
|
||||
<p>To add a font to the project, search for the npm-module of the desired font, e.g. <a href="https://www.npmjs.com/package/roboto-fontface">roboto-fontface</a> for font face 'Roboto'. Add dependency to <code>package.json</code> with <code>npm i --save</code>, e.g. <code>npm i --save roboto-fontface</code>.</p>
|
||||
<p>To add a font to the project, search for the npm-module of the desired font, e.g. <a href="https://www.npmjs.com/package/roboto-fontface">roboto-fontface</a> for 'Roboto'. Add dependency to <code>package.json</code> with <code>npm i --save</code>, e.g. <code>npm i --save roboto-fontface</code>.</p>
|
||||
<p>Create a new less file in <code>/less/fonts</code>, e.g. 'roboto.less'. <code>/node_modules</code> are accessable through localhost:3000. That means if the corresponding woff-file is under <code>/node_modules/roboto-fontface/anyFont.woff</code> the source url needs to equal <code>/roboto-fontface/anyFont.woff</code>:</p>
|
||||
<pre><code class="less language-less">@font-face {
|
||||
font-family: 'Roboto';
|
||||
|
||||
@ -6,6 +6,3 @@
|
||||
@import "fonts/roboto.less";
|
||||
@import "fonts/roboto-condensed.less";
|
||||
@import "fonts/roboto-slab.less";
|
||||
/*
|
||||
@import (less) "../node_modules/@typopro/web-montserrat/TypoPRO-Montserrat.css";
|
||||
*/
|
||||
|
||||
@ -27,6 +27,8 @@
|
||||
padding-bottom: 30px;
|
||||
color: white;
|
||||
padding-left: 10%;
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
float: left;
|
||||
@ -59,11 +61,17 @@
|
||||
}
|
||||
|
||||
h2,
|
||||
p {
|
||||
h3,
|
||||
p,
|
||||
pre {
|
||||
margin-left: 10%;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: white;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 80%;
|
||||
border: 1px solid #999;
|
||||
|
||||
104
package.json
104
package.json
@ -1,52 +1,56 @@
|
||||
{
|
||||
"name": "best-resume-ever",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"server": "node --harmony-async-await src/server.js",
|
||||
"less": "node --harmony-async-await src/compileLess.js",
|
||||
"readme": "node --harmony-async-await src/renderReadMe.js",
|
||||
"start": "npm run less && npm run server",
|
||||
"pdf": "node --harmony-async-await src/htmlToPdf.js"
|
||||
},
|
||||
"pre-commit": [
|
||||
"less",
|
||||
"readme"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/SalamiMitPizza/beautifulCV.git"
|
||||
},
|
||||
"author": "salamimipizza",
|
||||
"homepage": "https://salamimitpizza.github.io/beautifulCV/",
|
||||
"dependencies": {
|
||||
"@typopro/web-montserrat": "^3.4.9",
|
||||
"buffer-to-string": "^0.1.0",
|
||||
"clean-css": "^4.0.4",
|
||||
"electroshot": "^1.2.0",
|
||||
"express": "^4.14.1",
|
||||
"font-awesome": "^4.7.0",
|
||||
"fs": "0.0.1-security",
|
||||
"hogan-express": "^0.5.2",
|
||||
"html-pdf": "2.1.0",
|
||||
"html-to-pdf": "^0.1.11",
|
||||
"jquery": "^3.1.1",
|
||||
"less": "^2.7.2",
|
||||
"less-plugin-clean-css": "^1.5.1",
|
||||
"local-web-server": "1.2.6",
|
||||
"markdown-to-html": "0.0.13",
|
||||
"material-design-icons": "^3.0.1",
|
||||
"mustache": "^2.3.0",
|
||||
"mustache-express": "^1.2.4",
|
||||
"normalize.css": "^5.0.0",
|
||||
"npm-font-open-sans-condensed": "^1.0.3",
|
||||
"open-sans-fontface": "^1.4.0",
|
||||
"path": "^0.12.7",
|
||||
"pre-commit": "^1.2.2",
|
||||
"raleway-webfont": "^3.0.1",
|
||||
"roboto-fontface": "^0.7.0",
|
||||
"showdown": "^1.6.3",
|
||||
"write": "^0.3.2"
|
||||
}
|
||||
"name": "best-resume-ever",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"server": "node --harmony-async-await src/server.js",
|
||||
"less": "node --harmony-async-await src/compileLess.js",
|
||||
"babel": "babel --presets es2015 src/javascript.js -o public/javascript.js",
|
||||
"readme": "node --harmony-async-await src/renderReadMe.js",
|
||||
"start": "npm run babel && npm run less && npm run server",
|
||||
"pdf": "node --harmony-async-await src/htmlToPdf.js"
|
||||
},
|
||||
"pre-commit": [
|
||||
"less",
|
||||
"readme"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/unpregnant/beautifulCV.git"
|
||||
},
|
||||
"author": "salamimipizza",
|
||||
"homepage": "https://unpregnant.github.io/beautifulCV/",
|
||||
"dependencies": {
|
||||
"@typopro/web-montserrat": "^3.4.9",
|
||||
"babel-cli": "^6.22.2",
|
||||
"babel-core": "^6.22.1",
|
||||
"babel-preset-es2015": "^6.22.0",
|
||||
"buffer-to-string": "^0.1.0",
|
||||
"clean-css": "^4.0.4",
|
||||
"electroshot": "^1.2.0",
|
||||
"express": "^4.14.1",
|
||||
"font-awesome": "^4.7.0",
|
||||
"fs": "0.0.1-security",
|
||||
"hogan-express": "^0.5.2",
|
||||
"html-pdf": "2.1.0",
|
||||
"html-to-pdf": "^0.1.11",
|
||||
"jquery": "^3.1.1",
|
||||
"less": "^2.7.2",
|
||||
"less-plugin-clean-css": "^1.5.1",
|
||||
"local-web-server": "1.2.6",
|
||||
"markdown-to-html": "0.0.13",
|
||||
"material-design-icons": "^3.0.1",
|
||||
"mustache": "^2.3.0",
|
||||
"mustache-express": "^1.2.4",
|
||||
"normalize.css": "^5.0.0",
|
||||
"npm-font-open-sans-condensed": "^1.0.3",
|
||||
"open-sans-fontface": "^1.4.0",
|
||||
"path": "^0.12.7",
|
||||
"pre-commit": "^1.2.2",
|
||||
"raleway-webfont": "^3.0.1",
|
||||
"roboto-fontface": "^0.7.0",
|
||||
"showdown": "^1.6.3",
|
||||
"write": "^0.3.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,147 +1,141 @@
|
||||
'use strict';
|
||||
|
||||
// minimum margin of content to bottom of page
|
||||
var marginBottom = 50;
|
||||
// DOM-element of <page></page>
|
||||
var page;
|
||||
var page = void 0;
|
||||
// all dom elements
|
||||
var elements = void 0;
|
||||
|
||||
/**
|
||||
* gets all DOM-elements on page
|
||||
* @return {HTMLElement[]} DOM-elements
|
||||
*/
|
||||
function getAllDOMElements() {
|
||||
return document.getElementsByTagName('*');
|
||||
}
|
||||
var getAllDOMElements = function getAllDOMElements() {
|
||||
elements = document.getElementsByTagName('*');
|
||||
};
|
||||
|
||||
/**
|
||||
* gets DOM-element of #resumeX
|
||||
* @return {HTMLElement}
|
||||
*/
|
||||
function getResumeDOMElement() {
|
||||
var getResumeDOMElement = function getResumeDOMElement() {
|
||||
return page.children[0];
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* sets variable 'page' to DOM-element of <page></page>
|
||||
* sets letiable 'page' to DOM-element of <page></page>
|
||||
*/
|
||||
function setPageDOMElement() {
|
||||
var setPageDOMElement = function setPageDOMElement() {
|
||||
page = document.getElementsByTagName('page')[0];
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* checks whether font needs to be fixed, and if fixes it
|
||||
*/
|
||||
function checkFont() {
|
||||
var checkFont = function checkFont() {
|
||||
var resume = getResumeDOMElement();
|
||||
if (contentIsGreaterThanPage(resume)) fixFont();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* checks whether content is greater than page
|
||||
* @param {HTMLElement} resume
|
||||
* @return {Boolean} false if content fits to page
|
||||
* @return {boolean} false if content fits to page
|
||||
*/
|
||||
function contentIsGreaterThanPage(resume) {
|
||||
var contentIsGreaterThanPage = function contentIsGreaterThanPage(resume) {
|
||||
var pageHeight = page.offsetHeight;
|
||||
var resumeHeight = resume.offsetHeight + marginBottom;
|
||||
if (pageHeight < resumeHeight) return true;
|
||||
else return false;
|
||||
}
|
||||
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');
|
||||
var getFontSizeOfElement = function getFontSizeOfElement(element) {
|
||||
var style = window.getComputedStyle(element, null).getPropertyValue('font-size');
|
||||
return parseFloat(style);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* sets font size of DOM-element
|
||||
* @param {HTMLElement} element
|
||||
* @param {Number} fontSize
|
||||
* @param {number} fontSize
|
||||
*/
|
||||
function setFontSizeOfElement(element, fontSize) {
|
||||
var setFontSizeOfElement = function setFontSizeOfElement(element, fontSize) {
|
||||
element.style.fontSize = fontSize + 'px';
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* decreases font size of all DOM-elements
|
||||
*/
|
||||
function decreaseFontSizes() {
|
||||
var elements = getAllDOMElements();
|
||||
var current;
|
||||
var decreaseFontSizes = function decreaseFontSizes() {
|
||||
var current = void 0,
|
||||
newFontSize = void 0;
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
current = elements[i];
|
||||
newFontSize = getFontSizeOfElement(current) * 0.99;
|
||||
setFontSizeOfElement(current, newFontSize);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* decreases font size until content fits to page
|
||||
*/
|
||||
function fixFont() {
|
||||
var fixFont = function fixFont() {
|
||||
decreaseFontSizes();
|
||||
var resume = getResumeDOMElement();
|
||||
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'
|
||||
* @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 '';
|
||||
}
|
||||
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 {{}}
|
||||
*/
|
||||
function getAbsolutePositionOfElement(element) {
|
||||
var getAbsolutePositionOfElement = function getAbsolutePositionOfElement(element) {
|
||||
return {
|
||||
top: element.getBoundingClientRect().top,
|
||||
left: element.getBoundingClientRect().left
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* removes box shadow from element
|
||||
* @param {HTMLElement} element
|
||||
*/
|
||||
function removeBoxShadowOfElement(element) {
|
||||
var removeBoxShadowOfElement = 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');
|
||||
}
|
||||
var getBorderRadiusOfElement = 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'
|
||||
* @param {string} boxShadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px'
|
||||
*/
|
||||
function addNewBoxShadow(element, position, boxShadow) {
|
||||
var addNewBoxShadow = function addNewBoxShadow(element, position, boxShadow) {
|
||||
var div = document.createElement('div');
|
||||
div.style.height = element.offsetHeight;
|
||||
div.style.width = element.offsetWidth;
|
||||
@ -153,26 +147,26 @@ function addNewBoxShadow(element, position, boxShadow) {
|
||||
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'
|
||||
* @param {string} boxShadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px'
|
||||
*/
|
||||
function fixBoxShadow(element, boxShadow) {
|
||||
var fixBoxShadow = 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 getElementsWithShadows = function getElementsWithShadows() {
|
||||
var current = void 0,
|
||||
boxShadow = void 0;
|
||||
var ret = [];
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
current = elements[i];
|
||||
@ -183,19 +177,29 @@ function getElementsWithShadows() {
|
||||
});
|
||||
}
|
||||
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 fixBoxShadows = function fixBoxShadows() {
|
||||
var elementsWithShadow = getElementsWithShadows();
|
||||
for (var i = 0; i < elementsWithShadow.length; i++) {
|
||||
fixBoxShadow(elementsWithShadow[i].element, elementsWithShadow[i].shadow);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
fixBoxShadows();
|
||||
setPageDOMElement();
|
||||
checkFont();
|
||||
var isResume = function isResume() {
|
||||
if (document.getElementsByTagName('page')[0]) return true;else return false;
|
||||
};
|
||||
|
||||
var fixResume = function fixResume() {
|
||||
if (!isResume()) return;
|
||||
getAllDOMElements();
|
||||
fixBoxShadows();
|
||||
setPageDOMElement();
|
||||
checkFont();
|
||||
};
|
||||
|
||||
fixResume();
|
||||
|
||||
2
public/style.min.css
vendored
2
public/style.min.css
vendored
File diff suppressed because one or more lines are too long
212
src/javascript.js
Normal file
212
src/javascript.js
Normal file
@ -0,0 +1,212 @@
|
||||
// minimum margin of content to bottom of page
|
||||
const marginBottom = 50;
|
||||
// DOM-element of <page></page>
|
||||
let page;
|
||||
// all dom elements
|
||||
let elements;
|
||||
|
||||
/**
|
||||
* gets all DOM-elements on page
|
||||
* @return {HTMLElement[]} DOM-elements
|
||||
*/
|
||||
const getAllDOMElements = () => {
|
||||
elements = document.getElementsByTagName('*');
|
||||
}
|
||||
|
||||
/**
|
||||
* gets DOM-element of #resumeX
|
||||
* @return {HTMLElement}
|
||||
*/
|
||||
const getResumeDOMElement = () => {
|
||||
return page.children[0];
|
||||
}
|
||||
|
||||
/**
|
||||
* sets letiable 'page' to DOM-element of <page></page>
|
||||
*/
|
||||
const setPageDOMElement = () => {
|
||||
page = document.getElementsByTagName('page')[0];
|
||||
}
|
||||
|
||||
/**
|
||||
* checks whether font needs to be fixed, and if fixes it
|
||||
*/
|
||||
const checkFont = () => {
|
||||
const resume = getResumeDOMElement();
|
||||
if (contentIsGreaterThanPage(resume)) fixFont();
|
||||
}
|
||||
|
||||
/**
|
||||
* checks whether content is greater than page
|
||||
* @param {HTMLElement} resume
|
||||
* @return {boolean} false if content fits to page
|
||||
*/
|
||||
const contentIsGreaterThanPage = resume => {
|
||||
const pageHeight = page.offsetHeight;
|
||||
const resumeHeight = resume.offsetHeight + marginBottom;
|
||||
if (pageHeight < resumeHeight) return true;
|
||||
else return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* gets font size of DOM-elemnt
|
||||
* @param {HTMLElement} element
|
||||
* @return {number} font size of element
|
||||
*/
|
||||
const getFontSizeOfElement = element => {
|
||||
const style = window
|
||||
.getComputedStyle(element, null)
|
||||
.getPropertyValue('font-size');
|
||||
return parseFloat(style);
|
||||
}
|
||||
|
||||
/**
|
||||
* sets font size of DOM-element
|
||||
* @param {HTMLElement} element
|
||||
* @param {number} fontSize
|
||||
*/
|
||||
const setFontSizeOfElement = (element, fontSize) => {
|
||||
element.style.fontSize = fontSize + 'px';
|
||||
}
|
||||
|
||||
/**
|
||||
* decreases font size of all DOM-elements
|
||||
*/
|
||||
const decreaseFontSizes = () => {
|
||||
let current, newFontSize;
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
current = elements[i];
|
||||
newFontSize = getFontSizeOfElement(current) * 0.99;
|
||||
setFontSizeOfElement(current, newFontSize);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* decreases font size until content fits to page
|
||||
*/
|
||||
const fixFont = () => {
|
||||
decreaseFontSizes();
|
||||
const resume = getResumeDOMElement();
|
||||
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'
|
||||
*/
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* removes box shadow from element
|
||||
* @param {HTMLElement} element
|
||||
*/
|
||||
const removeBoxShadowOfElement = element => {
|
||||
element.style.boxShadow = 'none';
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 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 {{}} position e.g. { left: 10, top: 100}
|
||||
* @param {string} boxShadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px'
|
||||
*/
|
||||
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);
|
||||
}
|
||||
|
||||
/**
|
||||
* fixes box shadow of element
|
||||
* @param {HTMLElement} element
|
||||
* @param {string} boxShadow e.g. 'rgba(0, 0, 0, 0.137255) 0px 2px 2px 0px'
|
||||
*/
|
||||
const fixBoxShadow = (element, boxShadow) => {
|
||||
const position = getAbsolutePositionOfElement(element);
|
||||
removeBoxShadowOfElement(element);
|
||||
addNewBoxShadow(element, position, boxShadow);
|
||||
}
|
||||
|
||||
/**
|
||||
* gets all elements with shadows
|
||||
* @return {HTMLElement[]} elements with shadows
|
||||
*/
|
||||
const getElementsWithShadows = () => {
|
||||
let current, boxShadow;
|
||||
let ret = [];
|
||||
for (let 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
|
||||
*/
|
||||
const fixBoxShadows = () => {
|
||||
const elementsWithShadow = getElementsWithShadows();
|
||||
for (let i = 0; i < elementsWithShadow.length; i++) {
|
||||
fixBoxShadow(elementsWithShadow[i].element, elementsWithShadow[i].shadow);
|
||||
}
|
||||
}
|
||||
|
||||
const isResume = () => {
|
||||
if (document.getElementsByTagName('page')[0]) return true;
|
||||
else return false;
|
||||
}
|
||||
|
||||
const fixResume = () => {
|
||||
if (!isResume()) return;
|
||||
getAllDOMElements();
|
||||
fixBoxShadows();
|
||||
setPageDOMElement();
|
||||
checkFont();
|
||||
}
|
||||
|
||||
fixResume();
|
||||
Loading…
x
Reference in New Issue
Block a user