118 lines
3.3 KiB
JavaScript
118 lines
3.3 KiB
JavaScript
/** @type {HTMLElement} */
|
|
let beforeImage = null;
|
|
|
|
/** @type {HTMLImageElement} */
|
|
let imageHolder = null;
|
|
|
|
/** @type {HTMLInputElement} */
|
|
let inputText = null;
|
|
|
|
/** @type {HTMLInputElement} */
|
|
let inputFontSize = null;
|
|
|
|
/** @type {HTMLInputElement} */
|
|
let inputColor = null;
|
|
|
|
/** @type {HTMLInputElement} */
|
|
let inputUnsplashID = null;
|
|
|
|
/**
|
|
*
|
|
* @param {Object} data
|
|
* @returns {String}
|
|
*/
|
|
const encodeQueryData = function (data) {
|
|
const ret = [];
|
|
for (let d in data) {
|
|
ret.push(encodeURIComponent(d) + "=" + encodeURIComponent(data[d]));
|
|
}
|
|
return ret.join("&");
|
|
}
|
|
|
|
const setCurrentWizardPage = function(callee) {
|
|
const current = parseInt(callee.getAttribute("wizardCurrent"));
|
|
const next = parseInt(callee.getAttribute("wizardNext"));
|
|
|
|
console.log(!inputText.validity.valid)
|
|
if (current === 1 && !inputText.validity.valid) {
|
|
inputText.reportValidity();
|
|
return;
|
|
}
|
|
if (current === 2 && (!inputFontSize.validity.valid || !inputColor.validity.valid)) {
|
|
if (!inputFontSize.validity.valid) {
|
|
inputFontSize.reportValidity();
|
|
}
|
|
if (!inputColor.validity.valid) {
|
|
inputColor.reportValidity();
|
|
}
|
|
return;
|
|
}
|
|
if (current === 3 && !inputUnsplashID.validity.valid) {
|
|
inputUnsplashID.reportValidity();
|
|
return;
|
|
}
|
|
|
|
document.querySelectorAll("[wizardPage]").forEach(page => {
|
|
const pageIdx = parseInt(page.getAttribute("wizardPage"));
|
|
page.hidden = pageIdx !== next;
|
|
});
|
|
|
|
if (next === 4) {
|
|
loadImage();
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
*
|
|
* @param {String} text
|
|
* @param {Number} fontSize
|
|
* @param {Number} fontWeight
|
|
* @param {String} color
|
|
* @param {String?} backgroundImage
|
|
* @returns {String}
|
|
*/
|
|
const endpointTpl = (text, fontSize, color="#FFFFFF", backgroundImageId="random") => "https://img.bruzu.com/?" + encodeQueryData({
|
|
backgroundImage: `https://source.unsplash.com/${backgroundImageId}/500x500?hash=${Date.now()}`,
|
|
"a.text": text,
|
|
"a.color": color,
|
|
"a.fontFamily": "Poppins",
|
|
"a.fontSize": fontSize,
|
|
"a.width": 450,
|
|
});
|
|
|
|
const loadImage = async function () {
|
|
const text = inputText.value;
|
|
const fontSize = parseInt(inputFontSize.value);
|
|
const color = inputColor.value;
|
|
const backgroundImageId = inputUnsplashID.value;
|
|
|
|
const imageUri = endpointTpl(text, fontSize, color, backgroundImageId);
|
|
try {
|
|
const resp = await fetch(imageUri);
|
|
const imageBlob = await resp.blob();
|
|
const imageObjectURL = URL.createObjectURL(imageBlob);
|
|
|
|
beforeImage.hidden = true
|
|
imageHolder.children[0].src = imageObjectURL;
|
|
imageHolder.hidden = false;
|
|
|
|
} catch (e) {
|
|
alert(`Произошла ошибка: ${e}`);
|
|
location.reload();
|
|
}
|
|
}
|
|
|
|
|
|
const init = function () {
|
|
beforeImage = document.getElementById("beforeImage");
|
|
imageHolder = document.getElementById("imageHolder");
|
|
inputText = document.getElementById("inputText");
|
|
inputFontSize = document.getElementById("inputFontSize");
|
|
inputColor = document.getElementById("inputColor");
|
|
inputUnsplashID = document.getElementById("inputUnsplashID");
|
|
|
|
document.querySelectorAll("[wizardNext]").forEach(e => e.addEventListener("click", setCurrentWizardPage.bind(window, e)))
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", init);
|