Skip to content

Commit

Permalink
feat(): experimental new logic to scroll carousel's previews + add ne…
Browse files Browse the repository at this point in the history 
…w modal example with 5 previews
  • Loading branch information
@Ks89
Ks89 committed Aug 16, 2018
1 parent a65bdab commit efe0f00
Show file tree
Hide file tree
Showing 5 changed files with 123 additions and 43 deletions.
83 changes: 64 additions & 19 deletions ...odal-gallery/src/lib/components/carousel/carousel-previews/carousel-previews.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,7 @@ export class CarouselPreviewsComponent extends AccessibleComponent implements On
* In particular, it's called when any data-bound property of a directive changes!!!
*/
ngOnChanges(changes: SimpleChanges) {
console.log('ngOnChanges');
const simpleChange: SimpleChange = changes.currentImage;
if (!simpleChange) {
return;
Expand All @@ -166,6 +167,7 @@ export class CarouselPreviewsComponent extends AccessibleComponent implements On
// I'm in this if statement, if input images are changed (for instance, because I removed one of them with the 'delete button',
// or because users changed the images array while modal gallery is still open).
// In this case, I have to re-init previews, because the input array of images is changed.
console.log('changes - re init images');
this.initPreviews(current, changes.images.currentValue);
}

Expand All @@ -182,26 +184,69 @@ export class CarouselPreviewsComponent extends AccessibleComponent implements On
console.error('Cannot get previous and current image indexes in previews');
throw err;
}
if (prevIndex === this.images.length - 1 && currentIndex === 0) {
// first image
this.setBeginningIndexesPreviews();
this.previews = this.images.filter((img: InternalLibImage, i: number) => i >= this.start && i < this.end);
return;
}
// the same for the opposite case, when you navigate back from the fist image to go to the last one.
if (prevIndex === 0 && currentIndex === this.images.length - 1) {
// last image
this.setEndIndexesPreviews();
this.previews = this.images.filter((img: InternalLibImage, i: number) => i >= this.start && i < this.end);
return;
}

// otherwise manage standard scenarios
if (prevIndex > currentIndex) {
this.previous();
} else if (prevIndex < currentIndex) {
this.next();
console.log('changes - n', this.configPreview.number);

console.log('changes - prevIndex', prevIndex);
console.log('changes - currentIndex', currentIndex);

console.log('changes - this.start', this.start);
console.log('changes - this.end', this.end);

const calc = Math.floor((this.end - this.start) / 2) + this.start;

console.log('changes - 1 => ', this.end - this.start);
console.log('changes - 2 => ', calc);

console.log('changes - check => ' + calc + ' > ' + currentIndex);

if (this.configPreview.number % 2 === 0) {
if (calc > currentIndex) {
console.log('I should call previous');
this.previous();
} else {
console.log('I should call next');
this.next();
}
} else {
if (calc > currentIndex) {
console.log('I should call previous');
this.previous();
}
if (calc < currentIndex) {
console.log('I should call next');
this.next();
}
if (calc === currentIndex) {
console.log(`I shouldn't call anything`);
}
}

// if (prevIndex === this.images.length - 1 && currentIndex === 0) {
// console.log('changes - first');
// // first image
// this.setBeginningIndexesPreviews();
// this.previews = this.images.filter((img: InternalLibImage, i: number) => i >= this.start && i < this.end);
// return;
// }
// // the same for the opposite case, when you navigate back from the fist image to go to the last one.
// if (prevIndex === 0 && currentIndex === this.images.length - 1) {
// console.log('changes - last');
// // last image
// this.setEndIndexesPreviews();
// this.previews = this.images.filter((img: InternalLibImage, i: number) => i >= this.start && i < this.end);
// return;
// }
//
//
// // otherwise manage standard scenarios
// if (prevIndex > currentIndex) {
// console.log('changes - prevIndex > currentIndex');
// this.previous();
// } else if (prevIndex < currentIndex) {
// console.log('changes - prevIndex < currentIndex');
// this.next();
// }
}
}

