feat: add border radius input to gradient border generator (#125)

* Append checkbox input to `index.html`.

* feat(index.html, style.css, gradient-border.ts, general.ts): add radius option to gradient-border

This changes provide users the with the option of including a radius in the generated gradient
border

BREAKING CHANGE: The copied code is empty. When user clicks on copy code button, the clipboard is
empty

* style(index.html, style.css, general.ts, gradient-border.ts): format code with prettier

Applies the recommended prettier styling to code as required by Author

* fix(index.html): fix typo in index.html

correct the for attribute for gradient-border checkbox

* feat(index.html, gradient-border.ts): add text-input to border radius

These changes introduce a text input for allowing the User to specify the radius of the generated
border gradient

re #68

Author: tes-balo

index.html

@@ -215,6 +215,14 @@ <h1 id="head">Code Magic</h1>
             </label>
           </div>
 
+          <label class="radius" for="gradient-border-radius">
+            <input type="checkbox" id="gradient-border-radius" name="check" />
+            <span> Include Radius </span>
+          <label id="radius-input-label" for="gradient-border-input">
+            <input type="number" id="gradient-border-input" name="desired-radius" placeholder="Enter a number e.g. 50" autofocus required />
+          </label>
+          </label>
+          
           <label id="degree">
             <span>Degree</span>
             <input
@@ -426,7 +434,7 @@ <h2>Results</h2>
 
         <!-- Gradient Border -->
         <div class="download-output" data-result="gradient-border">
-          <div class="output"></div>
+          <div class="output gradient-border"></div>
           <div class="download-btn">
             <button class="btn" data-download="gradient-border-code">
               <iconify-icon

src/lib/general.ts

@@ -152,6 +152,22 @@ export const getRange = (attribute: string): HTMLInputElement =>
 export const getInputText = (attribute: string) =>
   <HTMLInputElement>document.getElementById(`${attribute}-text`);
 
+export const getCheckbox = (attribute: string): HTMLInputElement =>
+  <HTMLInputElement>document.getElementById(`${attribute}-radius`);
+
+export const getRadiusInput = (attribute: string) =>
+  <HTMLInputElement>document.getElementById(`${attribute}-input`);
+
+export const showRadius = (attribute: string): void =>
+  document
+    .querySelectorAll<HTMLElement>(`#${attribute}-input`)[0]
+    .style.setProperty('display', 'inline');
+
+export const hideRadius = (attribute: string): void =>
+  document
+    .querySelectorAll<HTMLElement>(`#${attribute}-input`)[0]
+    .style.setProperty('display', 'none');
+
 export const getInputSpinner = (attribute: string) =>
   <HTMLInputElement>document.getElementById(`${attribute}-duration`);
 
@@ -168,6 +184,11 @@ export const getStyleSheet = () => {
   return <CSSStyleSheet>stylesheet[0];
 };
 
+/* ||||  CONSIDER RENAMING getOutput above TO getGradientBorder ||||
+ * (for example) export const getGradientBorder = (attribute: string): HTMLElement =>
+ * <HTMLElement>document.querySelector(`${attribute}`);
+ */
+
 function createDownloadLink(fileName: string, url: string) {
   const link = document.createElement('a');
   link.download = fileName;

src/main.ts

@@ -213,13 +213,17 @@ function showResult(attribute: string | null) {
 //   removeOrAddGeneratorContent(attributeValue, 'none');
 // }
 
-// adding an event listeners to all generators card
+// add event listener to generator icons
 
 generators.forEach((generator) => {
   generator?.addEventListener('click', (): void => {
     sidebar.style.left = '100%';
     const checking = generator.getAttribute('data-gen');
-    if (checking === null) return;
+    if (checking === 'gradient-border') {
+      generatorsFunction(checking);
+    } else if (checking === null) {
+      return;
+    }
 
     attributeValue = checking;
     showContent(attributeValue, 'flex');

src/pages/gradient-border.ts

@@ -4,6 +4,7 @@ type Values = {
   firstColor: string;
   secondColor: string;
   degree: string;
+  radius: string;
 };
 
 export function gradientBorderGenerator(): void {
@@ -12,11 +13,25 @@ export function gradientBorderGenerator(): void {
   const color2 = utils.getColorInput2(attribute);
   const getOutputElement = utils.getOutput(attribute);
   const getRangeElement = utils.getRange(attribute);
+  const getCheckboxElement = utils.getCheckbox(attribute);
+  const getBorderRadiusInput = utils.getRadiusInput(attribute);
+  const showRadiusInput = utils.showRadius;
+  const hideRadiusInput = utils.hideRadius;
 
-  const values = {
+  getCheckboxElement.addEventListener('change', (e: Event): void => {
+    const target = e.target as HTMLInputElement;
+    if (target.checked) {
+      showRadiusInput(attribute);
+    } else {
+      hideRadiusInput(attribute);
+    }
+  });
+
+  const values: Values = {
     firstColor: color1.value,
     secondColor: color2.value,
     degree: getRangeElement.value,
+    radius: getBorderRadiusInput.value,
   };
   getGradientBorderResult(attribute, values, getOutputElement);
 }
@@ -33,10 +48,27 @@ function getGradientBorderResult(
   values: Values,
   outputElement: HTMLElement
 ): void {
-  outputElement.style.border = 'solid';
-  outputElement.style.borderWidth = '5px';
-  outputElement.style.borderImageSlice = '1';
-  outputElement.style.borderImageSource = `linear-gradient(${values.degree}deg, ${values.firstColor}, ${values.secondColor})`;
+  outputElement.style.setProperty(
+    `--${attribute}-color-1`,
+    `${values.firstColor}`
+  );
+  outputElement.style.setProperty(
+    `--${attribute}-color-2`,
+    `${values.secondColor}`
+  );
+  outputElement.style.setProperty(
+    `--${attribute}-degree`,
+    `${values.degree}deg`
+  );
+
+  outputElement.style.setProperty(
+    `--${attribute}-radius`,
+    `${values.radius}px`
+  );
+
+  outputElement.style.backgroundColor = 'transparent';
+  outputElement.style.visibility = 'visible';
+  utils.getCheckbox(attribute).checked = false;
 
   const getCodeButtonElement = utils.getCopyCodeButton(attribute);
   getCodeButtonElement.addEventListener('click', () => {

src/style.css

@@ -2,8 +2,11 @@
   /* Colors */
   --primary-color: #081121;
   --text-color: #edf2f4;
+  --input-color: #000000;
   --secondary-color: #0e213c;
   --tertiary-color: #2196f3;
+  --gradient-border-color-1: red;
+  --gradient-border-color-2: blue;
 
   /* Heights */
   --generator-height: 14rem;
@@ -13,8 +16,12 @@
   --generator-width: 12rem;
   --content-container: 100%;
   --input-width: 300px;
-  --output-width: 400px;
+  --output-width: 300px;
   --pseudo-footer-height: 70px;
+
+  /* GRADIENT BORDER SECTION */
+  --gradient-border-radius: 0;
+  --gradient-border-degree: 45deg;
 }
 
 *,
@@ -152,7 +159,7 @@ textarea {
 }
 
 ::placeholder {
-  color: var(--text-color);
+  color: var(--input-color);
   font-size: 1rem;
 }
 
@@ -229,11 +236,30 @@ textarea {
   padding-right: 8px;
 }
 
+#radius-input-label {
+  display: flex;
+  justify-content: center;
+}
+
+#gradient-border-input {
+  display: none;
+  min-width: 0;
+}
+
 #degree {
   display: flex;
   flex-direction: column;
   background-color: var(--primary-color);
   padding: 0.8rem;
+  margin-top: 2rem;
+  border-radius: 5px;
+  width: min(45%, 55%);
+}
+
+.radius {
+  text-align: center;
+  background-color: var(--primary-color);
+  padding: 0.8rem;
   border-radius: 5px;
   width: min(45%, 55%);
 }
@@ -310,6 +336,58 @@ textarea {
   margin-bottom: auto;
 }
 
+.gradient-border {
+  visibility: hidden;
+  position: relative;
+  width: var(--output-width);
+  height: 300px;
+  word-wrap: break-word;
+  margin-bottom: 1rem;
+}
+
+/*	
+* NOTE: The border-radius property is not supported with border-image, therefore,
+*	the css for the gradient-border below relies on CSS Mask property applied to a pseudo background.
+*
+* 	The code below uses a trick based on using a pseudo element to circumvent 
+*	the restriction posed by using border-image.
+*	1. The before pseudo element represents the background-image placed on the .gradient-border div.
+*	   We apply a gradient as background and we make its origin the border box 
+*      (by default it's the padding box).
+*	2. Using the mask property, we apply two opaque layers.
+*	   The bottom one will cover the whole element and 
+*	   the top one will cover only the content box (so it will not cover the border area).
+*	3. Using the mask-composite property, we exclude the content area from the border area 
+*	   so that only the border will remain visible.
+*	4. -webkit-mask-composite: xor; this line is required for compatibility with Chrome browser.
+	@demo: https://stackoverflow.com/questions/51496204/border-gradient-with-border-radius
+	@credit: https://dev.to/afif/border-with-gradient-and-radius-387f
+*/
+
+.gradient-border::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: var(--gradient-border-radius);
+  padding: 6px;
+  background: linear-gradient(
+      var(--gradient-border-degree, 45deg),
+      var(--gradient-border-color-1, red),
+      var(--gradient-border-color-2, blue)
+    )
+    border-box;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+
+.bg-output {
+  width: var(--output-width);
+  height: 300px;
+  word-wrap: break-word;
+  margin-bottom: 1rem;
+}
+
 .download-output > p {
   font-size: 0.7rem;
 }