"use strict"; /** * EGroupware eTemplate2 - JS Portlet object - used by Home * * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License * @package home * @package etemplate * @subpackage api * @link http://www.egroupware.org * @author Nathan Gray * @version $Id$ */ 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_baseWidget; */ var et2_core_widget_1 = require("./et2_core_widget"); var et2_core_valueWidget_1 = require("./et2_core_valueWidget"); var et2_core_inheritance_1 = require("./et2_core_inheritance"); var et2_core_DOMWidget_1 = require("./et2_core_DOMWidget"); /** * Class which implements the UI of a Portlet * * This manages the frame and decoration, but also provides the UI for properties. * * Portlets are only internal to EGroupware. * * Home does not fully implement WSRP, but tries not to conflict, ether. * @link http://docs.oasis-open.org/wsrp/v2/wsrp-2.0-spec-os-01.html * @augments et2_baseWidget */ var et2_portlet = /** @class */ (function (_super) { __extends(et2_portlet, _super); /** * Constructor * * @memberOf et2_portlet */ function et2_portlet(_parent, _attrs, _child) { var _this = // Call the inherited constructor _super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_portlet._attributes, _child || {})) || this; _this.GRID = 55; /** * These are the "normal" actions that every portlet is expected to have. * The widget provides default actions for all of these, but they can * be added to or overridden if needed by setting the action attribute. */ _this.default_actions = { edit_settings: { icon: "edit", caption: "Configure", "default": true, hideOnDisabled: true, group: "portlet" }, remove_portlet: { icon: "delete", caption: "Remove", group: "portlet" } }; var self = _this; // Create DOM nodes _this.div = jQuery(document.createElement("div")) .addClass(_this.options.class) .addClass("ui-widget ui-widget-content ui-corner-all") .addClass("et2_portlet") /* Gridster */ .attr("data-sizex", _this.options.width) .attr("data-sizey", _this.options.height) .attr("data-row", _this.options.row) .attr("data-col", _this.options.col) .resizable({ autoHide: true, grid: _this.GRID, //containment: this.getParent().getDOMNode(), stop: function (event, ui) { self.set_width(Math.round(ui.size.width / self.GRID)); self.set_height(Math.round(ui.size.height / self.GRID)); self.egw().jsonq("home.home_ui.ajax_set_properties", [self.id, {}, { width: self.options.width, height: self.options.height }], null, self); // Tell children self.iterateOver(function (widget) { widget.resize(); }, null, et2_IResizeable); } }); _this.header = jQuery(document.createElement("div")) .attr('id', _this.getInstanceManager().uniqueId + '_' + _this.id.replace(/\./g, '-') + '_header') .addClass("ui-widget-header ui-corner-all") .appendTo(_this.div) .html(_this.options.title); _this.content = jQuery(document.createElement("div")) .attr('id', _this.getInstanceManager().uniqueId + '_' + _this.id.replace(/\./g, '-') + '_content') .appendTo(_this.div); _this.setDOMNode(_this.div[0]); return _this; } et2_portlet.prototype.destroy = function () { for (var i = 0; i < this._children.length; i++) { // Check for child is a different template and clear it, // since it won't be cleared by destroy() if (this._children[i].getInstanceManager() != this.getInstanceManager()) { this._children[i].getInstanceManager().clear(); } } _super.prototype.destroy.call(this); }; et2_portlet.prototype.doLoadingFinished = function () { this.set_color(this.options.color); return true; }; /** * If anyone asks, return the content node, so content goes inside */ et2_portlet.prototype.getDOMNode = function (_sender) { if (typeof _sender != 'undefined' && _sender != this) { return this.content[0]; } return _super.prototype.getDOMNode.call(this, _sender); }; /** * Overriden from parent to add in default actions */ et2_portlet.prototype.set_actions = function (actions) { // Set targets for actions var defaults = {}; for (var action_name in this.default_actions) { defaults[action_name] = this.default_actions[action_name]; // Translate caption here, as translations aren't available earlier defaults[action_name].caption = this.egw().lang(this.default_actions[action_name].caption); if (typeof this[action_name] == "function") { defaults[action_name].onExecute = jQuery.proxy(this[action_name], this); } } // Add in defaults, but let provided actions override them this.options.actions = jQuery.extend(true, {}, defaults, actions); _super.prototype.set_actions.call(this, this.options.actions); }; /** * Override _link_actions to remove edit action, if there is no settings * * @param actions */ et2_portlet.prototype._link_actions = function (actions) { // Get the top level element var objectManager = egw_getAppObjectManager(true); var widget_object = objectManager.getObjectById(this.id); if (widget_object == null) { // Add a new container to the object manager which will hold the widget // objects widget_object = objectManager.insertObject(false, new egwActionObject(this.id, objectManager, new et2_core_DOMWidget_1.et2_action_object_impl(this).getAOI(), this._actionManager || objectManager.manager.getActionById(this.id) || objectManager.manager)); } // Delete all old objects widget_object.clear(); // Go over the widget & add links - this is where we decide which actions are // 'allowed' for this widget at this time var action_links = []; for (var i in actions) { var id = typeof actions[i].id != 'undefined' ? actions[i].id : i; var action = { actionId: id, enabled: true }; // If there are no settings, there can be no customization, so remove the edit action if (id == 'edit_settings' && (!this.options.settings || jQuery.isEmptyObject(this.options.settings))) { this.egw().debug("log", "No settings for portlet %o, edit_settings action removed", this); action.enabled = false; } action_links.push(action); } widget_object.updateActionLinks(action_links); }; /** * Create & show a dialog for customizing this portlet * * Properties for customization are sent in the 'settings' attribute */ et2_portlet.prototype.edit_settings = function () { var dialog = et2_createWidget("dialog", { callback: jQuery.proxy(this._process_edit, this), template: this.options.edit_template, value: { content: this.options.settings }, buttons: et2_dialog.BUTTONS_OK_CANCEL }, this); // Set seperately to avoid translation dialog.set_title(this.egw().lang("Edit") + " " + (this.options.title || '')); }; et2_portlet.prototype._process_edit = function (button_id, value) { if (button_id != et2_dialog.OK_BUTTON) return; // Save settings - server might reply with new content if the portlet needs an update, // but ideally it doesn't this.div.addClass("loading"); // Pass updated settings, unless we're removing var settings = (typeof value == 'string') ? {} : this.options.settings || {}; this.egw().jsonq("home.home_ui.ajax_set_properties", [this.id, settings, value, this.settings ? this.settings.group : false], function (data) { // This section not for us if (!data || typeof data.attributes == 'undefined') return false; this.div.removeClass("loading"); this.set_value(data.content); for (var key in data.attributes) { if (typeof this["set_" + key] == "function") { this["set_" + key].call(this, data.attributes[key]); } else if (this.attributes[key]) { this.options[key] = data.attributes[key]; } } // Flagged as needing to edit settings? Open dialog if (typeof data.edit_settings != 'undefined' && data.edit_settings) { this.edit_settings(); } // Only resize once, and only if needed if (data.attributes.width || data.attributes.height) { // Tell children try { this.iterateOver(function (widget) { widget.resize(); }, null, et2_IResizeable); } catch (e) { // Something went wrong, but do not stop egw.debug('warn', e, this); } } }, this); // Extend, not replace, because settings has types while value has just value if (typeof value == 'object') { jQuery.extend(this.options.settings, value); } }; /** * Remove this portlet from the home page */ et2_portlet.prototype.remove_portlet = function () { var self = this; et2_dialog.show_dialog(function (button_id) { if (button_id != et2_dialog.OK_BUTTON) return; self._process_edit(button_id, '~remove~'); self.getParent().removeChild(self); self.destroy(); }, this.egw().lang("Remove"), this.options.title, {}, et2_dialog.BUTTONS_OK_CANCEL, et2_dialog.QUESTION_MESSAGE); }; /** * Set the HTML content of the portlet * * @param value String HTML fragment */ et2_portlet.prototype.set_value = function (value) { this.content.html(value); }; /** * Set the content of the header * * @param value String HTML fragment */ et2_portlet.prototype.set_title = function (value) { this.header.contents() .filter(function () { return this.nodeType === 3; }) .remove(); this.options.title = value; this.header.append(value); }; /** * Let this portlet stand out a little by allowing a custom color */ et2_portlet.prototype.set_color = function (color) { this.options.color = color; this.header.css("backgroundColor", color); this.header.css('color', jQuery.Color(this.header.css("backgroundColor")).lightness() > 0.5 ? 'black' : 'white'); this.content.css("backgroundColor", color); }; /** * Set the number of grid cells this widget spans * * @param value int Number of horizontal grid cells */ et2_portlet.prototype.set_width = function (value) { this.options.width = value; this.div.attr("data-sizex", value); // Clear what's there from jQuery, we get width from CSS according to sizex this.div.css('width', ''); }; /** * Set the number of vertical grid cells this widget spans * * @param value int Number of vertical grid cells */ et2_portlet.prototype.set_height = function (value) { this.options.height = value; this.div.attr("data-sizey", value); // Clear what's there from jQuery, we get width from CSS according to sizey this.div.css('height', ''); }; et2_portlet._attributes = { "title": { "name": "Title", "description": "Goes in the little bit at the top with the icons", "type": "string", "default": "" }, "edit_template": { "name": "Edit template", "description": "Custom eTemplate used to customize / set up the portlet", "type": "string", "default": egw.webserverUrl + "/home/templates/default/edit.xet" }, "color": { "name": "Color", "description": "Set the portlet color", "type": "string", "default": '' }, "settings": { "name": "Customization settings", "description": "Array of customization settings, similar in structure to preference settings", "type": "any", "default": et2_no_init }, "actions": { default: {} }, "width": { "default": 2, "ignore": true }, "height": { "default": 1, "type": "integer" }, "rows": { "ignore": true, default: et2_no_init }, "cols": { "ignore": true, default: et2_no_init }, "resize_ratio": { "ignore": true, default: et2_no_init }, "row": { "name": "Row", "description": "Home page location (row) - handled by home app", "default": 1 }, "col": { "name": "Column", "description": "Home page location(column) - handled by home app", "default": 1 } }; return et2_portlet; }(et2_core_valueWidget_1.et2_valueWidget)); et2_core_widget_1.et2_register_widget(et2_portlet, ["portlet"]); //# sourceMappingURL=et2_widget_portlet.js.map