angular2-image-gallery - npm Package Compare versions

Comparing version 0.7.4 to 1.0.0

convert.js

@@ -27,17 +27,39 @@ var fs = require('fs');
 function init() {
-    if(argv["gName"]){
+    if (argv["gName"]) {
         var galleryName = argv['gName'];
-        console.log(`Gallery name provided - '${galleryName}'. Images to be created in the '${galleryName}' subfolder`);
+        console.log(`Gallery name provided - '${galleryName}'.`);
         assetsAbsoluteBasePath = assetsAbsoluteBasePath + argv['gName'] + "/";
         previewRelativePath = previewRelativePath + argv['gName'] + "/";
     }
+    if (argv["outputDir"]) {
+        var outputDirectory = argv["outputDir"];
+        if (outputDirectory.indexOf(outputDirectory.length) != '/') {
+          outputDirectory += '/';
+        }
+        assetsAbsoluteBasePath = outputDirectory;
+    }
+    if (argv["remoteBaseUrl"]) {
+        var remoteBaseUrl = argv["remoteBaseUrl"];
+        if (remoteBaseUrl.indexOf(remoteBaseUrl.length) != '/') {
+          remoteBaseUrl += '/';
+        }
+        previewRelativePath = remoteBaseUrl;
+    }
     if (argv['_'].length == 0) {
         toConvertAbsoluteBasePath = projectRoot + "/images_to_convert";
-        console.log('No path specified! Defaulting to ' + toConvertAbsoluteBasePath)
+        console.log('No path specified! Defaulting to ' + toConvertAbsoluteBasePath);
     } else if (argv['_'].length > 1) {
-        console.log('Illegally specified more than one argument!')
+        console.log('Illegally specified more than one argument!');
     }
     else {
-        toConvertAbsoluteBasePath = argv._[0]
+        toConvertAbsoluteBasePath = argv._[0];
+        if (toConvertAbsoluteBasePath.indexOf(toConvertAbsoluteBasePath.length) != '/') {
+            toConvertAbsoluteBasePath += '/';
+        }
     }
+
+    console.log(`\nImages will be scanned from this location:\n${toConvertAbsoluteBasePath}`);
+    console.log(`\nImages will be exported to this location:\n${assetsAbsoluteBasePath}`);
+    console.log(`\nImages will be expected during runtime at this location:\n${previewRelativePath}\n`);
+
     if (!argv['d'] && !argv['n'] && !argv['c']) {
@@ -278,3 +300,3 @@ console.log('No sorting mechanism specified! Default mode will be sorting by file name.');
     return Math.sqrt(.299 * Math.pow(color.red(), 2) + .587 * Math.pow(color.green(), 2) + .114 * Math.pow(color.blue(), 2));
-};
+}
 
@@ -281,0 +303,0 @@ // http://stackoverflow.com/a/15030117/810595

gallery/gallery.component.d.ts

@@ -13,2 +13,3 @@ import { ElementRef, ChangeDetectorRef, QueryList, OnInit, SimpleChanges, OnChanges, EventEmitter, OnDestroy } from "@angular/core";
     providedGalleryName: string;
+    providedMetadataUri: string;
     viewerChange: EventEmitter<boolean>;
@@ -15,0 +16,0 @@ galleryContainer: ElementRef;

gallery/gallery.component.js

@@ -14,2 +14,3 @@ "use strict";
         this.providedGalleryName = '';
+        this.providedMetadataUri = undefined;
         this.viewerChange = new core_1.EventEmitter();
@@ -54,5 +55,8 @@ this.gallery = [];
         var _this = this;
-        this.imageDataCompletePath = this.providedGalleryName != '' ?
-            this.imageDataStaticPath + this.providedGalleryName + '/' + this.dataFileName :
-            this.imageDataStaticPath + this.dataFileName;
+        this.imageDataCompletePath = this.providedMetadataUri;
+        if (!this.providedMetadataUri) {
+            this.imageDataCompletePath = this.providedGalleryName != '' ?
+                this.imageDataStaticPath + this.providedGalleryName + '/' + this.dataFileName :
+                this.imageDataStaticPath + this.dataFileName;
+        }
         this.http.get(this.imageDataCompletePath)
@@ -71,3 +75,5 @@ .map(function (res) { return res.json(); })
             _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; });
+        }, function (err) { return _this.providedMetadataUri ?
+            console.error("Provided endpoint '" + _this.providedMetadataUri + "' did not serve metadata correctly or in the expected format. \n\nSee here for more information: https://github.com/BenjaminBrandmeier/angular2-image-gallery/blob/master/docs/externalDataSource.md,\n\nOriginal error: " + err) :
+            console.error("Did you run the convert script from angular2-image-gallery for your images first? Original error: " + err); }, function () { return undefined; });
     };
