Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Some minor enhacements #50

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Some minor enhacements #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
60f0313
Ignore tags file generated by ctags
chenlijun99 Oct 10, 2017
12cbba4
Feat: collapse panel by clicking on md-expansion-panel-header
chenlijun99 Oct 10, 2017
dc94097
Fix: routes in demo not working with angular 1.6.x
chenlijun99 Oct 10, 2017
b849786
Update build
chenlijun99 Oct 10, 2017
876127e
Make `md-expansion-panel` emit events on state change
chenlijun99 Oct 10, 2017
3a05859
Feat: support lazy compilation for expansionPanelExpanded's content
chenlijun99 Dec 28, 2017
135952a
Update builds and bump version
chenlijun99 Dec 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,6 @@ bower_components
# sass cache
.gulp-scss-cache
.sass-cache

## ctags file
tags
18 changes: 17 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,22 @@ angular.module('myApp', ['ngMaterial', 'material.components.expansionPanels']);
| :--: | :--: | :--: |
| md-component-id | string= | <p>add an id if you want to acces the panel via the <code>$mdExpansionPanel</code> service</p> |

#### Events

`mdExpansionPanel` emits the following events:

* `mdExpansionPanelExpanding`: when it starts to expand
* `mdExpansionPanelExpanded`: when it has finished expanding
* `mdExpansionPanelCollapsing`: when it starts to collapsed
* `mdExpansionPanelCollapsed`: when it has finished to collapse

The `md-component-id` of the concerned `md-expansion-panel` will be passed as argument.

```js
$scope.$on("mdExpansionPanelExpanding", function($event, componentId) {
...
})
```


## <a name="mdExpansionPanelCollapsed"></a> mdExpansionPanelCollapsed
Expand All @@ -325,7 +340,7 @@ angular.module('myApp', ['ngMaterial', 'material.components.expansionPanels']);

```
<md-expansion-panel-expanded
[height=""]>
[height=""] [lazy-render=""]>
...
</md-expansion-panel-expanded>
```xpansion-panel>
Expand All @@ -336,6 +351,7 @@ angular.module('myApp', ['ngMaterial', 'material.components.expansionPanels']);
| Param | Type | Details |
| :--: | :--: | :--: |
| height | number= | <p>add this attribute set the max height of the expanded content. The container will be set to scroll</p> |
| lazy-render | boolean= | <p>if this attribute is present the content of mdExpansionPanelExpanded will be compiled when the mdExpansionPanel expands</p> |



