You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

angular2-image-gallery

Package Overview
Dependencies
Maintainers
1
Versions
35
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular2-image-gallery - npm Package Compare versions

Comparing version

to
1.0.0

34

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

@@ -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;

15

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',] },],

@@ -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
[![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 @@

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