script.js

// Select necessary elements
const previewButton = document.getElementById("previewButton");
const textInput = document.getElementById("text-input");
const previewModal = document.getElementById("previewModal");
const closePreviewButton = document.getElementById("closePreview");
const modalPreviewContent = document.getElementById("modal-preview-content");

// Function to open the preview modal
function openPreviewModal() {
  // Set the content of the modal to the text input's content
  modalPreviewContent.innerHTML = textInput.innerHTML;

  // Show the modal by adding the 'show' class
  previewModal.classList.add("show");
}

// Function to close the preview modal
function closePreviewModal() {
  // Hide the modal by removing the 'show' class
  previewModal.classList.remove("show");
}

// Event listener for the preview button
previewButton.addEventListener("click", openPreviewModal);

// Event listener for the close button in the modal
closePreviewButton.addEventListener("click", closePreviewModal);

// Optional: Close modal if clicked outside the modal content area
previewModal.addEventListener("click", function (event) {
  if (event.target === previewModal) {
    closePreviewModal();
  }
});

// Select all buttons with the class 'option-button'
let optionsButtons = document.querySelectorAll(".option-button");

// Select all buttons with the class 'adv-option-button' for advanced options
let advancedOptionButton = document.querySelectorAll(".adv-option-button");

// Get the font name dropdown element
let fontName = document.getElementById("fontName");

// Get the font size dropdown element
let fontSizeRef = document.getElementById("fontSize");

// Get the text input area where the user writes
document.addEventListener("DOMContentLoaded", () => {
  const writingArea = document.getElementById("text-input");

  // Optional: Add focus and blur effects for better UX
  writingArea.addEventListener("focus", () => {
    writingArea.setAttribute("aria-focused", "true"); // Set ARIA attribute on focus
  });

  writingArea.addEventListener("blur", () => {
    writingArea.removeAttribute("aria-focused"); // Remove ARIA attribute on blur
  });

  // Optional: You can add more functionality like handling input events
  writingArea.addEventListener("input", () => {
    console.log(`Current content length: ${writingArea.innerText.length}`);
  });
});

// Get the button for creating links
let linkButton = document.getElementById("createLink");

// Select all alignment buttons
let alignButtons = document.querySelectorAll(".align");

// Select all spacing buttons
let spacingButtons = document.querySelectorAll(".spacing");

// Select all formatting buttons
let formatButtons = document.querySelectorAll(".format");

// Select all script buttons (e.g., superscript, subscript)
let scriptButtons = document.querySelectorAll(".script");

// List of available fonts
let fontList = [
  "Arial",
  "Verdana",
  "Times New Roman",
  "Garamond",
  "Georgia",
  "Courier New",
  "cursive",
];

// Function to initialize settings
const initializer = () => {
  // Highlight alignment buttons but without keeping the active state
  highlighter(alignButtons, false); // Do not keep active state
  highlighter(spacingButtons, true); // Highlight spacing buttons
  highlighter(formatButtons, false); // Format buttons can be toggled
  highlighter(scriptButtons, false); // Highlight script buttons

  // Create options for font names in the dropdown
  fontList.forEach((value) => {
    let option = document.createElement("option");
    option.value = value;
    option.innerHTML = value;
    fontName.appendChild(option);
  });

  // Populate font size dropdown (only allow sizes 1 to 7)
  for (let i = 1; i <= 7; i++) {
    let option = document.createElement("option");
    option.value = i;
    option.innerHTML = i;
    fontSizeRef.appendChild(option);
  }

  // Set default font size to 3
  fontSizeRef.value = 3;
};

// Function to modify text based on command
const modifyText = (command, defaultUi, value) => {
  document.execCommand(command, defaultUi, value);
};

// Get the button for inserting images
let insertImageButton = document.getElementById("insertImage");

