First test with egwActionObjectInterface for a listbox-like representation of egwActionObjects (test_action.html), fixed bugs in egw_action.js which occured during testing.

This commit is contained in:
Andreas Stöckel 2011-02-24 21:39:05 +00:00
parent 53a041c488
commit 49770971ce
2 changed files with 87 additions and 33 deletions

View File

@ -605,7 +605,7 @@ egwActionObject.prototype.getFocusedObject = function()
//Search for the focused object in the children //Search for the focused object in the children
for (var i = 0; i < this.children.length; i++) for (var i = 0; i < this.children.length; i++)
{ {
var obj = this.children[i].getFocused() var obj = this.children[i].getFocusedObject()
if (obj) if (obj)
{ {
return obj; return obj;
@ -632,16 +632,18 @@ egwActionObject.prototype.getFocusedObject = function()
*/ */
egwActionObject.prototype._ifaceCallback = function(_newState, _shiftState) egwActionObject.prototype._ifaceCallback = function(_newState, _shiftState)
{ {
if (typeof _shiftState == "undefined")
_shiftState = EGW_AO_SHIFT_STATE_NONE;
// Remove the focus from all children on the same level // Remove the focus from all children on the same level
if (this.parent) if (this.parent)
{ {
var selected = egwBitIsSet(_newState, EGW_AO_STATE_SELECTED); var selected = egwBitIsSet(_newState, EGW_AO_STATE_SELECTED);
var objs = [];
if (selected) if (selected)
{ {
// Search the index of this object // Search the index of this object
var id = this.parent.children.indexOf(this); var id = this.parent.children.indexOf(this);
var objs = [];
// Deselect all other objects inside this container, if the "MULTI" shift- // Deselect all other objects inside this container, if the "MULTI" shift-
// state is not set // state is not set
@ -671,6 +673,7 @@ egwActionObject.prototype._ifaceCallback = function(_newState, _shiftState)
} }
} }
} }
}
// If the focused element didn't belong to this container, or the "list" // If the focused element didn't belong to this container, or the "list"
// shift-state isn't active, set the focus to this element. // shift-state isn't active, set the focus to this element.
@ -679,7 +682,6 @@ egwActionObject.prototype._ifaceCallback = function(_newState, _shiftState)
this.setFocused(true); this.setFocused(true);
} }
} }
}
} }
/** /**
@ -712,7 +714,7 @@ egwActionObject.prototype.getState = function()
* be de-focused. * be de-focused.
* *
* @param boolean _focused - whether to remove or set the focus. Defaults to true * @param boolean _focused - whether to remove or set the focus. Defaults to true
* @param boolean _recPrev is internally used to prevent infinit recursion. Do not touch. * @param object _recPrev is internally used to prevent infinit recursion. Do not touch.
*/ */
egwActionObject.prototype.setFocused = function(_focused, _recPrev) egwActionObject.prototype.setFocused = function(_focused, _recPrev)
{ {
@ -731,10 +733,10 @@ egwActionObject.prototype.setFocused = function(_focused, _recPrev)
//Reset the focus of the formerly focused element //Reset the focus of the formerly focused element
if (!_recPrev) if (!_recPrev)
{ {
var focused = this.getRootObject.getFocusedObject(); var focused = this.getRootObject().getFocusedObject();
if (focused) if (focused)
{ {
focused.setFocused(false, true); focused.setFocused(false, this);
} }
} }
@ -743,7 +745,10 @@ egwActionObject.prototype.setFocused = function(_focused, _recPrev)
//If the object is not focused, reset the focus state of all children //If the object is not focused, reset the focus state of all children
for (var i = 0; i < this.children.length; i++) for (var i = 0; i < this.children.length; i++)
{ {
this.children[i].setFocused(false, true); // if (this.children[i] != _recPrev)
// {
this.children[i].setFocused(false, _recPrev);
// }
} }
} }
else else
@ -751,7 +756,7 @@ egwActionObject.prototype.setFocused = function(_focused, _recPrev)
//Otherwise set the focused state of the parent to true //Otherwise set the focused state of the parent to true
if (this.parent) if (this.parent)
{ {
this.parent.setFocused(true, true); this.parent.setFocused(true, _recPrev);
} }
} }
@ -933,20 +938,17 @@ egwActionObjectInterface.prototype.setStateChangeCallback = function(_callback,
* the object and call the stateChangeCallback (if it has been set) * the object and call the stateChangeCallback (if it has been set)
* *
* @param boolean _selected Whether the object is selected or not. * @param boolean _selected Whether the object is selected or not.
* @param int _shiftState special keys which change how the state change will
* be treated.
*/ */
egwActionObjectInterface.prototype._selectChange = function(_selected) egwActionObjectInterface.prototype._selectChange = function(_selected, _shiftState)
{ {
// Check whether the selected bit has actually changed - the callback may
// perform expensive operations, and we don't want those to happen without
// a reason.
if (egwBitIsSet(this._state, EGW_AO_STATE_SELECTED) != _selected)
{
//Set the EGW_AO_STATE_SELECTED bit accordingly and call the callback //Set the EGW_AO_STATE_SELECTED bit accordingly and call the callback
this._state = egwBitSet(this._state, EGW_AO_STATE_SELECTED, _selected); this._state = egwSetBit(this._state, EGW_AO_STATE_SELECTED, _selected);
if (this.stateChangeCallback) if (this.stateChangeCallback)
{ {
this.stateChangeCallback.call(this.stateChangeContext, this._state); this.stateChangeCallback.call(this.stateChangeContext,
} this._state, _shiftState);
} }
} }
@ -996,7 +998,7 @@ egwActionObjectInterface.prototype.getState = function()
*/ */
function egwActionObjectManager(_id, _manager) function egwActionObjectManager(_id, _manager)
{ {
return new egwActionObject(_id, null, _manager, return new egwActionObject(_id, null, new egwActionObjectInterface(),
new egwActionObjectInterface(), EGW_AO_FLAG_IS_CONTAINER); _manager, EGW_AO_FLAG_IS_CONTAINER);
} }

View File

@ -30,8 +30,8 @@
} }
.listbox .focused { .listbox .focused {
border: 1px dashed white; border: 1px dashed black;
padding: 1px; padding: 2px;
} }
</style> </style>
</head> </head>
@ -40,31 +40,84 @@
<tr id="le1"> <tr id="le1">
<td><img src="imgs/page.png"/></td> <td><img src="imgs/page.png"/></td>
<td style="width: 200px">File 1</td> <td style="width: 200px">File 1</td>
<td><input id="le1_chk" type="checkbox"></td> <td><input type="checkbox"></td>
</tr> </tr>
<tr id="le2"> <tr id="le2">
<td><img src="imgs/page.png"/></td> <td><img src="imgs/page.png"/></td>
<td style="width: 200px">File 2</td> <td style="width: 200px">File 2</td>
<td><input id="le2_chk" type="checkbox"></td> <td><input type="checkbox"></td>
</tr> </tr>
<tr id="le3"> <tr id="le3">
<td><img src="imgs/page.png"/></td> <td><img src="imgs/page.png"/></td>
<td style="width: 200px">File 3</td> <td style="width: 200px">File 3</td>
<td><input id="le3_chk" type="checkbox"></td> <td><input type="checkbox"></td>
</tr> </tr>
</table> </table>
<script> <script>
var actionManager = null; var actionManager = null;
var objectManager = null;
$(document).ready(function() { $(document).ready(function() {
init(); 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() function init()
{ {
//Initialize the action manager and add some actions to it //Initialize the action manager and add some actions to it
actionManager = new egwActionManager(); actionManager = new egwActionManager();
objectManager = new egwActionObjectManager("", actionManager);
actionManager.updateActions( actionManager.updateActions(
[ [
@ -83,8 +136,7 @@
); );
$('#lb1 tr').each(function(index, elem) { $('#lb1 tr').each(function(index, elem) {
// Create an action object and attach it to an interface objectManager.addObject(elem.id, new listboxItemAOI(elem));
console.log(index, elem);
}) })
} }
</script> </script>