Advanced User Interface Controls and Components
Event log:
This sample presents most of events that are fired from Menu directive. Depending on action, a specific event is fired, which you can handle by simple creating an event handler. Here is list of events that are supported:
Depending on some conditions, when handling some of above events you can prevent the default action to proceed, by canceling the operation.
In this sample event log will not register add/remove and style events, because this kind of operations are not demonstrated here.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/integralui.menu.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.menu.min.js"></script>
</head>
<body>
<div ng-app="appModule" ng-controller="appCtrl">
<iui-menu name="{{menuName}}" items="data" item-icon="defaultIcon" events="menuEvents" enabled="menuEnabled"></iui-menu>
<label><input type="checkbox" ng-click="toggleEnabled()" checked="checked" /> Enabled</label><br />
<div class="event-block">
<button type="button" ng-click="clearEventLog()" style="float:right;margin:3px 12px; width:50px">Clear</button>
<p style="margin:0 10px; padding: 3px; border-bottom: thin solid #c5c5c5">Event log:</p>
<ul class="event-log">
<li ng-repeat="ev in eventLog"><span class="event-name">{{ev.name}}</span>{{ev.info}}<span class="event-value">{{ev.value}}</span></li>
</ul>
</div>
</div>
</body>
</html>
angular
.module("appModule", ["integralui"])
.controller("appCtrl", ["$scope", "IntegralUIMenuService", "$timeout", function($scope, $menuService, $timeout){
$scope.menuName = "menuSample";
$scope.defaultIcon = 'icons-medium empty';
$scope.data = [];
$scope.menuEnabled = true;
var flatList = [
{ "id": 1, "text": "File", "icon": "" },
{ "id": 11, "pid": 1, "text": "New", "icon": "icons-medium new-document" },
{ "id": 111, "pid": 11, "text": "Project", "icon": "" },
{ "id": 112, "pid": 11, "text": "Window", "icon": "" },
{ "id": 12, "pid": 1, "text": "Open" },
{ "id": 13, "pid": 1, "text": "Save As...", "icon": "icons-medium save" },
{ "id": 14, "pid": 1, "text": "Save All" },
{ "id": 15, "pid": 1, "type": "separator" },
{ "id": 16, "pid": 1, "text": "Page Setup" },
{ "id": 17, "pid": 1, "text": "Print", "icon": "icons-medium print" },
{ "id": 18, "pid": 1, "type": "separator" },
{ "id": 19, "pid": 1, "text": "Exit" },
{ "id": 2, "text": "Edit", "icon": "" },
{ "id": 21, "pid": 2, "text": "Undo" },
{ "id": 22, "pid": 2, "text": "Redo" },
{ "id": 23, "pid": 2, "type": "separator" },
{ "id": 24, "pid": 2, "text": "Cut" },
{ "id": 25, "pid": 2, "text": "Copy", "icon": "icons-medium copy" },
{ "id": 26, "pid": 2, "text": "Paste" },
{ "id": 27, "pid": 2, "text": "Delete", "icon": "icons-medium delete-document" },
{ "id": 3, "text": "View", "icon": "" },
{ "id": 31, "pid": 3, "text": "Print Layout" },
{ "id": 32, "pid": 3, "text": "Zoom", "icon": "icons-medium zoom" },
{ "id": 321, "pid": 32, "text": "Zoom In", "icon": "icons-medium zoom-in" },
{ "id": 322, "pid": 32, "text": "Zoom Out", "icon": "icons-medium zoom-out" },
{ "id": 323, "pid": 32, "type": "separator" },
{ "id": 324, "pid": 32, "text": "Restore" },
{ "id": 33, "pid": 3, "type": "separator" },
{ "id": 34, "pid": 3, "text": "Full Screen" },
{ "id": 4, "text": "Help", "icon": "" },
{ "id": 41, "pid": 4, "text": "Search", "icon": "" },
{ "id": 42, "pid": 4, "text": "Documents", "icon": "" },
{ "id": 43, "pid": 4, "type": "separator", "icon": "" },
{ "id": 44, "pid": 4, "text": "About", "icon": "" }
];
var initTimer = $timeout(function(){
$menuService.loadData($scope.menuName, flatList);
$menuService.updateLayout($scope.menuName);
}, 1);
$scope.eventLog = [];
$scope.onClose = function(e){
$scope.eventLog.unshift({ name: "close", info: " event was fired when sub-menu is closing for menu item: ", value: e.item ? e.item.text : '' });
}
$scope.onEnabledChanged = function(e){
$scope.eventLog.unshift({ name: "enabledChanged", info: " event was fired when Menu becomes enabled or disabled, enabled property value set to: ", value: e.enabled });
}
$scope.onItemClick = function(e){
$scope.eventLog.unshift({ name: "itemClick", info: " event was fired when menu item was clicked: ", value: e.item ? e.item.text : '' });
$scope.$apply();
}
$scope.onItemHover = function(e){
$scope.eventLog.unshift({ name: "itemHover", info: " event was fired when mouse cursor hovers over menu item: ", value: e.item ? e.item.text : '' });
$scope.$apply();
}
$scope.onOpen = function(e){
$scope.eventLog.unshift({ name: "open", info: " event was fired when sub-menu starts to open for menu item: ", value: e.item ? e.item.text : '' });
}
$scope.menuEvents = {
close: function(e){
return $scope.onClose(e);
},
enabledChanged: function(e){
return $scope.onEnabledChanged(e);
},
itemClick: function(e){
return $scope.onItemClick(e);
},
itemHover: function(e){
return $scope.onItemHover(e);
},
open: function(e){
return $scope.onOpen(e);
}
}
$scope.clearEventLog = function(){
$scope.eventLog.length = 0;
}
$scope.toggleEnabled = function(){
$scope.menuEnabled = !$scope.menuEnabled;
}
}]);
.event-panel
{
width: 600px;
}
.event-block
{
width: 700px;
height: 200px;
}
.event-log
{
height: 168px;
}
.icons-medium
{
background-image: url(../resources/icons-x24.png);
background-repeat: no-repeat;
display: inline-block;
margin: 0 1px;
overflow: hidden;
padding: 0 !important;
width: 24px;
height: 24px;
vertical-align: middle;
}
.iui-menu
{
width: 500px;
}
.iui-menu-item
{
width: 125px;
}
.iui-menu-item-content
{
margin-left: 7px;
}