// Attach event listener for inserting images
insertImageButton.addEventListener("click", () => {
  let imageUrl = prompt("Enter the image URL"); // Prompt user for image URL
  if (imageUrl) {
    // Create an image element
    let img = document.createElement("img");
    img.src = imageUrl; // Set the source to the user-provided URL
    img.style.maxWidth = "100%"; // Ensure image doesn't overflow the container
    img.style.height = "auto"; // Maintain aspect ratio
    img.style.cursor = "nw-resize"; // Cursor indicates resizing

    // Insert image into the text area
    let writingArea = document.getElementById("text-input");
    writingArea.appendChild(img); // Append the image to the text area

    // Add mouse events for resizing the image
    img.addEventListener("mousedown", (e) => {
      e.preventDefault(); // Prevent text selection during drag
      let startX = e.clientX;
      let startY = e.clientY;
      let startWidth = parseInt(window.getComputedStyle(img).width);
      let startHeight = parseInt(window.getComputedStyle(img).height);

      const mouseMoveHandler = (e) => {
        let newWidth = startWidth + (e.clientX - startX);
        let newHeight = startHeight + (e.clientY - startY);
        img.style.width = newWidth + "px"; // Set new width
        img.style.height = newHeight + "px"; // Set new height
      };

      const mouseUpHandler = () => {
        window.removeEventListener("mousemove", mouseMoveHandler); // Remove event listeners on mouse up
        window.removeEventListener("mouseup", mouseUpHandler);
      };

      window.addEventListener("mousemove", mouseMoveHandler); // Add event listeners for mouse movement
      window.addEventListener("mouseup", mouseUpHandler);
    });
  }
});

// Attach event listeners for basic operations which don't need a value parameter
optionsButtons.forEach((button) => {
  button.addEventListener("click", () => {
    modifyText(button.id, false, null);
  });
});

// Get color input elements for text and background
const foreColorInput = document.getElementById("foreColor");
const backColorInput = document.getElementById("backColor");

// Change text color based on user input
foreColorInput.addEventListener("input", () => {
  modifyText("foreColor", false, foreColorInput.value);
});

// Change background color based on user input
backColorInput.addEventListener("input", () => {
  modifyText("backColor", false, backColorInput.value);
});

// Attach event listeners for advanced options that require a value parameter (e.g., fonts)
advancedOptionButton.forEach((button) => {
  if (button.id !== "foreColor" && button.id !== "backColor") {
    button.addEventListener("change", () => {
      modifyText(button.id, false, button.value);
    });
  }
});

// Attach event listener for creating links
linkButton.addEventListener("click", () => {
  let userLink = prompt("Enter a URL");
  if (/http/i.test(userLink)) {
    modifyText(linkButton.id, false, userLink);
  } else {
    userLink = "http://" + userLink;
    modifyText(linkButton.id, false, userLink);
  }
});

// Wait for the DOM content to be loaded
document.addEventListener("DOMContentLoaded", () => {
  // Select the preview button and modal
  const previewButton = document.getElementById("previewButton");
  const previewModal = document.getElementById("previewModal");
  const closePreviewButton = document.getElementById("closePreview");
  const modalPreviewContent = document.getElementById("modal-preview-content");
  const textInput = document.getElementById("text-input");

  // Function to show the modal
  const showPreview = () => {
    const content = textInput.innerHTML; // Get the HTML content from the text input
    modalPreviewContent.innerHTML = content; // Set content to modal
    previewModal.style.display = "flex"; // Show the modal
  };

  // Function to close the modal
  const closePreviewModal = () => {
    previewModal.style.display = "none"; // Hide the modal
  };

  // Event listener for Preview button
  previewButton.addEventListener("click", showPreview);

  // Event listener for Close button in the modal
  closePreviewButton.addEventListener("click", closePreviewModal);

  // Optional: Close the modal when clicking outside of it
  previewModal.addEventListener("click", (e) => {
    if (e.target === previewModal) {
      closePreviewModal();
    }
  });
});

// Function to highlight clicked button
const highlighter = (className, needsRemoval) => {
  className.forEach((button) => {
    button.addEventListener("click", () => {
      if (needsRemoval) {
        // If needs removal, always remove active state
        highlighterRemover(className);
      } else {
        // For buttons that can toggle
        button.classList.toggle("active");
      }
    });
  });
};

// Function to remove highlight from all buttons
const highlighterRemover = (className) => {
  className.forEach((button) => {
    button.classList.remove("active");
  });
};

// Call initializer function when the window loads
window.onload = initializer;