123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 |
- blocklyApp.ToolboxComponent = ng.core
- .Component({
- selector: 'blockly-toolbox',
- template: `
- <h3 #toolboxTitle id="blockly-toolbox-title">Toolbox</h3>
- <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)">
- <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
- [attr.aria-label]="category.attributes.name.value">
- <div *ngIf="category && category.attributes">
- <label [id]="idMap['Label' + i]" #name>
- {{category.attributes.name.value}}
- </label>
- <ol role="group" *ngIf="getToolboxWorkspace(category).topBlocks_.length > 0">
- <blockly-toolbox-tree *ngFor="#block of getToolboxWorkspace(category).topBlocks_"
- [level]=2 [block]="block"
- [displayBlockMenu]="true"
- [tree]="tree">
- </blockly-toolbox-tree>
- </ol>
- </div>
- </li>
- </template>
- <div *ngIf="!xmlHasCategories">
- <blockly-toolbox-tree *ngFor="#block of getToolboxWorkspace(toolboxCategories[0]).topBlocks_; #i=index"
- [level]=1 [block]="block"
- [displayBlockMenu]="true"
- [index]="i" [tree]="tree"
- [noCategories]="true"
- [isTopLevel]="true">
- </blockly-toolbox-tree>
- </div>
- </ol>
- `,
- directives: [blocklyApp.ToolboxTreeComponent]
- })
- .Class({
- constructor: [
- blocklyApp.TreeService, blocklyApp.UtilsService,
- function(_treeService, _utilsService) {
- this.toolboxCategories = [];
- this.toolboxWorkspaces = Object.create(null);
- this.treeService = _treeService;
- this.utilsService = _utilsService;
- this.xmlHasCategories = false;
- }],
- ngOnInit: function() {
-
-
-
- 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);
- for (var i = 0; i < this.toolboxCategories.length; i++) {
- this.idMap['Parent' + i] = 'blockly-toolbox-tree-node' + i;
- }
- } else {
-
- this.xmlHasCategories = false;
- this.toolboxCategories = [Array.from(xmlToolboxElt.children)];
- }
- },
- ngAfterViewInit: function() {
-
-
- if (this.xmlHasCategories) {
- this.treeService.setActiveDesc(
- 'blockly-toolbox-tree-node0', 'blockly-toolbox-tree');
- }
- },
- getToolboxWorkspace: function(categoryNode) {
- if (categoryNode.attributes && categoryNode.attributes.name) {
- var categoryName = categoryNode.attributes.name.value;
- } else {
- var categoryName = 'no-category';
- }
- if (this.toolboxWorkspaces[categoryName]) {
- return this.toolboxWorkspaces[categoryName];
- } else {
- var categoryWorkspace = new Blockly.Workspace();
- if (categoryName == 'no-category') {
- for (var i = 0; i < categoryNode.length; i++) {
- Blockly.Xml.domToBlock(categoryWorkspace, categoryNode[i]);
- }
- } else {
- Blockly.Xml.domToWorkspace(categoryNode, categoryWorkspace);
- }
- this.toolboxWorkspaces[categoryName] = categoryWorkspace;
- return this.toolboxWorkspaces[categoryName];
- }
- }
- });
|