Tree - Revision history

Mudrd8mz: Text replacement - "`" to ""`


2021-07-15T08:19:12Z
Text replacement - "<code (.*)>" to "<syntaxhighlight lang="$1">"

				
				
				
				
				
				← Older revision
				Revision as of 08:19, 15 July 2021
				
Line 11:
Line 11:
To create an aria accessible tree, you must instantiate a child AMD module of the core/tree using Require JS. To create an aria accessible tree, you must instantiate a child AMD module of the core/tree using Require JS.



<code javascript> <syntaxhighlight lang="javascript">
define(['jquery', 'core/tree'], function($, Tree) { define(['jquery', 'core/tree'], function($, Tree) {
     return {      return {
Line 23:
Line 23:
To define a node in your structure, add the "treeitem" role. If the node has children, it must have a child html element with the role "group" to contain it's children. The example shows divs but this is not required; the tree could be constructed with (e.g.) lists if required.   To define a node in your structure, add the "treeitem" role. If the node has children, it must have a child html element with the role "group" to contain it's children. The example shows divs but this is not required; the tree could be constructed with (e.g.) lists if required.  



<code xml> <syntaxhighlight lang="xml">
<div role="tree" id="mytree"> <div role="tree" id="mytree">
     <div role="treeitem" aria-expanded="false">This is an item which has children      <div role="treeitem" aria-expanded="false">This is an item which has children
Line 37:
Line 37:
You will need to target the ''aria-expanded'' attribute of group items to hide and show them. For most cases, this will be sufficient: You will need to target the ''aria-expanded'' attribute of group items to hide and show them. For most cases, this will be sufficient:



<code css> <syntaxhighlight lang="css">
[aria-expanded="false"] > [role="group"] { [aria-expanded="false"] > [role="group"] {
     display: none;      display: none;

`Mudrd8mz: Text replacement - "`" to ""

2021-07-14T20:19:17Z

Text replacement - "</code>" to "</syntaxhighlight>"

← Older revision		Revision as of 20:19, 14 July 2021
Line 19:		Line 19:
	};		};
	});		});
	</~~code~~>		</syntaxhighlight>

	To define a node in your structure, add the "treeitem" role. If the node has children, it must have a child html element with the role "group" to contain it's children. The example shows divs but this is not required; the tree could be constructed with (e.g.) lists if required.		To define a node in your structure, add the "treeitem" role. If the node has children, it must have a child html element with the role "group" to contain it's children. The example shows divs but this is not required; the tree could be constructed with (e.g.) lists if required.
Line 32:		Line 32:
	</div>		</div>
	<div>		<div>
	</~~code~~>		</syntaxhighlight>

	tree.js does not perform the collapse/expand functionality nor does it add (for example) the appropriate indenting or collapse/expand icons. You must supply appropriate markup and CSS to achieve your requirements. You don't have to use divs, a nested list structure will work just as well.		tree.js does not perform the collapse/expand functionality nor does it add (for example) the appropriate indenting or collapse/expand icons. You must supply appropriate markup and CSS to achieve your requirements. You don't have to use divs, a nested list structure will work just as well.
Line 41:		Line 41:
	display: none;		display: none;
	}		}
	</~~code~~>		</syntaxhighlight>

	Tree.js will handle the accessible controls for navigating the tree as well as expanding and collapsing nodes. The controls are as follows:		Tree.js will handle the accessible controls for navigating the tree as well as expanding and collapsing nodes. The controls are as follows:

Michaelh2 at 04:14, 3 November 2020

2020-11-03T04:14:07Z

← Older revision		Revision as of 04:14, 3 November 2020
Line 55:		Line 55:
	* * (asterisk on the numpad): Expand all group nodes.		* * (asterisk on the numpad): Expand all group nodes.
	* Clicking on a parent node will toggle its expanded or collapsed state.		* Clicking on a parent node will toggle its expanded or collapsed state.

			It is possible (from Moodle 3.10) to override the above behaviour for activation keys (enter and space), by adding the ''''data-overrides-tree-activation-key-handler'''' attribute to a tree node. This will prevent Tree.js from triggering its usual callback/redirect behaviour, and instead trigger any custom handler on the node.

	== Code ==		== Code ==

