diff --git a/accessible/app.component.js b/accessible/app.component.js
index 5de03e575..763a13c11 100644
--- a/accessible/app.component.js
+++ b/accessible/app.component.js
@@ -25,9 +25,6 @@
blocklyApp.workspace = new Blockly.Workspace();
-// If the debug flag is true, print console.logs to help with debugging.
-blocklyApp.debug = false;
-
blocklyApp.AppView = ng.core
.Component({
selector: 'blockly-app',
diff --git a/accessible/clipboard.service.js b/accessible/clipboard.service.js
index de9b382a3..db65e2d9f 100644
--- a/accessible/clipboard.service.js
+++ b/accessible/clipboard.service.js
@@ -30,6 +30,60 @@ blocklyApp.ClipboardService = ng.core
this.clipboardBlockNextConnection_ = null;
this.markedConnection_ = null;
},
+ areConnectionsCompatible_: function(blockConnection, connection) {
+ // Check that both connections exist, that it's the right kind of
+ // connection, and that the types match.
+ return Boolean(
+ connection && blockConnection &&
+ Blockly.OPPOSITE_TYPE[blockConnection.type] == connection.type &&
+ connection.checkType_(blockConnection));
+ },
+ isCompatibleWithClipboard: function(connection) {
+ var superiorConnection = this.clipboardBlockSuperiorConnection_;
+ var nextConnection = this.clipboardBlockNextConnection_;
+ return Boolean(
+ this.areConnectionsCompatible_(connection, superiorConnection) ||
+ this.areConnectionsCompatible_(connection, nextConnection));
+ },
+ isMovableToMarkedConnection: function(block) {
+ // It should not be possible to move any ancestor of the block containing
+ // the marked spot to the marked spot.
+ if (!this.markedConnection_) {
+ return false;
+ }
+
+ var markedSpotAncestorBlock = this.markedConnection_.getSourceBlock();
+ while (markedSpotAncestorBlock) {
+ if (markedSpotAncestorBlock.id == block.id) {
+ return false;
+ }
+ markedSpotAncestorBlock = markedSpotAncestorBlock.getParent();
+ }
+
+ return this.canBeCopiedToMarkedConnection(block);
+ },
+ canBeCopiedToMarkedConnection: function(block) {
+ if (!this.markedConnection_ ||
+ !this.markedConnection_.getSourceBlock().workspace) {
+ return false;
+ }
+
+ var potentialConnections = [
+ block.outputConnection,
+ block.previousConnection,
+ block.nextConnection
+ ];
+
+ var that = this;
+ return potentialConnections.some(function(connection) {
+ return that.areConnectionsCompatible_(
+ connection, that.markedConnection_);
+ });
+ },
+ markConnection: function(connection) {
+ this.markedConnection_ = connection;
+ alert(Blockly.Msg.MARKED_SPOT_MSG);
+ },
cut: function(block) {
var blockSummary = block.toString();
this.copy(block, false);
@@ -64,42 +118,36 @@ blocklyApp.ClipboardService = ng.core
},
pasteToMarkedConnection: function(block, announce) {
var xml = Blockly.Xml.blockToDom(block);
- var reconstitutedBlock =
- Blockly.Xml.domToBlock(blocklyApp.workspace, xml);
- this.markedConnection_.connect(
- reconstitutedBlock.outputConnection ||
- reconstitutedBlock.previousConnection);
+ var reconstitutedBlock = Blockly.Xml.domToBlock(
+ blocklyApp.workspace, xml);
+
+ var potentialConnections = [
+ reconstitutedBlock.outputConnection,
+ reconstitutedBlock.previousConnection,
+ reconstitutedBlock.nextConnection
+ ];
+
+ var connectionSuccessful = false;
+ for (var i = 0; i < potentialConnections.length; i++) {
+ if (this.areConnectionsCompatible_(
+ this.markedConnection_, potentialConnections[i])) {
+ this.markedConnection_.connect(potentialConnections[i]);
+ connectionSuccessful = true;
+ break;
+ }
+ }
+
+ if (!connectionSuccessful) {
+ console.error('ERROR: Could not connect block to marked spot.');
+ return;
+ }
+
if (announce) {
alert(
Blockly.Msg.PASTED_BLOCK_TO_MARKED_SPOT_MSG +
reconstitutedBlock.toString());
}
- },
- markConnection: function(connection) {
- this.markedConnection_ = connection;
- alert(Blockly.Msg.MARKED_SPOT_MSG);
- },
- isCompatibleWithConnection_: function(blockConnection, connection) {
- // Check that both connections exist, that the types match, and that it's
- // the right kind of connection.
- return Boolean(
- connection && blockConnection &&
- Blockly.OPPOSITE_TYPE[blockConnection.type] == connection.type &&
- connection.checkType_(blockConnection));
- },
- isBlockCompatibleWithMarkedConnection: function(block) {
- var blockConnection = block.outputConnection || block.previousConnection;
- return Boolean(
- this.markedConnection_ &&
- this.markedConnection_.sourceBlock_.workspace &&
- this.isCompatibleWithConnection_(
- blockConnection, this.markedConnection_));
- },
- isClipboardCompatibleWithConnection: function(connection) {
- var superiorConnection = this.clipboardBlockSuperiorConnection_;
- var nextConnection = this.clipboardBlockNextConnection_;
- return Boolean(
- this.isCompatibleWithConnection_(connection, superiorConnection) ||
- this.isCompatibleWithConnection_(connection, nextConnection));
+
+ this.markedConnection_ = null;
}
});
diff --git a/accessible/toolbox-tree.component.js b/accessible/toolbox-tree.component.js
index cc701fc35..64320458d 100644
--- a/accessible/toolbox-tree.component.js
+++ b/accessible/toolbox-tree.component.js
@@ -59,12 +59,12 @@ blocklyApp.ToolboxTreeComponent = ng.core
@@ -138,6 +138,9 @@ blocklyApp.ToolboxTreeComponent = ng.core
return this.utilsService.generateAriaLabelledByAttr(
mainLabel, secondLabel, isDisabled);
},
+ canBeCopiedToMarkedConnection: function(block) {
+ return this.clipboardService.canBeCopiedToMarkedConnection(block);
+ },
copyToWorkspace: function(block) {
var xml = Blockly.Xml.blockToDom(block);
Blockly.Xml.domToBlock(blocklyApp.workspace, xml);
diff --git a/accessible/toolbox.component.js b/accessible/toolbox.component.js
index 589a73712..081803103 100644
--- a/accessible/toolbox.component.js
+++ b/accessible/toolbox.component.js
@@ -98,7 +98,7 @@ blocklyApp.ToolboxComponent = ng.core
this.idMap['Parent' + i] = 'blockly-toolbox-tree-node' + i;
}
} else {
- // Create a single category is created with all the top-level blocks.
+ // Create a single category with all the top-level blocks.
this.xmlHasCategories = false;
this.toolboxCategories = [Array.from(xmlToolboxElt.children)];
}
@@ -108,8 +108,7 @@ blocklyApp.ToolboxComponent = ng.core
// descendant after the ids have been computed.
if (this.xmlHasCategories) {
this.treeService.setActiveDesc(
- document.getElementById('blockly-toolbox-tree-node0'),
- document.getElementById('blockly-toolbox-tree'));
+ 'blockly-toolbox-tree-node0', 'blockly-toolbox-tree');
}
},
getToolboxWorkspace: function(categoryNode) {
diff --git a/accessible/tree.service.js b/accessible/tree.service.js
index 84ac80541..e464bc788 100644
--- a/accessible/tree.service.js
+++ b/accessible/tree.service.js
@@ -27,12 +27,6 @@
blocklyApp.TreeService = ng.core
.Class({
constructor: function() {
- // Keeping track of the last key pressed. If the user presses
- // enter (to edit a text input or press a button), the keyboard
- // focus shifts to that element. In the next keystroke, if the user
- // navigates away from the element using the arrow keys, we want
- // to shift focus back to the tree as a whole.
- this.previousKey_ = null;
// Stores active descendant ids for each tree in the page.
this.activeDescendantIds_ = {};
},
@@ -76,6 +70,16 @@ blocklyApp.TreeService = ng.core
return this.getToolboxTreeNode_();
},
+ focusOnCurrentTree_: function(treeId) {
+ var trees = this.getAllTreeNodes_();
+ for (var i = 0; i < trees.length; i++) {
+ if (trees[i].id == treeId) {
+ trees[i].focus();
+ return true;
+ }
+ }
+ return false;
+ },
focusOnNextTree_: function(treeId) {
var trees = this.getAllTreeNodes_();
for (var i = 0; i < trees.length - 1; i++) {
@@ -113,9 +117,10 @@ blocklyApp.TreeService = ng.core
},
// Runs the given function while preserving the focus and active descendant
// for the given tree.
- runWhilePreservingFocus: function(func, treeId) {
- var activeDescId = this.getActiveDescId(treeId);
- this.unmarkActiveDesc_(activeDescId);
+ 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
@@ -123,132 +128,136 @@ blocklyApp.TreeService = ng.core
// pasteAbove().
var that = this;
setTimeout(function() {
- that.markActiveDesc_(activeDescId);
- that.activeDescendantIds_[treeId] = activeDescId;
+ that.markActiveDesc_(newDescId);
+ that.activeDescendantIds_[treeId] = newDescId;
document.getElementById(treeId).focus();
}, 0);
},
// Make a given node the active descendant of a given tree.
- setActiveDesc: function(newActiveDesc, tree) {
- this.unmarkActiveDesc_(this.getActiveDescId(tree.id));
- this.markActiveDesc_(newActiveDesc.id);
- this.activeDescendantIds_[tree.id] = newActiveDesc.id;
+ setActiveDesc: function(newActiveDescId, treeId) {
+ this.unmarkActiveDesc_(this.getActiveDescId(treeId));
+ this.markActiveDesc_(newActiveDescId);
+ this.activeDescendantIds_[treeId] = newActiveDescId;
},
onWorkspaceToolbarKeypress: function(e, treeId) {
- switch (e.keyCode) {
- case 9:
- // 16,9: shift, tab
- if (e.shiftKey) {
- // If the previous key is shift, we're shift-tabbing mode.
- this.focusOnPreviousTree_(treeId);
- } else {
- // If previous key isn't shift, we're tabbing.
- this.focusOnNextTree_(treeId);
- }
- e.preventDefault();
- e.stopPropagation();
- break;
+ if (e.keyCode == 9) {
+ // Tab key.
+ if (e.shiftKey) {
+ this.focusOnPreviousTree_(treeId);
+ } else {
+ this.focusOnNextTree_(treeId);
+ }
+ e.preventDefault();
+ e.stopPropagation();
}
},
+ isButtonOrFieldNode_: function(node) {
+ return ['BUTTON', 'INPUT'].indexOf(node.tagName) != -1;
+ },
+ 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);
+ },
onKeypress: function(e, tree) {
var treeId = tree.id;
- var node = document.getElementById(this.getActiveDescId(treeId));
- var keepFocus = this.previousKey_ == 13;
- if (!node) {
- blocklyApp.debug && console.log('KeyHandler: no active descendant');
+ var activeDesc = document.getElementById(this.getActiveDescId(treeId));
+ if (!activeDesc) {
+ console.error('ERROR: no active descendant for current tree.');
+
+ // TODO(sll): Generalize this to other trees (outside the workspace).
+ var workspaceTreeNodes = this.getWorkspaceTreeNodes_();
+ for (var i = 0; i < workspaceTreeNodes.length; i++) {
+ if (workspaceTreeNodes[i].id == treeId) {
+ // Set the active desc to the first child in this tree.
+ this.setActiveDesc(
+ this.getFirstChild(workspaceTreeNodes[i]).id, treeId);
+ break;
+ }
+ }
+ return;
}
- switch (e.keyCode) {
- case 9:
- // 16,9: shift, tab
- if (e.shiftKey) {
- // If the previous key is shift, we're shift-tabbing.
- this.focusOnPreviousTree_(treeId);
- } else {
- // If previous key isn't shift, we're tabbing
- // we want to go to the run code button.
- this.focusOnNextTree_(treeId);
+
+ var isFocusingIntoField = false;
+
+ if (e.keyCode == 13) {
+ // Enter key. The user wants to interact with a child.
+ if (activeDesc.children.length == 1) {
+ var child = activeDesc.children[0];
+ if (child.tagName == 'BUTTON') {
+ child.click();
+ this.isFocusingIntoField = true;
+ } else if (child.tagName == 'INPUT') {
+ child.focus();
}
- // Setting the previous key variable in each case because
- // we only want to save the previous navigation keystroke,
- // not any typing.
- this.previousKey_ = e.keyCode;
- e.preventDefault();
- e.stopPropagation();
- break;
- case 37:
- // Left-facing arrow: go out a level, if possible. If not, do nothing.
- var nextNode = node.parentNode;
- if (node.tagName == 'BUTTON' || node.tagName == 'INPUT') {
+ }
+ } else if (e.keyCode == 9) {
+ // Tab key.
+ if (e.shiftKey) {
+ this.focusOnPreviousTree_(treeId);
+ } else {
+ this.focusOnNextTree_(treeId);
+ }
+ e.preventDefault();
+ e.stopPropagation();
+ } else if (e.keyCode >= 37 && e.keyCode <= 40) {
+ // Arrow keys.
+ if (e.keyCode == 37) {
+ // Left arrow key. Go up a level, if possible.
+ var nextNode = activeDesc.parentNode;
+ if (this.isButtonOrFieldNode_(activeDesc)) {
nextNode = nextNode.parentNode;
}
- while (nextNode && nextNode.className != 'treeview' &&
- nextNode.tagName != 'LI') {
+ while (nextNode && nextNode.tagName != 'LI') {
nextNode = nextNode.parentNode;
}
- if (!nextNode || nextNode.className == 'treeview') {
- return;
+ if (nextNode) {
+ this.setActiveDesc(nextNode.id, treeId);
}
- this.setActiveDesc(nextNode, tree);
- this.previousKey_ = e.keyCode;
- e.preventDefault();
- e.stopPropagation();
- break;
- case 38:
- // Up-facing arrow: go up a level, if possible. If not, do nothing.
- var prevSibling = this.getPreviousSibling(node);
- if (prevSibling && prevSibling.tagName != 'H1') {
- this.setActiveDesc(prevSibling, tree);
- } else {
- blocklyApp.debug && console.log('no previous sibling');
+ } 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);
}
- this.previousKey_ = e.keyCode;
- e.preventDefault();
- e.stopPropagation();
- break;
- case 39:
- var firstChild = this.getFirstChild(node);
+ } else if (e.keyCode == 39) {
+ // Right arrow key. Go down a level, if possible.
+ var firstChild = this.getFirstChild(activeDesc);
if (firstChild) {
- this.setActiveDesc(firstChild, tree);
- } else {
- blocklyApp.debug && console.log('no valid child');
+ this.setActiveDesc(firstChild.id, treeId);
}
- this.previousKey_ = e.keyCode;
- e.preventDefault();
- e.stopPropagation();
- break;
- case 40:
- // Down-facing arrow: go down a level, if possible.
- // If not, do nothing.
- var nextSibling = this.getNextSibling(node);
+ } 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, tree);
- } else {
- blocklyApp.debug && console.log('no next sibling');
+ this.setActiveDesc(nextSibling.id, treeId);
}
- this.previousKey_ = e.keyCode;
- e.preventDefault();
- e.stopPropagation();
- break;
- case 13:
- // If I've pressed enter, I want to interact with a child.
- var activeDesc = node;
- if (activeDesc) {
- var children = activeDesc.children;
- var child = children[0];
- if (children.length == 1 && (child.tagName == 'INPUT' ||
- child.tagName == 'BUTTON')) {
- if (child.tagName == 'BUTTON') {
- child.click();
- }
- else if (child.tagName == 'INPUT') {
- child.focus();
- }
- }
- } else {
- blocklyApp.debug && console.log('no activeDesc');
- }
- this.previousKey_ = e.keyCode;
- break;
+ }
+
+ e.preventDefault();
+ e.stopPropagation();
}
},
getFirstChild: function(element) {
@@ -273,13 +282,12 @@ blocklyApp.TreeService = ng.core
if (element.nextElementSibling) {
// If there is a sibling, find the list element child of the sibling.
var node = element.nextElementSibling;
- if (node.tagName != 'LI') {
- var listElems = node.getElementsByTagName('li');
- // getElementsByTagName returns in DFS order
- // therefore the first element is the first relevant list child.
- return listElems[0];
+ if (node.tagName == 'LI') {
+ return node;
} else {
- return element.nextElementSibling;
+ // 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;
@@ -343,7 +351,6 @@ blocklyApp.TreeService = ng.core
}
}
}
- blocklyApp.debug && console.log('no last child');
return null;
}
}
diff --git a/accessible/workspace-tree.component.js b/accessible/workspace-tree.component.js
index 2fe99002c..5c7f4dc5f 100644
--- a/accessible/workspace-tree.component.js
+++ b/accessible/workspace-tree.component.js
@@ -28,69 +28,29 @@ blocklyApp.WorkspaceTreeComponent = ng.core
.Component({
selector: 'blockly-workspace-tree',
template: `
-