Standardize naming of components.

2026-01-07 00:50:27 +01:00 · 2016-06-10 19:22:14 -07:00
parent cafd180228
commit b75d3f7327
7 changed files with 69 additions and 60 deletions
--- a/accessible/appview.component.js
+++ b/accessible/appview.component.js
@@ -35,10 +35,10 @@ blocklyApp.AppView = ng.core
    <table>
      <tr>
        <td class="blocklyTable">
-          <toolbox-view>{{'TOOLBOX_LOAD'|translate}}</toolbox-view>
+          <blockly-toolbox>{{'TOOLBOX_LOAD'|translate}}</blockly-toolbox>
        </td>
        <td class="blocklyTable">
-          <workspace-view>{{'WORKSPACE_LOAD'|translate}}</workspace-view>
+          <blockly-workspace>{{'WORKSPACE_LOAD'|translate}}</blockly-workspace>
        </td>
      </tr>
    </table>
@@ -53,7 +53,7 @@ blocklyApp.AppView = ng.core
    <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],
+    directives: [blocklyApp.ToolboxComponent, blocklyApp.WorkspaceComponent],
    pipes: [blocklyApp.TranslatePipe],
    // The clipboard and utils services are declared here, so that all
    // components in the application use the same instance of the service.
--- a/accessible/fieldview.component.js
+++ b/accessible/fieldview.component.js
@@ -24,9 +24,9 @@
 * @author madeeha@google.com (Madeeha Ghori)
 */

