Slidebox Refactor landed in nightly with huge API changes

announcement
24

Thanks @andy

Here are a few more issues I’m seeing around animating the slidebox slides after testing out the latest nightly (565). Note that my app is based off the slide menu starter template so its using a ion-nav-viewelement and that same overall template structure.

  1. I have to set visibility:visible for .slider in css or else the slidebox is hidden initially.

  2. I don’t see the widths being set for the slides and their parent container which I believe is the overall problem for my sliding animation:
    .slider-slides width is no longer set to total width of all slides.
    each slide itself no longer has its set width to match screen width
    while sliding current slide, its translate3d immediately jumps to -100% so slide just disappears rather than giving smooth slide

  3. The slide states seem to be off, what is my actual visible slide says slide-state=previous, inspecting the code the slide-state=selected is the next slide in the DOM and slide-state=next is after that.

25

I’ve started some testing. The first thing I have noticed is that performing a pop() to the slidebox data structure (removing items from the end of the slidebox) DOESNT change the slide count. In the previous code, it did.

My application is attempting to implement an infinite slidebox where I can manage the addition and deletion of slides from the beginning and ending of the slidebox.

26

@jajohga This is definitely a bug … we only ever keep the current, previous, and next slides in the DOM, and have to do some hacky things to make ngRepeat work. I’ll look into it.

27

@ccantrell it sounds like you have some custom CSS which breaks things.

The whole structure of the slides in the DOM is completely different now. Try removing all of your custom slide CSS and test it out.

We now only ever keep three slides in the DOM: the current, next, and previous slide. When you transition, it switches those out.

28

Thanks for the response. Not so sure what you mean custom CSS. I using straight Ionic. See code fregments;

$scope.data = {};
    $scope.data.slides = [
        {
            title : "Slide 1",
            src: 'http://lorempixel.com/300/500/sports/1'
        },
        {
            title : "Slide 2",
            src: 'http://lorempixel.com/300/500/sports/2'
        },
        {
            title : "Slide 3",
            src: 'http://lorempixel.com/300/500/sports/3'
        },
        {
            title : "Slide 4",
            src: 'http://lorempixel.com/300/500/sports/4'
        },
        {
            title : "Slide 5",
            src: 'http://lorempixel.com/300/500/sports/5'
        }
    ];

$scope.removeEndSlide = function(){

        var index = $ionicSlideBoxDelegate.selected();
        var count = $ionicSlideBoxDelegate.count();

        console.log($scope.data.slides);
        console.log('before index = ' + index);
        console.log('before count = '+ count);

        $scope.data.slides.pop();

        var index = $ionicSlideBoxDelegate.selected();
        var count = $ionicSlideBoxDelegate.count();

        console.log($scope.data.slides);
        console.log('after index = ' + index);
        console.log('after count = '+ count);

    };

Slidebox will slide to the end, but nothing is there.

Console output:

Array [ Object, Object, Object, Object ] index.js:276
"before index = 0" index.js:277
"before count = 5" index.js:278
Array [ Object, Object, Object, Object ] index.js:285
"after index = 0" index.js:286
"after count = 5" index.js:287

29

Thanks @andy it does appear to be CSS related.

I was using SASS files from the stable build so it was rendering incompatible styles for the nightly. I’m guessing the project’s SASS files will be updated when the next stable build is released?

30

@ccantrell yes.
@jajohga try the latest nightly build (will be up 10 minutes after this post), and let me know.

Also, I had to remove the feature that only kept 3 slides in the DOM. When ng-repeating, it just wasn’t working.

It now keeps all the slide elements in the DOM, but hides & disconnects the unused ones. More optimizations will come in the future.

31

@andy I’m seeing big improvements after you pulled out the feature that only keeps 3 slides in the DOM.

One bug I see now is it seems like the on-slide-changed isn’t firing for each slide change now? Still determining if thats a bug in my code.

Also, (not a huge deal but fyi) I noticed while switching between landscape and portrait, the heights for some elements aren’t updating. I have a parent ion-view and ion-side-menu-content that I have to set height:100% !important in my css which fixes it. The slides themselves do update their heights properly.

32

@ccantrell just pushed a fix for the onSlideChanged callback - it was only firing if you provided your own selected attr and changed the binding from outside the slidebox. Now it always fires when selection changes.

Could you post a codepen where the size isn’t updating correctly?

33

@andy thanks! onSlideChanged is working great now.

I’m not seeing the resize bug in a test plunker I made so it’s must be something specific to my app structure/layout, I’ll keep investigating.

34

Great additions guys! I can remove all of my custom code where i was hiding all but current, previous, and next slides to improve performance! Looks like you are doing it with slide-state="current" now. Awesome!

Only one big issue I am seeing, if I start the slideshow with the last slide being active, it’s state doesnt get set to current instead all slides are detached. If I enter on any other slide it works fine or if I enter at another index and then wipe to the last slide, it works fine.

The easiest case to test is probably just having a slideshow with a single slide AND set selected=0 on ion-slide-box. If you have more than one slide, they will all work, if you only have one, it will not show up.

UPDATE: fixed liked this if anyone is experiencing the same issue

$timeout(function() {
			$ionicSlideBoxDelegate.update();
		}, 0);
    ```
35

I have a slidebox on an app frontpage which I don’t have any issues with. However I need to show the frontpage and therefore the slidebox in two languages. To achieve this I tried using angular tabs with a separate slidebox in each tab which produced some strange results. The css on one of them would not render correctly and the other would be laggy. Would this update resolve that issue?

36

Got it all working with the new version, but the sliding is no longer very smooth on ios (or simulator). For instance if you half slide and then release, it doesnt rubber band back into place, it just snaps back with no transition. Not sure if its related to the hiding and showing of the slides or what. I saw that the current, next and previous get a no-animate class while in transition, not sure if thats the problem or not, still looking into it.

37

@travisdahl do you have any custom CSS? It’s snapping back perfectly in our tests.

38

Push and pop looks good. Therefore, data manipulation at the end of the slidebox is fine.

Manipulation at the beginning has issues.

Unshift (prepend to beginning) - count update is good, index doesn’t change to compensate for the addition (move over), and the slides are visually showing at the end of the slidebox.

Shift (remove from beginning) - count looks good, index doesn’t compensation. If on the first slide upon shift, works great.

39

@jajohga I see what you mean, I’ll fix that soon. Could you open an issue?

41

Any chance at all that once the refactor stabilises we could have vertical sliding as well?

42

@coen_warmer it’s extremely possible, in fact it’s very easy. Internally, we just have to add a vertical option to the drag listener, and then add a set of vertical CSS rules.

Could you open an issue?

2 Likes
43

Done! https://github.com/driftyco/ionic/issues/2385

And great work!!

44

just a question, i am not sure, upgrading the slidebox with collection-repeat in mind? collection repeat will have a way to get index and value? i have to loop trough some objects with index. Also what about pinch to zoom functionality? thanks for the great work!