egroupware/api/js/etemplate/et2_widget_tree.js

/**
 * EGroupware eTemplate2 - JS Tree object
 *
 * @link http://community.egroupware.org/egroupware/api/js/dhtmlxtree/docsExplorer/dhtmlxtree/
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @package etemplate
 * @subpackage api
 * @link https://www.egroupware.org
 * @author Nathan Gray
 * @author Ralf Becker
 * @copyright Nathan Gray 2011
 */
/*egw:uses
    et2_core_inputWidget;
    /api/js/egw_action/egw_dragdrop_dhtmlx_tree.js;
    /api/js/dhtmlxtree/codebase/dhtmlxcommon.js;
//	using debugable and fixed source of dhtmltree instead: /api/js/dhtmlxtree/js/dhtmlXTree.js;
    /api/js/dhtmlxtree/sources/dhtmlxtree.js;
    /api/js/dhtmlxtree/sources/ext/dhtmlxtree_json.js;
//	/api/js/dhtmlxtree/sources/ext/dhtmlxtree_start.js;
*/
import { et2_register_widget } from "./et2_core_widget";
import { et2_inputWidget } from "./et2_core_inputWidget";
import { ClassWithAttributes } from "./et2_core_inheritance";
import { et2_no_init } from "./et2_core_common";
import { egw, framework } from "../jsapi/egw_global";
import { EGW_AO_FLAG_IS_CONTAINER, egw_getAppObjectManager, egw_getObjectManager, egwActionObject } from "../egw_action/egw_action.js";
import { dhtmlxtreeItemAOI } from "../egw_action/egw_dragdrop_dhtmlx_tree.js";
import { egwIsMobile } from "../egw_action/egw_action_common.js";
/* no module, but egw:uses is ignored, so adding it here commented out
import '../../../api/js/dhtmlxtree/sources/dhtmlxtree.js';
import '../../../api/js/dhtmlxtree/sources/ext/dhtmlxtree_json.js';
import '../../../api/js/dhtmlxtree/sources/ext/dhtmlxtree_start.js';
 */
/**
 * Tree widget
 *
 * For syntax of nodes supplied via sel_options or autoloading refer to Etemplate\Widget\Tree class.
 *
 * @augments et2_inputWidget
 */
