mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-13 10:11:22 +01:00
f430b66d3b
classes are now uppercase and in their own files. lowercase classes are deprecated.
Interfaces are now actual interfaces that should be implemented instead of creating and returning an ai Object every time
(cherry picked from commit 5e3c67a5cf)
436 lines
15 KiB
HTML
Executable File
436 lines
15 KiB
HTML
Executable File
<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>
|