![]()
diff --git a/projects/core/src/lib/image-gallery/image-gallery.component.scss b/projects/core/src/lib/gallery/gallery.component.scss
similarity index 83%
rename from projects/core/src/lib/image-gallery/image-gallery.component.scss
rename to projects/core/src/lib/gallery/gallery.component.scss
index da63e5fc..2c493c14 100644
--- a/projects/core/src/lib/image-gallery/image-gallery.component.scss
+++ b/projects/core/src/lib/gallery/gallery.component.scss
@@ -20,6 +20,13 @@
}
+.backdrop {
+ background: rgba(0, 0, 0, 0.97);
+ width: 100vw;
+ height: 100vh;
+ position: absolute;
+}
+
ion-toolbar {
position: absolute;
diff --git a/projects/core/src/lib/image-gallery/image-gallery.component.ts b/projects/core/src/lib/gallery/gallery.component.ts
similarity index 83%
rename from projects/core/src/lib/image-gallery/image-gallery.component.ts
rename to projects/core/src/lib/gallery/gallery.component.ts
index 6ca4765b..e38904db 100644
--- a/projects/core/src/lib/image-gallery/image-gallery.component.ts
+++ b/projects/core/src/lib/gallery/gallery.component.ts
@@ -1,19 +1,19 @@
-import { FivImage } from './../image/image.component';
+import { FivGalleryImage, Position } from './../gallery-image/gallery-image.component';
+import { ImageService } from './../services/image.service';
import { IonSlides, DomController, Platform } from '@ionic/angular';
import { FivOverlay } from './../overlay/overlay.component';
import {
- Component, OnInit, ViewChild, Input, ElementRef, Renderer2,
+ Component, OnInit, ViewChild, ElementRef, Renderer2,
ContentChildren, QueryList, AfterContentInit, forwardRef, HostListener, Inject, ChangeDetectorRef
} from '@angular/core';
-import { style, animate, AnimationBuilder, trigger, transition, keyframes } from '@angular/animations';
-import { Position } from '../image/image.component';
+import { style, animate, AnimationBuilder, trigger, transition } from '@angular/animations';
import { Key } from './keycodes.enum';
import { DOCUMENT } from '@angular/common';
@Component({
- selector: 'fiv-image-gallery',
- templateUrl: './image-gallery.component.html',
- styleUrls: ['./image-gallery.component.scss'],
+ selector: 'fiv-gallery',
+ templateUrl: './gallery.component.html',
+ styleUrls: ['./gallery.component.scss'],
animations: [
trigger('scale', [
transition('void => *', [
@@ -44,17 +44,17 @@ import { DOCUMENT } from '@angular/common';
style({ opacity: 1, transform: 'translateY(-100%)' }),
animate('125ms', style({ opacity: 0, transform: 'translateY(0%)' }))
])
- ]),
+ ])
]
})
-export class FivImageGallery implements OnInit, AfterContentInit {
+export class FivGallery implements OnInit, AfterContentInit {
@ViewChild('overlay') overlay: FivOverlay;
@ViewChild('viewer') viewer: ElementRef;
@ViewChild('slider', { read: ElementRef }) swiper: ElementRef;
@ViewChild('slider') slides: IonSlides;
- @ContentChildren(forwardRef(() => FivImage), { descendants: true }) images: QueryList
;
+ @ContentChildren(forwardRef(() => FivGalleryImage), { descendants: true }) images: QueryList;
// properties for the slides
activeIndex = 0;
@@ -62,10 +62,11 @@ export class FivImageGallery implements OnInit, AfterContentInit {
zoom: true,
initialSlide: 0
};
- initialImage: FivImage;
+ initialImage: FivGalleryImage;
inFullscreen: boolean;
zoomedIn: boolean;
controlsVisible = true;
+ private slidesLoaded;
@HostListener('window:keyup', ['$event'])
keyEvent(event: KeyboardEvent) {
@@ -82,6 +83,7 @@ export class FivImageGallery implements OnInit, AfterContentInit {
private change: ChangeDetectorRef,
private platform: Platform,
@Inject(DOCUMENT) private document: any,
+ private imageService: ImageService
) { }
ngOnInit() {
@@ -124,7 +126,7 @@ export class FivImageGallery implements OnInit, AfterContentInit {
- open(index: number, initial: FivImage) {
+ open(index: number, initial: FivGalleryImage) {
this.options.initialSlide = index;
this.overlay.show(50000);
this.initialImage = initial;
@@ -140,6 +142,10 @@ export class FivImageGallery implements OnInit, AfterContentInit {
const position = this.getImagePosition(this.images.toArray()[this.activeIndex].image, progress);
console.log('close from position', position);
this.initialImage.close(position);
+ if (this.inFullscreen) {
+ this.closeFullscreen();
+ }
+ this.slidesLoaded = false;
this.overlay.hide();
}
@@ -187,7 +193,24 @@ export class FivImageGallery implements OnInit, AfterContentInit {
this.activeIndex = this.swiper.nativeElement.swiper.activeIndex;
}
+ ionSlideNextStart() {
+ if (this.slidesLoaded) {
+ this.updateBackdrop(this.activeIndex + 1);
+ }
+ }
+ ionSlidePrevStart() {
+ if (this.slidesLoaded) {
+ this.updateBackdrop(this.activeIndex - 1);
+ }
+ }
+
+ updateBackdrop(index: number) {
+ this.initialImage.backdropColor = this.imageService.getAverageRGB(this.images.toArray()[index].image.nativeElement);
+ }
+
onSlidesLoad() {
+ this.slidesLoaded = true;
+ this.activeIndex = this.swiper.nativeElement.swiper.activeIndex;
this.initialImage.viewerState = 'hidden';
this.swiper.nativeElement.swiper.on('click', () => {
this.handleSingleTap();
diff --git a/projects/core/src/lib/image-gallery/keycodes.enum.ts b/projects/core/src/lib/gallery/keycodes.enum.ts
similarity index 100%
rename from projects/core/src/lib/image-gallery/keycodes.enum.ts
rename to projects/core/src/lib/gallery/keycodes.enum.ts
diff --git a/projects/core/src/lib/image-viewer/image-viewer.component.html b/projects/core/src/lib/image-viewer/image-viewer.component.html
deleted file mode 100644
index 68b412cd..00000000
--- a/projects/core/src/lib/image-viewer/image-viewer.component.html
+++ /dev/null
@@ -1,29 +0,0 @@
-![]()
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{action.name}}
-
-
-
-
-
-
-
-
-
![]()
\ No newline at end of file
diff --git a/projects/core/src/lib/image-viewer/image-viewer.component.scss b/projects/core/src/lib/image-viewer/image-viewer.component.scss
deleted file mode 100644
index 9aa6ecef..00000000
--- a/projects/core/src/lib/image-viewer/image-viewer.component.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-:host {
- display: block;
- position: relative;
-}
-
-.thumbnail {
- height: auto;
-}
-
-.backdrop {
- position: absolute;
- width: 100vw;
- height: 100vh;
- background: rgba(0, 0, 0, 0.87);
- top: 0;
- left: 0;
- ion-icon {
- color: var(--ion-color-light);
- }
-}
-
-.image-view {
- width: 100%;
- height: auto;
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- left: 0;
-}
-
-.actions {
- z-index: 5000;
- --ion-grid-padding: 0px;
- --ion-grid-column-padding: 0px;
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 56px;
- fiv-ripple {
- height: 56px;
- }
- ion-icon {
- font-size: 1.8em;
- }
-}
\ No newline at end of file
diff --git a/projects/core/src/lib/image-viewer/image-viewer.component.spec.ts b/projects/core/src/lib/image-viewer/image-viewer.component.spec.ts
deleted file mode 100644
index c259994d..00000000
--- a/projects/core/src/lib/image-viewer/image-viewer.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FivImageViewer } from './image-viewer.component';
-
-describe('FivImageViewer', () => {
- let component: FivImageViewer;
- let fixture: ComponentFixture;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ FivImageViewer ]
- })
- .compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(FivImageViewer);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/projects/core/src/lib/image-viewer/image-viewer.component.ts b/projects/core/src/lib/image-viewer/image-viewer.component.ts
deleted file mode 100644
index 65bbea8b..00000000
--- a/projects/core/src/lib/image-viewer/image-viewer.component.ts
+++ /dev/null
@@ -1,562 +0,0 @@
-import { SafeUrl, SafeStyle, DomSanitizer } from '@angular/platform-browser';
-import {
- Component,
- OnInit,
- Input,
- ViewEncapsulation,
- Injector,
- ComponentFactoryResolver,
- EmbeddedViewRef,
- ApplicationRef,
- ComponentRef,
- ViewChild,
- ElementRef,
- Renderer2,
- ChangeDetectorRef,
- Output,
- EventEmitter,
- HostBinding
-} from '@angular/core';
-import { trigger, transition, style, animate, AnimationBuilder } from '@angular/animations';
-import { Subscription, merge, fromEvent } from 'rxjs';
-import * as Hammer from 'hammerjs';
-import { DomController, Platform } from '@ionic/angular';
-import { flatMap, tap, filter, debounceTime, takeUntil, take, repeat } from 'rxjs/operators';
-
-@Component({
- selector: 'fiv-image-viewer',
- templateUrl: './image-viewer.component.html',
- styleUrls: ['./image-viewer.component.scss'],
- encapsulation: ViewEncapsulation.None,
- animations: [
- trigger('backdrop', [
- transition(':enter', [
- style({ opacity: 0 }),
- // tslint:disable-next-line:max-line-length
- animate('75ms 125ms linear', style({ opacity: 1 }))
- ]),
- transition(':leave', [
- style({ opacity: 1 }),
- // tslint:disable-next-line:max-line-length
- animate('100ms linear', style({ opacity: 0 }))
- ])
- ]),
- trigger('fade', [
- transition(':enter', [
- style({ opacity: 0 }),
- animate('125ms linear', style({ opacity: 1 }))
- ]),
- transition(':leave', [
- style({ opacity: 1 }),
- animate('150ms linear', style({ opacity: 0 }))
- ])
- ]),
- trigger('imageEnter', [
- transition(':enter', [
- // tslint:disable-next-line:max-line-length
- style({ position: 'absolute', top: '{{top}}px', left: '{{left}}px', transform: 'translate(0,0)', height: '{{height}}px', width: '{{width}}px' }),
- // tslint:disable-next-line:max-line-length
- animate('120ms linear', style({ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', height: 'auto', width: '100%' }))
- ], { params: { top: '0px', left: '0px', height: '*', width: '*' } })
- ]),
- trigger('imageLeave', [
- transition(':leave', [
- style({ position: 'absolute', top: '{{panTop}}', left: '50%', transform: 'translate(-50%,-50%)', height: 'auto', width: '100%' }),
- // tslint:disable-next-line:max-line-length
- animate('135ms linear', style({ position: 'absolute', top: '{{top}}px', left: '{{left}}px', transform: 'translate(0,0)', height: '{{height}}px', width: '{{width}}px' })
- )
- ], { params: { top: '0px', left: '0px', height: '*', width: '*', panTop: '50%' } })
- ])
- ]
-})
-export class FivImageViewer implements OnInit {
- @HostBinding('style')
- get myStyle(): SafeStyle {
- if (this._isOpen) {
- return this.sanitizer.bypassSecurityTrustStyle(`height: 100%; width: 100%; display: block;`);
- } else {
- return this.sanitizer.bypassSecurityTrustStyle(`height: ${this.height}px; width: ${this.width}px; display: block;`);
- }
- }
-
- @ViewChild('thumbnail') thumbnail: ElementRef;
- @ViewChild('imageView') imageView: ElementRef;
- @ViewChild('footer') footer: ElementRef;
- @Input() src: SafeUrl;
- @Input() height;
- @Input() width;
- @Input() pullDistance = 150;
- @Input() actions: ImageViewerAction[] = [];
- @Output() fivClose = new EventEmitter();
- @Output() fivOpen = new EventEmitter();
- @Output() fivActionClick = new EventEmitter();
- componentRef: ComponentRef;
- _isOpen = false;
- _controlsVisible = true;
- thumbnailVisible = true;
- opacity = 0.87;
-
- thumbnailPosition: { offsetTop: number, offsetLeft: number, height: number, width: number, panTop?: string };
- scale = 1;
- top: number;
- left: number;
- pinchend: Subscription;
- pinch: Subscription;
- verticalPan: Subscription;
- panRemove: Subscription;
- panReset: Subscription;
- doubletap: Subscription;
- singletap: Subscription;
- closeSub: Subscription;
- pinchPan: Subscription;
- actionSub: Subscription;
-
- singletapHammer;
- doubleTapHammer;
- pinchHammer;
- panHammer;
-
-
- pinchCenter: { x: number, y: number };
-
- constructor(private componentFactoryResolver: ComponentFactoryResolver,
- private appRef: ApplicationRef,
- public element: ElementRef,
- private domCtrl: DomController,
- private platform: Platform,
- private renderer: Renderer2,
- private change: ChangeDetectorRef,
- private animation: AnimationBuilder,
- private sanitizer: DomSanitizer,
- private injector: Injector) {
- }
-
- ngOnInit() {
- }
-
- open(event) {
- this.fivOpen.emit(this);
- this.appendComponentToBody(event);
- }
-
- getPosition(event) {
- const bounds = this.thumbnail.nativeElement.getBoundingClientRect();
- return { offsetTop: bounds.top, offsetLeft: bounds.left, height: event.srcElement.clientHeight, width: event.srcElement.clientWidth };
- }
-
- appendComponentToBody(event) {
- this.componentRef = this.componentFactoryResolver
- .resolveComponentFactory(FivImageViewer)
- .create(this.injector);
-
- this.thumbnailVisible = false;
- this.componentRef.instance._isOpen = true;
- this.componentRef.instance.src = this.src;
- this.componentRef.instance.componentRef = this.componentRef;
- this.componentRef.instance.thumbnailPosition = this.getPosition(event);
- this.width = this.componentRef.instance.thumbnailPosition.width;
- this.height = this.componentRef.instance.thumbnailPosition.height;
- this.componentRef.instance.actions = this.actions;
-
- this.closeSub = this.componentRef.instance.fivClose
- .pipe(take(1))
- .subscribe(() => {
- this.fivClose.emit(this);
- this.closeSub.unsubscribe();
- this.actionSub.unsubscribe();
- this.thumbnailVisible = true;
- });
-
- this.actionSub = this.componentRef.instance.fivActionClick
- .subscribe((ev) => {
- this.fivActionClick.emit(ev);
- });
-
- this.appRef.attachView(this.componentRef.hostView);
-
- const domElem = (this.componentRef.hostView as EmbeddedViewRef)
- .rootNodes[0] as HTMLElement;
-
- document.body.appendChild(domElem);
-
- }
-
- remove() {
- if (!this.thumbnailPosition.panTop) {
- this.thumbnailPosition.panTop = this.top + 'px';
- this.change.detectChanges();
- }
- this._isOpen = false;
- }
- clearSubscriptions(): any {
- this.panRemove.unsubscribe();
- this.panReset.unsubscribe();
- this.verticalPan.unsubscribe();
- this.pinch.unsubscribe();
- this.pinchend.unsubscribe();
- this.singletap.unsubscribe();
- this.doubletap.unsubscribe();
- this.pinchPan.unsubscribe();
- }
-
- removeHammerManager(): any {
- this.singletapHammer.destroy();
- this.doubleTapHammer.destroy();
- this.pinchHammer.destroy();
- this.panHammer.destroy();
- }
-
- detach(event) {
- if (event.toState === 'void') {
- this.appRef.detachView(this.componentRef.hostView);
- this.clearSubscriptions();
- this.removeHammerManager();
- this.fivClose.emit();
- this.componentRef.destroy();
- }
- }
-
- resetPosition() {
- this.top = this.platform.height() / 2;
- this.left = 0;
- this.pinchCenter = { x: this.platform.width() / 2, y: this.platform.height() / 2 };
- }
-
- onEnter(event) {
- if (event.fromState === 'void') {
- // setup variables in fullscreen
- this.resetPosition();
- this.setupClicks();
- this.setupPan();
- this.setupPinch();
- }
- }
- setupClicks(): any {
- this.doubleTapHammer = new Hammer(this.imageView.nativeElement);
- this.doubleTapHammer.get('tap').set({ enable: true, taps: 2 });
-
- this.singletapHammer = new Hammer(this.imageView.nativeElement);
- this.singletapHammer.get('tap').set({ enable: true, taps: 1 });
-
- const doubletap$ = fromEvent(this.doubleTapHammer, 'tap');
- const singletap$ = fromEvent(this.singletapHammer, 'tap')
- .pipe(
- debounceTime(300),
- takeUntil(doubletap$),
- filter((event: any) => event.tapCount === 1),
- repeat()
- );
-
- this.doubletap = doubletap$.subscribe(res => this.handleDoubleTap(res));
- this.singletap = singletap$.subscribe(res => this.handleSingleTap());
- }
-
- setupPinch() {
- this.pinchHammer = new Hammer(this.imageView.nativeElement);
- this.pinchHammer.get('pinch').set({ enable: true });
-
- const pinchend$ = fromEvent(this.pinchHammer, 'pinchend');
- this.pinchend = pinchend$.subscribe((event: any) => {
-
- this.scale = Math.max(0, Math.min(this.scale * event.scale, 8));
- if (this.scale < 1) {
- this.resetScale();
- }
- });
-
- const pinch$ = fromEvent(this.pinchHammer, 'pinch');
- this.pinch = pinch$
- .subscribe((event: any) => {
- this.pinchCenter = event.center;
- this.transform(event.scale);
- this.move(event);
- });
- }
-
- setupPan() {
- // close pans
- const pullDistance = 120;
- this.panHammer = new Hammer(this.imageView.nativeElement);
- this.panHammer.get('pan').set({ enable: true, direction: Hammer.DIRECTION_ALL });
- const panstart = fromEvent(this.panHammer, 'panstart');
-
- const panend = fromEvent(this.panHammer, 'panend');
- const panmove = fromEvent(this.panHammer, 'panmove');
-
- const pandown = fromEvent(this.panHammer, 'pandown');
- const panup = fromEvent(this.panHammer, 'panup');
-
- const down = panstart
- .pipe(
- flatMap(() => pandown.pipe(
- filter(() => this.scale === 1)))
- );
-
- const up = panstart
- .pipe(
- flatMap(() => panup.pipe(
- filter(() => this.scale === 1)))
- );
-
- const verticalPan$ = merge(up, down);
-
- this.verticalPan = verticalPan$.subscribe((res: any) => {
- this.opacity = this.calculatePanProgress(event) / 100 * 0.87;
- console.log('opacity', this.opacity);
- this.setBottom(this.calculateBottom(res));
- this.setTop(this.calculateTop(res));
- });
-
-
- const pinchPanMove = panmove
- .pipe(
- filter(() => this.scale > 1)
- );
-
- const pinchPan$ = panstart
- .pipe(
- tap((event: any) => this.pinchCenter = event.center),
- flatMap(() => pinchPanMove
- ));
-
- this.pinchPan = pinchPan$
- .subscribe((res: any) => {
- this.move(res);
- });
-
-
- this.panRemove = panend
- .pipe(
- filter((event: any) => this.scale === 1 && event.distance > pullDistance && event.maxPointers === 1),
- )
- .subscribe(() => { this.remove(); });
-
- this.panReset = panend
- .pipe(
- // tslint:disable-next-line:max-line-length
- filter((event: any) => this.scale === 1 && event.distance <= pullDistance || this.scale === 1 && event.distance > pullDistance && event.maxPointers > 1)
- )
- .subscribe((event) => {
- this.resetPan();
- this.resetFooter(this.calculateBottom(event));
- this.opacity = 0.87;
- });
- }
-
- move(event: any) {
- if (!this.pinchCenter) {
- this.pinchCenter = event.center;
- }
- const moveV = event.center.y - this.pinchCenter.y;
- const moveH = event.center.x - this.pinchCenter.x;
- this.pinchCenter = event.center;
- const newX = this.restrictRawPosX(this.left + moveH);
- const newY = this.restrictRawPosY(this.top + moveV);
-
- this.setTop(newY);
- this.setLeft(newX);
- }
-
- restrictRawPosX(pos) {
- const viewportDim = this.platform.width();
- const imageWidth = this.getCurrentImageWidth() / this.scale;
- const borderPos = (this.getCurrentImageWidth() - Math.min(viewportDim, imageWidth)) / 2;
- if (pos < borderPos * -1) {
- return borderPos * -1;
- } else if (pos > borderPos) {
- return borderPos;
- }
- return pos;
- }
-
- restrictRawPosY(pos) {
- const viewportDim = this.platform.height();
- const imageHeight = this.getCurrentImageHeight() / this.scale;
- const offset = this.platform.height() / 2;
- let borderPos = pos;
- if (this.getCurrentImageHeight() > this.platform.height()) {
- borderPos = (this.getCurrentImageHeight() - Math.max(viewportDim, imageHeight)) / 2;
- } else {
- borderPos = (this.getCurrentImageHeight() - Math.min(viewportDim, imageHeight)) / 2;
- }
- if (pos < borderPos * -1 + offset) {
- return borderPos * -1 + offset;
- } else if (pos > borderPos + offset) {
- return borderPos + offset;
- }
- return pos;
- }
-
- setBottom(bottom: number) {
- this.domCtrl.write(() => {
- if (this._controlsVisible && this.footer) {
- this.renderer.setStyle(this.footer.nativeElement, 'bottom', `-${bottom}px`);
- }
- });
-
- }
-
- calculatePanProgress(event: any): number {
- const pullDistance = 120;
- return Math.abs(100 * event.distance / pullDistance);
- }
-
- transform(scale) {
- const s = Math.max(0, Math.min(this.scale * scale, 8));
- this.setScale(s, true);
- }
-
- calculateBottom(event) {
- const progress = this.calculatePanProgress(event);
- return event.distance * progress / 100;
- }
-
- setScale(scale, skip?) {
- if (!skip) {
- this.scale = scale;
- }
- this.domCtrl.write(() => {
- if (this.imageView) {
- this.renderer.setStyle(this.imageView.nativeElement, 'transform', `translateY(-50%) scale(${scale})`);
- }
- });
- }
-
- setTop(top) {
- this.top = top;
- this.thumbnailPosition.panTop = this.top + 'px';
- this.domCtrl.write(() => {
- if (this.imageView) {
- this.renderer.setStyle(this.imageView.nativeElement, 'top', `${top}px`);
- }
- });
- }
-
- setLeft(left) {
- this.left = left;
- this.domCtrl.write(() => {
- if (this.imageView) {
- this.renderer.setStyle(this.imageView.nativeElement, 'left', `${left}px`);
- }
- });
- }
-
- calculateTop(event: any) {
- const distance = event.distance;
- const progress = Math.abs(100 * distance / this.pullDistance);
-
- if (progress <= 100) {
- return this.platform.height() / 2 + distance;
- } else if (progress >= 100 && progress < 200) {
- return this.platform.height() / 2 + this.pullDistance + this.pullDistance / 2 * (progress - 100) / 100;
- } else {
- return this.platform.height() / 2 + this.pullDistance + this.pullDistance / 2;
- }
- }
-
- resetPan() {
- const reset = this.animation.build([
- style({ top: `${this.top}px` }),
- animate('150ms linear', style({ top: `${this.platform.height() / 2}px` }))
- ]);
-
- const animation = reset.create(this.imageView.nativeElement);
- animation.play();
- animation.onDone(() => {
- animation.destroy();
- this.setTop(this.platform.height() / 2);
- });
- }
-
- resetFooter(start) {
- if (!this._controlsVisible) {
- this.setBottom(0);
- return;
- }
- const reset = this.animation.build([
- style({ bottom: `-${start}px` }),
- animate('150ms linear', style({ bottom: `0px` }))
- ]);
-
- const animation = reset.create(this.footer.nativeElement);
- animation.play();
- animation.onDone(() => {
- animation.destroy();
- this.setBottom(0);
- });
- }
-
- animateScale(toScale: number, toPosition: { x: number, y: number }) {
- // const deltaX = this.pinchCenter.x - toPosition.x;
- // const deltaY = this.pinchCenter.y - toPosition.y;
- const deltaX = (this.pinchCenter.x - toPosition.x) * toScale;
- const deltaY = (this.pinchCenter.y - toPosition.y) * toScale;
- const newLeft = this.left + deltaX / toScale;
- const newTop = this.top + deltaY / toScale;
- const scale = this.animation.build([
- style({ transform: `translateY(-50%) scale(${this.scale})`, top: `${this.top}px`, left: `${this.left}px` }),
- animate('200ms linear', style({ transform: `translateY(-50%) scale(${toScale})`, top: `${newTop}px`, left: `${newLeft}px` }))
- ]);
- const animation = scale.create(this.imageView.nativeElement);
- animation.play();
- animation.onDone(() => {
- animation.destroy();
- this.setScale(toScale);
- this.setTop(newTop);
- this.setLeft(newLeft);
- this.pinchCenter = toPosition;
- });
- }
-
- resetScale() {
- const t = this.platform.height() / 2;
- const scale = this.animation.build([
- style({ transform: `translateY(-50%) scale(${this.scale})`, top: `${this.top}px`, left: `${this.left}px` }),
- animate('200ms linear', style({ transform: `translateY(-50%) scale(${1})`, top: `${t}px`, left: `${0}px` }))
- ]);
- const animation = scale.create(this.imageView.nativeElement);
- animation.play();
- animation.onDone(() => {
- animation.destroy();
- this.setScale(1);
- this.setTop(t);
- this.setLeft(0);
- this.pinchCenter = this.getAbsoluteCenter();
- });
- }
-
- handleSingleTap() {
- this._controlsVisible = !this._controlsVisible;
- }
-
- handleDoubleTap(event) {
- if (this.scale === 1) {
- this.animateScale(2, event.center);
- } else {
- this.resetScale();
- }
-
- }
-
- getCurrentImageHeight() {
- return this.imageView.nativeElement.clientHeight * this.scale;
- }
- getCurrentImageWidth() {
- return this.imageView.nativeElement.clientWidth * this.scale;
- }
-
- getAbsoluteCenter() {
- return { x: this.platform.width() / 2, y: this.platform.height() / 2 };
- }
-
- onActionClicked(index: number) {
- this.fivActionClick.emit(index);
- }
-}
-
-
-
-export interface ImageViewerAction {
- name?: string;
- icon?: string;
-}
diff --git a/projects/core/src/lib/image/image.component.html b/projects/core/src/lib/image/image.component.html
deleted file mode 100644
index 62850ceb..00000000
--- a/projects/core/src/lib/image/image.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-![]()
-
-
-
-
- ![]()
-
-
\ No newline at end of file
diff --git a/projects/core/src/lib/image/image.component.spec.ts b/projects/core/src/lib/image/image.component.spec.ts
deleted file mode 100644
index b512c9c0..00000000
--- a/projects/core/src/lib/image/image.component.spec.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ImagePage } from './image.page';
-
-describe('ImagePage', () => {
- let component: ImagePage;
- let fixture: ComponentFixture;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ ImagePage ],
- schemas: [CUSTOM_ELEMENTS_SCHEMA],
- })
- .compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(ImagePage);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/projects/core/src/lib/router-item/router-item.component.html b/projects/core/src/lib/router-item/router-item.component.html
index e8d437b4..f478eca4 100644
--- a/projects/core/src/lib/router-item/router-item.component.html
+++ b/projects/core/src/lib/router-item/router-item.component.html
@@ -1,7 +1,7 @@
-
+
{{text}}
diff --git a/projects/core/src/lib/services/image.service.ts b/projects/core/src/lib/services/image.service.ts
new file mode 100644
index 00000000..934a6423
--- /dev/null
+++ b/projects/core/src/lib/services/image.service.ts
@@ -0,0 +1,53 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ImageService {
+
+ constructor() { }
+
+
+ getAverageRGB(imgEl) {
+ const blockSize = 5, // only visit every 5 pixels
+ defaultRGB = { r: 0, g: 0, b: 0 }, // for non-supporting envs
+ canvas = document.createElement('canvas'),
+ context = canvas.getContext && canvas.getContext('2d'),
+ rgb = { r: 0, g: 0, b: 0 };
+
+ let data, width, height, length, i = -4, count = 0;
+
+ if (!context) {
+ return `rgb(${defaultRGB.r},${defaultRGB.g},${defaultRGB.b})`;
+ }
+
+ height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
+ width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;
+
+ context.drawImage(imgEl, 0, 0);
+
+ try {
+ data = context.getImageData(0, 0, width, height);
+ } catch (e) {
+ /* security error, img on diff domain */
+ console.log('return default rgb', e);
+ return `rgb(${defaultRGB.r},${defaultRGB.g},${defaultRGB.b})`;
+ }
+
+ length = data.data.length;
+
+ while ((i += blockSize * 4) < length) {
+ ++count;
+ rgb.r += data.data[i];
+ rgb.g += data.data[i + 1];
+ rgb.b += data.data[i + 2];
+ }
+
+ // ~~ used to floor values
+ rgb.r = Math.floor(rgb.r / count);
+ rgb.g = Math.floor(rgb.g / count);
+ rgb.b = Math.floor(rgb.b / count);
+
+ return `rgb(${rgb.r},${rgb.g},${rgb.b})`;
+ }
+}
diff --git a/projects/core/src/public_api.ts b/projects/core/src/public_api.ts
index f192a105..9c57653e 100644
--- a/projects/core/src/public_api.ts
+++ b/projects/core/src/public_api.ts
@@ -31,12 +31,14 @@ export * from './lib/app-bar-tab/app-bar-tab.component';
export * from './lib/app-bar-tab-content/app-bar-tab-content.component';
export * from './lib/buttons/buttons.component';
export * from './lib/button/button.component';
-export * from './lib/image-viewer/image-viewer.component';
export * from './lib/network-status/network-status.component';
export * from './lib/back-button/back-button.component';
+export * from './lib/gallery/gallery.component';
+export * from './lib/gallery-image/gallery-image.component';
// export services
export * from './lib/loading/loading.service';
+export * from './lib/services/image.service';
export * from './lib/services/overlay.service';
export * from './lib/services/dialog.service';
export * from './lib/services/routing-state.service';
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 7310c22a..4f4f80d9 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -30,7 +30,6 @@ const routes: Routes = [
{ path: 'expandable', loadChildren: './pages/expandable/expandable.module#ExpandablePageModule' },
{ path: 'stepper', loadChildren: './pages/stepper/stepper.module#StepperPageModule' },
{ path: 'directives', loadChildren: './pages/directives/directives.module#DirectivesPageModule' },
- { path: 'test', loadChildren: './test/test.module#TestPageModule' },
{ path: 'editable-label', loadChildren: './pages/editable-label/editable-label.module#EditableLabelPageModule' },
{ path: '**', loadChildren: './pages/page-not-found/page-not-found.module#PageNotFoundPageModule' },
];
diff --git a/src/app/app.component.html b/src/app/app.component.html
index e97d3e36..2ab59e94 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,21 +1,101 @@
-
+
- Fivethree Components
+ Fivethree
-
+
+
+
+
+
+
+
+ Documentation
+
+
+
+
+ Components
+
+
+
+
+
+
+
+
+
+
+
+ Directives
+
+
+
+
+
+
+
+ nothing yet
+
+
+
+
+
+
+ Services
+
+
+
+
+
+
+
+ nothing yet
+
+
+
+
+ More
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+ 
+
+
+
+
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7dc2d7e8..18edd5f7 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -11,93 +11,72 @@ import { FivRoutingStateService } from '@fivethree/core';
templateUrl: 'app.component.html'
})
export class AppComponent {
- public appPages = [
+ public components = [
{
title: 'App Bar',
url: '/app-bar',
icon: 'git-commit',
- shape: 'rounded'
},
{
title: 'Bottom Sheet',
url: '/bottom-sheet',
icon: 'ios-arrow-up',
- shape: 'rounded'
},
{
title: 'Dialog',
url: '/dialog',
- icon: 'notifications'
+ icon: 'notifications',
},
{
title: 'Editable Label',
url: '/editable-label',
icon: 'create',
- shape: 'line'
},
{
title: 'Expandable',
url: '/expandable',
icon: 'resize',
- shape: 'dot'
},
{
title: 'Icon',
url: '/icon',
icon: 'mail-unread',
- shape: 'rounded'
},
{
- title: 'Image View',
+ title: 'Image Gallery',
url: '/image',
icon: 'image',
- shape: 'dot'
},
{
title: 'Loading Indicators',
url: '/loading',
icon: 'time',
- shape: 'line'
},
- // {
- // title: 'Map',
- // url: '/map',
- // icon: 'map'
- // },
{
title: 'Overflow Buttons',
url: '/buttons',
icon: 'more',
- shape: 'rounded'
},
{
title: 'Password Reveal Input',
url: '/password',
icon: 'key',
- shape: 'line'
},
{
title: 'Refresher',
url: '/refresh',
icon: 'refresh',
- shape: 'dot'
},
- // {
- // title: 'Searchbar',
- // url: '/toolbar-search',
- // icon: 'search'
- // },
+
{
title: 'Stepper',
url: '/stepper',
icon: 'share',
- shape: 'rounded'
- },
- {
- title: 'Test',
- url: '/test',
- icon: 'bug'
- },
+ }
+ ];
+ public directives = [
+ ];
+ public services = [
];
constructor(
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index 7cf6178f..2a077b3e 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -8,9 +8,13 @@
{{title}}
-
-
+
+
+
+ fivethree.io
+
+
\ No newline at end of file
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
index 082affb9..dbec8960 100644
--- a/src/app/components/header/header.component.ts
+++ b/src/app/components/header/header.component.ts
@@ -8,7 +8,7 @@ import { Component, OnInit, Input } from '@angular/core';
})
export class HeaderComponent implements OnInit {
- @Input() title = 'Fivethree';
+ @Input() title = 'Ionic 4 Components';
@Input() backbutton = true;
constructor(private navController: NavController) { }
diff --git a/src/app/pages/app-bar/app-bar.page.html b/src/app/pages/app-bar/app-bar.page.html
index 301ec154..88ab09d7 100644
--- a/src/app/pages/app-bar/app-bar.page.html
+++ b/src/app/pages/app-bar/app-bar.page.html
@@ -55,5 +55,4 @@
-
\ No newline at end of file
diff --git a/src/app/pages/bottom-sheet/bottom-sheet.page.html b/src/app/pages/bottom-sheet/bottom-sheet.page.html
index 4d8618b7..1c4bc389 100644
--- a/src/app/pages/bottom-sheet/bottom-sheet.page.html
+++ b/src/app/pages/bottom-sheet/bottom-sheet.page.html
@@ -68,7 +68,6 @@
-
diff --git a/src/app/pages/buttons/buttons.page.html b/src/app/pages/buttons/buttons.page.html
index a4cf6d47..c50cd5a8 100644
--- a/src/app/pages/buttons/buttons.page.html
+++ b/src/app/pages/buttons/buttons.page.html
@@ -60,5 +60,4 @@
-
\ No newline at end of file
diff --git a/src/app/pages/expandable/expandable.page.html b/src/app/pages/expandable/expandable.page.html
index ff38b67d..18afbbae 100644
--- a/src/app/pages/expandable/expandable.page.html
+++ b/src/app/pages/expandable/expandable.page.html
@@ -34,5 +34,4 @@
-
\ No newline at end of file
diff --git a/src/app/pages/getting-started/getting-started.page.html b/src/app/pages/getting-started/getting-started.page.html
index 42f9fdad..7ee30eed 100644
--- a/src/app/pages/getting-started/getting-started.page.html
+++ b/src/app/pages/getting-started/getting-started.page.html
@@ -12,5 +12,4 @@
-