[FEATURE] Implement Auto remove Link Box on Focus Out

[Param302]

Implement Auto remove Link Container on Focus Out

Overview

Implement a function in JS which auto-removes the .link-box if it is out of focus and it's child input element is empty in Edit panel.

In above image, we can see there are 4 .link-box elements. 2nd is in focus, 4th is out of focus, but it's input is not empty. 1st and 3rd are out of focus and their child input element is empty. So, we have to implement a JS function such that it removes 1st and 3rd type of .link-box elements.

Requirements

• Whenever user goes out of focus from .link-box element and it's child input element is EMPTY, it should be auto-removed from the #link-container ul (unordered list).
• It should work for both the cases:
  1. If user created a new .link-box using add link button, and it gets out of focus.
  2. If there's an old .link-box whose child input was not-empty earlier, but now it's empty and gets out of focus.
• For adding event Listener, write the code inside addLinkBox() function in index.js.
• Write all the functionality in index.js.
• Must follow the Code Guidelines provided.
• Make sure your code doesn't break old functionality.

Structure

• For adding event listener in .link-box or it's child elements, write code inside addLinkBox() button.

  function addLinkBox() {
      // previous code starts
      const parentLinkBox = document.getElementById("links-container");
      ...
      inputField.focus();
      // previous code ends
  
      // Write your code here
  };

• Structure of .link-box container is defined as follows:

  <li class="link-box">
      <img src="../assets/logos/drag.png" alt="dragger" class="dragger">
      <div class="link">
          <img src="../assets/logos/default.png" alt="linkedin" class="icon">
          <input type="text" placeholder="${randomPlaceholder}" />
          <button class="preview" disabled>
              <img src="../assets/logos/share.png" alt="preview link">
          </button>
      </div>
  </li>`

If you have any suggestion or idea, you're welcome to share.

Let's implement SocialRepo's auto-remove link container feature! 🙌

[DevvMaurya]

whenever i add something and try to add new box all the previous data gone..! Is this happens only with me.?

solution of First case:

// if the input field is empty, remove the child box inputField.addEventListener('focusout',()=>{ if(inputField.value === ""){ childFocus.remove(); } }); @Param302 without saving data we couldn't implement 2nd case.

[Param302]

whenever i add something and try to add new box all the previous data gone..! Is this happens only with me.?

solution of First case:

// if the input field is empty, remove the child box inputField.addEventListener('focusout',()=>{ if(inputField.value === ""){ childFocus.remove(); } }); @Param302 without saving data we couldn't implement 2nd case.

Oky I guess you are working on this issue, I am assigning you this issue. And while the extension is open the data isn't lost, maybe there's some glitch in yours, can you share a video of exactly what is happening?

[DevvMaurya]

https://github.com/Param302/SocialRepo/assets/105772302/c14c8e09-5f06-4908-a356-b5828bd9220c

@Param302 see i'm adding links in fields and when try to add new box . data is gone.

[DevvMaurya]

https://github.com/Param302/SocialRepo/assets/105772302/4c434d0d-7849-4d72-99eb-b3ba44c0c6e7

@Param302 check this case2:

[Param302]

Media2.mp4

@Param302 check this case2:

Cool! Case 2 is working fine!

[Param302]

Media1.mp4

@Param302 see i'm adding links in fields and when try to add new box . data is gone.

Regarding this issue, there's a bug in code i guess, also we haven't used storage as of now, so this will be fixed in future. Thanks for pointing it out @DevvMaurya

[DevvMaurya]

Okay Got it..👍 did you review solution of both cases? Should I generate PR? @Param302

[Param302]

Okay Got it..👍 did you review solution of both cases? Should I generate PR? @Param302

1st one is not cleared, make the PR, i will review it.

[DevvMaurya]

PR is made. Review it.👍

If you find it help full. I have request to you that please mention me on linkedin so that I can show recruiters about my open source contribution. if don't want to do this i'm not forcing you.