self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2025-01-30 05:39:16 +02:00
Code Issues Releases Activity

lightbox draft implemented

Browse Source
This commit is contained in:
Braun Patrik 2016-04-27 22:37:07 +02:00
parent 4fda33778c
commit 542d0416fd
8 changed files with 84 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
common/entities/Photo.ts
View File

@ -1,4 +1,13 @@
import {Utils} from "../Utils";
import {Directory} from "./Directory";
export class Photo {
constructor(public id:number, public name:string, public width:number, public height:number) {
}
public static getThumbnailPath(directory:Directory,photo:Photo){
return Utils.concatUrls("/api/gallery",directory.path,directory.name,photo.name,"thumbnail");
}
public static getPhotoPath(directory:Directory,photo:Photo){
return Utils.concatUrls("/api/gallery",directory.path,directory.name,photo.name);
}
}

9
frontend/app/admin/newuser/new.user.admin.component.ts
View File

@ -1,17 +1,16 @@
import {Component} from 'angular2/core';
import {MATERIAL_DIRECTIVES} from "ng2-material/all";
import {MATERIAL_BROWSER_PROVIDERS} from "ng2-material/all";
import {MATERIAL_DIRECTIVES} from "ng2-material/all";
import {MdDialogRef} from "ng2-material/components/dialog/dialog_ref";
@Component({
selector: 'admin-new-user',
templateUrl: 'app/admin/newuser/new.user.admin.component.html',
styleUrls:['app/admin/newuser/new.user.admin.component.css'],
directives:[MATERIAL_DIRECTIVES],
providers:[MATERIAL_BROWSER_PROVIDERS]
directives:[MATERIAL_DIRECTIVES]
})
export class NewUserComponent{
constructor() {
constructor(private dialog: MdDialogRef) {
}
}

10
frontend/app/gallery/grid/grid.gallery.component.css
View File

@ -4,4 +4,14 @@ div {
gallery-photo {
/* display: inline-block;
overflow: hidden;*/
cursor: pointer;
}
.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;
}

20
frontend/app/gallery/grid/grid.gallery.component.html
View File

@ -1,13 +1,25 @@
<div *ngIf="directory" (window:resize)="onResize()" >
<div class="lightboxCss"
#lightbox
(click)="hideLightBox($event)"
[style.top.px]="lightboxModel.top"
[style.left.px]="lightboxModel.left"
[style.width.px]="lightboxModel.image.width"
[style.height.px]="lightboxModel.image.height">
<img [src]="lightboxModel.image.src" width="100%" height="100%"/>
</div>
<div #gridContainer *ngIf="directory" (window:resize)="onResize()" >
<gallery-photo
*ngFor="#gridPhoto of photosToRender"
*ngFor="#gridPhoto of photosToRender"
*ngIf="gridPhoto"
(click)="showLightBox($event,gridPhoto)"
[photo]="gridPhoto.photo"
[directory]="directory"
[style.width.px]="gridPhoto.renderWidth"
[style.height.px]="gridPhoto.renderHeight"
[style.marginLeft.px]="IMAGE_MARGIN"
[style.marginRight.px]="IMAGE_MARGIN">
[style.marginLeft.px]="IMAGE_MARGIN"
[style.marginRight.px]="IMAGE_MARGIN">
</gallery-photo>
</div>

50
frontend/app/gallery/grid/grid.gallery.component.ts
View File

@ -1,10 +1,12 @@
///<reference path="../../../browser.d.ts"/>
import {Component, Input, ElementRef, OnChanges} from 'angular2/core';
import {Component, Input, ElementRef, OnChanges, ViewChild, ContentChild} from 'angular2/core';
import {Directory} from "../../../../common/entities/Directory";
import {Photo} from "../../../../common/entities/Photo";
import {GalleryPhotoComponent} from "../photo/photo.gallery.component";
import {GridRowBuilder} from "./GridRowBuilder";
import {AnimationBuilder} from "angular2/animate";
import {Utils} from "../../../../common/Utils";
@Component({
selector: 'gallery-grid',
@ -13,7 +15,9 @@ import {GridRowBuilder} from "./GridRowBuilder";
directives:[GalleryPhotoComponent]
})
export class GalleryGridComponent implements OnChanges{
@ViewChild('lightbox') lightBoxDiv:ElementRef;
@ViewChild('gridContainer') gridContainer:ElementRef;
@Input() directory:Directory;
photosToRender:Array<GridPhoto> = [];
private IMAGE_MARGIN = 2;
@ -21,7 +25,7 @@ export class GalleryGridComponent implements OnChanges{
private MIN_ROW_COUNT = 2;
private MAX_ROW_COUNT = 5;
constructor(private elementRef: ElementRef) {
constructor(private elementRef: ElementRef,private animBuilder: AnimationBuilder) {
}
ngOnChanges(){
@ -45,7 +49,7 @@ export class GalleryGridComponent implements OnChanges{
let imageHeight = rowHeight - (this.IMAGE_MARGIN * 2);
photoRowBuilder.getPhotoRow().forEach((photo) => {
let imageWidth = imageHeight * (photo.width / photo.height);
let imageWidth = imageHeight * (photo.width / photo.height);
this.photosToRender.push(new GridPhoto(photo,imageWidth,imageHeight));
});
@ -58,11 +62,39 @@ export class GalleryGridComponent implements OnChanges{
}
private getContainerWidth(): number{
if(typeof this.elementRef.nativeElement.firstElementChild === 'undefined' ||
this.elementRef.nativeElement.firstElementChild === null){
return 0;
}
return this.elementRef.nativeElement.firstElementChild.clientWidth;
return this.gridContainer.nativeElement.clientWidth;
}
public lightboxModel = {top:0,left:0, image:{width:0, height:0,src:""}, visible: false};
public showLightBox(event,gridPhoto:GridPhoto){
gridPhoto = Utils.clone(gridPhoto);
this.lightboxModel.visible = true;
this.lightboxModel.image.src = Photo.getThumbnailPath(this.directory,gridPhoto.photo);
console.log( this.gridContainer);
let animation0 = this.animBuilder.css();
animation0.setDuration(0);
animation0.setToStyles({height: gridPhoto.renderHeight+"px", width:gridPhoto.renderWidth+"px",
"top":event.target.offsetTop+"px", "left":event.target.offsetLeft+"px"});
animation0.start(this.lightBoxDiv.nativeElement).onComplete(()=>{
let animation = this.animBuilder.css();
animation.setDuration(1000);
animation.setFromStyles({height: gridPhoto.renderHeight+"px", width:gridPhoto.renderWidth+"px",
"top":event.target.offsetTop+"px", "left":event.target.offsetLeft+"px"});
animation.setToStyles({height: "100%", width: "100%",
"top":"0px","left": "0px"});
animation.start(this.lightBoxDiv.nativeElement);
});
}
public hideLightBox(event) {
this.lightBoxDiv.nativeElement.style.width = 0;
this.lightBoxDiv.nativeElement.style.height = 0;
}

2
frontend/app/gallery/photo/photo.gallery.component.ts
View File

@ -19,6 +19,8 @@ export class GalleryPhotoComponent{
getPhotoPath(){
return Utils.concatUrls("/api/gallery",this.directory.path,this.directory.name,this.photo.name,"thumbnail");
}
}

1
frontend/app/model/network.service.ts
View File

@ -3,6 +3,7 @@
import {Http, Headers, RequestOptions, Response} from "angular2/http";
import {Message} from "../../../common/entities/Message";
import "rxjs/Rx";
import {Utils} from "../../../common/Utils";
export class NetworkService{

2
frontend/webpack.config.js
View File

@ -9,7 +9,7 @@ module.exports = {
library: ['peer']
},
// Turn on sourcemaps
devtool: 'source-map',
//devtool: 'source-map',
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],