xref: /plugin/dev/www/script.js (revision 89e2f9d12769d43f18c28526a434579f54e63d0b) 
1*89e2f9d1SAndreas Gohrconst plugin = document.getElementById('plugin_info');
2*89e2f9d1SAndreas Gohrconst component = document.getElementById('plugin_components');
3*89e2f9d1SAndreas Gohrconst output = document.getElementById('output');
4*89e2f9d1SAndreas GohrupdatePluginNameStatus();
5*89e2f9d1SAndreas Gohr
6*89e2f9d1SAndreas Gohr/**
7*89e2f9d1SAndreas Gohr * disable the plugin name field when a component has been added
8*89e2f9d1SAndreas Gohr */
9*89e2f9d1SAndreas Gohrfunction updatePluginNameStatus() {
10*89e2f9d1SAndreas Gohr    plugin.querySelector('input').readOnly = output.children.length > 0;
11*89e2f9d1SAndreas Gohr    document.querySelector('button[type=submit]').disabled = output.children.length === 0;
12*89e2f9d1SAndreas Gohr}
13*89e2f9d1SAndreas Gohr
14*89e2f9d1SAndreas Gohr/**
15*89e2f9d1SAndreas Gohr * Create the HTML element for a component
16*89e2f9d1SAndreas Gohr *
17*89e2f9d1SAndreas Gohr * @param {string} plugin The plugin base name
18*89e2f9d1SAndreas Gohr * @param {string} type The component type
19*89e2f9d1SAndreas Gohr * @param {string} name The component name
20*89e2f9d1SAndreas Gohr * @returns {HTMLLIElement|null} null if the component already exists
21*89e2f9d1SAndreas Gohr */
22*89e2f9d1SAndreas Gohrfunction createComponentElement(plugin, type, name) {
23*89e2f9d1SAndreas Gohr    let id = `${type}_plugin_${plugin}`;
24*89e2f9d1SAndreas Gohr    if (name !== '') {
25*89e2f9d1SAndreas Gohr        id += `_${name}`;
26*89e2f9d1SAndreas Gohr    }
27*89e2f9d1SAndreas Gohr
28*89e2f9d1SAndreas Gohr    if (document.getElementById(`component-${id}`)) {
29*89e2f9d1SAndreas Gohr        return null;
30*89e2f9d1SAndreas Gohr    }
31*89e2f9d1SAndreas Gohr
32*89e2f9d1SAndreas Gohr    const li = document.createElement('li');
33*89e2f9d1SAndreas Gohr    li.id = `component-${id}`;
34*89e2f9d1SAndreas Gohr    li.dataset.type = type;
35*89e2f9d1SAndreas Gohr    li.dataset.name = name;
36*89e2f9d1SAndreas Gohr
37*89e2f9d1SAndreas Gohr    const hidden = document.createElement('input');
38*89e2f9d1SAndreas Gohr    hidden.type = 'hidden';
39*89e2f9d1SAndreas Gohr    hidden.name = 'components[]';
40*89e2f9d1SAndreas Gohr    hidden.value = id;
41*89e2f9d1SAndreas Gohr    li.append(hidden);
42*89e2f9d1SAndreas Gohr
43*89e2f9d1SAndreas Gohr    const remove = document.createElement('button');
44*89e2f9d1SAndreas Gohr    remove.type = 'button';
45*89e2f9d1SAndreas Gohr    remove.innerText = 'X';
46*89e2f9d1SAndreas Gohr    remove.title = 'Remove this component';
47*89e2f9d1SAndreas Gohr    remove.addEventListener('click', function (event) {
48*89e2f9d1SAndreas Gohr        li.remove();
49*89e2f9d1SAndreas Gohr        updatePluginNameStatus();
50*89e2f9d1SAndreas Gohr    });
51*89e2f9d1SAndreas Gohr    li.append(remove);
52*89e2f9d1SAndreas Gohr
53*89e2f9d1SAndreas Gohr    const label = document.createElement('span');
54*89e2f9d1SAndreas Gohr    label.innerText = id;
55*89e2f9d1SAndreas Gohr    li.append(label);
56*89e2f9d1SAndreas Gohr
57*89e2f9d1SAndreas Gohr
58*89e2f9d1SAndreas Gohr    // add auto completion for events
59*89e2f9d1SAndreas Gohr    if (type === 'action') {
60*89e2f9d1SAndreas Gohr        const events = document.createElement('input');
61*89e2f9d1SAndreas Gohr        events.type = 'text';
62*89e2f9d1SAndreas Gohr        events.name = `options[${id}]`;
63*89e2f9d1SAndreas Gohr        events.placeholder = 'EVENTS_TO_HANDLE, ...';
64*89e2f9d1SAndreas Gohr        li.append(events);
65*89e2f9d1SAndreas Gohr        new Awesomplete(events, {
66*89e2f9d1SAndreas Gohr            list: ACTION_EVENTS,
67*89e2f9d1SAndreas Gohr            filter: function (text, input) {
68*89e2f9d1SAndreas Gohr                return Awesomplete.FILTER_CONTAINS(text, input.match(/[^,]*$/)[0]);
69*89e2f9d1SAndreas Gohr            },
70*89e2f9d1SAndreas Gohr
71*89e2f9d1SAndreas Gohr            item: function (text, input) {
72*89e2f9d1SAndreas Gohr                return Awesomplete.ITEM(text, input.match(/[^,]*$/)[0]);
73*89e2f9d1SAndreas Gohr            },
74*89e2f9d1SAndreas Gohr
75*89e2f9d1SAndreas Gohr            replace: function (text) {
76*89e2f9d1SAndreas Gohr                var before = this.input.value.match(/^.+,\s*|/)[0];
77*89e2f9d1SAndreas Gohr                this.input.value = before + text + ", ";
78*89e2f9d1SAndreas Gohr            }
79*89e2f9d1SAndreas Gohr        });
80*89e2f9d1SAndreas Gohr    }
81*89e2f9d1SAndreas Gohr
82*89e2f9d1SAndreas Gohr
83*89e2f9d1SAndreas Gohr    return li;
84*89e2f9d1SAndreas Gohr}
85*89e2f9d1SAndreas Gohr
86*89e2f9d1SAndreas Gohr
87*89e2f9d1SAndreas Gohr/**
88*89e2f9d1SAndreas Gohr * Add a component to the output list
89*89e2f9d1SAndreas Gohr */
90*89e2f9d1SAndreas Gohrcomponent.querySelector('button').addEventListener('click', function (event) {
91*89e2f9d1SAndreas Gohr    const plugin_base = plugin.querySelector('input'); // first input field is plugin base name
92*89e2f9d1SAndreas Gohr    const component_type = component.querySelector('select');
93*89e2f9d1SAndreas Gohr    const component_name = component.querySelector('input');
94*89e2f9d1SAndreas Gohr
95*89e2f9d1SAndreas Gohr    if (!plugin_base.validity.valid) {
96*89e2f9d1SAndreas Gohr        plugin_base.reportValidity();
97*89e2f9d1SAndreas Gohr        plugin_base.focus();
98*89e2f9d1SAndreas Gohr        return;
99*89e2f9d1SAndreas Gohr    }
100*89e2f9d1SAndreas Gohr
101*89e2f9d1SAndreas Gohr    if (!component_name.validity.valid) {
102*89e2f9d1SAndreas Gohr        component_name.reportValidity();
103*89e2f9d1SAndreas Gohr        component_name.focus();
104*89e2f9d1SAndreas Gohr        return;
105*89e2f9d1SAndreas Gohr    }
106*89e2f9d1SAndreas Gohr
107*89e2f9d1SAndreas Gohr    const li = createComponentElement(plugin_base.value, component_type.value, component_name.value);
108*89e2f9d1SAndreas Gohr    if (!li) return;
109*89e2f9d1SAndreas Gohr
110*89e2f9d1SAndreas Gohr    output.appendChild(li);
111*89e2f9d1SAndreas Gohr    updatePluginNameStatus();
112*89e2f9d1SAndreas Gohr});
113