Skip to content

Instantly share code, notes, and snippets.

@badpenguin
Created September 23, 2016 09:38
Show Gist options
  • Save badpenguin/1fa3faed0ba54983336fb310cafd3cba to your computer and use it in GitHub Desktop.
Save badpenguin/1fa3faed0ba54983336fb310cafd3cba to your computer and use it in GitHub Desktop.
Ionic 1 accordion expanding ion-list
/*
* This is my accordion for Ionic 1 please visit http://www.antoniogallo.it/
*/
angular.module('rootApp').directive('ionItemAccordion', function($log, $ionicScrollDelegate,$ionicPosition, $timeout) {
return {
restrict: 'E',
replace: true,
transclude: true,
require: '^ionList',
scope: {
title: '@',
iconClose: '@',
iconOpen: '@',
iconAlign: '@'
},
template: '<div><ion-item ng-class="classItem()" ng-click="toggleGroup()" ng-class="{active: isGroupShown()}" delegate-handle="{{title}}">'+
'<i class="icon" ng-class="classGroup()"></i>'+
'&nbsp;'+
'{{title}}'+
'</ion-item>'+
'<ion-item class="item-accordion item-text-wrap" ng-show="isGroupShown()"><ng-transclude></ng-transclude></ion-item></div>',
link: function (scope, element, attrs, ionList) {
// link to parent
if (!angular.isDefined(ionList.activeAccordion)) {
ionList.activeAccordion=false;
}
if (angular.isDefined(ionList.counterAccordion)) {
ionList.counterAccordion++;
} else {
ionList.counterAccordion=1;
}
scope.id = ionList.counterAccordion;
// set defaults
if (!angular.isDefined(scope.id)) $log.error('ID missing for ion-time-accordion');
if (!angular.isString(scope.title)) $log.warn('Title missing for ion-time-accordion');
if (!angular.isString(scope.iconClose)) scope.iconClose = 'ion-minus';
if (!angular.isString(scope.iconOpen)) scope.iconOpen = 'ion-plus';
if (!angular.isString(scope.iconAlign)) scope.iconAlign = 'left';
scope.isGroupShown = function() {
return (ionList.activeAccordion == scope.id);
};
scope.toggleGroup = function() {
if (ionList.activeAccordion == scope.id) {
ionList.activeAccordion = false;
} else {
ionList.activeAccordion = scope.id;
}
// Important... the animation open/close must be completed before using the scroll
$timeout(function(){
$ionicScrollDelegate.scrollTo(0, $ionicPosition.position(element).top ,true);
}, 300);
};
scope.classGroup = function() {
return (ionList.activeAccordion == scope.id) ? scope.iconOpen : scope.iconClose;
};
scope.classItem = function() {
return 'item-stable item-accordion-title '+ (scope.iconAlign=='left' ? 'item-icon-left' : 'item-icon-right');
};
}
};
});
<ion-list>
<ion-item-accordion title="ADDOMINOPLASTICA" icon-close="ion-ios-arrow-right" icon-open="ion-ios-arrow-down">
<p>L’addominoplastica ...</p>
</ion-item-accordion>
<ion-item-accordion title="GINECOMASTIA" icon-close="ion-ios-arrow-right" icon-open="ion-ios-arrow-down">
<p>La Ginecomastia ...</p>
</ion-item-accordion>
</ion-list>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment