Dynamic Options

Plugins Third Party Plugins
1

Hi,
I want to dynamically change select options but i can not.

How can i do, please check my code and help me.

thanks

var attributeoptions = [{
key: ‘icon’,
name: ‘icon’
},
{
key: ‘title’,
name: ‘title’
},
{
key: ‘description’,
name: ‘description’
},
{
key: ‘link’,
name: ‘link’
},
{
key: ‘target’,
name: ‘target’
},
{
key: ‘id’,
name: ‘id’
},
{
key: ‘class’,
name: ‘class’
},
{
key: ‘style’,
name: ‘style’
},
];

var shortcodestartx = new PgComponentType(‘zh.shortcodestartx’, ‘Shortcode STARTx’);
shortcodestartx.selector = ‘*’;
shortcodestartx.parent_selector = ‘body’;
shortcodestartx.tags = ‘major’;
shortcodestartx.sections = {
‘zh.shortcodestartx’: {
name: ‘SHORTCODE OPTIONSx’,
fields: {
‘zh.shortcodestartx.funcnamex’: {
type: ‘select’,
action: ‘apply_css’,
name: ‘Namex’,
live_update: true,
options: function (xyz, pgel) {
var xparent = pgel.closest(‘code.shortcode’);

                if (xparent.tagName != 'code') {
                    return attributeoptions;
                } else {

                    /*
                    array('icon' => '','title' => '','description' => '','link' => '','target' => '','id' => '','class' => '','style' => ''),
                    */
                    var x = xparent.html().split('array(');
                    var x1 = x[1].split('),')[0];
                    var xmatch = (x1.replace(/\s/g, '')).split(" ").join("").split("'").join("").split(",").join("").split("=>");
                    console.warn(xmatch);
                    var result = [];
                    for (var i = 0; i < xmatch.length - 1; i++) {
                        result.push({
                            key: xmatch[i] + "-test",
                            name: xmatch[i] + "-test"
                        });
                    }
                    return result;
                }
            },
            name: 'Attributes',
            get_value: function (pgel) {
                return 'title --not implement yet';
            }

        },
        set_value: function (pgel, value, values, oldValue, eventType) {
            return 'title -- not implement yet';
        }
    }
}

};

f.addComponentType(shortcodestartx);

2

I’m happy now :slight_smile:
But I need a little trick on option item selected.
How can i option item value selected?
My little plugin code is

var shortcodestartx = new PgComponentType(‘zh.shortcodestartx’, ‘Shortcode STARTx’);
shortcodestartx.selector = ‘*’;
shortcodestartx.parent_selector = ‘body’;
//shortcodestartx.tags = ‘major’;
shortcodestartx.sections = {
‘zh.shortcodestartx’: {
name: ‘SHORTCODE OPTIONSx’,
fields: {
‘zh.shortcodestartx.funcnamex’: {
type: ‘select’,
action: ‘custom’,
name: ‘Variable Name’,
show_empty : true,
live_update: true,
async_options_function: true,
fill_list_on_open: true,
options: function(pgel){
var xparent = pinegrow.selectedElements.getLastSelected();
if(xparent.tagName==‘code’){
return [];
}
while(xparent.tagName!=‘code’){
xparent = xparent.parent;
if(xparent.tagName==‘body’ || xparent.tagName==‘code’){
break;
}
}
if(xparent.tagName!=‘code’){
return [];//attributeoptions;
}else{
var x = xparent.html().split(‘array(’);
var x0 = x[0];
var x1 = x[1].split(’),’)[0];
var xmatch = (x1.replace(/\s/g, ‘’)).split(" “).join(”").split("’").join("").split(",").join("").split("=>");
var result = [];
for(var i=0;i<xmatch.length-1;i++){
result.push(
{
key: xmatch[i],
name: xmatch[i]
}
);
}
return result;
}
},
get_value: function (pgel) {
if(pgel.attr(‘wp-call-function’) !=’’){
return pgel.attr(‘wp-call-function’);
}
return ‘’;
},
set_value: function (pgel, value, values, oldValue, eventType) {

                if(value) {
                    pgel.attr('wp-call-function', value);
                } else {
                    if(pgel.attr('wp-call-function') != '') {
                        pgel.removeAttr('wp-call-function');
                    }
                }
                return value;
            }
        }
    }
}

};