mirror of
https://github.com/google/blockly.git
synced 2026-01-06 16:40:07 +01:00
656 lines
23 KiB
JavaScript
656 lines
23 KiB
JavaScript
/**
|
|
* AccessibleBlockly
|
|
*
|
|
* Copyright 2016 Google Inc.
|
|
* https://developers.google.com/blockly/
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the 'License');
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an 'AS IS' BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
/**
|
|
* @fileoverview Angular2 Service that handles tree keyboard navigation.
|
|
* This is a singleton service for the entire application.
|
|
*
|
|
* @author madeeha@google.com (Madeeha Ghori)
|
|
*/
|
|
|
|
blocklyApp.TreeService = ng.core.Class({
|
|
constructor: [
|
|
blocklyApp.AudioService,
|
|
blocklyApp.BlockConnectionService,
|
|
blocklyApp.BlockOptionsModalService,
|
|
blocklyApp.NotificationsService,
|
|
blocklyApp.UtilsService,
|
|
function(
|
|
audioService, blockConnectionService, blockOptionsModalService,
|
|
notificationsService, utilsService) {
|
|
this.audioService = audioService;
|
|
this.blockConnectionService = blockConnectionService;
|
|
this.blockOptionsModalService = blockOptionsModalService;
|
|
this.notificationsService = notificationsService;
|
|
this.utilsService = utilsService;
|
|
|
|
// Stores active descendant ids for each tree in the page.
|
|
this.activeDescendantIds_ = {};
|
|
}
|
|
],
|
|
// Returns a list of all top-level workspace tree nodes on the page.
|
|
getWorkspaceFocusTargets_: function() {
|
|
return Array.from(
|
|
document.querySelectorAll('.blocklyWorkspaceFocusTarget'));
|
|
},
|
|
getSidebarButtonNodes_: function() {
|
|
return Array.from(document.querySelectorAll('button.blocklySidebarButton'));
|
|
},
|
|
// Returns a list of all top-level tree nodes on the page.
|
|
getAllTreeNodes_: function() {
|
|
return this.getWorkspaceFocusTargets_().concat(
|
|
this.getSidebarButtonNodes_());
|
|
},
|
|
focusOnCurrentTree_: function(treeId) {
|
|
var trees = this.getAllTreeNodes_();
|
|
for (var i = 0; i < trees.length; i++) {
|
|
if (trees[i].id == treeId) {
|
|
trees[i].focus();
|
|
return trees[i].id;
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
getIdOfNextTree_: function(treeId) {
|
|
var trees = this.getAllTreeNodes_();
|
|
for (var i = 0; i < trees.length - 1; i++) {
|
|
if (trees[i].id == treeId) {
|
|
return trees[i + 1].id;
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
getIdOfPreviousTree_: function(treeId) {
|
|
var trees = this.getAllTreeNodes_();
|
|
for (var i = trees.length - 1; i > 0; i--) {
|
|
if (trees[i].id == treeId) {
|
|
return trees[i - 1].id;
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
getActiveDescId: function(treeId) {
|
|
return this.activeDescendantIds_[treeId] || '';
|
|
},
|
|
unmarkActiveDesc_: function(activeDescId) {
|
|
var activeDesc = document.getElementById(activeDescId);
|
|
if (activeDesc) {
|
|
activeDesc.classList.remove('blocklyActiveDescendant');
|
|
}
|
|
},
|
|
markActiveDesc_: function(activeDescId) {
|
|
var newActiveDesc = document.getElementById(activeDescId);
|
|
newActiveDesc.classList.add('blocklyActiveDescendant');
|
|
},
|
|
// Runs the given function while preserving the focus and active descendant
|
|
// for the given tree.
|
|
runWhilePreservingFocus: function(func, treeId, optionalNewActiveDescId) {
|
|
var oldDescId = this.getActiveDescId(treeId);
|
|
var newDescId = optionalNewActiveDescId || oldDescId;
|
|
this.unmarkActiveDesc_(oldDescId);
|
|
func();
|
|
|
|
// The timeout is needed in order to give the DOM time to stabilize
|
|
// before setting the new active descendant, especially in cases like
|
|
// pasteAbove().
|
|
var that = this;
|
|
setTimeout(function() {
|
|
that.markActiveDesc_(newDescId);
|
|
that.activeDescendantIds_[treeId] = newDescId;
|
|
document.getElementById(treeId).focus();
|
|
}, 0);
|
|
},
|
|
// This clears the active descendant of the given tree. It is used just
|
|
// before the tree is deleted.
|
|
clearActiveDesc: function(treeId) {
|
|
this.unmarkActiveDesc_(this.getActiveDescId(treeId));
|
|
delete this.activeDescendantIds_[treeId];
|
|
},
|
|
// Make a given node the active descendant of a given tree.
|
|
setActiveDesc: function(newActiveDescId, treeId) {
|
|
this.unmarkActiveDesc_(this.getActiveDescId(treeId));
|
|
this.markActiveDesc_(newActiveDescId);
|
|
this.activeDescendantIds_[treeId] = newActiveDescId;
|
|
|
|
// Scroll the new active desc into view, if needed. This has no effect
|
|
// for blind users, but is helpful for sighted onlookers.
|
|
var activeDescNode = document.getElementById(newActiveDescId);
|
|
var documentNode = document.body || document.documentElement;
|
|
if (activeDescNode.offsetTop < documentNode.scrollTop ||
|
|
activeDescNode.offsetTop >
|
|
documentNode.scrollTop + window.innerHeight) {
|
|
window.scrollTo(0, activeDescNode.offsetTop);
|
|
}
|
|
},
|
|
initActiveDesc: function(treeId) {
|
|
// Set the active desc to the first child in this tree.
|
|
var tree = document.getElementById(treeId);
|
|
this.setActiveDesc(this.getFirstChild(tree).id, treeId);
|
|
},
|
|
getTreeIdForBlock: function(blockId) {
|
|
// Walk up the DOM until we get to the root node of the tree.
|
|
var domNode = document.getElementById(blockId + 'blockRoot');
|
|
while (!domNode.classList.contains('blocklyTree')) {
|
|
domNode = domNode.parentNode;
|
|
}
|
|
return domNode.id;
|
|
},
|
|
focusOnBlock: function(blockId) {
|
|
// Set focus to the tree containing the given block, and set the active
|
|
// desc for this tree to the given block.
|
|
var domNode = document.getElementById(blockId + 'blockRoot');
|
|
// Walk up the DOM until we get to the root node of the tree.
|
|
while (!domNode.classList.contains('blocklyTree')) {
|
|
domNode = domNode.parentNode;
|
|
}
|
|
domNode.focus();
|
|
|
|
// We need to wait a while to set the active desc, because domNode takes
|
|
// a while to be given an ID if a new tree has just been created.
|
|
// TODO(sll): Make this more deterministic.
|
|
var that = this;
|
|
setTimeout(function() {
|
|
that.setActiveDesc(blockId + 'blockRoot', domNode.id);
|
|
}, 100);
|
|
},
|
|
getNextActiveDescWhenBlockIsDeleted: function(blockRootNode) {
|
|
// Go up a level, if possible.
|
|
var nextNode = blockRootNode.parentNode;
|
|
while (nextNode && nextNode.tagName != 'LI') {
|
|
nextNode = nextNode.parentNode;
|
|
}
|
|
if (nextNode) {
|
|
return nextNode;
|
|
}
|
|
|
|
// Otherwise, go to the next sibling.
|
|
var nextSibling = this.getNextSibling(blockRootNode);
|
|
if (nextSibling) {
|
|
return nextSibling;
|
|
}
|
|
|
|
// Otherwise, go to the previous sibling.
|
|
var previousSibling = this.getPreviousSibling(blockRootNode);
|
|
if (previousSibling) {
|
|
return previousSibling;
|
|
}
|
|
|
|
// Otherwise, this is a top-level isolated block, which means that
|
|
// something's gone wrong and this function should not have been called
|
|
// in the first place.
|
|
console.error('Could not handle deletion of block.' + blockRootNode);
|
|
},
|
|
notifyUserAboutCurrentTree_: function(treeId) {
|
|
var workspaceFocusTargets = this.getWorkspaceFocusTargets_();
|
|
for (var i = 0; i < workspaceFocusTargets.length; i++) {
|
|
if (workspaceFocusTargets[i].tagName == 'OL' &&
|
|
workspaceFocusTargets[i].id == treeId) {
|
|
this.notificationsService.speak(
|
|
'Now in workspace group ' + (i + 1) + ' of ' +
|
|
workspaceFocusTargets.length);
|
|
}
|
|
}
|
|
},
|
|
isIsolatedTopLevelBlock_: function(block) {
|
|
// Returns whether the given block is at the top level, and has no
|
|
// siblings.
|
|
var blockIsAtTopLevel = !block.getParent();
|
|
var blockHasNoSiblings = (
|
|
(!block.nextConnection ||
|
|
!block.nextConnection.targetConnection) &&
|
|
(!block.previousConnection ||
|
|
!block.previousConnection.targetConnection));
|
|
return blockIsAtTopLevel && blockHasNoSiblings;
|
|
},
|
|
removeBlockAndSetFocus: function(block, blockRootNode, deleteBlockFunc) {
|
|
// This method runs the given deletion function and then does one of two
|
|
// things:
|
|
// - If the block is an isolated top-level block, it shifts the tree
|
|
// focus.
|
|
// - Otherwise, it sets the correct new active desc for the current tree.
|
|
var treeId = this.getTreeIdForBlock(block.id);
|
|
if (this.isIsolatedTopLevelBlock_(block)) {
|
|
// Find the node to focus on after the deletion happens.
|
|
var nextNodeToFocusOn = null;
|
|
var focusTargets = this.getWorkspaceFocusTargets_();
|
|
for (var i = 0; i < focusTargets.length; i++) {
|
|
if (focusTargets[i].id == treeId) {
|
|
if (i + 1 < focusTargets.length) {
|
|
nextNodeToFocusOn = focusTargets[i + 1];
|
|
} else if (i > 0) {
|
|
nextNodeToFocusOn = focusTargets[i - 1];
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
this.clearActiveDesc(treeId);
|
|
deleteBlockFunc();
|
|
// Invoke a digest cycle, so that the DOM settles.
|
|
setTimeout(function() {
|
|
nextNodeToFocusOn = nextNodeToFocusOn || document.getElementById(
|
|
'blocklyEmptyWorkspaceButton');
|
|
nextNodeToFocusOn.focus();
|
|
});
|
|
} else {
|
|
var nextActiveDesc = this.getNextActiveDescWhenBlockIsDeleted(
|
|
blockRootNode);
|
|
this.runWhilePreservingFocus(
|
|
deleteBlockFunc, treeId, nextActiveDesc.id);
|
|
}
|
|
},
|
|
showBlockOptionsModal: function(block, blockRootNode) {
|
|
var that = this;
|
|
var actionButtonsInfo = [];
|
|
|
|
if (block.previousConnection) {
|
|
actionButtonsInfo.push({
|
|
action: function() {
|
|
that.blockConnectionService.markConnection(block.previousConnection);
|
|
that.focusOnBlock(block.id);
|
|
},
|
|
translationIdForText: 'MARK_SPOT_BEFORE'
|
|
});
|
|
}
|
|
|
|
if (block.nextConnection) {
|
|
actionButtonsInfo.push({
|
|
action: function() {
|
|
that.blockConnectionService.markConnection(block.nextConnection);
|
|
that.focusOnBlock(block.id);
|
|
},
|
|
translationIdForText: 'MARK_SPOT_AFTER'
|
|
});
|
|
}
|
|
|
|
if (this.blockConnectionService.canBeMovedToMarkedConnection(block)) {
|
|
actionButtonsInfo.push({
|
|
action: function() {
|
|
var blockDescription = that.utilsService.getBlockDescription(
|
|
block);
|
|
var oldDestinationTreeId = that.getTreeIdForBlock(
|
|
that.blockConnectionService.getMarkedConnectionSourceBlock().id);
|
|
that.clearActiveDesc(oldDestinationTreeId);
|
|
|
|
var newBlockId = that.blockConnectionService.attachToMarkedConnection(
|
|
block);
|
|
|
|
that.removeBlockAndSetFocus(block, blockRootNode, function() {
|
|
block.dispose(true);
|
|
});
|
|
|
|
// Invoke a digest cycle, so that the DOM settles.
|
|
setTimeout(function() {
|
|
that.focusOnBlock(newBlockId);
|
|
|
|
var newDestinationTreeId = that.getTreeIdForBlock(newBlockId);
|
|
if (newDestinationTreeId != oldDestinationTreeId) {
|
|
// It is possible for the tree ID for the pasted block to
|
|
// change after the paste operation, e.g. when inserting a
|
|
// block between two existing blocks that are joined
|
|
// together. In this case, we need to also reset the active
|
|
// desc for the old destination tree.
|
|
that.initActiveDesc(oldDestinationTreeId);
|
|
}
|
|
|
|
that.notificationsService.speak(
|
|
blockDescription + ' ' +
|
|
Blockly.Msg.ATTACHED_BLOCK_TO_LINK_MSG +
|
|
'. Now on attached block in workspace.');
|
|
});
|
|
},
|
|
translationIdForText: 'MOVE_TO_MARKED_SPOT'
|
|
});
|
|
}
|
|
|
|
actionButtonsInfo.push({
|
|
action: function() {
|
|
var blockDescription = that.utilsService.getBlockDescription(block);
|
|
|
|
that.removeBlockAndSetFocus(block, blockRootNode, function() {
|
|
block.dispose(true);
|
|
that.audioService.playDeleteSound();
|
|
});
|
|
|
|
setTimeout(function() {
|
|
if (that.utilsService.isWorkspaceEmpty()) {
|
|
that.notificationsService.speak(
|
|
blockDescription + ' deleted. Workspace is empty.');
|
|
} else {
|
|
that.notificationsService.speak(
|
|
blockDescription + ' deleted. Now on workspace.');
|
|
}
|
|
});
|
|
},
|
|
translationIdForText: 'DELETE'
|
|
});
|
|
|
|
this.blockOptionsModalService.showModal(actionButtonsInfo, function() {
|
|
that.focusOnBlock(block.id);
|
|
});
|
|
},
|
|
getBlockRootSuffix_: function() {
|
|
return 'blockRoot';
|
|
},
|
|
getCurrentBlockRootNode_: function(activeDesc) {
|
|
// Starting from the activeDesc, walk up the tree until we find the
|
|
// root of the current block.
|
|
var blockRootSuffix = this.getBlockRootSuffix_();
|
|
var putativeBlockRootNode = activeDesc;
|
|
while (putativeBlockRootNode.id.indexOf(blockRootSuffix) === -1) {
|
|
putativeBlockRootNode = putativeBlockRootNode.parentNode;
|
|
}
|
|
return putativeBlockRootNode;
|
|
},
|
|
getBlockFromRootNode_: function(blockRootNode) {
|
|
var blockRootSuffix = this.getBlockRootSuffix_();
|
|
var blockId = blockRootNode.id.substring(
|
|
0, blockRootNode.id.length - blockRootSuffix.length);
|
|
return blocklyApp.workspace.getBlockById(blockId);
|
|
},
|
|
onKeypress: function(e, tree) {
|
|
// TODO(sll): Instead of this, have a common ActiveContextService which
|
|
// returns true if at least one modal is shown, and false otherwise.
|
|
if (this.blockOptionsModalService.isModalShown()) {
|
|
return;
|
|
}
|
|
|
|
var treeId = tree.id;
|
|
var activeDesc = document.getElementById(this.getActiveDescId(treeId));
|
|
if (!activeDesc) {
|
|
console.error('ERROR: no active descendant for current tree.');
|
|
this.initActiveDesc(treeId);
|
|
return;
|
|
}
|
|
|
|
if (e.altKey || e.ctrlKey) {
|
|
// Do not intercept combinations such as Alt+Home.
|
|
return;
|
|
}
|
|
|
|
if (document.activeElement.tagName == 'INPUT') {
|
|
// For input fields, only Esc and Tab keystrokes are handled specially.
|
|
if (e.keyCode == 27 || e.keyCode == 9) {
|
|
// For Esc and Tab keys, the focus is removed from the input field.
|
|
this.focusOnCurrentTree_(treeId);
|
|
|
|
if (e.keyCode == 9) {
|
|
var destinationTreeId =
|
|
e.shiftKey ? this.getIdOfPreviousTree_(treeId) :
|
|
this.getIdOfNextTree_(treeId);
|
|
if (destinationTreeId) {
|
|
this.notifyUserAboutCurrentTree_(destinationTreeId);
|
|
}
|
|
}
|
|
|
|
// Allow Tab keypresses to go through.
|
|
if (e.keyCode == 27) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
}
|
|
} else {
|
|
// Outside an input field, Enter, Tab and navigation keys are all
|
|
// recognized.
|
|
if (e.keyCode == 13) {
|
|
// Enter key. The user wants to interact with a button, interact with
|
|
// an input field, or open the block options modal.
|
|
// Algorithm to find the field: do a DFS through the children until
|
|
// we find an INPUT, BUTTON or SELECT element (in which case we use it).
|
|
// Truncate the search at child LI elements.
|
|
var found = false;
|
|
var dfsStack = Array.from(activeDesc.children);
|
|
while (dfsStack.length) {
|
|
var currentNode = dfsStack.shift();
|
|
if (currentNode.tagName == 'BUTTON') {
|
|
this.moveUpOneLevel_(treeId);
|
|
currentNode.click();
|
|
found = true;
|
|
break;
|
|
} else if (currentNode.tagName == 'INPUT') {
|
|
currentNode.focus();
|
|
currentNode.select();
|
|
this.notificationsService.speak(
|
|
'Type a value, then press Escape to exit');
|
|
found = true;
|
|
break;
|
|
} else if (currentNode.tagName == 'SELECT') {
|
|
currentNode.focus();
|
|
found = true;
|
|
return;
|
|
} else if (currentNode.tagName == 'LI') {
|
|
continue;
|
|
}
|
|
|
|
if (currentNode.children) {
|
|
var reversedChildren = Array.from(currentNode.children).reverse();
|
|
reversedChildren.forEach(function(childNode) {
|
|
dfsStack.unshift(childNode);
|
|
});
|
|
}
|
|
}
|
|
|
|
// If we cannot find a field to interact with, we open the modal for
|
|
// the current block instead.
|
|
if (!found) {
|
|
var blockRootNode = this.getCurrentBlockRootNode_(activeDesc);
|
|
var block = this.getBlockFromRootNode_(blockRootNode);
|
|
|
|
e.stopPropagation();
|
|
this.showBlockOptionsModal(block, blockRootNode);
|
|
}
|
|
} else if (e.keyCode == 9) {
|
|
// Tab key. Note that allowing the event to propagate through is
|
|
// intentional.
|
|
var destinationTreeId =
|
|
e.shiftKey ? this.getIdOfPreviousTree_(treeId) :
|
|
this.getIdOfNextTree_(treeId);
|
|
if (destinationTreeId) {
|
|
this.notifyUserAboutCurrentTree_(destinationTreeId);
|
|
}
|
|
} else if (e.keyCode == 27) {
|
|
this.moveUpOneLevel_(treeId);
|
|
} else if (e.keyCode >= 35 && e.keyCode <= 40) {
|
|
// End, home, and arrow keys.
|
|
if (e.keyCode == 35) {
|
|
// End key. Go to the last sibling in the subtree.
|
|
var finalSibling = this.getFinalSibling(activeDesc);
|
|
if (finalSibling) {
|
|
this.setActiveDesc(finalSibling.id, treeId);
|
|
}
|
|
} else if (e.keyCode == 36) {
|
|
// Home key. Go to the first sibling in the subtree.
|
|
var initialSibling = this.getInitialSibling(activeDesc);
|
|
if (initialSibling) {
|
|
this.setActiveDesc(initialSibling.id, treeId);
|
|
}
|
|
} else if (e.keyCode == 37) {
|
|
// Left arrow key. Go up a level, if possible.
|
|
this.moveUpOneLevel_(treeId);
|
|
} else if (e.keyCode == 38) {
|
|
// Up arrow key. Go to the previous sibling, if possible.
|
|
var prevSibling = this.getPreviousSibling(activeDesc);
|
|
if (prevSibling) {
|
|
this.setActiveDesc(prevSibling.id, treeId);
|
|
} else {
|
|
var statusMessage = 'Reached top of list.';
|
|
if (this.getParentListElement_(activeDesc)) {
|
|
statusMessage += ' Press left to go to parent list.';
|
|
}
|
|
this.audioService.playOopsSound(statusMessage);
|
|
}
|
|
} else if (e.keyCode == 39) {
|
|
// Right arrow key. Go down a level, if possible.
|
|
this.moveDownOneLevel_(treeId);
|
|
} else if (e.keyCode == 40) {
|
|
// Down arrow key. Go to the next sibling, if possible.
|
|
var nextSibling = this.getNextSibling(activeDesc);
|
|
if (nextSibling) {
|
|
this.setActiveDesc(nextSibling.id, treeId);
|
|
} else {
|
|
this.audioService.playOopsSound('Reached bottom of list.');
|
|
}
|
|
}
|
|
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
}
|
|
},
|
|
moveDownOneLevel_: function(treeId) {
|
|
var activeDesc = document.getElementById(this.getActiveDescId(treeId));
|
|
var firstChild = this.getFirstChild(activeDesc);
|
|
if (firstChild) {
|
|
this.setActiveDesc(firstChild.id, treeId);
|
|
} else {
|
|
this.audioService.playOopsSound();
|
|
}
|
|
},
|
|
moveUpOneLevel_: function(treeId) {
|
|
var activeDesc = document.getElementById(this.getActiveDescId(treeId));
|
|
var nextNode = this.getParentListElement_(activeDesc);
|
|
if (nextNode) {
|
|
this.setActiveDesc(nextNode.id, treeId);
|
|
} else {
|
|
this.audioService.playOopsSound();
|
|
}
|
|
},
|
|
getParentListElement_: function(element) {
|
|
var nextNode = element.parentNode;
|
|
while (nextNode && nextNode.tagName != 'LI') {
|
|
nextNode = nextNode.parentNode;
|
|
}
|
|
return nextNode;
|
|
},
|
|
getFirstChild: function(element) {
|
|
if (!element) {
|
|
return element;
|
|
} else {
|
|
var childList = element.children;
|
|
for (var i = 0; i < childList.length; i++) {
|
|
if (childList[i].tagName == 'LI') {
|
|
return childList[i];
|
|
} else {
|
|
var potentialElement = this.getFirstChild(childList[i]);
|
|
if (potentialElement) {
|
|
return potentialElement;
|
|
}
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
},
|
|
getFinalSibling: function(element) {
|
|
while (true) {
|
|
var nextSibling = this.getNextSibling(element);
|
|
if (nextSibling && nextSibling.id != element.id) {
|
|
element = nextSibling;
|
|
} else {
|
|
return element;
|
|
}
|
|
}
|
|
},
|
|
getInitialSibling: function(element) {
|
|
while (true) {
|
|
var previousSibling = this.getPreviousSibling(element);
|
|
if (previousSibling && previousSibling.id != element.id) {
|
|
element = previousSibling;
|
|
} else {
|
|
return element;
|
|
}
|
|
}
|
|
},
|
|
getNextSibling: function(element) {
|
|
if (element.nextElementSibling) {
|
|
// If there is a sibling, find the list element child of the sibling.
|
|
var node = element.nextElementSibling;
|
|
if (node.tagName == 'LI') {
|
|
return node;
|
|
} else {
|
|
// getElementsByTagName returns in DFS order, therefore the first
|
|
// element is the first relevant list child.
|
|
return node.getElementsByTagName('li')[0];
|
|
}
|
|
} else {
|
|
var parent = element.parentNode;
|
|
while (parent && parent.tagName != 'OL') {
|
|
if (parent.nextElementSibling) {
|
|
var node = parent.nextElementSibling;
|
|
if (node.tagName == 'LI') {
|
|
return node;
|
|
} else {
|
|
return this.getFirstChild(node);
|
|
}
|
|
} else {
|
|
parent = parent.parentNode;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
},
|
|
getPreviousSibling: function(element) {
|
|
if (element.previousElementSibling) {
|
|
var sibling = element.previousElementSibling;
|
|
if (sibling.tagName == 'LI') {
|
|
return sibling;
|
|
} else {
|
|
return this.getLastChild(sibling);
|
|
}
|
|
} else {
|
|
var parent = element.parentNode;
|
|
while (parent) {
|
|
if (parent.tagName == 'OL') {
|
|
break;
|
|
}
|
|
if (parent.previousElementSibling) {
|
|
var node = parent.previousElementSibling;
|
|
if (node.tagName == 'LI') {
|
|
return node;
|
|
} else {
|
|
// Find the last list element child of the sibling of the parent.
|
|
return this.getLastChild(node);
|
|
}
|
|
} else {
|
|
parent = parent.parentNode;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
},
|
|
getLastChild: function(element) {
|
|
if (!element) {
|
|
return element;
|
|
} else {
|
|
var childList = element.children;
|
|
for (var i = childList.length - 1; i >= 0; i--) {
|
|
// Find the last child that is a list element.
|
|
if (childList[i].tagName == 'LI') {
|
|
return childList[i];
|
|
} else {
|
|
var potentialElement = this.getLastChild(childList[i]);
|
|
if (potentialElement) {
|
|
return potentialElement;
|
|
}
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
}
|
|
});
|