Skip to content

Commit

Permalink
feat(): add new object-fit property and other inputs + new example wi…
Browse files Browse the repository at this point in the history 
…th object-fit cover and some fixes #144
  • Loading branch information
@Ks89
Ks89 committed Aug 15, 2018
1 parent 84e5b8c commit 391f6a9
Show file tree
Hide file tree
Showing 4 changed files with 16 additions and 293 deletions.
5 changes: 5 additions & 0 deletions projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,10 @@ export class CarouselComponent extends AccessibleComponent implements OnInit, Af

@Input()
maxWidth = '100%';
@Input()
maxHeight: string;
@Input()
objectFit: string;

/**
* Interface to configure current image in modal-gallery.
Expand Down Expand Up @@ -457,6 +461,7 @@ export class CarouselComponent extends AccessibleComponent implements OnInit, Af
onClickPreview(preview: Image) {
const imageFound: InternalLibImage | undefined = this.images.find((img: InternalLibImage) => img.id === preview.id);
if (!!imageFound) {
this.manageSlideConfig();
this.currentImage = <InternalLibImage>imageFound;
}
}
Expand Down
4 changes: 3 additions & 1 deletion projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,10 @@
<ng-content></ng-content>

<img id="current-image"
[style.object-fit]="objectFit ? objectFit : null"
[src]="currentImage.modal.img"
[style.max-width]="maxWidth"
[style.height]="maxHeight ? maxHeight : null"
(swipeleft)="swipe($event.type)"
(swiperight)="swipe($event.type)"/>

Expand All @@ -36,6 +38,6 @@

<ks-carousel-previews [images]="images"
[currentImage]="currentImage"
[previewConfig]="{visible: true, number: 5, arrows: true, clickable:true, size: {width: 'auto', height: '100px'}}"
[previewConfig]="{visible: true, number: 4, arrows: true, clickable:true, size: {width: 'calc(100% / 4 - 4px)', height: 'auto'}}"
[slideConfig]="{infinite: false}"
(clickPreview)="onClickPreview($event)"></ks-carousel-previews>
9 changes: 6 additions & 3 deletions src/app/carousel/carousel.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,10 @@ <h3>X1 - carousel example with limited width</h3>
<div class="transcluded">This is my transcluded content!</div>
</ks-carousel>
</section>

<br>
<section>
<h3>X2 - carousel example with full (100%) width</h3>
<h3>X2 - carousel example with full (100%) width<sup>*</sup></h3>
<p><span class="red-text"><sup>*</sup>ATTENTION: this example doesn't work on IE 11</span>, because it doesn't support css property 'object-fit' (for more info <a href="https://caniuse.com/#search=object-fit">check here</a>)</p>
<p>Autoplay: <button class="btn btn-primary" (click)="onChangeAutoPlay()">{{autoPlay ? 'disable autoplay' : 'enable autoplay'}}</button></p>
<p>Show Arrows: <button class="btn btn-primary" (click)="onChangeShowArrows()">{{showArrows ? 'Hide Arrows' : 'Show Arrows'}}</button></p>
<br>
Expand All @@ -35,7 +36,9 @@ <h3>X2 - carousel example with full (100%) width</h3>
[dotsConfig]="{visible: true}"
[slideConfig]="{infinite: false}"
[autoPlay]="autoPlay"
[maxWidth]="'766px'"
[maxWidth]="'100%'"
[maxHeight]="'300px'"
[objectFit]="'cover'"
[interval]="3000">
<div class="transcluded">This is my transcluded content!</div>
</ks-carousel>
Expand Down
291 changes: 2 additions & 289 deletions src/app/plain-gallery/plain-gallery.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,33 +23,17 @@
*/

import { Component } from '@angular/core';
import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
import { DomSanitizer } from '@angular/platform-browser';

import {
AccessibilityConfig,
Action,
AdvancedLayout,
ButtonEvent,
ButtonsConfig,
ButtonsStrategy,
ButtonType,
Description,
DescriptionStrategy,
DotsConfig,
GalleryService,
GridLayout,
Image,
ImageModalEvent,
KS_DEFAULT_BTN_CLOSE,
KS_DEFAULT_BTN_DELETE,
KS_DEFAULT_BTN_DOWNLOAD,
KS_DEFAULT_BTN_EXTURL,
KS_DEFAULT_BTN_FULL_SCREEN,
KS_DEFAULT_BTN_ROTATE,
LineLayout,
PlainGalleryConfig,
PlainGalleryStrategy,
PreviewConfig
PlainGalleryStrategy
} from '@ks89/angular-modal-gallery';

