egroupware/api/js/etemplate/et2_widget_itempicker.js
2020-02-13 11:08:12 +01:00

353 lines
14 KiB
JavaScript
Executable File

"use strict";
/**
* EGroupware eTemplate2 - JS Itempicker object
* derived from et2_link_entry widget @copyright 2011 Nathan Gray
*
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @package etemplate
* @subpackage api
* @link http://www.egroupware.org
* @author Christian Binder
* @author Nathan Gray
* @copyright 2012 Christian Binder
* @copyright 2011 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
/vendor/bower-asset/jquery/dist/jquery.js;
et2_core_inputWidget;
et2_core_valueWidget;
et2_extension_itempicker_actions;
egw_action.egw_action_common;
*/
var et2_core_widget_1 = require("./et2_core_widget");
var et2_core_inputWidget_1 = require("./et2_core_inputWidget");
var et2_core_inheritance_1 = require("./et2_core_inheritance");
/**
* Class which implements the "itempicker" XET-Tag
*
* @augments et2_inputWidget
*/
var et2_itempicker = /** @class */ (function (_super) {
__extends(et2_itempicker, _super);
/**
* Constructor
*
* @memberOf et2_itempicker
*/
function et2_itempicker(_parent, _attrs, _child) {
var _this =
// Call the inherited constructor
_super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_itempicker._attributes, _child || {})) || this;
_this.legacyOptions = ["application"];
_this.last_search = ""; // Remember last search value
_this.action = null; // Action function for button
_this.current_app = ""; // Remember currently chosen application
_this.div = null;
_this.left = null;
_this.right = null;
_this.right_container = null;
_this.app_select = null;
_this.search = null;
_this.button_action = null;
_this.itemlist = null;
_this.div = null;
_this.left = null;
_this.right = null;
_this.right_container = null;
_this.app_select = null;
_this.search = null;
_this.button_action = null;
_this.itemlist = null;
if (_this.options.action !== null && typeof _this.options.action == "string") {
_this.action = new egwFnct(_this, "javaScript:" + _this.options.action);
}
else {
console.log("itempicker widget: no action provided for button");
}
_this.createInputWidget();
return _this;
}
et2_itempicker.prototype.clearSearchResults = function () {
this.search.val("");
this.itemlist.html("");
this.search.focus();
this.clear.hide();
};
et2_itempicker.prototype.createInputWidget = function () {
var _self = this;
this.div = jQuery(document.createElement("div"));
this.left = jQuery(document.createElement("div"));
this.right = jQuery(document.createElement("div"));
this.right_container = jQuery(document.createElement("div"));
this.app_select = jQuery(document.createElement("ul"));
this.search = jQuery(document.createElement("input"));
this.clear = jQuery(document.createElement("span"));
this.itemlist = jQuery(document.createElement("div"));
// Container elements
this.div.addClass("et2_itempicker");
this.left.addClass("et2_itempicker_left");
this.right.addClass("et2_itempicker_right");
this.right_container.addClass("et2_itempicker_right_container");
// Application select
this.app_select.addClass("et2_itempicker_app_select");
var item_count = 0;
for (var key in this.options.select_options) {
var img_icon = this.egw().image(key + "/navbar");
if (img_icon === null) {
continue;
}
var img = jQuery(document.createElement("img"));
img.attr("src", img_icon);
var item = jQuery(document.createElement("li"));
item.attr("id", key)
.click(function () {
_self.selectApplication(jQuery(this));
})
.append(img);
if (item_count == 0) {
this.selectApplication(item); // select first item by default
}
this.app_select.append(item);
item_count++;
}
// Search input field
this.search.addClass("et2_itempicker_search");
this.search.keyup(function () {
var request = {};
request.term = jQuery(this).val();
_self.query(request);
});
this.set_blur(this.options.blur, this.search);
// Clear button for search
this.clear
.addClass("et2_itempicker_clear ui-icon ui-icon-close")
.click(function () {
_self.clearSearchResults();
})
.hide();
// Action button
this.button_action = et2_createWidget("button");
jQuery(this.button_action.getDOMNode()).addClass("et2_itempicker_button_action");
this.button_action.set_label(this.egw().lang(this.options.action_label));
this.button_action.click = function () { _self.doAction(); };
// Itemlist
this.itemlist.attr("id", "itempicker_itemlist");
this.itemlist.addClass("et2_itempicker_itemlist");
// Put everything together
this.left.append(this.app_select);
this.right_container.append(this.search);
this.right_container.append(this.clear);
this.right_container.append(this.button_action.getDOMNode());
this.right_container.append(this.itemlist);
this.right.append(this.right_container);
this.div.append(this.right); // right before left to have a natural
this.div.append(this.left); // z-index for left div over right div
this.setDOMNode(this.div[0]);
};
et2_itempicker.prototype.doAction = function () {
if (this.action !== null) {
var data = {};
data.app = this.current_app;
data.value = this.options.value;
data.checked = this.getSelectedItems();
return this.action.exec(this, data);
}
return false;
};
et2_itempicker.prototype.getSelectedItems = function () {
var items = [];
jQuery(this.itemlist).children("ul").children("li.selected").each(function (index) {
items[index] = jQuery(this).attr("id");
});
return items;
};
/**
* Ask server for entries matching selected app/type and filtered by search string
*/
et2_itempicker.prototype.query = function (request) {
if (request.term.length < 3) {
return true;
}
// Remember last search
this.last_search = request.term;
// Allow hook / tie in
if (this.options.query && typeof this.options.query == 'function') {
if (!this.options.query(request, response))
return false;
}
//if(request.term in this.cache) {
// return response(this.cache[request.term]);
//}
this.itemlist.addClass("loading");
this.clear.css("display", "inline-block");
egw.json("EGroupware\\Api\\Etemplate\\Widget\\ItemPicker::ajax_item_search", [this.current_app, '', request.term, request.options], this.queryResults, this, true, this).sendRequest();
};
/**
* Server found some results for query
*/
et2_itempicker.prototype.queryResults = function (data) {
this.itemlist.removeClass("loading");
this.updateItemList(data);
};
et2_itempicker.prototype.selectApplication = function (app) {
this.clearSearchResults();
jQuery(".et2_itempicker_app_select li").removeClass("selected");
app.addClass("selected");
this.current_app = app.attr("id");
return true;
};
et2_itempicker.prototype.set_blur = function (_value, input) {
if (typeof input == 'undefined')
input = this.search;
if (_value) {
input.attr("placeholder", _value); // HTML5
if (!input[0].placeholder) {
// Not HTML5
if (input.val() == "")
input.val(_value);
input.focus(input, function (e) {
var placeholder = _value;
if (e.data.val() == placeholder)
e.data.val("");
}).blur(input, function (e) {
var placeholder = _value;
if (e.data.val() == "")
e.data.val(placeholder);
});
if (input.val() == "")
input.val(_value);
}
}
else {
this.search.removeAttr("placeholder");
}
};
et2_itempicker.prototype.transformAttributes = function (_attrs) {
_super.prototype.transformAttributes.call(this, _attrs);
_attrs["select_options"] = {};
if (_attrs["application"]) {
var apps = et2_csvSplit(_attrs["application"], null, ",");
for (var i = 0; i < apps.length; i++) {
_attrs["select_options"][apps[i]] = this.egw().lang(apps[i]);
}
}
else {
_attrs["select_options"] = this.egw().link_app_list('query');
}
// Check whether the options entry was found, if not read it from the
// content array.
if (_attrs["select_options"] == null) {
_attrs["select_options"] = this.getArrayMgr('content')
.getEntry("options-" + this.id);
}
// Default to an empty object
if (_attrs["select_options"] == null) {
_attrs["select_options"] = {};
}
};
et2_itempicker.prototype.updateItemList = function (data) {
var list = jQuery(document.createElement("ul"));
var item_count = 0;
for (var id in data) {
var item = jQuery(document.createElement("li"));
if (item_count % 2 == 0) {
item.addClass("row_on");
}
else {
item.addClass("row_off");
}
item.attr("id", id)
.html(data[id])
.click(function (e) {
var _a;
if (e.ctrlKey || e.metaKey) {
// add to selection
jQuery(this).addClass("selected");
}
else if (e.shiftKey) {
// select range
var start = jQuery(this).siblings(".selected").first();
if (((_a = start) === null || _a === void 0 ? void 0 : _a.length) == 0) {
// no start item - cannot select range - select single item
jQuery(this).addClass("selected");
return true;
}
var end = jQuery(this);
// swap start and end if start appears after end in dom hierarchy
if (start.index() > end.index()) {
var startOld = start;
start = end;
end = startOld;
}
// select start to end
start.addClass("selected");
start.nextUntil(end).addClass("selected");
end.addClass("selected");
}
else {
// select single item
jQuery(this).siblings(".selected").removeClass("selected");
jQuery(this).addClass("selected");
}
});
list.append(item);
item_count++;
}
this.itemlist.html(list);
};
et2_itempicker._attributes = {
"action": {
"name": "Action callback",
"type": "string",
"default": false,
"description": "Callback for action. Must be a function(context, data)"
},
"action_label": {
"name": "Action label",
"type": "string",
"default": "Action",
"description": "Label for action button"
},
"application": {
"name": "Application",
"type": "string",
"default": "",
"description": "Limit to the listed application or applications (comma separated)"
},
"blur": {
"name": "Placeholder",
"type": "string",
"default": et2_no_init,
"description": "This text get displayed if an input-field is empty and does not have the input-focus (blur). It can be used to show a default value or a kind of help-text."
},
"value": {
"name": "value",
"type": "any",
"default": "",
"description": "Optional itempicker value(s) - can be used for e.g. environmental information"
},
"query": {
"name": "Query callback",
"type": "any",
"default": false,
"description": "Callback before query to server. Must return true, or false to abort query."
}
};
return et2_itempicker;
}(et2_core_inputWidget_1.et2_inputWidget));
et2_core_widget_1.et2_register_widget(et2_itempicker, ["itempicker"]);
//# sourceMappingURL=et2_widget_itempicker.js.map