initial commit

.editorconfig

@@ -4,7 +4,7 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 2
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 

.gitignore

@@ -39,3 +39,10 @@ testem.log
 #System Files
 .DS_Store
 Thumbs.db
+
+# lib
+/aot
+/lib/*.map
+/lib/*.js
+/lib/*.json
+/lib/*.d.ts

.npmignore

@@ -0,0 +1,6 @@
+node_modules/
+aot/
+.editorconfig
+clean.sh
+tsconfig.json
+tslint.json

CHANGELOG.md

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

README.md

@@ -1,27 +1 @@
-# NgxSimpleGallery
-
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-rc.1.
-
-## Development server
-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.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
-
-## Build
-
-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.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-Before running the tests make sure you are serving the app via `ng serve`.
-
-## Further help
-
-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).
+# NgxGallery

clean.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+rm lib/*.map
+rm lib/*.js
+rm lib/*.json
+rm lib/*.d.ts
+rm -rf aot

lib/index.ts

@@ -0,0 +1,4 @@
+export * from './ngx-gallery.component'
+export * from './ngx-gallery.module'
+export * from './ngx-gallery-options.model';
+export * from './ngx-gallery-image.model';

lib/ngx-gallery-arrows.component.html

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

lib/ngx-gallery-arrows.component.scss

@@ -0,0 +1,37 @@
+.ngx-gallery-arrow-wrapper {
+    position: absolute;
+    height: 100%;
+    width: 0px;
+    display: table;
+    z-index: 2000;
+    table-layout: fixed;
+}
+
+.ngx-gallery-arrow-wrapper.ngx-gallery-arrow-left {
+    left: 0px;
+}
+
+.ngx-gallery-arrow-wrapper.ngx-gallery-arrow-right {
+    right: 0px;
+}
+
+.fa {
+    &.fa-arrow-circle-left, &.fa-arrow-circle-right {
+        top: 50%;
+        transform: translateY(-50%);
+        cursor: pointer;
+
+        &.ngx-gallery-disabled {
+            opacity: 0.6;
+            cursor: default;
+        }
+    }
+
+    &.fa-arrow-circle-left {
+        left: 10px;
+    }
+
+    &.fa-arrow-circle-right {
+        right: 10px;
+    }
+}

lib/ngx-gallery-arrows.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input, Output, EventEmitter, } from '@angular/core';
+
+@Component({
+    selector: 'ngx-gallery-arrows',
+    templateUrl: './ngx-gallery-arrows.component.html',
+    styleUrls: ['./ngx-gallery-arrows.component.scss']
+})
+export class NgxGalleryArrowsComponent {
+    @Input() prevDisabled: boolean;
+    @Input() nextDisabled: boolean;
+
+    @Output() onPrevClick = new EventEmitter();
+    @Output() onNextClick = new EventEmitter();
+
+    handlePrevClick(): void {
+        this.onPrevClick.emit();
+    }
+
+    handleNextClick(): void {
+        this.onNextClick.emit();
+    }
+}

lib/ngx-gallery-image.component.html

@@ -0,0 +1,2 @@
+<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>
+<ngx-gallery-arrows *ngIf="arrows" (onPrevClick)="showPrev()" (onNextClick)="showNext()" [prevDisabled]="!canShowPrev()" [nextDisabled]="!canShowNext()" ></ngx-gallery-arrows>

lib/ngx-gallery-image.component.scss

@@ -0,0 +1,28 @@
+:host {
+    width: 100%;
+    display: inline-block;
+    position: relative;
+}
+
+.ngx-gallery-image {
+    background-size: cover;
+    background-position: center;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out;
+
+    &.ngx-gallery-active {
+        opacity: 1;
+        z-index: 1000;
+    }
+
+    &.ngx-gallery-clickable {
+        cursor: pointer;
+    }
+}
+
+

lib/ngx-gallery-image.component.ts

@@ -0,0 +1,66 @@
+import { Component, Input, Output, EventEmitter, HostListener, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'ngx-gallery-image',
+    templateUrl: './ngx-gallery-image.component.html',
+    styleUrls: ['./ngx-gallery-image.component.scss']
+})
+export class NgxGalleryImageComponent implements OnInit {
+    @Input() images: string[];
+    @Input() clickable: boolean;
+    @Input() selectedIndex: number;
+    @Input() arrows: boolean;
+    @Input() arrowsAutoHide: boolean;
+
+    @Output() onClick = new EventEmitter();
+    @Output() onActiveChange = new EventEmitter();
+
+    ngOnInit(): void {
+        if(this.arrows && this.arrowsAutoHide) {
+            this.arrows = false;
+        }
+    }
+
+    @HostListener('mouseenter') onMouseEnter() {
+        if(this.arrowsAutoHide && !this.arrows) {
+            this.arrows = true;
+        }
+    }
+
+    @HostListener('mouseleave') onMouseLeave() {
+        if(this.arrowsAutoHide && this.arrows) {
+            this.arrows = false;
+        }
+    }
+
+    handleClick(event: Event, index: number): void {
+        if (this.clickable) {
+            this.onClick.emit(index);
+
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+
+    showNext(): void {
+        if (this.canShowNext()) {
+            this.selectedIndex++;
+            this.onActiveChange.emit(this.selectedIndex);
+        }
+    }
+
+    showPrev(): void {
+        if (this.canShowPrev()) {
+            this.selectedIndex--;
+            this.onActiveChange.emit(this.selectedIndex);
+        }
+    }
+
+    canShowNext(): boolean {
+        return this.selectedIndex < this.images.length - 1 ? true : false;
+    }
+
+    canShowPrev(): boolean {
+        return this.selectedIndex > 0 ? true : false;
+    }
+}