-
{{toolboxCategory.categoryName}}
+
{{toolboxCategory.categoryName}}
@@ -76,22 +74,26 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({
this.modalIsVisible = false;
this.toolboxCategories = [];
+ this.onSelectBlockCallback = null;
+ this.onDismissCallback = null;
+
this.firstBlockIndexes = [];
this.activeButtonIndex = 0;
- this.totalNumBlocks = null;
- this.isBlockAvailable = null;
+ this.totalNumBlocks = 0;
var that = this;
this.toolboxModalService.registerPreShowHook(
function(
- toolboxCategories, isBlockAvailable, onSelectBlockCallback,
- onDismissCallback) {
+ toolboxCategories, onSelectBlockCallback, onDismissCallback) {
that.modalIsVisible = true;
that.toolboxCategories = toolboxCategories;
- that.isBlockAvailable = isBlockAvailable;
that.onSelectBlockCallback = onSelectBlockCallback;
that.onDismissCallback = onDismissCallback;
+ that.firstBlockIndexes = [];
+ that.activeButtonIndex = 0;
+ that.totalNumBlocks = 0;
+
var cumulativeIndex = 0;
that.toolboxCategories.forEach(function(category) {
that.firstBlockIndexes.push(cumulativeIndex);
@@ -107,8 +109,7 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({
evt.preventDefault();
evt.stopPropagation();
},
- // Enter key: selects an action, performs it, and closes the
- // modal.
+ // Enter key: selects an action, performs it, and closes the modal.
'13': function(evt) {
evt.preventDefault();
evt.stopPropagation();
@@ -142,7 +143,7 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({
} else {
that.activeButtonIndex--;
}
- that.focusOnOptionIfPossible(that.activeButtonIndex);
+ that.focusOnOption(that.activeButtonIndex);
},
// Down key: navigates to the next item in the list.
'40': function(evt) {
@@ -152,12 +153,13 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({
} else {
that.activeButtonIndex++;
}
- that.focusOnOptionIfPossible(that.activeButtonIndex);
+ that.focusOnOption(that.activeButtonIndex);
}
});
setTimeout(function() {
document.getElementById('toolboxModal').focus();
+ that.focusOnOption(that.activeButtonIndex);
}, 150);
}
);
@@ -179,13 +181,9 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({
return this.utilsService.getBlockDescription(block);
},
// Focuses on the button represented by the given index.
- focusOnOptionIfPossible: function(index) {
+ focusOnOption: function(index) {
var button = document.getElementById(this.getOptionId(index));
- if (!button.disabled) {
- button.focus();
- } else {
- document.activeElement.blur();
- }
+ button.focus();
},
// Returns the ID for the corresponding option button.
getOptionId: function(index) {
diff --git a/accessible/toolbox-modal.service.js b/accessible/toolbox-modal.service.js
index 7b6adbfbf..8256985f7 100644
--- a/accessible/toolbox-modal.service.js
+++ b/accessible/toolbox-modal.service.js
@@ -37,7 +37,7 @@ blocklyApp.ToolboxModalService = ng.core.Class({
this.modalIsShown = false;
- this.isBlockAvailable = null;
+ this.selectedToolboxCategories = null;
this.onSelectBlockCallback = null;
this.onDismissCallback = null;
this.preShowHook = function() {
@@ -45,13 +45,13 @@ blocklyApp.ToolboxModalService = ng.core.Class({
'A pre-show hook must be defined for the toolbox modal before it ' +
'can be shown.');
};
- this.toolboxCategories = [];
// Populate the toolbox categories.
+ this.allToolboxCategories = [];
var toolboxXmlElt = document.getElementById('blockly-toolbox-xml');
var toolboxCategoryElts = toolboxXmlElt.getElementsByTagName('category');
if (toolboxCategoryElts.length) {
- this.toolboxCategories = Array.from(toolboxCategoryElts).map(
+ this.allToolboxCategories = Array.from(toolboxCategoryElts).map(
function(categoryElt) {
var workspace = new Blockly.Workspace();
Blockly.Xml.domToWorkspace(categoryElt, workspace);
@@ -73,8 +73,8 @@ blocklyApp.ToolboxModalService = ng.core.Class({
Blockly.Xml.domToBlock(workspace, topLevelNode);
});
- that.toolboxCategories = [{
- categoryName: 'Available Blocks',
+ that.allToolboxCategories = [{
+ categoryName: '',
blocks: workspace.topBlocks_
}];
});
@@ -84,16 +84,16 @@ blocklyApp.ToolboxModalService = ng.core.Class({
registerPreShowHook: function(preShowHook) {
this.preShowHook = function() {
preShowHook(
- this.toolboxCategories, this.isBlockAvailable,
- this.onSelectBlockCallback, this.onDismissCallback);
+ this.selectedToolboxCategories, this.onSelectBlockCallback,
+ this.onDismissCallback);
};
},
isModalShown: function() {
return this.modalIsShown;
},
showModal_: function(
- isBlockAvailable, onSelectBlockCallback, onDismissCallback) {
- this.isBlockAvailable = isBlockAvailable;
+ selectedToolboxCategories, onSelectBlockCallback, onDismissCallback) {
+ this.selectedToolboxCategories = selectedToolboxCategories;
this.onSelectBlockCallback = onSelectBlockCallback;
this.onDismissCallback = onDismissCallback;
@@ -105,9 +105,22 @@ blocklyApp.ToolboxModalService = ng.core.Class({
},
showToolboxModalForAttachToMarkedConnection: function(sourceButtonId) {
var that = this;
- this.showModal_(function(block) {
- return that.clipboardService.canBeAttachedToMarkedConnection(block);
- }, function(block) {
+
+ var selectedToolboxCategories = [];
+ this.allToolboxCategories.forEach(function(toolboxCategory) {
+ var selectedBlocks = toolboxCategory.blocks.filter(function(block) {
+ return that.clipboardService.canBeAttachedToMarkedConnection(block);
+ });
+
+ if (selectedBlocks.length > 0) {
+ selectedToolboxCategories.push({
+ categoryName: toolboxCategory.categoryName,
+ blocks: selectedBlocks
+ });
+ }
+ });
+
+ this.showModal_(selectedToolboxCategories, function(block) {
var blockDescription = that.utilsService.getBlockDescription(block);
// Clean up the active desc for the destination tree.
@@ -140,9 +153,7 @@ blocklyApp.ToolboxModalService = ng.core.Class({
},
showToolboxModalForCreateNewGroup: function(sourceButtonId) {
var that = this;
- this.showModal_(function(block) {
- return true;
- }, function(block) {
+ this.showModal_(this.allToolboxCategories, function(block) {
var blockDescription = that.utilsService.getBlockDescription(block);
var xml = Blockly.Xml.blockToDom(block);
var newBlockId = Blockly.Xml.domToBlock(blocklyApp.workspace, xml).id;