script.js

// script.js

(() => {
  // SVG path from the user provided SVG
  const svgPath =
    "M21.147 0H0l9.535 9.535c.024-.025.1-.03.125-.059.258-.23.502-.48.737-.735-.116-.084-.234-.168-.338-.268-.284-.247-.509-.585-.537-.969-.05-.352.178-.652.223-.99.049-.225-.018-.45-.027-.675-.015-.072.03-.167.115-.142.243.091.37.36.402.604.064.354-.12.7-.047 1.054.068.407.423.699.792.843.18-.122.378-.231.597-.259.032-.013.116.008.116-.017-.39-.488-.72-1.073-.725-1.714-.013-.672.348-1.289.8-1.76.377-.44.928-.72 1.505-.763.071-.057.104-.17.164-.247.208-.274.472-.516.785-.665.078-.049.169-.091.229.006.265.28.39.659.494 1.021.04.115.038.253.099.355.344.213.678.445.959.738.316.3.604.63.827 1.005.048.098.108.176.227.173.427.102.877.225 1.212.525.032.035.088.078.073.132a2.064 2.064 0 0 1-.967 1.044c-.009.39-.147.774-.368 1.093a3.65 3.65 0 0 1-1.186 1.002 2.012 2.012 0 0 1-1.067.221c-.608-.029-1.148-.366-1.618-.726a1.283 1.283 0 0 1-.234.666c-.421.479-.896.909-1.322 1.383-.038.022-.029.093-.052.117l9.62 9.619z";

  // DOM references
  const fillColorInput = document.getElementById("fillColor");
  const enableBgCheckbox = document.getElementById("enableBg");
  const bgColorInput = document.getElementById("bgColor");
  const bgOpacityInput = document.getElementById("bgOpacity");
  const opacityValueSpan = document.getElementById("opacityValue");
  const cornerPosInput = document.getElementById("cornerPos");
  const sizeInput = document.getElementById("size");
  const positionTypeInput = document.getElementById("positionType");
  const previewWrapper = document.getElementById("previewWrapper");
  const generatedCodePre = document.getElementById("generatedCode");
  const copyButton = document.getElementById("copyButton");

  // Initialize option values
  function getOptions() {
    return {
      fillColor: fillColorInput.value,
      enableBg: enableBgCheckbox.checked,
      bgColor: bgColorInput.value,
      bgOpacity: parseFloat(bgOpacityInput.value),
      cornerPos: cornerPosInput.value,
      size: Number(sizeInput.value),
      positionType: positionTypeInput.value,
    };
  }

  // Build clip-path polygon string by position
  // The polygon is a triangular shape always clipped:
  // Original polygon(100% 0%, 0% 0%, 100% 100%)
  // We must adjust it depending on corner chosen
  //  - top-right: polygon(100% 0%, 0% 0%, 100% 100%)
  //  - top-left: polygon(0% 0%, 100% 0%, 0% 100%)
  //  - bottom-right: polygon(100% 100%, 0% 100%, 100% 0%)
  //  - bottom-left: polygon(0% 100%, 100% 100%, 0% 0%)
  function getClipPath(position) {
    switch (position) {
      case "top-left":
        return "polygon(0% 0%, 100% 0%, 0% 100%)";
      case "bottom-right":
        return "polygon(100% 100%, 0% 100%, 100% 0%)";
      case "bottom-left":
        return "polygon(0% 100%, 100% 100%, 0% 0%)";
      case "top-right":
      default:
        return "polygon(100% 0%, 0% 0%, 100% 100%)";
    }
  }

  // Return style string for positioning the <a> based on option
  // Each corner sets top/bottom and left/right to 0
  function getPositionStyles(position, positionType) {
    const posStyles = {
      position: positionType,
      width: "var(--corner-size)", // CSS variable used to pass size
      height: "var(--corner-size)",
      display: "inline-block",
      clipPath: getClipPath(position),
      // Reset all 4 positional props first
      top: "auto",
      right: "auto",
      bottom: "auto",
      left: "auto",
    };

    if (position.includes("top")) posStyles.top = "0";
    if (position.includes("bottom")) posStyles.bottom = "0";
    if (position.includes("right")) posStyles.right = "0";
    if (position.includes("left")) posStyles.left = "0";

    if (positionType === "fixed") {
      posStyles["z-index"] = "9999";
    }

    return posStyles;
  }

  // Return SVG rotation transform string by position
  // We rotate around the center of the 21.147x21.147 viewBox: (10.5735,10.5735)
  // Rotations in degrees:
  // top-right: 0deg
  // top-left: 90deg
  // bottom-left: 180deg
  // bottom-right: 270deg
  function getSvgRotation(position) {
    const center = 10.5735; // Half of 21.147
    switch (position) {
      case "top-left":
        return `rotate(-90 ${center} ${center})`;
      case "bottom-left":
        return `rotate(180 ${center} ${center})`;
      case "bottom-right":
        return `rotate(90 ${center} ${center})`;
      case "top-right":
      default:
        return "rotate(0 10.5735 10.5735)";
    }
  }

  // Generate the full HTML string for the corner banner based on options
  function generateCornerHTML(opts) {
    const sizePx = opts.size;

    // The <a> tag styles
    // The background is applied to <a> when enableBg is true, else transparent
    const aStyles = {
      ...getPositionStyles(opts.cornerPos, opts.positionType),
      width: sizePx + "px",
      height: sizePx + "px",
      "background-color": "transparent",
      "background-repeat": "no-repeat",
      "background-position": "center center",
      "background-size": "100% 100%",
      "text-decoration": "none",
    };

    if (opts.enableBg) {
      // background-color with opacity applied as rgba
      const rgb = hexToRgb(opts.bgColor);
      if (rgb) {
        aStyles["background-color"] = `rgba(${rgb.r},${rgb.g},${rgb.b},${opts.bgOpacity})`;
      } else {
        aStyles["background-color"] = opts.bgColor;
      }
    }

    // Convert styles object to inline style string
    const styleString = Object.entries(aStyles)
      .map(([k, v]) => `${k.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase())}: ${v}`)
      .join(";");

    // SVG fill color
    const svgFill = opts.fillColor;

    // SVG rotation transform by corner position
    const rotationTransform = getSvgRotation(opts.cornerPos);

    // SVG width/height and viewBox
    // We'll keep viewBox fixed, scale via width/height attributes
    // Apply transform to <g> inside SVG for rotation

    const svgHTML = `<svg width="${sizePx}" height="${sizePx}" viewBox="0 0 21.147 21.147" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" fill="${svgFill}" aria-hidden="true" focusable="false">
      <g transform="${rotationTransform}">
        <path d="${svgPath}"/>
      </g>
    </svg>`;

    const href = "https://github.com/YasinC2/GitHub-Corner-Generator";
    const ariaLabel = "View source on GitHub";
    const title = "View source on GitHub";
    const target = "_blank";

    // Compose final anchor HTML string
    return `<a href="${href}" aria-label="${ariaLabel}" title="${title}" target="${target}" style="${styleString}">${svgHTML}</a>`;
  }

  // Converts hex color (#RRGGBB or #RGB) to rgb object {r,g,b}
  function hexToRgb(hex) {
    let h = hex.replace("#", "").trim();
    if (h.length === 3)
      h = h
        .split("")
        .map((c) => c + c)
        .join("");
    if (h.length !== 6) return null;
    const bigint = parseInt(h, 16);
    if (isNaN(bigint)) return null;

    return {
      r: (bigint >> 16) & 255,
      g: (bigint >> 8) & 255,
      b: bigint & 255,
    };
  }

  // Update preview and generated code
  function update() {
    const opts = getOptions();

    // Create new anchor element and set innerHTML with SVG
    const aHTML = generateCornerHTML(opts);

    // Set preview content (sanitize? Here trusted code)
    previewWrapper.innerHTML = aHTML;

    // Set CSS variable for corner size on previewWrapper to scale the inner anchor
    // We set size on the anchor itself in inline styles in generateCornerHTML()
    // but previewWrapper might be useful if we want to debug.
    previewWrapper.style.setProperty("--corner-size", opts.size + "px");

    // Set generated code formatted nicely
    // We prettify a bit indentation:
    const prettyHTML = aHTML
      .replace(/></g, ">\n  <")
      .replace(/<a /, "<a\n  ")
      .replace(/style="([^"]+)"/, (m, styles) => {
        // Break styles into lines for readability in output
        const styleLines = styles.split("; ").filter(Boolean);
        if (styleLines.length > 1) {
          return (
            'style="\n    ' +
            styleLines.join(';\n    ') +
            (styles.endsWith(";") ? ";" : "") +
            '\n  "'
          );
        }
        return m;
      });

    generatedCodePre.textContent = prettyHTML;
  }

  // Event handler for enabling/disabling background inputs
  function backgroundToggleHandler() {
    const enabled = enableBgCheckbox.checked;
    bgColorInput.disabled = !enabled;
    bgOpacityInput.disabled = !enabled;
    update();
  }

  function handleBgOpacityInput() {
    opacityValueSpan.textContent = parseFloat(bgOpacityInput.value).toFixed(2);
  }

  // Add event listeners for all controls
  function addEventListeners() {
    fillColorInput.addEventListener("input", update);
    enableBgCheckbox.addEventListener("change", () => {
      backgroundToggleHandler();
    });
    bgColorInput.addEventListener("input", update);
    bgOpacityInput.addEventListener("input", () => {
      handleBgOpacityInput();
      update();
    });
    cornerPosInput.addEventListener("change", update);
    sizeInput.addEventListener("change", () => {
      // Limit size min/max enforced by input attrs, but sanitize here:
      if (sizeInput.value < 30) sizeInput.value = 30;
      if (sizeInput.value > 300) sizeInput.value = 300;
      update();
    });
    positionTypeInput.addEventListener("change", update);

    // Copy to clipboard button
    copyButton.addEventListener("click", () => {
      // Use navigator.clipboard if available
      const textToCopy = generatedCodePre.textContent;
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(textToCopy).then(() => {
          copyButton.textContent = "Copied!";
          setTimeout(() => {
            copyButton.textContent = "Copy to Clipboard";
          }, 1500);
        }, () => {
          alert("Failed to copy to clipboard.");
        });
      } else {
        // fallback for older browsers
        try {
          const textArea = document.createElement("textarea");
          textArea.value = textToCopy;
          // Move textarea offscreen
          textArea.style.position = "absolute";
          textArea.style.left = "-9999px";
          document.body.appendChild(textArea);
          textArea.select();
          const successful = document.execCommand("copy");
          document.body.removeChild(textArea);
          if (successful) {
            copyButton.textContent = "Copied!";
            setTimeout(() => {
              copyButton.textContent = "Copy to Clipboard";
            }, 1500);
          } else {
            alert("Failed to copy to clipboard.");
          }
        } catch (err) {
          alert("Failed to copy to clipboard.");
        }
      }
    });
  }

  // Initialization
  function init() {
    backgroundToggleHandler(); // set initial disabled/enabled inputs
    handleBgOpacityInput();
    addEventListeners();
    update();
  }

  // Run init on DOMContentLoaded
  document.addEventListener("DOMContentLoaded", init);
})();