LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeView / Expand On Hover


In this sample whenever an item is hovered, after 500ms has passed, the item will expand. If during this time frame a hovering item is changed, the previously hovered item will not expand. This allows us to quickly hover over items without expanding them, and only expand an item when requried.

The following methods and events are presented:

  • itemHover an event which is fired whenever a mouse cursor enters the item space
  • expand method which expands the specified item

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.css" />

<link rel="stylesheet" href="css/integralui.treeview.css" />

<link rel="stylesheet" href="css/themes/theme-flat-blue.css" />

<script type="text/javascript" src="external/angular.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.lists.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.treeview.min.js"></script>

</head>

<body>

<div ng-app="appModule" ng-controller="appCtrl">

<iui-treeview name="{{treeName}}" items="data" item-hover="onItemHover(e)" item-click="onItemClick(e)"></iui-treeview>

</div>

</body>

</html>

angular

.module("appModule", ["integralui"])

.controller("appCtrl", ["$scope", "IntegralUITreeViewService", "$timeout", function($scope, $treeService, $timeout){

$scope.treeName = "treeSample";

 

$scope.data = [

{

id: 1,

text: "PC",

items: [

{ id: 11, pid: 1, text: "Action", expanded: false,

items: [

{ id: 111, pid: 11, text: "Diablo 3" },

{ id: 112, pid: 11, text: "Gears of War" },

{ id: 113, pid: 11, text: "F.E.A.R." },

{ id: 114, pid: 11, text: "Path of Exile" },

{ id: 115, pid: 11, text: "Grand Theft Auto IV" },

{ id: 116, pid: 11, text: "Divine Divinity" },

{ id: 117, pid: 11, text: "The Witcher 2" }

]

},

{ id: 12, pid: 1, text: "Driving/Racing", expanded: false,

items: [

{ id: 121, pid: 12, text: "DiRT 3" },

{ id: 122, pid: 12, text: "Ridge Racer Unbounded" },

{ id: 123, pid: 12, text: "TrackMania 2" }

]

},

{ id: 13, pid: 1, text: "Role-Playing", expanded: false,

items: [

{ id: 131, pid: 13, text: "Dark Souls 2" },

{ id: 132, pid: 13, text: "Mass Effect 3" },

{ id: 133, pid: 13, text: "The Elder Scrolls V: Skyrim" },

{ id: 133, pid: 13, text: "Divinity: Original Sin" },

{ id: 133, pid: 13, text: "Fallout: New Vegas" }

]

},

{ id: 14, pid: 1, text: "Shooter", expanded: false,

items: [

{ id: 141, pid: 14, text: "Battlefield: Bad Company 2" },

{ id: 142, pid: 14, text: "Call of Duty: Black Ops" },

{ id: 143, pid: 14, text: "BioShock Infinite" },

{ id: 143, pid: 14, text: "Crysis 2" }

]

}

]

},

{

id: 2,

text: "Xbox One",

expanded: false,

items: [

{ id: 21, pid: 2, text: "Adventure", expanded: false,

items: [

{ id: 211, pid: 21, text: "Assassin's Creed IV" },

{ id: 212, pid: 21, text: "Tomb Raider" },

{ id: 213, pid: 21, text: "Metal Gear Solid V" }

]

},

{ id: 22, pid: 2, text: "Miscellaneous", expanded: false,

items: [

{ id: 221, pid: 22, text: "Peggle 2" }

]

},

{ id: 23, pid: 2, text: "Sports", expanded: false,

items: [

{ id: 231, pid: 23, text: "FIFA 14" },

{ id: 232, pid: 23, text: "Madden NFL 25" }

]

}

]

},

{

id: 3,

text: "PlayStation",

expanded: false,

items: [

{ id: 31, pid: 3, text: "First-Person", expanded: false,

items: [

{ id: 311, pid: 31, text: "Battlefield 4" },

{ id: 312, pid: 31, text: "Call of Duty: Ghosts" },

{ id: 313, pid: 31, text: "Killzone: Shadow Fall" }

]

},

{ id: 32, pid: 3, text: "MMO", expanded: false,

items: [

{ id: 313, pid: 32, text: "Final Fantasy XIV Online" }

]

},

{ id: 33, pid: 3, text: "Platformer", expanded: false,

items: [

{ id: 331, pid: 33, text: "Rayman Legends" },

{ id: 332, pid: 33, text: "Rogue Legacy" },

{ id: 333, pid: 33, text: "1001 Spikes" }

]

}

]

}

];

 

var hoverItem = null;

var expandTimer = null;

 

// Expands the item when mouse cursor hovers over its space

$scope.onItemHover = function(e){

if (hoverItem != e.item){

// Cancel previous expand, because hover item has changed within 500ms time span

if (expandTimer)

$timeout.cancel(expandTimer);

 

// Create a 500ms timer that will expand the hovered item on end

expandTimer = $timeout(function(){

$treeService.expand($scope.treeName, e.item);

}, 500);

 

hoverItem = e.item;

}

}

 

// Expands/Collapse the item when its text is clicked

$scope.onItemClick = function(e){

$treeService.toggle($scope.treeName, e.item);

}

}]);