<html lang="en">
<head>
<title>Test page for the egw action stuff</title>
<!-- Basic action stuff -->
<script type="module" src="/egroupware/api/js/jsapi/egw.min.js?1678345504"
id="egw_script_id"
data-app-header="EGroupware" data-url="http://localhost:8080/egroupware"
data-include="["api\/js\/dhtmlxtree\/codebase\/dhtmlxcommon.js","api\/js\/dhtmlxMenu\/sources\/dhtmlxmenu.js","api\/js\/dhtmlxMenu\/sources\/ext\/dhtmlxmenu_ext.js","api\/js\/dhtmlxtree\/sources\/dhtmlxtree.js","api\/js\/dhtmlxtree\/sources\/ext\/dhtmlxtree_json.js"]"></script>
<!-- JQuery is just used in this example. The egw_action scripts do not
need JQuery! -->
<!-- Popup stuff -->
<link rel="stylesheet" type="text/css" href="skins/dhtmlxmenu_egw.css">
<style>
body, table {
font-family: Arial, sans-serif;
font-size: 10pt;
}
.listBox {
width: 250px;
border: 2px groove gray;
margin: 5px;
border-collapse: collapse;
}
.listBox tr {
-moz-user-select: none;
user-select: none;
cursor: default;
padding: 2px;
}
.listBox tr.odd {
background-color: #eeeeee;
}
.listBox tr.selected {
background-color: #2b5d9b;
color: white;
}
.listBox tr.odd.selected {
background-color: #234b7d !important;
}
.listBox .focused {
border: 1px dotted black;
padding: 1px;
}
.listBox tr.draggedOver {
color: red !important;
}
.egw_action_ddHelper {
padding: 5px 5px 5px 26px;
background-image: url(imgs/page.png);
background-position: 5px 5px;
background-repeat: no-repeat;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: white 0 0 5px;
}
</style>
</head>
<body>
<table class="listBox" id="lb1">
<tr id="folder1">
<td><img src="imgs/folder.png" alt="folder png"/></td>
<td style="width: 200px">Folder 1</td>
<td><label>
<input type="checkbox">
</label></td>
</tr>
<tr id="file1">
<td><img src="imgs/page.png" alt="page png"/></td>
<td style="width: 200px">File 1</td>
<td><label>
<input type="checkbox">
</label></td>
</tr>
<tr id="file2">
<td><img src="imgs/page.png" alt="page png"/></td>
<td style="width: 200px">File 2</td>
<td><label>
<input type="checkbox">
</label></td>
</tr>
<tr id="file3">
<td><img src="imgs/page.png" alt="page"/></td>
<td style="width: 200px">File 3</td>
<td><input type="checkbox"></td>
</tr>
<tr id="file4">
<td><img src="imgs/page.png" alt="page"/></td>
<td style="width: 200px">File 4</td>
<td><input type="checkbox"></td>
</tr>
<tr id="file5">
<td><img src="imgs/page.png" alt="page"/></td>
<td style="width: 200px">File 5</td>
<td><input type="checkbox"></td>
</tr>
</table>
<button id="performAction">Perform action...</button>
<button id="selectAll">Select All</button>
<script type="module">
import {EgwActionManager, EgwActionObjectManager} from "../egw_action.min.js";
import {
EGW_AO_STATE_SELECTED,
EGW_AO_STATE_FOCUSED,
EGW_AO_SHIFT_STATE_MULTI,
EGW_AO_SHIFT_STATE_NONE,
EGW_AO_SHIFT_STATE_BLOCK,
} from '../egw_action_constants';
import {egwBitIsSet, egwSetBit} from '../egw_action_common';
import {EgwActionObjectBase} from "../../egw_action/egw_action.min.js";
var actionManager = null;
var objectManager = null;
jQuery(document).ready(function () {
init();
});
// An action object interface for the listbox - "inherits" from
// egwActionObjectInterface
function listboxItemAOI(_node) {
var aoi = new EgwActionObjectBase();
aoi.node = _node;
aoi.checkBox = aoi.node.querySelector('[type="checkbox"]')//(jQuery(":checkbox", aoi.node))[0];
aoi.checkBox.checked = false;
aoi.doGetDOMNode = function () {
return aoi.node;
}
function getShiftState(e) {
var state = EGW_AO_SHIFT_STATE_NONE;
state = egwSetBit(state, EGW_AO_SHIFT_STATE_MULTI, e.ctrlKey || e.metaKey);
state = egwSetBit(state, EGW_AO_SHIFT_STATE_BLOCK, e.shiftKey);
return state;
}
// Now append some action code to the node
jQuery(_node).click(function (e) {
if (e.target != aoi.checkBox) {
var selected = egwBitIsSet(aoi.getState(), EGW_AO_STATE_SELECTED);
var state = getShiftState(e);
// "Normal" Listbox behaviour
aoi.updateState(EGW_AO_STATE_SELECTED,
!egwBitIsSet(state, EGW_AO_SHIFT_STATE_MULTI) || !selected,
state);
// "PHPMyAdmin" Listbox behaviour
// aoi.doSetState(egwSetBit(aoi.getState(), EGW_AO_STATE_SELECTED,
// !selected), false, EGW_AO_SHIFT_STATE_MULTI);
}
});
aoi.checkBox.addEventListener("change",(event)=> {
aoi.updateState(EGW_AO_STATE_SELECTED, event.target.checked, EGW_AO_SHIFT_STATE_MULTI);
},);
aoi.doTriggerEvent = function (_event) {
if (_event == EGW_AI_DRAG_OVER) {
jQuery(this.node).addClass("draggedOver");
}
if (_event == EGW_AI_DRAG_OUT) {
jQuery(this.node).removeClass("draggedOver");
}
}
aoi.doSetState = function (_state) {
var selected = egwBitIsSet(_state, EGW_AO_STATE_SELECTED);
this.checkBox.checked = selected;
jQuery(this.node).toggleClass('focused',
egwBitIsSet(_state, EGW_AO_STATE_FOCUSED));
jQuery(this.node).toggleClass('selected',
selected);
}
return aoi;
}
function alertClicked(_action, _senders, _target) {
var ids = "";
for (var i = 0; i < _senders.length; i++)
ids += _senders[i].id + ((i < _senders.length - 1) ? ", " : "");
alert("Action '" + _action.caption + "' executed on elements '"
+ ids + "', target '" + (_target ? _target.id : "null") + "'");
}
function returnDDHelper(_action, _senders) {
var text = [];
for (var i = 0; i < _senders.length; i++) {
text.push(_senders[i].id);
}
return jQuery("<div class=\"ddhelper\">" + _senders.length + " (" + text.join(", ") + ") Elements selected </div>")
}
function init() {
//Initialize the action manager and add some actions to it
actionManager = new EgwActionManager();
objectManager = new EgwActionObjectManager("", actionManager);
actionManager.updateActions(
[
{
"id": "folder_open",
"iconUrl": "imgs/folder.png",
"caption": "Open folder",
"onExecute": alertClicked,
"allowOnMultiple": false,
"type": "popup",
"default": true
},
{
"id": "file_view",
"iconUrl": "imgs/view.png",
"caption": "View",
"onExecute": alertClicked,
"allowOnMultiple": false,
"type": "popup",
"default": true
},
{
"id": "file_preview",
"iconUrl": "imgs/preview.png",
"caption": "Preview",
"onExecute": alertClicked,
"allowOnMultiple": false,
"type": "popup"
},
{
"id": "file_delete",
"iconUrl": "imgs/delete.png",
"caption": "Delete",
"onExecute": alertClicked,
"type": "popup",
"group": 2
},
{
"id": "file_edit",
"iconUrl": "imgs/edit.png",
"caption": "Edit file",
"onExecute": alertClicked,
"allowOnMultiple": false,
"type": "popup"
},
{
"id": "file_compress",
"iconUrl": "imgs/compress.png",
"caption": "Create ZIP archive",
"onExecute": alertClicked,
"type": "popup",
"group": 1,
"order": 1
},
{
"id": "file_email",
"iconUrl": "imgs/email.png",
"caption": "E-Mail",
"onExecute": alertClicked,
"allowOnMultiple": false,
"type": "popup",
"group": 1,
"order": 0
},
{
"id": "file_compress_email",
"caption": "Create ZIP and E-Mail",
"onExecute": alertClicked,
"type": "popup",
"group": 1,
"order": 2,
"allowOnMultiple": "only",
"hint": "Compresses multiple files and mails them"
},
{
"id": "send_to",
"caption": "Send to",
"type": "popup",
"group": 10,
"children":
[
{
"id": "send_to_1",
"caption": "Folder 1",
"onExecute": alertClicked,
"type": "popup"
},
{
"id": "send_to_2",
"caption": "Folder 2",
"onExecute": alertClicked,
"type": "popup"
},
{
"id": "send_to_3",
"caption": "Folder 3",
"onExecute": alertClicked,
"type": "popup"
},
{
"id": "send_to_add",
"caption": "Add target",
"onExecute": alertClicked,
"type": "popup",
"group": -1
}
]
},
{
"id": "file_drag",
"type": "drag",
"dragType": "file"
},
{
"id": "folder_drop",
"type": "drop",
"caption": "Move files here",
"iconUrl": "imgs/move.png",
"acceptedTypes": "file",
"onExecute": alertClicked,
"children":
[
{
"id": "sub1",
"type": "popup",
"caption": "Use insecure but super fast move algorithm"
},
{
"id": "sub2",
"type": "popup",
"caption": "Use standard move algorithm",
"default": true
},
{
"id": "sub3",
"type": "popup",
"caption": "Only simulate moving"
}
],
"default": true
},
{
"id": "folder_drop2",
"type": "drop",
"caption": "Copy files here",
"iconUrl": "imgs/copy.png",
"onExecute": alertClicked,
"acceptedTypes": "file"
},
{
"id": "chk1",
"type": "popup",
"checkbox": true,
"checked": true,
"caption": "Test1"
},
{
"id": "chk2",
"type": "popup",
"checkbox": true,
"checked": false,
"caption": "Test2",
"onExecute": function (_action) {
_action.checked = true;
}
}
]
);
//Links which will be assigned to each listbox item
var listboxFileLinks = [
{"actionId": "file_view", "enabled": true},
{"actionId": "file_preview", "enabled": true},
{"actionId": "file_edit", "enabled": true},
{"actionId": "file_email", "enabled": true},
{"actionId": "file_compress_email", "enabled": true},
{"actionId": "file_compress", "enabled": true},
{"actionId": "file_delete", "enabled": true},
{"actionId": "send_to", "enabled": true},
"file_drag",
"chk1",
"chk2"
];
var listboxFolderLinks = [
{"actionId": "folder_open", "enabled": true},
{"actionId": "file_compress_email", "enabled": true},
{"actionId": "file_compress", "enabled": true},
{"actionId": "file_delete", "enabled": true},
"send_to",
"folder_drop", "folder_drop2"
];
jQuery('#lb1 tr:odd').addClass('odd');
//Create an object representation for each listbox-row and append
//each to its own listboxItemAOI
jQuery('#lb1 tr').each(function (index, elem) {
var obj = objectManager.addObject(elem.id, new listboxItemAOI(elem));
//Apply the links to the actions
if (elem.id.substr(0, 4) == "file")
obj.updateActionLinks(listboxFileLinks);
else
obj.updateActionLinks(listboxFolderLinks);
});
jQuery("#selectAll").click(function () {
objectManager.toggleAllSelected();
});
jQuery("#performAction").click(function (e) {
if (!objectManager.executeActionImplementation(this, "popup"))
alert("Please select one or more objects.");
return false;
});
}
</script>
</body>
</html>