2011-02-24 20:00:47 +01:00
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>Test page for the egw action stuff</title>
|
2011-02-26 19:04:28 +01:00
|
|
|
|
|
|
|
<!-- Basic action stuff -->
|
2011-02-24 20:00:47 +01:00
|
|
|
<script src="../egw_action.js"></script>
|
|
|
|
<script src="../egw_action_common.js"></script>
|
2011-02-26 21:40:27 +01:00
|
|
|
|
|
|
|
<!-- JQuery is just used in this example. The egw_action scripts do not
|
|
|
|
need JQuery! -->
|
2011-02-24 20:00:47 +01:00
|
|
|
<script src="js/jquery.js"></script>
|
2011-03-24 18:06:44 +01:00
|
|
|
<script src="js/jquery-ui.js"></script>
|
2011-02-26 19:04:28 +01:00
|
|
|
|
|
|
|
<!-- 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>
|
2011-03-24 18:06:44 +01:00
|
|
|
<script src="../egw_action_dragdrop.js"></script>
|
2011-02-26 19:04:28 +01:00
|
|
|
<script src="../egw_menu.js"></script>
|
|
|
|
<script src="../egw_menu_dhtmlx.js"></script>
|
|
|
|
|
2011-02-24 20:00:47 +01:00
|
|
|
<style>
|
|
|
|
body, table {
|
|
|
|
font-family: Arial, sans-serif;
|
|
|
|
font-size: 10pt;
|
|
|
|
}
|
|
|
|
.listbox {
|
|
|
|
width: 250px;
|
2011-02-26 19:04:28 +01:00
|
|
|
border: 2px groove gray;
|
2011-02-24 20:00:47 +01:00
|
|
|
margin: 5px;
|
|
|
|
border-collapse: collapse;
|
|
|
|
}
|
|
|
|
|
|
|
|
.listbox tr {
|
|
|
|
-moz-user-select: none;
|
|
|
|
-khtml-user-select: none;
|
|
|
|
user-select: none;
|
|
|
|
cursor: default;
|
|
|
|
padding: 2px;
|
|
|
|
}
|
|
|
|
|
2011-02-26 19:04:28 +01:00
|
|
|
.listbox tr.odd {
|
|
|
|
background-color: #eeeeee;
|
|
|
|
}
|
|
|
|
|
|
|
|
.listbox tr.selected {
|
2011-02-24 20:00:47 +01:00
|
|
|
background-color: #2b5d9b;
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
|
2011-02-26 19:04:28 +01:00
|
|
|
.listbox tr.odd.selected {
|
|
|
|
background-color: #234b7d !important;
|
|
|
|
}
|
|
|
|
|
2011-02-24 20:00:47 +01:00
|
|
|
.listbox .focused {
|
2011-02-26 19:04:28 +01:00
|
|
|
border: 1px dotted black;
|
|
|
|
padding: 1px;
|
2011-02-24 20:00:47 +01:00
|
|
|
}
|
2011-03-24 18:06:44 +01:00
|
|
|
|
|
|
|
.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 0px 0px 5px;
|
|
|
|
}
|
2011-02-24 20:00:47 +01:00
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
2011-02-26 19:04:28 +01:00
|
|
|
<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>
|
2011-02-26 21:40:27 +01:00
|
|
|
<button id="performAction">Perform action...</button><button id="selectAll">Select All</button>
|
2011-02-24 20:00:47 +01:00
|
|
|
<script>
|
|
|
|
var actionManager = null;
|
2011-02-24 22:39:05 +01:00
|
|
|
var objectManager = null;
|
2011-02-24 20:00:47 +01:00
|
|
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
init();
|
|
|
|
});
|
|
|
|
|
2011-02-24 22:39:05 +01:00
|
|
|
// An action object interface for the listbox - "inherits" from
|
|
|
|
// egwActionObjectInterface
|
|
|
|
function listboxItemAOI(_node)
|
|
|
|
{
|
|
|
|
var aoi = new egwActionObjectInterface();
|
|
|
|
|
|
|
|
aoi.node = _node;
|
|
|
|
aoi.checkBox = ($(":checkbox", aoi.node))[0];
|
2011-02-26 19:04:28 +01:00
|
|
|
aoi.checkBox.checked = false;
|
2011-02-24 22:39:05 +01:00
|
|
|
|
|
|
|
aoi.doGetDOMNode = function() {
|
2011-02-26 19:04:28 +01:00
|
|
|
return aoi.node;
|
2011-02-24 22:39:05 +01:00
|
|
|
}
|
|
|
|
|
2011-02-26 19:04:28 +01:00
|
|
|
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);
|
|
|
|
return state;
|
2011-02-24 22:39:05 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
// Now append some action code to the node
|
|
|
|
$(_node).click(function(e) {
|
|
|
|
if (e.target != aoi.checkBox)
|
|
|
|
{
|
2011-02-26 19:04:28 +01:00
|
|
|
var selected = egwBitIsSet(aoi.getState(), EGW_AO_STATE_SELECTED);
|
|
|
|
var state = getShiftState(e);
|
|
|
|
|
2011-02-24 22:39:05 +01:00
|
|
|
// "Normal" Listbox behaviour
|
2011-03-02 22:18:20 +01:00
|
|
|
aoi.updateState(EGW_AO_STATE_SELECTED,
|
|
|
|
!egwBitIsSet(state, EGW_AO_SHIFT_STATE_MULTI) || !selected,
|
|
|
|
state);
|
2011-02-24 22:39:05 +01:00
|
|
|
|
|
|
|
// "PHPMyAdmin" Listbox behaviour
|
2011-02-26 19:04:28 +01:00
|
|
|
// aoi.doSetState(egwSetBit(aoi.getState(), EGW_AO_STATE_SELECTED,
|
|
|
|
// !selected), false, EGW_AO_SHIFT_STATE_MULTI);
|
2011-02-24 22:39:05 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
$(aoi.checkBox).change(function() {
|
2011-03-02 22:18:20 +01:00
|
|
|
aoi.updateState(EGW_AO_STATE_SELECTED, this.checked, EGW_AO_SHIFT_STATE_MULTI);
|
2011-02-24 22:39:05 +01:00
|
|
|
});
|
|
|
|
|
2011-03-24 18:06:44 +01:00
|
|
|
aoi.doTriggerEvent = function(_event) {
|
|
|
|
if (_event == EGW_AI_DRAG_OVER)
|
|
|
|
{
|
|
|
|
$(this.node).addClass("draggedOver");
|
|
|
|
}
|
|
|
|
if (_event == EGW_AI_DRAG_OUT)
|
|
|
|
{
|
|
|
|
$(this.node).removeClass("draggedOver");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2011-03-02 22:18:20 +01:00
|
|
|
aoi.doSetState = function(_state) {
|
2011-02-26 19:04:28 +01:00
|
|
|
var selected = egwBitIsSet(_state, EGW_AO_STATE_SELECTED);
|
|
|
|
this.checkBox.checked = selected;
|
|
|
|
$(this.node).toggleClass('focused',
|
|
|
|
egwBitIsSet(_state, EGW_AO_STATE_FOCUSED));
|
|
|
|
$(this.node).toggleClass('selected',
|
|
|
|
selected);
|
|
|
|
}
|
2011-02-24 22:39:05 +01:00
|
|
|
|
|
|
|
return aoi;
|
|
|
|
}
|
|
|
|
|
2011-03-24 18:06:44 +01:00
|
|
|
function alertClicked(_action, _senders, _target)
|
2011-02-26 19:04:28 +01:00
|
|
|
{
|
|
|
|
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 '"
|
2011-03-24 18:06:44 +01:00
|
|
|
+ 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 $("<div class=\"ddhelper\">" + _senders.length + " (" + text.join(", ") + ") Elements selected </div>")
|
2011-02-26 19:04:28 +01:00
|
|
|
}
|
2011-02-24 20:00:47 +01:00
|
|
|
|
|
|
|
function init()
|
|
|
|
{
|
|
|
|
//Initialize the action manager and add some actions to it
|
|
|
|
actionManager = new egwActionManager();
|
2011-02-24 22:39:05 +01:00
|
|
|
objectManager = new egwActionObjectManager("", actionManager);
|
2011-02-24 20:00:47 +01:00
|
|
|
|
|
|
|
actionManager.updateActions(
|
|
|
|
[
|
2011-02-26 19:04:28 +01:00
|
|
|
{
|
|
|
|
"id": "folder_open",
|
|
|
|
"iconUrl": "imgs/folder.png",
|
|
|
|
"caption": "Open folder",
|
|
|
|
"onExecute": alertClicked,
|
2011-02-26 20:21:55 +01:00
|
|
|
"allowOnMultiple": false,
|
2011-02-26 19:04:28 +01:00
|
|
|
"type": "popup",
|
|
|
|
"default": true
|
|
|
|
},
|
2011-02-24 20:00:47 +01:00
|
|
|
{
|
|
|
|
"id": "file_view",
|
2011-02-26 19:04:28 +01:00
|
|
|
"iconUrl": "imgs/view.png",
|
|
|
|
"caption": "View",
|
|
|
|
"onExecute": alertClicked,
|
2011-02-24 20:00:47 +01:00
|
|
|
"allowOnMultiple": false,
|
2011-02-26 19:04:28 +01:00
|
|
|
"type": "popup",
|
|
|
|
"default": true
|
|
|
|
},
|
|
|
|
{
|
|
|
|
"id": "file_preview",
|
|
|
|
"iconUrl": "imgs/preview.png",
|
|
|
|
"caption": "Preview",
|
|
|
|
"onExecute": alertClicked,
|
|
|
|
"allowOnMultiple": false,
|
2011-03-24 18:06:44 +01:00
|
|
|
"type": "popup"
|
2011-02-24 20:00:47 +01:00
|
|
|
},
|
|
|
|
{
|
|
|
|
"id": "file_delete",
|
2011-02-26 19:04:28 +01:00
|
|
|
"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,
|
Fixed problems with executeActionImplementation when called from a container object, fixed problem with popup menu which did not open in some cases, added the ability to use the 'enabled' property of an action as an callback function (actionObject is passed as parameter), introduced egwFnct-class which consistently handles 'javaScript:fnct' strings, added 'allowOnMultiple':'only' setting, added 'hint', 'checkbox', 'checked', 'radioGroup' properties to popup actions, added 'setDefaultExecute' function to egwAction objects, which applies an handler to all objects which don't have a handler yet
2011-04-17 17:38:46 +02:00
|
|
|
"order": 2,
|
|
|
|
"allowOnMultiple": "only",
|
|
|
|
"hint": "Compresses multiple files and mails them"
|
2011-03-23 15:05:39 +01:00
|
|
|
},
|
|
|
|
{
|
|
|
|
"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
|
|
|
|
}
|
|
|
|
]
|
2011-03-24 18:06:44 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
"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"
|
Fixed problems with executeActionImplementation when called from a container object, fixed problem with popup menu which did not open in some cases, added the ability to use the 'enabled' property of an action as an callback function (actionObject is passed as parameter), introduced egwFnct-class which consistently handles 'javaScript:fnct' strings, added 'allowOnMultiple':'only' setting, added 'hint', 'checkbox', 'checked', 'radioGroup' properties to popup actions, added 'setDefaultExecute' function to egwAction objects, which applies an handler to all objects which don't have a handler yet
2011-04-17 17:38:46 +02:00
|
|
|
},
|
|
|
|
{
|
|
|
|
"id": "chk1",
|
|
|
|
"type": "popup",
|
|
|
|
"checkbox": true,
|
|
|
|
"checked": true,
|
|
|
|
"caption": "Test1"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
"id": "chk2",
|
|
|
|
"type": "popup",
|
|
|
|
"checkbox": true,
|
|
|
|
"checked": false,
|
|
|
|
"caption": "Test2",
|
|
|
|
"onExecute": alertClicked
|
2011-02-24 20:00:47 +01:00
|
|
|
}
|
|
|
|
]
|
|
|
|
);
|
|
|
|
|
2011-02-26 19:04:28 +01:00
|
|
|
//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},
|
2011-03-23 15:05:39 +01:00
|
|
|
{"actionId": "file_delete", "enabled": true},
|
2011-03-24 18:06:44 +01:00
|
|
|
{"actionId": "send_to", "enabled": true},
|
Fixed problems with executeActionImplementation when called from a container object, fixed problem with popup menu which did not open in some cases, added the ability to use the 'enabled' property of an action as an callback function (actionObject is passed as parameter), introduced egwFnct-class which consistently handles 'javaScript:fnct' strings, added 'allowOnMultiple':'only' setting, added 'hint', 'checkbox', 'checked', 'radioGroup' properties to popup actions, added 'setDefaultExecute' function to egwAction objects, which applies an handler to all objects which don't have a handler yet
2011-04-17 17:38:46 +02:00
|
|
|
"file_drag",
|
|
|
|
"chk1",
|
|
|
|
"chk2"
|
2011-02-26 19:04:28 +01:00
|
|
|
];
|
|
|
|
|
|
|
|
var listboxFolderLinks = [
|
|
|
|
{"actionId": "folder_open", "enabled": true},
|
|
|
|
{"actionId": "file_compress_email", "enabled": true},
|
|
|
|
{"actionId": "file_compress", "enabled": true},
|
2011-03-23 15:05:39 +01:00
|
|
|
{"actionId": "file_delete", "enabled": true},
|
2011-03-24 18:06:44 +01:00
|
|
|
"send_to",
|
|
|
|
"folder_drop", "folder_drop2"
|
2011-02-26 19:04:28 +01:00
|
|
|
];
|
|
|
|
|
|
|
|
$('#lb1 tr:odd').addClass('odd');
|
|
|
|
|
|
|
|
//Create an object representation for each listbox-row and append
|
|
|
|
//each to its own listboxItemAOI
|
2011-02-24 20:00:47 +01:00
|
|
|
$('#lb1 tr').each(function(index, elem) {
|
2011-02-26 19:04:28 +01:00
|
|
|
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);
|
2011-02-26 21:40:27 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
$("#selectAll").click(function() {
|
|
|
|
objectManager.toggleAllSelected();
|
|
|
|
});
|
|
|
|
|
|
|
|
$("#performAction").click(function(e) {
|
|
|
|
if (!objectManager.executeActionImplementation(this, "popup"))
|
|
|
|
alert("Please select one or more objects.");
|
|
|
|
return false;
|
|
|
|
});
|
2011-02-24 20:00:47 +01:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|