+
+
\ No newline at end of file
diff --git a/frontend/app/gallery/directory/directory.gallery.component.html b/frontend/app/gallery/directory/directory.gallery.component.html
index bd2c073..61154f0 100644
--- a/frontend/app/gallery/directory/directory.gallery.component.html
+++ b/frontend/app/gallery/directory/directory.gallery.component.html
@@ -1,3 +1,7 @@
-
+
+
+ {{directory.name}}
+
diff --git a/frontend/app/gallery/gallery.component.css b/frontend/app/gallery/gallery.component.css
index 0e543c6..e69de29 100644
--- a/frontend/app/gallery/gallery.component.css
+++ b/frontend/app/gallery/gallery.component.css
@@ -1,3 +0,0 @@
-#content{
- overflow-y: scroll;
-}
\ No newline at end of file
diff --git a/frontend/app/gallery/gallery.component.html b/frontend/app/gallery/gallery.component.html
index e8ff287..9c0e378 100644
--- a/frontend/app/gallery/gallery.component.html
+++ b/frontend/app/gallery/gallery.component.html
@@ -1,9 +1,8 @@
+
-
-
+
-
\ No newline at end of file
diff --git a/frontend/app/gallery/gallery.component.ts b/frontend/app/gallery/gallery.component.ts
index b835bd5..3999bda 100644
--- a/frontend/app/gallery/gallery.component.ts
+++ b/frontend/app/gallery/gallery.component.ts
@@ -1,7 +1,7 @@
///
-import {Component, OnInit} from 'angular2/core';
-import {AuthenticationService} from "../model/authentication.service";
+import {Component, OnInit, QueryList, ViewChild, AfterViewInit} from 'angular2/core';
+import {AuthenticationService} from "../model/network/authentication.service.ts";
import {Router, RouteParams} from "angular2/router";
import {GalleryService} from "./gallery.service";
import {Directory} from "../../../common/entities/Directory";
@@ -9,8 +9,8 @@ import {Message} from "../../../common/entities/Message";
import {GalleryDirectoryComponent} from "./directory/directory.gallery.component";
import {GalleryGridComponent} from "./grid/grid.gallery.component";
import {MATERIAL_DIRECTIVES} from "ng2-material/all";
-import {SidenavService} from "ng2-material/all";
import {FrameComponent} from "../frame/frame.component";
+import {GalleryLightboxComponent} from "./lightbox/lightbox.gallery.component";
@Component({
selector: 'gallery',
@@ -18,6 +18,7 @@ import {FrameComponent} from "../frame/frame.component";
styleUrls: ['app/gallery/gallery.component.css'],
directives:[GalleryGridComponent,
GalleryDirectoryComponent,
+ GalleryLightboxComponent,
FrameComponent,
MATERIAL_DIRECTIVES]
})
@@ -25,6 +26,7 @@ export class GalleryComponent implements OnInit{
currentDirectory:Directory = new Directory(-1,"","/",new Date(),[],[]);
+
constructor(private _galleryService:GalleryService,
private _params: RouteParams,
private _authService: AuthenticationService,
@@ -50,6 +52,8 @@ export class GalleryComponent implements OnInit{
this.currentDirectory = message.result;
});
}
+
+
}
diff --git a/frontend/app/gallery/gallery.service.ts b/frontend/app/gallery/gallery.service.ts
index 82f66f6..382592a 100644
--- a/frontend/app/gallery/gallery.service.ts
+++ b/frontend/app/gallery/gallery.service.ts
@@ -1,7 +1,7 @@
///
import {Injectable} from 'angular2/core';
-import {NetworkService} from "../model/network.service";
+import {NetworkService} from "../model/network/network.service.ts";
import {Http} from "angular2/http";
import {Message} from "../../../common/entities/Message";
import {Directory} from "../../../common/entities/Directory";
diff --git a/frontend/app/gallery/grid/grid.gallery.component.css b/frontend/app/gallery/grid/grid.gallery.component.css
index a50a883..0baebea 100644
--- a/frontend/app/gallery/grid/grid.gallery.component.css
+++ b/frontend/app/gallery/grid/grid.gallery.component.css
@@ -1,17 +1,11 @@
div {
/*display: block;*/
+ line-height: normal;
+ font-size: 0;
}
gallery-photo {
- /* display: inline-block;
- overflow: hidden;*/
+ display: inline-block;
+
cursor: pointer;
+ margin: 2px;
}
-.lightboxCss{
- position: fixed; /* Stay in place */
- z-index: 1; /* Sit on top */
- left: 0;
- top: 0;
- width: 0px; /* Full width */
- height: 0px; /* Full height */
- background-color: #000066;
-}
\ No newline at end of file
diff --git a/frontend/app/gallery/grid/grid.gallery.component.html b/frontend/app/gallery/grid/grid.gallery.component.html
index 4c806e9..7d26fec 100644
--- a/frontend/app/gallery/grid/grid.gallery.component.html
+++ b/frontend/app/gallery/grid/grid.gallery.component.html
@@ -1,14 +1,8 @@
-
-
![]()
-
-
import {
- Component, Input, ElementRef, OnChanges, ViewChild, ViewChildren, QueryList
+ Component, Input, ElementRef, OnChanges, ViewChild, ViewChildren, QueryList, Output, AfterViewInit, EventEmitter
} from 'angular2/core';
import {Directory} from "../../../../common/entities/Directory";
import {Photo} from "../../../../common/entities/Photo";
@@ -9,42 +9,60 @@ import {GalleryPhotoComponent} from "../photo/photo.gallery.component";
import {GridRowBuilder} from "./GridRowBuilder";
import {AnimationBuilder} from "angular2/animate";
import {Utils} from "../../../../common/Utils";
-
+import {GalleryLightboxComponent} from "../lightbox/lightbox.gallery.component";
+import {Observable} from "rxjs/Observable";
@Component({
selector: 'gallery-grid',
templateUrl: 'app/gallery/grid/grid.gallery.component.html',
styleUrls: ['app/gallery/grid/grid.gallery.component.css'],
directives:[GalleryPhotoComponent]
})
-export class GalleryGridComponent implements OnChanges{
+export class GalleryGridComponent implements OnChanges,AfterViewInit{
- @ViewChild('lightbox') lightBoxDiv:ElementRef;
@ViewChild('gridContainer') gridContainer:ElementRef;
- @ViewChildren(GalleryPhotoComponent) photosRef:QueryList
;
+ @ViewChildren(GalleryPhotoComponent) gridPhotoQL:QueryList;
+
@Input() directory:Directory;
+ @Input() lightbox:GalleryLightboxComponent;
+
photosToRender:Array = [];
+
private IMAGE_MARGIN = 2;
private TARGET_COL_COUNT = 5;
private MIN_ROW_COUNT = 2;
private MAX_ROW_COUNT = 5;
- constructor(private elementRef: ElementRef,private animBuilder: AnimationBuilder) {
+ constructor() {
}
ngOnChanges(){
this.renderPhotos();
}
+ ngAfterViewInit(){
+ this.lightbox.gridPhotoQL = this.gridPhotoQL;
+ this.gridPhotoQL.changes.subscribe(
+ (x)=> {
+ if(this.renderedConteinerWidth != this.getContainerWidth()){
+ this.renderPhotos();
+ }
+ });
+
+ }
+
+ private renderedConteinerWidth = 0;
private renderPhotos() {
let maxRowHeight = window.innerHeight / this.MIN_ROW_COUNT;
let minRowHeight = window.innerHeight / this.MAX_ROW_COUNT;
+ let containerWidth = this.getContainerWidth();
+ this.renderedConteinerWidth = containerWidth;
this.photosToRender = [];
let i = 0;
while (i < this.directory.photos.length ) {
- let photoRowBuilder = new GridRowBuilder(this.directory.photos,i,this.IMAGE_MARGIN,this.getContainerWidth());
+ let photoRowBuilder = new GridRowBuilder(this.directory.photos,i,this.IMAGE_MARGIN,containerWidth);
photoRowBuilder.addPhotos(this.TARGET_COL_COUNT);
photoRowBuilder.adjustRowHeightBetween(minRowHeight,maxRowHeight);
@@ -56,7 +74,7 @@ export class GalleryGridComponent implements OnChanges{
this.photosToRender.push(new GridPhoto(photo,imageWidth,imageHeight));
});
- i+= photoRowBuilder.getPhotoRow().length;
+ i+= photoRowBuilder.getPhotoRow().length;
}
}
@@ -65,62 +83,14 @@ export class GalleryGridComponent implements OnChanges{
}
private getContainerWidth(): number{
+ if(!this.gridContainer){
+ return 0;
+ }
return this.gridContainer.nativeElement.clientWidth;
}
- public lightboxModel = {top:0,left:0, image:{width:0, height:0,src:""}, visible: false};
- private activePhoto:GalleryPhotoComponent = null;
- public showLightBox(gridPhoto:GridPhoto){
- let galleryPhotoComponents = this.photosRef.toArray();
- let selectedPhoto:GalleryPhotoComponent = null;
- for(let i= 0; i < galleryPhotoComponents.length; i++){
- if(galleryPhotoComponents[i].photo == gridPhoto.photo){
- selectedPhoto = galleryPhotoComponents[i];
- break;
- }
- }
- if(selectedPhoto === null){
- throw new Error("Can't find Photo");
- }
- this.activePhoto = selectedPhoto;
- this.lightboxModel.image.src = Photo.getThumbnailPath(this.directory,gridPhoto.photo);
- let from = {"top":selectedPhoto.elementRef.nativeElement.firstChild.offsetTop+"px",
- "left":selectedPhoto.elementRef.nativeElement.firstChild.offsetLeft+"px",
- width:gridPhoto.renderWidth+"px",
- height: gridPhoto.renderHeight+"px"};
-
- let animation0 = this.animBuilder.css();
- animation0.setDuration(0);
- animation0.setToStyles(from);
- animation0.start(this.lightBoxDiv.nativeElement).onComplete(()=>{
-
- let animation = this.animBuilder.css();
- animation.setDuration(1000);
- animation.setFromStyles(from);
- animation.setToStyles({height: "100%", width: "100%", "top":"0px","left": "0px"});
- animation.start(this.lightBoxDiv.nativeElement);
- });
- }
-
- public hideLightBox() {
- let to = {"top":this.activePhoto.elementRef.nativeElement.firstChild.offsetTop+"px",
- "left":this.activePhoto.elementRef.nativeElement.firstChild.offsetLeft+"px",
- width:this.activePhoto.elementRef.nativeElement.firstChild.width+"px",
- height: this.activePhoto.elementRef.nativeElement.firstChild.height+"px"};
-
- let animation = this.animBuilder.css();
- animation.setDuration(1000);
- animation.setFromStyles({height: "100%", width: "100%", "top":"0px","left": "0px"});
- animation.setToStyles(to);
- animation.start(this.lightBoxDiv.nativeElement).onComplete(()=>{
- let animation2 = this.animBuilder.css();
- animation2.setDuration(0);
- animation2.setToStyles({height: "0px", width: "0px", "top":"0px","left": "0px"});
- animation2.start(this.lightBoxDiv.nativeElement);
- });
- }
}
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.css b/frontend/app/gallery/lightbox/lightbox.gallery.component.css
new file mode 100644
index 0000000..75c5a14
--- /dev/null
+++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.css
@@ -0,0 +1,10 @@
+.lightboxCss{
+ position: fixed; /* Stay in place */
+ z-index: 1100; /* Sit on top */
+ left: 0;
+ top: 0;
+ width: 0px; /* Full width */
+ height: 0px; /* Full height */
+ background-color: #000066;
+ overflow:hidden;
+}
\ No newline at end of file
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.html b/frontend/app/gallery/lightbox/lightbox.gallery.component.html
new file mode 100644
index 0000000..e5e58bb
--- /dev/null
+++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.html
@@ -0,0 +1,5 @@
+
+

+
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts
new file mode 100644
index 0000000..e2afe99
--- /dev/null
+++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts
@@ -0,0 +1,87 @@
+///
+
+import {Component, Input, ElementRef, ViewChild, QueryList} from 'angular2/core';
+import {Photo} from "../../../../common/entities/Photo";
+import {Directory} from "../../../../common/entities/Directory";
+import {Utils} from "../../../../common/Utils";
+import {IRenderable, Dimension} from "../../model/IRenderable";
+import {GalleryPhotoComponent} from "../photo/photo.gallery.component";
+import {AnimationBuilder} from "angular2/animate";
+import {BrowserDomAdapter} from "angular2/src/platform/browser/browser_adapter";
+
+@Component({
+ selector: 'gallery-lightbox',
+ styleUrls: ['app/gallery/lightbox/lightbox.gallery.component.css'],
+ templateUrl: 'app/gallery/lightbox/lightbox.gallery.component.html'
+})
+export class GalleryLightboxComponent{
+
+ @ViewChild('lightbox') lightBoxDiv:ElementRef;
+
+ private activePhoto:GalleryPhotoComponent = null;
+ public gridPhotoQL:QueryList;
+
+
+ dom:BrowserDomAdapter;
+
+ constructor(private animBuilder: AnimationBuilder) {
+ this.dom = new BrowserDomAdapter();
+ }
+
+ public show(photo:Photo){
+ let galleryPhotoComponents = this.gridPhotoQL.toArray();
+ let selectedPhoto:GalleryPhotoComponent = null;
+ for(let i= 0; i < galleryPhotoComponents.length; i++){
+ if(galleryPhotoComponents[i].photo == photo){
+ selectedPhoto = galleryPhotoComponents[i];
+ break;
+ }
+ }
+ if(selectedPhoto === null){
+ throw new Error("Can't find Photo");
+ }
+
+ this.dom.setStyle(this.dom.query('body'), 'overflow', 'hidden');
+ this.activePhoto = selectedPhoto;
+
+
+ let from = this.activePhoto.getDimension();
+ from.top -= this.getBodyScrollTop();
+ console.log(from);
+ let animation0 = this.animBuilder.css();
+ animation0.setDuration(0);
+ animation0.setToStyles(from.toStyle());
+ animation0.start(this.lightBoxDiv.nativeElement).onComplete(()=>{
+
+ let animation = this.animBuilder.css();
+ animation.setDuration(800);
+ animation.setFromStyles(from.toStyle());
+ animation.setToStyles({height: "100%", width: "100%", "top":"0px","left": "0px"});
+ animation.start(this.lightBoxDiv.nativeElement);
+ });
+ }
+
+ public hide() {
+ console.log("hiding");
+ let to = this.activePhoto.getDimension();
+ to.top -= this.getBodyScrollTop();
+
+ let animation = this.animBuilder.css();
+ animation.setDuration(800);
+ animation.setFromStyles({height: "100%", width: "100%", "top":"0px","left": "0px"});
+ animation.setToStyles(to.toStyle());
+ animation.start(this.lightBoxDiv.nativeElement).onComplete(()=>{
+ let animation2 = this.animBuilder.css();
+ animation2.setDuration(0);
+ animation2.setToStyles({height: "0px", width: "0px", "top":"0px","left": "0px"});
+ animation2.start(this.lightBoxDiv.nativeElement);
+ this.dom.setStyle(this.dom.query('body'), 'overflow', 'auto');
+ });
+ }
+
+ private getBodyScrollTop(){
+ return this.dom.getProperty(this.dom.query('body'),'scrollTop');
+ }
+
+}
+
diff --git a/frontend/app/gallery/photo/photo.gallery.component.css b/frontend/app/gallery/photo/photo.gallery.component.css
new file mode 100644
index 0000000..35aea23
--- /dev/null
+++ b/frontend/app/gallery/photo/photo.gallery.component.css
@@ -0,0 +1,5 @@
+img {
+ width: inherit;
+ height: inherit;
+ vertical-align: inherit;
+}
\ No newline at end of file
diff --git a/frontend/app/gallery/photo/photo.gallery.component.html b/frontend/app/gallery/photo/photo.gallery.component.html
index 80ae887..4fd4026 100644
--- a/frontend/app/gallery/photo/photo.gallery.component.html
+++ b/frontend/app/gallery/photo/photo.gallery.component.html
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/frontend/app/gallery/photo/photo.gallery.component.ts b/frontend/app/gallery/photo/photo.gallery.component.ts
index 3b70af5..6fde50a 100644
--- a/frontend/app/gallery/photo/photo.gallery.component.ts
+++ b/frontend/app/gallery/photo/photo.gallery.component.ts
@@ -1,19 +1,22 @@
///
-import {Component, Input, ElementRef} from 'angular2/core';
+import {Component, Input, ElementRef, ViewChild} from 'angular2/core';
import {Photo} from "../../../../common/entities/Photo";
import {Directory} from "../../../../common/entities/Directory";
-import {Utils} from "../../../../common/Utils";
+import {Utils} from "../../../../common/Utils";
+import {IRenderable, Dimension} from "../../model/IRenderable";
@Component({
selector: 'gallery-photo',
- templateUrl: 'app/gallery/photo/photo.gallery.component.html'
+ templateUrl: 'app/gallery/photo/photo.gallery.component.html',
+ styleUrls: ['app/gallery/photo/photo.gallery.component.css'],
})
-export class GalleryPhotoComponent{
+export class GalleryPhotoComponent implements IRenderable{
@Input() photo: Photo;
@Input() directory: Directory;
+ @ViewChild("image") imageRef:ElementRef;
- constructor(public elementRef: ElementRef) {
+ constructor() {
}
getPhotoPath(){
@@ -21,6 +24,14 @@ export class GalleryPhotoComponent{
}
+ public getDimension():Dimension{
+ console.log(this.imageRef);
+ console.log(this.imageRef.nativeElement);
+ return new Dimension(this.imageRef.nativeElement.offsetTop,
+ this.imageRef.nativeElement.offsetLeft,
+ this.imageRef.nativeElement.width,
+ this.imageRef.nativeElement.height);
+ }
}
diff --git a/frontend/app/login/login.component.ts b/frontend/app/login/login.component.ts
index bef0d34..0353c17 100644
--- a/frontend/app/login/login.component.ts
+++ b/frontend/app/login/login.component.ts
@@ -2,7 +2,7 @@
import {Component, OnInit} from 'angular2/core';
import {LoginCredential} from '../../../common/entities/LoginCredential';
-import {AuthenticationService} from "../model/authentication.service";
+import {AuthenticationService} from "../model/network/authentication.service.ts";
import {Router} from "angular2/router";
import {MATERIAL_DIRECTIVES} from "ng2-material/all";
import {FORM_DIRECTIVES} from "angular2/common";
diff --git a/frontend/app/model/IRenderable.ts b/frontend/app/model/IRenderable.ts
new file mode 100644
index 0000000..e067083
--- /dev/null
+++ b/frontend/app/model/IRenderable.ts
@@ -0,0 +1,22 @@
+export interface IRenderable {
+ getDimension():Dimension;
+}
+
+export class Dimension {
+ public top:number;
+ public left:number;
+ public width:number;
+ public height:number;
+
+
+ constructor(top:number, left:number, width:number, height:number) {
+ this.top = top;
+ this.left = left;
+ this.width = width;
+ this.height = height;
+ }
+
+ public toStyle() {
+ return {height: this.height + "px", width: this.width + "px", top: this.top + "px", left: this.left + "px"}
+ }
+}
diff --git a/frontend/app/model/autehentication.service.spec.ts b/frontend/app/model/network/autehentication.service.spec.ts
similarity index 70%
rename from frontend/app/model/autehentication.service.spec.ts
rename to frontend/app/model/network/autehentication.service.spec.ts
index ad6cca8..b4ff6cb 100644
--- a/frontend/app/model/autehentication.service.spec.ts
+++ b/frontend/app/model/network/autehentication.service.spec.ts
@@ -1,4 +1,4 @@
-///
+///
import {
it,
@@ -9,12 +9,12 @@ import {
} from 'angular2/testing';
import {provide} from 'angular2/core';
-import {AuthenticationService} from "./authentication.service";
-import {UserService} from "./user.service";
-import {User} from "../../../common/entities/User";
-import {Message} from "../../../common/entities/Message";
+import {AuthenticationService} from "./authentication.service.ts";
+import {UserService} from "./user.service.ts";
+import {User} from "../../../../common/entities/User";
+import {Message} from "../../../../common/entities/Message";
import "rxjs/Rx";
-import {LoginCredential} from "../../../common/entities/LoginCredential";
+import {LoginCredential} from "../../../../common/entities/LoginCredential";
class MockUserService {
public login(credential:LoginCredential){
diff --git a/frontend/app/model/authentication.service.ts b/frontend/app/model/network/authentication.service.ts
similarity index 82%
rename from frontend/app/model/authentication.service.ts
rename to frontend/app/model/network/authentication.service.ts
index 4f24a6b..0619c92 100644
--- a/frontend/app/model/authentication.service.ts
+++ b/frontend/app/model/network/authentication.service.ts
@@ -1,11 +1,11 @@
-///
+///
import {Injectable} from 'angular2/core';
-import {User} from "../../../common/entities/User";
-import {Event} from "../../../common/event/Event";
-import {UserService} from "./user.service";
-import {LoginCredential} from "../../../common/entities/LoginCredential";
-import {Message} from "../../../common/entities/Message";
+import {User} from "../../../../common/entities/User";
+import {Event} from "../../../../common/event/Event";
+import {UserService} from "./user.service.ts";
+import {LoginCredential} from "../../../../common/entities/LoginCredential";
+import {Message} from "../../../../common/entities/Message";
import { Cookie } from 'ng2-cookies/ng2-cookies';
declare module ServerInject{
diff --git a/frontend/app/model/network.service.ts b/frontend/app/model/network/network.service.ts
similarity index 91%
rename from frontend/app/model/network.service.ts
rename to frontend/app/model/network/network.service.ts
index 11a2df8..41522c6 100644
--- a/frontend/app/model/network.service.ts
+++ b/frontend/app/model/network/network.service.ts
@@ -1,9 +1,9 @@
-///
+///
import {Http, Headers, RequestOptions, Response} from "angular2/http";
-import {Message} from "../../../common/entities/Message";
+import {Message} from "../../../../common/entities/Message";
import "rxjs/Rx";
-import {Utils} from "../../../common/Utils";
+import {Utils} from "../../../../common/Utils";
export class NetworkService{
diff --git a/frontend/app/model/user.service.ts b/frontend/app/model/network/user.service.ts
similarity index 61%
rename from frontend/app/model/user.service.ts
rename to frontend/app/model/network/user.service.ts
index 917c019..92f7e44 100644
--- a/frontend/app/model/user.service.ts
+++ b/frontend/app/model/network/user.service.ts
@@ -1,11 +1,11 @@
-///
+///
import {Injectable} from 'angular2/core';
-import {LoginCredential} from "../../../common/entities/LoginCredential";
+import {LoginCredential} from "../../../../common/entities/LoginCredential";
import {Http} from "angular2/http";
-import {NetworkService} from "./network.service";
-import {User} from "../../../common/entities/User";
-import {Message} from "../../../common/entities/Message";
+import {NetworkService} from "./network.service.ts";
+import {User} from "../../../../common/entities/User";
+import {Message} from "../../../../common/entities/Message";
@Injectable()
export class UserService extends NetworkService{
diff --git a/frontend/index.ejs b/frontend/index.ejs
index 5ccdd40..94db875 100644
--- a/frontend/index.ejs
+++ b/frontend/index.ejs
@@ -6,12 +6,24 @@
PiGallery2
+
+
+
Loading...
-
+
+
+
+
+