Howardsmiller: /* Using the Tree module */

2017-05-09T08:08:35Z

Using the Tree module

← Older revision		Revision as of 08:08, 9 May 2017
Line 34:		Line 34:
	</code>		</code>

	tree.js does not perform the collapse/expand functionality nor does it add (for example) the appropriate collapse/expand icons. You must supply appropriate markup and CSS to achieve your requirements.		tree.js does not perform the collapse/expand functionality nor does it add (for example) the appropriate indenting or collapse/expand icons. You must supply appropriate markup and CSS to achieve your requirements. You don't have to use divs, a nested list structure will work just as well.
	You will need to target the ''aria-expanded'' attribute of group items to hide and show them. For most cases, this will be sufficient:		You will need to target the ''aria-expanded'' attribute of group items to hide and show them. For most cases, this will be sufficient:

Howardsmiller: /* Using the Tree module */

2017-05-04T10:45:31Z

Using the Tree module

← Older revision		Revision as of 10:45, 4 May 2017
Line 21:		Line 21:
	</code>		</code>

	To define a node in your structure, add the "treeitem" role. If the node has children, it must have a child html element with the role "group" to contain it's children.		To define a node in your structure, add the "treeitem" role. If the node has children, it must have a child html element with the role "group" to contain it's children. The example shows divs but this is not required; the tree could be constructed with (e.g.) lists if required.

	<code xml>		<code xml>

Howardsmiller: /* Using the Tree module */

2017-05-04T10:43:51Z

Using the Tree module

← Older revision		Revision as of 10:43, 4 May 2017
Line 34:		Line 34:
	</code>		</code>

	In the CSS ~~for~~ your ~~page or module, you~~ will need to target the aria-expanded attribute of group items to hide and show them ~~as tree.js does not assume knowledge of how you want expanding and collapsing to work~~. For most cases, this will be sufficient:		tree.js does not perform the collapse/expand functionality nor does it add (for example) the appropriate collapse/expand icons. You must supply appropriate markup and CSS to achieve your requirements.
			You will need to target the ''aria-expanded'' attribute of group items to hide and show them. For most cases, this will be sufficient:

	<code css>		<code css>

Howardsmiller: /* Using the Tree module */

2017-05-04T10:41:06Z

Using the Tree module

← Older revision		Revision as of 10:41, 4 May 2017
Line 6:		Line 6:

	== Using the Tree module ==		== Using the Tree module ==

			The following is a minimal example.

	To create an aria accessible tree, you must instantiate a child AMD module of the core/tree using Require JS.		To create an aria accessible tree, you must instantiate a child AMD module of the core/tree using Require JS.
Line 13:		Line 15:
	return {		return {
	init: function() {		init: function() {
	new Tree("css/jquery selector of the tree container~~");~~		new Tree("#mytree"); // css/jquery selector of the tree container
	}		}
	};		};
Line 22:		Line 24:

	<code xml>		<code xml>
	<div role="treeitem">This is an item which has children		<div role="tree" id="mytree">
	<div role="group">		<div role="treeitem" aria-expanded="false">This is an item which has children
	<div role="treeitem">A child</div>		<div role="group">
	<div role="treeitem">Another child</div>		<div role="treeitem">A child</div>
			<div role="treeitem">Another child</div>
			</div>
	</div>		</div>
	</div>		<div>
	</code>		</code>

Johnok: Fix recommended CSS

2016-08-03T05:56:58Z

Fix recommended CSS

