LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


Menu / Events

Event log:

  • {{ev.name}}{{ev.info}}{{ev.value}}

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:

  • close - Occurs when sub-menu is closing
  • enabledChanged - Occurs when enabled property changes its value
  • itemAdding - Occurs before a menu item is added
  • itemAdded - Occurs after a menu item is added
  • itemClick - Occurs when menu item is clicked
  • itemHover - Occurs when mouse cursor hovers over menu item
  • itemRemoving - Occurs before menu item is removed
  • itemRemoved - Occurs after menu item is removed
  • open - Occurs when sub-menu starts to open
  • styleChanged - Occurs when control style changes

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;

}