angular2-image-gallery
Advanced tools
Comparing version
@@ -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 |
@@ -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; |
@@ -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',] },], |
@@ -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"}]}}}}] |
{ | ||
"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" | ||
] | ||
} |
# Angular 2 Image Gallery | ||
[](https://travis-ci.org/BenjaminBrandmeier/angular2-image-gallery) | ||
 | ||
[](https://badge.fury.io/js/angular2-image-gallery) | ||
[](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 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
No v1
QualityPackage 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 riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
110286
2.94%1192
2.49%0
-100%113
4.63%21
10.53%