Skip to content

Commit e14739e

Browse files
edoparearyeeedoparearyee
committed
feat(Masonry): added MasonryModule and example with tests
1 parent efc75bc commit e14739e

18 files changed

+534
-54
lines changed

‎.angular-cli.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@
2121
"styles": [
2222
"styles.scss"
2323
],
24-
"scripts": [],
24+
"scripts": [
25+
"../node_modules/masonry-layout/dist/masonry.pkgd.js"
26+
],
2527
"environmentSource": "environments/environment.ts",
2628
"environments": {
2729
"dev": "environments/environment.ts",
@@ -51,6 +53,11 @@
5153
"test": {
5254
"karma": {
5355
"config": "./karma.conf.js"
56+
},
57+
"codeCoverage": {
58+
"exclude": [
59+
"./src/app/masonry/masonry-ref.ts"
60+
]
5461
}
5562
},
5663
"defaults": {

‎README.md‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,117 @@
66

77
This project was generated with [Angular CLI][angular-cli] version 1.6.6.
88

9+
A simple, lightweight library to use [Masonry][masonry] in [Angular][angular]
10+
11+
This is a simple library for [Angular][angular], implemented in the [Angular Package Format v5.0](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/edit#heading=h.k0mh3o8u5hx).
12+
13+
## Install
14+
15+
### via NPM
16+
17+
`npm i @thisissoon/angular-masonry --save`
18+
19+
### via Yarn
20+
21+
`yarn add @thisissoon/angular-masonry`
22+
23+
`app.module.ts`
24+
```ts
25+
import { MasonryModule } from '@thisissoon/angular-masonry';
26+
27+
@NgModule({
28+
imports: [
29+
MasonryModule.forRoot(window['Masonry'])
30+
]
31+
})
32+
export class AppModule { }
33+
```
34+
35+
#### Universal app (only needed if using platform-server)
36+
`app.server.module.ts`
37+
```ts
38+
import { MasonryModule } from '@thisissoon/angular-masonry';
39+
40+
@NgModule({
41+
imports: [
42+
// no need to provide window['Masonry'] here as
43+
// a mock implemention is provided by default
44+
MasonryModule.forRoot()
45+
]
46+
})
47+
export class AppServerModule { }
48+
```
49+
50+
## Example
51+
52+
A full working example can be found in the [src/app](src/app) folder.
53+
54+
### `app.component.ts`
55+
56+
```ts
57+
export class AppComponent implements AfterViewInit, OnDestroy {
58+
59+
@ViewChild('grid')
60+
public grid: ElementRef;
61+
62+
public masonryInstance: MasonryInstance;
63+
64+
public cards = cards;
65+
66+
constructor(@Inject(Masonry) public masonry) { }
67+
68+
ngAfterViewInit() {
69+
const options: MasonryOptions = {
70+
itemSelector: '.card',
71+
columnWidth: '.card',
72+
gutter: 20,
73+
fitWidth: true
74+
};
75+
this.masonryInstance = new this.masonry(this.grid.nativeElement, options);
76+
}
77+
78+
layout() {
79+
this.masonryInstance.layout();
80+
}
81+
82+
ngOnDestroy() {
83+
this.masonryInstance.destroy();
84+
}
85+
}
86+
```
87+
88+
### `app.component.css`
89+
Styling is just an example
90+
```css
91+
:host {
92+
display: block;
93+
margin-top: 1rem;
94+
}
95+
96+
.grid {
97+
margin: 0 auto;
98+
}
99+
100+
.card {
101+
display: inline-block;
102+
margin-bottom: 1rem;
103+
width: 18rem;
104+
}
105+
```
106+
107+
### `app.component.html`
108+
```html
109+
<div class="grid" #grid>
110+
<div class="card" *ngFor="let card of cards">
111+
<div class="card-body">
112+
<h5 class="card-title">{{ card.title }}</h5>
113+
<p class="card-text">{{ card.text }}</p>
114+
<a href="#" class="btn btn-primary">Go somewhere</a>
115+
</div>
116+
</div>
117+
</div>
118+
```
119+
9120
## Development server
10121

11122
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
@@ -48,5 +159,7 @@ To get more help on the Angular CLI use `ng help` or go check out the [Angular C
48159
[standard-version]:https://github.com/conventional-changelog/standard-version
49160
[Karma]:https://karma-runner.github.io
50161
[Protractor]:http://www.protractortest.org/
162+
[angular]: https://angular.io/
51163
[angular-cli]:https://github.com/angular/angular-cli
52164
[angular-cli-readme]:https://github.com/angular/angular-cli/blob/master/README.md
165+
[masonry]:https://masonry.desandro.com/

‎e2e/app.e2e-spec.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,19 @@ describe('angular-masonry App', () => {
55

66
beforeEach(() => {
77
page = new AppPage();
8+
page.navigateTo();
89
});
910

10-
it('should display welcome message', () => {
11+
it('should contain cards', () => {
1112
page.navigateTo();
12-
expect(page.getParagraphText()).toEqual('Welcome to sn!');
13+
expect(page.getCardCount()).toEqual(10);
14+
});
15+
16+
it('should have applied masonry styles to grid', () => {
17+
expect(page.isMasonryAppliedToGrid()).toBeTruthy();
18+
});
19+
20+
it('should have applied masonry styles to card', () => {
21+
expect(page.isMasonryAppliedToCards()).toBeTruthy();
1322
});
1423
});

‎e2e/app.po.ts‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,31 @@ export class AppPage {
55
return browser.get('/');
66
}
77

8-
getParagraphText() {
9-
return element(by.css('sn-root h1')).getText();
8+
getCardCount() {
9+
return element.all(by.css('sn-root .card')).count();
10+
}
11+
12+
getCardStyleAttr() {
13+
return element.all(by.css('sn-root .card')).first().getAttribute('style');
14+
}
15+
16+
getGridStyleAttr() {
17+
return element(by.css('sn-root .grid')).getAttribute('style');
18+
}
19+
20+
isMasonryAppliedToGrid() {
21+
return this.getGridStyleAttr()
22+
.then(style =>
23+
style.includes('position: relative') &&
24+
style.includes('width:') &&
25+
style.includes('height:'));
26+
}
27+
28+
isMasonryAppliedToCards() {
29+
return this.getCardStyleAttr()
30+
.then(style =>
31+
style.includes('position: absolute') &&
32+
style.includes('top:') &&
33+
style.includes('left:'));
1034
}
1135
}

‎package-lock.json‎

Lines changed: 54 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"@types/jasmine": "~2.8.3",
3434
"@types/jasminewd2": "~2.0.2",
3535
"@types/node": "~6.0.60",
36+
"bootstrap": "^4.0.0",
3637
"codelyzer": "^4.0.1",
3738
"coveralls": "^3.0.0",
3839
"cz-conventional-changelog": "^2.1.0",
@@ -44,6 +45,7 @@
4445
"karma-jasmine": "~1.1.0",
4546
"karma-jasmine-html-reporter": "^0.2.2",
4647
"karma-spec-reporter": "0.0.32",
48+
"masonry-layout": "^4.2.1",
4749
"protractor": "~5.1.2",
4850
"standard-version": "^4.3.0",
4951
"ts-node": "~4.1.0",

‎src/app/app.component.html‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,9 @@
1-
<!--The content below is only a placeholder and can be replaced.-->
2-
<div style="text-align:center">
3-
<h1>
4-
Welcome to {{ title }}!
5-
</h1>
6-
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
1+
<div class="grid" #grid>
2+
<div class="card" *ngFor="let card of cards">
3+
<div class="card-body">
4+
<h5 class="card-title">{{ card.title }}</h5>
5+
<p class="card-text">{{ card.text }}</p>
6+
<a href="#" class="btn btn-primary">Go somewhere</a>
7+
</div>
8+
</div>
79
</div>
8-
<h2>Here are some links to help you start: </h2>
9-
<ul>
10-
<li>
11-
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
12-
</li>
13-
<li>
14-
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
15-
</li>
16-
<li>
17-
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
18-
</li>
19-
</ul>
20-

‎src/app/app.component.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
:host {
2+
display: block;
3+
margin-top: 1rem;
4+
}
5+
6+
.grid {
7+
margin: 0 auto;
8+
}
9+
10+
.card {
11+
display: inline-block;
12+
margin-bottom: 1rem;
13+
width: 18rem;
14+
}

0 commit comments

Comments
 (0)