Accessible demo (#373)

* adding a folder in demos for blind and setting up the package.json file for development. Adding package.json to .gitignore

* removing gitignore~ file

* copied blind blockly demo code over. set up a new dev environment. Up for review: the blind blockly demo code. Much of the drop downs don't actually do anything, but a general look at the way angular is used would be helpful in shaping future development.

* adding an index file that was being ignored by .gitignore

* adding required angular files and libraries previously ignored by git add --a for some unknown reason.

* starting work on toolbox

* got workspace and toolbox connected. Copy to workspace annd copy to clipboard working at 80%.

* cleaning up autogenerated files

* adding my own files. Not sure why the test files are being added.

* cleaning up comments

* removed empty html_formatter.html file from project and put on git ignore list. The file is used on my end to help with formatting the html in javascript files.

* getting rid of unnecessary html_formatter file

* removing merge conflicts

* cleaned up comments

* cleaned up comments, organized file structure, made ToolboxXML a file that can be changed by other developers porting this code, added copyright and file summaries to js files, linted files, moved third party libraries to lib folder

* removing lint files that shouldn't be tracked.

* Made the clipboard a service instead of multiple pieces embedded within the app. Not sold on the name ClipboardService. Open to suggestions.

* syncing up demo updates

* adding insert block menus above and below appropriate blocks.

* hacky version of getting code to run.

* changing toolbox to be a menu. making both the toolbox and workspace ordered lists

* adding new folder dev-old containing a version of blind blockly that uses nested lists for the toolbox

* getting rid of menubar experiment

* adding treeview shenanigans part 1

* adding treeview experiment page and finishing up treeview.

* getting a treeview implementation working in the toolbox

* creating a fishfood folder for fishfood development

* making first level of fishfood

* fixing something

* adding index file for fishfood

* beginning merging the treeview system.

* creating two treeviews

* fishfood level 1 without working music blocks

* fixes to treeview navigation

* final fishfood features done

* adding support for toolboxes without categories

* beginning integration of Sean's new music code

* adding Sean's music blocks and beginning music_player integration.

* merged Sean's music block code into fishfood

* merged Sean's music code and fixed treeview bug with toolbox when no categories

* adding blank_demo

* fixing tab navigation.

* fixing bug with shift-tab. New bug found in alt+tab not opening dropdown?

* fixing labels

* fixing bugs and finding more.

* removing dropdowns in favor of buttons part 1. Still need to change field options.

* index.html for blank_demo

* beginning cleanup

* adding blockly- prefix to label ids.

* integrating AccessibleBlockly with Blockly library.

* remove closure library

* removing testing files that aren't in develop

* removing all demo stuff for a later pull request

* removing gitignore file that doesn't exist in developer branch

* syncing with develop branch files

* removing music files from this pull request

* doing some lint cleanup

* rolling back accidental package.json change

* removing var blocklyApp = blocklyApp || {} from each extraneous file

* adding last debug statement

* changed name of inputType function

* renaming _service arguments

* fixing function names

* fixing all comments.

* fixing minor comments

* renaming variables, etc

* fixing bugs that break demo. Adding the run code and clear workspace buttons back to the workspaceview as their current position breaks tab navigation.

* fixing minor comments

* fixing function names, etc.

* adding comments to getInputTypeLabel function

* removing addClass() calls from the template

* small change to clipboardService

* splitting getCategoryDependantId into two functions: getCategoryId and setActiveDesc

* fixing minor bug with last commit

* using conditional attributes to remove setActiveAttributes function from treeService and do same work in template.

* deleting unnecessary comment created in previous commit.

* adding a utilsService to remove duplicated code.

* changing function names in utilsService

* changing delete to [delete] to allow HTMLText functions to return an empty string instead of undefined. Also renaming concatStringWithSpaces to generateAriaLabelledByAttr

* generating ids in ngOnInit instead of on the fly, allowing us to use [attr.aria-labelledBy] in the template instead of using setLabelledBy(element). Deleting function utilsService.setLabelledBy.

* fixing small bug with tree service left arrow: was throwing an error when you can't go any further left.

* reformatting html to make it easier to read.

* moving from importing the xml file to using an xml toolbox in the demo.

* fixing minor bugs and removing code relevant only to the music game.

* minor fixes

* adding alerts to copy, paste, and mark actions. renaming blocklyApp.TreeView to blocklyApp.WorkspaceTreeView

* Beginning to add Blockly.msg strings.

* making sure index file is being tracked

* adding all demo bits

* removing demo files from this pull request

* fixing providers, some linting, and removing getInfo() function.

* adding small todo comment for sll@

* adding minimal blockly accessible demo

* removing unnecessary files

* putting package file back

* fixing package file

* fixing msg file

* fixing boot.js file

* fixing boot.js file

* fixing indentation on boot

* fixing indentation on index file.
This commit is contained in:
M
2016-05-23 16:41:13 -07:00
committed by Neil Fraser
parent 0242238a44
commit 741aaef452
2 changed files with 369 additions and 0 deletions

27
demos/accessible/boot.js Normal file
View File

@@ -0,0 +1,27 @@
/**
* Blockly Demos: 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 Starts up Angular app.
* @author madeeha@google.com (Madeeha Ghori)
*/
document.addEventListener('DOMContentLoaded', function() {
ng.platform.browser.bootstrap(blocklyApp.AppView);
});

342
demos/accessible/index.html Normal file
View File

@@ -0,0 +1,342 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>accessibleBlockly Basic Demo</title>
<!-- Load Blockly -->
<script src='../../../blockly_compressed.js'></script>
<script src='../../../blocks_compressed.js'></script>
<script src='../../../javascript_compressed.js'></script>
<script src='../../../msg/js/en.js'></script>
<script src='../../../msg/messages.js'></script>
<!-- Load accessibleBlockly -->
<script src='../../../accessible/libs/es6-shim.min.js'></script>
<script src='../../../accessible/libs/angular2-polyfills.min.js'></script>
<script src='../../../accessible/libs/Rx.umd.min.js'></script>
<script src='../../../accessible/libs/angular2-all.umd.min.js'></script>
<script src='../../../accessible/utils.service.js'></script>
<script src='../../../accessible/clipboard.service.js'></script>
<script src='../../../accessible/tree.service.js'></script>
<script src='../../../accessible/fieldview.component.js'></script>
<script src='../../../accessible/workspace_treeview.component.js'></script>
<script src='../../../accessible/toolbox_treeview.component.js'></script>
<script src='../../../accessible/toolboxview.component.js'></script>
<script src='../../../accessible/workspaceview.component.js'></script>
<script src='../../../accessible/appview.component.js'></script>
<link rel="stylesheet" type="text/css" href="../../../media/accessible.css">
</head>
<body>
<blockly-app></blockly-app>
<script src='boot.js'></script>
<xml id="blockly-toolbox-xml" style='display: none'>
<category name='Logic' colour='210'>
<block type='controls_if'></block>
<block type='logic_compare'></block>
<block type='logic_operation'></block>
<block type='logic_negate'></block>
<block type='logic_boolean'></block>
<block type='logic_null' disabled='true'></block>
<block type='logic_ternary'></block>
</category>
<category name='Loops' colour='120'>
<block type='controls_repeat_ext'>
<value name='TIMES'>
<shadow type='math_number'>
<field name='NUM'>10</field>
</shadow>
</value>
</block>
<block type='controls_repeat' disabled='true'></block>
<block type='controls_whileUntil'></block>
<block type='controls_for'>
<value name='FROM'>
<shadow type='math_number'>
<field name='NUM'>1</field>
</shadow>
</value>
<value name='TO'>
<shadow type='math_number'>
<field name='NUM'>10</field>
</shadow>
</value>
<value name='BY'>
<shadow type='math_number'>
<field name='NUM'>1</field>
</shadow>
</value>
</block>
<block type='controls_forEach'></block>
<block type='controls_flow_statements'></block>
</category>
<category name='Math' colour='230'>
<block type='math_number' gap='32'></block>
<block type='math_arithmetic'>
<value name='A'>
<shadow type='math_number'>
<field name='NUM'>1</field>
</shadow>
</value>
<value name='B'>
<shadow type='math_number'>
<field name='NUM'>1</field>
</shadow>
</value>
</block>
<block type='math_single'>
<value name='NUM'>
<shadow type='math_number'>
<field name='NUM'>9</field>
</shadow>
</value>
</block>
<block type='math_trig'>
<value name='NUM'>
<shadow type='math_number'>
<field name='NUM'>45</field>
</shadow>
</value>
</block>
<block type='math_constant'></block>
<block type='math_number_property'>
<value name='NUMBER_TO_CHECK'>
<shadow type='math_number'>
<field name='NUM'>0</field>
</shadow>
</value>
</block>
<block type='math_change'>
<value name='DELTA'>
<shadow type='math_number'>
<field name='NUM'>1</field>
</shadow>
</value>
</block>
<block type='math_round'>
<value name='NUM'>
<shadow type='math_number'>
<field name='NUM'>3.1</field>
</shadow>
</value>
</block>
<block type='math_on_list'></block>
<block type='math_modulo'>
<value name='DIVIDEND'>
<shadow type='math_number'>
<field name='NUM'>64</field>
</shadow>
</value>
<value name='DIVISOR'>
<shadow type='math_number'>
<field name='NUM'>10</field>
</shadow>
</value>
</block>
<block type='math_constrain'>
<value name='VALUE'>
<shadow type='math_number'>
<field name='NUM'>50</field>
</shadow>
</value>
<value name='LOW'>
<shadow type='math_number'>
<field name='NUM'>1</field>
</shadow>
</value>
<value name='HIGH'>
<shadow type='math_number'>
<field name='NUM'>100</field>
</shadow>
</value>
</block>
<block type='math_random_int'>
<value name='FROM'>
<shadow type='math_number'>
<field name='NUM'>1</field>
</shadow>
</value>
<value name='TO'>
<shadow type='math_number'>
<field name='NUM'>100</field>
</shadow>
</value>
</block>
<block type='math_random_float'></block>
</category>
<category name='Text' colour='160'>
<block type='text'></block>
<block type='text_join'></block>
<block type='text_append'>
<value name='TEXT'>
<shadow type='text'></shadow>
</value>
</block>
<block type='text_length'>
<value name='VALUE'>
<shadow type='text'>
<field name='TEXT'>abc</field>
</shadow>
</value>
</block>
<block type='text_isEmpty'>
<value name='VALUE'>
<shadow type='text'>
<field name='TEXT'></field>
</shadow>
</value>
</block>
<block type='text_indexOf'>
<value name='VALUE'>
<block type='variables_get'>
<field name='VAR'>text</field>
</block>
</value>
<value name='FIND'>
<shadow type='text'>
<field name='TEXT'>abc</field>
</shadow>
</value>
</block>
<block type='text_charAt'>
<value name='VALUE'>
<block type='variables_get'>
<field name='VAR'>text</field>
</block>
</value>
</block>
<block type='text_getSubstring'>
<value name='STRING'>
<block type='variables_get'>
<field name='VAR'>text</field>
</block>
</value>
</block>
<block type='text_changeCase'>
<value name='TEXT'>
<shadow type='text'>
<field name='TEXT'>abc</field>
</shadow>
</value>
</block>
<block type='text_trim'>
<value name='TEXT'>
<shadow type='text'>
<field name='TEXT'>abc</field>
</shadow>
</value>
</block>
<block type='text_print'>
<value name='TEXT'>
<shadow type='text'>
<field name='TEXT'>abc</field>
</shadow>
</value>
</block>
<block type='text_prompt_ext'>
<value name='TEXT'>
<shadow type='text'>
<field name='TEXT'>abc</field>
</shadow>
</value>
</block>
</category>
<category name='Lists' colour='260'>
<block type='lists_create_with'>
<mutation items='0'></mutation>
</block>
<block type='lists_create_with'></block>
<block type='lists_repeat'>
<value name='NUM'>
<shadow type='math_number'>
<field name='NUM'>5</field>
</shadow>
</value>
</block>
<block type='lists_length'></block>
<block type='lists_isEmpty'></block>
<block type='lists_indexOf'>
<value name='VALUE'>
<block type='variables_get'>
<field name='VAR'>list</field>
</block>
</value>
</block>
<block type='lists_getIndex'>
<value name='VALUE'>
<block type='variables_get'>
<field name='VAR'>list</field>
</block>
</value>
</block>
<block type='lists_setIndex'>
<value name='LIST'>
<block type='variables_get'>
<field name='VAR'>list</field>
</block>
</value>
</block>
<block type='lists_getSublist'>
<value name='LIST'>
<block type='variables_get'>
<field name='VAR'>list</field>
</block>
</value>
</block>
<block type='lists_split'>
<value name='DELIM'>
<shadow type='text'>
<field name='TEXT'>,</field>
</shadow>
</value>
</block>
</category>
<category name='Colour' colour='20'>
<block type='colour_picker'></block>
<block type='colour_random'></block>
<block type='colour_rgb'>
<value name='RED'>
<shadow type='math_number'>
<field name='NUM'>100</field>
</shadow>
</value>
<value name='GREEN'>
<shadow type='math_number'>
<field name='NUM'>50</field>
</shadow>
</value>
<value name='BLUE'>
<shadow type='math_number'>
<field name='NUM'>0</field>
</shadow>
</value>
</block>
<block type='colour_blend'>
<value name='COLOUR1'>
<shadow type='colour_picker'>
<field name='COLOUR'>#ff0000</field>
</shadow>
</value>
<value name='COLOUR2'>
<shadow type='colour_picker'>
<field name='COLOUR'>#3333ff</field>
</shadow>
</value>
<value name='RATIO'>
<shadow type='math_number'>
<field name='NUM'>0.5</field>
</shadow>
</value>
</block>
</category>
<sep></sep>
<category name='Variables' colour='330' custom='VARIABLE'></category>
<category name='Functions' colour='290' custom='PROCEDURE'></category>
</xml>
</body>
</html>