export class et2_tree extends et2_inputWidget {
    /**
     * Constructor
     *
     * @memberOf et2_tree
     */
    constructor(_parent, _attrs, _child) {
        // Call the inherited constructor
        super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_tree._attributes, _child || {}));
        this.input = null;
        /**
         * Regexp used by _htmlencode
         */
        this._lt_regexp = /</g;
        this.input = null;
        this.div = jQuery(document.createElement("div")).addClass("dhtmlxTree");
        this.setDOMNode(this.div[0]);
    }
    destroy() {
        if (this.input) {
            this.input.destructor();
        }
        this.input = null;
        super.destroy();
    }
    /**
     * Get tree items from the sel_options data array
     *
     * @param {object} _attrs
     */
    transformAttributes(_attrs) {
        super.transformAttributes(_attrs);
        // If select_options are already known, skip the rest
        if (this.options && this.options.select_options && !jQuery.isEmptyObject(this.options.select_options)) {
            return;
        }
        let name_parts = this.id.replace(/]/g, '').split('[');
        // Try to find the options inside the "sel-options" array
        if (this.getArrayMgr("sel_options")) {
            // Select options tend to be defined once, at the top level, so try that first
            let content_options = this.getArrayMgr("sel_options").getRoot().getEntry(name_parts[name_parts.length - 1]);
            // Try again according to ID
            if (!content_options)
                content_options = this.getArrayMgr("sel_options").getEntry(this.id);
            if (_attrs["select_options"] && !jQuery.isEmptyObject(_attrs["select_options"]) && content_options) {
                _attrs["select_options"] = jQuery.extend({}, _attrs["select_options"], content_options);
            }
            else if (content_options) {
                _attrs["select_options"] = content_options;
            }
        }
        // Check whether the options entry was found, if not read it from the
        // content array.
        if (_attrs["select_options"] == null) {
            // Again, try last name part at top level
            let content_options = this.getArrayMgr('content').getRoot().getEntry(name_parts[name_parts.length - 1]);
            // If that didn't work, check according to ID
            _attrs["select_options"] = content_options ? content_options : this.getArrayMgr('content')
                .getEntry("options-" + this.id);
        }
        // Default to an empty object
        if (_attrs["select_options"] == null) {
            _attrs["select_options"] = {};
        }
    }
    // overwrite default onclick to do nothing, as we install onclick via dhtmlxtree
    click(_node) { }
    createTree(widget) {
        widget.input = new dhtmlXTreeObject({
            parent: widget.div[0],
            width: '100%',
            height: '100%',
            image_path: widget.options.image_path,
            checkbox: widget.options.multiple
        });
        // to allow "," in value, eg. folder-names, IF value is specified as array
        widget.input.dlmtr = ':}-*(';
        if (widget.options.std_images) {
            widget.setImages.apply(widget, widget.options.std_images.split(','));
        }
        else {
            // calling setImages to get our png or svg default images
            widget.setImages();
        }
        // Add in the callback so we can keep the two in sync
        widget.input.AJAX_callback = function (dxmlObject) {
            widget._dhtmlxtree_json_callback(JSON.parse(dxmlObject.xmlDoc.responseText), widget.input.lastLoadedXMLId);
            // Call this in case we added some options that were already selected, but missing
            if (widget.options.multiple) {
                widget.set_value(widget.value);
            }
        };
        if (widget.options.autoloading) {
            let url = widget.options.autoloading;
            //Set escaping mode to utf8, as url in
            //autoloading needs to be utf8 encoded.
            //For instance item id with umlaut.
            widget.input.setEscapingMode('utf8');
            if (url.charAt(0) != '/' && url.substr(0, 4) != 'http') {
                url = '/json.php?menuaction=' + url;
            }
            this.autoloading_url = url;
            widget.input.setXMLAutoLoading(egw.link(url));
            widget.input.setDataMode('JSON');
        }
        if (widget.options.multimarking) {
            widget.input.enableMultiselection(!!widget.options.multimarking, widget.options.multimarking === 'strict');
        }
        // Enable/Disable highlighting
        widget.input.enableHighlighting(!!widget.options.highlighting);
        // if templates supplies open/close right/down arrows, show no more lines and use them instead of plus/minus
        let open = egw.image('dhtmlxtree/open');
        let close = egw.image('dhtmlxtree/close');
        if (open && close) {
            widget.input.enableTreeLines(false);
            open = this._rel_url(open);
            widget.input.setImageArrays('plus', open, open, open, open, open);
            close = this._rel_url(close);
            widget.input.setImageArrays('minus', close, close, close, close, close);
        }
        this._install_handler('onBeforeCheck', function () {
            return !this.options.readonly;
        }.bind(this));
    }
    /**
     * Install event handlers on tree
     *
     * @param _name
     * @param _handler
     */
    _install_handler(_name, _handler) {
        if (typeof _handler == 'function') {
            if (this.input == null)
                this.createTree(this);
            // automatic convert onChange event to oncheck or onSelect depending on multiple is used or not
            if (_name == 'onchange')
                _name = this.options.multiple ? 'oncheck' : 'onselect';
            let handler = _handler;
            let widget = this;
            this.input.attachEvent(_name, function (_id) {
                let args = jQuery.makeArray(arguments);
                // splice in widget as 2. parameter, 1. is new node-id, now 3. is old node id
                args.splice(1, 0, widget);
                // try to close mobile sidemenu after clicking on node
                if (egwIsMobile() && typeof args[2] == 'string')
                    framework.toggleMenu('on');
                return handler.apply(this, args);
            });
        }
    }
    set_onchange(_handler) { this._install_handler('onchange', _handler); }
    set_onclick(_handler) { this._install_handler('onclick', _handler); }
    set_onselect(_handler) { this._install_handler('onselect', _handler); }
    set_onopenstart(_handler) { this._install_handler('onOpenStart', _handler); }
    set_onopenend(_handler) { this._install_handler('onOpenEnd', _handler); }
    set_select_options(options) {
        let custom_images = false;
        this.options.select_options = options;
        if (this.input == null) {
            this.createTree(this);
        }
        // Structure data for category tree
        if (this.getType() == 'tree-cat') {
            let data = { id: 0, item: [] };
            let stack = {};
            for (let key = 0; key < options.length; key++) {
                // See if item has an icon
                if (options[key].data && typeof options[key].data.icon !== 'undefined' && options[key].data.icon) {
                    let img = this.egw().image(options[key].data.icon, options[key].appname);
                    if (img) {
                        custom_images = true;
                        options[key].im0 = options[key].im1 = options[key].im2 = img;
                    }
                }
                // Item color - not working
                if (options[key].data && typeof options[key].data.color !== 'undefined' && options[key].data.color) {
                    options[key].style = options[key].style || "" + "background-color:'" + options[key].data.color + "';";
                }
                // Tooltip
                if (options[key].description && !options[key].tooltip) {
                    options[key].tooltip = options[key].description;
                }
                let parent_id = parseInt(options[key]['parent']);
                if (isNaN(parent_id))
                    parent_id = 0;
                if (!stack[parent_id])
                    stack[parent_id] = [];
                stack[parent_id].push(options[key]);
            }
            if (custom_images) {
                let path = this.input.iconURL;
                this.input.setIconPath("");
                for (let k = 0; k < this.input.imageArray.length; k++)
                    this.input.imageArray[k] = path + this.input.imageArray[k];
            }
            let f = function (data, _f) {
                if (stack[data.id]) {
                    data.item = stack[data.id];
                    for (let j = 0; j < data.item.length; j++) {
                        f(data.item[j], _f);
                    }
                }
            };
            f(data, f);
            options = data;
        }
        // if no options given, but autoloading url, use that to load initial nodes
        if (typeof options.id == 'undefined' && this.input.XMLsource)
            this.input.loadJSON(this.input.XMLsource);
        else
            this.input.loadJSONObject(this._htmlencode_node(options));
    }
    /**
     * html encoding of text of node
     *
     * We only do a minimal html encoding by replacing opening bracket < with &lt;
     * as tree seems not to need more and we dont want to waste time.
     *
     * @param {string} _text text to encode
     * @return {string}
     */
    _htmlencode(_text) {
        if (_text && _text.indexOf('<') >= 0) {
            _text = _text.replace(this._lt_regexp, '&lt;');
        }
        return _text;
    }
    /**
     * html encoding of text of node incl. all children
     *
     * @param {object} _item with required attributes text, id and optional tooltip and item
     * @return {object} encoded node
     */
    _htmlencode_node(_item) {
        _item.text = this._htmlencode(_item.text);
        if (_item.item && jQuery.isArray(_item.item)) {
            for (let i = 0; i < _item.item.length; ++i) {
                this._htmlencode_node(_item.item[i]);
            }
        }
        return _item;
    }
    set_value(new_value) {
        this.value = this._oldValue = (typeof new_value === 'string' && this.options.multiple ? new_value.split(',') : new_value);
        if (this.input == null)
            return;
        if (this.options.multiple) {
            // Clear all checked
            let checked = this.input.getAllChecked().split(this.input.dlmtr);
            for (let i = 0; i < checked.length; i++) {
                this.input.setCheck(checked[i], false);
            }
            // Check selected
            for (let i = 0; i < this.value.length; i++) {
                this.input.setCheck(this.value[i], true);
                // autoloading openning needs to be absolutely based on user interaction
                // or open flag in folder structure, therefore, We should
                // not force it to open the node
                if (!this.options.autoloading)
                    this.input.openItem(this.value[i]);
            }
        }
        else {
            this.input.selectItem(this.value, false); // false = do not trigger onSelect
            this.input.focusItem(this.value);
            this.input.openItem(this.value);
        }
    }
    /**
     * Links actions to tree nodes
     *
     * @param {object} actions [ {ID: attributes..}+] as for set_actions
     */
    _link_actions(actions) {
        // Get the top level element for the tree
        // Only look 1 level deep for application object manager
        let objectManager = egw_getObjectManager(this.egw().app_name(), true, 1);
        let treeObj = objectManager.getObjectById(this.id);
        if (treeObj == null) {
            // Add a new container to the object manager which will hold the tree
            // objects
            treeObj = objectManager.addObject(new egwActionObject(this.id, objectManager, null, this._actionManager, EGW_AO_FLAG_IS_CONTAINER), null, EGW_AO_FLAG_IS_CONTAINER);
        }
        // Delete all old objects
        treeObj.clear();
        // Go over the tree parts & add links
        let action_links = this._get_action_links(actions);
        if (typeof this.options.select_options != 'undefined') {
            // Iterate over the options (leaves) and add action to each one
            let apply_actions = function (treeObj, option) {
                // Add a new action object to the object manager
                // @ts-ignore
                let obj = treeObj.addObject((typeof option.id == 'number' ? String(option.id) : option.id), new dhtmlxtreeItemAOI(this.input, option.id));
                obj.updateActionLinks(action_links);
                if (option.item && option.item.length > 0) {
                    for (let i = 0; i < option.item.length; i++) {
                        apply_actions.call(this, treeObj, option.item[i]);
                    }
                }
            };
            apply_actions.call(this, treeObj, this.options.select_options);
        }
    }
    /**
     * getValue, retrieves the Id of the selected Item
     * @return string or object or null
     */
    getValue() {
        if (this.input == null)
            return null;
        if (this.options.multiple) {
            let allChecked = this.input.getAllChecked().split(this.input.dlmtr);
            let allUnchecked = this.input.getAllUnchecked().split(this.input.dlmtr);
            if (this.options.autoloading) {
                let res = {};
                for (let i = 0; i < allChecked.length; i++) {
                    res[allChecked[i]] = { value: true };
                }
                for (let i = 0; i < allUnchecked.length; i++) {
                    res[allUnchecked[i]] = { value: false };
                }
                return res;
            }
            else {
                return allChecked;
            }
        }
        return this.input.getSelectedItemId();
    }
    /**
     * getSelectedLabel, retrieves the Label of the selected Item
     * @return string or null
     */
    getSelectedLabel() {
        if (this.input == null)
            return null;
        if (this.options.multiple) {
            /*
            var out = [];
            var checked = this.input.getAllChecked().split(this.input.dlmtr);
            for(var i = 0; i < checked.length; i++)
            {
                out.push(this.input.getItemText(checked[i]));
            }
            return out;
            */
            return null; // not supported yet
        }
        else {
            return this.input.getSelectedItemText();
        }
    }
    /**
     * renameItem, renames an item by id
     *
     * @param {string} _id ID of the node
     * @param {string} _newItemId ID of the node
     * @param {string} _label label to set
     */
    renameItem(_id, _newItemId, _label) {
        if (this.input == null)
            return null;
        this.input.changeItemId(_id, _newItemId);
        // Update action
        // since the action ID has to = this.id, getObjectById() won't work
        var treeObj = egw_getAppObjectManager().getObjectById(this.id);
        for (var i = 0; i < treeObj.children.length; i++) {
            if (treeObj.children[i].id == _id) {
                treeObj.children[i].id = _newItemId;
                if (treeObj.children[i].iface)
                    treeObj.children[i].iface.id = _newItemId;
                break;
            }
        }
        if (typeof _label != 'undefined')
            this.setLabel(_newItemId, _label);
    }
    /**
     * deleteItem, deletes an item by id
     * @param _id ID of the node
     * @param _selectParent select the parent node true/false
     * @return void
     */
    deleteItem(_id, _selectParent) {
        if (this.input == null)
            return null;
        this.input.deleteItem(_id, _selectParent);
        // Update action
        // since the action ID has to = this.id, getObjectById() won't work
        let treeObj = egw_getAppObjectManager().getObjectById(this.id);
        for (let i = 0; i < treeObj.children.length; i++) {
            if (treeObj.children[i].id == _id) {
                treeObj.children.splice(i, 1);
            }
        }
    }
    /**
     * Updates a leaf of the tree by requesting new information from the server using the
     * autoloading attribute.
     *
     * @param {string} _id ID of the node
     * @param {Object} [data] If provided, the item is refreshed directly  with
     *	the provided data instead of asking the server
     * @return void
     */
    refreshItem(_id, data) {
        if (this.input == null)
            return null;
        this.input.deleteChildItems(_id);
        this.input.setDataMode('JSON');
        /* Can't use this, it doesn't allow a callback
        this.input.refreshItem(_id);
        */
        let self = this;
        if (typeof data != 'undefined' && data != null) {
            this.input.loadJSONObject(data, function () { self._dhtmlxtree_json_callback(data, _id); });
        }
        else {
            this.input.loadJSON(this.egw().link(this.autoloading_url, { id: _id }), function (dxmlObject) { self._dhtmlxtree_json_callback(JSON.parse(dxmlObject.xmlDoc.responseText), _id); });
        }
    }
    /**
     * focus the item, and scrolls it into view
     *
     * @param _id ID of the node
     * @return void
     */
    focusItem(_id) {
        if (this.input == null)
            return null;
        this.input.focusItem(_id);
    }
    /**
     * hasChildren
     *
     * @param _id ID of the node
     * @return the number of childelements
     */
    hasChildren(_id) {
        if (this.input == null)
            return null;
        return this.input.hasChildren(_id);
    }
    /**
     * Callback for after using dhtmlxtree's AJAX loading
     * The tree has visually already been updated at this point, we just need
     * to update the internal data.
     *
     * @param {object} new_data Fresh data for the tree
     * @param {string} update_option_id optional If provided, only update that node (and children) with the
     *	provided data instead of the whole thing.  Allows for partial updates.
     * @return void
     */
    _dhtmlxtree_json_callback(new_data, update_option_id) {
        // not sure if it makes sense to try update_option_id, so far I only seen it to be -1
        let parent_id = typeof update_option_id != 'undefined' && update_option_id != -1 ? update_option_id : new_data.id;
        // find root of loaded data to merge it there
        let option = this._find_in_item(parent_id, this.options.select_options);
        // if we found it, merge it
        if (option) {
            jQuery.extend(option, new_data || {});
        }
        else // else store it in root
         {
            this.options.select_options = new_data;
        }
        // Update actions by just re-setting them
        this.set_actions(this.options.actions || {});
    }
    /**
     * Recursive search item object for given id
     *
     * @param {string} _id
     * @param {object} _item
     * @returns
     */
    _find_in_item(_id, _item) {
        if (_item && _item.id == _id) {
            return _item;
        }
        if (_item && typeof _item.item != 'undefined') {
            for (let i = 0; i < _item.item.length; ++i) {
                let found = this._find_in_item(_id, _item.item[i]);
                if (found)
                    return found;
            }
        }
        return null;
    }
    /**
     * Get node data by id
     *
     * @param {string} _id id of node
     * @return {object} object with attributes id, im0-2, text, tooltip, ... as set via select_options or autoload url
     */
    getNode(_id) {
        return this._find_in_item(_id, this.options.select_options);
    }
    /**
     * Sets label of an item by id
     *
     * @param _id ID of the node
     * @param _label label to set
     * @param _tooltip new tooltip, default is previous set tooltip
     * @return void
     */
    setLabel(_id, _label, _tooltip) {
        if (this.input == null)
            return null;
        let tooltip = _tooltip || (this.getNode(_id) && this.getNode(_id).tooltip ?
            this.getNode(_id).tooltip : "");
        this.input.setItemText(_id, this._htmlencode(_label), tooltip);
    }
    /**
     * Sets a style for an item by id
     *
     * @param {string} _id ID of node
     * @param {string} _style style to set
     * @return void
     */
    setStyle(_id, _style) {
        if (this.input == null)
            return null;
        this.input.setItemStyle(_id, _style);
    }
    /**
     * getLabel, gets the Label of of an item by id
     * @param _id ID of the node
     * @return _label
     */
    getLabel(_id) {
        if (this.input == null)
            return null;
        return this.input.getItemText(_id);
    }
    /**
     * getSelectedNode, retrieves the full node of the selected Item
     * @return string or null
     */
    getSelectedNode() {
        if (this.input == null)
            return null;
        // no support for multiple selections
        // as there is no get Method to return the full selected node, we use this
        return this.options.multiple ? null : this.input._selected[0];
    }
    /**
     * getTreeNodeOpenItems
     *
     * @param {string} _nodeID the nodeID where to start from (initial node)
     * @param {string} mode the mode to run in: "forced" fakes the initial node openState to be open
     * @return {object} structured array of node ids: array(message-ids)
     */
    getTreeNodeOpenItems(_nodeID, mode) {
        if (this.input == null)
            return null;
        let z = this.input.getSubItems(_nodeID).split(this.input.dlmtr);
        let oS;
        let PoS;
        let rv;
        let returnValue = [_nodeID];
        let modetorun = "none";
        if (mode) {
            modetorun = mode;
        }
        PoS = this.input.getOpenState(_nodeID);
        if (modetorun == "forced")
            PoS = 1;
        if (PoS == 1) {
            for (let i = 0; i < z.length; i++) {
                oS = this.input.getOpenState(z[i]);
                //alert(z[i]+' OpenState:'+oS);
                if (oS == -1) {
                    returnValue.push(z[i]);
                }
                if (oS == 0) {
                    returnValue.push(z[i]);
                }
                if (oS == 1) {
                    //alert("got here")
                    rv = this.getTreeNodeOpenItems(z[i]);
                    //returnValue.concat(rv); // not working as expected; the following does
                    for (let j = 0; j < rv.length; j++) {
                        returnValue.push(rv[j]);
                    }
                }
            }
        }
        //alert(returnValue.join('#,#'));
        return returnValue;
    }
    /**
     * Fetch user-data stored in specified node under given name
     *
     * User-data need to be stored in json as follows:
     *
     * {"id": "node-id", "im0": ..., "userdata": [{"name": "user-name", "content": "user-value"},...]}
     *
     * In above example getUserData("node-id", "user-name") will return "user-value"
     *
     * @param _nodeId
     * @param _name
     * @returns
     */
    getUserData(_nodeId, _name) {
        if (this.input == null)
            return null;
        return this.input.getUserData(_nodeId, _name);
    }
    /**
     * Stores / updates user-data in specified node and name
     *
     * @param _nodeId
     * @param _name
     * @param _value
     * @returns
     */
    setUserData(_nodeId, _name, _value) {
        if (this.input == null)
            return null;
        return this.input.setUserData(_nodeId, _name, _value);
    }
    /**
     * Query nodes open state and optinal change it
     *
     * @param _id node-id
     * @param _open specify to change true: open, false: close, everything else toggle
     * @returns true if open, false if closed
     */
    openItem(_id, _open) {
        if (this.input == null)
            return null;
        let is_open = this.input.getOpenState(_id) == 1;
        if (typeof _open != 'undefined' && is_open !== _open) {
            if (is_open) {
                this.input.closeItem(_id);
            }
            else {
                this.input.openItem(_id);
            }
        }
        return is_open;
    }
    /**
     * reSelectItem, reselects an item by id
     * @param _id ID of the node
     */
    reSelectItem(_id) {
        if (this.input == null)
            return null;
        this.input.selectItem(_id, false, false);
    }
    /**
     * Set images for a specific node or all new nodes (default)
     *
     * If images contain an extension eg. "leaf" they are asumed to be in image path (/phpgwapi/templates/default/images/dhtmlxtree/).
     * Otherwise they get searched via egw.image() in current app, phpgwapi or can be specified as "app/image".
     *
     * @param {string} _leaf leaf image, default "leaf"
     * @param {string} _closed closed folder image, default "folderClosed"
     * @param {string} _open opened folder image, default "folderOpen"
     * @param {string} _id if not given, standard images for new nodes are set
     */
    setImages(_leaf, _closed, _open, _id) {
        let images = [_leaf || 'dhtmlxtree/leaf', _closed || 'dhtmlxtree/folderClosed', _open || 'dhtmlxtree/folderOpen'];
        let image_extensions = /\.(gif|png|jpe?g|svg)/i;
        for (let i = 0; i < 3; ++i) {
            let image = images[i];
            if (!image.match(image_extensions)) {
                images[i] = this._rel_url(this.egw().image(image) || image);
            }
        }
        if (typeof _id == 'undefined') {
            this.input.setStdImages.apply(this.input, images);
        }
        else {
            images.unshift(_id);
            this.input.setItemImage2.apply(this.input, images);
        }
    }
    /**
     * Set state of node incl. it's children
     *
     * @param {string} _id id of node
     * @param {boolean|string} _state or "toggle" to toggle state
     */
    setSubChecked(_id, _state) {
        if (_state === "toggle")
            _state = !this.input.isItemChecked(_id);
        this.input.setSubChecked(_id, _state);
    }
    /**
     * Get URL relative to image_path option
     *
     * Both URL start with EGroupware webserverUrl and image_path gets allways appended to images by tree.
     *
     * @param {string} _url
     * @return {string} relativ url
     */
    _rel_url(_url) {
        let path_parts = this.options.image_path.split(this.egw().webserverUrl);
        path_parts = path_parts[1].split('/');
        let url_parts = _url.split(this.egw().webserverUrl);
        url_parts = url_parts[1].split('/');
        for (let i = 0; i < path_parts.length; ++i) {
            if (path_parts[i] != url_parts[i]) {
                while (++i < path_parts.length)
                    url_parts.unshift('..');
                break;
            }
            url_parts.shift();
        }
        return url_parts.join('/');
    }
}
et2_tree._attributes = {
    "multiple": {
        "name": "multiple",
        "type": "boolean",
        "default": false,
        "description": "Allow selecting multiple options"
    },
    "select_options": {
        "type": "any",
        "name": "Select options",
        "default": {},
        "description": "Used to set the tree options."
    },
    "onclick": {
        "description": "JS code which gets executed when clicks on text of a node"
    },
    "onselect": {
        "name": "onSelect",
        "type": "js",
        "default": et2_no_init,
        "description": "Javascript executed when user selects a node"
    },
    "oncheck": {
        "name": "onCheck",
        "type": "js",
        "default": et2_no_init,
        "description": "Javascript executed when user checks a node"
    },
    // onChange event is mapped depending on multiple to onCheck or onSelect
    onopenstart: {
        "name": "onOpenStart",
        "type": "js",
        "default": et2_no_init,
        "description": "Javascript function executed when user opens a node: function(_id, _widget, _hasChildren) returning true to allow opening!"
    },
    onopenend: {
        "name": "onOpenEnd",
        "type": "js",
        "default": et2_no_init,
        "description": "Javascript function executed when opening a node is finished: function(_id, _widget, _hasChildren)"
    },
    "image_path": {
        "name": "Image directory",
        "type": "string",
        "default": egw().webserverUrl + "/api/templates/default/images/dhtmlxtree/",
        "description": "Directory for tree structure images, set on server-side to 'dhtmlx' subdir of templates image-directory"
    },
    "value": {
        "type": "any",
        "default": {}
    },
    "actions": {
        "name": "Actions array",
        "type": "any",
        "default": et2_no_init,
        "description": "List of egw actions that can be done on the tree.  This includes context menu, drag and drop.  TODO: Link to action documentation"
    },
    "autoloading": {
        "name": "Autoloading",
        "type": "string",
        "default": "",
        "description": "JSON URL or menuaction to be called for nodes marked with child=1, but not having children, GET parameter selected contains node-id"
    },
    "std_images": {
        "name": "Standard images",
        "type": "string",
        "default": "",
        "description": "comma-separated names of icons for a leaf, closed and opend folder (default: leaf.png,folderClosed.png,folderOpen.png), images with extension get loaded from image_path, just 'image' or 'appname/image' are allowed too"
    },
    "multimarking": {
        "name": "multimarking",
        "type": "any",
        "default": false,
        "description": "Allow marking multiple nodes, default is false which means disabled multiselection, true or 'strict' activates it and 'strict' makes it strick to only same level marking"
    },
    highlighting: {
        "name": "highlighting",
        "type": "boolean",
        "default": false,
        "description": "Add highlighting class on hovered over item, highlighting is disabled by default"
    }
};
et2_register_widget(et2_tree, ["tree", "tree-cat"]);
//# sourceMappingURL=et2_widget_tree.js.map