-blocklyApp.FieldView = ng.core
+blocklyApp.FieldComponent = ng.core
  .Component({
-    selector: 'field-view',
+    selector: 'blockly-field',
    template: `
    <li [id]="idMap['listItem']" role="treeitem" *ngIf="isTextInput()"
        [attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-argument-input', idMap['input'])"
--- a/accessible/toolbox_treeview.component.js
+++ b/accessible/toolbox_treeview.component.js
@@ -24,9 +24,9 @@
 * @author madeeha@google.com (Madeeha Ghori)
 */

-blocklyApp.ToolboxTreeView = ng.core
+blocklyApp.ToolboxTreeComponent = ng.core
  .Component({
-    selector: 'toolbox-tree-view',
+    selector: 'blockly-toolbox-tree',
    template: `
    <li #parentList [id]="idMap['parentList']" role="treeitem"
        [ngClass]="{blocklyHasChildren: displayBlockMenu || block.inputList.length > 0, blocklyActiveDescendant: index == 0 && noCategories}"
@@ -71,15 +71,15 @@ blocklyApp.ToolboxTreeView = ng.core
          </ol>
        </li>
        <div *ngFor="#inputBlock of block.inputList; #i=index">
-          <field-view *ngFor="#field of inputBlock.fieldRow; #j=index"
+          <blockly-field *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>
+          </blockly-field>
+          <blockly-toolbox-tree *ngIf="inputBlock.connection && inputBlock.connection.targetBlock()"
+                                [block]="inputBlock.connection.targetBlock()"
+                                [displayBlockMenu]="false"
+                                [level]="level+1">
+          </blockly-toolbox-tree>
          <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'])"
@@ -93,15 +93,15 @@ blocklyApp.ToolboxTreeView = ng.core
        </div>
      </ol>
    </li>
-    <toolbox-tree-view *ngIf= "block.nextConnection && block.nextConnection.targetBlock()"
-                       [level]="level"
-                       [block]="block.nextConnection.targetBlock()"
-                       [displayBlockMenu]="false">
-    </toolbox-tree-view>
+    <blockly-toolbox-tree *ngIf= "block.nextConnection && block.nextConnection.targetBlock()"
+                          [level]="level"
+                          [block]="block.nextConnection.targetBlock()"
+                          [displayBlockMenu]="false">
+    </blockly-toolbox-tree>
    `,
-    directives: [ng.core.forwardRef(function() {
-      return blocklyApp.ToolboxTreeView;
-    }), blocklyApp.FieldView],
+    directives: [blocklyApp.FieldComponent, ng.core.forwardRef(function() {
+      return blocklyApp.ToolboxTreeComponent;
+    })],
    inputs: [
        'block', 'displayBlockMenu', 'level', 'index', 'tree', 'noCategories'],
    pipes: [blocklyApp.TranslatePipe]
@@ -111,7 +111,7 @@ blocklyApp.ToolboxTreeView = ng.core
        blocklyApp.ClipboardService, blocklyApp.TreeService, blocklyApp.UtilsService,
        function(_clipboardService, _treeService, _utilsService) {
      // ClipboardService and UtilsService are app-wide singleton services.
-      // TreeService is from the parent ToolboxView component.
+      // TreeService is from the parent ToolboxComponent.
      this.infoBlocks = Object.create(null);
      this.clipboardService = _clipboardService;
      this.treeService = _treeService;
--- a/accessible/toolboxview.component.js
+++ b/accessible/toolboxview.component.js
@@ -23,9 +23,9 @@
 * @author madeeha@google.com (Madeeha Ghori)
 */

-blocklyApp.ToolboxView = ng.core
+blocklyApp.ToolboxComponent = ng.core
  .Component({
-    selector: 'toolbox-view',
+    selector: 'blockly-toolbox',
    template: `
      <h3 #toolboxTitle id="blockly-toolbox-title">Toolbox</h3>
      <ol #tree
@@ -46,27 +46,27 @@ blocklyApp.ToolboxView = ng.core
              </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>
+                <blockly-toolbox-tree *ngFor="#block of getToolboxWorkspace(category).topBlocks_"
+                                      [level]=2 [block]="block"
+                                      [displayBlockMenu]="true"
+                                      [clipboardService]="clipboardService">
+                </blockly-toolbox-tree>
              </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>
+          <blockly-toolbox-tree *ngFor="#block of getToolboxWorkspace(toolboxCategories[0]).topBlocks_; #i=index"
+                                [level]=1 [block]="block"
+                                [displayBlockMenu]="true"
+                                [clipboardService]="clipboardService"
+                                [index]="i" [tree]="tree"
+                                [noCategories]="true">
+          </blockly-toolbox-tree>
        </div>
      </ol>
    `,
-    directives: [blocklyApp.ToolboxTreeView],
+    directives: [blocklyApp.ToolboxTreeComponent],
    providers: [blocklyApp.TreeService],
  })
  .Class({
--- a/accessible/workspace_treeview.component.js
+++ b/accessible/workspace_treeview.component.js
@@ -24,9 +24,9 @@
 * @author madeeha@google.com (Madeeha Ghori)
 */

-blocklyApp.WorkspaceTreeView = ng.core
+blocklyApp.WorkspaceTreeComponent = ng.core
  .Component({
-    selector: 'tree-view',
+    selector: 'blockly-workspace-tree',
    template: `
    <li #parentList [id]="idMap['parentList']" role="treeitem" class="blocklyHasChildren"
        [attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-block-summary', idMap['blockSummary'])"
@@ -92,8 +92,11 @@ blocklyApp.WorkspaceTreeView = ng.core
          </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>
+          <blockly-field *ngFor="#field of inputBlock.fieldRow" [field]="field"></blockly-field>
+          <blockly-workspace-tree *ngIf="inputBlock.connection && inputBlock.connection.targetBlock()"
+                                  [block]="inputBlock.connection.targetBlock()" [isTopBlock]="false"
+                                  [level]="level">
+          </blockly-workspace-tree>
          <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)">
@@ -118,15 +121,16 @@ 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>
+
+    <blockly-workspace-tree *ngIf= "block.nextConnection && block.nextConnection.targetBlock()"
+                            [block]="block.nextConnection.targetBlock()"
+                            [isTopBlock]="false"
+                            [level]="level">
+    </blockly-workspace-tree>
    `,
-    directives: [ng.core.forwardRef(function() {
-      return blocklyApp.WorkspaceTreeView;
-    }), blocklyApp.FieldView],
+    directives: [blocklyApp.FieldComponent, ng.core.forwardRef(function() {
+      return blocklyApp.WorkspaceTreeComponent;
+    })],
    inputs: ['block', 'isTopBlock', 'topBlockIndex', 'level', 'parentId', 'tree'],
    pipes: [blocklyApp.TranslatePipe],
    providers: [blocklyApp.TreeService],
--- a/accessible/workspaceview.component.js
+++ b/accessible/workspaceview.component.js
@@ -23,9 +23,9 @@
 * @author madeeha@google.com (Madeeha Ghori)
 */

-blocklyApp.WorkspaceView = ng.core
+blocklyApp.WorkspaceComponent = ng.core
  .Component({
-    selector: 'workspace-view',
+    selector: 'blockly-workspace',
    template: `
    <label>
      <h3 #workspaceTitle id="blockly-workspace-title">{{'WORKSPACE'|translate}}</h3>
@@ -48,11 +48,14 @@ blocklyApp.WorkspaceView = ng.core
          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]="tree"></tree-view>
+        <blockly-workspace-tree [level]=1 [block]="block" [isTopBlock]="true"
+                                [topBlockIndex]="i" [parentId]="tree.id"
+                                [tree]="tree">
+        </blockly-workspace-tree>
      </ol>
    </div>
    `,
-    directives: [blocklyApp.WorkspaceTreeView],
+    directives: [blocklyApp.WorkspaceTreeComponent],
    pipes: [blocklyApp.TranslatePipe],
    providers: [blocklyApp.TreeService]
  })
--- a/demos/accessible/index.html
+++ b/demos/accessible/index.html
@@ -17,16 +17,18 @@
  <script src="../../accessible/libs/angular2-polyfills.min.js"></script>
  <script src="../../accessible/libs/Rx.umd.min.js"></script>
  <script src="../../accessible/libs/angular2-all.umd.min.js"></script>
+
  <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>
-  <script src="../../accessible/toolboxview.component.js"></script>
-  <script src="../../accessible/workspaceview.component.js"></script>
-  <script src="../../accessible/appview.component.js"></script>
+
+  <script src="../../accessible/field.component.js"></script>
+  <script src="../../accessible/toolbox-tree.component.js"></script>
+  <script src="../../accessible/toolbox.component.js"></script>
+  <script src="../../accessible/workspace-tree.component.js"></script>
+  <script src="../../accessible/workspace.component.js"></script>
+  <script src="../../accessible/app.component.js"></script>

  <link rel="stylesheet" href="../../media/accessible.css">
  <style>