Adding an add variable modal to accessible Blockly. (#1015)

* Adding the remove variable modal and functionality to accessible Blockly.

* Adding the add variable modal for accessible Blockly.

accessible/app.component.js

@@ -38,6 +38,7 @@ blocklyApp.AppComponent = ng.core.Component({
 
     <blockly-block-options-modal></blockly-block-options-modal>
     <blockly-toolbox-modal></blockly-toolbox-modal>
+    <blockly-add-variable-modal></blockly-add-variable-modal>
     <blockly-rename-variable-modal></blockly-rename-variable-modal>
     <blockly-remove-variable-modal></blockly-remove-variable-modal>
 
@@ -52,6 +53,7 @@ blocklyApp.AppComponent = ng.core.Component({
     blocklyApp.BlockOptionsModalComponent,
     blocklyApp.SidebarComponent,
     blocklyApp.ToolboxModalComponent,
+    blocklyApp.VariableAddModalComponent,
     blocklyApp.VariableRenameModalComponent,
     blocklyApp.VariableRemoveModalComponent,
     blocklyApp.WorkspaceComponent

accessible/field-segment.component.js

@@ -55,7 +55,7 @@ blocklyApp.FieldSegmentComponent = ng.core.Component({
                 (keydown.enter)="selectOption()"
                 tabindex="-1">
           <option *ngFor="#option of dropdownOptions" value="{{option.value}}"
-                  [selected]="mainField.getValue() == option.value">
+                  [attr.select]="optionValue === option.value ? true : null">
             {{option.text}}
           </option>
         </select>

accessible/sidebar.component.js

@@ -52,6 +52,11 @@ blocklyApp.SidebarComponent = ng.core.Component({
               class="blocklySidebarButton">
         {{'ERASE_WORKSPACE'|translate}}
       </button>
+      <button *ngIf="hasVariableCategory()" id="add-variable"
+              (click)="showAddVariableModal()"
+              class="blocklySidebarButton">
+        Add Variable
+      </button>
     </div>
   `,
   pipes: [blocklyApp.TranslatePipe]
@@ -62,9 +67,10 @@ blocklyApp.SidebarComponent = ng.core.Component({
     blocklyApp.ToolboxModalService,
     blocklyApp.TreeService,
     blocklyApp.UtilsService,
+    blocklyApp.VariableModalService,
     function(
         blockConnectionService, toolboxModalService, treeService,
-        utilsService) {
+        utilsService, variableService) {
       // ACCESSIBLE_GLOBALS is a global variable defined by the containing
       // page. It should contain a key, customSidebarButtons, describing
       // additional buttons that should be displayed after the default ones.
@@ -77,6 +83,7 @@ blocklyApp.SidebarComponent = ng.core.Component({
       this.toolboxModalService = toolboxModalService;
       this.treeService = treeService;
       this.utilsService = utilsService;
+      this.variableModalService = variableService;
 
       this.ID_FOR_ATTACH_TO_LINK_BUTTON = 'blocklyAttachToLinkBtn';
       this.ID_FOR_CREATE_NEW_GROUP_BUTTON = 'blocklyCreateNewGroupBtn';
@@ -88,6 +95,9 @@ blocklyApp.SidebarComponent = ng.core.Component({
   isWorkspaceEmpty: function() {
     return this.utilsService.isWorkspaceEmpty();
   },
+  hasVariableCategory: function() {
+    return this.toolboxModalService.toolboxHasVariableCategory();
+  },
   clearWorkspace: function() {
     blocklyApp.workspace.clear();
     this.treeService.clearAllActiveDescs();
@@ -104,5 +114,8 @@ blocklyApp.SidebarComponent = ng.core.Component({
   showToolboxModalForCreateNewGroup: function() {
     this.toolboxModalService.showToolboxModalForCreateNewGroup(
         this.ID_FOR_CREATE_NEW_GROUP_BUTTON);
+  },
+  showAddVariableModal: function() {
+    this.variableModalService.showAddModal_("item");
   }
 });

accessible/toolbox-modal.service.js

@@ -42,6 +42,7 @@ blocklyApp.ToolboxModalService = ng.core.Class({
       this.selectedToolboxCategories = null;
       this.onSelectBlockCallback = null;
       this.onDismissCallback = null;
+      this.hasVariableCategory = null;
       // The aim of the pre-show hook is to populate the modal component with
       // the information it needs to display the modal (e.g., which categories
       // and blocks to display).
@@ -119,6 +120,26 @@ blocklyApp.ToolboxModalService = ng.core.Class({
   isModalShown: function() {
     return this.modalIsShown;
   },
+  toolboxHasVariableCategory: function() {
+    if (this.hasVariableCategory === null) {
+      var toolboxXmlElt = document.getElementById('blockly-toolbox-xml');
+      var toolboxCategoryElts = toolboxXmlElt.getElementsByTagName('category');
+      var that = this;
+      Array.from(toolboxCategoryElts).forEach(
+        function(categoryElt) {
+          var custom = categoryElt.attributes.custom;
+          if (custom && custom.value == Blockly.VARIABLE_CATEGORY_NAME) {
+            that.hasVariableCategory = true;
+          }
+        });
+
+      if (this.hasVariableCategory === null) {
+        this.hasVariableCategory = false;
+      }
+    }
+
+    return this.hasVariableCategory;
+  },
   showModal_: function(
       selectedToolboxCategories, onSelectBlockCallback, onDismissCallback) {
     this.selectedToolboxCategories = selectedToolboxCategories;

accessible/variable-add-modal.component.js

@@ -0,0 +1,162 @@
+/**
+ * AccessibleBlockly
+ *
+ * Copyright 2017 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 Component representing the variable rename modal.
+ *
+ * @author corydiers@google.com (Cory Diers)
+ */
+
+blocklyApp.VariableAddModalComponent = ng.core.Component({
+  selector: 'blockly-add-variable-modal',
+  template: `
+    <div *ngIf="modalIsVisible"class="blocklyModalCurtain"
+         (click)="dismissModal()">
+      <!-- $event.stopPropagation() prevents the modal from closing when its
+      interior is clicked. -->
+      <div id="varModal" class="blocklyModal" role="alertdialog"
+           (click)="$event.stopPropagation()" tabindex="0"
+           aria-labelledby="variableModalHeading">
+          <form id="varForm">
+            <p id="inputLabel">New Variable Name:
+              <input id="mainFieldId" type="text" [ngModel]="VALUE"
+                     (ngModelChange)="setTextValue($event)" tabindex="0"
+                     aria-labelledby="inputLabel" />
+            </p>
+            <hr>
+            <button id="submitButton" (click)="submit()">
+              SUBMIT
+            </button>
+            <button id="cancelButton" (click)="dismissModal()">
+              CANCEL
+            </button>
+          </form>
+      </div>
+    </div>
+  `,
+  pipes: [blocklyApp.TranslatePipe]
+})
+.Class({
+  constructor: [
+    blocklyApp.AudioService, blocklyApp.KeyboardInputService, blocklyApp.VariableModalService,
+    function(audioService, keyboardService, variableService) {
+      this.workspace = blocklyApp.workspace;
+      this.variableModalService = variableService;
+      this.audioService = audioService;
+      this.keyboardInputService = keyboardService
+      this.modalIsVisible = false;
+      this.activeButtonIndex = -1;
+
+      var that = this;
+      this.variableModalService.registerPreAddShowHook(
+        function() {
+          that.modalIsVisible = true;
+
+          that.keyboardInputService.setOverride({
+            // Tab key: navigates to the previous or next item in the list.
+            '9': function(evt) {
+              evt.preventDefault();
+              evt.stopPropagation();
+
+              if (evt.shiftKey) {
+                // Move to the previous item in the list.
+                if (that.activeButtonIndex <= 0) {
+                  that.activeActionButtonIndex = 0;
+                  that.audioService.playOopsSound();
+                } else {
+                  that.activeButtonIndex--;
+                }
+              } else {
+                // Move to the next item in the list.
+                if (that.activeButtonIndex == that.numInteractiveElements() - 1) {
+                  that.audioService.playOopsSound();
+                } else {
+                  that.activeButtonIndex++;
+                }
+              }
+
+              that.focusOnOption(that.activeButtonIndex);
+            },
+            // Escape key: closes the modal.
+            '27': function() {
+              that.dismissModal();
+            },
+            // Up key: no-op.
+            '38': function(evt) {
+              evt.preventDefault();
+            },
+            // Down key: no-op.
+            '40': function(evt) {
+              evt.preventDefault();
+            }
+          });
+
+          setTimeout(function() {
+            document.getElementById('mainFieldId').focus();
+          }, 150);
+        }
+      );
+    }
+  ],
+  // Caches the current text variable as the user types.
+  setTextValue: function(newValue) {
+    this.variableName = newValue;
+  },
+  // Closes the modal (on both success and failure).
+  hideModal_: function() {
+    this.modalIsVisible = false;
+    this.keyboardInputService.clearOverride();
+  },
+  // Focuses on the button represented by the given index.
+  focusOnOption: function(index) {
+    var elements = this.getInteractiveElements();
+    var button = elements[index];
+    button.focus();
+  },
+  // Counts the number of interactive elements for the modal.
+  numInteractiveElements: function() {
+    var elements = this.getInteractiveElements();
+    return elements.length;
+  },
+  // Gets all the interactive elements for the modal.
+  getInteractiveElements: function() {
+    return Array.prototype.filter.call(
+      document.getElementById("varForm").elements, function(element) {
+      if (element.type === 'hidden') {
+        return false;
+      }
+      if (element.disabled) {
+        return false;
+      }
+      if (element.tabIndex < 0) {
+        return false;
+      }
+      return true;
+    });
+  },
+  // Submits the name change for the variable.
+  submit: function() {
+    this.workspace.createVariable(this.variableName);
+    this.hideModal_();
+  },
+  // Dismisses and closes the modal.
+  dismissModal: function() {
+    this.hideModal_();
+  }
+})

accessible/variable-modal.service.js

@@ -29,12 +29,19 @@ blocklyApp.VariableModalService = ng.core.Class({
       this.modalIsShown = false;
     }
   ],
-  // Registers a hook to be called before the modal is shown.
+  // Registers a hook to be called before the add modal is shown.
+  registerPreAddShowHook: function(preShowHook) {
+    this.preAddShowHook = function() {
+      preShowHook();
+    };
+  },
+  // Registers a hook to be called before the rename modal is shown.
   registerPreRenameShowHook: function(preShowHook) {
     this.preRenameShowHook = function(oldName) {
       preShowHook(oldName);
     };
   },
+  // Registers a hook to be called before the remove modal is shown.
   registerPreRemoveShowHook: function(preShowHook) {
     this.preRemoveShowHook = function(oldName, count) {
       preShowHook(oldName, count);
@@ -44,12 +51,17 @@ blocklyApp.VariableModalService = ng.core.Class({
   isModalShown: function() {
     return this.modalIsShown;
   },
-  // Show the variable modal.
+  // Show the add variable modal.
+  showAddModal_: function() {
+    this.preAddShowHook();
+    this.modalIsShown = true;
+  },
+  // Show the rename variable modal.
   showRenameModal_: function(oldName) {
     this.preRenameShowHook(oldName);
     this.modalIsShown = true;
   },
-  // Show the variable modal.
+  // Show the remove variable modal.
   showRemoveModal_: function(oldName) {
     var count = blocklyApp.workspace.getVariableUses(oldName).length;
     if (count > 1) {

demos/accessible/index.html

@@ -32,6 +32,7 @@
   <script src="../../accessible/field-segment.component.js"></script>
   <script src="../../accessible/block-options-modal.component.js"></script>
   <script src="../../accessible/toolbox-modal.component.js"></script>
+  <script src="../../accessible/variable-add-modal.component.js"></script>
   <script src="../../accessible/variable-rename-modal.component.js"></script>
   <script src="../../accessible/variable-remove-modal.component.js"></script>
   <script src="../../accessible/sidebar.component.js"></script>
@@ -351,6 +352,7 @@
         </value>
       </block>
     </category>
+    <category name="Variables" colour="330" custom="VARIABLE"></category>
   </xml>
 
 </body>