Skip to content

Commit b3896e4

Browse files
lukasz-galkalukasz-galka
committed
initial commit
1 parent 58c0113 commit b3896e4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+753
-502
lines changed

‎.angular-cli.json

-57
This file was deleted.

‎.editorconfig

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ root = true
44
[*]
55
charset = utf-8
66
indent_style = space
7-
indent_size = 2
7+
indent_size = 4
88
insert_final_newline = true
99
trim_trailing_whitespace = true
1010

‎.gitignore

+7
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,10 @@ testem.log
3939
#System Files
4040
.DS_Store
4141
Thumbs.db
42+
43+
# lib
44+
/aot
45+
/lib/*.map
46+
/lib/*.js
47+
/lib/*.json
48+
/lib/*.d.ts

‎.npmignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules/
2+
aot/
3+
.editorconfig
4+
clean.sh
5+
tsconfig.json
6+
tslint.json

‎CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<a name="0.1.0"></a>
2+
# 0.1.0 (2017-03-13)

‎README.md

+1-27
Original file line numberDiff line numberDiff line change
@@ -1,27 +1 @@
1-
# NgxSimpleGallery
2-
3-
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-rc.1.
4-
5-
## Development server
6-
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.
7-
8-
## Code scaffolding
9-
10-
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
11-
12-
## Build
13-
14-
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
15-
16-
## Running unit tests
17-
18-
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
19-
20-
## Running end-to-end tests
21-
22-
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
23-
Before running the tests make sure you are serving the app via `ng serve`.
24-
25-
## Further help
26-
27-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
1+
# NgxGallery

‎clean.sh

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
#!/bin/bash
2+
3+
rm lib/*.map
4+
rm lib/*.js
5+
rm lib/*.json
6+
rm lib/*.d.ts
7+
rm -rf aot

‎e2e/app.e2e-spec.ts

-14
This file was deleted.

‎e2e/app.po.ts

-11
This file was deleted.

‎e2e/tsconfig.e2e.json

-19
This file was deleted.

‎karma.conf.js

-44
This file was deleted.

‎lib/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export * from './ngx-gallery.component'
2+
export * from './ngx-gallery.module'
3+
export * from './ngx-gallery-options.model';
4+
export * from './ngx-gallery-image.model';

‎lib/ngx-gallery-arrows.component.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div class="ngx-gallery-arrow-wrapper ngx-gallery-arrow-left">
2+
<i class="fa fa-arrow-circle-left" aria-hidden="true" (click)="handlePrevClick()" [class.ngx-gallery-disabled]="prevDisabled"></i>
3+
</div>
4+
<div class="ngx-gallery-arrow-wrapper ngx-gallery-arrow-right">
5+
<i class="fa fa-arrow-circle-right" aria-hidden="true" (click)="handleNextClick()" [class.ngx-gallery-disabled]="nextDisabled"></i>
6+
</div>

‎lib/ngx-gallery-arrows.component.scss

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.ngx-gallery-arrow-wrapper {
2+
position: absolute;
3+
height: 100%;
4+
width: 0px;
5+
display: table;
6+
z-index: 2000;
7+
table-layout: fixed;
8+
}
9+
10+
.ngx-gallery-arrow-wrapper.ngx-gallery-arrow-left {
11+
left: 0px;
12+
}
13+
14+
.ngx-gallery-arrow-wrapper.ngx-gallery-arrow-right {
15+
right: 0px;
16+
}
17+
18+
.fa {
19+
&.fa-arrow-circle-left, &.fa-arrow-circle-right {
20+
top: 50%;
21+
transform: translateY(-50%);
22+
cursor: pointer;
23+
24+
&.ngx-gallery-disabled {
25+
opacity: 0.6;
26+
cursor: default;
27+
}
28+
}
29+
30+
&.fa-arrow-circle-left {
31+
left: 10px;
32+
}
33+
34+
&.fa-arrow-circle-right {
35+
right: 10px;
36+
}
37+
}

‎lib/ngx-gallery-arrows.component.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Component, Input, Output, EventEmitter, } from '@angular/core';
2+
3+
@Component({
4+
selector: 'ngx-gallery-arrows',
5+
templateUrl: './ngx-gallery-arrows.component.html',
6+
styleUrls: ['./ngx-gallery-arrows.component.scss']
7+
})
8+
export class NgxGalleryArrowsComponent {
9+
@Input() prevDisabled: boolean;
10+
@Input() nextDisabled: boolean;
11+
12+
@Output() onPrevClick = new EventEmitter();
13+
@Output() onNextClick = new EventEmitter();
14+
15+
handlePrevClick(): void {
16+
this.onPrevClick.emit();
17+
}
18+
19+
handleNextClick(): void {
20+
this.onNextClick.emit();
21+
}
22+
}

‎lib/ngx-gallery-image.component.html

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<div class="ngx-gallery-image" *ngFor="let image of images; let i = index" [ngClass]="{'ngx-gallery-active': selectedIndex == i, 'ngx-gallery-clickable': clickable}" [style.background-image]="'url(' + image + ')'" (click)="handleClick($event, i)"></div>
2+
<ngx-gallery-arrows *ngIf="arrows" (onPrevClick)="showPrev()" (onNextClick)="showNext()" [prevDisabled]="!canShowPrev()" [nextDisabled]="!canShowNext()" ></ngx-gallery-arrows>

‎lib/ngx-gallery-image.component.scss

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
:host {
2+
width: 100%;
3+
display: inline-block;
4+
position: relative;
5+
}
6+
7+
.ngx-gallery-image {
8+
background-size: cover;
9+
background-position: center;
10+
height: 100%;
11+
width: 100%;
12+
position: absolute;
13+
left: 0px;
14+
top: 0px;
15+
opacity: 0;
16+
transition: opacity 0.5s ease-in-out;
17+
18+
&.ngx-gallery-active {
19+
opacity: 1;
20+
z-index: 1000;
21+
}
22+
23+
&.ngx-gallery-clickable {
24+
cursor: pointer;
25+
}
26+
}
27+
28+

‎lib/ngx-gallery-image.component.ts

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { Component, Input, Output, EventEmitter, HostListener, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'ngx-gallery-image',
5+
templateUrl: './ngx-gallery-image.component.html',
6+
styleUrls: ['./ngx-gallery-image.component.scss']
7+
})
8+
export class NgxGalleryImageComponent implements OnInit {
9+
@Input() images: string[];
10+
@Input() clickable: boolean;
11+
@Input() selectedIndex: number;
12+
@Input() arrows: boolean;
13+
@Input() arrowsAutoHide: boolean;
14+
15+
@Output() onClick = new EventEmitter();
16+
@Output() onActiveChange = new EventEmitter();
17+
18+
ngOnInit(): void {
19+
if(this.arrows && this.arrowsAutoHide) {
20+
this.arrows = false;
21+
}
22+
}
23+
24+
@HostListener('mouseenter') onMouseEnter() {
25+
if(this.arrowsAutoHide && !this.arrows) {
26+
this.arrows = true;
27+
}
28+
}
29+
30+
@HostListener('mouseleave') onMouseLeave() {
31+
if(this.arrowsAutoHide && this.arrows) {
32+
this.arrows = false;
33+
}
34+
}
35+
36+
handleClick(event: Event, index: number): void {
37+
if (this.clickable) {
38+
this.onClick.emit(index);
39+
40+
event.stopPropagation();
41+
event.preventDefault();
42+
}
43+
}
44+
45+
showNext(): void {
46+
if (this.canShowNext()) {
47+
this.selectedIndex++;
48+
this.onActiveChange.emit(this.selectedIndex);
49+
}
50+
}
51+
52+
showPrev(): void {
53+
if (this.canShowPrev()) {
54+
this.selectedIndex--;
55+
this.onActiveChange.emit(this.selectedIndex);
56+
}
57+
}
58+
59+
canShowNext(): boolean {
60+
return this.selectedIndex < this.images.length - 1 ? true : false;
61+
}
62+
63+
canShowPrev(): boolean {
64+
return this.selectedIndex > 0 ? true : false;
65+
}
66+
}

0 commit comments

Comments
 (0)