angular2-image-gallery - npm Package Compare versions

Comparing version 0.5.7 to 0.5.8

app/angular2imagegallery.module.js

@@ -1,2 +0,1 @@
-"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -8,34 +7,45 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 };
-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 gallery_component_1 = require("./gallery/gallery.component");
-var viewer_component_1 = require("./viewer/viewer.component");
-var material_1 = require("@angular/material");
-var image_service_1 = require("./services/image.service");
-var Angular2ImageGalleryModule = (function () {
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { BrowserModule } from "@angular/platform-browser";
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { HttpModule } from "@angular/http";
+import { GalleryComponent } from "./gallery/gallery.component";
+import { ViewerComponent } from "./viewer/viewer.component";
+import { MaterialModule } from "@angular/material";
+import { ImageService } from "./services/image.service";
+import { DemoComponent } from "./demo/demo.component";
+export var Angular2ImageGalleryModule = (function () {
     function Angular2ImageGalleryModule() {
     }
     Angular2ImageGalleryModule = __decorate([
-        core_1.NgModule({
+        NgModule({
             declarations: [
-                gallery_component_1.GalleryComponent,
-                viewer_component_1.ViewerComponent
+                GalleryComponent,
+                ViewerComponent,
+                DemoComponent
             ],
             imports: [
-                platform_browser_1.BrowserModule,
-                forms_1.FormsModule,
-                http_1.HttpModule,
-                material_1.MaterialModule.forRoot()
+                BrowserModule,
+                FormsModule,
+                HttpModule,
+                MaterialModule.forRoot()
             ],
-            providers: [image_service_1.ImageService],
+            providers: [
+                ImageService
+            ],
             exports: [
-                gallery_component_1.GalleryComponent,
-                viewer_component_1.ViewerComponent
+                GalleryComponent,
+                ViewerComponent
+            ],
+            bootstrap: [
+                DemoComponent
             ]
-        })
+        }), 
+        __metadata('design:paramtypes', [])
     ], Angular2ImageGalleryModule);
     return Angular2ImageGalleryModule;
 }());
-exports.Angular2ImageGalleryModule = Angular2ImageGalleryModule;
+//# sourceMappingURL=c:/dev/ng2imggallery/src/app/angular2imagegallery.module.js.map

app/gallery/gallery.component.d.ts

@@ -1,6 +0,6 @@
-import { ElementRef, ChangeDetectorRef, QueryList, OnInit, SimpleChanges, OnChanges } from "@angular/core";
+import { ElementRef, ChangeDetectorRef, QueryList, OnInit, SimpleChanges, OnChanges, EventEmitter, OnDestroy } from "@angular/core";
 import { Http } from "@angular/http";
 import "rxjs/Rx";
 import { ImageService } from "../services/image.service";
-export declare class GalleryComponent implements OnInit, OnChanges {
+export declare class GalleryComponent implements OnInit, OnDestroy, OnChanges {
     private ImageService;
@@ -11,2 +11,3 @@ private http;
     providedImageSize: number;
+    viewerChange: EventEmitter<boolean>;
     galleryContainer: ElementRef;
@@ -20,5 +21,7 @@ imageElements: QueryList<any>;
     private minimalQualityCategory;
+    private viewerSubscription;
     constructor(ImageService: ImageService, http: Http, ChangeDetectorRef: ChangeDetectorRef, elementRef: ElementRef);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
     openImageViewer(img: any): void;
@@ -25,0 +28,0 @@ private fetchDataAndRender();

app/gallery/gallery.component.js

@@ -10,3 +10,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { Component, ViewChild, ElementRef, HostListener, ViewChildren, ChangeDetectorRef, QueryList, Input } from "@angular/core";
+import { Component, ViewChild, ElementRef, HostListener, ViewChildren, ChangeDetectorRef, QueryList, Input, Output, EventEmitter } from "@angular/core";
 import { Http } from "@angular/http";
@@ -22,2 +22,3 @@ import "rxjs/Rx";
         this.providedImageSize = 7;
+        this.viewerChange = new EventEmitter();
         this.imageDataFilePath = 'assets/img/gallery/data.json';
@@ -35,3 +36,6 @@ this.images = [];
     GalleryComponent.prototype.ngOnInit = function () {
+        var _this = this;
         this.fetchDataAndRender();
+        this.viewerSubscription = this.ImageService.showImageViewerChanged$
+            .subscribe(function (visibility) { return _this.viewerChange.emit(visibility); });
     };
@@ -42,2 +46,7 @@ GalleryComponent.prototype.ngOnChanges = function (changes) {
     };
+    GalleryComponent.prototype.ngOnDestroy = function () {
+        if (this.viewerSubscription) {
+            this.viewerSubscription.unsubscribe();
+        }
+    };
     GalleryComponent.prototype.openImageViewer = function (img) {
@@ -176,2 +185,6 @@ this.ImageService.updateSelectedImageIndex(this.images.indexOf(img));
     __decorate([
+        Output(), 
+        __metadata('design:type', Object)
+    ], GalleryComponent.prototype, "viewerChange", void 0);
+    __decorate([
         ViewChild('galleryContainer'), 
@@ -178,0 +191,0 @@ __metadata('design:type', ElementRef)

app/services/image.service.d.ts

@@ -0,9 +1,9 @@
+import { Observable } from "rxjs";
 export declare class ImageService {
-    constructor();
     private imagesUpdatedSource;
     private imageSelectedIndexUpdatedSource;
     private showImageViewerSource;
-    imagesUpdated$: any;
-    imageSelectedIndexUpdated$: any;
-    showImageViewerChanged$: any;
+    imagesUpdated$: Observable<any[]>;
+    imageSelectedIndexUpdated$: Observable<number>;
+    showImageViewerChanged$: Observable<boolean>;
     updateImages(images: any[]): void;
@@ -10,0 +10,0 @@ updateSelectedImageIndex(newIndex: number): void;

convert.js

@@ -8,2 +8,3 @@ var fs = require('fs');
 var argv = require('minimist')(process.argv.slice(2));
+var one = require('onecolor')
 
@@ -36,3 +37,3 @@ var sortFunction;
     }
-    if (!argv['d'] && !argv['n']) {
+    if (!argv['d'] && !argv['n'] && !argv['c']) {
         console.log('No sorting mechanism specified! Default mode will be sorting by file name.');
@@ -49,2 +50,6 @@ sortFunction = sortByFileName;
     }
+    if (argv['c']) {
+        sortFunction = sortByPrimaryColor;
+        console.log('Going to sort images by color (experimental).');
+    }
 
@@ -203,3 +208,3 @@ convert();
 
-    saveMetadataFile();
+    saveMetadataFile(imageMetadataArray);
 }
@@ -221,7 +226,40 @@
 
-    saveMetadataFile();
+    saveMetadataFile(imageMetadataArray);
 }
 
-function saveMetadataFile() {
-    var metadataAsJSON = JSON.stringify(imageMetadataArray, null, null);
+function sortByPrimaryColor() {
+    console.log('\nSorting images by primary color...');
+
+    var iterations = 8;
+    var sortedColorsArray = [];
+    for (var i = 0; i < iterations; i++) {
+        var specificColorSpectrum = imageMetadataArray.filter(function(imageMetadata) {
+            var color = one(imageMetadata['dominantColor']);
+            var hue = color.hue();
+            return hue <= i * 0.125 && hue > ((i * 0.125) - 0.125)
+        });
+
+        specificColorSpectrum.sort(function (a, b) {
+            var colorA = one(a['dominantColor']);
+            var colorB = one(b['dominantColor']);
+            var luminanceA = calcRelativeLuminance(colorA);
+            var luminanceB = calcRelativeLuminance(colorB);
+            if (i % 2 == 1) {
+                return luminanceA - luminanceB;
+            } else {
+                return luminanceB - luminanceA;
+            }
+        });
+
+        sortedColorsArray[i] = specificColorSpectrum;
+    }
+    var sortedColorsArray = flatten(sortedColorsArray);
+
+    console.log('...done (sorting)');
+
+    saveMetadataFile(sortedColorsArray);
+}
+
+function saveMetadataFile(sortedMetadataArray) {
+    var metadataAsJSON = JSON.stringify(sortedMetadataArray, null, null);
     console.log('\nSaving metadata file...');
@@ -235,2 +273,13 @@
 
+function calcRelativeLuminance(color) {
+    return Math.sqrt(.299 * Math.pow(color.red(), 2) + .587 * Math.pow(color.green(), 2) + .114 * Math.pow(color.blue(), 2));
+};
+
+// http://stackoverflow.com/a/15030117/810595
+function flatten(arr) {
+    return arr.reduce(function (flat, toFlatten) {
+        return flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten);
+    }, []);
+}
+
 init();

package.json

 {
   "name": "angular2-image-gallery",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "description": "Responsive Angular 2 image gallery",
@@ -54,2 +54,3 @@ "repository": {
     "minimist": "^1.2.0",
+    "onecolor": "^3.0.4",
     "rxjs": "^5.0.1",
@@ -56,0 +57,0 @@ "web-animations-js": "^2.2.2",

README.md

@@ -63,11 +63,17 @@ # Angular 2 Image Gallery
 
+`-n` sort by primary image color
+
 #### 6. Embed gallery in your template
 
 ```javascript
-<gallery [flexBorderSize]="3" [flexImageSize]="7"></gallery>
+<gallery 
+    [flexBorderSize]="3" 
+    [flexImageSize]="7" 
+    (viewerChange)="yourNotificationFunction($event)">
+</gallery>
 ```
 
-The parameters flexBorderSize and flexImageSize are optional. 
+All parameters are optional. You may play around on the demo site to find out what parameters suit your needs.
 
-You may play around on the demo site to find out what parameters suit your needs.
+The viewerChange event notifies you when the viewer component gets opened or closed.
 
@@ -74,0 +80,0 @@ That's it, start your application and have a look!

No alert changes

Improved metrics

Total package byte prevSize

70783

5.09%

Lines of code

963

7.36%

Number of lines in readme file

93

6.9%

Worsened metrics

Dependency count

18

5.88%

Dependency changes

• + Added

  onecolor@^3.0.4

• + Added

  onecolor@3.1.0
  (transitive)