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

Do not show disabled actions in the block options modal.

Browse Source
This commit is contained in:
Sean Lip
2016-11-28 16:01:15 -08:00
parent 36b0213533
commit 3b24391768
2 changed files with 65 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -36,7 +36,6 @@ blocklyApp.BlockOptionsModalComponent = ng.core.Component({
<div class="blocklyModalButtonContainer"
*ngFor="#buttonInfo of actionButtonsInfo; #i=index">
<button [id]="getOptionId(i)" (click)="buttonInfo.action(); hideModal();"
[disabled]="buttonInfo.isDisabled()"
[ngClass]="{activeButton: activeActionButtonIndex == i}">
{{buttonInfo.translationIdForText|translate}}
</button>
@@ -86,12 +85,6 @@ blocklyApp.BlockOptionsModalComponent = ng.core.Component({
'13': function(evt) {
var button = document.getElementById(
that.getOptionId(that.activeActionButtonIndex));
if (button.disabled) {
evt.preventDefault();
evt.stopPropagation();
return;
}
if (that.activeActionButtonIndex <
that.actionButtonsInfo.length) {
that.actionButtonsInfo[that.activeActionButtonIndex].action();
@@ -108,24 +101,26 @@ blocklyApp.BlockOptionsModalComponent = ng.core.Component({
},
// Up key: navigates to the previous item in the list.
'38': function(evt) {
// Prevent the page from scrolling.
evt.preventDefault();
if (that.activeActionButtonIndex == 0) {
that.audioService.playOopsSound();
} else {
that.activeActionButtonIndex--;
that.focusOnOption(that.activeActionButtonIndex);
}
that.focusOnOptionIfPossible(that.activeActionButtonIndex);
},
// Down key: navigates to the next item in the list.
'40': function(evt) {
// Prevent the page from scrolling.
evt.preventDefault();
if (that.activeActionButtonIndex ==
that.actionButtonsInfo.length) {
that.audioService.playOopsSound();
} else {
that.activeActionButtonIndex++;
that.focusOnOption(that.activeActionButtonIndex);
}
that.focusOnOptionIfPossible(that.activeActionButtonIndex);
}
});
@@ -136,14 +131,10 @@ blocklyApp.BlockOptionsModalComponent = ng.core.Component({
);
}
],
// Focuses on the button represented by the given index, if the button
// is not disabled. Otherwise, removes any existing focus.
focusOnOptionIfPossible: function(index) {
focusOnOption: function(index) {
var button = document.getElementById(this.getOptionId(index));
if (!button.disabled) {
if (button) {
button.focus();
} else {
document.activeElement.blur();
}
},
// Returns the ID for the corresponding option button.

117
accessible/tree.service.js
View File

@@ -308,65 +308,69 @@ blocklyApp.TreeService = ng.core.Class({
},
showBlockOptionsModal: function(block, blockRootNode) {
var that = this;
var actionButtonsInfo = [{
translationIdForText: 'MARK_SPOT_BEFORE',
action: function() {
that.clipboardService.markConnection(block.previousConnection);
that.focusOnBlock(block.id);
},
isDisabled: function() {
return !block.previousConnection;
}
}, {
action: function() {
that.clipboardService.markConnection(block.nextConnection);
that.focusOnBlock(block.id);
},
translationIdForText: 'MARK_SPOT_AFTER',
isDisabled: function() {
return !block.nextConnection;
}
}, {
action: function() {
var blockDescription = that.utilsService.getBlockDescription(
block);
var oldDestinationTreeId = that.getTreeIdForBlock(
that.clipboardService.getMarkedConnectionBlock().id);
that.clearActiveDesc(oldDestinationTreeId);
var actionButtonsInfo = [];
var newBlockId = that.clipboardService.pasteToMarkedConnection(
if (block.previousConnection) {
actionButtonsInfo.push({
action: function() {
that.clipboardService.markConnection(block.previousConnection);
that.focusOnBlock(block.id);
},
translationIdForText: 'MARK_SPOT_BEFORE'
});
}
if (block.nextConnection) {
actionButtonsInfo.push({
action: function() {
that.clipboardService.markConnection(block.nextConnection);
that.focusOnBlock(block.id);
},
translationIdForText: 'MARK_SPOT_AFTER'
});
}
if (this.clipboardService.isMovableToMarkedConnection(block)) {
actionButtonsInfo.push({
action: function() {
var blockDescription = that.utilsService.getBlockDescription(
block);
var oldDestinationTreeId = that.getTreeIdForBlock(
that.clipboardService.getMarkedConnectionBlock().id);
that.clearActiveDesc(oldDestinationTreeId);
that.removeBlockAndSetFocus(block, blockRootNode, function() {
block.dispose(true);
});
var newBlockId = that.clipboardService.pasteToMarkedConnection(
block);
// Invoke a digest cycle, so that the DOM settles.
setTimeout(function() {
that.focusOnBlock(newBlockId);
that.removeBlockAndSetFocus(block, blockRootNode, function() {
block.dispose(true);
});
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);
}
// Invoke a digest cycle, so that the DOM settles.
setTimeout(function() {
that.focusOnBlock(newBlockId);
that.notificationsService.setStatusMessage(
blockDescription + ' ' +
Blockly.Msg.PASTED_BLOCK_TO_MARKED_SPOT_MSG +
'. Now on moved block in workspace.');
});
},
translationIdForText: 'MOVE_TO_MARKED_SPOT',
isDisabled: function() {
return !that.clipboardService.isMovableToMarkedConnection(
block);
}
}, {
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.setStatusMessage(
blockDescription + ' ' +
Blockly.Msg.PASTED_BLOCK_TO_MARKED_SPOT_MSG +
'. Now on moved block in workspace.');
});
},
translationIdForText: 'MOVE_TO_MARKED_SPOT'
});
}
actionButtonsInfo.push({
action: function() {
var blockDescription = that.utilsService.getBlockDescription(block);
@@ -385,11 +389,8 @@ blocklyApp.TreeService = ng.core.Class({
}
});
},
translationIdForText: 'DELETE',
isDisabled: function() {
return false;
}
}];
translationIdForText: 'DELETE'
});
this.blockOptionsModalService.showModal(actionButtonsInfo, function() {
that.focusOnBlock(block.id);