Starting point for plugin development

May be this simple example can help to start with plugin development.
You need two plugin fields for this example: name and label

Function initialize:

function(instance, context) {
let el = $('<input class="accent" type="radio" />');
let label = $('<label></label>');
  instance.canvas.append(el,label);
  instance.data.el = el;
  instance.data.label = label;
}

Function update:

function(instance, properties, context) {
let radio = instance.data.el;
let label = instance.data.label;
let uniqid = "a" + Date.now();
    radio.attr("name",properties.name);
    radio.attr("id",uniqid);
    label.attr("for",uniqid);
    label.text(properties.label);
    instance.canvas.append(radio,label);  
}

Function preview:

function(instance, properties) {
let el = $('<input type="radio" id="radio" class="accent"><label for="radio">Radio Button</label>');
instance.canvas.append(el);
}
3 Likes

and what is this plugin supposed to do?

It doesn’t “do” anything. But ya know errbody gotta start somewhere.

1 Like

It helps bring clarity to getting those functions working :rocket: :rocket: :rocket:

After that … use your magic :wink: :fire: :fire: :fire:

Great job @mdwp.post Thanks for sharing!

2 Likes

What are those functions. I’m not really clear on what the example functions do, or how to apply any other magic to it.

1 Like

The example renders a radio button. And if you create many radios and give them alle the same name you will have a working radio button group.

2 Likes

Amen :fire:

Create HTML elements in the initialization code. Append the elements to the canvas and set a vairaible with instance.data.el = el.
The use the instance variables in the update function and add HTML attributes and/or CSS to the elements. That’s all you have to do for most plugins.

1 Like

Thanks @mdwp.post

This was helpful to get a sense of what this is about

1 Like