diff options
Diffstat (limited to 'public/projects/js-small-apps/css-border-previewer/app.js')
| -rw-r--r-- | public/projects/js-small-apps/css-border-previewer/app.js | 847 |
1 files changed, 847 insertions, 0 deletions
diff --git a/public/projects/js-small-apps/css-border-previewer/app.js b/public/projects/js-small-apps/css-border-previewer/app.js new file mode 100644 index 0000000..583703d --- /dev/null +++ b/public/projects/js-small-apps/css-border-previewer/app.js @@ -0,0 +1,847 @@ +/** + * Retrieve the border color property name depending on direction. + * @param {String} direction - Either `top`, `right`, `left` or `bottom`. + * @returns {String} The CSS property name. + */ +function getBorderColorProperty(direction) { + let borderColorProperty; + + switch (direction) { + case "top": + borderColorProperty = "borderTopColor"; + break; + case "right": + borderColorProperty = "borderRightColor"; + break; + case "bottom": + borderColorProperty = "borderBottomColor"; + break; + case "left": + borderColorProperty = "borderLeftColor"; + break; + default: + borderColorProperty = "borderColor"; + break; + } + + return borderColorProperty; +} + +/** + * Retrieve the border style property name depending on direction. + * @param {String} direction - Either `top`, `right`, `bottom` or `left`. + * @returns {String} The CSS property name. + */ +function getBorderStyleProperty(direction) { + let borderStyleProperty; + + switch (direction) { + case "top": + borderStyleProperty = "borderTopStyle"; + break; + case "right": + borderStyleProperty = "borderRightStyle"; + break; + case "bottom": + borderStyleProperty = "borderBottomStyle"; + break; + case "left": + borderStyleProperty = "borderLeftStyle"; + break; + default: + borderStyleProperty = "borderStyle"; + break; + } + + return borderStyleProperty; +} + +/** + * Retrieve the border width property name depending on direction. + * @param {String} direction - Either `top`, `right`, `left` or `bottom`. + * @returns {String} The CSS property name. + */ +function getBorderWidthProperty(direction) { + let borderWidthProperty; + + switch (direction) { + case "top": + borderWidthProperty = "borderTopWidth"; + break; + case "right": + borderWidthProperty = "borderRightWidth"; + break; + case "bottom": + borderWidthProperty = "borderBottomWidth"; + break; + case "left": + borderWidthProperty = "borderLeftWidth"; + break; + default: + borderWidthProperty = "borderWidth"; + break; + } + + return borderWidthProperty; +} + +/** + * Apply the custom border to an element. + * @param {HTMLElement} el - Apply border to this element. + * @param {String} property - Either `color`, `style` or `width`. + * @param {String} value - The value to apply. + * @param {String} [direction] - Either `top`, `right`, `bottom` or `left`. + */ +function setBorder(el, property, value, direction = null) { + let borderProperty; + + switch (property) { + case "color": + borderProperty = getBorderColorProperty(direction); + break; + case "style": + borderProperty = getBorderStyleProperty(direction); + break; + case "width": + borderProperty = getBorderWidthProperty(direction); + default: + break; + } + + el.style[borderProperty] = value; +} + +/** + * Apply the custom border radius to an element. + * @param {HTMLElement} el - Apply border radius to this element. + * @param {String} firstRadius - The first radius value. + * @param {String} [secondRadius] - The second radius value. + * @param {String} [x] - The horizontal direction: either `right` or `left`. + * @param {String} [y] - The vertical direction: either `top` or `bottom`. + */ +function setBorderRadius(el, firstRadius, secondRadius, x = null, y = null) { + const direction = `${x}-${y}`; + const value = `${firstRadius}${secondRadius ? ` / ${secondRadius}` : ""}`; + let borderRadiusProperty; + + switch (direction) { + case "left-top": + borderRadiusProperty = "borderTopLeftRadius"; + break; + case "right-top": + borderRadiusProperty = "borderTopRightRadius"; + break; + case "left-bottom": + borderRadiusProperty = "borderBottomLeftRadius"; + break; + case "right-bottom": + borderRadiusProperty = "borderBottomRightRadius"; + break; + default: + borderRadiusProperty = "borderRadius"; + break; + } + + el.style[borderRadiusProperty] = value; +} + +/** + * Display the corresponding border settings. + * @param {String} string - Either `common` or `individual`. + */ +function toggleBorderSettingsDisplay(string) { + const allBordersFieldset = document.getElementById("fieldset-borders"); + const topBorderFieldset = document.getElementById("fieldset-border-top"); + const rightBorderFieldset = document.getElementById("fieldset-border-right"); + const bottomBorderFieldset = document.getElementById( + "fieldset-border-bottom" + ); + const leftBorderFieldset = document.getElementById("fieldset-border-left"); + + if (string === "common") { + allBordersFieldset.style.display = ""; + topBorderFieldset.style.display = "none"; + rightBorderFieldset.style.display = "none"; + bottomBorderFieldset.style.display = "none"; + leftBorderFieldset.style.display = "none"; + } else { + allBordersFieldset.style.display = "none"; + topBorderFieldset.style.display = ""; + rightBorderFieldset.style.display = ""; + bottomBorderFieldset.style.display = ""; + leftBorderFieldset.style.display = ""; + } +} + +/** + * Display the corresponding border-radius settings. + * @param {String} string - Either `common` or `individual`. + */ +function toggleBorderRadiusSettingsDisplay(string) { + const allBordersRadiusFieldset = document.getElementById( + "fieldset-borders-radius" + ); + const topLeftBorderRadiusFieldset = document.getElementById( + "fieldset-border-top-left-radius" + ); + const topRightBorderRadiusFieldset = document.getElementById( + "fieldset-border-top-right-radius" + ); + const bottomLeftBorderRadiusFieldset = document.getElementById( + "fieldset-border-bottom-left-radius" + ); + const bottomRightBorderRadiusFieldset = document.getElementById( + "fieldset-border-bottom-right-radius" + ); + + if (string === "common") { + allBordersRadiusFieldset.style.display = ""; + topLeftBorderRadiusFieldset.style.display = "none"; + topRightBorderRadiusFieldset.style.display = "none"; + bottomLeftBorderRadiusFieldset.style.display = "none"; + bottomRightBorderRadiusFieldset.style.display = "none"; + } else { + allBordersRadiusFieldset.style.display = "none"; + topLeftBorderRadiusFieldset.style.display = ""; + topRightBorderRadiusFieldset.style.display = ""; + bottomLeftBorderRadiusFieldset.style.display = ""; + bottomRightBorderRadiusFieldset.style.display = ""; + } +} + +/** + * Print the generated code into the given element. + * @param {HTMLElement} el - The element where to print generated code. + */ +function printCode(el) { + const code = document.querySelector(".result__code"); + let codeOutput = ` +.box {\n`; + + for (const property of el.style) { + codeOutput += `\t${property}: ${el.style[property]};\n`; + } + + codeOutput += "}"; + code.textContent = codeOutput; +} + +/** + * Check which type of settings is checked. + * @param {String} radioValue - The input radio value. + * @returns {Boolean} True if is individual; false if is common. + */ +function isIndividualSettings(radioValue) { + return radioValue === "true" ? true : false; +} + +/** + * Set all borders to a given element. + * @param {HTMLElement} el - Apply border to this element. + */ +function setCommonBorder(el) { + const allBordersColorInput = document.getElementById("borders-color"); + const allBordersStyleSelect = document.getElementById("borders-style"); + const allBordersUnitSelect = document.getElementById("borders-unit"); + const allBordersWidthInput = document.getElementById("borders-width"); + + setBorder(el, "color", allBordersColorInput.value); + setBorder(el, "style", allBordersStyleSelect.value); + setBorder( + el, + "width", + `${allBordersWidthInput.value}${allBordersUnitSelect.value}` + ); + + allBordersColorInput.addEventListener("input", () => { + setBorder(el, "color", allBordersColorInput.value); + printCode(el); + }); + + allBordersStyleSelect.addEventListener("input", () => { + setBorder(el, "style", allBordersStyleSelect.value); + printCode(el); + }); + + allBordersUnitSelect.addEventListener("input", () => { + setBorder( + el, + "width", + `${allBordersWidthInput.value}${allBordersUnitSelect.value}` + ); + printCode(el); + }); + + allBordersWidthInput.addEventListener("input", () => { + setBorder( + el, + "width", + `${allBordersWidthInput.value}${allBordersUnitSelect.value}` + ); + printCode(el); + }); +} + +/** + * Set the top border to the given element. + * @param {HTMLElement} el - Apply the top border to this element. + */ +function setTopBorder(el) { + const topBorderColorInput = document.getElementById("border-top-color"); + const topBorderStyleSelect = document.getElementById("border-top-style"); + const topBorderUnitSelect = document.getElementById("border-top-unit"); + const topBorderWidthInput = document.getElementById("border-top-width"); + + setBorder(el, "color", topBorderColorInput.value, "top"); + setBorder(el, "style", topBorderStyleSelect.value, "top"); + setBorder( + el, + "width", + `${topBorderWidthInput.value}${topBorderUnitSelect.value}`, + "top" + ); + + topBorderColorInput.addEventListener("input", () => { + setBorder(el, "color", topBorderColorInput.value, "top"); + printCode(el); + }); + + topBorderStyleSelect.addEventListener("input", () => { + setBorder(el, "style", topBorderStyleSelect.value, "top"); + printCode(el); + }); + + topBorderUnitSelect.addEventListener("input", () => { + setBorder( + el, + "width", + `${topBorderWidthInput.value}${topBorderUnitSelect.value}`, + "top" + ); + printCode(el); + }); + + topBorderWidthInput.addEventListener("input", () => { + setBorder( + el, + "width", + `${topBorderWidthInput.value}${topBorderUnitSelect.value}`, + "top" + ); + printCode(el); + }); +} + +/** + * Set the right border to the given element. + * @param {HTMLElement} el - Apply the right border to this element. + */ +function setRightBorder(el) { + const rightBorderWidthInput = document.getElementById("border-right-width"); + const rightBorderUnitSelect = document.getElementById("border-right-unit"); + const rightBorderStyleSelect = document.getElementById("border-right-style"); + const rightBorderColorInput = document.getElementById("border-right-color"); + + setBorder(el, "color", rightBorderColorInput.value, "right"); + setBorder(el, "style", rightBorderStyleSelect.value, "right"); + setBorder( + el, + "width", + `${rightBorderWidthInput.value}${rightBorderUnitSelect.value}`, + "right" + ); + + rightBorderColorInput.addEventListener("input", () => { + setBorder(el, "color", rightBorderColorInput.value, "right"); + printCode(el); + }); + + rightBorderStyleSelect.addEventListener("input", () => { + setBorder(el, "style", rightBorderStyleSelect.value, "right"); + printCode(el); + }); + + rightBorderUnitSelect.addEventListener("input", () => { + setBorder( + el, + "width", + `${rightBorderWidthInput.value}${rightBorderUnitSelect.value}`, + "right" + ); + printCode(el); + }); + + rightBorderWidthInput.addEventListener("input", () => { + setBorder( + el, + "width", + `${rightBorderWidthInput.value}${rightBorderUnitSelect.value}`, + "right" + ); + printCode(el); + }); +} + +/** + * Set the bottom border to the given element. + * @param {HTMLElement} el - Apply the bottom border to this element. + */ +function setBottomBorder(el) { + const bottomBorderWidthInput = document.getElementById("border-bottom-width"); + const bottomBorderUnitSelect = document.getElementById("border-bottom-unit"); + const bottomBorderStyleSelect = document.getElementById( + "border-bottom-style" + ); + const bottomBorderColorInput = document.getElementById("border-bottom-color"); + + setBorder(el, "color", bottomBorderColorInput.value, "bottom"); + setBorder(el, "style", bottomBorderStyleSelect.value, "bottom"); + setBorder( + el, + "width", + `${bottomBorderWidthInput.value}${bottomBorderUnitSelect.value}`, + "bottom" + ); + + bottomBorderColorInput.addEventListener("input", () => { + setBorder(el, "color", bottomBorderColorInput.value, "bottom"); + printCode(el); + }); + + bottomBorderStyleSelect.addEventListener("input", () => { + setBorder(el, "style", bottomBorderStyleSelect.value, "bottom"); + printCode(el); + }); + + bottomBorderUnitSelect.addEventListener("input", () => { + setBorder( + el, + "width", + `${bottomBorderWidthInput.value}${bottomBorderUnitSelect.value}`, + "bottom" + ); + printCode(el); + }); + + bottomBorderWidthInput.addEventListener("input", () => { + setBorder( + el, + "width", + `${bottomBorderWidthInput.value}${bottomBorderUnitSelect.value}`, + "bottom" + ); + printCode(el); + }); +} + +/** + * Set the left border to the given element. + * @param {HTMLElement} el - Apply the left border to this element. + */ +function setLeftBorder(el) { + const leftBorderWidthInput = document.getElementById("border-left-width"); + const leftBorderUnitSelect = document.getElementById("border-left-unit"); + const leftBorderStyleSelect = document.getElementById("border-left-style"); + const leftBorderColorInput = document.getElementById("border-left-color"); + + setBorder(el, "color", leftBorderColorInput.value, "left"); + setBorder(el, "style", leftBorderStyleSelect.value, "left"); + setBorder( + el, + "width", + `${leftBorderWidthInput.value}${leftBorderUnitSelect.value}`, + "left" + ); + + leftBorderColorInput.addEventListener("input", () => { + setBorder(el, "color", leftBorderColorInput.value, "left"); + printCode(el); + }); + + leftBorderStyleSelect.addEventListener("input", () => { + setBorder(el, "style", leftBorderStyleSelect.value, "left"); + printCode(el); + }); + + leftBorderUnitSelect.addEventListener("input", () => { + setBorder( + el, + "width", + `${leftBorderWidthInput.value}${leftBorderUnitSelect.value}`, + "left" + ); + printCode(el); + }); + + leftBorderWidthInput.addEventListener("input", () => { + setBorder( + el, + "width", + `${leftBorderWidthInput.value}${leftBorderUnitSelect.value}`, + "left" + ); + printCode(el); + }); +} + +/** + * Set all borders radius to the given element. + * @param {HTMLElement} el - Apply the border radius to this element. + */ +function setCommonBorderRadius(el) { + const borderCommonFirstRadius = document.getElementById( + "borders-first-radius" + ); + const borderCommonFirstRadiusUnit = document.getElementById( + "borders-first-radius-unit" + ); + const borderCommonSecondRadius = document.getElementById( + "borders-second-radius" + ); + const borderCommonSecondRadiusUnit = document.getElementById( + "borders-second-radius-unit" + ); + let firstRadius = `${borderCommonFirstRadius.value}${borderCommonFirstRadiusUnit.value}`; + let secondRadius = borderCommonSecondRadius.value + ? `${borderCommonSecondRadius.value}${borderCommonSecondRadiusUnit.value}` + : null; + + setBorderRadius(el, firstRadius, secondRadius); + + borderCommonFirstRadius.addEventListener("input", () => { + firstRadius = `${borderCommonFirstRadius.value}${borderCommonFirstRadiusUnit.value}`; + setBorderRadius(el, firstRadius, secondRadius); + printCode(el); + }); + + borderCommonFirstRadiusUnit.addEventListener("input", () => { + firstRadius = `${borderCommonFirstRadius.value}${borderCommonFirstRadiusUnit.value}`; + setBorderRadius(el, firstRadius, secondRadius); + printCode(el); + }); + + borderCommonSecondRadius.addEventListener("input", () => { + secondRadius = borderCommonSecondRadius.value + ? `${borderCommonSecondRadius.value}${borderCommonSecondRadiusUnit.value}` + : null; + setBorderRadius(el, firstRadius, secondRadius); + printCode(el); + }); + + borderCommonSecondRadiusUnit.addEventListener("input", () => { + secondRadius = borderCommonSecondRadius.value + ? `${borderCommonSecondRadius.value}${borderCommonSecondRadiusUnit.value}` + : null; + setBorderRadius(el, firstRadius, secondRadius); + printCode(el); + }); +} + +/** + * Set the top left border-radius to the given element. + * @param {HTMLElement} el - Apply the top left border-radius to this element. + */ +function setTopLeftBorderRadius(el) { + const borderTopLeftFirstRadius = document.getElementById( + "border-top-left-first-radius" + ); + const borderTopLeftFirstRadiusUnit = document.getElementById( + "border-top-left-first-radius-unit" + ); + const borderTopLeftSecondRadius = document.getElementById( + "border-top-left-second-radius" + ); + const borderTopLeftSecondRadiusUnit = document.getElementById( + "border-top-left-second-radius-unit" + ); + let firstRadius = `${borderTopLeftFirstRadius.value}${borderTopLeftFirstRadiusUnit.value}`; + let secondRadius = borderTopLeftSecondRadius.value + ? `${borderTopLeftSecondRadius.value}${borderTopLeftSecondRadiusUnit.value}` + : null; + + setBorderRadius(el, firstRadius, secondRadius, "left", "top"); + + borderTopLeftFirstRadius.addEventListener("input", () => { + firstRadius = `${borderTopLeftFirstRadius.value}${borderTopLeftFirstRadiusUnit.value}`; + setBorderRadius(el, firstRadius, secondRadius, "left", "top"); + printCode(el); + }); + + borderTopLeftFirstRadiusUnit.addEventListener("input", () => { + firstRadius = `${borderTopLeftFirstRadius.value}${borderTopLeftFirstRadiusUnit.value}`; + setBorderRadius(el, firstRadius, secondRadius, "left", "top"); + printCode(el); + }); + + borderTopLeftSecondRadius.addEventListener("input", () => { + secondRadius = borderTopLeftSecondRadius.value + ? `${borderTopLeftSecondRadius.value}${borderTopLeftSecondRadiusUnit.value}` + : null; + setBorderRadius(el, firstRadius, secondRadius, "left", "top"); + printCode(el); + }); + + borderTopLeftSecondRadiusUnit.addEventListener("input", () => { + secondRadius = borderTopLeftSecondRadius.value + ? `${borderTopLeftSecondRadius.value}${borderTopLeftSecondRadiusUnit.value}` + : null; + setBorderRadius(el, firstRadius, secondRadius, "left", "top"); + printCode(el); + }); +} + +/** + * Set the top right border-radius to the given element. + * @param {HTMLElement} el - Apply the top right border-radius to this element. + */ +function setTopRightBorderRadius(el) { + const borderTopRightFirstRadius = document.getElementById( + "border-top-right-first-radius" + ); + const borderTopRightFirstRadiusUnit = document.getElementById( + "border-top-right-first-radius-unit" + ); + const borderTopRightSecondRadius = document.getElementById( + "border-top-right-second-radius" + ); + const borderTopRightSecondRadiusUnit = document.getElementById( + "border-top-right-second-radius-unit" + ); + const firstRadius = `${borderTopRightFirstRadius.value}${borderTopRightFirstRadiusUnit.value}`; + const secondRadius = borderTopRightSecondRadius.value + ? `${borderTopRightSecondRadius.value}${borderTopRightSecondRadiusUnit.value}` + : null; + + setBorderRadius(el, firstRadius, secondRadius, "right", "top"); + + borderTopRightFirstRadius.addEventListener("input", () => { + firstRadius = `${borderTopRightFirstRadius.value}${borderTopRightFirstRadiusUnit.value}`; + setBorderRadius(el, firstRadius, secondRadius, "right", "top"); + printCode(el); + }); + + borderTopRightFirstRadiusUnit.addEventListener("input", () => { + firstRadius = `${borderTopRightFirstRadius.value}${borderTopRightFirstRadiusUnit.value}`; + setBorderRadius(el, firstRadius, secondRadius, "right", "top"); + printCode(el); + }); + + borderTopRightSecondRadius.addEventListener("input", () => { + secondRadius = borderTopRightSecondRadius.value + ? `${borderTopRightSecondRadius.value}${borderTopRightSecondRadiusUnit.value}` + : null; + setBorderRadius(el, firstRadius, secondRadius, "right", "top"); + printCode(el); + }); + + borderTopRightSecondRadiusUnit.addEventListener("input", () => { + secondRadius = borderTopRightSecondRadius.value + ? `${borderTopRightSecondRadius.value}${borderTopRightSecondRadiusUnit.value}` + : null; + setBorderRadius(el, firstRadius, secondRadius, "right", "top"); + printCode(el); + }); +} + +/** + * Set the bottom left border-radius to the given element. + * @param {HTMLElement} el - Apply bottom left border-radius to this element. + */ +function setBottomLeftBorderRadius(el) { + const borderBottomLeftFirstRadius = document.getElementById( + "border-bottom-left-first-radius" + ); + const borderBottomLeftFirstRadiusUnit = document.getElementById( + "border-bottom-left-first-radius-unit" + ); + const borderBottomLeftSecondRadius = document.getElementById( + "border-bottom-left-second-radius" + ); + const borderBottomLeftSecondRadiusUnit = document.getElementById( + "border-bottom-left-second-radius-unit" + ); + const firstRadius = `${borderBottomLeftFirstRadius.value}${borderBottomLeftFirstRadiusUnit.value}`; + const secondRadius = borderBottomLeftSecondRadius.value + ? `${borderBottomLeftSecondRadius.value}${borderBottomLeftSecondRadiusUnit.value}` + : null; + + setBorderRadius(el, firstRadius, secondRadius, "left", "bottom"); + + borderBottomLeftFirstRadius.addEventListener("input", () => { + firstRadius = `${borderBottomLeftFirstRadius.value}${borderBottomLeftFirstRadiusUnit.value}`; + setBorderRadius(el, firstRadius, secondRadius, "left", "bottom"); + printCode(el); + }); + + borderBottomLeftFirstRadiusUnit.addEventListener("input", () => { + firstRadius = `${borderBottomLeftFirstRadius.value}${borderBottomLeftFirstRadiusUnit.value}`; + setBorderRadius(el, firstRadius, secondRadius, "left", "bottom"); + printCode(el); + }); + + borderBottomLeftSecondRadius.addEventListener("input", () => { + secondRadius = borderBottomLeftSecondRadius.value + ? `${borderBottomLeftSecondRadius.value}${borderBottomLeftSecondRadiusUnit.value}` + : null; + setBorderRadius(el, firstRadius, secondRadius, "left", "bottom"); + printCode(el); + }); + + borderBottomLeftSecondRadiusUnit.addEventListener("input", () => { + secondRadius = borderBottomLeftSecondRadius.value + ? `${borderBottomLeftSecondRadius.value}${borderBottomLeftSecondRadiusUnit.value}` + : null; + setBorderRadius(el, firstRadius, secondRadius, "left", "bottom"); + printCode(el); + }); +} + +/** + * Set the bottom right border-radius to the given element. + * @param {HTMLElement} el - Apply bottom right border-radius to this element. + */ +function setBottomRightBorderRadius(el) { + const borderBottomRightFirstRadius = document.getElementById( + "border-bottom-right-first-radius" + ); + const borderBottomRightFirstRadiusUnit = document.getElementById( + "border-bottom-right-first-radius-unit" + ); + const borderBottomRightSecondRadius = document.getElementById( + "border-bottom-right-second-radius" + ); + const borderBottomRightSecondRadiusUnit = document.getElementById( + "border-bottom-right-second-radius-unit" + ); + const firstRadius = `${borderBottomRightFirstRadius.value}${borderBottomRightFirstRadiusUnit.value}`; + const secondRadius = borderBottomRightSecondRadius.value + ? `${borderBottomRightSecondRadius.value}${borderBottomRightSecondRadiusUnit.value}` + : null; + + setBorderRadius(el, firstRadius, secondRadius, "right", "bottom"); + + borderBottomRightFirstRadius.addEventListener("input", () => { + firstRadius = `${borderBottomRightFirstRadius.value}${borderBottomRightFirstRadiusUnit.value}`; + setBorderRadius(el, firstRadius, secondRadius, "right", "bottom"); + printCode(el); + }); + + borderBottomRightFirstRadiusUnit.addEventListener("input", () => { + firstRadius = `${borderBottomRightFirstRadius.value}${borderBottomRightFirstRadiusUnit.value}`; + setBorderRadius(el, firstRadius, secondRadius, "right", "bottom"); + printCode(el); + }); + + borderBottomRightSecondRadius.addEventListener("input", () => { + secondRadius = borderBottomRightSecondRadius.value + ? `${borderBottomRightSecondRadius.value}${borderBottomRightSecondRadiusUnit.value}` + : null; + setBorderRadius(el, firstRadius, secondRadius, "right", "bottom"); + printCode(el); + }); + + borderBottomRightSecondRadiusUnit.addEventListener("input", () => { + secondRadius = borderBottomRightSecondRadius.value + ? `${borderBottomRightSecondRadius.value}${borderBottomRightSecondRadiusUnit.value}` + : null; + setBorderRadius(el, firstRadius, secondRadius, "right", "bottom"); + printCode(el); + }); +} + +/** + * Display a message inside the given element. + * @param {HTMLElement} el - The element where to print the message. + * @param {String} msg - The message to display. + * @param {Number} [duration] - The message duration. + */ +function printMessage(el, msg, duration = 1000) { + const backupContent = el.textContent; + + el.textContent = msg; + setTimeout(() => (el.textContent = backupContent), duration); +} + +/** + * Copy code to the clipboard. + */ +function copyCode() { + const code = document.querySelector(".result__code"); + navigator.clipboard.writeText(code.textContent); +} + +/** + * Listen the button copy to clipboard. + */ +function listenCopyCodeBtn() { + const btn = document.getElementById("copy-code"); + + btn.addEventListener("click", () => { + copyCode(); + printMessage(btn, "Copied to clipboard!"); + }); +} + +/** + * Initialize borders settings and borders. + * @param {String} radioValue - The input radio value. + * @param {HTMLElement} el - The element where to apply borders. + */ +function initBorders(radioValue, el) { + if (isIndividualSettings(radioValue)) { + toggleBorderSettingsDisplay("individual"); + setTopBorder(el); + setRightBorder(el); + setBottomBorder(el); + setLeftBorder(el); + } else { + toggleBorderSettingsDisplay("common"); + setCommonBorder(el); + } +} + +/** + * Initialize border-radius settings and border-radius. + * @param {String} radioValue - The input radio value. + * @param {HTMLElement} el - The element where to apply border-radius. + */ +function initBordersRadius(radioValue, el) { + if (isIndividualSettings(radioValue)) { + toggleBorderRadiusSettingsDisplay("individual"); + setTopLeftBorderRadius(el); + setTopRightBorderRadius(el); + setBottomLeftBorderRadius(el); + setBottomRightBorderRadius(el); + } else { + toggleBorderRadiusSettingsDisplay("common"); + setCommonBorderRadius(el); + } +} + +/** + * Initialize the app. + */ +function init() { + const box = document.querySelector(".box"); + const borderPropertyRadio = document.querySelectorAll( + 'input[name="border-property"]' + ); + const borderRadiusPropertyRadio = document.querySelectorAll( + 'input[name="border-radius-property"]' + ); + + for (const radio of borderPropertyRadio) { + if (radio.checked) initBorders(radio.value, box); + radio.addEventListener("change", () => initBorders(radio.value, box)); + } + + for (const radio of borderRadiusPropertyRadio) { + if (radio.checked) initBordersRadius(radio.value, box); + radio.addEventListener("change", () => initBordersRadius(radio.value, box)); + } + + printCode(box); + listenCopyCodeBtn(); +} + +init(); |