Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-14 08:42:08 +10:00
Code Issues Packages Projects Releases Wiki Activity

connecting actions to page controller

Browse Source
This commit is contained in:
Amruth Pillai
2020-04-01 15:02:26 +05:30
parent 417407024e
commit a7839a307e
5 changed files with 70 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/RightSidebar/tabs/Actions.js
View File

@ -2,12 +2,10 @@
/* eslint-disable jsx-a11y/anchor-has-content */
/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { useRef, useContext } from 'react';
import { useTranslation, Trans } from 'react-i18next';
import html2canvas from 'html2canvas';
import * as jsPDF from 'jspdf';
import { useTranslation } from 'react-i18next';
import PageContext from '../../../context/PageContext';
import { importJson } from '../../../utils';
import { importJson, saveAsPdf } from '../../../utils';
const ActionsTab = ({ data, theme, dispatch }) => {
const pageContext = useContext(PageContext);
@ -24,39 +22,6 @@ const ActionsTab = ({ data, theme, dispatch }) => {
dlAnchor.click();
};
const printAsPdf = () => {
panZoomRef.current.autoCenter(1);
panZoomRef.current.reset();
setTimeout(() => {
html2canvas(pageRef.current, {
scale: 5,
useCORS: true,
allowTaint: true,
}).then(canvas => {
const image = canvas.toDataURL('image/jpeg', 1.0);
const doc = new jsPDF('p', 'mm', 'a4');
const pageWidth = doc.internal.pageSize.getWidth();
const pageHeight = doc.internal.pageSize.getHeight();
const widthRatio = pageWidth / canvas.width;
const heightRatio = pageHeight / canvas.height;
const ratio = widthRatio > heightRatio ? heightRatio : widthRatio;
const canvasWidth = canvas.width * ratio;
const canvasHeight = canvas.height * ratio;
const marginX = (pageWidth - canvasWidth) / 2;
const marginY = (pageHeight - canvasHeight) / 2;
panZoomRef.current.autoCenter(0.7);
doc.addImage(image, 'JPEG', marginX, marginY, canvasWidth, canvasHeight, null, 'SLOW');
doc.save(`RxResume_${Date.now()}.pdf`);
});
}, 250);
};
const loadDemoData = () => {
dispatch({ type: 'load_demo_data' });
dispatch({ type: 'save_data' });
@ -114,39 +79,19 @@ const ActionsTab = ({ data, theme, dispatch }) => {
<hr className="my-6" />
<div className="shadow text-center p-5">
<h6 className="font-bold text-sm mb-2">{t('actions.printResume.heading')}</h6>
<h6 className="font-bold text-sm mb-2">{t('actions.downloadResume.heading')}</h6>
<div className="text-sm">{t('actions.downloadResume.body')}</div>
<div className="text-sm">
<Trans t={t} i18nKey="actions.printResume.body">
You can click on the button below to generate a PDF instantly. Alternatively, you can
also use <pre className="inline font-bold">Cmd/Ctrl + P</pre> but it would have
different effects.
</Trans>
</div>
<div className="mt-1 grid grid-cols-2 col-gap-6">
<button
type="button"
onClick={printAsPdf}
className="mt-4 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-5 rounded"
>
<div className="flex justify-center items-center">
<i className="material-icons mr-2 font-bold text-base">import_export</i>
<span className="text-sm">{t('actions.printResume.buttons.export')}</span>
</div>
</button>
<button
type="button"
onClick={printAsPdf}
className="mt-4 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-5 rounded"
>
<div className="flex justify-center items-center">
<i className="material-icons mr-2 font-bold text-base">print</i>
<span className="text-sm">{t('actions.printResume.buttons.print')}</span>
</div>
</button>
</div>
<button
type="button"
onClick={() => saveAsPdf(pageRef, panZoomRef)}
className="mt-4 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-5 rounded"
>
<div className="flex justify-center items-center">
<i className="material-icons mr-2 font-bold text-base">save</i>
<span className="text-sm">{t('actions.downloadResume.buttons.saveAsPdf')}</span>
</div>
</button>
</div>
<hr className="my-6" />

9
src/i18n/source/rightSidebar/actions.json
View File

@ -9,12 +9,11 @@
"export": "Export"
}
},
"printResume": {
"heading": "Print Your Resume",
"body": "You can click on the button below to generate a PDF instantly. Alternatively, you can also use <1>Cmd/Ctrl + P</1> but it would have different effects.",
"downloadResume": {
"heading": "Download Resume",
"body": "You can click on the button below to download a PDF version of your resume instantly. For best results, please use the latest version of Google Chrome.",
"buttons": {
"export": "Export",
"print": "Print"
"saveAsPdf": "Save as PDF"
}
},
"loadDemoData": {

17
src/shared/PageController.js
View File

@ -1,9 +1,10 @@
import React, { useContext } from 'react';
import PageContext from '../context/PageContext';
import { saveAsPdf } from '../utils';
const PageController = () => {
const pageContext = useContext(PageContext);
const { panZoomRef } = pageContext;
const { pageRef, panZoomRef } = pageContext;
const zoomIn = () => panZoomRef.current.zoomIn(2);
const zoomOut = () => panZoomRef.current.zoomOut(2);
@ -29,15 +30,23 @@ const PageController = () => {
<div className="text-gray-400 p-3">|</div>
<div className="p-3 hover:bg-gray-200 cursor-pointer flex">
<div
className="p-3 hover:bg-gray-200 cursor-pointer flex"
onClick={() => saveAsPdf(pageRef, panZoomRef)}
>
<i className="material-icons">save</i>
</div>
<div className="text-gray-400 p-3">|</div>
<div className="p-3 hover:bg-gray-200 cursor-pointer flex">
<a
className="p-3 hover:bg-gray-200 cursor-pointer flex"
href="https://docs.rxresu.me/"
target="_blank"
rel="noopener noreferrer"
>
<i className="material-icons">help_outline</i>
</div>
</a>
</div>
</div>
);

2
src/templates/gengar/Gengar.js
View File

@ -117,7 +117,7 @@ const Gengar = () => {
<div key={x.title} className="mb-3">
<h6 className="font-semibold">{x.title}</h6>
<p className="text-xs">{x.subtitle}</p>
<ReactMarkdown className="mt-2 text-sm break-words" source={x.description} />
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
</div>
);

39
src/utils/index.js
View File

@ -1,3 +1,7 @@
/* eslint-disable new-cap */
import html2canvas from 'html2canvas';
import * as jsPDF from 'jspdf';
const move = (array, element, delta) => {
const index = array.indexOf(element);
const newIndex = index + delta;
@ -94,13 +98,45 @@ const importJson = (event, dispatch) => {
const fr = new FileReader();
fr.addEventListener('load', () => {
const importedObject = JSON.parse(fr.result);
console.log(importedObject);
dispatch({ type: 'import_data', payload: importedObject });
dispatch({ type: 'save_data' });
});
fr.readAsText(event.target.files[0]);
};
const saveAsPdf = (pageRef, panZoomRef) => {
panZoomRef.current.autoCenter(1);
panZoomRef.current.reset();
setTimeout(() => {
html2canvas(pageRef.current, {
scale: 5,
useCORS: true,
allowTaint: true,
}).then(canvas => {
const image = canvas.toDataURL('image/jpeg', 1.0);
const doc = new jsPDF('p', 'mm', 'a4');
const pageWidth = doc.internal.pageSize.getWidth();
const pageHeight = doc.internal.pageSize.getHeight();
const widthRatio = pageWidth / canvas.width;
const heightRatio = pageHeight / canvas.height;
const ratio = widthRatio > heightRatio ? heightRatio : widthRatio;
const canvasWidth = canvas.width * ratio;
const canvasHeight = canvas.height * ratio;
const marginX = (pageWidth - canvasWidth) / 2;
const marginY = (pageHeight - canvasHeight) / 2;
panZoomRef.current.autoCenter(0.7);
doc.addImage(image, 'JPEG', marginX, marginY, canvasWidth, canvasHeight, null, 'SLOW');
doc.save(`RxResume_${Date.now()}.pdf`);
});
}, 250);
};
export {
move,
hexToRgb,
@ -111,4 +147,5 @@ export {
moveItemUp,
moveItemDown,
importJson,
saveAsPdf,
};