forked from extern/egroupware
388 lines
10 KiB
HTML
388 lines
10 KiB
HTML
<html>
|
|
<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>
|
|
|
|
<!-- 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;
|
|
margin: 5px;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.listbox tr {
|
|
-moz-user-select: none;
|
|
-khtml-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 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>
|
|
var actionManager = null;
|
|
var objectManager = null;
|
|
|
|
$(document).ready(function() {
|
|
init();
|
|
});
|
|
|
|
// 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];
|
|
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.ctrkKey || e.metaKey);
|
|
state = egwSetBit(state, EGW_AO_SHIFT_STATE_BLOCK, e.shiftKey);
|
|
return state;
|
|
}
|
|
|
|
// Now append some action code to the node
|
|
$(_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).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)
|
|
{
|
|
$(this.node).addClass("draggedOver");
|
|
}
|
|
if (_event == EGW_AI_DRAG_OUT)
|
|
{
|
|
$(this.node).removeClass("draggedOver");
|
|
}
|
|
}
|
|
|
|
aoi.doSetState = function(_state) {
|
|
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);
|
|
}
|
|
|
|
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 $("<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
|
|
},
|
|
{
|
|
"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"
|
|
}
|
|
]
|
|
);
|
|
|
|
//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"
|
|
];
|
|
|
|
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"
|
|
];
|
|
|
|
$('#lb1 tr:odd').addClass('odd');
|
|
|
|
//Create an object representation for each listbox-row and append
|
|
//each to its own listboxItemAOI
|
|
$('#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);
|
|
});
|
|
|
|
$("#selectAll").click(function() {
|
|
objectManager.toggleAllSelected();
|
|
});
|
|
|
|
$("#performAction").click(function(e) {
|
|
if (!objectManager.executeActionImplementation(this, "popup"))
|
|
alert("Please select one or more objects.");
|
|
return false;
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|