mirror of
https://github.com/google/blockly.git
synced 2026-01-27 02:30:08 +01:00
Add an explicit injector for the 'Run Code' button. Update es6-shim dependency to prevent console errors.
This commit is contained in:
@@ -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.
|
||||
|
||||
10
accessible/libs/es6-shim.min.js
vendored
10
accessible/libs/es6-shim.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user