Skip to content

Commit 5b94555

Browse files
leviaristaleviarista
committed
Using snapdom
1 parent bc22779 commit 5b94555

File tree

10 files changed

+75
-391
lines changed

10 files changed

+75
-391
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<button class="tablinks" data-name="main-section" id="defaultOpenTag">Main</button>
1919
<button class="tablinks" data-name="background-section">Background</button>
2020
<button class="tablinks" data-name="decorations-section">Decorations</button>
21-
<!-- <button class="tablinks" data-name="test-fonts-section">Test Fonts</button> -->
21+
<button class="tablinks" data-name="test-fonts-section" style="display: none;">Test Fonts (local)</button>
2222
</div>
2323

2424
<div class="toolbox-tools scrollable">

‎js/main.js‎

Lines changed: 29 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { setFontValues } from './utils/fonts';
22
import { getRandomTheme } from './utils/themes';
3-
import * as htmlToImage from 'html-to-image';
4-
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';
5-
import domtoimage from 'dom-to-image';
3+
import { snapdom } from '@zumer/snapdom';
64

75
/* ************** Elements ************** */
86

@@ -30,136 +28,52 @@ document.querySelector('.how-to-section video.demo').onended = (e) => e.target.c
3028
/* ************** Header image buttons ************** */
3129

3230
// Download button
33-
// document.querySelector('.download-button')
34-
// .addEventListener('click', () => {
35-
// html2canvas(
36-
// document.querySelector('#github-header-image'),
37-
// {
38-
// // removeContainer: true,
39-
// // backgroundColor: null,
40-
// letterRendering: true,
41-
// // logging: true,
42-
// // useCORS: true,
43-
// foreignObjectRendering: false,
44-
// // onclone: (document, element) => {
45-
// // // const title = element.querySelector('.title').style.letterSpacing = '0.10rem';
46-
// // const title = element.querySelector('.title')
47-
// // if (getComputedStyle(title).getPropertyValue("font-family") === 'Ubuntu') {
48-
// // title.style.letterSpacing = '1px';
49-
// // }
50-
// // if (getComputedStyle(title).getPropertyValue("font-family") === 'Martel') {
51-
// // title.style.letterSpacing = '2px';
52-
// // }
53-
// // if (getComputedStyle(title).getPropertyValue("font-family") === 'MavenPro') {
54-
// // title.style.letterSpacing = '0.2rem';
55-
// // }
56-
// // // title.style.letterSpacing = '2px';
57-
// // // console.log("🚀 ~ title:", title)
58-
// // // const title = element.querySelector('.subtitle').style.style.letterSpacing = '5px';
59-
// // }
60-
// // widtH: (headerImage.clientWidth * 2),
61-
// // height: (headerImage.style.height * 2)
62-
// })
63-
// .then(function (canvas) {
64-
// // for testing
65-
// const container = document.querySelector('.header-image-container')
66-
67-
// const prevImage = container.children[1];
68-
// if (prevImage) container.removeChild(prevImage);
69-
70-
// container.appendChild(canvas);
71-
72-
// // let imageURL = canvas.toDataURL("image/png");
73-
// // let a = document.createElement("a");
74-
// // a.href = imageURL;
75-
// // a.download = 'github-header-image';
76-
// // a.click();
77-
// });
78-
// })
79-
80-
// document.querySelector('.download-button')
81-
// .addEventListener('click', () => {
82-
// htmlToImage
83-
// .toPng(document.querySelector('#github-header-image'))
84-
// .then((dataUrl) => {
85-
// const img = new Image();
86-
// img.src = dataUrl;
87-
// img.width = 900
88-
// document.querySelector('.header-image-container').appendChild(img);
89-
// })
90-
// .catch((err) => {
91-
// console.error('oops, something went wrong!', err);
92-
// });
93-
// })
94-
9531
document.querySelector('.download-button')
9632
.addEventListener('click', async () => {
9733
document.querySelector('.download-button img').src = './images/icons/loading.gif'
9834

9935
try {
10036
const el = document.querySelector('#github-header-image');
101-
102-
if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
103-
console.log('Running on localhost! Appending image instead of downloading ...');
104-
const png = await snapdom.toPng(el, { embedFonts: true });
105-
const container = document.querySelector('.header-image-container')
106-
107-
const prevImage = container.children[1];
108-
if (prevImage) container.removeChild(prevImage);
109-
110-
container.appendChild(png);
111-
} else {
112-
await snapdom.download(el, {
113-
embedFonts: true,
114-
format: 'png',
115-
filename: 'github-header-banner',
116-
scale: 2
117-
});
118-
}
37+
await snapdom.download(el, {
38+
embedFonts: true,
39+
format: 'png',
40+
filename: 'github-header-banner',
41+
scale: 2
42+
});
11943
document.querySelector('.download-button img').src = './images/icons/download.svg'
12044
} catch (error) {
12145
console.error('Image capture or download failed:', error);
12246
}
12347
})
12448

