egroupware/phpgwapi/js/egw_action/test/test_action.html

145 lines
3.4 KiB
HTML

<html>
<head>
<title>Test page for the egw action stuff</title>
<script src="../egw_action.js"></script>
<script src="../egw_action_common.js"></script>
<script src="js/jquery.js"></script>
<style>
body, table {
font-family: Arial, sans-serif;
font-size: 10pt;
}
.listbox {
width: 250px;
border: 1px solid gray;
margin: 5px;
border-collapse: collapse;
}
.listbox tr {
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
cursor: default;
padding: 2px;
}
.listbox .selected {
background-color: #2b5d9b;
color: white;
}
.listbox .focused {
border: 1px dashed black;
padding: 2px;
}
</style>
</head>
<body>
<table class="listbox" id="lb1">
<tr id="le1">
<td><img src="imgs/page.png"/></td>
<td style="width: 200px">File 1</td>
<td><input type="checkbox"></td>
</tr>
<tr id="le2">
<td><img src="imgs/page.png"/></td>
<td style="width: 200px">File 2</td>
<td><input type="checkbox"></td>
</tr>
<tr id="le3">
<td><img src="imgs/page.png"/></td>
<td style="width: 200px">File 3</td>
<td><input type="checkbox"></td>
</tr>
</table>
<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.doGetDOMNode = function() {
return self.node;
}
aoi.doSetState = function(_state, _outerCall, _shiftState) {
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);
if (! _outerCall)
{
this._selectChange(egwBitIsSet(_state,
EGW_AO_STATE_SELECTED), _shiftState);
}
}
// Now append some action code to the node
$(_node).click(function(e) {
if (e.target != aoi.checkBox)
{
// "Normal" Listbox behaviour
// aoi.doSetState(egwSetBit(aoi.getState(), EGW_AO_STATE_SELECTED,
// true), false, EGW_AO_SHIFT_STATE_NONE);
// "PHPMyAdmin" Listbox behaviour
var selected = egwBitIsSet(aoi.getState(), EGW_AO_STATE_SELECTED);
aoi.doSetState(egwSetBit(aoi.getState(), EGW_AO_STATE_SELECTED,
!selected), false, EGW_AO_SHIFT_STATE_MULTI);
}
});
$(aoi.checkBox).change(function() {
aoi.doSetState(egwSetBit(aoi.getState(), EGW_AO_STATE_SELECTED,
this.checked), false, EGW_AO_SHIFT_STATE_MULTI);
});
return aoi;
}
function init()
{
//Initialize the action manager and add some actions to it
actionManager = new egwActionManager();
objectManager = new egwActionObjectManager("", actionManager);
actionManager.updateActions(
[
{
"id": "file_view",
"icon": "imgs/view.png",
"allowOnMultiple": false,
"caption": "Datei anzeigen"
},
{
"id": "file_delete",
"icon": "imgs/delete.png",
"caption": "Datei löschen"
}
]
);
$('#lb1 tr').each(function(index, elem) {
objectManager.addObject(elem.id, new listboxItemAOI(elem));
})
}
</script>
</body>
</html>