fix: #27 #26 #24 and finaly #4

LukaszWatroba · Oct 29, 2015 · f15149c · f15149c
1 parent 0d10127
commit f15149c
Show file tree

Hide file tree

Showing 11 changed files with 446 additions and 188 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,6 @@
   - Allows for a nested structure
   - Works with (or without) `ng-repeat`
   - Allows multiple sections to be open at once
-  - Optimized for mobile devices
 
 
 ## Demo
@@ -47,7 +46,7 @@
       </v-pane-content>
     </v-pane>
 
-    <v-pane>
+    <v-pane disabled>
       <v-pane-header>
         Pane header #2
       </v-pane-header>
@@ -66,20 +65,20 @@
 
     <v-pane ng-repeat="pane in panes" expanded="$first">
       <v-pane-header>
-        {{ pane.header }}
+        {{ ::pane.header }}
       </v-pane-header>
 
       <v-pane-content>
-        {{ pane.content }}
+        {{ ::pane.content }}
 
         <!-- accordions can be nested :) -->
         <v-accordion ng-if="pane.subpanes">
           <v-pane ng-repeat="subpane in pane.subpanes">
             <v-pane-header>
-              {{ subpane.header }}
+              {{ ::subpane.header }}
             </v-pane-header>
             <v-pane-content>
-              {{ subpane.content }}
+              {{ ::subpane.content }}
             </v-pane-content>
           </v-pane>
         </v-accordion>
@@ -92,18 +91,27 @@
 
 ## API
 
-Use API methods to control accordion component:
+#### Control
+
+Add `control` attribute and use these methods to control vAccordion from it's parent scope:
+
+  - `toggle(indexOrId)`
+  - `expand(indexOrId)`
+  - `collapse(indexOrId)`
+  - `expandAll()`
+  - `collapseAll()`
+  - `hasExpandedPane()`
 
 ```html
-<v-accordion multiple control="accordion">
+<v-accordion id="my-accordion" multiple control="accordion">
 
-  <v-pane ng-repeat="pane in panes">
+  <v-pane id="{{ pane.id }}" ng-repeat="pane in panes">
     <v-pane-header>
-      {{ pane.header }}
+      {{ ::pane.header }}
     </v-pane-header>
 
     <v-pane-content>
-      {{ pane.content }}
+      {{ ::pane.content }}
     </v-pane-content>
   </v-pane>
 
@@ -114,38 +122,75 @@ Use API methods to control accordion component:
 <button ng-click="accordion.collapseAll()">Collapse all</button>
 ```
 
-#### Methods
+```js
+$scope.$on('my-accordion:onReady', function () {
+  var firstPane = $scope.panes[0];
+  $scope.accordion.toggle(firstPane.id);
+});
+```
+
+#### Transcluded scope
+
+`$accordion` and `$pane` transcluded scope properties allows you to control the directive from inside.
 
-  - `toggle(paneIndex)`
-  - `expand(paneIndex)`
-  - `collapse(paneIndex)`
+##### $accordion
+
+  - `toggle(indexOrId)`
+  - `expand(indexOrId)`
+  - `collapse(indexOrId)`
   - `expandAll()`
   - `collapseAll()`
+  - `hasExpandedPane()`
 
+##### $pane
 
-#### Events
+  - `toggle()`
+  - `expand()`
+  - `collapse()`
+  - `isExpanded()`
+
+```html
+<v-accordion multiple>
+
+  <v-pane ng-repeat="pane in panes">
+    <v-pane-header inactive>
+      {{ ::pane.header }}
+      <button ng-click="$pane.toggle()">Toggle me</button>
+    </v-pane-header>
 
-  - `vAccordion:onExpand`
-  - `vAccordion:onExpandAnimationEnd`
-  - `vAccordion:onCollapse`
-  - `vAccordion:onCollapseAnimationEnd`
+    <v-pane-content>
+      {{ ::pane.content }}
+    </v-pane-content>
+  </v-pane>
 
+  <button ng-click="$accordion.expandAll()">Expand all</button>
+
+</v-accordion>
+```
 
-## Callbacks
 
