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

Fix extra category error. Clean up code, rename variables, reduce line lengths, fix lint issues.

Browse Source
This commit is contained in:
Sean Lip
2016-06-02 15:51:37 -07:00
parent 4e2d8f1310
commit e8a2d3e2fd
4 changed files with 100 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
accessible/toolboxview.component.js
View File

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