egroupware/api/js/etemplate/et2_core_editableWidget.js

"use strict";
/**
 * EGroupware eTemplate2 - JS Widget base class
 *
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @package etemplate
 * @subpackage api
 * @link http://www.egroupware.org
 * @author Nathan Gray
 */
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
/*egw:uses
    et2_core_inputWidget;
*/
var et2_core_inputWidget_1 = require("./et2_core_inputWidget");
var et2_core_inheritance_1 = require("./et2_core_inheritance");
/**
 * et2_editableWidget derives from et2_inputWidget and adds the ability to start
 * readonly, then turn editable on double-click.  If we decide to do this with
 * more widgets, it should just be merged with et2_inputWidget.
 *
 * @augments et2_inputWidget
 */
var et2_editableWidget = /** @class */ (function (_super) {
    __extends(et2_editableWidget, _super);
    /**
     * Constructor
     */
    function et2_editableWidget(_parent, _attrs, _child) {
        var _this = this;
        // 'Editable' really should be boolean for everything else to work
        if (_attrs.readonly && typeof _attrs.readonly === 'string') {
            _attrs.readonly = true;
            var toggle_readonly = _attrs.toggle_readonly;
        }
        // Call the inherited constructor
        _this = _super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_editableWidget._attributes, _child || {})) || this;
        if (typeof toggle_readonly != 'undefined')
            _this._toggle_readonly = toggle_readonly;
        return _this;
    }
    et2_editableWidget.prototype.destroy = function () {
        var node = this.getInputNode();
        if (node) {
            jQuery(node).off('.et2_editableWidget');
        }
        _super.prototype.destroy.call(this);
    };
    /**
     * Load the validation errors from the server
     *
     * @param {object} _attrs
     */
    et2_editableWidget.prototype.transformAttributes = function (_attrs) {
        _super.prototype.transformAttributes.call(this, _attrs);
    };
    et2_editableWidget.prototype.attachToDOM = function () {
        var res = _super.prototype.attachToDOM.call(this);
        var node = this.getDOMNode();
        if (node && this._toggle_readonly) {
            jQuery(node)
                .off('.et2_editableWidget')
                .on("dblclick.et2_editableWidget", this, function (e) {
                e.data.dblclick.call(e.data, this);
            })
                .addClass('et2_clickable et2_editable');
        }
        else {
            jQuery(node).addClass('et2_editable_readonly');
        }
        return res;
    };
    et2_editableWidget.prototype.detatchFromDOM = function () {
        _super.prototype.detatchFromDOM.call(this);
    };
    /**
     * Handle double click
     *
     * Turn widget editable
     *
     * @param {DOMNode} _node
     */
    et2_editableWidget.prototype.dblclick = function (_node) {
        // Turn off readonly
        this.set_readonly(false);
        jQuery('body').on("click.et2_editableWidget", this, function (e) {
            // Make sure click comes from body, not a popup
            if (jQuery.contains(this, e.target) && e.target.type != 'textarea') {
                jQuery(this).off("click.et2_editableWidget");
                e.data.focusout.call(e.data, this);
            }
        });
    };
    /**
     * User clicked somewhere else, save and turn back to readonly
     *
     * @param {DOMNode} _node Body node
     * @returns {et2_core_editableWidgetet2_editableWidget.et2_core_editableWidgetAnonym$0@call;getInstanceManager@call;submit}
     */
    et2_editableWidget.prototype.focusout = function (_node) {
        var value = this.get_value();
        var oldValue = this._oldValue;
        // Change back to readonly
        this.set_readonly(true);
        // No change, do nothing
        if (value == oldValue)
            return;
        // Submit
        if (this.options.save_callback) {
            var params = [value];
            if (this.options.save_callback_params) {
                params = params.concat(this.options.save_callback_params.split(','));
            }
            egw.json(this.options.save_callback, params, function () {
            }, this, true, this).sendRequest();
        }
        else {
            this.set_value(value);
            return this.getInstanceManager().submit();
        }
    };
    /**
     * Called whenever the template gets submitted.
     * If we have a save_callback, we call that before the submit (no check on
     * the result)
     *
     * @param _values contains the values which will be sent to the server.
     * 	Listeners may change these values before they get submitted.
     */
    et2_editableWidget.prototype.submit = function (_values) {
        if (this.options.readonly) {
            // Not currently editing, just continue on
            return true;
        }
        // Change back to readonly
        this.set_readonly(true);
        var params = [this.get_value()];
        if (this.options.save_callback_params) {
            params = params.concat(this.options.save_callback_params.split(','));
        }
        if (this.options.save_callback) {
            egw.json(this.options.save_callback, params, function () {
            }, this, true, this).sendRequest();
        }
        return true;
    };
    et2_editableWidget._attributes = {
        readonly: {
            name: "readonly",
            type: "string",
            default: false,
            description: "If set to 'editable' will start readonly, double clicking will make it editable and clicking out will save",
            ignore: true // todo: not sure why this used to be ignored before migration by default but not anymore
        },
        toggle_readonly: {
            name: "toggle_readonly",
            type: "boolean",
            default: true,
            description: "Double clicking makes widget editable.  If off, must be made editable in some other way."
        },
        save_callback: {
            name: "save_callback",
            type: "string",
            default: et2_no_init,
            description: "Ajax callback to save changed value when readonly is 'editable'.  If not provided, a regular submit is done."
        },
        save_callback_params: {
            name: "readonly",
            type: "string",
            default: et2_no_init,
            description: "Additional parameters passed to save_callback"
        },
        editable_height: {
            name: "Editable height",
            description: "Set height for widget while in edit mode",
            type: "string"
        }
    };
    return et2_editableWidget;
}(et2_core_inputWidget_1.et2_inputWidget));
exports.et2_editableWidget = et2_editableWidget;
//# sourceMappingURL=et2_core_editableWidget.js.map