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

Update of collapse directive #4814

Closed
wants to merge 6 commits into from
Closed

Update of collapse directive #4814

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4805da6
Update of collapse directive:
Nov 16, 2018
2a58cb7
Fix cypress collapse test
Nov 16, 2018
8b597bb
- Collapse directive: option to enable/disable animations
Nov 27, 2018
a4145a6
Merge https://github.com/valor-software/ngx-bootstrap into development
Nov 27, 2018
8657161
Merge branch 'development' into development
Domainv Jan 14, 2019
27325dc
fix(collapse): conflict resolve
Domainv Jan 14, 2019
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
2 changes: 1 addition & 1 deletion cypress/support/collapse.po.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export class CollapsePo extends BaseComponent {
ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/collapse';

collapseClass = '.collapse';
showIndicator = 'in show';
showIndicator = 'show';
infoClass = '.col-md-9';

exampleDemosArr = {
Expand Down
18 changes: 6 additions & 12 deletions demo/src/app/components/+collapse/collapse-section.list.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,10 @@ import { ToggleManualDemoComponent } from './demos/toggle-manual/toggle-manual';
import { CollapseDemoEventsComponent } from './demos/events/events';

import { ContentSection } from '../../docs/models/content-section.model';
import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
import { ExamplesComponent } from '../../docs/demo-section-components/demo-examples-section/index';
import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section/index';
import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section';
import { ExamplesComponent } from '../../docs/demo-section-components/demo-examples-section';
import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section';
import { DemoAccessibilityComponent } from './demos/accessibility/accessibility';
import { InlineDisplayDemoComponent } from './demos/inline-display/inline-display';

import { NgApiDocComponent } from '../../docs/api-docs';

Expand Down Expand Up @@ -37,7 +36,9 @@ export const demoComponentContent: ContentSection[] = [
anchor: 'events',
component: require('!!raw-loader?lang=typescript!./demos/events/events'),
html: require('!!raw-loader?lang=markup!./demos/events/events.html'),
description: `Collapse directive exposes 2 events: <code>collapsed</code>, that fires when a content was hidden,
description: `Collapse directive exposes 4 events: <code>collapses</code>, that fires when a collapse was triggered (aniamtion start),
<code>collapsed</code>, that fires when a content was hidden (aniamtion finished),
<code>expands</code>, that fires when a expansion was triggered (animation start)
and <code>expanded</code>, that fires when a content was shown`,
outlet: CollapseDemoEventsComponent
},
Expand All @@ -48,13 +49,6 @@ export const demoComponentContent: ContentSection[] = [
html: require('!!raw-loader?lang=markup!./demos/toggle-manual/toggle-manual.html'),
outlet: ToggleManualDemoComponent
},
{
title: 'Inline display',
anchor: 'inline-display',
component: require('!!raw-loader?lang=typescript!./demos/inline-display/inline-display'),
html: require('!!raw-loader?lang=markup!./demos/inline-display/inline-display.html'),
outlet: InlineDisplayDemoComponent
},
{
title: 'Accessibility',
anchor: 'accessibility',
Expand Down
6 changes: 4 additions & 2 deletions demo/src/app/components/+collapse/demos/basic/basic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic">Toggle collapse
</button>
<hr>
<div id="collapseBasic" [collapse]="isCollapsed" class="card card-block card-header">
<div class="well well-lg">Some content</div>
<div id="collapseBasic" [collapse]="isCollapsed" [animate]="true">
<div class="card card-block card-header">
<div class="well well-lg">Some content</div>
</div>
</div>
8 changes: 5 additions & 3 deletions demo/src/app/components/+collapse/demos/events/events.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@
</div>
</div>
<hr>
<div id="collapseEvent" class="card card-block card-header"
(collapsed)="collapsed()" (expanded)="expanded()" [collapse]="isCollapsed">
<div class="well well-lg">Some content</div>
<div id="collapseEvent" (collapses)="collapses()" (expands)="expands()"
(collapsed)="collapsed()" (expanded)="expanded()" [collapse]="isCollapsed" [animate]="true">
<div class="card card-block card-header">
<div class="well well-lg">Some content</div>
</div>
</div>
8 changes: 8 additions & 0 deletions demo/src/app/components/+collapse/demos/events/events.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,15 @@ export class CollapseDemoEventsComponent {
this.message = 'collapsed';
}

collapses(): void {
this.message = 'collapses';
}

expanded(): void {
this.message = 'expanded';
}

expands(): void {
this.message = 'expands';
}
}
4 changes: 1 addition & 3 deletions demo/src/app/components/+collapse/demos/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,10 @@ import { CollapseDemoComponent } from './basic/basic';
import { ToggleManualDemoComponent } from './toggle-manual/toggle-manual';
import { CollapseDemoEventsComponent } from './events/events';
import { DemoAccessibilityComponent } from './accessibility/accessibility';
import { InlineDisplayDemoComponent } from './inline-display/inline-display';

export const DEMO_COMPONENTS = [
CollapseDemoComponent,
CollapseDemoEventsComponent,
ToggleManualDemoComponent,
DemoAccessibilityComponent,
InlineDisplayDemoComponent
DemoAccessibilityComponent
];
10 changes: 0 additions & 10 deletions demo/src/app/components/+collapse/demos/inline-display/inline-display.html
View file
Open in desktop

This file was deleted.

9 changes: 0 additions & 9 deletions demo/src/app/components/+collapse/demos/inline-display/inline-display.ts
View file
Open in desktop

This file was deleted.

9 changes: 5 additions & 4 deletions demo/src/app/components/+collapse/demos/toggle-manual/toggle-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
<button type="button" class="btn btn-primary" (click)="collapse.show()"
aria-controls="collapseManual">Show content
</button>
<button type="button" class="btn btn-primary" (click)="collapse.hide()"
<button type="button" class="btn btn-primary ml-2" (click)="collapse.hide()"
aria-controls="collapseManual">Hide content
</button>
<hr>
<div id="collapseManual" #collapse="bs-collapse" [collapse]="isOpen"
class="card card-block card-header">
<div class="well well-lg">Some content</div>
<div id="collapseManual" #collapse="bs-collapse" [collapse]="isOpen" [animate]="true">
<div class="card card-block card-header">
<div class="well well-lg">Some content</div>
</div>
</div>
15 changes: 13 additions & 2 deletions demo/src/ng-api-doc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -605,16 +605,27 @@ export const ngdoc: any = {
"name": "collapse",
"type": "boolean",
"description": "<p>A flag indicating visibility of content (shown or hidden) </p>\n"
}, {
"name": "animate",
"type": "boolean",
"description": "<p>A flag to enable animated transition on toggle event (default: false) </p>\n"
}
],
"outputs": [
{
"name": "collapsed",
"description": "<p>This event fires as soon as content collapses </p>\n"
"description": "<p>This event fires as soon as content has completely collapsing (animation complete) </p>\n"
},
{
"name": "expanded",
"description": "<p>This event fires as soon as content becomes visible </p>\n"
"description": "<p>This event fires as soon as content has become completely visible (animation complete) </p>\n"
}, {
"name": "collapses",
"description": "<p>This event fires as soon as content started collapsing (event triggered) </p>\n"
},
{
"name": "expands",
"description": "<p>This event fires as soon as content start to become visible (event triggered) </p>\n"
}
],
"properties": [
Expand Down
5 changes: 3 additions & 2 deletions karma-demo.conf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,10 @@ module.exports = function (config) {
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
// files: [
files: [
// {pattern: './scripts/test.ts', watched: false}
// ],
"node_modules/bootstrap/dist/css/bootstrap.min.css",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you need this change?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Short version: Without css available nothing would work.
Longer version: Animations are already defined by the css code. I try to not "reinvent the wheel" by not reimplementing bootstraps code in angular a second time. Actually I don't understand why it's often done in the project code base. Dosen't make sense to me.

],
// preprocessors: {
// './scripts/test.ts': ['@angular-devkit/build-angular']
// },
Expand Down
Loading