LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeView / Animated Visibility of ExpandBox


This sample shows how to show/hide expand boxes in the TreeView using a CSS animation.

Whenever mouse cursor hovers over TreeView space, the expand boxes will appear slowly become fully visible. After mouse cursor leaves the TreeView space, the expand boxes will remain visible for 1s and than slowly become hidden.

<!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}}" class="directive" items="data" ng-mouseenter="onMouseEnter()" ng-mouseleave="onMouseLeave()" show-expand-boxes="isExpandBoxVisible"></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: "Item1",

items: [

{ id: 11, pid: 1, text: "Item11" },

{

id: 12,

pid: 1,

text: "Item12",

items: [

{ id: 121, pid: 12, text: "Item121" },

{

id: 122,

pid: 12,

text: "Item122",

expanded: false,

items: [

{ id: 1221, pid: 122, text: "Item1221" },

{ id: 1222, pid: 122, text: "Item1222" }

]

},

{ id: 123, pid: 12, text: "Item123" },

{ id: 124, pid: 12, text: "Item124" },

{ id: 125, pid: 12, text: "Item125" }

]

},

{ id: 13, pid: 1, text: "Item13" },

{

id: 14,

pid: 1,

text: "Item14",

items: [

{ id: 141, pid: 14, text: "Item141" },

{ id: 142, pid: 14, text: "Item142" }

]

}

]

},

{

id: 2,

text: "Item2",

expanded: false,

items: [

{ id: 21, pid: 2, text: "Item21" },

{ id: 22, pid: 2, text: "Item22" },

{

id: 23,

pid: 2,

text: "Item23",

expanded: false,

items: [

{ id: 231, pid: 23, text: "Item231" },

{ id: 232, pid: 23, text: "Item232" }

]

}

]

},

{ id: 3, text: "Item3" },

{ id: 4, text: "Item4" },

{ id: 5, text: "Item5" },

{

id: 6,

text: "Item6",

items: [

{ id: 61, pid: 6, text: "Item61" },

{ id: 62, pid: 6, text: "Item62" }

]

},

{ id: 7, text: "Item7" }

];

 

$scope.isExpandBoxVisible = false;

 

$scope.onMouseEnter = function(){

$scope.isExpandBoxVisible = true;

}

 

$scope.onMouseLeave = function(){

$timeout(function(){

$scope.isExpandBoxVisible = false;

}, 1400);

}

}]);

.directive

{

width: 400px;

height: 400px;

}

.iui-treeview-item

{

margin: 2px 0;

}

.iui-treeview-expand-box

{

animation: leave 1.0s 1s 1 forwards;

}

@keyframes leave

{

0% { opacity: 1; }

100% { opacity: 0; }

}

.iui-treeview:hover .iui-treeview-expand-box

{

animation: enter 1.0s 0s 1 forwards;

}

@keyframes enter

{

0% { opacity: 0; }

100% { opacity: 1; }

}