JoshDSommer / nativescript-ngx-slides

A NativeScript + Angular module for to add a slides component to your mobile app
Other
45 stars 34 forks source link

slides are not responsive when orientation changes #20

Closed ozexpert closed 7 years ago

ozexpert commented 7 years ago

with slides changing from landscape <-> portrait mode layout seems not responsive.

<slides>
  <slide class="slide-1">
    <Label text="This is Panel 1"></Label>
  </slide>
  <slide class="slide-2">
    <Label text="This is Panel 2"></Label>
  </slide>
  <slide class="slide-3">
    <StackLayout>
      <Label text="This is Panel 3"></Label>
      <Button class="btn btn-primary btn-active" id="button" text="Tap me!" (tap)="done()"
      clearHistory="true"></Button>
    </StackLayout>
  </slide>
</slides>
JoshDSommer commented 7 years ago

I never implemented an orientation change event since I handn't personally had a need yet however to do it it's pretty easy. I believe in the ngOnInit we will want to add a line of code similar to the non angular version of the slides such as https://github.com/TheOriginalJosh/nativescript-slides/blob/master/nativescript-slides.ts#L210

dobjek commented 7 years ago

the same issue for me

dobjek commented 7 years ago

i was able to fix this issue by placing:

                    `// handles application orientation change
            app.on(app.orientationChangedEvent, (args: app.OrientationChangedEventData) => {
        // event and page orientation didn't seem to alwasy be on the same page so 
        // setting it in the time out addresses this.
        setTimeout(() => {

            console.log('orientationChangedEvent');
            this.pageWidth = platform.screen.mainScreen.widthDIPs;
            this.pageHeight = platform.screen.mainScreen.heightDIPs;

            // loop through slides and setup height and widith
            this.slides.forEach((slide: SlideComponent) => {
                AbsoluteLayout.setLeft(slide.layout, this.pageWidth);
                slide.slideWidth = this.pageWidth;
                slide.slideHeight = this.pageHeight;
                slide.layout.eachLayoutChild((view: View) => {
                            if (view instanceof StackLayout) {
                                AbsoluteLayout.setLeft(view, this.pageWidth);
                                view.width = this.pageWidth;
                            }
                        }); 
            });

            if (this.currentSlide) {
                this.positionSlides(this.currentSlide);
                this.applySwipe(this.pageWidth);
            }
        }, 0);`

in the end of the ngOnInit, it kind of works for me, would you be able to review and include in your next release?

JoshDSommer commented 7 years ago

@dobjek Awesome! thank you, I really appreciate it. if you could please make PR for the repo and make sure you include yourself on the contributor's list.

JoshDSommer commented 7 years ago

I just published this in version 0.2.0