mirror of
https://github.com/bpatrik/pigallery2.git
synced 2024-12-25 02:04:15 +02:00
adding bootstrap to the project
Refactoring lightbox
This commit is contained in:
parent
17b5f4257d
commit
f9481c9f6e
@ -1,7 +1,7 @@
|
||||
///<reference path="../../browser.d.ts"/>
|
||||
|
||||
import {Component, OnInit} from 'angular2/core';
|
||||
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 {MATERIAL_BROWSER_PROVIDERS} from "ng2-material/all";
|
||||
|
@ -1,7 +1,7 @@
|
||||
///<reference path="../../browser.d.ts"/>
|
||||
|
||||
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";
|
||||
|
@ -3,13 +3,13 @@
|
||||
import { Component } from 'angular2/core';
|
||||
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouterLink} from 'angular2/router';
|
||||
import {LoginComponent} from "./login/login.component";
|
||||
import {AuthenticationService} from "./model/authentication.service";
|
||||
import {AuthenticationService} from "./model/network/authentication.service.ts";
|
||||
import {GalleryComponent} from "./gallery/gallery.component";
|
||||
import {OnInit} from "angular2/core";
|
||||
import {User} from "../../common/entities/User";
|
||||
import {Router} from "angular2/router";
|
||||
import {HTTP_PROVIDERS} from "angular2/http";
|
||||
import {UserService} from "./model/user.service";
|
||||
import {UserService} from "./model/network/user.service.ts";
|
||||
import {GalleryService} from "./gallery/gallery.service";
|
||||
import {MATERIAL_BROWSER_PROVIDERS} from "ng2-material/all";
|
||||
import {ViewportHelper} from "ng2-material/core/util/viewport";
|
||||
|
@ -14,8 +14,7 @@
|
||||
</md-content>
|
||||
</md-sidenav>
|
||||
|
||||
<md-content flex>
|
||||
<div layout="column" style="height: 100vh; overflow-y: hidden;">
|
||||
<!-- <div layout="column" style="height: 100vh; overflow-y: hidden;">
|
||||
<md-toolbar mdScrollShrink>
|
||||
<div class="md-toolbar-tools">
|
||||
<button md-button class="md-icon-button md-primary" aria-label="Settings" (click)="showSideNav()">
|
||||
@ -29,7 +28,34 @@
|
||||
</md-toolbar>
|
||||
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
</md-content>
|
||||
</div>-->
|
||||
<div>
|
||||
<nav class="navbar navbar-inverse navbar-static-top">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Project name</a>
|
||||
</div>
|
||||
<div id="navbar" class="collapse navbar-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container" style="width: 100%; padding:0px">
|
||||
|
||||
|
||||
<ng-content></ng-content>
|
||||
|
||||
</div><!-- /.container -->
|
||||
</div>
|
||||
</md-sidenav-container>
|
@ -1,3 +1,7 @@
|
||||
<a md-raised-button class="md-raised " [routerLink]="['Gallery',{directory: getDirectoryPath()}]" aria-label="More">
|
||||
<!--<a md-raised-button class="md-raised " [routerLink]="['Gallery',{directory: getDirectoryPath()}]" aria-label="More">
|
||||
<i md-icon>folder</i> {{directory.name}}
|
||||
</a>-->
|
||||
<a class="button " [routerLink]="['Gallery',{directory: getDirectoryPath()}]" >
|
||||
{{directory.name}}
|
||||
</a>
|
||||
|
||||
|
@ -1,3 +0,0 @@
|
||||
#content{
|
||||
overflow-y: scroll;
|
||||
}
|
@ -1,9 +1,8 @@
|
||||
<gallery-lightbox #lightbox></gallery-lightbox>
|
||||
<app-frame>
|
||||
<md-content flex id="content">
|
||||
<div *ngIf="currentDirectory" *ngFor="let directory of currentDirectory.directories">
|
||||
<gallery-directory *ngIf="directory" [directory]="directory"></gallery-directory>
|
||||
</div>
|
||||
<gallery-grid [directory]="currentDirectory"></gallery-grid>
|
||||
<gallery-grid [directory]="currentDirectory" [lightbox]="lightbox" ></gallery-grid>
|
||||
|
||||
</md-content>
|
||||
</app-frame>
|
@ -1,7 +1,7 @@
|
||||
///<reference path="../../browser.d.ts"/>
|
||||
|
||||
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;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
@ -1,7 +1,7 @@
|
||||
///<reference path="../../browser.d.ts"/>
|
||||
|
||||
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";
|
||||
|
@ -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;
|
||||
}
|
@ -1,14 +1,8 @@
|
||||
<div class="lightboxCss"
|
||||
#lightbox
|
||||
(click)="hideLightBox()" >
|
||||
<img [src]="lightboxModel.image.src" width="100%" height="100%"/>
|
||||
</div>
|
||||
|
||||
<div #gridContainer *ngIf="directory" (window:resize)="onResize()" >
|
||||
<gallery-photo
|
||||
*ngFor="let gridPhoto of photosToRender"
|
||||
*ngIf="gridPhoto"
|
||||
(click)="showLightBox(gridPhoto)"
|
||||
(click)="lightbox.show(gridPhoto.photo)"
|
||||
[photo]="gridPhoto.photo"
|
||||
[directory]="directory"
|
||||
[style.width.px]="gridPhoto.renderWidth"
|
||||
|
@ -1,7 +1,7 @@
|
||||
///<reference path="../../../browser.d.ts"/>
|
||||
|
||||
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<GalleryPhotoComponent>;
|
||||
@ViewChildren(GalleryPhotoComponent) gridPhotoQL:QueryList<GalleryPhotoComponent>;
|
||||
|
||||
@Input() directory:Directory;
|
||||
@Input() lightbox:GalleryLightboxComponent;
|
||||
|
||||
photosToRender:Array<GridPhoto> = [];
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
10
frontend/app/gallery/lightbox/lightbox.gallery.component.css
Normal file
10
frontend/app/gallery/lightbox/lightbox.gallery.component.css
Normal file
@ -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;
|
||||
}
|
@ -0,0 +1,5 @@
|
||||
<div class="lightboxCss"
|
||||
#lightbox
|
||||
(click)="hide()" >
|
||||
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" width="100%" height="100%"/>
|
||||
</div>
|
87
frontend/app/gallery/lightbox/lightbox.gallery.component.ts
Normal file
87
frontend/app/gallery/lightbox/lightbox.gallery.component.ts
Normal file
@ -0,0 +1,87 @@
|
||||
///<reference path="../../../browser.d.ts"/>
|
||||
|
||||
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<GalleryPhotoComponent>;
|
||||
|
||||
|
||||
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');
|
||||
}
|
||||
|
||||
}
|
||||
|
5
frontend/app/gallery/photo/photo.gallery.component.css
Normal file
5
frontend/app/gallery/photo/photo.gallery.component.css
Normal file
@ -0,0 +1,5 @@
|
||||
img {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
vertical-align: inherit;
|
||||
}
|
@ -1 +1 @@
|
||||
<img [src]="getPhotoPath()" style="width: inherit; height: inherit">
|
||||
<img #image [src]="getPhotoPath()">
|
@ -1,19 +1,22 @@
|
||||
///<reference path="../../../browser.d.ts"/>
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
@ -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";
|
||||
|
22
frontend/app/model/IRenderable.ts
Normal file
22
frontend/app/model/IRenderable.ts
Normal file
@ -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"}
|
||||
}
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
///<reference path="../../browser.d.ts"/>
|
||||
///<reference path="../../../browser.d.ts"/>
|
||||
|
||||
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){
|
@ -1,11 +1,11 @@
|
||||
///<reference path="../../browser.d.ts"/>
|
||||
///<reference path="../../../browser.d.ts"/>
|
||||
|
||||
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{
|
@ -1,9 +1,9 @@
|
||||
///<reference path="../../browser.d.ts"/>
|
||||
///<reference path="../../../browser.d.ts"/>
|
||||
|
||||
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{
|
||||
|
@ -1,11 +1,11 @@
|
||||
///<reference path="../../browser.d.ts"/>
|
||||
///<reference path="../../../browser.d.ts"/>
|
||||
|
||||
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{
|
@ -6,12 +6,24 @@
|
||||
<title>PiGallery2</title>
|
||||
<link rel="shortcut icon" href="icon.png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
|
||||
|
||||
|
||||
<body>
|
||||
<pi-gallery2-app>Loading...</pi-gallery2-app>
|
||||
</body>
|
||||
<script>
|
||||
var ServerInject = {user: <%- JSON.stringify(user)%>}
|
||||
</script>
|
||||
<script src="https://code.angularjs.org/2.0.0-beta.15/angular2-polyfills.js"></script>
|
||||
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-2.2.3.min.js"
|
||||
integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
|
||||
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
|
||||
<script src="dist/app-bundle.js"></script>
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user