2
\$\begingroup\$

I have below code which will fetch the text from json & onclick text , display pop up box in page.... Now i need to give options to change font-family, font color....

But Adding the code in the place of Content is going to be extremely difficult....

Is there any way so that i can improve code structure or write same code in another way ?

enter image description here

JSON :

{        
          "font" : "Arian",
          "x" : 201,
          "y" : 461,
          "src" : "180ef82d1.otf",
          "width" : 679,
          "type" : "text",          
          "text" : "Good Food",          
          "name" : "edit_good_1"
}

script

const lightId = 'light' + layer.name
        const lightIdString = '#' + lightId
        $('.container').append(
            '<a id ="' + layer.name + '" onclick="openPopUp(' + lightId + ')"' +
            '<div class="txtContainer" contenteditable="true" ' +
            'style="' +
            'left: ' + layer.x + 'px; ' +
            'top: ' + layer.y + 'px; ' +            
            '">' + layer.text + '</div></a>' +
            '<div id="light' + layer.name + '" class="white_content" style="' +            
            'top: ' + layer.y + 'px; ' + '"> content <a href="javascript:void(0)" ' +
            'onclick="closePopUp(' + lightId + ')">Close</a></div> <div>'
        );
        document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 'px'

codepen : https://codepen.io/kidsdial/pen/OGbGwN

fiddle : https://jsfiddle.net/kidsdial1/z6eyq4j3/

\$\endgroup\$
2
\$\begingroup\$

Your code is very prone to errors, since you write all your html tags and content as a single string. Containing html and javascript in that way is extremely unsafe.

I would suggest creating your elements with document.createElement() and then using the JSON to set all the attributes. In the function you could just pass the id, and then find the correct json data for that id.

Concept code

function buildPopup(id) {
  let layer = findJsonData(id)

  let popup = document.createElement("div")
  popup.classList.add("txtContainer")
  popup.id = layer.name
  popup.style.left = layer.x + "px"
  popup.style.top = layer.y + "px"
  popup.style.fontFamily = layer.font
  popup.innerHTML = layer.text

  // adding a close button
  let btn = document.createElement("button")
  popup.appendChild(btn)
  btn.addEventListener("click", ()=>{
      closePopup(layer.name)
  })

  document.body.appendChild(popup)
}

Example for calling this function

 <a onclick="openPopUp('edit_good_1')">Open popup</a>

Example for getting the json by id

 // this function will find the right json data for this id  
 function findJsonData(id){
     return {        
      "font" : "Arian",
      "x" : 201,
      "y" : 461,
      "src" : "180ef82d1.otf",
      "width" : 679,
      "type" : "text",          
      "text" : "Good Food",          
      "name" : "edit_good_1"
    }
 }

I realise this is a bit conceptual but hopefully it will point you in the right direction!

JSFiddle

\$\endgroup\$
  • \$\begingroup\$ Thanks a lot, is it possible for you to update your code in codepen i posted in question ? \$\endgroup\$ – vickey colors Apr 9 at 11:45
  • 1
    \$\begingroup\$ My intention was to give you some pointers on how to improve your code 😎, I have added a JSFiddle to show that it works! \$\endgroup\$ – Kokodoko Apr 9 at 11:58
  • \$\begingroup\$ Thanks again, in json i posted in question, there are multiple layers , some layers have images & some have text..... i will try your code in the codepen i posted in question..... \$\endgroup\$ – vickey colors Apr 9 at 12:52
  • 1
    \$\begingroup\$ Bear in mind that if your code becomes too complicated, you can probably simplify it at a higher level. For example, you could define your popups in template tags to save yourself a lot of createElement lines. developer.mozilla.org/en-US/docs/Web/HTML/Element/template \$\endgroup\$ – Kokodoko Apr 9 at 15:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.