JavaScript Selection box and star issues

[tptxdev]

Description:

We want the Selection Box in the first column at https://tptxdev.com/carlist to bring up the same lightbox form that comes up when you click on the button entitled "Get More Information"?

Screencasts:
Development environment (Wix Studio - javascript) - 01.19.2024-08.51.10 Wix Studio development environment
Issue#1 - Selection box - 01.16.2024-13.20.13 The selector does not invoke the lightbox like the button does
Issue#2 - Starred vs un-starred - 01.19.2024-09.00.59 Starred vs un-starred issue
Gist - head section

Copy of what is on the gist

<script>
  let rowsWithStarId = [];
  document.cookie =
    "firstName=Spongebob; expires=Sun, 1 January 2030 12:00:00 UTC; path=/";
  document.cookie =
    "lastName=Squarepants; expires=Sun, 1 January 2030 12:00:00 UTC; path=/";
  let allCookies = document.cookie;
  function setCookies(name, value, daysToLive) {
    const date = new Date();
    date.setTime(date.getTime() + daysToLive * 24 * 60 * 60 * 1000);
    let expires = "expires=" + date.toUTCString();
    document.cookie = `${name}=${value}; ${expires}; path=/`;
  }

  function updateSelect() {
    var selectColumns = document.querySelectorAll("tbody td:nth-child(1)");
    Array.from(selectColumns).forEach(function (selectColumn) {
      var value = selectColumn.innerText;
      if (selectColumn.innerHTML.includes("<style")) {
      } else {
        if (value == "Yes") {
          selectColumn.innerHTML = `
              <style>
          .custom-checkbox {
            display: inline-block;
          }
    
          .custom-checkbox input {
            display: none;
          }
    
          .checkmark {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid black;
            background-color: white;
          }
    
          .custom-checkbox input:checked + .checkmark:after {
            content: "✔️";
            font-size: 16px;
            font-weight: bolder;
            color: black;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
    
          /* Style for the dropdown container */
          .dropdown {
            position: relative;
            display: inline-block;
          }
    
          /* Style for the dropdown button */
          .dropbtn {
            padding: 10px;
            font-size: 16px;
            border: none;
            cursor: pointer;
          }
    
          /* Style for the dropdown content */
          .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
            z-index: 1;
          }
    
          /* Style for the dropdown items */
          .dropdown-content a {
            padding: 12px 16px;
            display: block;
            text-decoration: none;
            color: #333;
          }
    
          /* Change color on hover */
          .dropdown-content a:hover {
            background-color: #f1f1f1;
          }
        </style>
        <div id="checkDiv" style="display: flex; align-items: center; justify-content: center; margin: 0;  margin: auto; padding-top: 30px">
                <div style:"display: block; margin:auto; padding: 28px">
                    <label class="custom-checkbox">
                      <input type="checkbox" checked /> <!-- Set 'checked' attribute -->
                      <span class="checkmark"></span>
                    </label>
    
                    <div class="dropdown">
                      <button class="dropbtn" onclick="toggleDropdown()">▼</button>
    
                      <div class="dropdown-content" id="myDropdown">
                        <a href="#">feature in progress..</a>
                      </div>
                    </div>
                </div>
                </div>
    
     `;
        } else {
          selectColumn.innerHTML = `
    
              <style>
    
          .custom-checkbox {
            display: inline-block;
          }
    
          .custom-checkbox input {
            display: none;
          }
    
          .checkmark {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid black;
            background-color: white;
          }
    
          .custom-checkbox input:checked + .checkmark:after {
            content: "✔️";
            font-size: 16px;
            font-weight: bolder;
            color: black;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
    
          /* Style for the dropdown container */
          .dropdown {
            position: relative;
            display: inline-block;
          }
    
          /* Style for the dropdown button */
          .dropbtn {
            padding: 10px;
            font-size: 16px;
            border: none;
            cursor: pointer;
          }
    
          /* Style for the dropdown content */
          .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
            z-index: 1;
          }
    
          /* Style for the dropdown items */
          .dropdown-content a {
            padding: 12px 16px;
            display: block;
            text-decoration: none;
            color: #333;
          }
    
          /* Change color on hover */
          .dropdown-content a:hover {
            background-color: #f1f1f1;
          }
        </style>
    
              <div id="checkDiv" style="display: flex; align-items: center; justify-content: center; margin: 0;  margin: auto; padding-top: 30px">
                <div style:"display: block; margin:auto; padding: 28px">
          <label class="custom-checkbox">
            <input type="checkbox" />
            <span class="checkmark"></span>
          </label>
    
          <div class="dropdown">
            <button class="dropbtn" onclick="toggleDropdown()">▼</button>
    
            <div class="dropdown-content" id="myDropdown">
              <a href="#">feature in progress..</a>
            </div>
          </div>
          </div>
        </div>
      
                `;
        }
      }
    });
  }
  updateSelect();

  function updateStar() {
    var starColumns = document.querySelectorAll("tbody td:nth-child(2)");
    Array.from(starColumns).forEach(function (starColumn) {
      var value = starColumn.innerText;
      if (starColumn.innerHTML.includes("<img")) {
      } else {
        // if (value == "1") {
        //   starColumn.innerHTML = `<img style="height: 30px; width: 30px; display: block; margin: 0 auto; padding: 20px " src="https://static.wixstatic.com/media/c4ed5a_e0e65c63deef4a769e7c8ce726a27cad~mv2.png" alt="">`;
        // } else {
          starColumn.innerHTML = `<img style="height: 30px; width: 30px; display: block; margin: 0 auto; padding: 20px "  src="https://static.wixstatic.com/media/c4ed5a_439924e569ba4db49dee51859ec99f9c~mv2.png" alt="">`;
        // }
        starColumn.addEventListener("click", function (params) {
          var clickedRowId = this.parentNode.cells[3].innerText;
          console.log('Clicked Row Id: ' + this.parentNode.cells);
          console.log(starColumn.innerHTML);
          if (
            starColumn.innerHTML ==
            `<img style="height: 30px; width: 30px; display: block; margin: 0 auto; padding: 20px " src="https://static.wixstatic.com/media/c4ed5a_439924e569ba4db49dee51859ec99f9c~mv2.png" alt="">`
          ) {
            starColumn.innerHTML = `<img style="height: 30px; width: 30px; display: block; margin: 0 auto; padding: 20px " src="https://static.wixstatic.com/media/c4ed5a_e0e65c63deef4a769e7c8ce726a27cad~mv2.png" alt="">`;
            console.log("set to select");
          } else {
            starColumn.innerHTML = `<img style="height: 30px; width: 30px; display: block; margin: 0 auto; padding: 20px "  src="https://static.wixstatic.com/media/c4ed5a_439924e569ba4db49dee51859ec99f9c~mv2.png" alt="">`;
            console.log("set to off select");
          }

          console.log(
            "Star cell in row with ID " + clickedRowId + " was clicked"
          );
          rowsWithStarId.push(clickedRowId);
          console.log("Rows With Star ID: " + rowsWithStarId);
          setCookies("rowsWithStarId", rowsWithStarId, 365);
          let cDecode = decodeURIComponent(document.cookie);
          let cArray = cDecode.split("; ");
          console.log(cArray);
        });
      }
    });
  }
  updateStar();

  // thumbnail
  setInterval(updateImg, 5000);
  function updateImg() {
    var elements = document.querySelectorAll(".ZTH0AF");
    elements.forEach((element) => {
      if (typeof element.innerHTML == "string") {
        var firstCharacters = element.innerHTML.substring(0, 13);
        var imageURL = "https://" + element.innerHTML;
        if (firstCharacters == "cs.copart.com") {
          element.innerHTML =
            "<img style= 'max-height: 50%; max-width: 100%;' src ='" +
            imageURL +
            "'/>";
        }
      }
    });
    updateSelect();
    updateStar();
  }

  var style = document.createElement("style");
  style.innerHTML = `
                thead,
                tbody {
                  display: block;
                }
                tbody {
                  height: 500px;
                  overflow-y: auto; //vertical scroll
                  overflow-x: auto; //horizontal scroll
                }
              `;
  document.head.appendChild(style);

  // JavaScript function to toggle the visibility of the dropdown content
  function toggleDropdown() {
    var checkbox = document.querySelector(".custom-checkbox input");
    checkbox.checked = !checkbox.checked;
    var dropdownContent = document.getElementById("myDropdown");
    dropdownContent.style.display =
      dropdownContent.style.display === "block" ? "none" : "block";
  }

  // Close the dropdown if the user clicks outside of it
  window.onclick = function (event) {
    if (!event.target.matches(".dropbtn")) {
      var dropdowns = document.getElementsByClassName("dropdown-content");
      for (var i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.style.display === "block") {
          openDropdown.style.display = "none";
        }
      }
    }
  };

  document.addEventListener("DOMContentLoaded", function () {
    document.getElementById("checkDiv").addEventListener("click", function () {
      checkbox.checked = !checkbox.checked;
    });

    // Prevent checkbox click event from propagating to the document click event
    document
      .querySelector(".custom-checkbox")
      .addEventListener("click", function (event) {
        event.stopPropagation();
      });
  });
