diff --git a/accessible/appview.component.js b/accessible/appview.component.js
index aa8e620f3..792726654 100644
--- a/accessible/appview.component.js
+++ b/accessible/appview.component.js
@@ -35,43 +35,31 @@ blocklyApp.AppView = ng.core
|
- {{stringMap['TOOLBOX_LOAD']}}
+ {{'TOOLBOX_LOAD'|translate}}
|
- {{stringMap['WORKSPACE_LOAD']}}
+ {{'WORKSPACE_LOAD'|translate}}
|
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
`,
directives: [blocklyApp.ToolboxView, blocklyApp.WorkspaceView],
+ pipes: [blocklyApp.TranslatePipe],
// ClipboardService declared here so that all components are using the same
// instance of the clipboard.
// https://www.sitepoint.com/angular-2-components-providers-classes-factories-values/
providers: [blocklyApp.ClipboardService]
})
.Class({
- constructor: function() {
- this.stringMap = {
- ['TOOLBOX_LOAD']: Blockly.Msg.TOOLBOX_LOAD_MSG,
- ['WORKSPACE_LOAD']: Blockly.Msg.WORKSPACE_LOAD_MSG,
- ['BLOCK_SUMMARY']: Blockly.Msg.BLOCK_SUMMARY,
- ['BLOCK_ACTION_LIST']: Blockly.Msg.BLOCK_ACTION_LIST,
- ['OPTION_LIST']: Blockly.Msg.OPTION_LIST,
- ['ARGUMENT_OPTIONS_LIST']: Blockly.Msg.ARGUMENT_OPTIONS_LIST,
- ['UNAVAILABLE']: Blockly.Msg.UNAVAILABLE,
- ['BUTTON']: Blockly.Msg.BUTTON,
- ['TEXT']: Blockly.Msg.TEXT,
- ['ARGUMENT_BLOCK_ACTION_LIST']: Blockly.Msg.ARGUMENT_BLOCK_ACTION_LIST,
- ['ARGUMENT_INPUT']: Blockly.Msg.ARGUMENT_INPUT
- };
- }
+ constructor: function() {}
});
diff --git a/accessible/clipboard.service.js b/accessible/clipboard.service.js
index 2caf8d627..747baf0e2 100644
--- a/accessible/clipboard.service.js
+++ b/accessible/clipboard.service.js
@@ -61,7 +61,9 @@ blocklyApp.ClipboardService = ng.core
connection.connect(reconstitutedBlock.outputConnection);
}
blocklyApp.debug && console.log('paste');
- alert(Blockly.Msg.PASTED_BLOCK_FROM_CLIPBOARD_MSG + block.toString());
+ alert(
+ Blockly.Msg.PASTED_BLOCK_FROM_CLIPBOARD_MSG +
+ reconstitutedBlock.toString());
},
pasteToMarkedConnection: function(block, announce) {
var xml = Blockly.Xml.blockToDom(block);
@@ -72,7 +74,9 @@ blocklyApp.ClipboardService = ng.core
reconstitutedBlock.previousConnection);
blocklyApp.debug && console.log('paste to marked connection');
if (announce) {
- alert(Blockly.Msg.PASTED_BLOCK_TO_MARKED_SPOT_MSG + block.toString());
+ alert(
+ Blockly.Msg.PASTED_BLOCK_TO_MARKED_SPOT_MSG +
+ reconstitutedBlock.toString());
}
},
markConnection: function(connection) {
diff --git a/accessible/fieldview.component.js b/accessible/fieldview.component.js
index 7e68cd9d7..d90ad1d4a 100644
--- a/accessible/fieldview.component.js
+++ b/accessible/fieldview.component.js
@@ -36,7 +36,7 @@ blocklyApp.FieldView = ng.core
-
+
-
`,
inputs: ['field', 'level', 'index', 'parentId'],
+ pipes: [blocklyApp.TranslatePipe],
providers: [blocklyApp.TreeService, blocklyApp.UtilsService]
})
.Class({
@@ -72,9 +73,6 @@ blocklyApp.FieldView = ng.core
};
this.treeService = _treeService;
this.utilsService = _utilsService;
- this.stringMap = {
- 'CURRENT_ARGUMENT_VALUE': Blockly.Msg.CURRENT_ARGUMENT_VALUE
- };
}],
ngOnInit: function() {
var elementsNeedingIds = this.generateElementNames(this.field);
diff --git a/accessible/toolbox_treeview.component.js b/accessible/toolbox_treeview.component.js
index dca39da82..1e50ca196 100644
--- a/accessible/toolbox_treeview.component.js
+++ b/accessible/toolbox_treeview.component.js
@@ -28,83 +28,84 @@ blocklyApp.ToolboxTreeView = ng.core
.Component({
selector: 'toolbox-tree-view',
template: `
-
-
- {{setActiveDesc(parentList)}}
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
+ {{setActiveDesc(parentList)}}
+
+
+ -
+
+
+ -
+
-
-
-
-
+ -
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`,
- directives: [ng.core.forwardRef(
- function() { return blocklyApp.ToolboxTreeView; }),
- blocklyApp.FieldView],
- inputs: ['block', 'displayBlockMenu', 'level', 'index', 'tree',
- 'noCategories'],
+ directives: [ng.core.forwardRef(function() {
+ return blocklyApp.ToolboxTreeView;
+ }), blocklyApp.FieldView],
+ inputs: [
+ 'block', 'displayBlockMenu', 'level', 'index', 'tree', 'noCategories'],
+ pipes: [blocklyApp.TranslatePipe],
providers: [blocklyApp.TreeService, blocklyApp.UtilsService]
})
.Class({
@@ -115,12 +116,6 @@ blocklyApp.ToolboxTreeView = ng.core
this.clipboardService = _clipboardService;
this.treeService = _treeService;
this.utilsService = _utilsService;
- this.stringMap = {
- 'BLOCK_ACTION_LIST': Blockly.Msg.BLOCK_ACTION_LIST,
- 'COPY_TO_CLIPBOARD': Blockly.Msg.COPY_TO_CLIPBOARD,
- 'COPY_TO_WORKSPACE': Blockly.Msg.COPY_TO_WORKSPACE,
- 'COPY_TO_MARKED_SPOT': Blockly.Msg.COPY_TO_MARKED_SPOT
- };
}],
ngOnInit: function() {
var elementsNeedingIds = ['blockSummaryLabel'];
@@ -130,8 +125,7 @@ blocklyApp.ToolboxTreeView = ng.core
'blockCopyButton', 'sendToSelected', 'sendToSelectedButton']);
}
for (var i = 0; i < this.block.inputList.length; i++){
- elementsNeedingIds.push('listItem' + i);
- elementsNeedingIds.push('listItem' + i + 'Label')
+ elementsNeedingIds.push('listItem' + i, 'listItem' + i + 'Label')
}
this.idMap = this.utilsService.generateIds(elementsNeedingIds);
if (this.index == 0 && this.noCategories) {
@@ -145,8 +139,8 @@ blocklyApp.ToolboxTreeView = ng.core
isCompatible);
},
generateAriaLabelledByAttr: function() {
- return this.utilsService.generateAriaLabelledByAttr.apply(this,
- arguments);
+ return this.utilsService.generateAriaLabelledByAttr.apply(
+ this, arguments);
},
setActiveDesc: function(parentList) {
// If this is the first child of the toolbox and the
diff --git a/accessible/translate.pipe.js b/accessible/translate.pipe.js
new file mode 100644
index 000000000..c15dec898
--- /dev/null
+++ b/accessible/translate.pipe.js
@@ -0,0 +1,34 @@
+/**
+ * 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 Pipe for internationalizing Blockly message strings.
+ * @author sll@google.com (Sean Lip)
+ */
+
+blocklyApp.TranslatePipe = ng.core
+ .Pipe({
+ name: 'translate'
+ })
+ .Class({
+ constructor: function() {},
+ transform: function(messageId) {
+ return Blockly.Msg[messageId];
+ }
+ });
diff --git a/accessible/workspace_treeview.component.js b/accessible/workspace_treeview.component.js
index db0001320..937e666c1 100644
--- a/accessible/workspace_treeview.component.js
+++ b/accessible/workspace_treeview.component.js
@@ -28,119 +28,109 @@ blocklyApp.WorkspaceTreeView = ng.core
.Component({
selector: 'tree-view',
template: `
-
- {{checkParentList(parentList)}}
-
-
- -
-
+
-
+ {{checkParentList(parentList)}}
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
+
+
+
+
+
-
+
+
- -
-
+
-
+
- -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
+
-
-
-
-
-
-
-
-
- -
-
-
- -
-
-
-
-
-
-
-
-
-
+
+
+
+
`,
directives: [ng.core.forwardRef(
function() { return blocklyApp.WorkspaceTreeView; }), blocklyApp.FieldView],
inputs: ['block', 'isTopBlock', 'topBlockIndex', 'level', 'parentId'],
+ pipes: [blocklyApp.TranslatePipe],
providers: [blocklyApp.TreeService, blocklyApp.UtilsService],
})
.Class({
- constructor: [blocklyApp.ClipboardService, blocklyApp.TreeService,
- blocklyApp.UtilsService,
- function(_clipboardService, _treeService, _utilsService) {
+ constructor: [
+ blocklyApp.ClipboardService, blocklyApp.TreeService, blocklyApp.UtilsService,
+ function(_clipboardService, _treeService, _utilsService) {
this.infoBlocks = Object.create(null);
this.clipboardService = _clipboardService;
this.treeService = _treeService;
this.utilsService = _utilsService;
- this.stringMap = {
- 'BLOCK_ACTION_LIST': Blockly.Msg.BLOCK_ACTION_LIST,
- 'PASTE': Blockly.Msg.PASTE,
- 'PASTE_ABOVE': Blockly.Msg.PASTE_ABOVE,
- 'PASTE_BELOW': Blockly.Msg.PASTE_BELOW,
- 'MARK_THIS_SPOT': Blockly.Msg.MARK_THIS_SPOT,
- 'MARK_SPOT_ABOVE': Blockly.Msg.MARK_SPOT_ABOVE,
- 'MARK_SPOT_BELOW': Blockly.Msg.MARK_SPOT_BELOW,
- 'CUT_BLOCK': Blockly.Msg.CUT_BLOCK,
- 'COPY_BLOCK': Blockly.Msg.COPY_BLOCK,
- 'MOVE_TO_MARKED_SPOT': Blockly.Msg.MOVE_TO_MARKED_SPOT,
- 'DELETE': Blockly.Msg.DELETE
- };
}],
deleteBlock: function(block) {
// If this is the top block, we should shift focus to the previous tree
@@ -151,16 +141,17 @@ blocklyApp.WorkspaceTreeView = ng.core
break;
}
}
- // If this is not the top block, we should change the active descendant of the tree.
+ // If this is not the top block, we should change the active descendant
+ // of the tree.
block.dispose(true);
},
getMarkedBlockCompatibilityHTMLText: function(isCompatible) {
return this.utilsService.getMarkedBlockCompatibilityHTMLText(isCompatible);
},
generateAriaLabelledByAttr: function() {
- return this.utilsService.generateAriaLabelledByAttr.apply(this,
- arguments);
+ return this.utilsService.generateAriaLabelledByAttr.apply(
+ this, arguments);
},
ngOnInit: function() {
var elementsNeedingIds = ['blockSummary', 'listItem', 'label',
diff --git a/accessible/workspaceview.component.js b/accessible/workspaceview.component.js
index ae0fccfbe..281b87b55 100644
--- a/accessible/workspaceview.component.js
+++ b/accessible/workspaceview.component.js
@@ -26,30 +26,32 @@
blocklyApp.WorkspaceView = ng.core
.Component({
selector: 'workspace-view',
- viewInjector: [blocklyApp.ClipboardService],
template: `
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
`,
directives: [blocklyApp.WorkspaceTreeView],
+ pipes: [blocklyApp.TranslatePipe],
providers: [blocklyApp.TreeService]
})
.Class({
diff --git a/demos/accessible/index.html b/demos/accessible/index.html
index d3f3a1b52..23d7a9724 100644
--- a/demos/accessible/index.html
+++ b/demos/accessible/index.html
@@ -20,6 +20,7 @@
+