admin.min.js

/**
 * Copyright 2005-2010 Jan Kanters
 * Copyright 2011-2022 Christoph M. Becker
 *
 * This file is part of Advancedform_XH.
 *
 * Advancedform_XH is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * Advancedform_XH is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Advancedform_XH.  If not, see <http://www.gnu.org/licenses/>.
 */

// @ts-check

(function ($) {
    "use strict";

    /**
     * Property indexes.
     */
    var PROP_SIZE = 0;
    var PROP_COLS = 0;
    var PROP_MAXLEN = 1;
    var PROP_ROWS = 1;
    var PROP_DEFAULT = 2;
    var PROP_VALUE = 2;
    // var PROP_FTYPES = 2;
    var PROP_CONSTRAINT = 3;
    var PROP_ERROR_MSG = 4;

    /** @type {Object<string, any>} */
    var config;

    /**
     * Returns whether type designates a selection field (select, checkbox or radio).
     *
     * @param {String}  type
     * @return {boolean}
     */
    function isSelectType(type) {
        return ['radio', 'checkbox', 'select', 'multi_select'].indexOf(type) >= 0;
    }


    /**
     * Returns whether type designates is a select field.
     *
     * @param {String}  type
     * @return {boolean}
     */
    function isRealSelectType(type) {
        return type == 'select' || type == 'multi_select';
    }


    /**
     * Returns whether type designates a multi selection field (select multiple or checkbox).
     *
     * @param {String}  type
     * @return {boolean}
     */
    function isMultiType(type) {
        return type == 'checkbox' || type == 'multi_select';
    }


    /**
     * Returns the property labels for the given type.
     *
     * @param {String} type
     * @return {Array}
     */
    function propLabels(type) {
        switch (type) {
            case 'custom':
                return ['size', 'maxlen', 'default', 'constraint', 'error_msg'];
            case 'text':
            case 'from_name':
            case 'from':
            case 'mail':
            case 'date':
            case 'number':
            case 'password':
                return ['size', 'maxlen', 'default'];
            case 'file':
                return ['size', 'maxlen', 'ftypes'];
            case 'textarea':
                return ['cols', 'rows', 'default'];
            case 'hidden':
            case 'output':
                return ['value'];
            default:
                return [];
        }
    }


    /**
     * Returns the visible properties of the given type.
     *
     * @param {String} type
     * @return {Array}
     */
    function visibleProps(type) {
        switch (type) {
            case 'custom':
                return [PROP_SIZE, PROP_MAXLEN, PROP_DEFAULT, PROP_CONSTRAINT, PROP_ERROR_MSG];
            case 'text':
            case 'from_name':
            case 'from':
            case 'mail':
            case 'date':
            case 'number':
            case 'password':
            case 'file':
                return [PROP_SIZE, PROP_MAXLEN, PROP_DEFAULT];
            case 'textarea':
                return [PROP_COLS, PROP_ROWS, PROP_DEFAULT];
            case 'hidden':
            case 'output':
                return [PROP_VALUE];
            default:
                return [];
        }

    }

    /**
     * Gets selected fields properties.
     *
     * @return {Array}
     */
    function getProperties() {
        return $('#advfrm-fields tbody tr.selected input[name="advfrm-props[]"]')
            .val().split('\u00A6');
    }

    /**
     * Sets the selected fields properties.
     *
     * @param  {Array}  props
     * @return {void}
     */
    function setProperties(props) {
        $('#advfrm-fields tbody tr.selected input[name="advfrm-props[]"]')
            .val(props.join('\u00A6'));
    }

    /**
     * Adjusts properties when type is changed.
     *
     * @param {Event} ev
     * @return {void}
     */
    function changeType(ev) {
        var target = /** @type {HTMLSelectElement} */ (ev.currentTarget);
        var props = getProperties();
        var wasSelect = isSelectType(target.dataset.oldvalue);
        var isSelect = isSelectType(target.value);
        if (wasSelect !== isSelect) {
            var val = isSelect ? '\u00A6' : '\u00A6\u00A6\u00A6';
            $('#advfrm-fields tbody tr.selected input[name="advfrm-props[]"]').val(val);
        } else if (wasSelect && isSelect
                && isRealSelectType(target.dataset.oldvalue) != isRealSelectType(target.value)) {
            props[PROP_SIZE] = '';
            setProperties(props);
        } else if (target.dataset.oldvalue == 'textarea' || target.value == 'textarea') {
            props[PROP_ROWS] = '';
            setProperties(props);
        }
        target.dataset.oldvalue = target.value;
    }


    /**
     * Highlights the selected row.
     *
     * @param {Event} ev
     * @return {void}
     */
    function highlightRow(ev) {
        var obj = $(ev.currentTarget);
        $('#advfrm-fields tbody tr').removeClass('selected');
        obj.parent().parent().addClass('selected');
    }

    /**
     * Highlights the selected row.
     *
     * @param {Event} ev
     * @return {void}
     */
    function highlightPropsRow(ev) {
        var obj = $(ev.currentTarget);
        $('#advfrm-prop-fields tbody tr').removeClass('selected');
        obj.parent().parent().addClass('selected');
    }

    /**
     * Sets the label according to the field name.
     *
     * @param {Event} ev
     * @return {void}
     */
    function fillLabel(ev) {
        var lbl = $('#advfrm-fields tbody tr.selected input[name="advfrm-label[]"]');
        if (lbl.val() == '') {
            lbl.val($(ev.currentTarget).val());
        }
    }


    /**
     * Adds new row.
     *
     * @return {void}
     */
    function add() {
        var row;
        row = $('#advfrm-fields tbody tr:first').clone();
        row.removeClass('selected');
        row.find('input[type="text"]').val('');
        row.find('select').val('text');
        row.find('input[name="advfrm-props[]"]').val('\u00A6\u00A6\u00A6');
        row.find('input[type="checkbox"]').prop('checked', false);
        row.find('td > *[name]').focus(highlightRow);
        row.find('td > a').click(highlightRow);
        row.find('td > a').click(props);
        row.find('td > input[name="advfrm-field[]"]').change(fillLabel);
        row.find('td > select[name="advfrm-type[]"]').change(changeType);
        row.find('td > input[name="advfrm-required[]"]').val(0);
        $('#advfrm-fields').append(row);
        row.find('td > input[name="advfrm-field[]"]').focus();
    }

    /**
     * Adds new row.
     *
     * @return {void}
     */
    function propsAdd() {
        var row;
        row = $('#advfrm-prop-fields tbody tr:first').clone();
        row.removeClass('selected');
        row.find('input[name="advfrm-select-props-default"]').prop("checked", false);
        row.find('input[name="advfrm-select-props-opt"]').val('')
                .focus(highlightPropsRow);
        $('#advfrm-prop-fields').append(row);
        row.find('input[name="advfrm-select-props-opt"]').focus();
    }

    /**
     * Deletes the selected row.
     *
     * @return {void}
     */
    function deleteSelected() {
        if ($('#advfrm-fields tbody tr').length > 1) {
            $('#advfrm-fields tbody tr.selected').remove();
        }
    }

    /**
     * Deletes the selected row.
     *
     * @return {void}
     */
    function propsDeleteSelected() {
        if ($('#advfrm-prop-fields tbody tr').length > 1) {
            $('#advfrm-prop-fields tbody tr.selected').remove();
        }
    }

    /**
     * Moves the selected row up.
     *
     * @return {void}
     */
    function up() {
        var sel = $('#advfrm-fields tbody tr.selected');
        sel.insertBefore(sel.prev());
    }

    /**
     * Moves the selected row up.
     *
     * @return {void}
     */
    function propsUp() {
        var sel = $('#advfrm-prop-fields tbody tr.selected');
        sel.insertBefore(sel.prev());
    }

    /**
     * Moves the selected row down.
     *
     * @return {void}
     */
    function down() {
        var sel = $('#advfrm-fields tbody tr.selected');
        sel.insertAfter(sel.next());
    }

    /**
     * Moves the selected row down.
     *
     * @return {void}
     */
    function propsDown() {
        var sel = $('#advfrm-prop-fields tbody tr.selected');
        sel.insertAfter(sel.next());
    }

    /**
     * Unchecks all selection defaults.
     *
     * @return {void}
     */
    function clear_defaults() {
        $('#advfrm-prop-fields input[name="advfrm-select-props-default"]').each(function() {
            $(this).prop("checked", false);
        })
    }


    /**
     * Adjusts and opens the property dialog for the selected row.
     *
     * @return {void}
     */
    function props() {
        var dlg, val, checked;
        var type = $('#advfrm-fields tr.selected select[name="advfrm-type[]"]').val();
        var title = config['label_properties'].replace(/%s/, config['field_'+type]);
        var props = getProperties();
        var isSelect = isSelectType(type);
        var isRealSelect = isRealSelectType(type);
        var isMulti = isMultiType(type);
        var lbls = propLabels(type);
        var vis = visibleProps(type);
        if (isSelect) {
            dlg = $('#advfrm-select-props');
            if (isRealSelect) {
                dlg.find('#advfrm-select-props-orient').hide();
                dlg.find('#advfrm-select-props-size').show();
                dlg.find('#advfrm-select-props-size input').val(props[0]);
            } else {
                dlg.find('#advfrm-select-props-size').hide();
                dlg.find('#advfrm-select-props-orient').show();
                dlg.find('#advfrm-select-props-orient input').eq(props[0]).prop("checked", true);
            }
            props = props.slice(1);
            dlg.find('tr').slice(1).remove();
            var inputType = isMulti ? 'checkbox' : 'radio';
            var radio = dlg.find('input[name="advfrm-select-props-default"]');
            radio.after('<input type="' + inputType + '" name="advfrm-select-props-default" />');
            radio.remove();
            var clone = dlg.find('tr').clone();
            clone.removeClass('selected');
            $.each(props, function(i, elt) {
                if (elt.charAt(0) == '\u25CF') {
                    val = elt.substr(1);
                    checked = true;
                } else {
                    val = elt;
                    checked = false;
                }
                if (i == 0) {
                    dlg.find('input[name="advfrm-select-props-opt"]').val(val);
                    if (checked) {
                        dlg.find('input[name="advfrm-select-props-default"]').prop("checked", true);
                    }
                } else {
                    var newclone = clone.clone();
                    newclone.find('input[name="advfrm-select-props-opt"]').val(val);
                    if (checked) {
                        newclone.find('input[name="advfrm-select-props-default"]').prop("checked", true);
                    }
                    dlg.find('tr:last').after(newclone);
                }
            });
            dlg.find('input[name="advfrm-select-props-opt"]').focus(highlightPropsRow);
        } else {
            dlg = $('#advfrm-text-props');
            var rows = dlg.find('table tr');
            rows.hide();
            for (var i = 0; i < vis.length; i++) {
                var row = rows.eq(vis[i]);
                row.find('td:eq(0)').text(config['label_'+lbls[i]]);
                if (vis[i] == PROP_DEFAULT) {
                    var repl = ['textarea', 'output', 'file'].indexOf(type) >= 0
                            ? '<textarea cols="30"></textarea>'
                            : '<input type="text" size="30"/>';
                    row.find('input, textarea').replaceWith(repl);
                }
                row.show();
            }
            rows.find('input, textarea').each(function(i) {
                $(this).val(props[i]);
            })
        }
        dlg.dialog('option', 'title', title);
        dlg.dialog('open');
    }


    /**
     * Returns if property values are valid.
     *
     * @return {boolean}
     */
    function checkProperties() {
        var elt;
        var type = $('#advfrm-fields tr.selected select[name="advfrm-type[]"]').val();
        if (isSelectType(type)) {
            if (isRealSelectType(type)) {
                elt = $('#advfrm-select-props-size input');
                if (elt.val().match(/^[0-9]*$/) == null) {
                    alert(config['error_invalid_property']);
                    elt.focus();
                    return false;
                }
            }
            var ok = true;
            $('#advfrm-select-props input[name="advfrm-select-props-opt"]').each(function() {
                if ($(this).val().match(/\u00A6|\u25CF/)) {
                    alert(config['error_invalid_property']);
                    $(this).focus();
                    ok = false;
                    return false;
                } else {
                    return true;
                }
            });
            return ok;
        } else {
            var vis = visibleProps(type);
            for (var i = 0; i <= 1; i++) {
                if (vis.indexOf(i) >= 0) {
                    elt = $('#advfrm-text-props input').eq(i);
                    if (elt.val().match(/^[0-9]*$/) == null) {
                        alert(config['error_invalid_property']);
                        elt.focus();
                        return false;
                    }
                }
            }
            if (['textarea', 'hidden', 'output'].indexOf(type) < 0) {
                var maxlen = $('#advfrm-text-props input').eq(PROP_MAXLEN);
                var def = $('#advfrm-text-props input').eq(PROP_DEFAULT);
                if (maxlen.val() != '' && def.val().length > maxlen.val()) {
                    alert(config['error_default_too_long']);
                    def.focus();
                    return false;
                }
            }
        }
        return true;
    }


    /**
     * Returns if form input is valid.
     *
     * @param {Event} ev
     * @return {void}
     */
    function checkForm(ev) {
        var flds, i, fld;
        var req = ['name', 'title', 'to'];
        for (i = 0; i < req.length; i++) {
            fld = $('#advfrm-' + req[i]);
            if (fld.val() == '') {
                alert(config['error_missing_fields']);
                fld.focus();
                ev.preventDefault();
                return;
            }
            if (req[i] == 'name') {
                if (fld.val().match(/^[a-z0-9_]+$/i) == null) {
                    alert(config['error_invalid_field']);
                    fld.focus();
                    ev.preventDefault();
                    return;
                }
            }
        }

        flds = $('#advfrm-fields tbody input[name="advfrm-field[]"]');
        for (i = 0; i < flds.length; i++) {
            fld = $(flds[i]);
            if (fld.val() == '') {
                alert(config['error_missing_fields']);
                fld.focus();
                ev.preventDefault();
                return;
            }
            if (fld.val().match(/^[a-z0-9_]+$/i) == null) {
                alert(config['error_invalid_field']);
                fld.focus();
                ev.preventDefault();
                return;
            }
        }
        for (i = 0; i < flds.length-1; i++) {
            for (var j = i+1; j < flds.length; j++) {
                fld = $(flds[j]);
                if (fld.val() == $(flds[i]).val()) {
                    alert(config['error_duplicate_fields']);
                    fld.focus();
                    ev.preventDefault();
                    return;
                }
            }
        }

        flds = $('#advfrm-fields select[name="advfrm-type[]"]');
        var fromName = 0;
        var from = 0;
        for (i = 0; i < flds.length; i++) {
            if (flds[i].value == 'from_name') {
                if (++fromName > 1) {
                    alert(config['error_too_many_senders']);
                    $(flds[i]).focus();
                    ev.preventDefault();
                    return;
                }
            } else if (flds[i].value == 'from') {
                if (++from > 1) {
                    alert(config['error_too_many_senders']);
                    $(flds[i]).focus();
                    ev.preventDefault();
                    return;
                }
            }
        }
    }


    /**
     * Gets the name of the form to import and submits the form.
     *
     * @param {Event} ev
     * @return {void}
     */
    function importForm(ev) {
        var target = /** @type {HTMLFormElement} */ (ev.currentTarget);
        var name = window.prompt(config['message_import_form']);
        if (name !== null && name.match(/^[a-z0-9_]+$/i)) {
            target.form.action += name;
        } else {
            ev.preventDefault();
        }
    }


    /**
     * Initialization.
     */
    $(function() {
        var meta = /** @type {HTMLMetaElement} */ (document.getElementsByName("advancedform.config")[0]);
        config = JSON.parse(meta.content);

        //$('#advfrm-accordion').accordion(); ACCORDION!
        $('#advfrm-name').change(function() {
            var title = $('#advfrm-title');
            if (title.val() == '') {
                title.val($(this).val());
            }
        });
        $('#advfrm-name').focus();
        $('#advfrm-fields tbody td > *[name]').focus(highlightRow);
        $('#advfrm-fields tbody td > button').click(highlightRow);
        $('#advfrm-fields tbody td > button').click(props);
        $('#advfrm-fields tbody input[name="advfrm-field[]"]').change(fillLabel);
        $('#advfrm-fields tbody select[name="advfrm-type[]"]')
            .focus(function () {this.dataset.oldvalue = this.value;})
            .change(changeType);

        $('.advfrm-import-form button').click(importForm);

        $('#advfrm-editor > form').submit(checkForm);

        $('.toolbar .advfrm-add').click(add);
        $('.toolbar .advfrm-delete').click(deleteSelected);
        $('.toolbar .advfrm-up').click(up);
        $('.toolbar .advfrm-down').click(down);

        $('.toolbar .advfrm-prop-add').click(propsAdd);
        $('.toolbar .advfrm-prop-delete').click(propsDeleteSelected);
        $('.toolbar .advfrm-prop-up').click(propsUp);
        $('.toolbar .advfrm-prop-down').click(propsDown);
        $('.toolbar .advfrm-prop-clear_defaults').click(clear_defaults);

        $('#advfrm-editor input.submit').show();

        $('#advfrm-text-props').dialog({
            autoOpen: false,
            modal: true,
            width: 450,
            buttons: [{
                text: config['button_ok'],
                click: function() {
                    if (!checkProperties()) {
                        return;
                    }
                    setProperties($(this).find('input, textarea').map(function() {
                        return $(this).val();
                    }).get());
                    $(this).dialog('close');
                }
            }, {
                text: config['button_cancel'],
                click: function() {$(this).dialog('close')}
            }]
        });

        $('#advfrm-select-props').dialog({
            autoOpen: false,
            modal: true,
            buttons: [
                {
                    text: config['button_ok'],
                    click: function() {
                        if (!checkProperties()) {
                            return;
                        }
                        var props = $(this).find('input[name="advfrm-select-props-opt"]').map(function() {
                            var def = $(this).parents('tr').find('input[name="advfrm-select-props-default"]').prop("checked") ? '\u25CF' : '';
                            return def + $(this).val();
                        }).get();
                        props.unshift($('#advfrm-select-props-size').css('display') == 'none'
                                ? +$('#advfrm-select-props-orient input').eq(1).prop("checked")
                                : $('#advfrm-select-props-size input').val());
                        setProperties(props);
                        $(this).dialog('close');
                    }
                },
                {
                    text: config['button_cancel'],
                    click: function() {$(this).dialog('close')}
                }
            ]
        });
    });
}(jQuery));