← Older revision		Revision as of 05:56, 3 August 2016
Line 33:		Line 33:

	<code css>		<code css>
	[role="group"] {		[aria-expanded="false"] > [role="group"] {
	display: none;		display: none;
	}
	~~[role="group"][aria-expanded="true"] {~~
	~~display: inline-block;~~
	}		}
	</code>		</code>

Johnok: Fix escaping

2016-05-19T05:58:31Z

Fix escaping

← Older revision		Revision as of 05:58, 19 May 2016
Line 24:		Line 24:
	<div role="treeitem">This is an item which has children		<div role="treeitem">This is an item which has children
	<div role="group">		<div role="group">
	<div role="treeitem">A child~~<~~/div>		<div role="treeitem">A child</div>
	<div role="treeitem">Another child~~<~~/div>		<div role="treeitem">Another child</div>
	</div>		</div>
	</div>		</div>

Johnok: Add example screenshot

2016-05-19T05:58:00Z

Add example screenshot

← Older revision		Revision as of 05:58, 19 May 2016
Line 2:		Line 2:

	The tree is originally based off the [http://oaa-accessibility.org/examplep/treeview1/ tree view example] by the Open Ajax Alliance Accessibility Group. and is designed to comply as much as possible with the [http://www.w3.org/WAI/GL/wiki/Using_ARIA_trees ARIA specification for accessible trees]. For detailed additional information you can read those links.		The tree is originally based off the [http://oaa-accessibility.org/examplep/treeview1/ tree view example] by the Open Ajax Alliance Accessibility Group. and is designed to comply as much as possible with the [http://www.w3.org/WAI/GL/wiki/Using_ARIA_trees ARIA specification for accessible trees]. For detailed additional information you can read those links.

			[[File:TreeExampleNavigation.png\|thumb\|center\|450px\|An example use of the tree module]]

	== Using the Tree module ==		== Using the Tree module ==

← Older revision		Revision as of 08:19, 15 July 2021
Line 11:		Line 11:
	To create an aria accessible tree, you must instantiate a child AMD module of the core/tree using Require JS.		To create an aria accessible tree, you must instantiate a child AMD module of the core/tree using Require JS.

	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	define(['jquery', 'core/tree'], function($, Tree) {		define(['jquery', 'core/tree'], function($, Tree) {
	return {		return {
Line 23:		Line 23:
	To define a node in your structure, add the "treeitem" role. If the node has children, it must have a child html element with the role "group" to contain it's children. The example shows divs but this is not required; the tree could be constructed with (e.g.) lists if required.		To define a node in your structure, add the "treeitem" role. If the node has children, it must have a child html element with the role "group" to contain it's children. The example shows divs but this is not required; the tree could be constructed with (e.g.) lists if required.

	<~~code~~ xml>		<syntaxhighlight lang="xml">
	<div role="tree" id="mytree">		<div role="tree" id="mytree">
	<div role="treeitem" aria-expanded="false">This is an item which has children		<div role="treeitem" aria-expanded="false">This is an item which has children
Line 37:		Line 37:
	You will need to target the ''aria-expanded'' attribute of group items to hide and show them. For most cases, this will be sufficient:		You will need to target the ''aria-expanded'' attribute of group items to hide and show them. For most cases, this will be sufficient:

	<~~code~~ css>		<syntaxhighlight lang="css">
	[aria-expanded="false"] > [role="group"] {		[aria-expanded="false"] > [role="group"] {
	display: none;		display: none;

Tree - Revision history

Mudrd8mz: Text replacement - "" to ""

Mudrd8mz: Text replacement - "" to ""

Michaelh2 at 04:14, 3 November 2020

Howardsmiller: /* Using the Tree module */

Howardsmiller: /* Using the Tree module */

Howardsmiller: /* Using the Tree module */

Howardsmiller: /* Using the Tree module */

Johnok: Fix recommended CSS

Johnok: Fix escaping

Johnok: Add example screenshot

Mudrd8mz: Text replacement - "`" to ""`

`Mudrd8mz: Text replacement - "`" to ""