@@ -196,2 +202,3 @@ GalleryComponent.prototype.render = function () {
     'providedGalleryName': [{ type: core_1.Input, args: ['galleryName',] },],
+    'providedMetadataUri': [{ type: core_1.Input, args: ['metadataUri',] },],
     'viewerChange': [{ type: core_1.Output },],
@@ -198,0 +205,0 @@ 'galleryContainer': [{ type: core_1.ViewChild, args: ['galleryContainer',] },],

gallery/gallery.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"GalleryComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery","templateUrl":"./gallery.component.html","styleUrls":["./gallery.component.css"]}]}],"members":{"providedImageMargin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["flexBorderSize"]}]}],"providedImageSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["flexImageSize"]}]}],"providedGalleryName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["galleryName"]}]}],"viewerChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"galleryContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["galleryContainer"]}]}],"imageElements":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":["imageElement"]}]}],"triggerCycle":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:scroll",["$event"]]}]}],"windowResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:resize",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/image.service","name":"ImageService"},{"__symbolic":"reference","module":"@angular/http","name":"Http"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"openImageViewer":[{"__symbolic":"method"}],"fetchDataAndRender":[{"__symbolic":"method"}],"render":[{"__symbolic":"method"}],"shouldAddCandidate":[{"__symbolic":"method"}],"calcRowHeight":[{"__symbolic":"method"}],"calcImageMargin":[{"__symbolic":"method"}],"calcOriginalRowWidth":[{"__symbolic":"method"}],"calcIdealHeight":[{"__symbolic":"method"}],"getGalleryWidth":[{"__symbolic":"method"}],"scaleGallery":[{"__symbolic":"method"}],"checkForAsyncLoading":[{"__symbolic":"method"}],"isScrolledIntoView":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GalleryComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery","templateUrl":"./gallery.component.html","styleUrls":["./gallery.component.css"]}]}],"members":{"providedImageMargin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["flexBorderSize"]}]}],"providedImageSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["flexImageSize"]}]}],"providedGalleryName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["galleryName"]}]}],"viewerChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"galleryContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["galleryContainer"]}]}],"imageElements":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":["imageElement"]}]}],"triggerCycle":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:scroll",["$event"]]}]}],"windowResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:resize",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/image.service","name":"ImageService"},{"__symbolic":"reference","module":"@angular/http","name":"Http"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"openImageViewer":[{"__symbolic":"method"}],"fetchDataAndRender":[{"__symbolic":"method"}],"render":[{"__symbolic":"method"}],"shouldAddCandidate":[{"__symbolic":"method"}],"calcRowHeight":[{"__symbolic":"method"}],"calcImageMargin":[{"__symbolic":"method"}],"calcOriginalRowWidth":[{"__symbolic":"method"}],"calcIdealHeight":[{"__symbolic":"method"}],"getGalleryWidth":[{"__symbolic":"method"}],"scaleGallery":[{"__symbolic":"method"}],"checkForAsyncLoading":[{"__symbolic":"method"}],"isScrolledIntoView":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"GalleryComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery","templateUrl":"./gallery.component.html","styleUrls":["./gallery.component.css"]}]}],"members":{"providedImageMargin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["flexBorderSize"]}]}],"providedImageSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["flexImageSize"]}]}],"providedGalleryName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["galleryName"]}]}],"providedMetadataUri":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["metadataUri"]}]}],"viewerChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"galleryContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["galleryContainer"]}]}],"imageElements":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":["imageElement"]}]}],"triggerCycle":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:scroll",["$event"]]}]}],"windowResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:resize",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/image.service","name":"ImageService"},{"__symbolic":"reference","module":"@angular/http","name":"Http"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"openImageViewer":[{"__symbolic":"method"}],"fetchDataAndRender":[{"__symbolic":"method"}],"render":[{"__symbolic":"method"}],"shouldAddCandidate":[{"__symbolic":"method"}],"calcRowHeight":[{"__symbolic":"method"}],"calcImageMargin":[{"__symbolic":"method"}],"calcOriginalRowWidth":[{"__symbolic":"method"}],"calcIdealHeight":[{"__symbolic":"method"}],"getGalleryWidth":[{"__symbolic":"method"}],"scaleGallery":[{"__symbolic":"method"}],"checkForAsyncLoading":[{"__symbolic":"method"}],"isScrolledIntoView":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GalleryComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gallery","templateUrl":"./gallery.component.html","styleUrls":["./gallery.component.css"]}]}],"members":{"providedImageMargin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["flexBorderSize"]}]}],"providedImageSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["flexImageSize"]}]}],"providedGalleryName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["galleryName"]}]}],"providedMetadataUri":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["metadataUri"]}]}],"viewerChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"galleryContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["galleryContainer"]}]}],"imageElements":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":["imageElement"]}]}],"triggerCycle":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:scroll",["$event"]]}]}],"windowResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:resize",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/image.service","name":"ImageService"},{"__symbolic":"reference","module":"@angular/http","name":"Http"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"openImageViewer":[{"__symbolic":"method"}],"fetchDataAndRender":[{"__symbolic":"method"}],"render":[{"__symbolic":"method"}],"shouldAddCandidate":[{"__symbolic":"method"}],"calcRowHeight":[{"__symbolic":"method"}],"calcImageMargin":[{"__symbolic":"method"}],"calcOriginalRowWidth":[{"__symbolic":"method"}],"calcIdealHeight":[{"__symbolic":"method"}],"getGalleryWidth":[{"__symbolic":"method"}],"scaleGallery":[{"__symbolic":"method"}],"checkForAsyncLoading":[{"__symbolic":"method"}],"isScrolledIntoView":[{"__symbolic":"method"}]}}}}]