Expand Down
11 changes: 9 additions & 2 deletions app/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ angular.module('angularMaterialExpansionPanel', [
.config(configApp);


configApp.$inject = ['$routeProvider'];
function configApp($routeProvider) {
configApp.$inject = ['$routeProvider', '$locationProvider'];
function configApp($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home/home.html',
Expand All @@ -30,5 +30,12 @@ function configApp($routeProvider) {
controller: 'MultipleController',
controllerAs: 'vm'
})
.when('/events', {
templateUrl: 'pages/events/events.html',
controller: 'EventsController',
controllerAs: 'vm'
})
.otherwise('/');

$locationProvider.hashPrefix('');
}
1 change: 1 addition & 0 deletions app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
<md-nav-item md-nav-href="#/group" name="/group">Groups</md-nav-item>
<md-nav-item md-nav-href="#/autoexpand" name="/autoexpand">Auto Expand</md-nav-item>
<md-nav-item md-nav-href="#/multiple" name="/multiple">Multiple</md-nav-item>
<md-nav-item md-nav-href="#/events" name="/events">Events</md-nav-item>
</md-nav-bar>
</div>

Expand Down
30 changes: 30 additions & 0 deletions app/pages/events/events.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
angular
.module('angularMaterialExpansionPanel')
.controller('EventsController', EventsController);


function EventsController($scope, $mdExpansionPanel) {
$mdExpansionPanel().waitFor('expansionPanelOne').then(function (instance) {
instance.expand();
});

$scope.$on("mdExpansionPanelExpanding", function($event, componentId) {
alert("expansion panel " + componentId + " expanding");
});
$scope.$on("mdExpansionPanelExpanded", function($event, componentId) {
alert("expansion panel " + componentId + " expanded");
});
$scope.$on("mdExpansionPanelCollapsing", function($event, componentId) {
alert("expansion panel " + componentId + " collapsing");
});
$scope.$on("mdExpansionPanelCollapsed", function($event, componentId) {
alert("expansion panel " + componentId + " collapsed");
});


$scope.collapseOne = function () {
$mdExpansionPanel('expansionPanelOne').collapse();
};

$scope.isDisabled = true;
}
191 changes: 191 additions & 0 deletions app/pages/events/events.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
<h2>Events</h2>


<p>
<b>Expansion Panels</b> $emit the following events
<ul>
<li><code>mdExpansionPanelExpanding</code>: when it starts to expand</li>
<li><code>mdExpansionPanelExpanded</code>: when it has finished expanding</li>
<li><code>mdExpansionPanelCollapsing</code>: when it starts to collapsed</li>
<li><code>mdExpansionPanelCollapsed</code>: when it has finished to collapse</li>
</ul>
The <code>md-component-id</code> of the concerned <code>md-expansion-panel</code> will be passed as argument.
</p>

<div style="padding-top: 12px; padding-bottom: 36px;">
<md-divider></md-divider>
</div>



<md-expansion-panel md-component-id="expansionPanelOne">

<md-expansion-panel-collapsed>
<div class="md-title">Title</div>
<div class="md-summary">Summary</div>
<md-expansion-panel-icon></md-expansion-panel-icon>
</md-expansion-panel-collapsed>

<md-expansion-panel-expanded>

<md-expansion-panel-header>
<div class="md-title">Expanded Title</div>
<div class="md-summary">Expanded Summary</div>
<md-expansion-panel-icon></md-expansion-panel-icon>
</md-expansion-panel-header>

<md-expansion-panel-content>
<h4>Content</h4>
<p>Put content in here</p>
</md-expansion-panel-content>

<md-expansion-panel-footer>
<div flex></div>
<md-button class="md-warn" ng-click="collapseOne()">Collapse</md-button>
</md-expansion-panel-footer>

</md-expansion-panel-expanded>

</md-expansion-panel>


<md-expansion-panel>

<md-expansion-panel-collapsed>
<md-expansion-panel-icon></md-expansion-panel-icon>
<div class="md-title">Sticky</div>
<div class="md-summary">header and footer will stick</div>
</md-expansion-panel-collapsed>

<md-expansion-panel-expanded>

<md-expansion-panel-header>
<md-expansion-panel-icon></md-expansion-panel-icon>
<div class="md-title">Sticky</div>
<div class="md-summary">header and footer will stick</div>
</md-expansion-panel-header>

<md-expansion-panel-content>
<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>
</md-expansion-panel-content>

<md-expansion-panel-footer>
<div flex></div>
<md-button class="md-warn" ng-click="$panel.collapse()">Collapse</md-button>
</md-expansion-panel-footer>

</md-expansion-panel-expanded>

</md-expansion-panel>




<md-expansion-panel>

<md-expansion-panel-collapsed>
<div class="md-title">No Sticky</div>
<div class="md-summary">header and footer sticky disabled</div>
</md-expansion-panel-collapsed>

<md-expansion-panel-expanded>

<md-expansion-panel-header md-no-sticky>
<div class="md-title">No Sticky</div>
<div class="md-summary">header and footer sticky disabled</div>
</md-expansion-panel-header>

<md-expansion-panel-content>
<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>
</md-expansion-panel-content>

<md-expansion-panel-footer md-no-sticky>
<div flex></div>
<md-button class="md-warn" ng-click="$panel.collapse()">Collapse</md-button>
</md-expansion-panel-footer>

</md-expansion-panel-expanded>

</md-expansion-panel>



<md-expansion-panel ng-disabled="isDisabled">

<md-expansion-panel-collapsed>
<div class="md-title">Disabled Panel</div>
<span flex></span>
<md-expansion-panel-icon></md-expansion-panel-icon>
</md-expansion-panel-collapsed>

<md-expansion-panel-expanded>

<md-expansion-panel-header>
<div class="md-title">Disabled Panel</div>
<div class="md-summary">Expanded Summary</div>
<md-expansion-panel-icon></md-expansion-panel-icon>
</md-expansion-panel-header>

<md-expansion-panel-content>
<h4>Content</h4>
<p>Put content in here</p>
</md-expansion-panel-content>

<md-expansion-panel-footer>
<div flex></div>
<md-button class="md-warn" ng-click="$panel.collapse()">Collapse</md-button>
</md-expansion-panel-footer>

</md-expansion-panel-expanded>

</md-expansion-panel>
67 changes: 67 additions & 0 deletions app/pages/home/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,3 +182,70 @@ <h4>Content</h4>
</md-expansion-panel-expanded>

</md-expansion-panel>

<div style="padding-top: 12px; padding-bottom: 36px;">
<md-divider></md-divider>
</div>

<h2>Lazy render content</h2>
<p>
When there is a long list of expansion panels with heavy content in the expanded area,
it's could take a lot to render all the DOM elements.
In that case use the <code>lazy-render</code> option!
</p>

<md-expansion-panel>

<md-expansion-panel-collapsed>
<div class="md-title">No Sticky</div>
<div class="md-summary">header and footer sticky disabled</div>
</md-expansion-panel-collapsed>

<md-expansion-panel-expanded lazy-render>

<md-expansion-panel-header md-no-sticky>
<div class="md-title">No Sticky</div>
<div class="md-summary">header and footer sticky disabled</div>
</md-expansion-panel-header>

<md-expansion-panel-content>
<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>

<h4>Content</h4>
<p>Put content in here</p>
</md-expansion-panel-content>

<md-expansion-panel-footer md-no-sticky>
<div flex></div>
<md-button class="md-warn" ng-click="$panel.collapse()">Collapse</md-button>
</md-expansion-panel-footer>

</md-expansion-panel-expanded>

</md-expansion-panel>

<div style="padding-top: 12px; padding-bottom: 36px;">
<md-divider></md-divider>
</div>
2 changes: 1 addition & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "angular-material-expansion-panel",
"version": "0.7.2",
"version": "0.8.0",
"description": "Material Design Expansion Panels.",
"main": [
"dist/md-expansion-panel.js",
Expand Down
Loading