lexeduct-browser.js

"use strict";

/* REQUIRES yoob/element-factory.js */
/* ASSUMES ``transformer`` object has been created */

var compose = function(g, f) {
    return function(str, data) {
        str = f(str, data);
        return g(str, data);
    };
};

function LexeductUI() {
    var container, input, output, processButton, tranformersPanel;
    var MAX_TRANSFORMER_SLOTS = 8; // TODO dynamic
    var transformerSlots = [];
    var transformerNames;

    this.init = function(cfg) {
        var $this = this;

        container = cfg.container;
        cfg.liveMode = !!cfg.liveMode;

        input = yoob.makeTextArea(container, 40, 20, cfg.initialText);
        input.oninput = function() {
            if ($this.liveMode) {
                $this.process();
            }
        };

        var transformersPanel = yoob.makeDiv(container);
        transformersPanel.style.border = "1px solid black";
        transformersPanel.style.padding = "2px";
        transformersPanel.style.margin = "2px";
        transformersPanel.style.display = "inline-block";
        transformersPanel.style.verticalAlign = "top";

        transformerNames = [["identity", "---"]];
        for (var key in transformer) {
            if (key !== 'identity' && transformer.hasOwnProperty(key)) {
                transformerNames.push([key, key]);
            }
        }

        processButton = yoob.makeButton(transformersPanel, "Process", this.process);
        yoob.makeCheckbox(transformersPanel, cfg.liveMode, "Live mode", function(b) {
            $this.setLiveMode(b);
        });
        yoob.makeLineBreak(transformersPanel);

        for (var i = 0; i < MAX_TRANSFORMER_SLOTS; i++) {
            var slot = this.makeTransformerSlot(transformersPanel, i);
            transformerSlots.push(slot);
        }

        output = yoob.makeTextArea(container, 40, 20);

        this.setLiveMode(cfg.liveMode);
    };

    this.setLiveMode = function(b) {
        this.liveMode = b;
        processButton.disabled = b;
    };

    this.process = function() {
        var t = transformer['identity'].makeTransformer({});
        for (var i = 0; i < transformerSlots.length; i++) {
            var transformerName = transformerSlots[i].name;
            var selectedParams = transformerSlots[i].selectedParams;
            var t2 = transformer[transformerName].makeTransformer(selectedParams);
            t = compose(t2, t);
        }
        var inLines = input.value.split('\n');
        var outLines = [];
        for (var i = 0; i < inLines.length; i++) {
            outLines.push(t(inLines[i]));
        }
        output.value = outLines.join('\n');
    };

    this.updateParametersPanel = function(slot, panel) {
        var parameters = transformer[slot.name].parameters;
        panel.innerHTML = "";  // delete any previous controls
        for (var paramName in parameters) {
            if (parameters.hasOwnProperty(paramName)) {
                var desc = parameters[paramName][0];
                var def = parameters[paramName][1];
                this.makeParameterEditor(slot, panel, paramName, desc, def);
            }
        }
    };

    this.makeParameterEditor = function(slot, panel, paramName, desc, def) {
        var label = yoob.makeSpan(panel, paramName);
        var paramInput = yoob.makeTextInput(panel, 24, def);
        slot.selectedParams[paramName] = def;
        var $this = this;
        paramInput.oninput = function() {
            slot.selectedParams[paramName] = paramInput.value;
            if ($this.liveMode) {
                $this.process();
            }
        };
        yoob.makeLineBreak(panel);
    };

    this.makeTransformerSlot = function(container, index) {
        var slotPanel = yoob.makeDiv(container);
        slotPanel.style.padding = "2px";
        slotPanel.style.margin = "2px";
        slotPanel.style.border = "1px solid black";
        var select = yoob.makeSelect(
            slotPanel, "Transformer " + (index+1), transformerNames
        );
        yoob.makeLineBreak(slotPanel);
        var parametersPanel = yoob.makeDiv(slotPanel);
        parametersPanel.style.textAlign = "right";

        var $this = this;
        select.onchange = function(e) {
            transformerSlots[index].name = select.options[select.selectedIndex].value;
            $this.updateParametersPanel(transformerSlots[index], parametersPanel);
            if ($this.liveMode) {
                $this.process();
            }
        };

        return {
            name: 'identity',
            selectedParams: {}
        };
    };

};