AngularJs directive that builds a vertical accodion menu from a JSON object, with an optional config scope for personalization. No jQuery dependency
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
example
.gitignore
CODE_OF_CONDUCT.md
LICENSE
README.md
bower.json

README.md

#sirAccordion for AngularJS

Dynamic, customizable and multilevel Accordion Menu for AngurlarJS. Builds up from a JSON object and an optional configuration object. You can download the project for a live demo in the example folder (don't forget to bower install dependencies) and for better understanding.

##sir Accordion Online Demo

    bower install sir-accordion

##Features

  • Dynamic content: if the scope that contains the JSON object is update the accordion updates too.

  • Responsive: The item height adjust to the content and is responsive; the width of the accodion adjusts to 100% of the wrapper tag.

  • Easy use AngularJS Directive: you just need to add the js and css files, add the 'sir-accordion' module to the AngularJS app and call the directive like this:

    //Code for the html directive
    <div sir-accordion collection="sirAccordion.collection" config="sirAccordion.config"></div>
    
    //Code for the Angular module
    .module('mainModule', ['sir-accordion'])
    
  • JSON object: the content of the accordion will be set by a JSON following the next structure where subCollection is an object of the same structure that will have more items to expand/collapse inside, topContent will be the content on top of that subCollection and botomContent will be after the subCollection items.

      //JSON object model
      $scope.collection = 
      [{"title":"Level 1 header","topContent":"","bottomContent":"","subCollection":[]}]; 
    
  • Customizable: you can customize by a config $scope like this:

    $scope.accordionConfig = {
        debug: false, //For developing
        animDur: 300, //Animations duration minvalue is 0
        expandFirst: false, //Auto expand first item
        autoCollapse: true, //Auto collapse item flag
        watchInternalChanges: false, //watch internal attrs of the collection (false if not needed)
        headerClass: '', //Adding extra class for the headers
        beforeHeader: '', //Adding code or text before all the headers inner content
        afterHeader: '', //Adding code or text after all the headers inner content
        topContentClass: '', //Adding extra class for topContent
        beforeTopContent: '', //Adding code or text before all the topContent if present on item
        afterTopContent: '', //Adding code or text after all the topContent if present on item
        bottomContentClass: '', //Adding extra class for topContent
        beforeBottomContent: '', //Adding code or text before all the topContent if present on item
        afterBottomContent: '' //Adding code or text before all the topContent if present on item
    };
    
  • MultiLevel: the recursive algoritm allows to add as many levels to the accordion as you would like to.

  • VelocityJS: sirAccordion uses VelocityJS for the slide up and down animations.

  • ie8 Compatible: please kill ie8.

  • No jQuery dependency.

  • Bower installable package. To install from bower use bower install sir-accordion.

  • Events.

    • When the accordion is donde loading you can catch the event like this $scope.$on('sacDoneLoading', function ($event) {}).
    • When an element is expanded sacExpandStart and sacExpandEnd are emitted with the coordinates of the element.
    • When an element is collapsed sacCollapseStart and sacCollapseEnd are emitted with the coordinates of the element.
    • For expanding any content from your AngularJs App $scope.$broadcast('sacExpandContentById','1-1-3') where the second parameter is the content coordinates.
    • For collapsing any content from your AngularJs App $scope.$broadcast('sacCollapseContentById','1-1-3') where the second parameter is the content coordinates.
    • For collapsing all contents $scope.$broadcast('sacCollapseAll');
    • When autoCollapse is false you can trigger this event too $scope.$broadcast('sacExpandAll');.

##Dependencies

  • AngularJS
  • VelocityJS

##Currently working on

  • Revision of the necessary config attrs
  • Config attrs validation
  • Maintining current state of the accordion when updating values of the data collection.

##Known issues

  • No option for mantaining current state of the accordion when updating the collection.

##Changelog

###V1.4.2

  • Minor fixes.

###V1.4.0

  • Velocity updated to 1.5.1.
  • Removed 1.3.0 breaking changes and I'll be removing the 1.3.0 tag entirely because it was not a good way of solving the issue I was trying to solve, this version solves the issue in a better way.
  • Minor fixes.

###V1.3.0 * Breaking changes * In order to remove the necessity of an isolated scope, this is the new way of declaring the directive <div sir-accordion collection="{{sirAccordion.collection}}" config="sirAccordion.config"></div>.

  • Now the scope is not isolated, making it easier to use and allowing to use ng-click and other interactions directly in the template.
  • Removed the default vertical aligment in .sir-accordion-header.

###V1.2.6

  • Fix automatically added ids not applying the way they should.

###V1.2.5

  • Classes automatically added for top and bottom content now will be ids.
  • Unique ids for top and bottom content will have the accordion element id if present.

###V1.2.4

  • Major Styles Improvement.
  • Unique classes for top and bottom contents added automatically

###V1.2.3

  • Style improvement.

###V1.2.2

  • New events sacExpandStart and sacExpandEnd, emitting every time a content expands.
  • New events sacCollapseStart and sacCollapseEnd, emitting every time a content collapses.

###V1.2.1

  • New sir-accordion-leaf class to sir-accordion-content if is a leaf element

###V1.2.0

  • Fixes issue when using multiple instances of sirAccordion

###V1.1.1

  • Fixed issue where animations jumped a little in Microsoft Edge

###V1.1.0

  • Updated sir-accordion.min.js
  • Fixed issue when using siraccordion on an app with jquery
  • Collapsed content no longer has display: none

###V1.0.0

  • Now with VelocityJS with faster and no buggy animations even on safari.
  • New event collapseById.
  • Code simplified (A LOT).
  • Bug fixes.
  • Autocollapse can be toggled on runtimes.
  • Improved expand and collapse single content and all contents algoritm.
  • AnimDur can be set as low as 0.
  • Suport for expandFirst.
  • Breaking changes
    • Changed some accordion config object attrs (see above).

###V0.9.6

  • Added optional attr 'data' for when you want access to a scope from a parent controller in a custom module inside the accordion directive (since the accordion directive has an isolated scope)

###V0.9.5

  • Code cleaning.
  • Now when the accordion finishes loading it emits sacDoneLoading event for better handling postloading code.
  • New event for expanding any content sacExpandContentById any given time (after sacDoneLoading event).
  • Bug fixes.
  • Code comments.
  • Breaking changes
    • Directive new name: sirAccordion (old was sirNgAccordion).
    • Event new name: sacCollapseAll (old was collapseAll).
    • Event new name: sacExpandAll (old was ExpandAll).