From a2307d9d51000a3257d0bcd2f18d95a6b4f3a4bc Mon Sep 17 00:00:00 2001 From: Greg Gay Date: Thu, 19 Jul 2018 12:36:21 -0400 Subject: [PATCH] added inaccessible tree menu --- assets/ik_treemenu.js | 196 ++++++++++++++++++++++++++++++++++++++++++ tree.html | 60 +++++++++++++ 2 files changed, 256 insertions(+) create mode 100644 assets/ik_treemenu.js create mode 100644 tree.html diff --git a/assets/ik_treemenu.js b/assets/ik_treemenu.js new file mode 100644 index 000000000..51b4d080e --- /dev/null +++ b/assets/ik_treemenu.js @@ -0,0 +1,196 @@ +;(function ( $, window, document, undefined ) { + + var pluginName = 'ik_treemenu', + defaults = { + 'menuTitle': 'Breakfast Menu', + 'expandAll': true + }; + + /** + * @constructs Plugin + * @param {Object} element - Current DOM element from selected collection. + * @param {Object} [options] - Configuration options. + * @param {number} [options.menuTitle] - Menu title appers above the tree. + * @param {number} [options.expandAll] - Expands all tree branches when true. + */ + function Plugin( element, options ) { + + this._name = pluginName; + this._defaults = defaults; + this.element = $(element); + this.options = $.extend( {}, defaults, options) ; + + this.init(); + } + + /** Initializes plugin. */ + Plugin.prototype.init = function () { + + var id, $elem, plugin; + + plugin = this; + $elem = plugin.element; + id = 'tree' + $('.ik_treemenu').length; // create unique id + + $elem.addClass('ik_treemenu'); + + $('
') // add div element to be used with aria-labelledby attribute of the menu + .text(plugin.options.instructions) // get instruction text from plugin options + .addClass('ik_readersonly') // hide element from visual display + .attr({ + 'id': id + '_instructions', + }) + .appendTo($elem); + + $('
') // add menu title + .addClass('title') + .text( this.options.menuTitle ) + .attr({ + 'id': id + '_title' + }) + .prependTo($elem); + + $elem + .find('ul:first') // set topmost ul element as a tree container + .attr({ + 'id': id + }); + + $elem // set all li elements as tree folders and items + .find('li') + .css({ 'list-style': 'none' }) + .each(function(i, el) { + + var $me; + + $me = $(el); + + $me.attr({ + 'id': id + '_menuitem_' + i + }); + + $($me.contents()[0]).wrap(''); // wrap text element of each treitem with span element + + if ($me.children('ul').length) { // if the current treeitem has submenu + + if (plugin.options.expandAll) { // expand or collapse all tree levels based on configuration + // don't do anything + } else { + $me.addClass('collapsed'); + } + + $me + .children('span') + .addClass('folder') + ; + + } else { + + //aria-selected goes here + + } + + }) + .on('click', {'plugin': plugin}, plugin.onClick); + + }; + + /** + * Selects treeitem. + * + * @param {object} $item - jQuery object containing treeitem to select. + * @param {object} plugin - reference to plugin. + */ + Plugin.prototype.selectItem = function($item, plugin) { + var $elem = plugin.element; + + $elem.find('.focused') // remove highlight form previousely selected treeitem + .removeClass('focused'); + + if ($item.children('ul').length) { // highlight selected treeitem + $item.children('span').addClass('focused'); + } else { + $item.addClass('focused'); + } + + $item.focus(); + }; + + /** + * Toggles submenu. + * + * @param {object} $item - jQuery object containing treeitem with submenu. + */ + Plugin.prototype.toggleSubmenu = function($item) { + + if($item.children('ul').length) { // check if the treeitem contains submenu + + if ($item.hasClass('collapsed')) { // expand if collapsed + + $item.removeClass('collapsed'); + + } else { // otherwise collapse + + $item.addClass('collapsed'); + + } + + } + } + + /** + * Handles mouseover event on header button. + * + * @param {Object} event - Event object. + * @param {object} event.data - Event data. + * @param {object} event.data.plugin - Reference to plugin. + */ + Plugin.prototype.onMouseOver = function (event) { + + var plugin = event.data.plugin, + $me = $(event.currentTarget); + + event.stopPropagation(); + + plugin.element // remove highlight form previous treeitem + .find('.mouseover') + .removeClass('mouseover'); + + $me.children('span') // add highlight to currently selected treeitem + .addClass('mouseover'); + + } + + /** + * Handles click event on header button. + * + * @param {Object} event - Event object. + * @param {object} event.data - Event data. + * @param {object} event.data.plugin - Reference to plugin. + */ + Plugin.prototype.onClick = function (event) { + + var plugin = event.data.plugin, + $me = $(event.currentTarget); + + event.preventDefault(); + event.stopPropagation(); + + plugin.toggleSubmenu($me); + plugin.selectItem($me, plugin); + }; + + $.fn[pluginName] = function ( options ) { + + return this.each(function () { + + if ( !$.data(this, pluginName )) { + $.data( this, pluginName, + new Plugin( this, options )); + } + + }); + + } + +})( jQuery, window, document ); \ No newline at end of file diff --git a/tree.html b/tree.html new file mode 100644 index 000000000..b5b9ac436 --- /dev/null +++ b/tree.html @@ -0,0 +1,60 @@ + + + + + + IK Library: Tree Menu + + + + + + + +
+ ← Index +

Tree Menu

+
+ +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a mi at enim scelerisque laoreet. In hac habitasse platea dictumst. Sed eu sodales sapien, sed venenatis ex. Curabitur non condimentum tellus. Ut quis sapien tempus nunc vehicula suscipit sit amet non neque. Nullam pellentesque at metus et tristique. Praesent et ligula orci. Vestibulum mattis vel lacus quis pulvinar.

+

Curabitur elementum at quam varius fermentum. Duis ut bibendum ex. Suspendisse potenti. Aenean massa erat, tempor eu erat eu, tempus viverra lectus. Sed efficitur, ligula in cursus vulputate, lacus odio volutpat mauris, ac pulvinar ex velit id neque. Praesent ultricies augue vel eros suscipit convallis. Etiam aliquet tristique convallis. Vestibulum eu fringilla leo, ut ultrices metus. Integer mattis tempus auctor. Integer nec magna at metus suscipit sagittis at non risus. Vestibulum tincidunt, sem et suscipit pellentesque, metus nisl varius arcu, sed finibus felis purus ac nisi. Aliquam sollicitudin, lectus non sollicitudin consectetur, nibh mi porta mi, eget vestibulum magna ipsum sed elit. Duis sapien dolor, auctor non nunc vitae, convallis pretium felis. Sed consectetur at ligula a pulvinar. Nulla et felis a augue rutrum elementum vitae id nisl.

+
+
+
+ + \ No newline at end of file