CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-11 02:47:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Minor refactoring. Remove unused dependencies.

Browse Source
This commit is contained in:
Sean Lip
2016-11-29 18:50:31 -08:00
parent 4e623631dd
commit 65bad28f61
10 changed files with 69 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
accessible/app.component.js
View File

@@ -27,38 +27,43 @@ blocklyApp.workspace = new Blockly.Workspace();
blocklyApp.AppComponent = ng.core.Component({
selector: 'blockly-app',
template: `
<div>
<blockly-workspace></blockly-workspace>
<blockly-sidebar></blockly-sidebar>
</div>
<div *ngIf="getAriaLiveReadout()" aria-hidden="true"
class="blocklyAriaLiveStatus">
<blockly-workspace></blockly-workspace>
<blockly-sidebar></blockly-sidebar>
<div *ngIf="getAriaLiveReadout()" class="blocklyAriaLiveStatus"
aria-hidden="true">
<span aria-live="polite" role="status">{{getAriaLiveReadout()}}</span>
</div>
<blockly-block-options-modal></blockly-block-options-modal>
<blockly-toolbox-modal></blockly-toolbox-modal>
<label aria-hidden="true" hidden id="blockly-button">
<label id="blockly-translate-button" aria-hidden="true" hidden>
{{'BUTTON'|translate}}
</label>
<label aria-hidden="true" hidden id="blockly-workspace-block">
<label id="blockly-translate-workspace-block" aria-hidden="true" hidden>
{{'WORKSPACE_BLOCK'|translate}}
</label>
`,
directives: [
blocklyApp.BlockOptionsModalComponent, blocklyApp.SidebarComponent,
blocklyApp.ToolboxModalComponent, blocklyApp.WorkspaceComponent],
blocklyApp.BlockOptionsModalComponent,
blocklyApp.SidebarComponent,
blocklyApp.ToolboxModalComponent,
blocklyApp.WorkspaceComponent
],
pipes: [blocklyApp.TranslatePipe],
// All services are declared here, so that all components in the
// application use the same instance of the service.
// All services are declared here, so that all components in the application
// use the same instance of the service.
// https://www.sitepoint.com/angular-2-components-providers-classes-factories-values/
providers: [
blocklyApp.AudioService, blocklyApp.BlockOptionsModalService,
blocklyApp.ClipboardService, blocklyApp.KeyboardInputService,
blocklyApp.NotificationsService, blocklyApp.ToolboxModalService,
blocklyApp.TreeService, blocklyApp.UtilsService]
blocklyApp.AudioService,
blocklyApp.BlockOptionsModalService,
blocklyApp.ClipboardService,
blocklyApp.KeyboardInputService,
blocklyApp.NotificationsService,
blocklyApp.ToolboxModalService,
blocklyApp.TreeService,
blocklyApp.UtilsService
]
})
.Class({
constructor: [
@@ -67,6 +72,6 @@ blocklyApp.AppComponent = ng.core.Component({
}
],
getAriaLiveReadout: function() {
return this.notificationsService.getAriaLiveReadout();
return this.notificationsService.getDisplayedMessage();
}
});

7
accessible/audio.service.js
View File

@@ -18,7 +18,7 @@
*/
/**
* @fileoverview Angular2 Service that plays audio files.
* @fileoverview Angular2 Service for playing audio files.
* @author sll@google.com (Sean Lip)
*/
@@ -26,6 +26,7 @@ blocklyApp.AudioService = ng.core.Class({
constructor: [function() {
// We do not play any audio unless a media path prefix is specified.
this.canPlayAudio = false;
if (ACCESSIBLE_GLOBALS.hasOwnProperty('mediaPathPrefix')) {
this.canPlayAudio = true;
var mediaPathPrefix = ACCESSIBLE_GLOBALS['mediaPathPrefix'];
@@ -36,14 +37,12 @@ blocklyApp.AudioService = ng.core.Class({
};
}
// TODO(sll): Add ogg and mp3 fallbacks.
this.cachedAudioFiles_ = {};
}],
play_: function(audioId) {
if (this.canPlayAudio) {
if (!this.cachedAudioFiles_.hasOwnProperty(audioId)) {
this.cachedAudioFiles_[audioId] = new Audio(
this.AUDIO_PATHS_[audioId]);
this.cachedAudioFiles_[audioId] = new Audio(this.AUDIO_PATHS_[audioId]);
}
this.cachedAudioFiles_[audioId].play();
}

4
accessible/clipboard.service.js
View File

@@ -100,7 +100,7 @@ blocklyApp.ClipboardService = ng.core.Class({
},
markConnection: function(connection) {
this.markedConnection_ = connection;
this.notificationsService.setAriaLiveReadout(Blockly.Msg.ADDED_LINK_MSG);
this.notificationsService.speak(Blockly.Msg.ADDED_LINK_MSG);
},
cut: function(block) {
this.copy(block);
@@ -139,7 +139,7 @@ blocklyApp.ClipboardService = ng.core.Class({
connection.connect(reconstitutedBlock.outputConnection);
}
this.audioService.playConnectSound();
this.notificationsService.setAriaLiveReadout(
this.notificationsService.speak(
this.utilsService.getBlockDescription(reconstitutedBlock) + ' ' +
Blockly.Msg.PASTED_BLOCK_FROM_CLIPBOARD_MSG);
return reconstitutedBlock.id;

4
accessible/field-segment.component.js
View File

@@ -54,7 +54,7 @@ blocklyApp.FieldSegmentComponent = ng.core.Component({
</label>
<ol role="group">
<li [id]="idMap[optionValue]" role="treeitem" *ngFor="#optionValue of getOptions()"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap[optionValue + 'Button'], 'blockly-button')"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap[optionValue + 'Button'], 'blockly-translate-button')"
[attr.aria-level]="level" [attr.aria-selected]="mainField.getValue() == optionValue"
class="blocklyDropdownListItem">
<button [id]="idMap[optionValue + 'Button']" (click)="handleDropdownChange(mainField, optionValue)"
@@ -160,7 +160,7 @@ blocklyApp.FieldSegmentComponent = ng.core.Component({
this.mainField.setValue(optionValue);
}
this.notificationsService.setAriaLiveReadout(
this.notificationsService.speak(
'Selected option ' + this.optionText[optionValue]);
}
});

9
accessible/keyboard-input.service.js
View File

@@ -18,15 +18,15 @@
*/
/**
* @fileoverview Angular2 Service that handles keyboard input.
* @fileoverview Angular2 Service for handling keyboard input.
*
* @author sll@google.com (Sean Lip)
*/
blocklyApp.KeyboardInputService = ng.core.Class({
constructor: [function() {
// Default custom actions for global keystrokes. The keys are string
// representations of the key codes.
// Default custom actions for global keystrokes. The keys of this object
// are string representations of the key codes.
this.keysToActions = {};
// Override for the default keysToActions mapping (e.g. in a modal
// context).
@@ -34,13 +34,12 @@ blocklyApp.KeyboardInputService = ng.core.Class({
// Attach a keydown handler to the entire window.
var that = this;
document.addEventListener('keydown', function(evt) {
var stringifiedKeycode = String(evt.keyCode);
var actionsObject = that.keysToActionsOverride || that.keysToActions;
if (actionsObject.hasOwnProperty(stringifiedKeycode)) {
that.keysToActionsOverride[stringifiedKeycode](evt);
actionsObject[stringifiedKeycode](evt);
}
});
}],

29
accessible/notifications.service.js
View File

@@ -18,36 +18,41 @@
*/
/**
* @fileoverview Angular2 Service that notifies the user about actions that
* they have taken, by updating an ARIA live region.
* @fileoverview Angular2 Service for updating the ARIA live region that
* allows screenreaders to notify the user about actions that they have taken.
* @author sll@google.com (Sean Lip)
*/
blocklyApp.NotificationsService = ng.core.Class({
constructor: [function() {
this.statusMessage_ = '';
this.currentMessage = '';
this.timeouts = [];
}],
getAriaLiveReadout: function() {
return this.statusMessage_;
setDisplayedMessage_: function(newMessage) {
this.currentMessage = newMessage;
},
setAriaLiveReadout: function(newMessage) {
// Introduce a temporary status message, so that if, e.g., two "copy"
// operations are done in succession, both messages will be read.
this.statusMessage_ = '';
// Clear all existing timeouts.
getDisplayedMessage: function() {
return this.currentMessage;
},
speak: function(newMessage) {
// Clear and reset any existing timeouts.
this.timeouts.forEach(function(timeout) {
clearTimeout(timeout);
});
this.timeouts.length = 0;
// Clear the current message, so that if, e.g., two operations of the same
// type are performed, both messages will be read in succession.
this.setDisplayedMessage_('');
// We need a non-zero timeout here, otherwise NVDA does not read the
// notification messages properly.
var that = this;
this.timeouts.push(setTimeout(function() {
that.statusMessage_ = newMessage;
that.setDisplayedMessage_(newMessage);
}, 20));
this.timeouts.push(setTimeout(function() {
that.statusMessage_ = '';
that.setDisplayedMessage_('');
}, 2000));
}
});

6
accessible/toolbox-modal.component.js
View File

@@ -61,16 +61,14 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({
constructor: [
blocklyApp.ToolboxModalService, blocklyApp.KeyboardInputService,
blocklyApp.AudioService, blocklyApp.UtilsService, blocklyApp.TreeService,
blocklyApp.NotificationsService,
function(
toolboxModalService_, keyboardInputService_,
audioService_, utilsService_, treeService_, notificationsService_) {
toolboxModalService_, keyboardInputService_, audioService_,
utilsService_, treeService_) {
this.toolboxModalService = toolboxModalService_;
this.keyboardInputService = keyboardInputService_;
this.audioService = audioService_;
this.utilsService = utilsService_;
this.treeService = treeService_;
this.notificationsService = notificationsService_;
this.modalIsVisible = false;
this.toolboxCategories = [];

4
accessible/toolbox-modal.service.js
View File

@@ -143,7 +143,7 @@ blocklyApp.ToolboxModalService = ng.core.Class({
that.treeService.initActiveDesc(oldDestinationTreeId);
}
that.notificationsService.setAriaLiveReadout(
that.notificationsService.speak(
'Attached. Now on, ' + blockDescription + ', block in workspace.');
});
}, function() {
@@ -159,7 +159,7 @@ blocklyApp.ToolboxModalService = ng.core.Class({
setTimeout(function() {
that.treeService.focusOnBlock(newBlockId);
that.notificationsService.setAriaLiveReadout(
that.notificationsService.speak(
'Created new group in workspace. Now on, ' + blockDescription +
', block in workspace.');
});

21
accessible/tree.service.js
View File

@@ -212,7 +212,7 @@ blocklyApp.TreeService = ng.core.Class({
for (var i = 0; i < workspaceFocusTargets.length; i++) {
if (workspaceFocusTargets[i].tagName == 'OL' &&
workspaceFocusTargets[i].id == treeId) {
this.notificationsService.setAriaLiveReadout(
this.notificationsService.speak(
'Now in workspace group ' + (i + 1) + ' of ' +
workspaceFocusTargets.length);
}
@@ -276,10 +276,10 @@ blocklyApp.TreeService = ng.core.Class({
setTimeout(function() {
if (that.utilsService.isWorkspaceEmpty()) {
that.notificationsService.setAriaLiveReadout(
that.notificationsService.speak(
blockDescription + ' cut. Workspace is empty.');
} else {
that.notificationsService.setAriaLiveReadout(
that.notificationsService.speak(
blockDescription + ' cut. Now on workspace.');
}
});
@@ -287,7 +287,7 @@ blocklyApp.TreeService = ng.core.Class({
copyBlock_: function(block) {
var blockDescription = this.utilsService.getBlockDescription(block);
this.clipboardService.copy(block);
this.notificationsService.setAriaLiveReadout(
this.notificationsService.speak(
blockDescription + ' ' + Blockly.Msg.COPIED_BLOCK_MSG);
},
pasteToConnection: function(block, connection) {
@@ -360,7 +360,7 @@ blocklyApp.TreeService = ng.core.Class({
that.initActiveDesc(oldDestinationTreeId);
}
that.notificationsService.setAriaLiveReadout(
that.notificationsService.speak(
blockDescription + ' ' +
Blockly.Msg.ATTACHED_BLOCK_TO_LINK_MSG +
'. Now on attached block in workspace.');
@@ -381,10 +381,10 @@ blocklyApp.TreeService = ng.core.Class({
setTimeout(function() {
if (that.utilsService.isWorkspaceEmpty()) {
that.notificationsService.setAriaLiveReadout(
that.notificationsService.speak(
blockDescription + ' deleted. Workspace is empty.');
} else {
that.notificationsService.setAriaLiveReadout(
that.notificationsService.speak(
blockDescription + ' deleted. Now on workspace.');
}
});
@@ -493,7 +493,7 @@ blocklyApp.TreeService = ng.core.Class({
} else if (currentNode.tagName == 'INPUT') {
currentNode.focus();
currentNode.select();
this.notificationsService.setAriaLiveReadout(
this.notificationsService.speak(
'Type a value, then press Escape to exit');
found = true;
break;
@@ -557,7 +557,7 @@ blocklyApp.TreeService = ng.core.Class({
statusMessage += ' Press left to go to parent list.';
}
this.audioService.playOopsSound();
this.notificationsService.setAriaLiveReadout(statusMessage);
this.notificationsService.speak(statusMessage);
}
} else if (e.keyCode == 39) {
// Right arrow key. Go down a level, if possible.
@@ -569,8 +569,7 @@ blocklyApp.TreeService = ng.core.Class({
this.setActiveDesc(nextSibling.id, treeId);
} else {
this.audioService.playOopsSound();
this.notificationsService.setAriaLiveReadout(
'Reached bottom of list.');
this.notificationsService.speak('Reached bottom of list.');
}
}

10
accessible/workspace-tree.component.js
View File

@@ -28,7 +28,7 @@ blocklyApp.WorkspaceTreeComponent = ng.core.Component({
selector: 'blockly-workspace-tree',
template: `
<li [id]="idMap['blockRoot']" role="treeitem" class="blocklyHasChildren"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['blockSummary'], 'blockly-workspace-block')"
[attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['blockSummary'], 'blockly-translate-workspace-block')"
[attr.aria-level]="level">
<label [id]="idMap['blockSummary']">{{getBlockDescription()}}</label>
@@ -78,13 +78,11 @@ blocklyApp.WorkspaceTreeComponent = ng.core.Component({
})
.Class({
constructor: [
blocklyApp.ClipboardService, blocklyApp.NotificationsService,
blocklyApp.TreeService, blocklyApp.UtilsService, blocklyApp.AudioService,
blocklyApp.ClipboardService, blocklyApp.TreeService,
blocklyApp.UtilsService, blocklyApp.AudioService,
function(
_clipboardService, _notificationsService, _treeService,
_utilsService, _audioService) {
_clipboardService, _treeService, _utilsService, _audioService) {
this.clipboardService = _clipboardService;
this.notificationsService = _notificationsService;
this.treeService = _treeService;
this.utilsService = _utilsService;
this.audioService = _audioService;