Fixing modals so they're announced on focus, and changing variables t… (#1030)

* Fixing modals so they're announced on focus, and changing variables to only react to enter, not onChange.

* Adding a temp index.

* Whoops - added it in the wrong spot.
This commit is contained in:
CoryDCode
2017-06-01 17:30:50 -07:00
committed by GitHub
parent 1a6ac798eb
commit 7336d03538
5 changed files with 26 additions and 12 deletions

View File

@@ -156,6 +156,11 @@ blocklyApp.FieldSegmentComponent = ng.core.Component({
},
// Confirm a selection for dropdown fields.
selectOption: function() {
if (this.optionValue != Blockly.Msg.RENAME_VARIABLE && this.optionValue !=
Blockly.Msg.DELETE_VARIABLE.replace('%1', this.mainField.getValue())) {
this.mainField.setValue(this.optionValue);
}
if (this.optionValue == Blockly.Msg.RENAME_VARIABLE) {
this.variableModalService.showRenameModal_(this.mainField.getValue());
}
@@ -172,11 +177,6 @@ blocklyApp.FieldSegmentComponent = ng.core.Component({
return;
}
if (this.optionValue != Blockly.Msg.RENAME_VARIABLE && this.optionValue !=
Blockly.Msg.DELETE_VARIABLE.replace('%1', this.mainField.getValue())) {
this.mainField.setValue(this.optionValue);
}
var optionText = undefined;
for (var i = 0; i < this.dropdownOptions.length; i++) {
if (this.dropdownOptions[i].value == optionValue) {

View File

@@ -43,6 +43,8 @@ blocklyApp.VariableAddModalComponent = ng.core.Component({
<div id="varModal" class="blocklyModal" role="alertdialog"
(click)="$event.stopPropagation()" tabindex="0"
aria-labelledby="variableModalHeading">
<h3 id="variableModalHeading">Add a variable...</h3>
<form id="varForm">
<p id="inputLabel">New Variable Name:
<input id="mainFieldId" type="text" [ngModel]="VALUE"
@@ -81,7 +83,7 @@ blocklyApp.VariableAddModalComponent = ng.core.Component({
Blockly.CommonModal.setupKeyboardOverrides(that);
setTimeout(function() {
document.getElementById('mainFieldId').focus();
document.getElementById('varModal').focus();
}, 150);
}
);

View File

@@ -66,7 +66,7 @@ blocklyApp.VariableModalService = ng.core.Class({
},
// Show the remove variable modal.
showRemoveModal_: function(oldName) {
var count = blocklyApp.workspace.getVariableUses(oldName).length;
var count = this.getNumVariables(oldName);
if (count > 1) {
this.preRemoveShowHook(oldName, count);
this.modalIsShown = true;
@@ -74,6 +74,9 @@ blocklyApp.VariableModalService = ng.core.Class({
blocklyApp.workspace.deleteVariableInternal_(oldName);
}
},
getNumVariables: function(oldName) {
return blocklyApp.workspace.getVariableUses(oldName).length;
},
// Hide the variable modal.
hideModal: function() {
this.modalIsShown = false;

View File

@@ -43,10 +43,12 @@ blocklyApp.VariableRemoveModalComponent = ng.core.Component({
<div id="varModal" class="blocklyModal" role="alertdialog"
(click)="$event.stopPropagation()" tabindex="0"
aria-labelledby="variableModalHeading">
<h3 id="variableModalHeading">
Delete {{getNumVariables()}} uses of the "{{currentVariableName}}"
variable?
</h3>
<form id="varForm">
<p id="label">Remove {{count}} instances of
"{{currentVariableName}}" variable?
</p>
<hr>
<button id="yesButton" (click)="submit()">
YES
@@ -83,7 +85,7 @@ blocklyApp.VariableRemoveModalComponent = ng.core.Component({
Blockly.CommonModal.setupKeyboardOverrides(that);
setTimeout(function() {
document.getElementById('label').focus();
document.getElementById('varModal').focus();
}, 150);
}
);
@@ -101,6 +103,9 @@ blocklyApp.VariableRemoveModalComponent = ng.core.Component({
getInteractiveContainer: function() {
return document.getElementById("varForm");
},
getNumVariables: function() {
return this.variableModalService.getNumVariables(this.currentVariableName);
},
// Submits the name change for the variable.
submit: function() {
blocklyApp.workspace.deleteVariableInternal_(this.currentVariableName);

View File

@@ -42,6 +42,10 @@ blocklyApp.VariableRenameModalComponent = ng.core.Component({
<div id="varModal" class="blocklyModal" role="alertdialog"
(click)="$event.stopPropagation()" tabindex="0"
aria-labelledby="variableModalHeading">
<h3 id="variableModalHeading">
Rename the "{{currentVariableName}}" variable...
</h3>
<form id="varForm">
<p id="inputLabel">New Variable Name:
<input id="mainFieldId" type="text" [ngModel]="VALUE"
@@ -82,7 +86,7 @@ blocklyApp.VariableRenameModalComponent = ng.core.Component({
Blockly.CommonModal.setupKeyboardOverrides(that);
setTimeout(function() {
document.getElementById('mainFieldId').focus();
document.getElementById('varModal').focus();
}, 150);
}
);