holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tmp commit for test_action.html

Browse Source
This commit is contained in:
Milan 2023-03-09 14:12:57 +01:00
parent a5f61e8ef8
commit 009a1a4979
3 changed files with 384 additions and 367 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/js/egw_action/egw_action_popup.js
View File

@ -18,7 +18,7 @@ import {egwAction, egwActionImplementation, egwActionObject} from './egw_action.
import {egwFnct} from './egw_action_common.js';
import {egwMenu, _egw_active_menu} from "./egw_menu.js";
import {EGW_KEY_ENTER, EGW_KEY_MENU} from "./egw_action_constants.js";
import {tapAndSwipe} from "../tapandswipe";
import {tapAndSwipe} from "../tapandswipe.js";
if (typeof window._egwActionClasses == "undefined")
window._egwActionClasses = {};

137
api/js/egw_action/test/test_action.html
View File

@ -1,31 +1,26 @@
<html>
<head>
<head>
<title>Test page for the egw action stuff</title>
<!-- Basic action stuff -->
<script src="../egw_action.js"></script>
<script src="../egw_action_common.js"></script>
<script type="module" src="/egroupware/api/js/jsapi/egw.min.js?1678345504"
id="egw_script_id"
data-app-header="EGroupware" data-url="https://pole.egroupware.org/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! -->
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<!-- Popup stuff -->
<link rel="stylesheet" type="text/css" href="skins/dhtmlxmenu_egw.css">
<script src="js/dhtmlxcommon.js"></script>
<script src="js/dhtmlxmenu.js"></script>
<script src="js/dhtmlxmenu_ext.js"></script>
<script src="../egw_action_popup.js"></script>
<script src="../egw_action_dragdrop.js"></script>
<script src="../egw_menu.js"></script>
<script src="../egw_menu_dhtmlx.js"></script>
<style>
body, table {
font-family: Arial, sans-serif;
font-size: 10pt;
}
.listbox {
width: 250px;
border: 2px groove gray;
@ -74,41 +69,66 @@
text-shadow: white 0px 0px 5px;
}
</style>
</head>
<body>
<table class="listbox" id="lb1">
<tr id="folder1"><td><img src="imgs/folder.png"/></td><td style="width: 200px">Folder 1</td><td><input type="checkbox"></td></tr>
<tr id="file1"><td><img src="imgs/page.png"/></td><td style="width: 200px">File 1</td><td><input type="checkbox"></td></tr>
<tr id="file2"><td><img src="imgs/page.png"/></td><td style="width: 200px">File 2</td><td><input type="checkbox"></td></tr>
<tr id="file3"><td><img src="imgs/page.png"/></td><td style="width: 200px">File 3</td><td><input type="checkbox"></td></tr>
<tr id="file4"><td><img src="imgs/page.png"/></td><td style="width: 200px">File 4</td><td><input type="checkbox"></td></tr>
<tr id="file5"><td><img src="imgs/page.png"/></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>
</head>
<body>
<table class="listbox" id="lb1">
<tr id="folder1">
<td><img src="imgs/folder.png"/></td>
<td style="width: 200px">Folder 1</td>
<td><input type="checkbox"></td>
</tr>
<tr id="file1">
<td><img src="imgs/page.png"/></td>
<td style="width: 200px">File 1</td>
<td><input type="checkbox"></td>
</tr>
<tr id="file2">
<td><img src="imgs/page.png"/></td>
<td style="width: 200px">File 2</td>
<td><input type="checkbox"></td>
</tr>
<tr id="file3">
<td><img src="imgs/page.png"/></td>
<td style="width: 200px">File 3</td>
<td><input type="checkbox"></td>
</tr>
<tr id="file4">
<td><img src="imgs/page.png"/></td>
<td style="width: 200px">File 4</td>
<td><input type="checkbox"></td>
</tr>
<tr id="file5">
<td><img src="imgs/page.png"/></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 "../../etemplate/etemplate2.min.js";
var actionManager = null;
var objectManager = null;
$j(document).ready(function() {
jQuery(document).ready(function () {
init();
});
// An action object interface for the listbox - "inherits" from
// egwActionObjectInterface
function listboxItemAOI(_node)
{
function listboxItemAOI(_node) {
var aoi = new egwActionObjectInterface();
aoi.node = _node;
aoi.checkBox = ($j(":checkbox", aoi.node))[0];
aoi.checkBox = (jQuery(":checkbox", aoi.node))[0];
aoi.checkBox.checked = false;
aoi.doGetDOMNode = function() {
aoi.doGetDOMNode = function () {
return aoi.node;
}
function getShiftState(e)
{
function getShiftState(e) {
var state = EGW_AO_SHIFT_STATE_NONE;
state = egwSetBit(state, EGW_AO_SHIFT_STATE_MULTI, e.ctrkKey || e.metaKey);
state = egwSetBit(state, EGW_AO_SHIFT_STATE_BLOCK, e.shiftKey);
@ -116,9 +136,8 @@
}
// Now append some action code to the node
$j(_node).click(function(e) {
if (e.target != aoi.checkBox)
{
jQuery(_node).click(function (e) {
if (e.target != aoi.checkBox) {
var selected = egwBitIsSet(aoi.getState(), EGW_AO_STATE_SELECTED);
var state = getShiftState(e);
@ -133,35 +152,32 @@
}
});
$j(aoi.checkBox).change(function() {
jQuery(aoi.checkBox).change(function () {
aoi.updateState(EGW_AO_STATE_SELECTED, this.checked, EGW_AO_SHIFT_STATE_MULTI);
});
aoi.doTriggerEvent = function(_event) {
if (_event == EGW_AI_DRAG_OVER)
{
$j(this.node).addClass("draggedOver");
aoi.doTriggerEvent = function (_event) {
if (_event == EGW_AI_DRAG_OVER) {
jQuery(this.node).addClass("draggedOver");
}
if (_event == EGW_AI_DRAG_OUT)
{
$j(this.node).removeClass("draggedOver");
if (_event == EGW_AI_DRAG_OUT) {
jQuery(this.node).removeClass("draggedOver");
}
}
aoi.doSetState = function(_state) {
aoi.doSetState = function (_state) {
var selected = egwBitIsSet(_state, EGW_AO_STATE_SELECTED);
this.checkBox.checked = selected;
$j(this.node).toggleClass('focused',
jQuery(this.node).toggleClass('focused',
egwBitIsSet(_state, EGW_AO_STATE_FOCUSED));
$j(this.node).toggleClass('selected',
jQuery(this.node).toggleClass('selected',
selected);
}
return aoi;
}
function alertClicked(_action, _senders, _target)
{
function alertClicked(_action, _senders, _target) {
var ids = "";
for (var i = 0; i < _senders.length; i++)
ids += _senders[i].id + ((i < _senders.length - 1) ? ", " : "");
@ -170,19 +186,16 @@
+ ids + "', target '" + (_target ? _target.id : "null") + "'");
}
function returnDDHelper(_action, _senders)
{
function returnDDHelper(_action, _senders) {
var text = [];
for (var i = 0; i < _senders.length; i++)
{
for (var i = 0; i < _senders.length; i++) {
text.push(_senders[i].id);
}
return $j("<div class=\"ddhelper\">" + _senders.length + " (" + text.join(", ") + ") Elements selected </div>")
return jQuery("<div class=\"ddhelper\">" + _senders.length + " (" + text.join(", ") + ") Elements selected </div>")
}
function init()
{
function init() {
//Initialize the action manager and add some actions to it
actionManager = new egwActionManager();
objectManager = new egwActionObjectManager("", actionManager);
@ -349,7 +362,7 @@
"checkbox": true,
"checked": false,
"caption": "Test2",
"onExecute": function(_action) {
"onExecute": function (_action) {
_action.checked = true;
}
}
@ -380,29 +393,29 @@
"folder_drop", "folder_drop2"
];
$j('#lb1 tr:odd').addClass('odd');
jQuery('#lb1 tr:odd').addClass('odd');
//Create an object representation for each listbox-row and append
//each to its own listboxItemAOI
$j('#lb1 tr').each(function(index, elem) {
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")
if (elem.id.substr(0, 4) == "file")
obj.updateActionLinks(listboxFileLinks);
else
obj.updateActionLinks(listboxFolderLinks);
});
$j("#selectAll").click(function() {
jQuery("#selectAll").click(function () {
objectManager.toggleAllSelected();
});
$j("#performAction").click(function(e) {
jQuery("#performAction").click(function (e) {
if (!objectManager.executeActionImplementation(this, "popup"))
alert("Please select one or more objects.");
return false;
});
}
</script>
</body>
</script>
</body>
</html>

4
api/js/egw_action/tsconfig.json
View File

@ -11,5 +11,9 @@
},
"include": [
"./ts/**/*"
],
"exclude": [
"node_modules",
"../**/*"
]
}