mirror of
https://github.com/google/blockly.git
synced 2026-01-12 11:27:14 +01:00
Introduce a common translation pipe; remove local stringMap attributes. Fix variable name error in paste functions. Minor linting.
This commit is contained in:
Sean Lip
@@ -35,43 +35,31 @@ blocklyApp.AppView = ng.core
|
||||
<table>
|
||||
<tr>
|
||||
<td class="blocklyTable">
|
||||
<toolbox-view>{{stringMap['TOOLBOX_LOAD']}}</toolbox-view>
|
||||
<toolbox-view>{{'TOOLBOX_LOAD'|translate}}</toolbox-view>
|
||||
</td>
|
||||
<td class="blocklyTable">
|
||||
<workspace-view>{{stringMap['WORKSPACE_LOAD']}}</workspace-view>
|
||||
<workspace-view>{{'WORKSPACE_LOAD'|translate}}</workspace-view>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<label id="blockly-block-summary" aria-hidden="true" hidden>{{stringMap['BLOCK_SUMMARY']}}</label>
|
||||
<label id="blockly-block-menu" aria-hidden="true" hidden>{{stringMap['BLOCK_ACTION_LIST']}}</label>
|
||||
<label id="blockly-menu" aria-hidden="true" hidden>{{stringMap['OPTION_LIST']}}</label>
|
||||
<label id="blockly-argument-menu" aria-hidden="true" hidden>{{stringMap['ARGUMENT_OPTIONS_LIST']}}</label>
|
||||
<label id="blockly-argument-input" aria-hidden="true" hidden>{{stringMap['ARGUMENT_INPUT']}}</label>
|
||||
<label id="blockly-argument-block-menu" aria-hidden="true" hidden>{{stringMap['ARGUMENT_BLOCK_ACTION_LIST']}}</label>
|
||||
<label id="blockly-argument-text" aria-hidden="true" hidden>{{stringMap['TEXT']}}</label>
|
||||
<label id="blockly-button" aria-hidden="true" hidden>{{stringMap['BUTTON']}}</label>
|
||||
<label id="blockly-disabled" aria-hidden="true" hidden>{{stringMap['UNAVAILABLE']}}</label>
|
||||
|
||||
<label aria-hidden="true" hidden id="blockly-argument-block-menu">{{'ARGUMENT_BLOCK_ACTION_LIST'|translate}}</label>
|
||||
<label aria-hidden="true" hidden id="blockly-argument-input">{{'ARGUMENT_INPUT'|translate}}</label>
|
||||
<label aria-hidden="true" hidden id="blockly-argument-menu">{{'ARGUMENT_OPTIONS_LIST'|translate}}</label>
|
||||
<label aria-hidden="true" hidden id="blockly-argument-text">{{'TEXT'|translate}}</label>
|
||||
<label aria-hidden="true" hidden id="blockly-block-menu">{{'BLOCK_ACTION_LIST'|translate}}</label>
|
||||
<label aria-hidden="true" hidden id="blockly-block-summary">{{'BLOCK_SUMMARY'|translate}}</label>
|
||||
<label aria-hidden="true" hidden id="blockly-button">{{'BUTTON'|translate}}</label>
|
||||
<label aria-hidden="true" hidden id="blockly-disabled">{{'UNAVAILABLE'|translate}}</label>
|
||||
<label aria-hidden="true" hidden id="blockly-menu">{{'OPTION_LIST'|translate}}</label>
|
||||
`,
|
||||
directives: [blocklyApp.ToolboxView, blocklyApp.WorkspaceView],
|
||||
pipes: [blocklyApp.TranslatePipe],
|
||||
// ClipboardService declared here so that all components are using the same
|
||||
// instance of the clipboard.
|
||||
// https://www.sitepoint.com/angular-2-components-providers-classes-factories-values/
|
||||
providers: [blocklyApp.ClipboardService]
|
||||
})
|
||||
.Class({
|
||||
constructor: function() {
|
||||
this.stringMap = {
|
||||
['TOOLBOX_LOAD']: Blockly.Msg.TOOLBOX_LOAD_MSG,
|
||||
['WORKSPACE_LOAD']: Blockly.Msg.WORKSPACE_LOAD_MSG,
|
||||
['BLOCK_SUMMARY']: Blockly.Msg.BLOCK_SUMMARY,
|
||||
['BLOCK_ACTION_LIST']: Blockly.Msg.BLOCK_ACTION_LIST,
|
||||
['OPTION_LIST']: Blockly.Msg.OPTION_LIST,
|
||||
['ARGUMENT_OPTIONS_LIST']: Blockly.Msg.ARGUMENT_OPTIONS_LIST,
|
||||
['UNAVAILABLE']: Blockly.Msg.UNAVAILABLE,
|
||||
['BUTTON']: Blockly.Msg.BUTTON,
|
||||
['TEXT']: Blockly.Msg.TEXT,
|
||||
['ARGUMENT_BLOCK_ACTION_LIST']: Blockly.Msg.ARGUMENT_BLOCK_ACTION_LIST,
|
||||
['ARGUMENT_INPUT']: Blockly.Msg.ARGUMENT_INPUT
|
||||
};
|
||||
}
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
@@ -61,7 +61,9 @@ blocklyApp.ClipboardService = ng.core
|
||||
connection.connect(reconstitutedBlock.outputConnection);
|
||||
}
|
||||
blocklyApp.debug && console.log('paste');
|
||||
alert(Blockly.Msg.PASTED_BLOCK_FROM_CLIPBOARD_MSG + block.toString());
|
||||
alert(
|
||||
Blockly.Msg.PASTED_BLOCK_FROM_CLIPBOARD_MSG +
|
||||
reconstitutedBlock.toString());
|
||||
},
|
||||
pasteToMarkedConnection: function(block, announce) {
|
||||
var xml = Blockly.Xml.blockToDom(block);
|
||||
@@ -72,7 +74,9 @@ blocklyApp.ClipboardService = ng.core
|
||||
reconstitutedBlock.previousConnection);
|
||||
blocklyApp.debug && console.log('paste to marked connection');
|
||||
if (announce) {
|
||||
alert(Blockly.Msg.PASTED_BLOCK_TO_MARKED_SPOT_MSG + block.toString());
|
||||
alert(
|
||||
Blockly.Msg.PASTED_BLOCK_TO_MARKED_SPOT_MSG +
|
||||
reconstitutedBlock.toString());
|
||||
}
|
||||
},
|
||||
markConnection: function(connection) {
|
||||
|
||||
@@ -36,7 +36,7 @@ blocklyApp.FieldView = ng.core
|
||||
<li [id]="idMap['listItem']" *ngIf="isDropdown()"
|
||||
[attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-argument-menu', idMap['label'])"
|
||||
[attr.aria-level]="level" aria-selected=false role="treeitem">
|
||||
<label [id]="idMap['label']">{{stringMap['CURRENT_ARGUMENT_VALUE']}} {{field.getText()}}</label>
|
||||
<label [id]="idMap['label']">{{'CURRENT_ARGUMENT_VALUE'|translate}} {{field.getText()}}</label>
|
||||
<ol role="group" [attr.aria-level]="level+1">
|
||||
<li [id]="idMap[optionValue]" role="treeitem" *ngFor="#optionValue of getOptions()"
|
||||
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap[optionValue + 'Button'], 'blockly-button')"
|
||||
@@ -62,6 +62,7 @@ blocklyApp.FieldView = ng.core
|
||||
</li>
|
||||
`,
|
||||
inputs: ['field', 'level', 'index', 'parentId'],
|
||||
pipes: [blocklyApp.TranslatePipe],
|
||||
providers: [blocklyApp.TreeService, blocklyApp.UtilsService]
|
||||
})
|
||||
.Class({
|
||||
@@ -72,9 +73,6 @@ blocklyApp.FieldView = ng.core
|
||||
};
|
||||
this.treeService = _treeService;
|
||||
this.utilsService = _utilsService;
|
||||
this.stringMap = {
|
||||
'CURRENT_ARGUMENT_VALUE': Blockly.Msg.CURRENT_ARGUMENT_VALUE
|
||||
};
|
||||
}],
|
||||
ngOnInit: function() {
|
||||
var elementsNeedingIds = this.generateElementNames(this.field);
|
||||
|
||||
@@ -28,83 +28,84 @@ blocklyApp.ToolboxTreeView = ng.core
|
||||
.Component({
|
||||
selector: 'toolbox-tree-view',
|
||||
template: `
|
||||
<li #parentList [id]="idMap['parentList']" role="treeitem"
|
||||
[ngClass]="{blocklyHasChildren: displayBlockMenu || block.inputList.length > 0, blocklyActiveDescendant: index == 0 && noCategories}"
|
||||
[attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-block-summary', idMap['blockSummaryLabel'])"
|
||||
[attr.aria-selected]="index == 0 && tree.getAttribute('aria-activedescendant') == 'blockly-toolbox-tree-node0'"
|
||||
[attr.aria-level]="level">
|
||||
{{setActiveDesc(parentList)}}
|
||||
<label #blockSummaryLabel [id]="idMap['blockSummaryLabel']">{{block.toString()}}</label>
|
||||
<ol role="group" *ngIf="displayBlockMenu || block.inputList.length > 0"
|
||||
[attr.aria-level]="level+1">
|
||||
<li #listItem class="blocklyHasChildren" [id]="idMap['listItem']"
|
||||
[attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-block-menu', idMap['blockSummaryLabel'])"
|
||||
*ngIf="displayBlockMenu" role="treeitem"
|
||||
aria-selected=false [attr.aria-level]="level+1">
|
||||
<label #label [id]="idMap['label']">{{stringMap['BLOCK_ACTION_LIST']}}</label>
|
||||
<ol role="group" *ngIf="displayBlockMenu" [attr.aria-level]="level+2">
|
||||
<li #workspaceCopy [id]="idMap['workspaceCopy']" role="treeitem"
|
||||
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['workspaceCopyButton'], 'blockly-button')"
|
||||
[attr.aria-level]="level+2" aria-selected=false>
|
||||
<button #workspaceCopyButton [id]="idMap['workspaceCopyButton']"
|
||||
(click)="copyToWorkspace(block)">
|
||||
{{stringMap['COPY_TO_WORKSPACE']}}
|
||||
</button>
|
||||
</li>
|
||||
<li #blockCopy [id]="idMap['blockCopy']" role="treeitem"
|
||||
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['blockCopyButton'], 'blockly-button')"
|
||||
[attr.aria-level]="level+2" aria-selected=false>
|
||||
<button #blockCopyButton [id]="idMap['blockCopyButton']"
|
||||
(click)="clipboardService.copy(block, true)">
|
||||
{{stringMap['COPY_TO_CLIPBOARD']}}
|
||||
</button>
|
||||
</li>
|
||||
<li #sendToSelected [id]="idMap['sendToSelected']" role="treeitem"
|
||||
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['sendToSelectedButton'], 'blockly-button', utilsService.getMarkedBlockCompatibilityHTMLText(clipboardService.isBlockCompatibleWithMarkedConnection(block)))"
|
||||
[attr.aria-level]="level+2" aria-selected=false>
|
||||
<button #sendToSelectedButton
|
||||
[id]="idMap['sendToSelectedButton']"
|
||||
(click)="copyToMarked(block)"
|
||||
[disabled]="getMarkedBlockCompatibilityHTMLText(clipboardService.isBlockCompatibleWithMarkedConnection(block))">
|
||||
{{stringMap['COPY_TO_MARKED_SPOT']}}
|
||||
</button>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<div *ngFor="#inputBlock of block.inputList; #i=index">
|
||||
<field-view *ngFor="#field of inputBlock.fieldRow; #j=index"
|
||||
[attr.aria-level]="level+1" [field]="field"
|
||||
[level]="level+1">
|
||||
</field-view>
|
||||
<toolbox-tree-view *ngIf="inputBlock.connection && inputBlock.connection.targetBlock()"
|
||||
[block]="inputBlock.connection.targetBlock()"
|
||||
[displayBlockMenu]="false"
|
||||
[level]="level+1">
|
||||
</toolbox-tree-view>
|
||||
<li #listItem1 [id]="idMap['listItem' + i]" role="treeitem"
|
||||
*ngIf="inputBlock.connection && !inputBlock.connection.targetBlock()"
|
||||
[attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-argument-text', idMap['listItem' + i + 'Label'])"
|
||||
[attr.aria-level]="level+1" aria-selected=false>
|
||||
<!--TODO(madeeha): i18n here will need to happen in a different way due to the way grammar changes based on language.-->
|
||||
<label #label [id]="idMap['listItem' + i + 'Label']">
|
||||
{{utilsService.getInputTypeLabel(inputBlock.connection)}}
|
||||
{{utilsService.getBlockTypeLabel(inputBlock)}} needed:
|
||||
</label>
|
||||
<li #parentList [id]="idMap['parentList']" role="treeitem"
|
||||
[ngClass]="{blocklyHasChildren: displayBlockMenu || block.inputList.length > 0, blocklyActiveDescendant: index == 0 && noCategories}"
|
||||
[attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-block-summary', idMap['blockSummaryLabel'])"
|
||||
[attr.aria-selected]="index == 0 && tree.getAttribute('aria-activedescendant') == 'blockly-toolbox-tree-node0'"
|
||||
[attr.aria-level]="level">
|
||||
{{setActiveDesc(parentList)}}
|
||||
<label #blockSummaryLabel [id]="idMap['blockSummaryLabel']">{{block.toString()}}</label>
|
||||
<ol role="group" *ngIf="displayBlockMenu || block.inputList.length > 0"
|
||||
[attr.aria-level]="level+1">
|
||||
<li #listItem class="blocklyHasChildren" [id]="idMap['listItem']"
|
||||
[attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-block-menu', idMap['blockSummaryLabel'])"
|
||||
*ngIf="displayBlockMenu" role="treeitem"
|
||||
aria-selected=false [attr.aria-level]="level+1">
|
||||
<label #label [id]="idMap['label']">{{'BLOCK_ACTION_LIST'|translate}}</label>
|
||||
<ol role="group" *ngIf="displayBlockMenu" [attr.aria-level]="level+2">
|
||||
<li #workspaceCopy [id]="idMap['workspaceCopy']" role="treeitem"
|
||||
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['workspaceCopyButton'], 'blockly-button')"
|
||||
[attr.aria-level]="level+2" aria-selected=false>
|
||||
<button #workspaceCopyButton [id]="idMap['workspaceCopyButton']"
|
||||
(click)="copyToWorkspace(block)">
|
||||
{{'COPY_TO_WORKSPACE'|translate}}
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</ol>
|
||||
</li>
|
||||
<toolbox-tree-view *ngIf= "block.nextConnection && block.nextConnection.targetBlock()"
|
||||
[level]="level"
|
||||
[block]="block.nextConnection.targetBlock()"
|
||||
[displayBlockMenu]="false">
|
||||
</toolbox-tree-view>
|
||||
<li #blockCopy [id]="idMap['blockCopy']" role="treeitem"
|
||||
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['blockCopyButton'], 'blockly-button')"
|
||||
[attr.aria-level]="level+2" aria-selected=false>
|
||||
<button #blockCopyButton [id]="idMap['blockCopyButton']"
|
||||
(click)="clipboardService.copy(block, true)">
|
||||
{{'COPY_TO_CLIPBOARD'|translate}}
|
||||
</button>
|
||||
</li>
|
||||
<li #sendToSelected [id]="idMap['sendToSelected']" role="treeitem"
|
||||
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['sendToSelectedButton'], 'blockly-button', utilsService.getMarkedBlockCompatibilityHTMLText(clipboardService.isBlockCompatibleWithMarkedConnection(block)))"
|
||||
[attr.aria-level]="level+2" aria-selected=false>
|
||||
<button #sendToSelectedButton
|
||||
[id]="idMap['sendToSelectedButton']"
|
||||
(click)="copyToMarked(block)"
|
||||
[disabled]="getMarkedBlockCompatibilityHTMLText(clipboardService.isBlockCompatibleWithMarkedConnection(block))">
|
||||
{{'COPY_TO_MARKED_SPOT'|translate}}
|
||||
</button>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<div *ngFor="#inputBlock of block.inputList; #i=index">
|
||||
<field-view *ngFor="#field of inputBlock.fieldRow; #j=index"
|
||||
[attr.aria-level]="level+1" [field]="field"
|
||||
[level]="level+1">
|
||||
</field-view>
|
||||
<toolbox-tree-view *ngIf="inputBlock.connection && inputBlock.connection.targetBlock()"
|
||||
[block]="inputBlock.connection.targetBlock()"
|
||||
[displayBlockMenu]="false"
|
||||
[level]="level+1">
|
||||
</toolbox-tree-view>
|
||||
<li #listItem1 [id]="idMap['listItem' + i]" role="treeitem"
|
||||
*ngIf="inputBlock.connection && !inputBlock.connection.targetBlock()"
|
||||
[attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-argument-text', idMap['listItem' + i + 'Label'])"
|
||||
[attr.aria-level]="level+1" aria-selected=false>
|
||||
<!--TODO(madeeha): i18n here will need to happen in a different way due to the way grammar changes based on language.-->
|
||||
<label #label [id]="idMap['listItem' + i + 'Label']">
|
||||
{{utilsService.getInputTypeLabel(inputBlock.connection)}}
|
||||
{{utilsService.getBlockTypeLabel(inputBlock)}} needed:
|
||||
</label>
|
||||
</li>
|
||||
</div>
|
||||
</ol>
|
||||
</li>
|
||||
<toolbox-tree-view *ngIf= "block.nextConnection && block.nextConnection.targetBlock()"
|
||||
[level]="level"
|
||||
[block]="block.nextConnection.targetBlock()"
|
||||
[displayBlockMenu]="false">
|
||||
</toolbox-tree-view>
|
||||
`,
|
||||
directives: [ng.core.forwardRef(
|
||||
function() { return blocklyApp.ToolboxTreeView; }),
|
||||
blocklyApp.FieldView],
|
||||
inputs: ['block', 'displayBlockMenu', 'level', 'index', 'tree',
|
||||
'noCategories'],
|
||||
directives: [ng.core.forwardRef(function() {
|
||||
return blocklyApp.ToolboxTreeView;
|
||||
}), blocklyApp.FieldView],
|
||||
inputs: [
|
||||
'block', 'displayBlockMenu', 'level', 'index', 'tree', 'noCategories'],
|
||||
pipes: [blocklyApp.TranslatePipe],
|
||||
providers: [blocklyApp.TreeService, blocklyApp.UtilsService]
|
||||
})
|
||||
.Class({
|
||||
@@ -115,12 +116,6 @@ blocklyApp.ToolboxTreeView = ng.core
|
||||
this.clipboardService = _clipboardService;
|
||||
this.treeService = _treeService;
|
||||
this.utilsService = _utilsService;
|
||||
this.stringMap = {
|
||||
'BLOCK_ACTION_LIST': Blockly.Msg.BLOCK_ACTION_LIST,
|
||||
'COPY_TO_CLIPBOARD': Blockly.Msg.COPY_TO_CLIPBOARD,
|
||||
'COPY_TO_WORKSPACE': Blockly.Msg.COPY_TO_WORKSPACE,
|
||||
'COPY_TO_MARKED_SPOT': Blockly.Msg.COPY_TO_MARKED_SPOT
|
||||
};
|
||||
}],
|
||||
ngOnInit: function() {
|
||||
var elementsNeedingIds = ['blockSummaryLabel'];
|
||||
@@ -130,8 +125,7 @@ blocklyApp.ToolboxTreeView = ng.core
|
||||
'blockCopyButton', 'sendToSelected', 'sendToSelectedButton']);
|
||||
}
|
||||
for (var i = 0; i < this.block.inputList.length; i++){
|
||||
elementsNeedingIds.push('listItem' + i);
|
||||
elementsNeedingIds.push('listItem' + i + 'Label')
|
||||
elementsNeedingIds.push('listItem' + i, 'listItem' + i + 'Label')
|
||||
}
|
||||
this.idMap = this.utilsService.generateIds(elementsNeedingIds);
|
||||
if (this.index == 0 && this.noCategories) {
|
||||
@@ -145,8 +139,8 @@ blocklyApp.ToolboxTreeView = ng.core
|
||||
isCompatible);
|
||||
},
|
||||
generateAriaLabelledByAttr: function() {
|
||||
return this.utilsService.generateAriaLabelledByAttr.apply(this,
|
||||
arguments);
|
||||
return this.utilsService.generateAriaLabelledByAttr.apply(
|
||||
this, arguments);
|
||||
},
|
||||
setActiveDesc: function(parentList) {
|
||||
// If this is the first child of the toolbox and the
|
||||
|
||||
34
accessible/translate.pipe.js
Normal file
34
accessible/translate.pipe.js
Normal file
@@ -0,0 +1,34 @@
|
||||
/**
|
||||
* 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 Pipe for internationalizing Blockly message strings.
|
||||
* @author sll@google.com (Sean Lip)
|
||||
*/
|
||||
|
||||
blocklyApp.TranslatePipe = ng.core
|
||||
.Pipe({
|
||||
name: 'translate'
|
||||
})
|
||||
.Class({
|
||||
constructor: function() {},
|
||||
transform: function(messageId) {
|
||||
return Blockly.Msg[messageId];
|
||||
}
|
||||
});
|
||||
@@ -28,119 +28,109 @@ 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>
|
||||
<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']">{{'BLOCK_ACTION_LIST'|translate}}</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)">{{'CUT_BLOCK'|translate}}</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)">{{'COPY_BLOCK'|translate}}</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)">{{'PASTE_BELOW'|translate}}</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)">{{'PASTE_ABOVE'|translate}}</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)">{{'MARK_SPOT_BELOW'|translate}}</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)">{{'MARK_SPOT_ABOVE'|translate}}</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))">{{'MOVE_TO_MARKED_SPOT'|translate}}</button>
|
||||
</li>
|
||||
<li [id]="idMap['delete']" role="treeitem"
|
||||
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['deleteButton'], 'blockly-button')"
|
||||
[attr.aria-level]="level+2" aria-selected=false>
|
||||
<button [id]="idMap['deleteButton']" (click)="deleteBlock(block)">{{'DELETE'|translate}}</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['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 [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)">{{'MARK_THIS_SPOT'|translate}}</button>
|
||||
</li>
|
||||
<li [id]="idMap['copyListItem']" role="treeitem"
|
||||
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['copyButton'], 'blockly-button')"
|
||||
<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['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>
|
||||
<button [id]="idMap['pasteButton' + i]" (click)="clipboardService.pasteFromClipboard(inputBlock.connection)"
|
||||
[disabled]="clipboardService.getClipboardCompatibilityHTMLText(inputBlock.connection)">{{'PASTE'|translate}}</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>
|
||||
</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'],
|
||||
pipes: [blocklyApp.TranslatePipe],
|
||||
providers: [blocklyApp.TreeService, blocklyApp.UtilsService],
|
||||
})
|
||||
.Class({
|
||||
constructor: [blocklyApp.ClipboardService, blocklyApp.TreeService,
|
||||
blocklyApp.UtilsService,
|
||||
function(_clipboardService, _treeService, _utilsService) {
|
||||
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
|
||||
@@ -151,16 +141,17 @@ blocklyApp.WorkspaceTreeView = ng.core
|
||||
break;
|
||||
}
|
||||
}
|
||||
// If this is not the top block, we should change the active descendant of the tree.
|
||||
|
||||
// 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);
|
||||
return this.utilsService.generateAriaLabelledByAttr.apply(
|
||||
this, arguments);
|
||||
},
|
||||
ngOnInit: function() {
|
||||
var elementsNeedingIds = ['blockSummary', 'listItem', 'label',
|
||||
|
||||
@@ -26,30 +26,32 @@
|
||||
blocklyApp.WorkspaceView = ng.core
|
||||
.Component({
|
||||
selector: 'workspace-view',
|
||||
viewInjector: [blocklyApp.ClipboardService],
|
||||
template: `
|
||||
<label>
|
||||
<h3 #workspaceTitle id="blockly-workspace-title">{{stringMap['WORKSPACE']}}</h3>
|
||||
</label>
|
||||
<div id="blockly-workspace-toolbar" (keydown)="onWorkspaceToolbarKeypress($event, getActiveElementId())">
|
||||
<span *ngFor="#buttonConfig of toolbarButtonConfig">
|
||||
<button (click)='buttonConfig.action()' class='blocklyTree'>
|
||||
{{buttonConfig.text}}
|
||||
</button>
|
||||
</span>
|
||||
<button id='clear-workspace' (click)='workspace.clear()' disabled={{disableClearWorkspace()}}
|
||||
[attr.aria-disabled]='disableClearWorkspace()' class='blocklyTree'>{{stringMap['CLEAR_WORKSPACE']}}</button>
|
||||
</div>
|
||||
<div *ngIf="workspace">
|
||||
<ol #tree id={{makeId(i)}} *ngFor="#block of workspace.topBlocks_; #i=index"
|
||||
tabIndex="0" role="group" class="blocklyTree" [attr.aria-labelledby]="workspaceTitle.id"
|
||||
[attr.aria-activedescendant]="tree.getAttribute('aria-activedescendant') || tree.id + '-node0' "
|
||||
(keydown)="onKeypress($event, tree)">
|
||||
<tree-view [level]=1 [block]="block" [isTopBlock]="true" [topBlockIndex]="i" [parentId]="tree.id"></tree-view>
|
||||
</ol>
|
||||
</div>
|
||||
<label>
|
||||
<h3 #workspaceTitle id="blockly-workspace-title">{{'WORKSPACE'|translate}}</h3>
|
||||
</label>
|
||||
<div id="blockly-workspace-toolbar" (keydown)="onWorkspaceToolbarKeypress($event, getActiveElementId())">
|
||||
<span *ngFor="#buttonConfig of toolbarButtonConfig">
|
||||
<button (click)='buttonConfig.action()' class='blocklyTree'>
|
||||
{{buttonConfig.text}}
|
||||
</button>
|
||||
</span>
|
||||
<button id='clear-workspace' (click)='workspace.clear()' disabled={{disableClearWorkspace()}}
|
||||
[attr.aria-disabled]='disableClearWorkspace()' class='blocklyTree'>
|
||||
{{'CLEAR_WORKSPACE'|translate}}
|
||||
</button>
|
||||
</div>
|
||||
<div *ngIf="workspace">
|
||||
<ol #tree id={{makeId(i)}} *ngFor="#block of workspace.topBlocks_; #i=index"
|
||||
tabIndex="0" role="group" class="blocklyTree" [attr.aria-labelledby]="workspaceTitle.id"
|
||||
[attr.aria-activedescendant]="tree.getAttribute('aria-activedescendant') || tree.id + '-node0' "
|
||||
(keydown)="onKeypress($event, tree)">
|
||||
<tree-view [level]=1 [block]="block" [isTopBlock]="true" [topBlockIndex]="i" [parentId]="tree.id"></tree-view>
|
||||
</ol>
|
||||
</div>
|
||||
`,
|
||||
directives: [blocklyApp.WorkspaceTreeView],
|
||||
pipes: [blocklyApp.TranslatePipe],
|
||||
providers: [blocklyApp.TreeService]
|
||||
})
|
||||
.Class({
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
<script src="../../accessible/utils.service.js"></script>
|
||||
<script src="../../accessible/clipboard.service.js"></script>
|
||||
<script src="../../accessible/tree.service.js"></script>
|
||||
<script src="../../accessible/translate.pipe.js"></script>
|
||||
<script src="../../accessible/fieldview.component.js"></script>
|
||||
<script src="../../accessible/workspace_treeview.component.js"></script>
|
||||
<script src="../../accessible/toolbox_treeview.component.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user