Need help with plugin making and java script!

Need help Plugins
1

Hi everyone!

I am trying to make a simple plugin as a way to put into practice what I’m currently learning in JavaScript!
my plugin is just provide an element (I called it text+button) that display a text with inline “Read more” button (like in facebook posts), I’m almost finished making this element but the final problem I’m facing is that when you put more than one “text+button” element the first element will work properly put the others if there button clicked they will not work but affect the first element.

I built this feature in the past for a social media site using a HTML element (although I wasn’t familiar with coding) by copying a code from the internet and modifying it in a funny way to make it work. but now I want to improve my coding skills for nocode purposes.

Regarding my plugin the codes I write are this:
For initialize function:

function(instance, context) {
  
  const div = instance.canvas[0];

  const visibleText = document.createElement("p");
  visibleText.style.display = "inline";
  div.appendChild(visibleText);

  const dots = document.createElement("p");
  dots.style.display = "inline";
  div.appendChild(dots);

  const moreText = document.createElement("p");
  moreText.style.display = "none";
  div.appendChild(moreText);

  const butn = document.createElement("button");
  butn.style.display = "inline";    
  div.appendChild(butn);
  
}

for update function:

function(instance, properties, context) {
  
  const div = instance.canvas[0];
    
  const visibleText = div.getElementsByTagName("p")[0];
    visibleText.textContent = properties.text.slice(0, properties.text_length);
    
  const dots = div.getElementsByTagName("p")[1];
    dots.textContent = "... ";
    dots.id = "dots";
    
  const moreText = div.getElementsByTagName("p")[2];
    moreText.textContent = properties.text.slice(properties.text_length) + " ";
    moreText.id = "more";
    
  const butn = div.getElementsByTagName("button")[0];
    butn.textContent = properties.button_name_when_collapsed;
    butn.id = "myBtn";
    butn.onclick = myFunction;
    
    butn.style.backgroundColor = properties.btn_backgroun_color1;
    butn.style.color = properties.btn_name_color1;
    let btnfontsize = properties.btn_name_size1 + "px";
    butn.style.fontSize = btnfontsize;
    if (properties.button_with_border == true) {
        butn.style.border = "1px solid #000";
    }
    else {
        butn.style.border = "none";
    }
    
  if (properties.text.length <= properties.text_length) {
      butn.style.display = "none";
      dots.style.display = "none";
  }

    
  function myFunction() {
      const dots = document.getElementById("dots");
      const moreText = document.getElementById("more");
      const btnText = document.getElementById("myBtn");
      
      if (dots.style.display === "none") {
          dots.style.display = "inline";
          btnText.innerHTML = properties.button_name_when_collapsed;
          moreText.style.display = "none";         
      }
      else {
          dots.style.display = "none";
          btnText.innerHTML = properties.button_name_when_expanded;
          moreText.style.display = "inline";
      }
  }
  
}

I hope some one can help me understand this problem and found a solutin

2

Coming from someone who was writing plugin code this morning: Why make a plugin for this, just wondering. What you’re describing would be easier using bubbles nocode expression builder, groups, and conditionals.

1 Like
3

My first goal of building this plugin is to improve my coding skills for nocode purposes, so for this goal I need to understand what is the problem in my code.

On the other hand, I didn’t understand what the “expression builder” is, and I dont know a nocode way to do this, I would be glad and grateful if you would explain this way. My be if it is an advanced way, it would be reasonable to build a tool that simplifies it!

4

where is the best place to get an answer for this question?