Merge pull request #22 from BlackfootPL/feature/upgradeToAngular8

Upgraded to Angular 8.

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - '10.1.0'
+  - '10.16.0'
 addons:
   apt:
     packages:
@@ -19,4 +19,4 @@ branches:
   only:
     - master
 notifications:
-  email: false
+  email: false

angular.json

@@ -19,7 +19,7 @@
             "polyfills": "demo/polyfills.ts",
             "tsConfig": "tsconfig-demo.json",
             "styles": [
-              "./node_modules/ngx-lightbox/lightbox.css",
+              "./src/lightbox.css",
               "demo/app.css"
             ],
             "assets": [
@@ -76,4 +76,4 @@
     }
   },
   "defaultProject": "ngx-lightbox"
-}
+}

demo/app.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
-import { Lightbox, LightboxConfig, LightboxEvent, LIGHTBOX_EVENT, IEvent, IAlbum } from 'ngx-lightbox';
 import { Subscription } from 'rxjs';
+import { IAlbum, IEvent, Lightbox, LIGHTBOX_EVENT, LightboxConfig, LightboxEvent } from '../src';
 
 @Component({
   selector: 'demo',
@@ -10,6 +10,11 @@ import { Subscription } from 'rxjs';
         <img class="img-frame" [src]="image.thumb" (click)="open(i)"/>
       </div>
     </div>
+    <div class="huge-margin-top column has-text-centered">
+        <div class="img-row" *ngFor="let image of albums; let i=index">
+            <img class="img-frame" [src]="image.thumb" (click)="open(i)"/>
+        </div>
+    </div>
   `,
   host: {
     class: 'columns'
@@ -45,7 +50,11 @@ export class AppComponent {
     this._subscription = this._lightboxEvent.lightboxEvent$.subscribe((event: IEvent) => this._onReceivedEvent(event));
 
     // override the default config
-    this._lightbox.open(this.albums, index, { wrapAround: true, showImageNumberLabel: true });
+    this._lightbox.open(this.albums, index, {
+      wrapAround: true,
+      showImageNumberLabel: true,
+      disableScrolling: true
+    });
   }
 
   private _onReceivedEvent(event: IEvent): void {

demo/app.css

@@ -1,3 +1,7 @@
+.huge-margin-top {
+  margin-top: 100vh;
+}
+
 .img-row {
   display: inline-block;
 }
@@ -15,4 +19,4 @@
 .img-frame:hover, .img-frame:focus, .img-frame:active {
   -webkit-transform: translateY(-5px);
   transform: translateY(-5px);
-}
+}

demo/app.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
-import { LightboxModule } from 'ngx-lightbox';
+import { LightboxModule } from '../src';
 
 @NgModule({
   imports: [ BrowserModule, LightboxModule ],

karma.conf.js

@@ -4,7 +4,7 @@ const webpack = require('webpack');
 module.exports = config => {
   config.set({
     basePath: '',
-    frameworks: ['jasmine'],
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
     files: [
       { pattern: './src/img/*.png', watched: false, included: false, served: true, nocache: false },
       { pattern: './karma-main.js', watched: false }
@@ -21,15 +21,18 @@ module.exports = config => {
       level: 'log'
     },
     plugins: [
-      'karma-jasmine',
-      'karma-phantomjs-launcher',
-      'karma-webpack',
-      'karma-sourcemap-loader'
+      require('karma-jasmine'),
+      require('karma-phantomjs-launcher'),
+      require('karma-webpack'),
+      require('karma-sourcemap-loader'),
+      require('@angular-devkit/build-angular/plugins/karma')
     ],
     preprocessors: {
       './karma-main.js': ['webpack', 'sourcemap']
     },
     webpack: {
+      mode: 'development',
+      stats: 'errors-only',
       resolve: {
         modules: [
           'node_modules'

package.json

@@ -1,36 +1,35 @@
 {
   "name": "ngx-lightbox",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A port >= angular5 for lightbox2",
   "main": "index.js",
   "dependencies": {},
   "devDependencies": {
-    "@angular/cli": "^6.0.1",
-    "@angular/common": "^6.0.0",
-    "@angular/compiler": "^6.0.0",
-    "@angular/compiler-cli": "^6.0.0",
-    "@angular/core": "^6.0.0",
-    "@angular/platform-browser": "^6.0.0",
-    "@angular/platform-browser-dynamic": "^6.0.0",
-    "@types/jasmine": "^2.8.7",
-    "awesome-typescript-loader": "^5.0.0",
-    "ngx-lightbox": "1.1.0",
-    "copyfiles": "^2.0.0",
-    "core-js": "^2.5.6",
-    "del-cli": "^1.1.0",
-    "jasmine-core": "^2.5.2",
-    "karma": "^2.0.2",
-    "karma-jasmine": "^1.1.2",
+    "@angular/cli": "^8.0.1",
+    "@angular/common": "^8.0.0",
+    "@angular/compiler": "^8.0.0",
+    "@angular/compiler-cli": "^8.0.0",
+    "@angular/core": "^8.0.0",
+    "@angular/platform-browser": "^8.0.0",
+    "@angular/platform-browser-dynamic": "^8.0.0",
+    "@types/jasmine": "^3.3.13",
+    "awesome-typescript-loader": "^5.2.1",
+    "copyfiles": "^2.1.0",
+    "core-js": "^2.6.9",
+    "del-cli": "^2.0.0",
+    "jasmine-core": "^3.4.0",
+    "karma": "^4.1.0",
+    "karma-jasmine": "^2.0.1",
     "karma-phantomjs-launcher": "^1.0.4",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^3.0.0",
+    "karma-webpack": "^3.0.5",
     "phantomjs-prebuilt": "^2.1.16",
-    "rxjs": "^6.1.0",
-    "tslint": "^5.10.0",
-    "typescript": "2.7.2",
-    "webpack": "^4.8.1",
-    "zone.js": "^0.8.26",
-    "@angular-devkit/build-angular": "~0.6.1"
+    "rxjs": "^6.5.2",
+    "tslint": "^5.17.0",
+    "typescript": "3.4.5",
+    "webpack": "^4.33.0",
+    "zone.js": "^0.9.1",
+    "@angular-devkit/build-angular": "~0.800.1"
   },
   "scripts": {
     "start": "./node_modules/.bin/ng serve",

src/lightbox-overlay.component.ts

@@ -8,7 +8,7 @@ import {
   OnDestroy,
   Renderer
 } from '@angular/core';
-import { DOCUMENT } from '@angular/platform-browser';
+import { DOCUMENT } from '@angular/common';
 import { LightboxEvent, LIGHTBOX_EVENT, IEvent } from './lightbox-event.service';
 import { Subscription } from 'rxjs';
 

src/lightbox.component.ts

@@ -10,7 +10,8 @@ import {
   SecurityContext,
   ViewChild,
 } from '@angular/core';
-import { DOCUMENT, DomSanitizer } from '@angular/platform-browser';
+import { DOCUMENT } from '@angular/common';
+import { DomSanitizer } from '@angular/platform-browser';
 import { LightboxEvent, LIGHTBOX_EVENT, IAlbum, IEvent, LightboxWindowRef } from './lightbox-event.service';
 
 @Component({
@@ -50,15 +51,15 @@ export class LightboxComponent implements AfterViewInit, OnDestroy, OnInit {
   @Input() currentImageIndex: number;
   @Input() options: any;
   @Input() cmpRef: any;
-  @ViewChild('outerContainer') _outerContainerElem: ElementRef;
-  @ViewChild('container') _containerElem: ElementRef;
-  @ViewChild('leftArrow') _leftArrowElem: ElementRef;
-  @ViewChild('rightArrow') _rightArrowElem: ElementRef;
-  @ViewChild('navArrow') _navArrowElem: ElementRef;
-  @ViewChild('dataContainer') _dataContainerElem: ElementRef;
-  @ViewChild('image') _imageElem: ElementRef;
-  @ViewChild('caption') _captionElem: ElementRef;
-  @ViewChild('number') _numberElem: ElementRef;
+  @ViewChild('outerContainer', {static: false}) _outerContainerElem: ElementRef;
+  @ViewChild('container', {static: false}) _containerElem: ElementRef;
+  @ViewChild('leftArrow', {static: false}) _leftArrowElem: ElementRef;
+  @ViewChild('rightArrow', {static: false}) _rightArrowElem: ElementRef;
+  @ViewChild('navArrow', {static: false}) _navArrowElem: ElementRef;
+  @ViewChild('dataContainer', {static: false}) _dataContainerElem: ElementRef;
+  @ViewChild('image', {static: false}) _imageElem: ElementRef;
+  @ViewChild('caption', {static: false}) _captionElem: ElementRef;
+  @ViewChild('number', {static: false}) _numberElem: ElementRef;
   public content: any;
   public ui: any;
   private _cssValue: any;
@@ -71,7 +72,7 @@ export class LightboxComponent implements AfterViewInit, OnDestroy, OnInit {
     public _lightboxElem: ElementRef,
     private _lightboxWindowRef: LightboxWindowRef,
     private _sanitizer: DomSanitizer,
-    @Inject(DOCUMENT) private _documentRef: any
+    @Inject(DOCUMENT) private _documentRef: Document
   ) {
     // initialize data
     this.options = this.options || {};

src/lightbox.service.ts

@@ -6,7 +6,7 @@ import {
   Injectable,
   Injector
 } from '@angular/core';
-import { DOCUMENT } from '@angular/platform-browser';
+import { DOCUMENT } from '@angular/common';
 import { LightboxComponent } from './lightbox.component';
 import { LightboxConfig } from './lightbox-config.service';
 import { LightboxEvent, LIGHTBOX_EVENT, IAlbum } from './lightbox-event.service';
@@ -20,7 +20,7 @@ export class Lightbox {
     private _applicationRef: ApplicationRef,
     private _lightboxConfig: LightboxConfig,
     private _lightboxEvent: LightboxEvent,
-    @Inject(DOCUMENT) private _documentRef: any
+    @Inject(DOCUMENT) private _documentRef: Document
   ) {}
 
   open(album: Array<IAlbum>, curIndex = 0, options = {}): void {