LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


Accordion / Events

{{group.name}} Content

Event log:

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



This sample presents most of events that are fired from Accordion directive. Depending on action, a specific event is fired, which you can handle by simple creating an event handler. From control panel, you can change whether Accordion is enabled or disabled.

Here is list of events that are supported:

  • afterCollapse - Occurs after group is collapsed
  • afterExpand - Occurs after group is expanded
  • afterSelect - Occurs after group is selected
  • beforeCollapse - Occurs before group is collapsed
  • beforeExpand - Occurs before group is expanded
  • beforeSelect - Occurs before group is selected
  • clear - Occurs when all groups are removed
  • groupAdding - Occurs before group is added
  • groupAdded - Occurs after group is added
  • groupClick - Occurs when group is clicked
  • groupDblClick - Occurs when group is double clicked
  • groupHover - Occurs when group is hovered
  • groupRemoving - Occurs before group is removed
  • groupRemoved - Occurs after group is removed
  • groupRightClick - Occurs when group is right-clicked
  • enabledChanged - Occurs when accordion is enabled or disabled
  • styleChanged - Occurs when accordion style has changed

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 of groups nor style changes events, because changes to the Accordion appearance are not demonstrated here.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.accordion.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.accordion.min.js"></script>

</head>

<body>

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

<iui-accordion name="{{ctrlName}}" class="directive" groups="groups" enabled="ctrlEnabled" events="ctrlEvents">

<iui-accordion-group ng-repeat="group in groups" name="{{group.name}}" heading="{{group.text}}">

<div class="group-content">

{{group.name}} Content

</div>

</iui-accordion-group>

</iui-accordion>

</div>

</body>

</html>

angular

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

.controller("appCtrl", function($scope){

$scope.ctrlName = "ctrlSample";

$scope.ctrlEnabled = true;

 

$scope.groups = [

{ id: 1, name: 'Group1', text: 'Header 1' },

{ id: 2, name: 'Group2', text: 'Header 2' },

{ id: 3, name: 'Group3', text: 'Header 3' }

];

 

$scope.eventLog = [];

 

$scope.onBeforeCollapse = function(e){

$scope.eventLog.unshift({ name: "beforeCollapse", info: " event was fired before group is collapsed: ", value: e.group.text });

}

 

$scope.onBeforeExpand = function(e){

$scope.eventLog.unshift({ name: "beforeExpand", info: " event was fired before group is expanded: ", value: e.group.text });

}

 

$scope.onBeforeSelect = function(e){

$scope.eventLog.unshift({ name: "beforeSelect", info: " event was fired before group is selected: ", value: e.group.text });

}

 

$scope.onAfterCollapse = function(e){

$scope.eventLog.unshift({ name: "afterCollapse", info: " event was fired after group is collapsed: ", value: e.group.text });

}

 

$scope.onAfterExpand = function(e){

$scope.eventLog.unshift({ name: "afterExpand", info: " event was fired after group is expanded: ", value: e.group.text });

}

 

$scope.onAfterSelect = function(e){

$scope.eventLog.unshift({ name: "afterSelect", info: " event was fired after group is selected: ", value: e.group.text });

}

 

$scope.onGroupClick = function(e){

$scope.eventLog.unshift({ name: "groupClick", info: " event was fired when group header is clicked: ", value: e.group.text });

$scope.$apply();

}

 

$scope.onGroupDblClick = function(e){

$scope.eventLog.unshift({ name: "groupDblClick", info: " event was fired when group header is double-clicked: ", value: e.group.text });

$scope.$apply();

}

 

$scope.onGroupHover = function(e){

$scope.eventLog.unshift({ name: "groupHover", info: " event was fired when group header is hovered: ", value: e.group.text });

$scope.$apply();

}

 

$scope.onGroupRightClick = function(e){

$scope.eventLog.unshift({ name: "groupRightClick", info: " event was fired when group header is right-clicked: ", value: e.group.text });

$scope.$apply();

}

 

$scope.onEnabledChanged = function(e){

$scope.eventLog.unshift({ name: "enabledChanged", info: " event was fired when Accordion becomes enabled or disabled, enabled property value set to: ", value: e.enabled });

}

 

$scope.ctrlEvents = {

beforeCollapse: function(e){

return $scope.onBeforeCollapse(e);

},

beforeExpand: function(e){

return $scope.onBeforeExpand(e);

},

beforeSelect: function(e){

return $scope.onBeforeSelect(e);

},

afterCollapse: function(e){

return $scope.onAfterCollapse(e);

},

afterExpand: function(e){

return $scope.onAfterExpand(e);

},

afterSelect: function(e){

return $scope.onAfterSelect(e);

},

groupClick: function(e){

return $scope.onGroupClick(e);

},

groupDblClick: function(e){

return $scope.onGroupDblClick(e);

},

groupHover: function(e){

return $scope.onGroupHover(e);

},

groupRightClick: function(e){

return $scope.onGroupRightClick(e);

},

enabledChanged: function(e){

return $scope.onEnabledChanged(e);

}

}

 

$scope.clearEventLog = function(){

$scope.eventLog.length = 0;

}

});

.group-content

{

padding: 25% 10px;

text-align: center;

}

.event-block

{

width: 450px;

height: 332px;

}

.event-log

{

height: 302px;

}