Fuel UX Boilerplate

Boilerplate JSFiddle you can use for testing latest 3x Fuel UX release.

by Christopher McCulloh

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://fuelux-snippets.herokuapp.com/img/favicon.ico"></script>
<script src="//www.fuelcdn.com/fuelux-utilities/1.0.0/js/fuelux-utilities.min.js"></script>
<script src="https://www.fuelcdn.com/fuelux/3/js/fuelux.min.js"></script>
<link rel="stylesheet" href="https://www.fuelcdn.com/fuelux/3/css/fuelux.min.css">
<body style="padding: 10px;" class="fuelux">
<ul class="tree tree-folder-select" role="tree" id="myTree">
  <li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
    <div class="tree-branch-header">
      <button type="button" class="glyphicon icon-caret glyphicon-play"><span class="sr-only">Open</span></button>
      <button type="button" class="tree-branch-name">
        <span class="glyphicon icon-folder glyphicon-folder-close"></span>
        <span class="tree-label"></span>
      </button>
    </div>
    <ul class="tree-branch-children" role="group"></ul>
    <div class="tree-loader" role="alert">Loading...</div>
  </li>
  <li class="tree-item hide" data-template="treeitem" role="treeitem">
    <button type="button" class="tree-item-name">
      <span class="glyphicon icon-item fueluxicon-bullet"></span>
      <span class="tree-label"></span>
    </button>
  </li>
</ul>
</body>

CSS

body {
    padding: 20px;
}

JavaScript

var treeData = {
	'folder1': {
    name: 'Ascending',
    type: 'folder',
    dataAttributes: {
      id: 'folder1'
    }
    children: [
      {
        name: 'Nuetral',
        type: 'item',
        dataAttributes: {
          id: 'item1'
        }
      }
    ]
  },
  {
    name: 'Descending',
    type: 'folder',
    dataAttributes: {
      id: 'folder2'
    }
  },
  {
    name: 'Ascending and Descending',
    type: 'folder',
    dataAttributes: {
      id: 'folder3'
    }
  },
  {
    name: 'Nuetral',
    type: 'item',
    dataAttributes: {
      id: 'item1'
    }
  }
}

$('#myTree').tree({
			dataSource: function (options, callback) {
      console.log('options', options);
      
      if(options.dataAttributes && options.dataAttributes.id){
      	console.log('is branch');
      }else{
      	console.log('is root');
      }
      
				callback({data: [
							{
								name: 'Ascending and Descending',
								type: 'folder',
								dataAttributes: {
									id: 'folder1'
								}
							}
              ]})
			},
			multiSelect: true,
			cacheItems: true,
			folderSelect: false,
		});