egroupware/phpgwapi/js/egw_action/test/test_action.html
2011-03-24 17:06:44 +00:00

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>