blockly/accessible/workspace-block.component.js

/**
 * 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 representing a Blockly.Block in the
 * workspace.
 * @author madeeha@google.com (Madeeha Ghori)
 */

goog.provide('blocklyApp.WorkspaceBlockComponent');

goog.require('blocklyApp.UtilsService');

goog.require('blocklyApp.AudioService');
goog.require('blocklyApp.BlockConnectionService');
goog.require('blocklyApp.FieldSegmentComponent');
goog.require('blocklyApp.TranslatePipe');
goog.require('blocklyApp.TreeService');


blocklyApp.WorkspaceBlockComponent = ng.core.Component({
  selector: 'blockly-workspace-block',
  template: `
    <li [id]="componentIds.blockRoot" role="treeitem"
        [attr.aria-labelledBy]="generateAriaLabelledByAttr(componentIds.blockSummary, 'blockly-translate-workspace-block')"
        [attr.aria-level]="level">
      <label #blockSummaryLabel [id]="componentIds.blockSummary">{{getBlockDescription()}}</label>

      <ol role="group">
        <template ngFor #blockInput [ngForOf]="block.inputList" #i="index">
          <li [id]="componentIds.inputs[i].inputLi" role="treeitem"
              *ngIf="blockInput.fieldRow.length"
              [attr.aria-labelledBy]="generateAriaLabelledByAttr(componentIds.inputs[i].fieldLabel)"
              [attr.aria-level]="level + 1">
            <blockly-field-segment *ngFor="#fieldSegment of inputListAsFieldSegments[i]"
                                   [prefixFields]="fieldSegment.prefixFields"
                                   [mainField]="fieldSegment.mainField"
                                   [mainFieldId]="componentIds.inputs[i].fieldLabel"
                                   [level]="level + 2">
            </blockly-field-segment>
          </li>

          <template [ngIf]="blockInput.connection">
            <blockly-workspace-block *ngIf="blockInput.connection.targetBlock()"
                                     [block]="blockInput.connection.targetBlock()"
                                     [level]="level + 1"
                                     [tree]="tree">
            </blockly-workspace-block>
            <li [id]="componentIds.inputs[i].actionButtonLi" role="treeitem"
                *ngIf="!blockInput.connection.targetBlock()"
                [attr.aria-labelledBy]="generateAriaLabelledByAttr(componentIds.inputs[i].buttonLabel)"
                [attr.aria-level]="level + 1">
              <label [id]="componentIds.inputs[i].label">
                {{getBlockNeededLabel(blockInput)}}
              </label>
              <button [id]="componentIds.inputs[i].actionButton"
                      (click)="addInteriorLink(blockInput.connection)"
                      tabindex="-1">
                {{'MARK_THIS_SPOT'|translate}}
              </button>
            </li>
          </template>
        </template>
      </ol>
    </li>

    <blockly-workspace-block *ngIf= "block.nextConnection && block.nextConnection.targetBlock()"
                             [block]="block.nextConnection.targetBlock()"
                             [level]="level" [tree]="tree">
    </blockly-workspace-block>
  `,
  directives: [blocklyApp.FieldSegmentComponent, ng.core.forwardRef(function() {
    return blocklyApp.WorkspaceBlockComponent;
  })],
  inputs: ['block', 'level', 'tree'],
  pipes: [blocklyApp.TranslatePipe]
})
.Class({
  constructor: [
    blocklyApp.AudioService,
    blocklyApp.BlockConnectionService,
    blocklyApp.TreeService,
    blocklyApp.UtilsService,
    function(audioService, blockConnectionService, treeService, utilsService) {
      this.audioService = audioService;
      this.blockConnectionService = blockConnectionService;
      this.treeService = treeService;
      this.utilsService = utilsService;
      this.cachedBlockId = null;
    }
  ],
  ngDoCheck: function() {
    // The block ID can change if, for example, a block is spliced between two
    // linked blocks. We need to refresh the fields and component IDs when this
    // happens.
    if (this.cachedBlockId != this.block.id) {
      this.cachedBlockId = this.block.id;

      var SUPPORTED_FIELDS = [Blockly.FieldTextInput, Blockly.FieldDropdown];
      this.inputListAsFieldSegments = this.block.inputList.map(function(input) {
        // Converts the input list to an array of field segments. Each field
        // segment represents a user-editable field, prefixed by an arbitrary
        // number of non-editable fields.
        var fieldSegments = [];

        var bufferedFields = [];
        input.fieldRow.forEach(function(field) {
          var fieldIsSupported = SUPPORTED_FIELDS.some(function(fieldType) {
            return (field instanceof fieldType);
          });

          if (fieldIsSupported) {
            var fieldSegment = {
              prefixFields: [],
              mainField: field
            };
            bufferedFields.forEach(function(bufferedField) {
              fieldSegment.prefixFields.push(bufferedField);
            });
            fieldSegments.push(fieldSegment);
            bufferedFields = [];
          } else {
            bufferedFields.push(field);
          }
        });

        // Handle leftover text at the end.
        if (bufferedFields.length) {
          fieldSegments.push({
            prefixFields: bufferedFields,
            mainField: null
          });
        }

        return fieldSegments;
      });

      // Generate unique IDs for elements in this component.
      this.componentIds = {};
      this.componentIds.blockRoot =
          this.block.id + blocklyApp.BLOCK_ROOT_ID_SUFFIX;
      this.componentIds.blockSummary = this.block.id + '-blockSummary';

      var that = this;
      this.componentIds.inputs = this.block.inputList.map(function(input, i) {
        var idsToGenerate = ['inputLi', 'fieldLabel'];
        if (input.connection && !input.connection.targetBlock()) {
          idsToGenerate.push('actionButtonLi', 'actionButton', 'buttonLabel');
        }

        var inputIds = {};
        idsToGenerate.forEach(function(idBaseString) {
          inputIds[idBaseString] = [that.block.id, i, idBaseString].join('-');
        });

        return inputIds;
      });
    }
  },
  ngAfterViewInit: function() {
    // If this is a top-level tree in the workspace, ensure that it has an
    // active descendant. (Note that a timeout is needed here in order to
    // trigger Angular change detection.)
    var that = this;
    setTimeout(function() {
      if (that.level === 0 && !that.treeService.getActiveDescId(that.tree.id)) {
        that.treeService.setActiveDesc(
            that.componentIds.blockRoot, that.tree.id);
      }
    });
  },
  addInteriorLink: function(connection) {
    this.blockConnectionService.markConnection(connection);
  },
  getBlockDescription: function() {
    var blockDescription = this.utilsService.getBlockDescription(this.block);

    var parentBlock = this.block.getSurroundParent();
    if (parentBlock) {
      var fullDescription = blockDescription + ' inside ' +
          this.utilsService.getBlockDescription(parentBlock);
      return fullDescription;
    } else {
      return blockDescription;
    }
  },
  getBlockNeededLabel: function(blockInput) {
    // The input type name, or 'any' if any official input type qualifies.
    var inputTypeLabel = (
        blockInput.connection.check_ ?
        blockInput.connection.check_.join(', ') : Blockly.Msg.ANY);
    var blockTypeLabel = (
        blockInput.type == Blockly.NEXT_STATEMENT ?
        Blockly.Msg.BLOCK : Blockly.Msg.VALUE);
    return inputTypeLabel + ' ' + blockTypeLabel + ' needed:';
  },
  generateAriaLabelledByAttr: function(mainLabel, secondLabel) {
    return mainLabel + (secondLabel ? ' ' + secondLabel : '');
  }
});