Scratchaddons: dynamic length options

[jeffalo]

Is your feature request related to a problem? Please describe.

I want to make an addon for the forums where you have predifined strings you can send. I don't want to have to limit the amount to 5 or something and make each string option manually.

Describe the solution you'd like

a new option type that had a dynamic length of multi strings if that makes sense.

I'll send a mockup soon™️

Describe alternatives you've considered

creating a custom options menu for my addon but that's bad UX, probably not good and technically not exactly very possible

Additional context

i send mockup soon

[jeffalo]

@WorldLanguages knows what i mean hopefuly

[GrahamSH-LLK]

I get it. That would be great!

[WorldLanguages]

@JeffaloBob To be honest I don't think having this complexity in the settings page is worth the effort. Is this for a forum addon with predefined messages? If so, I suggest you make it so you can configure the addon in the same place where you'd use it, and use localStorage to save the settings.

[GrahamSH-LLK]

That would be good. It could be something like https://en.scratch-wiki.info/wiki/User:Kenny2scratch/Project_Guides/Canned_Edit_Summaries

[GrahamSH-LLK]

This is the code for that...

The code

var cannedSummaries = window.localStorage.getItem('cannedSummaries') || '';
function done(settings) {
    var summs = settings.split(';;');
    var cbs = document.querySelector('.editCheckboxes');
    var choose = document.getElementById('cannedsumm-chooseelem');
    if (choose) choose.remove();
    choose = document.createElement('select');
    choose.id = 'cannedsumm-chooseelem';

    var label = document.getElementById('wpSummaryLabel');
    label.addEventListener('click',function(e){askForSummary("Add an edit summary below.");});

    var choosesum = document.createElement('option');
    choosesum.id = 'cannedsumm-choose';
    choosesum.innerHTML = 'Choose a canned summary';
    choose.appendChild(choosesum);

    summs.filter(function(i){
        return i.trim() !== '';
    }).forEach(function(i){
        var summ = document.createElement('option');
        summ.title = 'Insert canned edit summary';
        summ.innerHTML = i;
        choose.appendChild(summ);
    });
    var newsum = document.createElement('option');
    newsum.id = 'cannedsumm-new';
    newsum.innerHTML = 'Add new summary...';
    choose.appendChild(newsum);
    var delsum = document.createElement('option');
    delsum.id = 'cannedsumm-del';
    delsum.innerHTML = 'Delete all your summaries';
    choose.appendChild(delsum);
    choose.addEventListener('change', function() {
        var chosen = choose.options[choose.selectedIndex];
        switch (chosen.id) {
            case 'cannedsumm-new':
                askForSummary("Add an edit summary below.");
                break;
            case 'cannedsumm-choose':
                break;
            case 'cannedsumm-del':
                cannedSummaries = '';
                window.localStorage.removeItem('cannedSummaries');
                done(cannedSummaries);
                break;
            default:
                document.getElementById('wpSummary').value = chosen.innerHTML + ') ([[User:Kenny2scratch/Project Guides/Canned Edit Summaries|canned edit summary]]';
                document.getElementById('wpSave').click();
        }
    });
    var wrapper = document.createElement('div');
    wrapper.style.marginTop = '1em';
    wrapper.appendChild(choose);
    cbs.appendChild(wrapper);
}
function askForSummary(message) {
    var dim = document.createElement('div');
    dim.style.width = '100%'; dim.style.height = '100%';
    dim.style.position = 'fixed';
    dim.style.left = '0'; dim.style.top = '0';
    dim.style.backgroundColor = 'rgba(0,0,0,0.5)';
    dim.style.zIndex = '800';

    var box = document.createElement('div');
    box.style.borderRadius = '5px';
    box.style.backgroundColor = '#f0f0f0';
    box.style.border = '1px solid #c0c0c0';
    box.style.width = '20em';
    box.style.position = 'fixed';
    box.style.left = '45%';
    box.style.top = '45%';
    box.style.zIndex = '801';
    box.style.padding = '1em';

    var content = document.createElement('p');
    content.innerHTML = message + ' ';
    var dismiss = document.createElement('a');
    dismiss.href = '#';
    dismiss.onclick = function(){
        dim.style.display = 'none';
        box.style.display = 'none';
        done(cannedSummaries);
        return false;
    };
    dismiss.innerHTML = '(dismiss)';
    content.appendChild(dismiss);

    var input = document.createElement('input');
    input.type = 'text';
    input.style.width = '19em';
    input.style.margin = '1em';
    input.placeholder = 'Enter an edit summary to can';
    input.onkeypress = function(e){
        if (!e) e = window.event;
        if (e.key == 'Enter') {
            cannedSummaries += this.value + ';;';
            window.localStorage.setItem('cannedSummaries', cannedSummaries);
            dismiss.click();
        }
    };

    var del = document.createElement('a');
    del.href = '#';
    del.style.color = 'red';
    del.innerHTML = 'Delete all of your canned edit summaries';
    del.onclick = function(){
        cannedSummaries = '';
        window.localStorage.removeItem('cannedSummaries');
        dismiss.click();
        return false;
    };

    box.appendChild(content);
    box.appendChild(input);
    box.appendChild(del);

    document.body.appendChild(dim);
    document.body.appendChild(box);
}
window.addEventListener('load', function(){
if (['edit', 'submit'].includes(mw.config.get('wgAction')) && !(window.location.href.includes('section=new'))) {
    done(cannedSummaries);
}
});
console.log('Loaded Canned Edit Summaries');'''

[Explosion-Scratch]

Uhm… I see lots of .innerHTML in there…

[GrahamSH-LLK]

I know. That's just the code, that can be adapted for Kenny2scratch's canned edit summaries for the Scratch Wiki.

[jeffalo]

@JeffaloBob To be honest I don't think having this complexity in the settings page is worth the effort. Is this for a forum addon with predefined messages? If so, I suggest you make it so you can configure the addon in the same place where you'd use it, and use localStorage to save the settings.

i could see this being used as a whitelist/blacklist in the more links addon, and probably in other addons.

also is there a real name for this, i can't find anything online

[mxmou]

also is there a real name for this, i can't find anything online

List? Table? Or, if you want it to be complicated, variable-length list of strings.

[jeffalo]

variable-length list of strings

oh! ok yes then those

[GrahamSH-LLK]

Rejected

[mxmou]

Rejected

Why?

[GrahamSH-LLK]

Ask @WorldLanguages

[TheColaber]

W_L reconsidered this and it's being worked on in #1342

[jeffalo]

🎉🎉🎉🎉🎉🎉🎉🎉 this issue is so old, finally coming to light!!!