mirror of
https://github.com/google/blockly.git
synced 2026-01-09 18:10:08 +01:00
229 lines
13 KiB
JavaScript
229 lines
13 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 Component that details how Blockly.Block's are
|
|
* rendered in the workspace in AccessibleBlockly. Also handles any
|
|
* interactions with the blocks.
|
|
* @author madeeha@google.com (Madeeha Ghori)
|
|
*/
|
|
|
|
blocklyApp.WorkspaceTreeView = ng.core
|
|
.Component({
|
|
selector: 'tree-view',
|
|
template: `
|
|
<li #parentList [id]="idMap['parentList']" role="treeitem" class="blocklyHasChildren"
|
|
[attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-block-summary', idMap['blockSummary'])"
|
|
[attr.aria-level]="level" aria-selected=false>
|
|
{{checkParentList(parentList)}}
|
|
<label [id]="idMap['blockSummary']">{{block.toString()}}</label>
|
|
<ol role="group" [attr.aria-level]="level+1">
|
|
<li [id]="idMap['listItem']" class="blocklyHasChildren" role="treeitem"
|
|
[attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-block-menu', idMap['blockSummary'])"
|
|
[attr.aria-level]="level+1" aria-selected=false>
|
|
<label [id]="idMap['label']">{{stringMap['BLOCK_ACTION_LIST']}}</label>
|
|
<ol role="group" [attr.aria-level]="level+2">
|
|
<li [id]="idMap['cutListItem']" role="treeitem"
|
|
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['cutButton'], 'blockly-button')"
|
|
[attr.aria-level]="level+2" aria-selected=false>
|
|
<button [id]="idMap['cutButton']" (click)="clipboardService.cut(block)">{{stringMap['CUT_BLOCK']}}</button>
|
|
</li>
|
|
<li [id]="idMap['copyListItem']" role="treeitem"
|
|
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['copyButton'], 'blockly-button')"
|
|
[attr.aria-level]="level+2" aria-selected=false>
|
|
<button [id]="idMap['copyButton']" (click)="clipboardService.copy(block, true)">{{stringMap['COPY_BLOCK']}}</button>
|
|
</li>
|
|
<li [id]="idMap['pasteBelow']" role="treeitem"
|
|
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['pasteBelowButton'], 'blockly-button', (getNoNextConnectionHTMLText(block)||clipboardService.getClipboardCompatibilityHTMLText(block.nextConnection)))"
|
|
[attr.aria-level]="level+2" aria-selected=false>
|
|
<button [id]="idMap['pasteBelowButton']" (click)="clipboardService.pasteFromClipboard(block.nextConnection)"
|
|
[disabled]="getNoNextConnectionHTMLText(block)" [disabled]="clipboardService.getClipboardCompatibilityHTMLText(block.nextConnection)">{{stringMap['PASTE_BELOW']}}</button>
|
|
</li>
|
|
<li [id]="idMap['pasteAbove']" role="treeitem"
|
|
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['pasteAboveButton'], 'blockly-button', (getNoPreviousConnectionHTMLText(block) || clipboardService.getClipboardCompatibilityHTMLText(block.previousConnection)))"
|
|
[attr.aria-level]="level+2" aria-selected=false>
|
|
<button [id]="idMap['pasteAboveButton']" (click)="clipboardService.pasteFromClipboard(block.previousConnection)"
|
|
[disabled]="getNoPreviousConnectionHTMLText(block)" [disabled]="clipboardService.getClipboardCompatibilityHTMLText(block.previousConnection)">{{stringMap['PASTE_ABOVE']}}</button>
|
|
</li>
|
|
<li [id]="idMap['markBelow']" role="treeitem"
|
|
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['markBelowButton'], 'blockly-button', getNoNextConnectionHTMLText(block))"
|
|
[attr.aria-level]="level+2" aria-selected=false>
|
|
<button [id]="idMap['markBelowButton']" (click)="clipboardService.markConnection(block.nextConnection)"
|
|
[disabled]="getNoNextConnectionHTMLText(block)">{{stringMap['MARK_SPOT_BELOW']}}</button>
|
|
</li>
|
|
<li [id]="idMap['markAbove']" role="treeitem"
|
|
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['markAboveButton'], 'blockly-button', getNoPreviousConnectionHTMLText(block))"
|
|
[attr.aria-level]="level+2" aria-selected=false>
|
|
<button [id]="idMap['markAboveButton']" (click)="clipboardService.markConnection(block.previousConnection)"
|
|
[disabled]="getNoPreviousConnectionHTMLText(block)">{{stringMap['MARK_SPOT_ABOVE']}}</button>
|
|
</li>
|
|
<li [id]="idMap['sendToSelectedListItem']" role="treeitem"
|
|
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['sendToSelectedButton'], 'blockly-button', utilsService.getMarkedBlockCompatibilityHTMLText(clipboardService.isBlockCompatibleWithMarkedConnection(block)))"
|
|
[attr.aria-level]="level+2" aria-selected=false>
|
|
<button [id]="idMap['sendToSelectedButton']" (click)="sendToSelected(block)"
|
|
[disabled]="getMarkedBlockCompatibilityHTMLText(clipboardService.isBlockCompatibleWithMarkedConnection(block))">{{stringMap['MOVE_TO_MARKED_SPOT']}}</button>
|
|
</li>
|
|
<li [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['deleteButton'], 'blockly-button')" [id]="idMap['delete']" role="treeitem" aria-selected=false [attr.aria-level]="level+2">
|
|
<button [id]="idMap['deleteButton']" (click)="deleteBlock(block)">{{stringMap['DELETE']}}</button>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
<div *ngFor="#inputBlock of block.inputList; #i = index">
|
|
<field-view *ngFor="#field of inputBlock.fieldRow" [field]="field"></field-view>
|
|
<tree-view *ngIf="inputBlock.connection && inputBlock.connection.targetBlock()" [block]="inputBlock.connection.targetBlock()" [isTopBlock]="false" [level]="level"></tree-view>
|
|
<li #inputList [attr.aria-level]="level + 1" [id]="idMap['inputList' + i]"
|
|
[attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-menu', idMap['inputMenuLabel' + i])"
|
|
*ngIf="inputBlock.connection && !inputBlock.connection.targetBlock()" (keydown)="treeService.onKeypress($event, tree)">
|
|
<!-- TODO(madeeha): i18n here will need to happen in a different way due to the way grammar changes based on language. -->
|
|
<label [id]="idMap['inputMenuLabel' + i]"> {{utilsService.getInputTypeLabel(inputBlock.connection)}} {{utilsService.getBlockTypeLabel(inputBlock)}} needed: </label>
|
|
<ol role="group" [attr.aria-level]="level+2">
|
|
<li [id]="idMap['markSpot' + i]" role="treeitem"
|
|
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['markButton' + i], 'blockly-button')"
|
|
[attr.aria-level]="level + 2" aria-selected=false>
|
|
<button [id]="idMap['markSpotButton + i']" (click)="clipboardService.markConnection(inputBlock.connection)">{{stringMap['MARK_THIS_SPOT']}}</button>
|
|
</li>
|
|
<li [id]="idMap['paste' + i]" role="treeitem"
|
|
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['pasteButton' + i], 'blockly-button', clipboardService.getClipboardCompatibilityHTMLText(inputBlock.connection))"
|
|
[attr.aria-level]="level+2" aria-selected=false>
|
|
<button [id]="idMap['pasteButton' + i]" (click)="clipboardService.pasteFromClipboard(inputBlock.connection)"
|
|
[disabled]="clipboardService.getClipboardCompatibilityHTMLText(inputBlock.connection)">{{stringMap['PASTE']}}</button>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
</div>
|
|
</ol>
|
|
</li>
|
|
<tree-view *ngIf= "block.nextConnection && block.nextConnection.targetBlock()"
|
|
[block]="block.nextConnection.targetBlock()"
|
|
[isTopBlock]="false"
|
|
[level]="level">
|
|
</tree-view>
|
|
`,
|
|
directives: [ng.core.forwardRef(
|
|
function() { return blocklyApp.WorkspaceTreeView; }), blocklyApp.FieldView],
|
|
inputs: ['block', 'isTopBlock', 'topBlockIndex', 'level', 'parentId'],
|
|
providers: [blocklyApp.TreeService, blocklyApp.UtilsService],
|
|
})
|
|
.Class({
|
|
constructor: [blocklyApp.ClipboardService, blocklyApp.TreeService,
|
|
blocklyApp.UtilsService,
|
|
function(_clipboardService, _treeService, _utilsService) {
|
|
this.infoBlocks = Object.create(null);
|
|
this.clipboardService = _clipboardService;
|
|
this.treeService = _treeService;
|
|
this.utilsService = _utilsService;
|
|
this.stringMap = {
|
|
'BLOCK_ACTION_LIST': Blockly.Msg.BLOCK_ACTION_LIST,
|
|
'PASTE': Blockly.Msg.PASTE,
|
|
'PASTE_ABOVE': Blockly.Msg.PASTE_ABOVE,
|
|
'PASTE_BELOW': Blockly.Msg.PASTE_BELOW,
|
|
'MARK_THIS_SPOT': Blockly.Msg.MARK_THIS_SPOT,
|
|
'MARK_SPOT_ABOVE': Blockly.Msg.MARK_SPOT_ABOVE,
|
|
'MARK_SPOT_BELOW': Blockly.Msg.MARK_SPOT_BELOW,
|
|
'CUT_BLOCK': Blockly.Msg.CUT_BLOCK,
|
|
'COPY_BLOCK': Blockly.Msg.COPY_BLOCK,
|
|
'MOVE_TO_MARKED_SPOT': Blockly.Msg.MOVE_TO_MARKED_SPOT,
|
|
'DELETE': Blockly.Msg.DELETE
|
|
};
|
|
}],
|
|
deleteBlock: function(block) {
|
|
// If this is the top block, we should shift focus to the previous tree
|
|
var topBlocks = blocklyApp.workspace.topBlocks_;
|
|
for (var i = 0; i < topBlocks.length; i++) {
|
|
if (topBlocks[i].id == block.id) {
|
|
this.treeService.goToPreviousTree(this.parentId);
|
|
break;
|
|
}
|
|
}
|
|
// If this is not the top block, we should change the active descendant of the tree.
|
|
|
|
block.dispose(true);
|
|
},
|
|
getMarkedBlockCompatibilityHTMLText: function(isCompatible) {
|
|
return this.utilsService.getMarkedBlockCompatibilityHTMLText(isCompatible);
|
|
},
|
|
generateAriaLabelledByAttr: function() {
|
|
return this.utilsService.generateAriaLabelledByAttr.apply(this,
|
|
arguments);
|
|
},
|
|
ngOnInit: function() {
|
|
var elementsNeedingIds = ['blockSummary', 'listItem', 'label',
|
|
'cutListItem', 'cutButton', 'copyListItem', 'copyButton',
|
|
'pasteBelow', 'pasteBelowButton', 'pasteAbove', 'pasteAboveButton',
|
|
'markBelow', 'markBelowButton', 'markAbove', 'markAboveButton',
|
|
'sendToSelectedListItem', 'sendToSelectedButton', 'delete',
|
|
'deleteButton'];
|
|
for (var i = 0; i < this.block.inputList.length; i++) {
|
|
var inputBlock = this.block.inputList[i];
|
|
if (inputBlock.connection && !inputBlock.connection.targetBlock()) {
|
|
elementsNeedingIds = elementsNeedingIds.concat(
|
|
['inputList' + i, 'inputMenuLabel' + i, 'markSpot' + i,
|
|
'markSpotButton' + i, 'paste' + i, 'pasteButton' + i]);
|
|
}
|
|
}
|
|
this.idMap = this.utilsService.generateIds(elementsNeedingIds);
|
|
this.idMap['parentList'] = this.generateParentListId();
|
|
},
|
|
generateParentListId: function() {
|
|
if (this.isTopBlock) {
|
|
return this.parentId + '-node0'
|
|
} else {
|
|
return this.utilsService.generateUniqueId();
|
|
}
|
|
},
|
|
getNoPreviousConnectionHTMLText: function(block) {
|
|
if (!block.previousConnection) {
|
|
return 'blockly-disabled';
|
|
} else {
|
|
return '';
|
|
}
|
|
},
|
|
getNoNextConnectionHTMLText: function(block) {
|
|
if (!block.nextConnection) {
|
|
return 'blockly-disabled';
|
|
} else {
|
|
return '';
|
|
}
|
|
},
|
|
checkParentList: function(parentList) {
|
|
blocklyApp.debug && console.log('setting parent list');
|
|
var tree = parentList;
|
|
var regex = /^blockly-workspace-tree\d+$/;
|
|
while (tree && !tree.id.match(regex)) {
|
|
tree = tree.parentNode;
|
|
}
|
|
if (tree && tree.getAttribute('aria-activedescendant') == parentList.id) {
|
|
this.treeService.updateSelectedNode(parentList, tree, false);
|
|
}
|
|
},
|
|
setId: function(block) {
|
|
if (this.isTopBlock) {
|
|
return this.parentId + '-node0';
|
|
}
|
|
return this.treeService.createId(block);
|
|
},
|
|
sendToSelected: function(block) {
|
|
if (this.clipboardService) {
|
|
this.clipboardService.pasteToMarkedConnection(block, false);
|
|
block.dispose(true);
|
|
alert('Block moved to marked spot: ' + block.toString());
|
|
}
|
|
}
|
|
});
|