CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-11 02:47:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Remove unavailable blocks from toolbox modal. Hide unnecessary category name in a toolbox without categories.

Browse Source
This commit is contained in:
Sean Lip
2016-11-28 18:24:31 -08:00
parent 02a94a11f2
commit aa49539059
3 changed files with 45 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
accessible/block-options-modal.component.js
View File

@@ -129,6 +129,7 @@ blocklyApp.BlockOptionsModalComponent = ng.core.Component({
setTimeout(function() {
document.getElementById('blockOptionsModal').focus();
that.focusOnOption(that.activeActionButtonIndex);
}, 150);
}
);
@@ -136,9 +137,7 @@ blocklyApp.BlockOptionsModalComponent = ng.core.Component({
],
focusOnOption: function(index) {
var button = document.getElementById(this.getOptionId(index));
if (button) {
button.focus();
}
button.focus();
},
// Returns the ID for the corresponding option button.
getOptionId: function(index) {

36
accessible/toolbox-modal.component.js
View File

@@ -34,14 +34,12 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({
<h3>Select a block...</h3>
<div *ngFor="#toolboxCategory of toolboxCategories; #categoryIndex=index">
<h4>{{toolboxCategory.categoryName}}</h4>
<h4 *ngIf="toolboxCategory.categoryName">{{toolboxCategory.categoryName}}</h4>
<div class="blocklyModalButtonContainer"
*ngFor="#block of toolboxCategory.blocks; #blockIndex=index">
<button [id]="getOptionId(getOverallIndex(categoryIndex, blockIndex))"
(click)="selectBlock(getBlock(categoryIndex, blockIndex))"
[ngClass]="{activeButton: activeButtonIndex == getOverallIndex(categoryIndex, blockIndex)}"
[attr.disabled]="isBlockAvailable(getBlock(categoryIndex, blockIndex)) ? undefined : 'disabled'"
[attr.aria-disabled]="!isBlockAvailable(getBlock(categoryIndex, blockIndex))">
[ngClass]="{activeButton: activeButtonIndex == getOverallIndex(categoryIndex, blockIndex)}">
{{getBlockDescription(block)}}
</button>
</div>
@@ -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) {

41
accessible/toolbox-modal.service.js
View File

@@ -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;