angular2-image-gallery - npm Package Compare versions

Comparing version 0.7.0 to 0.7.1

angular2imagegallery.module.js

 "use strict";
-const platform_browser_1 = require("@angular/platform-browser");
-const core_1 = require("@angular/core");
-const forms_1 = require("@angular/forms");
-const http_1 = require("@angular/http");
-const animations_1 = require("@angular/platform-browser/animations");
-const image_service_1 = require("./services/image.service");
-const gallery_component_1 = require("./gallery/gallery.component");
-const viewer_component_1 = require("./viewer/viewer.component");
-const demo_component_1 = require("./demo/demo.component");
-class Angular2ImageGalleryModule {
-}
+var platform_browser_1 = require("@angular/platform-browser");
+var core_1 = require("@angular/core");
+var forms_1 = require("@angular/forms");
+var http_1 = require("@angular/http");
+var animations_1 = require("@angular/platform-browser/animations");
+var image_service_1 = require("./services/image.service");
+var gallery_component_1 = require("./gallery/gallery.component");
+var viewer_component_1 = require("./viewer/viewer.component");
+var demo_component_1 = require("./demo/demo.component");
+var Angular2ImageGalleryModule = (function () {
+    function Angular2ImageGalleryModule() {
+    }
+    return Angular2ImageGalleryModule;
+}());
 Angular2ImageGalleryModule.decorators = [
@@ -39,4 +42,4 @@ { type: core_1.NgModule, args: [{
 /** @nocollapse */
-Angular2ImageGalleryModule.ctorParameters = () => [];
+Angular2ImageGalleryModule.ctorParameters = function () { return []; };
 exports.Angular2ImageGalleryModule = Angular2ImageGalleryModule;
 //# sourceMappingURL=angular2imagegallery.module.js.map

demo/demo.component.js

 "use strict";
-const core_1 = require("@angular/core");
-class DemoComponent {
-    constructor() {
+var core_1 = require("@angular/core");
+var DemoComponent = (function () {
+    function DemoComponent() {
         this.flexBorderSize = 3;
@@ -9,8 +9,9 @@ this.flexImageSize = 7;
     }
-    ngOnInit() {
-    }
-    onViewerVisibilityChanged(isVisible) {
+    DemoComponent.prototype.ngOnInit = function () {
+    };
+    DemoComponent.prototype.onViewerVisibilityChanged = function (isVisible) {
         console.log('viewer visible: ' + isVisible);
-    }
-}
+    };
+    return DemoComponent;
+}());
 DemoComponent.decorators = [
@@ -24,4 +25,4 @@ { type: core_1.Component, args: [{
 /** @nocollapse */
-DemoComponent.ctorParameters = () => [];
+DemoComponent.ctorParameters = function () { return []; };
 exports.DemoComponent = DemoComponent;
 //# sourceMappingURL=demo.component.js.map

gallery/gallery.component.js

 "use strict";
-const core_1 = require("@angular/core");
-const http_1 = require("@angular/http");
-const image_service_1 = require("../services/image.service");
+var core_1 = require("@angular/core");
+var http_1 = require("@angular/http");
+var image_service_1 = require("../services/image.service");
 require("rxjs/add/operator/map");
-class GalleryComponent {
-    constructor(ImageService, http, ChangeDetectorRef) {
+var GalleryComponent = (function () {
+    function GalleryComponent(ImageService, http, ChangeDetectorRef) {
         this.ImageService = ImageService;
@@ -22,14 +22,15 @@ this.http = http;
     }
-    triggerCycle(event) {
+    GalleryComponent.prototype.triggerCycle = function (event) {
         this.scaleGallery();
-    }
-    windowResize(event) {
+    };
+    GalleryComponent.prototype.windowResize = function (event) {
         this.render();
-    }
-    ngOnInit() {
+    };
+    GalleryComponent.prototype.ngOnInit = function () {
+        var _this = this;
         this.fetchDataAndRender();
         this.viewerSubscription = this.ImageService.showImageViewerChanged$
-            .subscribe((visibility) => this.viewerChange.emit(visibility));
-    }
-    ngOnChanges(changes) {
+            .subscribe(function (visibility) { return _this.viewerChange.emit(visibility); });
+    };
+    GalleryComponent.prototype.ngOnChanges = function (changes) {
         // input params changed
@@ -40,13 +41,14 @@ if (changes["providedGalleryName"] != null)
             this.render();
-    }
-    ngOnDestroy() {
+    };
+    GalleryComponent.prototype.ngOnDestroy = function () {
         if (this.viewerSubscription) {
             this.viewerSubscription.unsubscribe();
         }
-    }
-    openImageViewer(img) {
+    };
+    GalleryComponent.prototype.openImageViewer = function (img) {
         this.ImageService.updateSelectedImageIndex(this.images.indexOf(img));
         this.ImageService.showImageViewer(true);
-    }
-    fetchDataAndRender() {
+    };
+    GalleryComponent.prototype.fetchDataAndRender = function () {
+        var _this = this;
         this.imageDataCompletePath = this.providedGalleryName != '' ?
@@ -56,7 +58,7 @@ this.imageDataStaticPath + this.providedGalleryName + '/' + this.dataFileName :
         this.http.get(this.imageDataCompletePath)
-            .map((res) => res.json())
-            .subscribe(data => {
-            this.images = data;
-            this.ImageService.updateImages(this.images);
-            this.images.forEach((image) => {
+            .map(function (res) { return res.json(); })
+            .subscribe(function (data) {
+            _this.images = data;
+            _this.ImageService.updateImages(_this.images);
+            _this.images.forEach(function (image) {
                 image['galleryImageLoaded'] = false;
@@ -67,11 +69,11 @@ image['viewerImageLoaded'] = false;
             // twice, single leads to different strange browser behaviour
-            this.render();
-            this.render();
-        }, err => console.error("Did you run the convert script from angular2-image-gallery for your images first? Original error: " + err), () => undefined);
-    }
-    render() {
+            _this.render();
+            _this.render();
+        }, function (err) { return console.error("Did you run the convert script from angular2-image-gallery for your images first? Original error: " + err); }, function () { return undefined; });
+    };
+    GalleryComponent.prototype.render = function () {
         this.gallery = [];
-        let tempRow = [this.images[0]];
-        let rowIndex = 0;
-        let i = 0;
+        var tempRow = [this.images[0]];
+        var rowIndex = 0;
+        var i = 0;
         for (i; i < this.images.length; i++) {
@@ -88,34 +90,35 @@ while (this.images[i + 1] && this.shouldAddCandidate(tempRow, this.images[i + 1])) {
         this.scaleGallery();
-    }
-    shouldAddCandidate(imgRow, candidate) {
-        let oldDifference = this.calcIdealHeight() - this.calcRowHeight(imgRow);
+    };
+    GalleryComponent.prototype.shouldAddCandidate = function (imgRow, candidate) {
+        var oldDifference = this.calcIdealHeight() - this.calcRowHeight(imgRow);
         imgRow.push(candidate);
-        let newDifference = this.calcIdealHeight() - this.calcRowHeight(imgRow);
+        var newDifference = this.calcIdealHeight() - this.calcRowHeight(imgRow);
         return Math.abs(oldDifference) > Math.abs(newDifference);
-    }
-    calcRowHeight(imgRow) {
-        let originalRowWidth = this.calcOriginalRowWidth(imgRow);
-        let ratio = (this.getGalleryWidth() - (imgRow.length - 1) * this.calcImageMargin()) / originalRowWidth;
-        let rowHeight = imgRow[0][this.minimalQualityCategory]['height'] * ratio;
+    };
+    GalleryComponent.prototype.calcRowHeight = function (imgRow) {
+        var originalRowWidth = this.calcOriginalRowWidth(imgRow);
+        var ratio = (this.getGalleryWidth() - (imgRow.length - 1) * this.calcImageMargin()) / originalRowWidth;
+        var rowHeight = imgRow[0][this.minimalQualityCategory]['height'] * ratio;
         return rowHeight;
-    }
-    calcImageMargin() {
-        let galleryWidth = this.getGalleryWidth();
-        let ratio = galleryWidth / 1920;
+    };
+    GalleryComponent.prototype.calcImageMargin = function () {
+        var galleryWidth = this.getGalleryWidth();
+        var ratio = galleryWidth / 1920;
         return Math.round(Math.max(1, this.providedImageMargin * ratio));
-    }
-    calcOriginalRowWidth(imgRow) {
-        let originalRowWidth = 0;
-        imgRow.forEach((img) => {
-            let individualRatio = this.calcIdealHeight() / img[this.minimalQualityCategory]['height'];
-            img[this.minimalQualityCategory]['width'] = img[this.minimalQualityCategory]['width'] * individualRatio;
-            img[this.minimalQualityCategory]['height'] = this.calcIdealHeight();
-            originalRowWidth += img[this.minimalQualityCategory]['width'];
+    };
+    GalleryComponent.prototype.calcOriginalRowWidth = function (imgRow) {
+        var _this = this;
+        var originalRowWidth = 0;
+        imgRow.forEach(function (img) {
+            var individualRatio = _this.calcIdealHeight() / img[_this.minimalQualityCategory]['height'];
+            img[_this.minimalQualityCategory]['width'] = img[_this.minimalQualityCategory]['width'] * individualRatio;
+            img[_this.minimalQualityCategory]['height'] = _this.calcIdealHeight();
+            originalRowWidth += img[_this.minimalQualityCategory]['width'];
         });
         return originalRowWidth;
-    }
-    calcIdealHeight() {
+    };
+    GalleryComponent.prototype.calcIdealHeight = function () {
         return this.getGalleryWidth() / (80 / this.providedImageSize) + 100;
-    }
-    getGalleryWidth() {
+    };
+    GalleryComponent.prototype.getGalleryWidth = function () {
         if (this.galleryContainer.nativeElement.clientWidth === 0) {
@@ -126,23 +129,24 @@ // IE11
         return this.galleryContainer.nativeElement.clientWidth;
-    }
-    scaleGallery() {
-        let imageCounter = 0;
-        let maximumGalleryImageHeight = 0;
-        this.gallery.forEach((imgRow) => {
-            let originalRowWidth = this.calcOriginalRowWidth(imgRow);
-            if (imgRow !== this.gallery[this.gallery.length - 1]) {
-                let ratio = (this.getGalleryWidth() - (imgRow.length - 1) * this.calcImageMargin()) / originalRowWidth;
-                imgRow.forEach((img) => {
-                    img['width'] = img[this.minimalQualityCategory]['width'] * ratio;
-                    img['height'] = img[this.minimalQualityCategory]['height'] * ratio;
+    };
+    GalleryComponent.prototype.scaleGallery = function () {
+        var _this = this;
+        var imageCounter = 0;
+        var maximumGalleryImageHeight = 0;
+        this.gallery.forEach(function (imgRow) {
+            var originalRowWidth = _this.calcOriginalRowWidth(imgRow);
+            if (imgRow !== _this.gallery[_this.gallery.length - 1]) {
+                var ratio_1 = (_this.getGalleryWidth() - (imgRow.length - 1) * _this.calcImageMargin()) / originalRowWidth;
+                imgRow.forEach(function (img) {
+                    img['width'] = img[_this.minimalQualityCategory]['width'] * ratio_1;
+                    img['height'] = img[_this.minimalQualityCategory]['height'] * ratio_1;
                     maximumGalleryImageHeight = Math.max(maximumGalleryImageHeight, img['height']);
-                    this.checkForAsyncLoading(img, imageCounter++);
+                    _this.checkForAsyncLoading(img, imageCounter++);
                 });
             }
             else {
-                imgRow.forEach((img) => {
-                    img.width = img[this.minimalQualityCategory]['width'];
-                    img.height = img[this.minimalQualityCategory]['height'];
+                imgRow.forEach(function (img) {
+                    img.width = img[_this.minimalQualityCategory]['width'];
+                    img.height = img[_this.minimalQualityCategory]['height'];
                     maximumGalleryImageHeight = Math.max(maximumGalleryImageHeight, img['height']);
-                    this.checkForAsyncLoading(img, imageCounter++);
+                    _this.checkForAsyncLoading(img, imageCounter++);
                 });
@@ -158,5 +162,5 @@ }
         this.ChangeDetectorRef.detectChanges();
-    }
-    checkForAsyncLoading(image, imageCounter) {
-        let imageElements = this.imageElements.toArray();
+    };
+    GalleryComponent.prototype.checkForAsyncLoading = function (image, imageCounter) {
+        var imageElements = this.imageElements.toArray();
         if (image['galleryImageLoaded'] ||
@@ -170,9 +174,10 @@ (imageElements.length > 0 && this.isScrolledIntoView(imageElements[imageCounter].nativeElement))) {
         }
-    }
-    isScrolledIntoView(element) {
-        let elementTop = element.getBoundingClientRect().top;
-        let elementBottom = element.getBoundingClientRect().bottom;
+    };
+    GalleryComponent.prototype.isScrolledIntoView = function (element) {
+        var elementTop = element.getBoundingClientRect().top;
+        var elementBottom = element.getBoundingClientRect().bottom;
         return elementTop < window.innerHeight && elementBottom >= 0 && (elementBottom > 0 || elementTop > 0);
-    }
-}
+    };
+    return GalleryComponent;
+}());
 GalleryComponent.decorators = [
@@ -186,7 +191,7 @@ { type: core_1.Component, args: [{
 /** @nocollapse */
-GalleryComponent.ctorParameters = () => [
+GalleryComponent.ctorParameters = function () { return [
     { type: image_service_1.ImageService, },
     { type: http_1.Http, },
     { type: core_1.ChangeDetectorRef, },
-];
+]; };
 GalleryComponent.propDecorators = {
@@ -193,0 +198,0 @@ 'providedImageMargin': [{ type: core_1.Input, args: ['flexBorderSize',] },],

package.json

 {
   "name": "angular2-image-gallery",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Responsive Angular 2 image gallery",
@@ -5,0 +5,0 @@ "repository": {

services/image.service.js

 "use strict";
-const core_1 = require("@angular/core");
-const Subject_1 = require("rxjs/Subject");
-class ImageService {
-    constructor() {
+var core_1 = require("@angular/core");
+var Subject_1 = require("rxjs/Subject");
+var ImageService = (function () {
+    function ImageService() {
         this.imagesUpdatedSource = new Subject_1.Subject();
@@ -13,12 +13,13 @@ this.imageSelectedIndexUpdatedSource = new Subject_1.Subject();
     }
-    updateImages(images) {
+    ImageService.prototype.updateImages = function (images) {
         this.imagesUpdatedSource.next(images);
-    }
-    updateSelectedImageIndex(newIndex) {
+    };
+    ImageService.prototype.updateSelectedImageIndex = function (newIndex) {
         this.imageSelectedIndexUpdatedSource.next(newIndex);
-    }
-    showImageViewer(show) {
+    };
+    ImageService.prototype.showImageViewer = function (show) {
         this.showImageViewerSource.next(show);
-    }
-}
+    };
+    return ImageService;
+}());
 ImageService.decorators = [
@@ -28,4 +29,4 @@ { type: core_1.Injectable },
 /** @nocollapse */
-ImageService.ctorParameters = () => [];
+ImageService.ctorParameters = function () { return []; };
 exports.ImageService = ImageService;
 //# sourceMappingURL=image.service.js.map

viewer/viewer.component.js

 "use strict";
-const core_1 = require("@angular/core");
-const image_service_1 = require("../services/image.service");
-class ViewerComponent {
-    constructor(ImageService) {
+var core_1 = require("@angular/core");
+var image_service_1 = require("../services/image.service");
+var ViewerComponent = (function () {
+    function ViewerComponent(ImageService) {
+        var _this = this;
         this.ImageService = ImageService;
@@ -14,28 +15,36 @@ this.images = [{}];
         this.categorySelected = 'preview_xxs';
-        ImageService.imagesUpdated$.subscribe(images => {
-            this.images = images;
+        ImageService.imagesUpdated$.subscribe(function (images) {
+            _this.images = images;
         });
-        ImageService.imageSelectedIndexUpdated$.subscribe(newIndex => {
-            this.currentIdx = newIndex;
-            this.images.forEach((image) => image['active'] = false);
-            this.images[this.currentIdx]['active'] = true;
-            this.transform = 0;
-            this.updateQuality();
+        ImageService.imageSelectedIndexUpdated$.subscribe(function (newIndex) {
+            _this.currentIdx = newIndex;
+            _this.images.forEach(function (image) { return image['active'] = false; });
+            _this.images[_this.currentIdx]['active'] = true;
+            _this.transform = 0;
+            _this.updateQuality();
         });
-        ImageService.showImageViewerChanged$.subscribe(showViewer => {
-            this.showViewer = showViewer;
+        ImageService.showImageViewerChanged$.subscribe(function (showViewer) {
+            _this.showViewer = showViewer;
         });
         this.Math = Math;
     }
-    get leftArrowActive() {
-        return this.currentIdx > 0;
-    }
-    get rightArrowActive() {
-        return this.currentIdx < this.images.length - 1;
-    }
-    pan(swipe) {
+    Object.defineProperty(ViewerComponent.prototype, "leftArrowActive", {
+        get: function () {
+            return this.currentIdx > 0;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ViewerComponent.prototype, "rightArrowActive", {
+        get: function () {
+            return this.currentIdx < this.images.length - 1;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ViewerComponent.prototype.pan = function (swipe) {
         this.transform = swipe.deltaX;
-    }
-    onResize() {
-        this.images.forEach((image) => {
+    };
+    ViewerComponent.prototype.onResize = function () {
+        this.images.forEach(function (image) {
             image['viewerImageLoaded'] = false;
@@ -45,13 +54,13 @@ image['active'] = false;
         this.updateImage();
-    }
-    showQualitySelector() {
+    };
+    ViewerComponent.prototype.showQualitySelector = function () {
         this.qualitySelectorShown = !this.qualitySelectorShown;
-    }
-    qualityChanged(newQuality) {
+    };
+    ViewerComponent.prototype.qualityChanged = function (newQuality) {
         this.qualitySelected = newQuality;
         this.updateImage();
-    }
-    imageLoaded(image) {
+    };
+    ViewerComponent.prototype.imageLoaded = function (image) {
         image['viewerImageLoaded'] = true;
-    }
+    };
     /**
@@ -61,3 +70,3 @@ * direction (-1: left, 1: right)
      */
-    navigate(direction, swipe) {
+    ViewerComponent.prototype.navigate = function (direction, swipe) {
         if ((direction === 1 && this.currentIdx < this.images.length - 1) ||
@@ -82,32 +91,33 @@ (direction === -1 && this.currentIdx > 0)) {
         }
-    }
-    hideNavigationArrows() {
+    };
+    ViewerComponent.prototype.hideNavigationArrows = function () {
         this.leftArrowVisible = false;
         this.rightArrowVisible = false;
-    }
-    showNavigationArrows() {
+    };
+    ViewerComponent.prototype.showNavigationArrows = function () {
         this.leftArrowVisible = true;
         this.rightArrowVisible = true;
-    }
-    closeViewer() {
-        this.images.forEach((image) => image['transition'] = undefined);
-        this.images.forEach((image) => image['active'] = false);
+    };
+    ViewerComponent.prototype.closeViewer = function () {
+        this.images.forEach(function (image) { return image['transition'] = undefined; });
+        this.images.forEach(function (image) { return image['active'] = false; });
         this.ImageService.showImageViewer(false);
-    }
-    updateImage() {
+    };
+    ViewerComponent.prototype.updateImage = function () {
+        var _this = this;
         // wait for animation to end
-        setTimeout(() => {
-            this.updateQuality();
-            this.images[this.currentIdx]['active'] = true;
-            this.images.forEach((image) => {
-                if (image != this.images[this.currentIdx]) {
+        setTimeout(function () {
+            _this.updateQuality();
+            _this.images[_this.currentIdx]['active'] = true;
+            _this.images.forEach(function (image) {
+                if (image != _this.images[_this.currentIdx]) {
                     image['active'] = false;
-                    this.transform = 0;
+                    _this.transform = 0;
                 }
             });
         }, 500);
-    }
-    updateQuality() {
-        let screenWidth = window.innerWidth;
-        let screenHeight = window.innerHeight;
+    };
+    ViewerComponent.prototype.updateQuality = function () {
+        var screenWidth = window.innerWidth;
+        var screenHeight = window.innerHeight;
         switch (this.qualitySelected) {
@@ -155,6 +165,6 @@ case 'auto': {
         }
-    }
-    onKeydown(event) {
-        let prevent = [37, 39, 27, 36, 35]
-            .find(no => no === event.keyCode);
+    };
+    ViewerComponent.prototype.onKeydown = function (event) {
+        var prevent = [37, 39, 27, 36, 35]
+            .find(function (no) { return no === event.keyCode; });
         if (prevent) {
@@ -191,4 +201,5 @@ event.preventDefault();
         }
-    }
-}
+    };
+    return ViewerComponent;
+}());
 ViewerComponent.decorators = [
@@ -271,6 +282,6 @@ { type: core_1.Component, args: [{
 /** @nocollapse */
-ViewerComponent.ctorParameters = () => [
+ViewerComponent.ctorParameters = function () { return [
     { type: image_service_1.ImageService, },
-];
+]; };
 exports.ViewerComponent = ViewerComponent;
 //# sourceMappingURL=viewer.component.js.map

New alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

106829

3.07%

Lines of code

1162

1.84%

Number of medium supply chain risk alerts

0

-100%

No dependency changes