Expand Down Expand Up @@ -345,6 +390,6 @@ export class CarouselPreviewsComponent extends AccessibleComponent implements On
* @returns boolean if true block sliding, otherwise not
*/
private isPreventSliding(boundaryIndex: number): boolean {
return !!this.slideConfig && this.slideConfig.infinite === false && getIndex(this.currentImage, this.previews) === boundaryIndex;
return !!this.slideConfig && this.slideConfig.infinite === false && getIndex(this.currentImage, this.images) === boundaryIndex;
}
}
1 change: 0 additions & 1 deletion 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 @@ -599,7 +599,6 @@ export class CarouselComponent extends AccessibleComponent implements OnInit, Af
console.error('Cannot get the current image index in current-image');
throw err;
}
console.log('next index', index);

if (!this.slideConfig || this.slideConfig.infinite === true) {
// enable infinite sliding
Expand Down
25 changes: 24 additions & 1 deletion src/app/carousel/carousel.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,29 @@ <h3>X1 - carousel example with limited width</h3>
</section>
<br>
<section>
<h3>X2 - carousel example with full (100%) width<sup>*</sup></h3>
<h3>X2 - carousel example with full (100%) width but not previews<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>
<ks-carousel [images]="imagesRect"
[isShowArrows]="showArrows"
[pauseOnHover]="true"
[keyboardNavigation]="true"
[dotsConfig]="{visible: true}"
[slideConfig]="{infinite: false}"
[previewConfig]="{visible: false}"
[autoPlay]="autoPlay"
[maxWidth]="'100%'"
[maxHeight]="'400px'"
[objectFit]="'cover'"
[interval]="3000">
<div class="transcluded">This is my transcluded content!</div>
</ks-carousel>
</section>
<br>
<section>
<h3>X3 - 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>
Expand All @@ -44,3 +66,4 @@ <h3>X2 - carousel example with full (100%) width<sup>*</sup></h3>
<div class="transcluded">This is my transcluded content!</div>
</ks-carousel>
</section>
<br>
52 changes: 30 additions & 22 deletions src/app/modal-gallery/modal-gallery.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,16 +277,24 @@ <h3>C8 - (id=46) - Advanced demo - preview custom configuration with 1 image (cl
<ks-modal-gallery [id]="46" [modalImages]="images"
[previewConfig]="previewConfigOneImage"></ks-modal-gallery>
</section>

<section>
<h3>C9 - (id=47) - Advanced demo - preview custom configuration without arrows (clickable)</h3>
<h3>C9 - (id=47) - Advanced demo - preview custom configuration with 5 images (clickable)</h3>
<br>
<ks-modal-gallery [id]="47" [modalImages]="images"
[previewConfig]="previewConfigNoArrows"></ks-modal-gallery>
<ks-modal-gallery [id]="47" [modalImages]="imagesRect"
[previewConfig]="previewConfigFiveImages"></ks-modal-gallery>
</section>

<section>
<h3>C10 - (id=48) - Advanced demo - preview custom configuration not clickable</h3>
<h3>C10 - (id=48) - Advanced demo - preview custom configuration without arrows (clickable)</h3>
<br>
<ks-modal-gallery [id]="48" [modalImages]="images"
[previewConfig]="previewConfigNoArrows"></ks-modal-gallery>
</section>
<section>
<h3>C11 - (id=49) - Advanced demo - preview custom configuration not clickable</h3>
<br>
<ks-modal-gallery [id]="49" [modalImages]="images"
[previewConfig]="previewConfigNoClickable"></ks-modal-gallery>
</section>
<!--<section>-->
Expand All @@ -297,62 +305,62 @@ <h3>C10 - (id=48) - Advanced demo - preview custom configuration not clickable</
<!--[previewConfig]="previewConfigAlwaysCenter"></ks-modal-gallery>-->
<!--</section>-->
<section>
<h3>C11 - (id=49) - Advanced demo - preview custom configuration with custom size</h3>
<h3>C12 - (id=50) - Advanced demo - preview custom configuration with custom size</h3>
<br>
<ks-modal-gallery [id]="49" [modalImages]="images"
<ks-modal-gallery [id]="50" [modalImages]="images"
[previewConfig]="previewConfigCustomSize"></ks-modal-gallery>
</section>

<section>
<h3>C12 - (id=50) - Advanced demo - accessibility config</h3>
<h3>C13 - (id=51) - Advanced demo - accessibility config</h3>
<br>
<ks-modal-gallery [id]="50" [modalImages]="images"
<ks-modal-gallery [id]="51" [modalImages]="images"
[accessibilityConfig]="accessibilityConfig"></ks-modal-gallery>
</section>

<section>
<h3>C13 - (id=51) - Advanced demo - disable clicks on current image in modal-image</h3>
<h3>C14 - (id=52) - Advanced demo - disable clicks on current image in modal-image</h3>
<br>
<ks-modal-gallery [id]="51" [modalImages]="images" [currentImageConfig]="{navigateOnClick: false}"></ks-modal-gallery>
<ks-modal-gallery [id]="52" [modalImages]="images" [currentImageConfig]="{navigateOnClick: false}"></ks-modal-gallery>
</section>

<section>
<h3>C14 - (id=52) - Advanced demo - after 3 seconds it closes modal gallery automatically with galleryService's close method</h3>
<h3>C15 - (id=53) - Advanced demo - after 3 seconds it closes modal gallery automatically with galleryService's close method</h3>
<p>Attention: please check the console to understand what it's happening!</p>
<br>
<ks-modal-gallery [id]="52" [modalImages]="images" (show)="onShowAutoCloseExample($event, 52)"></ks-modal-gallery>
<ks-modal-gallery [id]="53" [modalImages]="images" (show)="onShowAutoCloseExample($event, 52)"></ks-modal-gallery>
</section>

<section>
<h3>C15 - (id=53) - Advanced demo - after 3 seconds navigate to image 0 and go next every other second</h3>
<h3>C16 - (id=54) - Advanced demo - after 3 seconds navigate to image 0 and go next every other second</h3>
<p>Attention: please check the console to understand what it's happening!</p>
<br>
<ks-modal-gallery [id]="53" [modalImages]="images" (show)="onShowAutoNavigateExample($event, 53)"></ks-modal-gallery>
<ks-modal-gallery [id]="54" [modalImages]="images" (show)="onShowAutoNavigateExample($event, 53)"></ks-modal-gallery>
</section>

<section>
<h3>D1 - (id=54) - Other demo - base64 images</h3>
<h3>D1 - (id=55) - Other demo - base64 images</h3>
<br>
<ks-modal-gallery [id]="54" [modalImages]="imagesBase64"></ks-modal-gallery>
<ks-modal-gallery [id]="55" [modalImages]="imagesBase64"></ks-modal-gallery>
</section>

<section>
<h3>D2 - (id=55) - Other demo - custom file name, used when downloaded</h3>
<h3>D2 - (id=56) - Other demo - custom file name, used when downloaded</h3>
<br>
<ks-modal-gallery [id]="55" [modalImages]="imagesCustomDownloadFileName"
<ks-modal-gallery [id]="56" [modalImages]="imagesCustomDownloadFileName"
[currentImageConfig]="{downloadable: true}"
[buttonsConfig]="buttonsConfigSimple"></ks-modal-gallery>
</section>

<section>
<h3>D3 - (id=56) - Other demo - invert touchscreen swipe direction</h3>
<h3>D3 - (id=57) - Other demo - invert touchscreen swipe direction</h3>
<br>
<ks-modal-gallery [id]="56" [modalImages]="images"
<ks-modal-gallery [id]="57" [modalImages]="images"
[currentImageConfig]="{invertSwipe: true}"></ks-modal-gallery>
</section>

<section>
<h3>D4 - (id=57) - Other demo - load images already rotated</h3>
<h3>D4 - (id=58) - Other demo - load images already rotated</h3>
<br>
<ks-modal-gallery [id]="57" [modalImages]="imagesRotated"></ks-modal-gallery>
<ks-modal-gallery [id]="58" [modalImages]="imagesRotated"></ks-modal-gallery>
</section>
5 changes: 5 additions & 0 deletions src/app/modal-gallery/modal-gallery.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -467,6 +467,11 @@ export class ModalGalleryComponent {
number: 1
};

previewConfigFiveImages: PreviewConfig = {
visible: true,
number: 5
};

previewConfigNoArrows: PreviewConfig = {
visible: true,
arrows: false
Expand Down

0 comments on commit efe0f00

Please sign in to comment.