Add an explicit injector for the 'Run Code' button. Update es6-shim dependency to prevent console errors.

This commit is contained in:
Sean Lip
2016-05-27 16:37:39 -07:00
parent f0dcf3521e
commit 9791b48533
4 changed files with 28 additions and 16 deletions

View File

@@ -12,8 +12,8 @@ What Does Accessible Blockly Do?
Use Accessible Blockly in Your Web App
-----------
1. see the basic demo under blockly/demos/accessible. This covers the absolute minimum required to import Accessible Blockly into your own web app.
1. See the basic demo under blockly/demos/accessible. This covers the absolute minimum required to import Accessible Blockly into your own web app.
2. You will need to import the files in the same order as in the demo: utils.service.js will need to be the first Angular file imported.
3. When the DOMContentLoaded event fires, call ng.platform.browser.bootstrap() on the main component to be loaded. This will usually be blocklyApp.AppView, but if you have another component that wraps it, use that one instead.
4. You will need to implement a runCode() function in the global scope. This function will be called when the user presses the Run Code button in the Accessible Blockly app.
4. If you want to customize the toolbar, you will need an ACCESSIBLE_GLOBALS object in the global scope. It should have a 'toolbarButtonConfig' key, whose value is an Array. Each element in this array should be an Object with two keys: 'text' (the text to display on the button) and 'action' (the function that gets run when the button is clicked).
5. Note that we do not support having multiple Accessible Blockly apps in a single webpage.

File diff suppressed because one or more lines are too long

View File

@@ -32,10 +32,13 @@ blocklyApp.WorkspaceView = ng.core
<h3 #workspaceTitle id="blockly-workspace-title">{{stringMap['WORKSPACE']}}</h3>
</label>
<div id="blockly-workspace-toolbar" (keydown)="onWorkspaceToolbarKeypress($event, getActiveElementId())">
<button id='run-code' (click)='runCode()' disabled={{disableRunCode()}}
[attr.aria-disabled]='disableRunCode()' class='blocklyTree'>{{stringMap['RUN_CODE']}}</button>
<button id='clear-workspace' (click)='workspace.clear()' disabled={{disableRunCode()}}
[attr.aria-disabled]='disableRunCode()' class='blocklyTree'>{{stringMap['CLEAR_WORKSPACE']}}</button>
<span *ngFor="#buttonConfig of toolbarButtonConfig">
<button (click)='buttonConfig.action()' class='blocklyTree'>
{{buttonConfig.text}}
</button>
</span>
<button id='clear-workspace' (click)='workspace.clear()' disabled={{disableClearWorkspace()}}
[attr.aria-disabled]='disableClearWorkspace()' class='blocklyTree'>{{stringMap['CLEAR_WORKSPACE']}}</button>
</div>
<div *ngIf="workspace">
<ol #tree id={{makeId(i)}} *ngFor="#block of workspace.topBlocks_; #i=index"
@@ -55,9 +58,16 @@ blocklyApp.WorkspaceView = ng.core
this.workspace = blocklyApp.workspace;
this.treeService = _treeService;
}
// ACCESSIBLE_GLOBALS is a global variable defined by the containing
// page. It should contain a key, toolbarButtonConfig, whose
// corresponding value is an Array with two keys: 'text' and 'action'.
// The first is the text to display on the button, and the second is the
// function that gets run when the button is clicked.
this.toolbarButtonConfig =
ACCESSIBLE_GLOBALS && ACCESSIBLE_GLOBALS.toolbarButtonConfig ?
ACCESSIBLE_GLOBALS.toolbarButtonConfig : [];
this.stringMap = {
'WORKSPACE': Blockly.Msg.WORKSPACE,
'RUN_CODE': Blockly.Msg.RUN_CODE,
'CLEAR_WORKSPACE': Blockly.Msg.CLEAR_WORKSPACE
};
}],
@@ -73,10 +83,7 @@ blocklyApp.WorkspaceView = ng.core
makeId: function(index) {
return 'blockly-workspace-tree' + index;
},
runCode: function() {
runCode();
},
disableRunCode: function() {
disableClearWorkspace: function() {
if (blocklyApp.workspace.topBlocks_.length){
return undefined;
} else {

View File

@@ -52,6 +52,11 @@
<blockly-app></blockly-app>
<script>
var ACCESSIBLE_GLOBALS = {
// Additional buttons for the workspace toolbar that
// go before the "Clear Workspace" button.
toolbarButtonConfig: []
};
document.addEventListener('DOMContentLoaded', function() {
ng.platform.browser.bootstrap(blocklyApp.AppView);
});