mirror of
https://github.com/EGroupware/egroupware.git
synced 2025-02-24 22:21:34 +01:00
Convert et2_toolbar to TS
This commit is contained in:
Hadi Nategh
parent
0ba4d68baa
commit
addc4d8935
2
api/js/etemplate/et2_types.d.ts
vendored
2
api/js/etemplate/et2_types.d.ts
vendored
@ -145,7 +145,7 @@ declare var et2_textbox : any;
|
|||||||
declare var et2_textbox_ro : any;
|
declare var et2_textbox_ro : any;
|
||||||
declare var et2_searchbox : any;
|
declare var et2_searchbox : any;
|
||||||
declare var et2_timestamper : any;
|
declare var et2_timestamper : any;
|
||||||
declare var et2_toolbar : any;
|
declare class et2_toolbar extends et2_DOMWidget {}
|
||||||
declare var et2_tree : any;
|
declare var et2_tree : any;
|
||||||
declare var et2_url : any;
|
declare var et2_url : any;
|
||||||
declare var et2_url_ro : any;
|
declare var et2_url_ro : any;
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
"use strict";
|
||||||
/**
|
/**
|
||||||
* EGroupware eTemplate2 - JS toolbar object
|
* EGroupware eTemplate2 - JS toolbar object
|
||||||
*
|
*
|
||||||
@ -9,98 +10,93 @@
|
|||||||
* @copyright Nathan Gray 2013
|
* @copyright Nathan Gray 2013
|
||||||
* @version $Id$
|
* @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
|
/*egw:uses
|
||||||
/vendor/bower-asset/jquery/dist/jquery.js;
|
/vendor/bower-asset/jquery/dist/jquery.js;
|
||||||
/vendor/bower-asset/jquery-ui/jquery-ui.js;
|
/vendor/bower-asset/jquery-ui/jquery-ui.js;
|
||||||
et2_DOMWidget;
|
et2_DOMWidget;
|
||||||
*/
|
*/
|
||||||
|
var et2_core_DOMWidget_1 = require("./et2_core_DOMWidget");
|
||||||
|
var et2_core_widget_1 = require("./et2_core_widget");
|
||||||
|
var et2_core_inheritance_1 = require("./et2_core_inheritance");
|
||||||
|
var egw_action_js_1 = require("../egw_action/egw_action.js");
|
||||||
|
require("./et2_types");
|
||||||
/**
|
/**
|
||||||
* This toolbar gets its contents from its actions
|
* This toolbar gets its contents from its actions
|
||||||
*
|
*
|
||||||
* @augments et2_valueWidget
|
* @augments et2_valueWidget
|
||||||
*/
|
*/
|
||||||
var et2_toolbar = (function(){ "use strict"; return et2_DOMWidget.extend([et2_IInput],
|
var et2_toolbar = /** @class */ (function (_super) {
|
||||||
{
|
__extends(et2_toolbar, _super);
|
||||||
attributes: {
|
function et2_toolbar(_parent, _attrs, _child) {
|
||||||
"view_range": {
|
var _this =
|
||||||
"name": "View range",
|
// Call the inherited constructor
|
||||||
"type": "string",
|
_super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_toolbar._attributes, _child || {})) || this;
|
||||||
"default": "5",
|
|
||||||
"description": "Define minimum action view range to show actions by both icons and caption"
|
|
||||||
},
|
|
||||||
"flat_list": {
|
|
||||||
"name": "Flat list",
|
|
||||||
"type": "boolean",
|
|
||||||
"default": true,
|
|
||||||
"description": "Define whether the actions with children should be shown as dropdown or flat list"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Default buttons, so there is something for the widget browser / editor to show
|
|
||||||
*/
|
|
||||||
default_toolbar: {
|
|
||||||
view: {caption:'View', icons: {primary: 'ui-icon-check'}, group:1, toolbarDefault:true},
|
|
||||||
edit: {caption:'Edit', group:1, toolbarDefault:true},
|
|
||||||
save: {caption:'Save', group:2, toolbarDefault:true}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* id of last action executed / value of toolbar if submitted
|
* id of last action executed / value of toolbar if submitted
|
||||||
*/
|
*/
|
||||||
value: null,
|
_this.value = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Constructor
|
* actionbox is a div for stored actions
|
||||||
*
|
|
||||||
* @memberOf et2_dropdown_button
|
|
||||||
*/
|
*/
|
||||||
init: function() {
|
_this.actionbox = null;
|
||||||
this._super.apply(this, arguments);
|
/**
|
||||||
this.div = jQuery(document.createElement('div'))
|
* actionlist is a div for active actions
|
||||||
|
*/
|
||||||
|
_this.actionlist = null;
|
||||||
|
_this.div = null;
|
||||||
|
_this.countActions = 0;
|
||||||
|
_this.dropdowns = {};
|
||||||
|
_this.preference = {};
|
||||||
|
_this.menu = null;
|
||||||
|
_this._objectManager = null;
|
||||||
|
_this.div = jQuery(document.createElement('div'))
|
||||||
.addClass('et2_toolbar ui-widget-header ui-corner-all');
|
.addClass('et2_toolbar ui-widget-header ui-corner-all');
|
||||||
|
|
||||||
// Set proper id and dom_id for the widget
|
// Set proper id and dom_id for the widget
|
||||||
this.set_id(this.id);
|
_this.set_id(_this.id);
|
||||||
|
_this.actionbox = jQuery(document.createElement('div'))
|
||||||
//actionbox is the div for stored actions
|
|
||||||
this.actionbox = jQuery(document.createElement('div'))
|
|
||||||
.addClass("et2_toolbar_more")
|
.addClass("et2_toolbar_more")
|
||||||
.attr('id',this.id +'-'+ 'actionbox');
|
.attr('id', _this.id + '-' + 'actionbox');
|
||||||
//actionlist is div for active actions
|
_this.actionlist = jQuery(document.createElement('div'))
|
||||||
this.actionlist = jQuery(document.createElement('div'))
|
|
||||||
.addClass("et2_toolbar_actionlist")
|
.addClass("et2_toolbar_actionlist")
|
||||||
.attr('id',this.id +'-'+ 'actionlist');
|
.attr('id', _this.id + '-' + 'actionlist');
|
||||||
|
_this.countActions = 0;
|
||||||
this.countActions = 0;
|
_this.dropdowns = {};
|
||||||
this.dropdowns = {};
|
_this.preference = {};
|
||||||
this.preference = {};
|
_this._build_menu(et2_toolbar.default_toolbar, true);
|
||||||
|
return _this;
|
||||||
this._build_menu(this.default_toolbar, true);
|
}
|
||||||
},
|
;
|
||||||
|
et2_toolbar.prototype.destroy = function () {
|
||||||
destroy: function() {
|
|
||||||
// Destroy widget
|
// Destroy widget
|
||||||
if(this.div && this.div.data('ui-menu')) this.menu.menu("destroy");
|
if (this.div && this.div.data('ui-menu'))
|
||||||
|
this.menu.menu("destroy");
|
||||||
// Null children
|
// Null children
|
||||||
|
|
||||||
// Remove
|
// Remove
|
||||||
this.div.empty().remove();
|
this.div.empty().remove();
|
||||||
this.actionbox.empty().remove();
|
this.actionbox.empty().remove();
|
||||||
this.actionlist.empty().remove();
|
this.actionlist.empty().remove();
|
||||||
},
|
};
|
||||||
|
;
|
||||||
/**
|
/**
|
||||||
* Fix function in order to fix toolbar preferences with the new preference structure
|
* Fix function in order to fix toolbar preferences with the new preference structure
|
||||||
* @param {action object} _action
|
* @param {action object} _action
|
||||||
* @todo ** SEE IMPORTANT TODO **
|
* @todo ** SEE IMPORTANT TODO **
|
||||||
*/
|
*/
|
||||||
_fix_preference: function (_action)
|
et2_toolbar.prototype._fix_preference = function (_action) {
|
||||||
{
|
|
||||||
|
|
||||||
// ** IMPORTANT TODO: This switch case should be removed for new release **
|
// ** IMPORTANT TODO: This switch case should be removed for new release **
|
||||||
// This is an ugly hack but we need to add this switch becuase to update and fix
|
// This is an ugly hack but we need to add this switch becuase to update and fix
|
||||||
// current users toolbar preferences with the new structure which is:
|
// current users toolbar preferences with the new structure which is:
|
||||||
@ -110,10 +106,8 @@ var et2_toolbar = (function(){ "use strict"; return et2_DOMWidget.extend([et2_II
|
|||||||
// - if an action gets added to toolbar it would be undefined in
|
// - if an action gets added to toolbar it would be undefined in
|
||||||
// the preference which we need to consider to add it to the preference
|
// the preference which we need to consider to add it to the preference
|
||||||
// according to its toolbarDefault option.
|
// according to its toolbarDefault option.
|
||||||
if (this.dom_id === 'mail-display_displayToolbar' || this.dom_id === 'mail-index_toolbar')
|
if (this.dom_id === 'mail-display_displayToolbar' || this.dom_id === 'mail-index_toolbar') {
|
||||||
{
|
switch (_action.id) {
|
||||||
switch (_action.id)
|
|
||||||
{
|
|
||||||
// Actions newly added to mail index and display toolbar
|
// Actions newly added to mail index and display toolbar
|
||||||
case 'read':
|
case 'read':
|
||||||
case 'label1':
|
case 'label1':
|
||||||
@ -130,14 +124,44 @@ var et2_toolbar = (function(){ "use strict"; return et2_DOMWidget.extend([et2_II
|
|||||||
this.set_prefered(_action.id, false);
|
this.set_prefered(_action.id, false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else
|
else {
|
||||||
{
|
|
||||||
// ** IMPORTANT TODO: This line needs to stay and be fixed with !toolbarDefault after the if condition
|
// ** IMPORTANT TODO: This line needs to stay and be fixed with !toolbarDefault after the if condition
|
||||||
// has been removed.
|
// has been removed.
|
||||||
this.set_prefered(_action.id, false /*!toolbarDefault*/);
|
this.set_prefered(_action.id, false /*!toolbarDefault*/);
|
||||||
}
|
}
|
||||||
},
|
};
|
||||||
|
/**
|
||||||
|
* Count number of actions including their children
|
||||||
|
* @param {object} actions
|
||||||
|
* @return {number} return total number of actions
|
||||||
|
*/
|
||||||
|
et2_toolbar.prototype._countActions = function (actions) {
|
||||||
|
var totalCount = 0;
|
||||||
|
var childCounter = function (action, count) {
|
||||||
|
var children = action.children || 0, returnCounter = count || 0;
|
||||||
|
if (children) {
|
||||||
|
returnCounter -= 1;
|
||||||
|
for (var nChild in children) {
|
||||||
|
returnCounter += 1;
|
||||||
|
returnCounter = childCounter(children[nChild], returnCounter);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
returnCounter = count;
|
||||||
|
}
|
||||||
|
return returnCounter;
|
||||||
|
};
|
||||||
|
for (var nAction in actions) {
|
||||||
|
if (this.options.flat_list) {
|
||||||
|
totalCount += childCounter(actions[nAction], 1);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
totalCount++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return totalCount;
|
||||||
|
};
|
||||||
|
;
|
||||||
/**
|
/**
|
||||||
* Go through actions and build buttons for the toolbar
|
* Go through actions and build buttons for the toolbar
|
||||||
*
|
*
|
||||||
@ -146,8 +170,7 @@ var et2_toolbar = (function(){ "use strict"; return et2_DOMWidget.extend([et2_II
|
|||||||
* avoid actions get into the preferences, for instandce, first
|
* avoid actions get into the preferences, for instandce, first
|
||||||
* time toolbar_default actions initialization.
|
* time toolbar_default actions initialization.
|
||||||
*/
|
*/
|
||||||
_build_menu: function(actions, isDefault)
|
et2_toolbar.prototype._build_menu = function (actions, isDefault) {
|
||||||
{
|
|
||||||
// Clear existing
|
// Clear existing
|
||||||
this.div.empty();
|
this.div.empty();
|
||||||
this.actionbox.empty();
|
this.actionbox.empty();
|
||||||
@ -156,233 +179,160 @@ var et2_toolbar = (function(){ "use strict"; return et2_DOMWidget.extend([et2_II
|
|||||||
this.actionbox.append('<h class="ui-toolbar-menulistHeader">' + egw.lang('more') + ' ...' + admin_setting + '</h>');
|
this.actionbox.append('<h class="ui-toolbar-menulistHeader">' + egw.lang('more') + ' ...' + admin_setting + '</h>');
|
||||||
this.actionbox.append('<div id="' + this.id + '-menulist' + '" class="ui-toolbar-menulist" ></div>');
|
this.actionbox.append('<div id="' + this.id + '-menulist' + '" class="ui-toolbar-menulist" ></div>');
|
||||||
var that = this;
|
var that = this;
|
||||||
if (this.options.is_admin)
|
if (this.options.is_admin) {
|
||||||
{
|
|
||||||
this.actionbox.find('.toolbar-admin-pref').click(function (e) {
|
this.actionbox.find('.toolbar-admin-pref').click(function (e) {
|
||||||
e.stopImmediatePropagation();
|
e.stopImmediatePropagation();
|
||||||
egw.json('EGroupware\\Api\\Etemplate\\Widget\\Toolbar::ajax_get_default_prefs', [egw.app_name(), that.dom_id], function (_prefs) {
|
egw.json('EGroupware\\Api\\Etemplate\\Widget\\Toolbar::ajax_get_default_prefs', [egw.app_name(), that.dom_id], function (_prefs) {
|
||||||
var prefs = [];
|
var prefs = [];
|
||||||
for (var p in _prefs)
|
for (var p in _prefs) {
|
||||||
{
|
if (_prefs[p] === false)
|
||||||
if (_prefs[p] === false) prefs.push(p);
|
prefs.push(p);
|
||||||
}
|
}
|
||||||
that._admin_settings_dialog.call(that, actions, prefs);
|
that._admin_settings_dialog.call(that, actions, prefs);
|
||||||
}).sendRequest(true);
|
}).sendRequest(true);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
var pref = (!egwIsMobile()) ? egw.preference(this.dom_id, this.egw().getAppName()) : undefined;
|
var pref = (!egwIsMobile()) ? egw.preference(this.dom_id, this.egw().getAppName()) : undefined;
|
||||||
if (pref && !jQuery.isArray(pref)) this.preference = pref;
|
if (pref && !jQuery.isArray(pref))
|
||||||
|
this.preference = pref;
|
||||||
//Set the default actions for the first time
|
//Set the default actions for the first time
|
||||||
if (typeof pref === 'undefined' && !isDefault)
|
if (typeof pref === 'undefined' && !isDefault) {
|
||||||
{
|
for (var name in actions) {
|
||||||
for (var name in actions)
|
if ((typeof actions[name].children === 'undefined' || !this.options.flat_list) && actions[name].id) {
|
||||||
{
|
|
||||||
if ((typeof actions[name].children === 'undefined' || !this.options.flat_list) && actions[name].id)
|
|
||||||
{
|
|
||||||
this.set_prefered(actions[name].id, !actions[name].toolbarDefault);
|
this.set_prefered(actions[name].id, !actions[name].toolbarDefault);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if(!isDefault)
|
else if (!isDefault) {
|
||||||
{
|
for (var name in actions) {
|
||||||
for (var name in actions)
|
|
||||||
{
|
|
||||||
// Check if the action is not in the preference, means it's an new added action
|
// Check if the action is not in the preference, means it's an new added action
|
||||||
// therefore it needs to be added to the preference with taking its toolbarDefault
|
// therefore it needs to be added to the preference with taking its toolbarDefault
|
||||||
// option into account.
|
// option into account.
|
||||||
if ((typeof actions[name].children === 'undefined' || !this.options.flat_list)
|
if ((typeof actions[name].children === 'undefined' || !this.options.flat_list)
|
||||||
&& typeof pref[name] === 'undefined')
|
&& typeof pref[name] === 'undefined') {
|
||||||
{
|
|
||||||
this._fix_preference(actions[name]);
|
this._fix_preference(actions[name]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//Count number of actions including their children
|
|
||||||
var countActions = function (actions)
|
|
||||||
{
|
|
||||||
var totalCount = 0;
|
|
||||||
var childCounter = function (action, count)
|
|
||||||
{
|
|
||||||
var children = action.children || 0,
|
|
||||||
returnCounter = count || 0;
|
|
||||||
if (children)
|
|
||||||
{
|
|
||||||
returnCounter -= 1;
|
|
||||||
for (var nChild in children)
|
|
||||||
returnCounter += 1;
|
|
||||||
returnCounter = childCounter (children[nChild], returnCounter);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
returnCounter = count;
|
|
||||||
}
|
|
||||||
return returnCounter;
|
|
||||||
};
|
|
||||||
for (var nAction in actions)
|
|
||||||
{
|
|
||||||
if (that.options.flat_list)
|
|
||||||
{
|
|
||||||
totalCount += childCounter(actions[nAction],1);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
totalCount ++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return totalCount;
|
|
||||||
};
|
|
||||||
var menuLen = 0;
|
var menuLen = 0;
|
||||||
for (var key in this.preference)
|
for (var key in this.preference) {
|
||||||
{
|
if (this.preference[key])
|
||||||
if (this.preference[key]) menuLen++;
|
menuLen++;
|
||||||
}
|
}
|
||||||
|
this.countActions = this._countActions(actions) - menuLen;
|
||||||
this.countActions = countActions(actions) - menuLen;
|
var last_group = null;
|
||||||
|
var last_group_id = null;
|
||||||
var last_group = false;
|
var _loop_1 = function (name_1) {
|
||||||
var last_group_id = false;
|
var action = actions[name_1];
|
||||||
for(var name in actions)
|
if (typeof action == 'string')
|
||||||
{
|
action = { id: name_1, caption: action };
|
||||||
var action = actions[name];
|
|
||||||
if (typeof action == 'string') action = {id: name, caption: action};
|
|
||||||
|
|
||||||
// Add in divider
|
// Add in divider
|
||||||
if(last_group_id != action.group)
|
if (last_group_id != action.group) {
|
||||||
{
|
last_group = jQuery('[data-group="' + action.group + '"]', this_1.actionlist);
|
||||||
last_group = jQuery('[data-group="' + action.group + '"]',this.actionlist);
|
if (last_group.length == 0) {
|
||||||
if(last_group.length == 0)
|
jQuery('<span data-group="' + action.group + '">').appendTo(this_1.actionlist);
|
||||||
{
|
|
||||||
jQuery('<span data-group="'+action.group+'">').appendTo(this.actionlist);
|
|
||||||
}
|
}
|
||||||
last_group_id = action.group;
|
last_group_id = action.group;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Make sure there's something to display
|
// Make sure there's something to display
|
||||||
if(!action.caption && !action.icon && !action.iconUrl) continue;
|
if (!action.caption && !action.icon && !action.iconUrl)
|
||||||
|
return "continue";
|
||||||
if(action.children)
|
if (action.children) {
|
||||||
{
|
|
||||||
var children = {};
|
var children = {};
|
||||||
var add_children = function(root, children) {
|
var add_children_1 = function (root, children) {
|
||||||
for(var id in root.children)
|
for (var id in root.children) {
|
||||||
{
|
|
||||||
var info = {
|
var info = {
|
||||||
id: id || root.children[id].id,
|
id: id || root.children[id].id,
|
||||||
label: root.children[id].caption
|
label: root.children[id].caption
|
||||||
};
|
};
|
||||||
var childaction = {};
|
var childaction = {};
|
||||||
if(root.children[id].iconUrl)
|
if (root.children[id].iconUrl) {
|
||||||
{
|
info['icon'] = root.children[id].iconUrl;
|
||||||
info.icon = root.children[id].iconUrl;
|
|
||||||
}
|
}
|
||||||
if(root.children[id].children)
|
if (root.children[id].children) {
|
||||||
{
|
add_children_1(root.children[id], info);
|
||||||
add_children(root.children[id], info);
|
|
||||||
}
|
}
|
||||||
children[id] = info;
|
children[id] = info;
|
||||||
|
if (that.options.flat_list) {
|
||||||
if (that.options.flat_list)
|
|
||||||
{
|
|
||||||
childaction = root.children[id];
|
childaction = root.children[id];
|
||||||
if (typeof pref === 'undefined' && !isDefault)
|
if (typeof pref === 'undefined' && !isDefault) {
|
||||||
{
|
if (!childaction['toolbarDefault']) {
|
||||||
if (!childaction.toolbarDefault)
|
that.set_prefered(childaction['id'], true);
|
||||||
{
|
|
||||||
that.set_prefered(childaction.id,true);
|
|
||||||
}
|
}
|
||||||
else
|
else {
|
||||||
{
|
that.set_prefered(childaction['id'], false);
|
||||||
that.set_prefered(childaction.id,false);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if(!isDefault)
|
else if (!isDefault) {
|
||||||
{
|
if (typeof pref[childaction['id']] === 'undefined') {
|
||||||
if (typeof pref[childaction.id] === 'undefined')
|
|
||||||
{
|
|
||||||
that._fix_preference(childaction);
|
that._fix_preference(childaction);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (typeof root.children[id].group !== 'undefined' &&
|
if (typeof root.children[id].group !== 'undefined' &&
|
||||||
typeof root.group !== 'undefined')
|
typeof root.group !== 'undefined') {
|
||||||
{
|
childaction['group'] = root.group;
|
||||||
childaction.group = root.group;
|
|
||||||
}
|
}
|
||||||
that._make_button(childaction);
|
that._make_button(childaction);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
add_children(action, children);
|
add_children_1(action, children);
|
||||||
if (this.options.flat_list && children)
|
if (this_1.options.flat_list && children) {
|
||||||
{
|
return "continue";
|
||||||
continue;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var dropdown = et2_createWidget("dropdown_button", {
|
var dropdown = et2_createWidget("dropdown_button", {
|
||||||
id: action.id
|
id: action.id
|
||||||
},this);
|
}, this_1);
|
||||||
|
|
||||||
dropdown.set_select_options(children);
|
dropdown.set_select_options(children);
|
||||||
dropdown.set_label(action.caption);
|
dropdown.set_label(action.caption);
|
||||||
//Set default selected action
|
//Set default selected action
|
||||||
if (typeof action.children !='undefined')
|
if (typeof action.children != 'undefined') {
|
||||||
{
|
for (var child in action.children) {
|
||||||
for (var child in action.children)
|
if (action.children[child].default) {
|
||||||
{
|
|
||||||
if(action.children[child].default)
|
|
||||||
{
|
|
||||||
dropdown.set_label(action.children[child].caption);
|
dropdown.set_label(action.children[child].caption);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
dropdown.set_image(action.iconUrl || '');
|
dropdown.set_image(action.iconUrl || '');
|
||||||
dropdown.onchange = jQuery.proxy(function(selected, dropdown)
|
dropdown.onchange = jQuery.proxy(function (selected, dropdown) {
|
||||||
{
|
|
||||||
var action = that._actionManager.getActionById(selected.attr('data-id'));
|
var action = that._actionManager.getActionById(selected.attr('data-id'));
|
||||||
dropdown.set_label(action.caption);
|
dropdown.set_label(action.caption);
|
||||||
if(action)
|
if (action) {
|
||||||
{
|
|
||||||
this.value = action.id;
|
this.value = action.id;
|
||||||
action.execute([]);
|
action.execute([]);
|
||||||
}
|
}
|
||||||
//console.debug(selected, this, action);
|
//console.debug(selected, this, action);
|
||||||
}, action);
|
}, action);
|
||||||
dropdown.onclick = jQuery.proxy(function(selected, dropdown)
|
dropdown.onclick = jQuery.proxy(function (selected, dropdown) {
|
||||||
{
|
|
||||||
var action = that._actionManager.getActionById(this.getValue());
|
var action = that._actionManager.getActionById(this.getValue());
|
||||||
if(action)
|
if (action) {
|
||||||
{
|
|
||||||
this.value = action.id;
|
this.value = action.id;
|
||||||
action.execute([]);
|
action.execute([]);
|
||||||
}
|
}
|
||||||
//console.debug(selected, this, action);
|
//console.debug(selected, this, action);
|
||||||
}, dropdown);
|
}, dropdown);
|
||||||
jQuery(dropdown.getDOMNode())
|
jQuery(dropdown.getDOMNode())
|
||||||
.attr('id',this.id + '-' + dropdown.id)
|
.attr('id', this_1.id + '-' + dropdown.id)
|
||||||
.addClass(this.preference[action.id]?'et2_toolbar-dropdown et2_toolbar-dropdown-menulist':'et2_toolbar-dropdown')
|
.addClass(this_1.preference[action.id] ? 'et2_toolbar-dropdown et2_toolbar-dropdown-menulist' : 'et2_toolbar-dropdown')
|
||||||
.appendTo(this.preference[action.id]?this.actionbox.children()[1]:jQuery('[data-group='+action.group+']',this.actionlist));
|
.appendTo(this_1.preference[action.id] ? this_1.actionbox.children()[1] : jQuery('[data-group=' + action.group + ']', this_1.actionlist));
|
||||||
}
|
}
|
||||||
else
|
else {
|
||||||
{
|
this_1._make_button(action);
|
||||||
this._make_button(action);
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
var this_1 = this;
|
||||||
|
for (var name_1 in actions) {
|
||||||
|
_loop_1(name_1);
|
||||||
}
|
}
|
||||||
|
|
||||||
// ************** Drag and Drop feature for toolbar *****
|
// ************** Drag and Drop feature for toolbar *****
|
||||||
this.actionlist.find('span[data-group]').sort(function (lg, g) {
|
this.actionlist.find('span[data-group]').sort(function (lg, g) {
|
||||||
return +lg.getAttribute('data-group') - +g.getAttribute('data-group');
|
return +lg.getAttribute('data-group') - +g.getAttribute('data-group');
|
||||||
}).appendTo(this.actionlist);
|
}).appendTo(this.actionlist);
|
||||||
|
|
||||||
this.actionlist.appendTo(this.div);
|
this.actionlist.appendTo(this.div);
|
||||||
this.actionbox.appendTo(this.div);
|
this.actionbox.appendTo(this.div);
|
||||||
|
var toolbar = this.actionlist.find('span[data-group]').children(), toolbox = this.actionbox, menulist = jQuery(this.actionbox.children()[1]);
|
||||||
var toolbar = this.actionlist.find('span[data-group]').children(),
|
|
||||||
toolbox = this.actionbox,
|
|
||||||
menulist = jQuery(this.actionbox.children()[1]);
|
|
||||||
|
|
||||||
toolbar.draggable({
|
toolbar.draggable({
|
||||||
cancel:true,
|
cancel: '',
|
||||||
zIndex: 1000,
|
zIndex: 1000,
|
||||||
delay: 500,
|
delay: 500,
|
||||||
//revert:"invalid",
|
//revert:"invalid",
|
||||||
@ -395,18 +345,16 @@ var et2_toolbar = (function(){ "use strict"; return et2_DOMWidget.extend([et2_II
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
menulist.children().draggable({
|
menulist.children().draggable({
|
||||||
cancel:true,
|
cancel: '',
|
||||||
containment: "document",
|
containment: "document",
|
||||||
helper: "clone",
|
helper: "clone",
|
||||||
appendTo: 'body',
|
appendTo: 'body',
|
||||||
zIndex: 1000,
|
zIndex: 1000,
|
||||||
cursor: "move",
|
cursor: "move",
|
||||||
start: function()
|
start: function () {
|
||||||
{
|
|
||||||
jQuery(that.actionlist).addClass('et2_toolbarDropArea');
|
jQuery(that.actionlist).addClass('et2_toolbarDropArea');
|
||||||
},
|
},
|
||||||
stop: function()
|
stop: function () {
|
||||||
{
|
|
||||||
jQuery(that.actionlist).removeClass('et2_toolbarDropArea');
|
jQuery(that.actionlist).removeClass('et2_toolbarDropArea');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -415,15 +363,13 @@ var et2_toolbar = (function(){ "use strict"; return et2_DOMWidget.extend([et2_II
|
|||||||
drop: function (event, ui) {
|
drop: function (event, ui) {
|
||||||
that.set_prefered(ui.draggable.attr('id').replace(that.id + '-', ''), true);
|
that.set_prefered(ui.draggable.attr('id').replace(that.id + '-', ''), true);
|
||||||
ui.draggable.appendTo(menulist);
|
ui.draggable.appendTo(menulist);
|
||||||
if (that.actionlist.find(".ui-draggable").length == 0)
|
if (that.actionlist.find(".ui-draggable").length == 0) {
|
||||||
{
|
|
||||||
that.preference = {};
|
that.preference = {};
|
||||||
egw.set_preference(that.egw().getAppName(), that.dom_id, that.preference);
|
egw.set_preference(that.egw().getAppName(), that.dom_id, that.preference);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
tolerance: "touch"
|
tolerance: "touch"
|
||||||
});
|
});
|
||||||
|
|
||||||
this.actionlist.droppable({
|
this.actionlist.droppable({
|
||||||
tolerance: "pointer",
|
tolerance: "pointer",
|
||||||
drop: function (event, ui) {
|
drop: function (event, ui) {
|
||||||
@ -438,8 +384,7 @@ var et2_toolbar = (function(){ "use strict"; return et2_DOMWidget.extend([et2_II
|
|||||||
active: 'none',
|
active: 'none',
|
||||||
activate: function (event, ui) {
|
activate: function (event, ui) {
|
||||||
var menubox = event.target;
|
var menubox = event.target;
|
||||||
if (ui.oldHeader.length == 0)
|
if (ui.oldHeader.length == 0) {
|
||||||
{
|
|
||||||
jQuery('html').on('click.outsideOfMenu', function (event) {
|
jQuery('html').on('click.outsideOfMenu', function (event) {
|
||||||
jQuery(menubox).accordion("option", "active", 2);
|
jQuery(menubox).accordion("option", "active", 2);
|
||||||
jQuery(this).unbind(event);
|
jQuery(this).unbind(event);
|
||||||
@ -451,22 +396,19 @@ var et2_toolbar = (function(){ "use strict"; return et2_DOMWidget.extend([et2_II
|
|||||||
create: function (event, ui) {
|
create: function (event, ui) {
|
||||||
jQuery('html').unbind('click.outsideOfMenu');
|
jQuery('html').unbind('click.outsideOfMenu');
|
||||||
},
|
},
|
||||||
beforeActivate: function ()
|
beforeActivate: function () {
|
||||||
{
|
if (egwIsMobile()) {
|
||||||
if (egwIsMobile())
|
|
||||||
{
|
|
||||||
menulist.height(screen.availHeight - 50);
|
menulist.height(screen.availHeight - 50);
|
||||||
}
|
}
|
||||||
else
|
else {
|
||||||
{
|
menulist.css({ height: 'inherit' });
|
||||||
menulist.css({height:'inherit'})
|
|
||||||
}
|
}
|
||||||
// Nothing to show in menulist
|
// Nothing to show in menulist
|
||||||
if (menulist.children().length == 0) return false;
|
if (menulist.children().length == 0)
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add/Or remove an action from prefence
|
* Add/Or remove an action from prefence
|
||||||
*
|
*
|
||||||
@ -474,34 +416,27 @@ var et2_toolbar = (function(){ "use strict"; return et2_DOMWidget.extend([et2_II
|
|||||||
* @param {boolean} _state if set to true action will be set to actionbox, false will set it to actionlist
|
* @param {boolean} _state if set to true action will be set to actionbox, false will set it to actionlist
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
set_prefered: function(_action,_state)
|
et2_toolbar.prototype.set_prefered = function (_action, _state) {
|
||||||
{
|
|
||||||
this.preference[_action] = _state;
|
this.preference[_action] = _state;
|
||||||
if (egwIsMobile()) return;
|
if (egwIsMobile())
|
||||||
|
return;
|
||||||
egw.set_preference(this.egw().getAppName(), this.dom_id, this.preference);
|
egw.set_preference(this.egw().getAppName(), this.dom_id, this.preference);
|
||||||
},
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Make a button based on the given action
|
* Make a button based on the given action
|
||||||
*
|
*
|
||||||
* @param {Object} action action object with attributes icon, caption, ...
|
* @param {Object} action action object with attributes icon, caption, ...
|
||||||
*/
|
*/
|
||||||
_make_button: function(action)
|
et2_toolbar.prototype._make_button = function (action) {
|
||||||
{
|
var button_options = {};
|
||||||
var button_options = {
|
|
||||||
};
|
|
||||||
var button = jQuery(document.createElement('button'))
|
var button = jQuery(document.createElement('button'))
|
||||||
.addClass("et2_button et2_button_text et2_button_with_image")
|
.addClass("et2_button et2_button_text et2_button_with_image")
|
||||||
.attr('id', this.id + '-' + action.id)
|
.attr('id', this.id + '-' + action.id)
|
||||||
.attr('type', 'button')
|
.attr('type', 'button')
|
||||||
.appendTo(this.preference[action.id] ? this.actionbox.children()[1] : jQuery('[data-group=' + action.group + ']', this.actionlist));
|
.appendTo(this.preference[action.id] ? this.actionbox.children()[1] : jQuery('[data-group=' + action.group + ']', this.actionlist));
|
||||||
|
|
||||||
this.egw().tooltipBind(button, action.hint ? action.hint : action.caption) + (action.shortcut ? ' (' + action.shortcut.caption + ')' : '');
|
this.egw().tooltipBind(button, action.hint ? action.hint : action.caption) + (action.shortcut ? ' (' + action.shortcut.caption + ')' : '');
|
||||||
|
if (action && action.checkbox) {
|
||||||
if (action && action.checkbox)
|
if (action.data.toggle_on || action.data.toggle_off) {
|
||||||
{
|
|
||||||
if (action.data.toggle_on || action.data.toggle_off)
|
|
||||||
{
|
|
||||||
var toggle = et2_createWidget('checkbox', {
|
var toggle = et2_createWidget('checkbox', {
|
||||||
id: this.id + '-' + action.id,
|
id: this.id + '-' + action.id,
|
||||||
toggle_on: action.data.toggle_on,
|
toggle_on: action.data.toggle_on,
|
||||||
@ -515,19 +450,16 @@ var et2_toolbar = (function(){ "use strict"; return et2_DOMWidget.extend([et2_II
|
|||||||
.attr('id', this.id + '-' + action.id);
|
.attr('id', this.id + '-' + action.id);
|
||||||
button.remove();
|
button.remove();
|
||||||
button = toggle;
|
button = toggle;
|
||||||
|
|
||||||
}
|
}
|
||||||
else
|
else {
|
||||||
{
|
if (this.checkbox(action.id))
|
||||||
if (this.checkbox(action.id)) button.addClass('toolbar_toggled'+ (typeof action.toggledClass != 'undefined'?" "+action.toggledClass:''));
|
button.addClass('toolbar_toggled' + (typeof action.toggledClass != 'undefined' ? " " + action.toggledClass : ''));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if ( action.iconUrl)
|
if (action.iconUrl) {
|
||||||
{
|
|
||||||
button.attr('style', 'background-image:url(' + action.iconUrl + ')');
|
button.attr('style', 'background-image:url(' + action.iconUrl + ')');
|
||||||
}
|
}
|
||||||
if (action.caption)
|
if (action.caption) {
|
||||||
{
|
|
||||||
if ((this.countActions <= parseInt(this.options.view_range) ||
|
if ((this.countActions <= parseInt(this.options.view_range) ||
|
||||||
this.preference[action.id] || !action.iconUrl) &&
|
this.preference[action.id] || !action.iconUrl) &&
|
||||||
typeof button[0] !== 'undefined' &&
|
typeof button[0] !== 'undefined' &&
|
||||||
@ -537,23 +469,18 @@ var et2_toolbar = (function(){ "use strict"; return et2_DOMWidget.extend([et2_II
|
|||||||
button[0].textContent = action.caption;
|
button[0].textContent = action.caption;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if(action.icon)
|
if (action.icon) {
|
||||||
{
|
button_options['icon'] = action.icon;
|
||||||
button_options.icon = action.icon;
|
|
||||||
}
|
}
|
||||||
if (!jQuery.isEmptyObject(button_options))
|
if (!jQuery.isEmptyObject(button_options)) {
|
||||||
{
|
|
||||||
button.button(button_options);
|
button.button(button_options);
|
||||||
}
|
}
|
||||||
var self = this;
|
var self = this;
|
||||||
// Set up the click action
|
// Set up the click action
|
||||||
var click = function(e)
|
var click = function (e) {
|
||||||
{
|
|
||||||
var action = this._actionManager.getActionById(e.data);
|
var action = this._actionManager.getActionById(e.data);
|
||||||
if(action)
|
if (action) {
|
||||||
{
|
if (action.checkbox) {
|
||||||
if (action.checkbox)
|
|
||||||
{
|
|
||||||
self.checkbox(action.id, !action.checked);
|
self.checkbox(action.id, !action.checked);
|
||||||
}
|
}
|
||||||
this.value = action.id;
|
this.value = action.id;
|
||||||
@ -561,49 +488,38 @@ var et2_toolbar = (function(){ "use strict"; return et2_DOMWidget.extend([et2_II
|
|||||||
action.execute([]);
|
action.execute([]);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
button.click(action.id, jQuery.proxy(click, this));
|
button.click(action.id, jQuery.proxy(click, this));
|
||||||
},
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Link the actions to the DOM nodes / widget bits.
|
* Link the actions to the DOM nodes / widget bits.
|
||||||
*
|
*
|
||||||
* @param {Object} actions egw-actions to build menu from
|
* @param {Object} actions egw-actions to build menu from
|
||||||
*/
|
*/
|
||||||
_link_actions: function(actions)
|
et2_toolbar.prototype._link_actions = function (actions) {
|
||||||
{
|
|
||||||
this._build_menu(actions);
|
this._build_menu(actions);
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
var gom = egw_getObjectManager(this.egw().appName,true,1);
|
var gom = egw_action_js_1.egw_getObjectManager(this.egw().appName, true, 1);
|
||||||
if(this._objectManager == null)
|
if (this._objectManager == null) {
|
||||||
{
|
this._objectManager = gom.addObject(new egw_action_js_1.egwActionObjectManager(this.id, this._actionManager));
|
||||||
this._objectManager = gom.addObject(
|
|
||||||
new egwActionObjectManager(this.id, this._actionManager));
|
|
||||||
|
|
||||||
this._objectManager.handleKeyPress = function (_keyCode, _shift, _ctrl, _alt) {
|
this._objectManager.handleKeyPress = function (_keyCode, _shift, _ctrl, _alt) {
|
||||||
for(var i = 0; i < self._actionManager.children.length; i++)
|
for (var i = 0; i < self._actionManager.children.length; i++) {
|
||||||
{
|
|
||||||
var action = self._actionManager.children[i];
|
var action = self._actionManager.children[i];
|
||||||
if (typeof action.shortcut === 'object' &&
|
if (typeof action.shortcut === 'object' &&
|
||||||
action.shortcut &&
|
action.shortcut &&
|
||||||
_keyCode == action.shortcut.keyCode &&
|
_keyCode == action.shortcut.keyCode &&
|
||||||
_ctrl == action.shortcut.ctrl &&
|
_ctrl == action.shortcut.ctrl &&
|
||||||
_alt == action.shortcut.alt &&
|
_alt == action.shortcut.alt &&
|
||||||
_shift == action.shortcut.shift
|
_shift == action.shortcut.shift) {
|
||||||
)
|
|
||||||
{
|
|
||||||
self.value = action.id;
|
self.value = action.id;
|
||||||
action.execute([]);
|
action.execute([]);
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return egwActionObject.prototype.handleKeyPress.call(this, _keyCode,_shift,_ctrl,_alt);
|
return egw_action_js_1.egwActionObject.prototype.handleKeyPress.call(this, _keyCode, _shift, _ctrl, _alt);
|
||||||
}
|
};
|
||||||
this._objectManager.parent.updateFocusedChild(this._objectManager, true);
|
this._objectManager.parent.updateFocusedChild(this._objectManager, true);
|
||||||
}
|
}
|
||||||
},
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Set/Get the checkbox toolbar action
|
* Set/Get the checkbox toolbar action
|
||||||
*
|
*
|
||||||
@ -614,64 +530,49 @@ var et2_toolbar = (function(){ "use strict"; return et2_DOMWidget.extend([et2_II
|
|||||||
* @returns {boolean} returns boolean result of get checkbox value
|
* @returns {boolean} returns boolean result of get checkbox value
|
||||||
* or returns undefined as Set result or failure
|
* or returns undefined as Set result or failure
|
||||||
*/
|
*/
|
||||||
checkbox: function (_action, _value)
|
et2_toolbar.prototype.checkbox = function (_action, _value) {
|
||||||
{
|
if (!_action || typeof this._actionManager == 'undefined')
|
||||||
if (!_action || typeof this._actionManager == 'undefined') return undefined;
|
return undefined;
|
||||||
var action_event = this._actionManager.getActionById(_action);
|
var action_event = this._actionManager.getActionById(_action);
|
||||||
|
if (action_event && typeof _value != 'undefined') {
|
||||||
if (action_event && typeof _value !='undefined')
|
|
||||||
{
|
|
||||||
action_event.set_checked(_value);
|
action_event.set_checked(_value);
|
||||||
var btn = jQuery('#' + this.id + '-' + _action);
|
var btn = jQuery('#' + this.id + '-' + _action);
|
||||||
if(action_event.data && action_event.data.widget)
|
if (action_event.data && action_event.data.widget) {
|
||||||
{
|
|
||||||
action_event.data.widget.set_value(_value);
|
action_event.data.widget.set_value(_value);
|
||||||
}
|
}
|
||||||
else if (btn.length > 0)
|
else if (btn.length > 0) {
|
||||||
{
|
|
||||||
btn.toggleClass('toolbar_toggled' + (typeof action_event.data.toggledClass != 'undefined' ? " " + action_event.data.toggledClass : ''), _value);
|
btn.toggleClass('toolbar_toggled' + (typeof action_event.data.toggledClass != 'undefined' ? " " + action_event.data.toggledClass : ''), _value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if (action_event)
|
else if (action_event) {
|
||||||
{
|
|
||||||
return action_event.checked;
|
return action_event.checked;
|
||||||
}
|
}
|
||||||
else
|
else {
|
||||||
{
|
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
},
|
};
|
||||||
|
et2_toolbar.prototype.getDOMNode = function () {
|
||||||
getDOMNode: function(asker)
|
|
||||||
{
|
|
||||||
return this.div[0];
|
return this.div[0];
|
||||||
},
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* getValue has to return the value of the input widget
|
* getValue has to return the value of the input widget
|
||||||
*/
|
*/
|
||||||
getValue: function()
|
et2_toolbar.prototype.getValue = function () {
|
||||||
{
|
|
||||||
return this.value;
|
return this.value;
|
||||||
},
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Is dirty returns true if the value of the widget has changed since it
|
* Is dirty returns true if the value of the widget has changed since it
|
||||||
* was loaded.
|
* was loaded.
|
||||||
*/
|
*/
|
||||||
isDirty: function()
|
et2_toolbar.prototype.isDirty = function () {
|
||||||
{
|
|
||||||
return this.value != null;
|
return this.value != null;
|
||||||
},
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Causes the dirty flag to be reseted.
|
* Causes the dirty flag to be reseted.
|
||||||
*/
|
*/
|
||||||
resetDirty: function()
|
et2_toolbar.prototype.resetDirty = function () {
|
||||||
{
|
|
||||||
this.value = null;
|
this.value = null;
|
||||||
},
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Checks the data to see if it is valid, as far as the client side can tell.
|
* Checks the data to see if it is valid, as far as the client side can tell.
|
||||||
* Return true if it's not possible to tell on the client side, because the server
|
* Return true if it's not possible to tell on the client side, because the server
|
||||||
@ -686,28 +587,24 @@ var et2_toolbar = (function(){ "use strict"; return et2_DOMWidget.extend([et2_II
|
|||||||
*
|
*
|
||||||
* @return {boolean} True if the value is valid (enough), false to fail
|
* @return {boolean} True if the value is valid (enough), false to fail
|
||||||
*/
|
*/
|
||||||
isValid: function(messages)
|
et2_toolbar.prototype.isValid = function (messages) {
|
||||||
{
|
|
||||||
return true;
|
return true;
|
||||||
},
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Attach the container node of the widget to DOM-Tree
|
* Attach the container node of the widget to DOM-Tree
|
||||||
* @returns {Boolean}
|
* @returns {Boolean}
|
||||||
*/
|
*/
|
||||||
doLoadingFinished: function ()
|
et2_toolbar.prototype.doLoadingFinished = function () {
|
||||||
{
|
_super.prototype.doLoadingFinished.call(this);
|
||||||
this._super.apply(this, arguments);
|
|
||||||
return false;
|
return false;
|
||||||
},
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Builds dialog for possible admin settings (e.g. default actions pref)
|
* Builds dialog for possible admin settings (e.g. default actions pref)
|
||||||
*
|
*
|
||||||
* @param {type} _actions
|
* @param {type} _actions
|
||||||
|
* @param {object} _default_prefs
|
||||||
*/
|
*/
|
||||||
_admin_settings_dialog: function (_actions, _default_prefs)
|
et2_toolbar.prototype._admin_settings_dialog = function (_actions, _default_prefs) {
|
||||||
{
|
|
||||||
var buttons = [
|
var buttons = [
|
||||||
{ text: egw.lang("Save"), id: "save" },
|
{ text: egw.lang("Save"), id: "save" },
|
||||||
{ text: egw.lang("Close"), id: "close" }
|
{ text: egw.lang("Close"), id: "close" }
|
||||||
@ -715,12 +612,9 @@ var et2_toolbar = (function(){ "use strict"; return et2_DOMWidget.extend([et2_II
|
|||||||
var self = this;
|
var self = this;
|
||||||
var sel_options = { actions: [] };
|
var sel_options = { actions: [] };
|
||||||
var content = { actions: [], reset: false };
|
var content = { actions: [], reset: false };
|
||||||
for (var key in _actions)
|
for (var key in _actions) {
|
||||||
{
|
if (_actions[key]['children'] && this.options.flat_list) {
|
||||||
if (_actions[key]['children'] && this.flat_list)
|
for (var child in _actions[key]['children']) {
|
||||||
{
|
|
||||||
for (var child in _actions[key]['children'])
|
|
||||||
{
|
|
||||||
sel_options.actions.push({
|
sel_options.actions.push({
|
||||||
id: child,
|
id: child,
|
||||||
value: child,
|
value: child,
|
||||||
@ -730,8 +624,7 @@ var et2_toolbar = (function(){ "use strict"; return et2_DOMWidget.extend([et2_II
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else
|
else {
|
||||||
{
|
|
||||||
sel_options.actions.push({
|
sel_options.actions.push({
|
||||||
id: key,
|
id: key,
|
||||||
value: key,
|
value: key,
|
||||||
@ -740,27 +633,24 @@ var et2_toolbar = (function(){ "use strict"; return et2_DOMWidget.extend([et2_II
|
|||||||
icon: _actions[key]['iconUrl']
|
icon: _actions[key]['iconUrl']
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if ((!_default_prefs || _default_prefs.length == 0) && _actions[key]['toolbarDefault']) content.actions.push(key);
|
if ((!_default_prefs || _default_prefs.length == 0) && _actions[key]['toolbarDefault'])
|
||||||
|
content.actions.push(key);
|
||||||
}
|
}
|
||||||
if (_default_prefs && _default_prefs.length > 0) content.actions = _default_prefs;
|
if (_default_prefs && _default_prefs.length > 0)
|
||||||
et2_createWidget("dialog",
|
content.actions = _default_prefs;
|
||||||
{
|
et2_createWidget("dialog", {
|
||||||
callback: function(_button_id, _value)
|
callback: function (_button_id, _value) {
|
||||||
{
|
if (_button_id == 'save' && _value) {
|
||||||
if (_button_id == 'save' && _value)
|
if (_value.actions) {
|
||||||
{
|
|
||||||
if (_value.actions)
|
|
||||||
{
|
|
||||||
var pref = jQuery.extend({}, self.preference);
|
var pref = jQuery.extend({}, self.preference);
|
||||||
for (var i in pref)
|
for (var i in pref) {
|
||||||
{
|
|
||||||
pref[i] = true;
|
pref[i] = true;
|
||||||
if (_value.actions.includes(i)) pref[i] = false;
|
if (_value.actions.includes(i))
|
||||||
|
pref[i] = false;
|
||||||
}
|
}
|
||||||
_value.actions = pref;
|
_value.actions = pref;
|
||||||
}
|
}
|
||||||
egw.json('EGroupware\\Api\\Etemplate\\Widget\\Toolbar::ajax_setAdminSettings',
|
egw.json('EGroupware\\Api\\Etemplate\\Widget\\Toolbar::ajax_setAdminSettings', [_value, self.dom_id, egw.app_name()], function (_result) {
|
||||||
[_value, self.dom_id, egw.app_name()],function(_result){
|
|
||||||
egw.message(_result);
|
egw.message(_result);
|
||||||
}).sendRequest(true);
|
}).sendRequest(true);
|
||||||
}
|
}
|
||||||
@ -773,6 +663,30 @@ var et2_toolbar = (function(){ "use strict"; return et2_DOMWidget.extend([et2_II
|
|||||||
template: egw.webserverUrl + '/api/templates/default/toolbarAdminSettings.xet?1',
|
template: egw.webserverUrl + '/api/templates/default/toolbarAdminSettings.xet?1',
|
||||||
resizable: false
|
resizable: false
|
||||||
}, et2_dialog._create_parent('api'));
|
}, et2_dialog._create_parent('api'));
|
||||||
|
};
|
||||||
|
et2_toolbar._attributes = {
|
||||||
|
"view_range": {
|
||||||
|
"name": "View range",
|
||||||
|
"type": "string",
|
||||||
|
"default": "5",
|
||||||
|
"description": "Define minimum action view range to show actions by both icons and caption"
|
||||||
|
},
|
||||||
|
"flat_list": {
|
||||||
|
"name": "Flat list",
|
||||||
|
"type": "boolean",
|
||||||
|
"default": true,
|
||||||
|
"description": "Define whether the actions with children should be shown as dropdown or flat list"
|
||||||
}
|
}
|
||||||
});}).call(this);
|
};
|
||||||
et2_register_widget(et2_toolbar, ["toolbar"]);
|
/**
|
||||||
|
* Default buttons, so there is something for the widget browser / editor to show
|
||||||
|
*/
|
||||||
|
et2_toolbar.default_toolbar = {
|
||||||
|
view: { caption: 'View', icons: { primary: 'ui-icon-check' }, group: 1, toolbarDefault: true },
|
||||||
|
edit: { caption: 'Edit', group: 1, toolbarDefault: true },
|
||||||
|
save: { caption: 'Save', group: 2, toolbarDefault: true }
|
||||||
|
};
|
||||||
|
return et2_toolbar;
|
||||||
|
}(et2_core_DOMWidget_1.et2_DOMWidget));
|
||||||
|
et2_core_widget_1.et2_register_widget(et2_toolbar, ["toolbar"]);
|
||||||
|
//# sourceMappingURL=et2_widget_toolbar.js.map
|
||||||
812
api/js/etemplate/et2_widget_toolbar.ts
Normal file
812
api/js/etemplate/et2_widget_toolbar.ts
Normal file
@ -0,0 +1,812 @@
|
|||||||
|
/**
|
||||||
|
* EGroupware eTemplate2 - JS toolbar object
|
||||||
|
*
|
||||||
|
* @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
|
||||||
|
* @copyright Nathan Gray 2013
|
||||||
|
* @version $Id$
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*egw:uses
|
||||||
|
/vendor/bower-asset/jquery/dist/jquery.js;
|
||||||
|
/vendor/bower-asset/jquery-ui/jquery-ui.js;
|
||||||
|
et2_DOMWidget;
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {et2_DOMWidget} from "./et2_core_DOMWidget";
|
||||||
|
import {et2_register_widget, WidgetConfig} from "./et2_core_widget";
|
||||||
|
import {ClassWithAttributes} from "./et2_core_inheritance";
|
||||||
|
import {
|
||||||
|
egw_getObjectManager,
|
||||||
|
egwActionObject,
|
||||||
|
egwActionObjectManager
|
||||||
|
} from '../egw_action/egw_action.js';
|
||||||
|
import './et2_types';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This toolbar gets its contents from its actions
|
||||||
|
*
|
||||||
|
* @augments et2_valueWidget
|
||||||
|
*/
|
||||||
|
class et2_toolbar extends et2_DOMWidget implements et2_IInput
|
||||||
|
{
|
||||||
|
static readonly _attributes : any = {
|
||||||
|
"view_range": {
|
||||||
|
"name": "View range",
|
||||||
|
"type": "string",
|
||||||
|
"default": "5",
|
||||||
|
"description": "Define minimum action view range to show actions by both icons and caption"
|
||||||
|
},
|
||||||
|
"flat_list": {
|
||||||
|
"name": "Flat list",
|
||||||
|
"type": "boolean",
|
||||||
|
"default": true,
|
||||||
|
"description": "Define whether the actions with children should be shown as dropdown or flat list"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Default buttons, so there is something for the widget browser / editor to show
|
||||||
|
*/
|
||||||
|
static default_toolbar : any = {
|
||||||
|
view: {caption:'View', icons: {primary: 'ui-icon-check'}, group:1, toolbarDefault:true},
|
||||||
|
edit: {caption:'Edit', group:1, toolbarDefault:true},
|
||||||
|
save: {caption:'Save', group:2, toolbarDefault:true}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* id of last action executed / value of toolbar if submitted
|
||||||
|
*/
|
||||||
|
value : string = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* actionbox is a div for stored actions
|
||||||
|
*/
|
||||||
|
private readonly actionbox : JQuery = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* actionlist is a div for active actions
|
||||||
|
*/
|
||||||
|
private readonly actionlist : JQuery = null;
|
||||||
|
div : JQuery = null;
|
||||||
|
private countActions : number = 0;
|
||||||
|
private dropdowns : object = {};
|
||||||
|
private preference : object = {};
|
||||||
|
menu : any = null;
|
||||||
|
private _objectManager : egw_getObjectManager = null;
|
||||||
|
|
||||||
|
constructor(_parent, _attrs? : WidgetConfig, _child? : object)
|
||||||
|
{
|
||||||
|
// Call the inherited constructor
|
||||||
|
super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_toolbar._attributes, _child || {}));
|
||||||
|
|
||||||
|
this.div = jQuery(document.createElement('div'))
|
||||||
|
.addClass('et2_toolbar ui-widget-header ui-corner-all');
|
||||||
|
|
||||||
|
// Set proper id and dom_id for the widget
|
||||||
|
this.set_id(this.id);
|
||||||
|
|
||||||
|
|
||||||
|
this.actionbox = jQuery(document.createElement('div'))
|
||||||
|
.addClass("et2_toolbar_more")
|
||||||
|
.attr('id',this.id +'-'+ 'actionbox');
|
||||||
|
|
||||||
|
this.actionlist = jQuery(document.createElement('div'))
|
||||||
|
.addClass("et2_toolbar_actionlist")
|
||||||
|
.attr('id',this.id +'-'+ 'actionlist');
|
||||||
|
|
||||||
|
this.countActions = 0;
|
||||||
|
this.dropdowns = {};
|
||||||
|
this.preference = {};
|
||||||
|
|
||||||
|
this._build_menu(et2_toolbar.default_toolbar, true);
|
||||||
|
};
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
// Destroy widget
|
||||||
|
if(this.div && this.div.data('ui-menu')) this.menu.menu("destroy");
|
||||||
|
|
||||||
|
// Null children
|
||||||
|
|
||||||
|
// Remove
|
||||||
|
this.div.empty().remove();
|
||||||
|
this.actionbox.empty().remove();
|
||||||
|
this.actionlist.empty().remove();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fix function in order to fix toolbar preferences with the new preference structure
|
||||||
|
* @param {action object} _action
|
||||||
|
* @todo ** SEE IMPORTANT TODO **
|
||||||
|
*/
|
||||||
|
private _fix_preference(_action)
|
||||||
|
{
|
||||||
|
|
||||||
|
// ** IMPORTANT TODO: This switch case should be removed for new release **
|
||||||
|
// This is an ugly hack but we need to add this switch becuase to update and fix
|
||||||
|
// current users toolbar preferences with the new structure which is:
|
||||||
|
// - All actions should be stored in preference
|
||||||
|
// - Actions inside menu set as true
|
||||||
|
// - Actions outside menu set as false
|
||||||
|
// - if an action gets added to toolbar it would be undefined in
|
||||||
|
// the preference which we need to consider to add it to the preference
|
||||||
|
// according to its toolbarDefault option.
|
||||||
|
if (this.dom_id === 'mail-display_displayToolbar' || this.dom_id === 'mail-index_toolbar')
|
||||||
|
{
|
||||||
|
switch (_action.id)
|
||||||
|
{
|
||||||
|
// Actions newly added to mail index and display toolbar
|
||||||
|
case 'read':
|
||||||
|
case 'label1':
|
||||||
|
case 'label2':
|
||||||
|
case 'label3':
|
||||||
|
case 'label4':
|
||||||
|
case 'label5':
|
||||||
|
this.set_prefered(_action.id, !_action.toolbarDefault);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
// Fix structure and add the actions not the preference
|
||||||
|
// into the preference with value false, as they're already
|
||||||
|
// outside of the menu.
|
||||||
|
this.set_prefered(_action.id, false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
// ** IMPORTANT TODO: This line needs to stay and be fixed with !toolbarDefault after the if condition
|
||||||
|
// has been removed.
|
||||||
|
this.set_prefered(_action.id, false/*!toolbarDefault*/);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Count number of actions including their children
|
||||||
|
* @param {object} actions
|
||||||
|
* @return {number} return total number of actions
|
||||||
|
*/
|
||||||
|
private _countActions(actions)
|
||||||
|
{
|
||||||
|
let totalCount = 0;
|
||||||
|
let childCounter = function (action, count)
|
||||||
|
{
|
||||||
|
let children = action.children || 0,
|
||||||
|
returnCounter = count || 0;
|
||||||
|
if (children)
|
||||||
|
{
|
||||||
|
returnCounter -= 1;
|
||||||
|
for (let nChild in children)
|
||||||
|
{
|
||||||
|
returnCounter += 1;
|
||||||
|
returnCounter = childCounter (children[nChild], returnCounter);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
returnCounter = count;
|
||||||
|
}
|
||||||
|
return returnCounter;
|
||||||
|
};
|
||||||
|
for (let nAction in actions)
|
||||||
|
{
|
||||||
|
if (this.options.flat_list)
|
||||||
|
{
|
||||||
|
totalCount += childCounter(actions[nAction] ,1);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
totalCount ++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return totalCount;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Go through actions and build buttons for the toolbar
|
||||||
|
*
|
||||||
|
* @param {Object} actions egw-actions to build menu from
|
||||||
|
* @param {boolean} isDefault setting isDefault with true will
|
||||||
|
* avoid actions get into the preferences, for instandce, first
|
||||||
|
* time toolbar_default actions initialization.
|
||||||
|
*/
|
||||||
|
private _build_menu(actions : object, isDefault? : boolean)
|
||||||
|
{
|
||||||
|
// Clear existing
|
||||||
|
this.div.empty();
|
||||||
|
this.actionbox.empty();
|
||||||
|
this.actionlist.empty();
|
||||||
|
let admin_setting = this.options.is_admin ? '<span class="toolbar-admin-pref" title="'+egw.lang('Admin settings')+' ..."></span>': '';
|
||||||
|
this.actionbox.append('<h class="ui-toolbar-menulistHeader">'+egw.lang('more')+' ...'+admin_setting+'</h>');
|
||||||
|
this.actionbox.append('<div id="' + this.id + '-menulist' +'" class="ui-toolbar-menulist" ></div>');
|
||||||
|
let that = this;
|
||||||
|
if (this.options.is_admin)
|
||||||
|
{
|
||||||
|
this.actionbox.find('.toolbar-admin-pref').click(function(e){
|
||||||
|
e.stopImmediatePropagation();
|
||||||
|
egw.json('EGroupware\\Api\\Etemplate\\Widget\\Toolbar::ajax_get_default_prefs', [egw.app_name(), that.dom_id], function(_prefs){
|
||||||
|
let prefs = [];
|
||||||
|
for (let p in _prefs)
|
||||||
|
{
|
||||||
|
if (_prefs[p] === false) prefs.push(p);
|
||||||
|
}
|
||||||
|
that._admin_settings_dialog.call(that, actions, prefs);
|
||||||
|
}).sendRequest(true);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
let pref = (!egwIsMobile())? egw.preference(this.dom_id, this.egw().getAppName()): undefined;
|
||||||
|
if (pref && !jQuery.isArray(pref)) this.preference = pref;
|
||||||
|
|
||||||
|
//Set the default actions for the first time
|
||||||
|
if (typeof pref === 'undefined' && !isDefault)
|
||||||
|
{
|
||||||
|
for (var name in actions)
|
||||||
|
{
|
||||||
|
if ((typeof actions[name].children === 'undefined' || !this.options.flat_list) && actions[name].id)
|
||||||
|
{
|
||||||
|
this.set_prefered(actions[name].id,!actions[name].toolbarDefault);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if(!isDefault)
|
||||||
|
{
|
||||||
|
for (var name in actions)
|
||||||
|
{
|
||||||
|
// Check if the action is not in the preference, means it's an new added action
|
||||||
|
// therefore it needs to be added to the preference with taking its toolbarDefault
|
||||||
|
// option into account.
|
||||||
|
if ((typeof actions[name].children === 'undefined' || !this.options.flat_list)
|
||||||
|
&& typeof pref[name] === 'undefined')
|
||||||
|
{
|
||||||
|
this._fix_preference(actions[name]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let menuLen = 0;
|
||||||
|
for (let key in this.preference)
|
||||||
|
{
|
||||||
|
if (this.preference[key]) menuLen++;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.countActions = this._countActions(actions) - menuLen;
|
||||||
|
|
||||||
|
let last_group = null;
|
||||||
|
let last_group_id = null;
|
||||||
|
for(let name in actions)
|
||||||
|
{
|
||||||
|
let action = actions[name];
|
||||||
|
if (typeof action == 'string') action = {id: name, caption: action};
|
||||||
|
|
||||||
|
// Add in divider
|
||||||
|
if(last_group_id != action.group)
|
||||||
|
{
|
||||||
|
last_group = jQuery('[data-group="' + action.group + '"]',this.actionlist);
|
||||||
|
if(last_group.length == 0)
|
||||||
|
{
|
||||||
|
jQuery('<span data-group="'+action.group+'">').appendTo(this.actionlist);
|
||||||
|
}
|
||||||
|
last_group_id = action.group;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Make sure there's something to display
|
||||||
|
if(!action.caption && !action.icon && !action.iconUrl) continue;
|
||||||
|
|
||||||
|
if(action.children)
|
||||||
|
{
|
||||||
|
let children = {};
|
||||||
|
let add_children = function(root, children) {
|
||||||
|
for(let id in root.children)
|
||||||
|
{
|
||||||
|
let info = {
|
||||||
|
id: id || root.children[id].id,
|
||||||
|
label: root.children[id].caption
|
||||||
|
};
|
||||||
|
let childaction = {};
|
||||||
|
if(root.children[id].iconUrl)
|
||||||
|
{
|
||||||
|
info['icon'] = root.children[id].iconUrl;
|
||||||
|
}
|
||||||
|
if(root.children[id].children)
|
||||||
|
{
|
||||||
|
add_children(root.children[id], info);
|
||||||
|
}
|
||||||
|
children[id] = info;
|
||||||
|
|
||||||
|
if (that.options.flat_list)
|
||||||
|
{
|
||||||
|
childaction = root.children[id];
|
||||||
|
if (typeof pref === 'undefined' && !isDefault)
|
||||||
|
{
|
||||||
|
if (!childaction['toolbarDefault'])
|
||||||
|
{
|
||||||
|
that.set_prefered(childaction['id'],true);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
that.set_prefered(childaction['id'],false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if(!isDefault)
|
||||||
|
{
|
||||||
|
if (typeof pref[childaction['id']] === 'undefined')
|
||||||
|
{
|
||||||
|
that._fix_preference(childaction);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (typeof root.children[id].group !== 'undefined' &&
|
||||||
|
typeof root.group !== 'undefined')
|
||||||
|
{
|
||||||
|
childaction['group'] = root.group;
|
||||||
|
}
|
||||||
|
that._make_button (childaction);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
add_children(action, children);
|
||||||
|
if (this.options.flat_list && children)
|
||||||
|
{
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
let dropdown = et2_createWidget("dropdown_button", {
|
||||||
|
id: action.id
|
||||||
|
},this);
|
||||||
|
|
||||||
|
dropdown.set_select_options(children);
|
||||||
|
dropdown.set_label (action.caption);
|
||||||
|
//Set default selected action
|
||||||
|
if (typeof action.children !='undefined')
|
||||||
|
{
|
||||||
|
for (let child in action.children)
|
||||||
|
{
|
||||||
|
if(action.children[child].default)
|
||||||
|
{
|
||||||
|
dropdown.set_label(action.children[child].caption);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dropdown.set_image (action.iconUrl||'');
|
||||||
|
dropdown.onchange = jQuery.proxy(function(selected, dropdown)
|
||||||
|
{
|
||||||
|
let action = that._actionManager.getActionById(selected.attr('data-id'));
|
||||||
|
dropdown.set_label(action.caption);
|
||||||
|
if(action)
|
||||||
|
{
|
||||||
|
this.value = action.id;
|
||||||
|
action.execute([]);
|
||||||
|
}
|
||||||
|
//console.debug(selected, this, action);
|
||||||
|
},action);
|
||||||
|
dropdown.onclick = jQuery.proxy(function(selected, dropdown)
|
||||||
|
{
|
||||||
|
let action = that._actionManager.getActionById(this.getValue());
|
||||||
|
if(action)
|
||||||
|
{
|
||||||
|
this.value = action.id;
|
||||||
|
action.execute([]);
|
||||||
|
}
|
||||||
|
//console.debug(selected, this, action);
|
||||||
|
},dropdown);
|
||||||
|
jQuery(dropdown.getDOMNode())
|
||||||
|
.attr('id',this.id + '-' + dropdown.id)
|
||||||
|
.addClass(this.preference[action.id]?'et2_toolbar-dropdown et2_toolbar-dropdown-menulist':'et2_toolbar-dropdown')
|
||||||
|
.appendTo(this.preference[action.id]?this.actionbox.children()[1]:jQuery('[data-group='+action.group+']',this.actionlist));
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
this._make_button(action);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ************** Drag and Drop feature for toolbar *****
|
||||||
|
this.actionlist.find('span[data-group]').sort( function (lg,g){
|
||||||
|
return +lg.getAttribute('data-group') - +g.getAttribute('data-group');
|
||||||
|
}).appendTo(this.actionlist);
|
||||||
|
|
||||||
|
this.actionlist.appendTo(this.div);
|
||||||
|
this.actionbox.appendTo(this.div);
|
||||||
|
|
||||||
|
let toolbar = this.actionlist.find('span[data-group]').children(),
|
||||||
|
toolbox = this.actionbox,
|
||||||
|
menulist = jQuery(this.actionbox.children()[1]);
|
||||||
|
|
||||||
|
toolbar.draggable({
|
||||||
|
cancel:'',
|
||||||
|
zIndex: 1000,
|
||||||
|
delay: 500,
|
||||||
|
//revert:"invalid",
|
||||||
|
containment: "document",
|
||||||
|
cursor: "move",
|
||||||
|
helper: "clone",
|
||||||
|
appendTo:'body',
|
||||||
|
stop: function(event, ui){
|
||||||
|
that._build_menu(actions);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
menulist.children().draggable({
|
||||||
|
cancel:'',
|
||||||
|
containment:"document",
|
||||||
|
helper:"clone",
|
||||||
|
appendTo:'body',
|
||||||
|
zIndex: 1000,
|
||||||
|
cursor:"move",
|
||||||
|
start: function()
|
||||||
|
{
|
||||||
|
jQuery(that.actionlist).addClass('et2_toolbarDropArea');
|
||||||
|
},
|
||||||
|
stop: function()
|
||||||
|
{
|
||||||
|
jQuery(that.actionlist).removeClass('et2_toolbarDropArea');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
toolbox.children().droppable({
|
||||||
|
accept:toolbar,
|
||||||
|
drop:function (event, ui) {
|
||||||
|
that.set_prefered(ui.draggable.attr('id').replace(that.id+'-',''),true);
|
||||||
|
ui.draggable.appendTo(menulist);
|
||||||
|
if (that.actionlist.find(".ui-draggable").length == 0)
|
||||||
|
{
|
||||||
|
that.preference = {};
|
||||||
|
egw.set_preference(that.egw().getAppName(),that.dom_id,that.preference);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tolerance:"touch"
|
||||||
|
});
|
||||||
|
|
||||||
|
this.actionlist.droppable({
|
||||||
|
tolerance:"pointer",
|
||||||
|
drop:function (event,ui) {
|
||||||
|
that.set_prefered(ui.draggable.attr('id').replace(that.id+'-',''),false);
|
||||||
|
ui.draggable.appendTo(that.actionlist);
|
||||||
|
that._build_menu(actions);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
toolbox.accordion({
|
||||||
|
heightStyle:"fill",
|
||||||
|
collapsible: true,
|
||||||
|
active:'none',
|
||||||
|
activate: function (event, ui) {
|
||||||
|
var menubox = event.target;
|
||||||
|
if (ui.oldHeader.length == 0)
|
||||||
|
{
|
||||||
|
jQuery('html').on('click.outsideOfMenu', function (event){
|
||||||
|
jQuery(menubox).accordion( "option", "active", 2);
|
||||||
|
jQuery(this).unbind(event);
|
||||||
|
// Remove the focus class, user clicked elsewhere
|
||||||
|
jQuery(menubox).children().removeClass('ui-state-focus');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
create: function (event, ui) {
|
||||||
|
jQuery('html').unbind('click.outsideOfMenu');
|
||||||
|
},
|
||||||
|
beforeActivate: function ()
|
||||||
|
{
|
||||||
|
if (egwIsMobile())
|
||||||
|
{
|
||||||
|
menulist.height(screen.availHeight - 50);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
menulist.css({height:'inherit'})
|
||||||
|
}
|
||||||
|
// Nothing to show in menulist
|
||||||
|
if (menulist.children().length == 0) return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add/Or remove an action from prefence
|
||||||
|
*
|
||||||
|
* @param {string} _action name of the action which needs to be stored in pereference
|
||||||
|
* @param {boolean} _state if set to true action will be set to actionbox, false will set it to actionlist
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
set_prefered(_action,_state)
|
||||||
|
{
|
||||||
|
this.preference[_action] = _state;
|
||||||
|
if (egwIsMobile()) return;
|
||||||
|
egw.set_preference(this.egw().getAppName(),this.dom_id,this.preference);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Make a button based on the given action
|
||||||
|
*
|
||||||
|
* @param {Object} action action object with attributes icon, caption, ...
|
||||||
|
*/
|
||||||
|
_make_button(action)
|
||||||
|
{
|
||||||
|
let button_options = {
|
||||||
|
};
|
||||||
|
let button = jQuery(document.createElement('button'))
|
||||||
|
.addClass("et2_button et2_button_text et2_button_with_image")
|
||||||
|
.attr('id', this.id+'-'+action.id)
|
||||||
|
.attr('type', 'button')
|
||||||
|
.appendTo(this.preference[action.id]?this.actionbox.children()[1]:jQuery('[data-group='+action.group+']',this.actionlist));
|
||||||
|
|
||||||
|
this.egw().tooltipBind(button, action.hint ? action.hint : action.caption) + (action.shortcut ? ' ('+action.shortcut.caption+')' : '');
|
||||||
|
|
||||||
|
if (action && action.checkbox)
|
||||||
|
{
|
||||||
|
if (action.data.toggle_on || action.data.toggle_off)
|
||||||
|
{
|
||||||
|
let toggle = et2_createWidget('checkbox', {
|
||||||
|
id: this.id+'-'+action.id,
|
||||||
|
toggle_on: action.data.toggle_on,
|
||||||
|
toggle_off: action.data.toggle_off
|
||||||
|
}, this);
|
||||||
|
toggle.doLoadingFinished();
|
||||||
|
toggle.set_value(action.checked);
|
||||||
|
action.data.widget = toggle;
|
||||||
|
toggle =toggle.toggle;
|
||||||
|
toggle.appendTo(button.parent())
|
||||||
|
.attr('id', this.id+'-'+action.id);
|
||||||
|
button.remove();
|
||||||
|
button = toggle;
|
||||||
|
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
if (this.checkbox(action.id)) button.addClass('toolbar_toggled'+ (typeof action.toggledClass != 'undefined'?" "+action.toggledClass:''));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if ( action.iconUrl)
|
||||||
|
{
|
||||||
|
button.attr('style','background-image:url(' + action.iconUrl + ')');
|
||||||
|
}
|
||||||
|
if (action.caption)
|
||||||
|
{
|
||||||
|
if ((this.countActions <= parseInt(this.options.view_range) ||
|
||||||
|
this.preference[action.id] || !action.iconUrl) &&
|
||||||
|
typeof button[0] !== 'undefined' &&
|
||||||
|
!(action.checkbox && action.data && (action.data.toggle_on || action.data.toggle_off))) // no caption for slideswitch checkboxes
|
||||||
|
{
|
||||||
|
button.addClass(action.iconUrl?'et2_toolbar_hasCaption':'et2_toolbar_onlyCaption');
|
||||||
|
button[0].textContent = action.caption;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(action.icon)
|
||||||
|
{
|
||||||
|
button_options['icon'] = action.icon;
|
||||||
|
}
|
||||||
|
if (!jQuery.isEmptyObject(button_options))
|
||||||
|
{
|
||||||
|
button.button(button_options);
|
||||||
|
}
|
||||||
|
let self = this;
|
||||||
|
// Set up the click action
|
||||||
|
let click = function(e)
|
||||||
|
{
|
||||||
|
let action = this._actionManager.getActionById(e.data);
|
||||||
|
if(action)
|
||||||
|
{
|
||||||
|
if (action.checkbox)
|
||||||
|
{
|
||||||
|
self.checkbox(action.id, !action.checked);
|
||||||
|
}
|
||||||
|
this.value = action.id;
|
||||||
|
action.data.event = e;
|
||||||
|
action.execute([]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
button.click(action.id, jQuery.proxy(click, this));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Link the actions to the DOM nodes / widget bits.
|
||||||
|
*
|
||||||
|
* @param {Object} actions egw-actions to build menu from
|
||||||
|
*/
|
||||||
|
_link_actions(actions)
|
||||||
|
{
|
||||||
|
this._build_menu(actions);
|
||||||
|
|
||||||
|
let self = this;
|
||||||
|
let gom = egw_getObjectManager(this.egw().appName,true,1);
|
||||||
|
if(this._objectManager == null)
|
||||||
|
{
|
||||||
|
this._objectManager = gom.addObject(
|
||||||
|
new egwActionObjectManager(this.id, this._actionManager));
|
||||||
|
|
||||||
|
this._objectManager.handleKeyPress = function(_keyCode, _shift, _ctrl, _alt) {
|
||||||
|
for(let i = 0; i < self._actionManager.children.length; i++)
|
||||||
|
{
|
||||||
|
let action = self._actionManager.children[i];
|
||||||
|
if(typeof action.shortcut === 'object' &&
|
||||||
|
action.shortcut &&
|
||||||
|
_keyCode == action.shortcut.keyCode &&
|
||||||
|
_ctrl == action.shortcut.ctrl &&
|
||||||
|
_alt == action.shortcut.alt &&
|
||||||
|
_shift == action.shortcut.shift
|
||||||
|
)
|
||||||
|
{
|
||||||
|
self.value = action.id;
|
||||||
|
action.execute([]);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return egwActionObject.prototype.handleKeyPress.call(this, _keyCode,_shift,_ctrl,_alt);
|
||||||
|
}
|
||||||
|
this._objectManager.parent.updateFocusedChild(this._objectManager, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set/Get the checkbox toolbar action
|
||||||
|
*
|
||||||
|
* @param {string} _action action name of the selected toolbar
|
||||||
|
* @param {boolean} _value value that needs to be set for the action true|false
|
||||||
|
* - if no value means checkbox value returns the current value
|
||||||
|
*
|
||||||
|
* @returns {boolean} returns boolean result of get checkbox value
|
||||||
|
* or returns undefined as Set result or failure
|
||||||
|
*/
|
||||||
|
checkbox(_action, _value?)
|
||||||
|
{
|
||||||
|
if (!_action || typeof this._actionManager == 'undefined') return undefined;
|
||||||
|
let action_event = this._actionManager.getActionById(_action);
|
||||||
|
|
||||||
|
if (action_event && typeof _value !='undefined')
|
||||||
|
{
|
||||||
|
action_event.set_checked(_value);
|
||||||
|
var btn = jQuery('#'+this.id+'-'+_action);
|
||||||
|
if(action_event.data && action_event.data.widget)
|
||||||
|
{
|
||||||
|
action_event.data.widget.set_value(_value);
|
||||||
|
}
|
||||||
|
else if (btn.length > 0)
|
||||||
|
{
|
||||||
|
btn.toggleClass('toolbar_toggled'+ (typeof action_event.data.toggledClass != 'undefined'?" "+action_event.data.toggledClass:''), _value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (action_event)
|
||||||
|
{
|
||||||
|
return action_event.checked;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getDOMNode()
|
||||||
|
{
|
||||||
|
return this.div[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* getValue has to return the value of the input widget
|
||||||
|
*/
|
||||||
|
getValue()
|
||||||
|
{
|
||||||
|
return this.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Is dirty returns true if the value of the widget has changed since it
|
||||||
|
* was loaded.
|
||||||
|
*/
|
||||||
|
isDirty()
|
||||||
|
{
|
||||||
|
return this.value != null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Causes the dirty flag to be reseted.
|
||||||
|
*/
|
||||||
|
resetDirty()
|
||||||
|
{
|
||||||
|
this.value = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Checks the data to see if it is valid, as far as the client side can tell.
|
||||||
|
* Return true if it's not possible to tell on the client side, because the server
|
||||||
|
* will have the chance to validate also.
|
||||||
|
*
|
||||||
|
* The messages array is to be populated with everything wrong with the data,
|
||||||
|
* so don't stop checking after the first problem unless it really makes sense
|
||||||
|
* to ignore other problems.
|
||||||
|
*
|
||||||
|
* @param {String[]} messages List of messages explaining the failure(s).
|
||||||
|
* messages should be fairly short, and already translated.
|
||||||
|
*
|
||||||
|
* @return {boolean} True if the value is valid (enough), false to fail
|
||||||
|
*/
|
||||||
|
isValid(messages)
|
||||||
|
{
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Attach the container node of the widget to DOM-Tree
|
||||||
|
* @returns {Boolean}
|
||||||
|
*/
|
||||||
|
doLoadingFinished()
|
||||||
|
{
|
||||||
|
super.doLoadingFinished();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Builds dialog for possible admin settings (e.g. default actions pref)
|
||||||
|
*
|
||||||
|
* @param {type} _actions
|
||||||
|
* @param {object} _default_prefs
|
||||||
|
*/
|
||||||
|
private _admin_settings_dialog(_actions, _default_prefs)
|
||||||
|
{
|
||||||
|
let buttons = [
|
||||||
|
{text: egw.lang("Save"), id:"save"},
|
||||||
|
{text: egw.lang("Close"), id:"close"}
|
||||||
|
];
|
||||||
|
let self = this;
|
||||||
|
let sel_options = {actions:[]};
|
||||||
|
let content = {actions:[], reset:false};
|
||||||
|
for (let key in _actions)
|
||||||
|
{
|
||||||
|
if (_actions[key]['children'] && this.options.flat_list)
|
||||||
|
{
|
||||||
|
for (let child in _actions[key]['children'])
|
||||||
|
{
|
||||||
|
sel_options.actions.push({
|
||||||
|
id:child,
|
||||||
|
value: child,
|
||||||
|
label: _actions[key]['children'][child]['caption'],
|
||||||
|
app: egw.app_name(),
|
||||||
|
icon: _actions[key]['children'][child]['iconUrl']
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
sel_options.actions.push({
|
||||||
|
id:key,
|
||||||
|
value: key,
|
||||||
|
label: _actions[key]['caption'],
|
||||||
|
app: egw.app_name(),
|
||||||
|
icon: _actions[key]['iconUrl']
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if ((!_default_prefs || _default_prefs.length == 0) && _actions[key]['toolbarDefault']) content.actions.push(key);
|
||||||
|
}
|
||||||
|
if (_default_prefs && _default_prefs.length > 0) content.actions = _default_prefs;
|
||||||
|
et2_createWidget("dialog",
|
||||||
|
{
|
||||||
|
callback: function(_button_id, _value)
|
||||||
|
{
|
||||||
|
if (_button_id == 'save' && _value)
|
||||||
|
{
|
||||||
|
if (_value.actions)
|
||||||
|
{
|
||||||
|
let pref = jQuery.extend({}, self.preference);
|
||||||
|
for (let i in pref)
|
||||||
|
{
|
||||||
|
pref[i] = true;
|
||||||
|
if (_value.actions.includes(i)) pref[i] = false;
|
||||||
|
}
|
||||||
|
_value.actions = pref;
|
||||||
|
}
|
||||||
|
egw.json('EGroupware\\Api\\Etemplate\\Widget\\Toolbar::ajax_setAdminSettings',
|
||||||
|
[_value, self.dom_id, egw.app_name()],function(_result){
|
||||||
|
egw.message(_result);
|
||||||
|
}).sendRequest(true);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
title: egw.lang('admin settings for %1', this.dom_id),
|
||||||
|
buttons: buttons,
|
||||||
|
minWidth: 600,
|
||||||
|
minHeight: 300,
|
||||||
|
value:{content: content, sel_options: sel_options},
|
||||||
|
template: egw.webserverUrl+'/api/templates/default/toolbarAdminSettings.xet?1',
|
||||||
|
resizable: false
|
||||||
|
}, et2_dialog._create_parent('api'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
et2_register_widget(et2_toolbar, ["toolbar"]);
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user