Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Trying to have the X button work

Clicking on the button or around it should remove the player.

Adding code back in I was able to get this far with no errors:

no videos appearing though.

Edit fiddle - JSFiddle - Code Playground

Here is the code with videos appearing:

Edit fiddle - JSFiddle - Code Playground

Here is the full working code: has buttons: Edit fiddle - JSFiddle - Code Playground

Update: Here I have the videos appearing: Edit fiddle - JSFiddle - Code Playground

I think I am a bit closer of it working.

Next, trying to get remove player working.

That should appear in console log.

Working on this code: Edit fiddle - JSFiddle - Code Playground

Code:
 <div id="myModal" class="modal open">
  <div class="modal-content">
    <div class="blog-pager close">
      <a title="Exit" aria-label="Close"></a>
    </div><div class="container">
    <div class="ratio-keeper wrap">
      <div class="video " data-id="1Q1aDAnBsU8"></div>
    </div>  </div>
    <div class="playa"></div>
  </div>
</div>

Code:
const manageUI = (function makeManageUI() {

  function exitClickHandler() {
 
  }

  function addClickToExit(exitButtons) {
    exitButtons.forEach(function addExitButtonHandler(exitButtons) {
      exitButtons.addEventListener("click", exitClickHandler);
    });
  }

  function addExitHandlers(callback) {
    const resetVideo = document.querySelectorAll(".close");
    resetVideo.forEach(function resetVideoHandler(video) {
      video.addEventListener("click", callback);
    });
  }

  function init() {
    const exitButtons = document.querySelectorAll(".close");
    addClickToExit(exitButtons);
  }

  return {
    addExitHandlers,
    init
  };
}());



Code:
 function removePlayer(wrapper) {
    wrapper.player.destroy();
    delete wrapper.player;
    console.log("removePlayer");
  }

  function removePlayerHandler(evt) {
    const el = evt.target;
    //const container = el.closest(".container");
    const wrapper = document.querySelector(".wrap");
    if (wrapper.player) {
      return removePlayer(wrapper);
    }
  }

Code:
  function init() {
    manageCover.init({
      container: ".container"
    });

    manageUI.init({});
    manageUI.addExitHandlers(managePlayer.removePlayerHandler);
  }

  return {
    add: addPlayer,
    init
  };
}());



Code:
 function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function exitClickHandler() {
    const thewrap = document.querySelector(".blog-pager");
    show(thewrap);
    const cover = document.querySelector(".close");
    hide(cover);
  }
 
Current Functionality: Clicking the .close button triggers the exitClickHandler function.
exitClickHandler shows the .blog-pager element and hides the .close element.
This effectively hides the modal and video player.

Improvements for Removing Player: Target the video player directly: Instead of hiding the modal, consider directly removing the video player element from the DOM.

You can achieve this by Selecting the video element using wrapper. player.domNode (assuming the player is the video object).
Calling wrapper.player.domNode.parentNode.removeChild(wrapper.player.domNode) to remove the video element from its parent.

Optimize removePlayer function: You can simplify the removePlayer function by directly calling wrapper.player.destroy() without needing a separate delete wrapper.player.

Update removePlayerHandler: Modify the removePlayerHandler function to call the updated removePlayer function with the relevant wrapper element.

JavaScript:
const manageUI = (function makeManageUI() {
  function addClickToExit(exitButtons) {
    exitButtons.forEach(function addExitButtonHandler(exitButton) {
      exitButton.addEventListener("click", exitClickHandler);
    });
  }

  function addExitHandlers(callback) {
    const resetVideo = document.querySelectorAll(".blog-pager");
    resetVideo.forEach(function resetVideoHandler(video) {
      video.addEventListener("click", callback);
    });
  }

  function init() {
    const exitButtons = document.querySelectorAll(".blog-pager");
    addClickToExit(exitButtons);
  }

  return {
    addExitHandlers,
    init,
  };
})();

const managePlayer = (function makeManagePlayer() {
  function removePlayerHandler(evt) {
    const el = evt.target;
    const wrapper = document.querySelector(".wrap");
    if (wrapper.player) {
      removePlayer(wrapper);
    }
  }

  function init() {
    manageUI.init();
    manageUI.addExitHandlers(removePlayerHandler);
  }

  return {
    init,
  };
})();

function init() {
  managePlayer.init();
  manageUI.init();
}

// Call init to initialize the code
init();

In your addExitHandlers function, you are trying to add the click event to elements with the class .close. However, in your HTML, the close button is within the .blog-pager element. So, you should target .blog-pager instead of .close for event binding.

In the removePlayerHandler function, you are calling managePlayer.removePlayerHandler in addExitHandlers. Instead, you should directly call removePlayerHandler.

There's a typo in the line thewrap in exitClickHandler. It should be theWrap.

Initialize the Code: Ensure that you call init function for both managePlayer and manageUI to initialize the code.
 
Last edited by a moderator:

New Threads

Buy us a coffee!

Back
Top Bottom