-Use these callbacks to get expanded/collapsed pane index:
+#### Events
+  - `vAccordion:onReady` or `yourAccordionId:onReady`
+  - `vAccordion:onExpand` or `yourAccordionId:onExpand`
+  - `vAccordion:onExpandAnimationEnd` or `yourAccordionId:onExpandAnimationEnd`
+  - `vAccordion:onCollapse` or `yourAccordionId:onCollapse`
+  - `vAccordion:onCollapseAnimationEnd` or `yourAccordionId:onCollapseAnimationEnd`
 
 
+## Callbacks
+
+Use these callbacks to get expanded/collapsed pane index and id:
+
 ```html
-<v-accordion onexpand="expandCallback(index)" oncollapse="collapseCallback(index)">
+<v-accordion onexpand="expandCallback(index, id)" oncollapse="collapseCallback(index, id)">
 
-  <v-pane ng-repeat="pane in panes">
+  <v-pane id="{{ ::pane.id }}" ng-repeat="pane in panes">
     <v-pane-header>
-      {{ pane.header }}
+      {{ ::pane.header }}
     </v-pane-header>
 
     <v-pane-content>
-      {{ pane.content }}
+      {{ ::pane.content }}
     </v-pane-content>
   </v-pane>
 
@@ -154,12 +199,12 @@ Use these callbacks to get expanded/collapsed pane index:
 
 
 ```js
-$scope.expandCallback = function (index) {
-  console.log('expanded pane index:', index);
+$scope.expandCallback = function (index, id) {
+  console.log('expanded pane:', index, id);
 };
 
 $scope.collapseCallback = function (index) {
-  console.log('collapsed pane index:', index);
+  console.log('collapsed pane:', index, id));
 };
 ```
 
@@ -170,12 +215,12 @@ vAccordion manages keyboard focus and adds some common aria-* attributes. BUT yo
 <v-accordion>
 
   <v-pane ng-repeat="pane in panes">
-    <v-pane-header id="pane{{$index}}-header" aria-controls="pane{{$index}}-content">
-      {{ pane.header }}
+    <v-pane-header id="{{ ::pane.id }}-header" aria-controls="{{ ::pane.id }}-content">
+      {{ ::pane.header }}
     </v-pane-header>
 
-    <v-pane-content id="pane{{$index}}-content" aria-labelledby="pane{{$index}}-header">
-      {{ pane.content }}
+    <v-pane-content id="{{ ::pane.id }}-content" aria-labelledby="{{ ::pane.id }}-header">
+      {{ ::pane.content }}
     </v-pane-content>
   </v-pane>
 

diff --git a/demo/app.js b/demo/app.js
@@ -8,42 +8,82 @@
       $compileProvider.debugInfoEnabled(false);
     })
 
-    .controller('MainController', function ($scope, $window) {
+    .controller('MainController', function ($scope) {
 
-      $scope.panes = [
+      $scope.panesA = [
         {
+          id: 'pane-1a',
           header: 'Pane 1',
           content: 'Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi.'
         },
         {
+          id: 'pane-2a',
           header: 'Pane 2',
           content: 'Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.'
         },
         {
+          id: 'pane-3a',
           header: 'Pane 3',
           content: 'Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non.',
 
           subpanes: [
             {
+              id: 'subpane-1a',
               header: 'Subpane 1',
               content: 'Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non.'
             },
             {
+              id: 'subpane-2a',
               header: 'Subpane 2',
               content: 'Curabitur et ligula. Ut molestie a, ultricies porta urna. Quisque lorem tortor fringilla sed, vestibulum id.'
             }
           ]
         }
       ];
 
-      $scope.expandCallback = function (index) {
-        console.log('expand:', index);
+      $scope.panesB = [
+        {
+          id: 'pane-1b',
+          header: 'Pane 1',
+          content: 'Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi.'
+        },
+        {
+          id: 'pane-2b',
+          header: 'Pane 2',
+          content: 'Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.'
+        },
+        {
+          id: 'pane-3b',
+          header: 'Pane 3',
+          content: 'Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non.',
+
+          subpanes: [
+            {
+              id: 'subpane-1b',
+              header: 'Subpane 1',
+              content: 'Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non.'
+            },
+            {
+              id: 'subpane-2b',
+              header: 'Subpane 2',
+              content: 'Curabitur et ligula. Ut molestie a, ultricies porta urna. Quisque lorem tortor fringilla sed, vestibulum id.'
+            }
+          ]
+        }
+      ];
+
+      $scope.expandCallback = function (index, id) {
+        console.log('expand:', index, id);
       };
 
-      $scope.collapseCallback = function (index) {
-        console.log('collapse:', index);
+      $scope.collapseCallback = function (index, id) {
+        console.log('collapse:', index, id);
       };
 
+      $scope.$on('accordionA:onReady', function () {
+        console.log('accordionA is ready!');
+      });
+
     });
 
 })(angular);
diff --git a/dist/v-accordion.css b/dist/v-accordion.css
@@ -1,6 +1,6 @@
 /**
  * vAccordion - AngularJS multi-level accordion component
- * @version v1.3.1
+ * @version v1.4.0
  * @link http://lukaszwatroba.github.io/v-accordion
  * @author Łukasz Wątroba <l@lukaszwatroba.com>
  * @license MIT License, http://www.opensource.org/licenses/MIT