@Component({
Expand Down Expand Up @@ -174,176 +158,6 @@ export class PlainGalleryComponent {
new Image(6, { img: '../assets/images/gallery/pexels-photo-96947.jpeg' }, { img: '../assets/images/gallery/thumbs/t-pexels-photo-96947.jpg' })
];

customDescription: Description = {
strategy: DescriptionStrategy.ALWAYS_VISIBLE,
imageText: 'Look this image ',
numberSeparator: ' of ',
beforeTextDescription: ' => '
};

customDescriptionStyle: Description = {
strategy: DescriptionStrategy.ALWAYS_VISIBLE,
imageText: 'Look this image ',
numberSeparator: ' of ',
beforeTextDescription: ' => ',
style: {
bgColor: 'rgba(255,0,0,.5)',
textColor: 'blue',
marginTop: '3px',
marginBottom: '0px',
marginLeft: '5px',
marginRight: '5px',
position: 'absolute',
top: '0px',
height: '25px'
// be careful to use width, in particular with % values
}
};

customDescriptionHideIfEmpty: Description = {
strategy: DescriptionStrategy.HIDE_IF_EMPTY,
imageText: 'Look this image ',
numberSeparator: ' of ',
beforeTextDescription: ' => '
};

customFullDescription: Description = {
strategy: DescriptionStrategy.ALWAYS_VISIBLE,
// you should build this value programmaticaly with the result of (show)="..()" event
customFullDescription: 'Custom description of the current visible image'
// if customFullDescription !== undefined, all other fields will be ignored
// imageText: '',
// numberSeparator: '',
// beforeTextDescription: '',
};

customFullDescriptionHidden: Description = {
strategy: DescriptionStrategy.ALWAYS_HIDDEN,
// you should build this value programmaticaly with the result of (show)="..()" event
customFullDescription: 'Custom description of the current visible image'
// if customFullDescription !== undefined, all other fields will be ignored
// imageText: '',
// numberSeparator: '',
// beforeTextDescription: '',
};

// customButtonsSize: ButtonSize = {
// width: 10,
// height: 10,
// unit: 'px'
// };

buttonsConfigDefault: ButtonsConfig = {
visible: true,
strategy: ButtonsStrategy.DEFAULT
};
buttonsConfigSimple: ButtonsConfig = {
visible: true,
strategy: ButtonsStrategy.SIMPLE
};
buttonsConfigAdvanced: ButtonsConfig = {
visible: true,
strategy: ButtonsStrategy.ADVANCED
};
buttonsConfigFull: ButtonsConfig = {
visible: true,
strategy: ButtonsStrategy.FULL
};
buttonsConfigCustom: ButtonsConfig = {
visible: true,
strategy: ButtonsStrategy.CUSTOM,
buttons: [
KS_DEFAULT_BTN_ROTATE,
KS_DEFAULT_BTN_FULL_SCREEN,
KS_DEFAULT_BTN_DELETE,
KS_DEFAULT_BTN_EXTURL,
KS_DEFAULT_BTN_DOWNLOAD,
KS_DEFAULT_BTN_CLOSE
]
};

// default buttons but extUrl will open the link in a new tab instead of the current one
// this requires to specify all buttons manually (also if they are not really custom)
customButtonsConfigExtUrlNewTab: ButtonsConfig = {
visible: true,
strategy: ButtonsStrategy.CUSTOM,
buttons: [
{
className: 'ext-url-image',
type: ButtonType.EXTURL,
extUrlInNewTab: true // <--- this is the important thing to understand this example
},
{
className: 'download-image',
type: ButtonType.DOWNLOAD
},
{
className: 'close-image',
type: ButtonType.CLOSE
}
]
};

customButtonsFontAwesomeConfig: ButtonsConfig = {
visible: true,
strategy: ButtonsStrategy.CUSTOM,
buttons: [
{
className: 'fas fa-plus white',
type: ButtonType.CUSTOM,
ariaLabel: 'custom plus aria label',
title: 'custom plus title',
fontSize: '20px'
},
{
className: 'fas fa-times white',
type: ButtonType.CLOSE,
ariaLabel: 'custom close aria label',
title: 'custom close title',
fontSize: '20px'
},
{
className: 'fas fa-download white',
type: ButtonType.DOWNLOAD,
ariaLabel: 'custom download aria label',
title: 'custom download title',
fontSize: '20px'
},
{
className: 'fas fa-external-link-alt white',
type: ButtonType.EXTURL,
ariaLabel: 'custom exturl aria label',
title: 'custom exturl title',
fontSize: '20px'
}
]
};

previewConfigOneImage: PreviewConfig = {
visible: true,
number: 1
};

previewConfigNoArrows: PreviewConfig = {
visible: true,
arrows: false
};

previewConfigNoClickable: PreviewConfig = {
visible: true,
clickable: false
};

// TODO still not implemented
previewConfigAlwaysCenter: PreviewConfig = {
visible: true
};

previewConfigCustomSize: PreviewConfig = {
visible: true,
size: { width: '30px', height: '30px' }
};

accessibilityConfig: AccessibilityConfig = {
backgroundAriaLabel: 'CUSTOM Modal gallery full screen background',
backgroundTitle: 'CUSTOM background title',
Expand Down Expand Up @@ -396,107 +210,6 @@ export class PlainGalleryComponent {
this.customPlainGalleryRowDescConfig = Object.assign({}, this.customPlainGalleryRowDescConfig, { layout: new AdvancedLayout(index, true) });
}

onButtonBeforeHook(event: ButtonEvent) {
console.log('onButtonBeforeHook ', event);

if (!event || !event.button) {
return;
}

// Invoked after a click on a button, but before that the related
// action is applied.
// For instance: this method will be invoked after a click
// of 'close' button, but before that the modal gallery
// will be really closed.

if (event.button.type === ButtonType.DELETE) {
// remove the current image and reassign all other to the array of images

console.log('delete in app with images count ' + this.images.length);

this.images = this.images.filter((val: Image) => event.image && val.id !== event.image.id);
}
}

onButtonAfterHook(event: ButtonEvent) {
console.log('onButtonAfterHook ', event);

if (!event || !event.button) {
return;
}

// Invoked after both a click on a button and its related action.
// For instance: this method will be invoked after a click
// of 'close' button, but before that the modal gallery
// will be really closed.
}

onCustomButtonBeforeHook(event: ButtonEvent, galleryId: number | undefined) {
console.log('onCustomButtonBeforeHook with galleryId=' + galleryId + ' and event: ', event);
if (!event || !event.button) {
return;
}
// Invoked after a click on a button, but before that the related
// action is applied.

if (event.button.type === ButtonType.CUSTOM) {
console.log('adding a new random image at the end');
this.addRandomImage();

setTimeout(() => {
this.galleryService.openGallery(galleryId, this.images.length - 1);
}, 0);
}
}

onCustomButtonAfterHook(event: ButtonEvent, galleryId: number | undefined) {
console.log('onCustomButtonAfterHook with galleryId=' + galleryId + ' and event: ', event);
if (!event || !event.button) {
return;
}
// Invoked after both a click on a button and its related action.
}

onImageLoaded(event: ImageModalEvent) {
// angular-modal-gallery will emit this event if it will load successfully input images
console.log('onImageLoaded action: ' + Action[event.action]);
console.log('onImageLoaded result:' + event.result);
}

onVisibleIndex(event: ImageModalEvent) {
console.log('onVisibleIndex action: ' + Action[event.action]);
console.log('onVisibleIndex result:' + event.result);
}

onIsFirstImage(event: ImageModalEvent) {
console.log('onIsFirstImage onfirst action: ' + Action[event.action]);
console.log('onIsFirstImage onfirst result:' + event.result);
}

onIsLastImage(event: ImageModalEvent) {
console.log('onIsLastImage onlast action: ' + Action[event.action]);
console.log('onIsLastImage onlast result:' + event.result);
}

onCloseImageModal(event: ImageModalEvent) {
console.log('onClose action: ' + Action[event.action]);
console.log('onClose result:' + event.result);
// reset custom plain gallery config
this.customPlainGalleryRowConfig = Object.assign({}, this.customPlainGalleryRowConfig, { layout: new AdvancedLayout(-1, true) });
this.customPlainGalleryColumnConfig = Object.assign({}, this.customPlainGalleryColumnConfig, { layout: new AdvancedLayout(-1, true) });
this.customPlainGalleryRowDescConfig = Object.assign({}, this.customPlainGalleryRowDescConfig, { layout: new AdvancedLayout(-1, true) });
}

onShowAutoCloseExample(event: ImageModalEvent, galleryId: number) {
console.log(`onShowAutoCloseExample with id=${galleryId} action: ` + Action[event.action]);
console.log('onShowAutoCloseExample result:' + event.result);
console.log('Starting timeout of 3 second to close modal gallery automatically');
setTimeout(() => {
console.log('setTimeout end - closing gallery with id=' + galleryId);
this.galleryService.closeGallery(galleryId);
}, 3000);
}

addRandomImage() {
const imageToCopy: Image = this.images[Math.floor(Math.random() * this.images.length)];
const newImage: Image = new Image(this.images.length - 1 + 1, imageToCopy.modal, imageToCopy.plain);
Expand Down

0 comments on commit 391f6a9

Please sign in to comment.