Skip to content
This repository has been archived by the owner on Feb 12, 2022. It is now read-only.

Gh1994 keyboard navigation of open empty folder in tree should work as expected #2000

Merged
Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
e8f18cf
(GH1994) adds stub of unit test for reported bug
Jun 21, 2017
ee22a86
(GH1994) changes variable name for clarity
Jun 22, 2017
2f7d4c7
(GH1994) tests down arrow press between siblings
Jun 22, 2017
39055be
(GH1994) removes accidentally left in console statment
Jun 22, 2017
70e781c
(GH1994) breaks data out into separate files
Jun 22, 2017
12a4478
(GH1994) adds example of a tree that consumes a static JSON array
Jun 23, 2017
558fd6c
(GH1994) tests down arrow keypress on open empty folder
Jun 23, 2017
9943e3b
(GH1994) merges static data tree changes
Jun 24, 2017
f4f6631
(GH1994) removed recently added unreleased now redundant populate.fu.…
Jun 24, 2017
2653f66
(GH1994) listen for initialized instead of loaded
Jun 24, 2017
d4b1bda
(GH1994) cleans up down key module tests a bit
Jun 24, 2017
c8ef917
(GH1994) cleans up staticDataTree.html a bit. Can be used for testing…
Jun 24, 2017
26e60eb
(GH1994) makes up and down arrows move over open empty branches as ex…
Jun 24, 2017
cd82ee2
(GH1994) adds unit tests for empty branch keyboard nav on tree
Jun 24, 2017
a18d24d
Merge branch 'master' into GH1994---keyboard-navigation-of-open-empty…
Jun 27, 2017
445452e
Merge remote-tracking branch 'origin/master' into GH1994---keyboard-n…
Jun 27, 2017
c956e9e
Merge branch 'master' of github.com:ExactTarget/fuelux into GH1994---…
Jun 27, 2017
7f6730a
Merge branch 'GH1994---keyboard-navigation-of-open-empty-folder-in-tr…
Jun 27, 2017
9f323ff
(GH1994) merges latest from master
Jun 28, 2017
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
158 changes: 158 additions & 0 deletions dev/staticDataTree.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
<!DOCTYPE html>

<html lang="en" class="fuelux">
<head>
<meta charset="utf-8">
<title>staticConsumer.html</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="../bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">

<!--<link href="../dist/css/fuelux.css" rel="stylesheet" type="text/css">-->

<!--CLIENT-SIDE LESS COMPILATION FOR WATCHER-LESS DEV-->
<link href="../less/fuelux.less" rel="stylesheet/less" type="text/css"/>

<style>
/* ================ */
/* your styles here */
/* ================ */

:focus {
outline: 1px solid red !important;
}

</style>

</head>

<body>
<section id="tree">
<h2>Static Data Tree</h2>
<div class="thin-box">
<!-- Utilizes Handlebars templates (see index.js) -->
<p>This file is useful for testing static data tree & keyboard navigation on tree</p>
<div id="myTreeWrapper"></div>
</div>
</section>
</body>

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>

<script src="../bower_components/requirejs/require.js" type="text/javascript"></script>
<script type="text/javascript">
(function () {
requirejs.config({
config: {
moment: {
noGlobal: true
}
},
paths: {
jquery: '../bower_components/jquery/dist/jquery',
underscore: '../bower_components/underscore/underscore',
bootstrap: '../bower_components/bootstrap/dist/js/bootstrap',
moment: '../bower_components/moment/min/moment-with-locales.min',
fuelux: '../js',
hbs: '../bower_components/require-handlebars-plugin/hbs',
fuelux_templates: '../templates/handlebars/fuelux',
bootstrap_templates: '../templates/handlebars/bootstrap',
data: '../data'
},
shim: {
'bootstrap': {
deps: ['jquery'],
exports: 'bootstrap'
}
},
hbs: {
partialsUrl: 'templates/handlebars'
}
});

require(['data', 'jquery', 'underscore', 'hbs', 'hbs!fuelux_templates/tree', 'fuelux/all'], function (data, $, _, hbs, tree) {
/* fully loaded with fuelux goodness and all it's dependencies */

var $myTreeWrapper = $('#myTreeWrapper');
$myTreeWrapper.html(tree({id: 'myTree', folderSelect: true, multiSelect: true}));

var staticData = [
{
name: 'Empty Folder',
type: 'folder',
attr: {
id: 'emptyFolder'
},
children: []
},
{
name: 'Full Folder',
type: 'folder',
attr: {
id: 'fullFolder'
},
children: [
{
name: 'Full Folder 2',
type: 'folder',
attr: {
id: 'emptyFolder2'
},
children: [
{
name: 'Folder Sibling 3',
type: 'item',
attr: {
id: 'sibling3',
'data-icon': 'glyphicon glyphicon-file'
}
},
{
name: 'Folder Sibling 4',
type: 'item',
attr: {
id: 'sibling4',
'data-icon': 'glyphicon glyphicon-file'
}
}
]
},
{
name: 'Folder Sibling 2',
type: 'item',
attr: {
id: 'sibling2',
'data-icon': 'glyphicon glyphicon-file'
}
}
]
},
{
name: 'Empty Folder',
type: 'folder',
attr: {
id: 'emptyFolder'
},
children: []
},
{
name: 'Folder Sibling',
type: 'item',
attr: {
id: 'sibling1',
'data-icon': 'glyphicon glyphicon-file'
}
}
];

var $tree = $('#myTree');

$tree.tree({
staticData: staticData
});
});
})();
</script>

</html>
</html>
Loading