125-
// document.addEventListener("DOMContentLoaded", (event) => {
126-
// const displayButton = document.querySelector('.display-button');
127-
128-
// if (displayButton && (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')) {
129-
// displayButton.style.display = "block"; // or "flex", "grid", etc.
130-
// console.log('Running on localhost! display appending image option ...');
49+
document.addEventListener("DOMContentLoaded", (event) => {
50+
const displayButton = document.querySelector('.display-button');
51+
const testFontsTab = document.querySelector('.tablinks[data-name="test-fonts-section"]');
13152

132-
// document.querySelector('.display-button')
133-
// .addEventListener('click', async () => {
134-
// const el = document.querySelector('#github-header-image');
135-
// const png = await snapdom.toPng(el, { embedFonts: true });
136-
// const container = document.querySelector('.header-image-container')
53+
if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
54+
if (displayButton) {
13755

138-
// const prevImage = container.children[1];
139-
// if (prevImage) container.removeChild(prevImage);
56+
displayButton.style.display = "block"; // or "flex", "grid", etc.
57+
console.log('Running on localhost! display appending image option ...');
14058

141-
// container.appendChild(png);
142-
// })
143-
// }
59+
document.querySelector('.display-button')
60+
.addEventListener('click', async () => {
61+
const el = document.querySelector('#github-header-image');
62+
const png = await snapdom.toPng(el, { embedFonts: true });
63+
const container = document.querySelector('.header-image-container')
14464

145-
// });
65+
const prevImage = container.children[1];
66+
if (prevImage) container.removeChild(prevImage);
14667

68+
container.appendChild(png);
69+
})
70+
}
71+
if (testFontsTab) {
72+
testFontsTab.style.display = "block"
73+
}
74+
}
14775

148-
// document.querySelector('.download-button')
149-
// .addEventListener('click', () => {
150-
// var node = document.getElementById('github-header-image');
151-
152-
// domtoimage.toPng(node)
153-
// .then(function (dataUrl) {
154-
// console.log("🚀 ~ dataUrl:", dataUrl)
155-
// var img = new Image();
156-
// img.src = dataUrl;
157-
// document.querySelector('.header-image-container').appendChild(img);
158-
// })
159-
// .catch(function (error) {
160-
// console.error('oops, something went wrong!', error);
161-
// });
162-
// })
76+
});
16377

16478
// Toogle Dark Mode button
16579
document.querySelector('.dark-mode-button')

‎js/utils/fonts.js‎

Lines changed: 2 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -33,130 +33,9 @@ function setFontValues() {
3333
let subtitleFontSelect = toolbox.querySelector('.font-selectors-container #subtitle-font-selector');
3434

3535
document.fonts.ready.then(() => {
36-
const titleFontName = titleFontSelect.value;
37-
const titleFontUrl = './fonts/' + getFontUrl(titleFontSelect.value);
38-
let titleFont = getFont(titleFontSelect.value)
39-
titleFont.load().then(function (loadedFont) {
40-
document.fonts.add(loadedFont)
41-
// injectFontFaceRule(titleFontName, titleFontUrl);
42-
43-
console.log('Font loaded and added');
44-
title.style.fontFamily = `"${titleFontSelect.value}"`;
45-
}).catch(function (error) {
46-
console.log('Failed to load font: ' + error)
47-
})
48-
49-
const subTitleFontName = subtitleFontSelect.value;
50-
const subTitleFontUrl = './fonts/' + getFontUrl(subtitleFontSelect.value);
51-
let subTitleFont = getFont(subtitleFontSelect.value)
52-
subTitleFont.load().then(function (loadedFont) {
53-
document.fonts.add(loadedFont)
54-
// injectFontFaceRule(subTitleFontName, subTitleFontUrl);
55-
56-
console.log('Font loaded and added');
57-
subtitle.style.fontFamily = `"${subtitleFontSelect.value}"`;
58-
}).catch(function (error) {
59-
console.log('Failed to load font: ' + error)
60-
})
36+
title.style.fontFamily = `"${titleFontSelect.value}"`;
37+
subtitle.style.fontFamily = `"${subtitleFontSelect.value}"`;
6138
});
6239
}
6340