</script>

 

[Chaos]

To achieve the desired functionality where the selection box in the first column brings up the same lightbox form as the "Get More Information" button, you'll need to modify the existing JavaScript code. Here's a step-by-step guide on how to approach this:

1. Identify Lightbox Function:Locate the JavaScript function that is triggered when the "Get More Information" button is clicked. It seems like there is a function called toggleDropdown(). Ensure that this function contains the logic for displaying the lightbox.
2. Modify updateSelect() Function:Update the updateSelect() function to attach a click event listener to the selection box elements (<div id="checkDiv">). When a selection box is clicked, you'll want to trigger the same function that is called when the "Get More Information" button is clicked.
3. Invoke Lightbox Function:Inside the click event listener for the selection box, invoke the function responsible for displaying the lightbox. If the toggleDropdown() function is the one handling the lightbox, you can call it directly.

Here's an example modification of your existing code:

function updateSelect() {
var selectColumns = document.querySelectorAll("tbody td:nth-child(1)");
Array.from(selectColumns).forEach(function (selectColumn) {
// ... existing code ...

// Add click event listener to the selection box
selectColumn.querySelector("#checkDiv").addEventListener("click", function () {
// Invoke the function that displays the lightbox
toggleDropdown();  // Replace with the actual function name if it's different
});
});
}

Make sure to replace toggleDropdown() with the actual function name that displays the lightbox.
Keep in mind that this assumes the toggleDropdown() function is responsible for displaying the lightbox. If there's a different function, replace toggleDropdown() with the correct function name.
Additionally, check if there are any dependencies or conditions for the lightbox to work properly and make necessary adjustments.