mirror of
https://github.com/google/blockly.git
synced 2026-01-12 11:27:14 +01:00
Fix extra category error. Clean up code, rename variables, reduce line lengths, fix lint issues.
This commit is contained in:
Sean Lip
@@ -29,51 +29,76 @@ blocklyApp.ToolboxTreeView = ng.core
|
||||
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">
|
||||
[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 [attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-block-menu', idMap['blockSummaryLabel'])" class="blocklyHasChildren" [id]="idMap['listItem']" *ngIf="displayBlockMenu" role="treeitem" aria-selected=false [attr.aria-level]="level+1">
|
||||
<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>
|
||||
(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>
|
||||
(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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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; }),
|
||||
|
||||
@@ -28,29 +28,41 @@ blocklyApp.ToolboxView = ng.core
|
||||
selector: 'toolbox-view',
|
||||
template: `
|
||||
<h3 #toolboxTitle id="blockly-toolbox-title">Toolbox</h3>
|
||||
<ol #tree id="blockly-toolbox-tree" role="group" class="blocklyTree"
|
||||
*ngIf="makeArray(sightedToolbox) && makeArray(sightedToolbox).length > 0"
|
||||
tabIndex="0" [attr.aria-labelledby]="toolboxTitle.id"
|
||||
<ol #tree
|
||||
id="blockly-toolbox-tree" role="group" class="blocklyTree"
|
||||
*ngIf="toolboxCategories && toolboxCategories.length > 0" tabIndex="0"
|
||||
[attr.aria-labelledby]="toolboxTitle.id"
|
||||
[attr.aria-activedescendant]="tree.getAttribute('aria-activedescendant') || tree.id + '-node0' "
|
||||
(keydown)="treeService.onKeypress($event, tree)">
|
||||
<li #parent [id]="idMap['Parent' + i]" role="treeitem"
|
||||
[ngClass]="{blocklyHasChildren: true,
|
||||
blocklyActiveDescendant: tree.getAttribute('aria-activedescendant') == idMap['Parent' + i]}"
|
||||
*ngIf="toolboxHasCategories" *ngFor="#category of makeArray(sightedToolbox); #i=index"
|
||||
aria-level="1" aria-selected=false>
|
||||
<!-- TODO(madeeha): There seems to be some bug in Angular that makes it
|
||||
access index=undefined in the ngFor loop. This causes it to throw an error once it reaches line
|
||||
44. To combat this, we have added the div at line 43. Talk to fraser@.-->
|
||||
<div *ngIf="category && category.attributes">
|
||||
<label [id]="idMap['Label' + i]" #name>{{category.attributes.name.value}}</label>
|
||||
{{labelCategory(name, i, tree)}}
|
||||
<ol role="group" *ngIf="getToolboxWorkspace(category).topBlocks_.length > 0">
|
||||
<toolbox-tree-view *ngFor="#block of getToolboxWorkspace(category).topBlocks_" [level]=2 [block]="block" [displayBlockMenu]="true" [clipboardService]="clipboardService"></toolbox-tree-view>
|
||||
</ol>
|
||||
</div>
|
||||
</li>
|
||||
<div *ngIf="!toolboxHasCategories">
|
||||
<toolbox-tree-view *ngFor="#block of getToolboxWorkspace(toolboxCategories[0]).topBlocks_; #i=index" [level]=1 [block]="block" [displayBlockMenu]="true" [clipboardService]="clipboardService" [index]="i" [tree]="tree" [noCategories]="true"></toolbox-tree-view>
|
||||
<template [ngIf]="xmlHasCategories">
|
||||
<li #parent
|
||||
[id]="idMap['Parent' + i]" role="treeitem"
|
||||
[ngClass]="{blocklyHasChildren: true, blocklyActiveDescendant: tree.getAttribute('aria-activedescendant') == idMap['Parent' + i]}"
|
||||
*ngFor="#category of toolboxCategories; #i=index"
|
||||
aria-level="1" aria-selected=false>
|
||||
<div *ngIf="category && category.attributes">
|
||||
<label [id]="idMap['Label' + i]" #name>
|
||||
{{category.attributes.name.value}}
|
||||
</label>
|
||||
{{labelCategory(name, i, tree)}}
|
||||
<ol role="group" *ngIf="getToolboxWorkspace(category).topBlocks_.length > 0">
|
||||
<toolbox-tree-view *ngFor="#block of getToolboxWorkspace(category).topBlocks_"
|
||||
[level]=2 [block]="block"
|
||||
[displayBlockMenu]="true"
|
||||
[clipboardService]="clipboardService">
|
||||
</toolbox-tree-view>
|
||||
</ol>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
<div *ngIf="!xmlHasCategories">
|
||||
<toolbox-tree-view *ngFor="#block of getToolboxWorkspace(toolboxCategories[0]).topBlocks_; #i=index"
|
||||
[level]=1 [block]="block"
|
||||
[displayBlockMenu]="true"
|
||||
[clipboardService]="clipboardService"
|
||||
[index]="i" [tree]="tree"
|
||||
[noCategories]="true">
|
||||
</toolbox-tree-view>
|
||||
</div>
|
||||
</ol>
|
||||
`,
|
||||
@@ -58,26 +70,36 @@ blocklyApp.ToolboxView = ng.core
|
||||
providers: [blocklyApp.TreeService, blocklyApp.UtilsService],
|
||||
})
|
||||
.Class({
|
||||
constructor: [blocklyApp.TreeService, blocklyApp.UtilsService, function(_treeService, _utilsService) {
|
||||
this.sightedToolbox = document.getElementById('blockly-toolbox-xml');
|
||||
|
||||
constructor: [
|
||||
blocklyApp.TreeService, blocklyApp.UtilsService,
|
||||
function(_treeService, _utilsService) {
|
||||
this.toolboxCategories = [];
|
||||
this.toolboxWorkspaces = Object.create(null);
|
||||
this.treeService = _treeService;
|
||||
this.utilsService = _utilsService;
|
||||
|
||||
this.toolboxHasCategories = false;
|
||||
this.xmlHasCategories = false;
|
||||
}],
|
||||
ngOnInit: function() {
|
||||
var elementsNeedingIds = [];
|
||||
var categories = this.makeArray(this.sightedToolbox);
|
||||
if (this.toolboxHasCategories) {
|
||||
for (var i = 0; i < categories.length; i++){
|
||||
elementsNeedingIds.push('Parent' + i);
|
||||
elementsNeedingIds.push('Label' + i);
|
||||
// Note that sometimes the toolbox may not have categories; it may
|
||||
// display individual blocks directly (which is often the case in,
|
||||
// e.g., Blockly Games).
|
||||
var xmlToolboxElt = document.getElementById('blockly-toolbox-xml');
|
||||
var xmlCategoryElts = xmlToolboxElt.getElementsByTagName('category');
|
||||
if (xmlCategoryElts.length) {
|
||||
this.xmlHasCategories = true;
|
||||
this.toolboxCategories = Array.from(xmlCategoryElts);
|
||||
|
||||
var elementsNeedingIds = [];
|
||||
for (var i = 0; i < this.toolboxCategories.length; i++) {
|
||||
elementsNeedingIds.push('Parent' + i, 'Label' + i);
|
||||
}
|
||||
this.idMap = this.utilsService.generateIds(elementsNeedingIds);
|
||||
this.idMap['Parent0'] = 'blockly-toolbox-tree-node0';
|
||||
} else {
|
||||
// Create a single category is created with all the top-level blocks.
|
||||
this.xmlHasCategories = false;
|
||||
this.toolboxCategories = [Array.from(xmlToolboxElt.children)];
|
||||
}
|
||||
},
|
||||
labelCategory: function(label, i, tree) {
|
||||
@@ -93,23 +115,6 @@ blocklyApp.ToolboxView = ng.core
|
||||
parent.setAttribute('aria-selected', 'true');
|
||||
}
|
||||
},
|
||||
makeArray: function(val) {
|
||||
if (val) {
|
||||
if (this.toolboxCategories.length) {
|
||||
return this.toolboxCategories;
|
||||
} else {
|
||||
var categories = val.getElementsByTagName('category');
|
||||
if (categories.length) {
|
||||
this.toolboxHasCategories = true;
|
||||
this.toolboxCategories = Array.from(categories);
|
||||
return this.toolboxCategories;
|
||||
}
|
||||
this.toolboxHasCategories = false;
|
||||
this.toolboxCategories = [Array.from(val.children)];
|
||||
return this.toolboxCategories;
|
||||
}
|
||||
}
|
||||
},
|
||||
getToolboxWorkspace: function(categoryNode) {
|
||||
if (categoryNode.attributes && categoryNode.attributes.name) {
|
||||
var categoryName = categoryNode.attributes.name.value;
|
||||
|
||||
@@ -109,7 +109,11 @@ blocklyApp.WorkspaceTreeView = ng.core
|
||||
</div>
|
||||
</ol>
|
||||
</li>
|
||||
<tree-view *ngIf= "block.nextConnection && block.nextConnection.targetBlock()" [block]="block.nextConnection.targetBlock()" [isTopBlock]="false" [level]="level"></tree-view>
|
||||
<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],
|
||||
|
||||
@@ -64,8 +64,8 @@ blocklyApp.WorkspaceView = ng.core
|
||||
// The first is the text to display on the button, and the second is the
|
||||
// function that gets run when the button is clicked.
|
||||
this.toolbarButtonConfig =
|
||||
ACCESSIBLE_GLOBALS && ACCESSIBLE_GLOBALS.toolbarButtonConfig ?
|
||||
ACCESSIBLE_GLOBALS.toolbarButtonConfig : [];
|
||||
ACCESSIBLE_GLOBALS && ACCESSIBLE_GLOBALS.toolbarButtonConfig ?
|
||||
ACCESSIBLE_GLOBALS.toolbarButtonConfig : [];
|
||||
this.stringMap = {
|
||||
'WORKSPACE': Blockly.Msg.WORKSPACE,
|
||||
'CLEAR_WORKSPACE': Blockly.Msg.CLEAR_WORKSPACE
|
||||
|
||||
Reference in New Issue
Block a user