64-
function injectFontFaceRule(fontName, fontUrl) {
65-
const style = document.createElement('style');
66-
style.textContent = `
67-
@font-face {
68-
font-family: '${fontName}';
69-
src: url('${fontUrl}');
70-
}
71-
`;
72-
document.head.appendChild(style);
73-
}
74-
75-
function getFontUrl(fontName) {
76-
switch (fontName) {
77-
case 'Kalam':
78-
return 'Kalam-Regular.ttf")';
79-
case 'Poppins':
80-
return 'Poppins-Regular.ttf';
81-
case 'Athiti':
82-
return 'Athiti-Regular.ttf';
83-
case 'MavenPro':
84-
return 'MavenPro-Regular.ttf';
85-
case 'Ubuntu':
86-
return 'Ubuntu-Regular.ttf';
87-
case 'IstokWeb':
88-
return 'IstokWeb-Regular.ttf';
89-
case 'Courgette':
90-
return 'Courgette-Regular.ttf';
91-
case 'Quattrocento':
92-
return 'Quattrocento-Regular.ttf';
93-
case 'DellaRespira':
94-
return 'DellaRespira-Regular.ttf';
95-
case 'Lato':
96-
return 'Lato-Regular.ttf';
97-
case 'Martel':
98-
return 'Martel-Regular.ttf';
99-
case 'Lancelot':
100-
return 'Lancelot-Regular.ttf';
101-
case 'Playball':
102-
return 'Playball-Regular.ttf';
103-
case 'LifeSavers':
104-
return 'LifeSavers-Regular.ttf';
105-
default:
106-
return 'Kalam-Regular.ttf';
107-
}
108-
}
109-
110-
function getFont(fontName) {
111-
let newFont = null;
112-
if (fontName === 'Kalam') {
113-
newFont = new FontFace('Kalam', 'url("./fonts/Kalam-Regular.ttf")');
114-
newFont._snapdomSrc = "./fonts/Kalam-Regular.ttf";
115-
} else if (fontName === 'Poppins') {
116-
newFont = new FontFace('Poppins', 'url("./fonts/Poppins-Regular.ttf")');
117-
newFont._snapdomSrc = "./fonts/Poppins-Regular.ttf";
118-
} else if (fontName === 'Athiti') {
119-
newFont = new FontFace('Athiti', 'url("./fonts/Athiti-Regular.ttf")');
120-
newFont._snapdomSrc = "./fonts/Athiti-Regular.ttf";
121-
} else if (fontName === 'MavenPro') {
122-
newFont = new FontFace('MavenPro', 'url("./fonts/MavenPro-Regular.ttf")');
123-
newFont._snapdomSrc = "./fonts/MavenPro-Regular.ttf";
124-
} else if (fontName === 'Ubuntu') {
125-
newFont = new FontFace('Ubuntu', 'url("./fonts/Ubuntu-Regular.ttf")');
126-
newFont._snapdomSrc = "./fonts/Ubuntu-Regular.ttf";
127-
} else if (fontName === 'IstokWeb') {
128-
newFont = new FontFace('IstokWeb', 'url("./fonts/IstokWeb-Regular.ttf")');
129-
newFont._snapdomSrc = "./fonts/IstokWeb-Regular.ttf";
130-
} else if (fontName === 'Courgette') {
131-
newFont = new FontFace('Courgette', 'url("./fonts/Courgette-Regular.ttf")');
132-
newFont._snapdomSrc = "./fonts/Courgette-Regular.ttf";
133-
} else if (fontName === 'Quattrocento') {
134-
newFont = new FontFace('Quattrocento', 'url("./fonts/Quattrocento-Regular.ttf")');
135-
newFont._snapdomSrc = "./fonts/Quattrocento-Regular.ttf";
136-
} else if (fontName === 'DellaRespira') {
137-
newFont = new FontFace('DellaRespira', 'url("./fonts/DellaRespira-Regular.ttf")');
138-
newFont._snapdomSrc = "./fonts/DellaRespira-Regular.ttf";
139-
} else if (fontName === 'Lato') {
140-
newFont = new FontFace('Lato', 'url("./fonts/Lato-Regular.ttf")');
141-
newFont._snapdomSrc = "./fonts/Lato-Regular.ttf";
142-
} else if (fontName === 'Martel') {
143-
newFont = new FontFace('Martel', 'url("./fonts/Martel-Regular.ttf")');
144-
newFont._snapdomSrc = "./fonts/Martel-Regular.ttf";
145-
} else if (fontName === 'Lancelot') {
146-
newFont = new FontFace('Lancelot', 'url("./fonts/Lancelot-Regular.ttf")');
147-
newFont._snapdomSrc = "./fonts/Lancelot-Regular.ttf";
148-
} else if (fontName === 'Playball') {
149-
newFont = new FontFace('Playball', 'url("./fonts/Playball-Regular.ttf")');
150-
newFont._snapdomSrc = "./fonts/Playball-Regular.ttf";
151-
} else if (fontName === 'LifeSavers') {
152-
newFont = new FontFace('LifeSavers', 'url("./fonts/LifeSavers-Regular.ttf")');
153-
newFont._snapdomSrc = "./fonts/LifeSavers-Regular.ttf";
154-
} else {
155-
// default case
156-
newFont = new FontFace('Kalam', 'url("./fonts/Kalam-Regular.ttf")');
157-
newFont._snapdomSrc = "./fonts/Kalam-Regular.ttf";
158-
}
159-
return newFont;
160-
}
161-
16241
export { setFontValues };

0 commit comments

Comments
 (0)