extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-28 19:03:14 +01:00
Code Issues Packages Projects Releases Wiki Activity
master
egroupware_official/api/js/egw_action/test/test_action.html

436 lines
15 KiB
HTML
Raw Permalink Normal View History

converted egw_action from javascript to typescript 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
2023-07-10 16:02:30 +02:00
<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="[&quot;api\/js\/dhtmlxtree\/codebase\/dhtmlxcommon.js&quot;,&quot;api\/js\/dhtmlxMenu\/sources\/dhtmlxmenu.js&quot;,&quot;api\/js\/dhtmlxMenu\/sources\/ext\/dhtmlxmenu_ext.js&quot;,&quot;api\/js\/dhtmlxtree\/sources\/dhtmlxtree.js&quot;,&quot;api\/js\/dhtmlxtree\/sources\/ext\/dhtmlxtree_json.js&quot;]"></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);
Implemented egw_popup_action, tested, got it working with IE
2011-02-26 19:04:28 +01:00
First test with egwActionObjectInterface for a listbox-like representation of egwActionObjects (test_action.html), fixed bugs in egw_action.js which occured during testing.
2011-02-24 22:39:05 +01:00
// "Normal" Listbox behaviour
converted egw_action from javascript to typescript 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
2023-07-10 16:02:30 +02:00
aoi.updateState(EGW_AO_STATE_SELECTED,
!egwBitIsSet(state, EGW_AO_SHIFT_STATE_MULTI) || !selected,
state);
First test with egwActionObjectInterface for a listbox-like representation of egwActionObjects (test_action.html), fixed bugs in egw_action.js which occured during testing.
2011-02-24 22:39:05 +01:00
// "PHPMyAdmin" Listbox behaviour
Implemented egw_popup_action, tested, got it working with IE
2011-02-26 19:04:28 +01:00
// aoi.doSetState(egwSetBit(aoi.getState(), EGW_AO_STATE_SELECTED,
// !selected), false, EGW_AO_SHIFT_STATE_MULTI);
converted egw_action from javascript to typescript 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
2023-07-10 16:02:30 +02:00
}
});
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>
Finished implementation of the abstract egwAction interface - now going to test it
2011-02-24 20:00:47 +01:00
</html>
Reference in New Issue Copy Permalink