omniJS Alert – display/index sequence, + display of multiple options

draft8 · June 28, 2017, 7:50pm

Experimenting with user interaction here – mainly confined, for the moment at least, to the Alert dialog.

A couple of thoughts:

Display of longer lists of options:

On macOS this quickly gets a bit wide … perhaps a vertical stacking mode of some kind ?

Indexing and display sequencing of objects are reversed

The Left Right sequence in which options are displayed is currently the reverse of the sequence in which options are added, and if the user reverses the sequence of additions, the indexes then turn out to be reversed …

Note that to get my greek alphabet list to display in the expected order, I had to apply an Array.reverse() function to my alphabetic list:

 (function () {
   'use strict';

        // opts :: [String]
        var opts = ["alpha", "beta", "gamma", "delta", "epsilon",
                "zeta", "eta", "theta", "iota", "kappa", "lambda", "mu"
            ],
            alert = new Alert(
                "Longer sets of options",
                "Perhaps easier to read as vertical lists ?"
            ),
            // optAlert :: OmniJS Alert
            optAlert = (
                (opts.concat('OK')
                    .reverse())
                .forEach(function (x) {
                    alert.addOption(x)
                }),
                alert
            );

        // main :: IO () -> IO Int
        optAlert.show(function (result) {
            console.log(result);
        });
    })();

Without that user-applied reversal - the options start on the left at mu, going over the the right at alpha …

Now, with the buttons in the correct order, what do you expect the index of option Gamma (third from left) to be ?

Well, I expected it to be (zero-based index) 2, but in fact it turns out to be 10. Position 0 is at far right …

This seems counter-intuitive to me :-)

Perhaps users would be less confused if:

The display sequence was in the same order as the .addOption sequence
The index sequence was the same as the left right (or top down) display sequence

?

draft8 · June 28, 2017, 9:09pm

FWIW the cleanest route to adding an option list, while getting the reversal ‘for free’, might be to use the invaluable Array.reduceRight(), (the right-to-left twin of the equally useful and general Array.reduce()

( In some languages reduce and reduceRight are called fold and foldr - many different things can be quickly and cleanly done with them)

General example of fold / reduce

(function() {
   'use strict';

    return [1, 2, 3, 4, 5, 6, 7, 8, 9].reduce(
        function (accumulator, x) {
            return accumulator + x;
        },
        0 // Initial value of accumulator
    );

    // --> 45

})();

omniJS example of foldr / reduceRight

(function () {
   'use strict';

    // opts :: [String]
        var opts = ["alpha", "beta", "gamma", "delta", "epsilon",
                "zeta", "eta", "theta", "iota", "kappa", "lambda", "mu"
            ],
            // optAlert :: OmniJS Alert
            optAlert = opts.reduceRight(
                function (a, x) {
                    return (
                        a.addOption(x),
                        a
                    );
                },
                new Alert(
                    "Longer sets of options",
                    "Perhaps easier to read as vertical lists ?"
                )
            );

        // main :: IO () -> IO Int
        optAlert.show(function (result) {
            console.log(result);
        });
    })();

–>

PS **map**, **filter** and **reduce** were once famously explained in a tweet: https://twitter.com/steveluscher/status/741089564329054208