package.json

 {
   "name": "angular2-image-gallery",
-  "version": "0.7.4",
+  "version": "1.0.0",
   "description": "Responsive Angular 2 image gallery",
@@ -26,2 +26,5 @@ "repository": {
     "e2e": "ng e2e",
+    "browserstack-oidamo": "ng e2e --serve=false --config=browserstack/browserstack_oidamo.conf.js",
+    "browserstack-local": "ng e2e --config=browserstack/browserstack_local.conf.js",
+    "browserstack-travis": "ng e2e --config=browserstack/browserstack_travis.conf.js",
     "convert": "node convert.js",
@@ -65,2 +68,4 @@ "clear-lib": "rimraf lib",
     "angular2-inline-template-style": "^0.2.2",
+    "browserstack": "^1.5.0",
+    "browserstack-local": "^1.3.0",
     "codelyzer": "~2.0.0",
@@ -99,4 +104,5 @@ "jasmine-core": "2.5.2",
     "ng",
-    "angular"
+    "angular",
+    "angular4"
   ]
 }

README.md

 # Angular 2 Image Gallery
 [![Build Status](https://travis-ci.org/BenjaminBrandmeier/angular2-image-gallery.svg?branch=master)](https://travis-ci.org/BenjaminBrandmeier/angular2-image-gallery)
+![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=RGhGVlA1TFRTM3NybzNLUktwZjdpNmI2NEo3Qkp4S2pqaVc3a3BqM1MyOD0tLVRUVml3MnI4bUhGWWxuY25hUmREV3c9PQ==--8e070941683e3c345b75213325bedb26be4c93c4)
 [![npm version](https://badge.fury.io/js/angular2-image-gallery.svg)](https://badge.fury.io/js/angular2-image-gallery)
 [![npm downloads](https://img.shields.io/npm/dt/angular2-image-gallery.svg)](https://www.npmjs.com/package/angular2-image-gallery)
 
-A responsive image gallery designed for high resolution images.
+Responsive image gallery designed for high resolution images.
 
 The project consists of a gallery, a viewer and a script for image preparation.
 
-Before using the gallery, you have to process all of your images that will be part of your gallery with the node.js script. The processed images will be stored to your applications assets. During runtime everything runs client-side and there is no separate server-side communication involved. The viewer takes care that an optimal image quality is served based on the device resolution.
+Before using the gallery, you have to process all of your images that will be part of your gallery with the node.js script. The processed images will be stored to your applications assets or, if you'd like to, at a remote location. During runtime everything runs client-side and there is no separate server-side communication involved. The viewer takes care that an optimal image quality is served based on the device resolution.
 
@@ -96,2 +97,6 @@ ## Demo
 
+## Fetching images from an external data source
+
+If you'd like to know how you could fetch your images from an external data source [CLICK HERE](https://github.com/BenjaminBrandmeier/angular2-image-gallery/blob/master/docs/externalDataSource.md).
+
 ## Currently used tools
@@ -98,0 +103,0 @@

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

110286

2.94%

Lines of code

1192

2.49%

Number of low quality alerts

0

-100%

Number of lines in readme file

113

4.63%

Worsened metrics

Dev dependency count

21

10.53%

No dependency changes