Slidebox Refactor landed in nightly with huge API changes

andy · October 8, 2014, 5:10pm

Slidebox’s refactor has just landed in nightly builds, closing almost twenty issues.

Check out the changes: https://github.com/driftyco/ionic/commit/7ef9ad74cf6fd12b33e7d48915208ccfbeb5d531

Check out the docs: http://ionicframework.com/docs/nightly/api/directive/ionSlideBox

ccantrell · October 8, 2014, 6:54pm

The slidebox refactor is looking great, solid direction you guys are moving this. I was experiencing some laggy behavior so decided to check out the nightly build to see any improvements. I’ve updated my scripts based on the changelog, but am getting this error consistently.

Error: [$compile:ctreq] Controller '$ionicScroll', required by directive 'ionSlideBox', can't be found!

I believe this error is manifesting itself in the app by not sliding the slides but just showing the next/previous on swipe. Within each slide, I do have an ion-scroll element which works fine.

Apavillet · October 8, 2014, 9:04pm

Great news, only problem I have is that I cannot scroll with that build when there is a slider

I can scroll if I has overflow-scroll but then the sliders does not work.

I’m also having some wierd JS errors :

TypeError: Cannot read property 'split' of undefined
at Object.e.Gestures.Instance.off (http://localhost:8100/lib/ionic/js/ionic.min.js:15:12030)
at Function.e.EventController.offGesture (http://localhost:8100/lib/ionic/js/ionic.min.js:15:9654)
at Object.e.offGesture (http://localhost:8100/lib/ionic/js/ionic.min.js:15:10041)
at http://localhost:8100/lib/ionic/js/ionic-angular.min.js:15:6350
at k.$broadcast (http://localhost:8100/lib/angular/angular.min.js:114:327)
at k.$destroy (http://localhost:8100/lib/angular/angular.min.js:110:440)
at d (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:17:5603)
at b (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:17:6282)
at k.$broadcast (http://localhost:8100/lib/angular/angular.min.js:114:327)
at u.transition.L.then.u.transition.u.transition (http://localhost:8100/lib/angular-ui-router/release/angular-ui-router.min.js:7:13180) (index):28

Hope it helps

andy · October 8, 2014, 9:32pm

@Apavillet please post a codepen or plunkr reproducing this.

Apavillet · October 8, 2014, 9:44pm

@andy Hello, I had two different issues with the slidebox the first one was caused by a ng-if on the slidebox. The second one i cannot find it yet but it sure looks like it’s taking the whole page as height.

andy · October 8, 2014, 9:56pm

With the latest nightly, it no longer requires scroll parent! Put the slidebox anywhere.

andy · October 8, 2014, 9:58pm

@ccantrell it no longer requires a parent scroll element.

andy · October 8, 2014, 9:59pm

@Apavillet the slidebox will take up the whole height of its parent element, whatever that is.

What issues are you having with an ng-if?

EDIT: Found a problem with destroying the slidebox, testing it out.

Apavillet · October 8, 2014, 10:11pm

It does now with you recent commit. I still cannot scroll but I have no idea why, still investigating. Thanks

andy · October 8, 2014, 10:12pm

@Apavillet just pushed a new commit that will fix some problems with the slidebox cleaning itself up.

Also what do you mean you cannot scroll? Do you mean you cannot scroll slides in the slidebox?

Apavillet · October 8, 2014, 10:17pm

Oh sorry no i cannot scroll the page, the slides does work though
I just figured than even if i only put an empty slidebox it does not allow the page to scroll (). Please note it might be related to my app but it used to work before nightly.

On a side note, sliding from right to left seems to open the menu ( menu is located left )

andy · October 8, 2014, 10:22pm

Could you post your markup?

Apavillet · October 8, 2014, 10:24pm

You’ll be disapointed I’m down to ( i removed a lot to narrow down the issue) :

<ion-view title="" >

 <ion-content class="no-header detail-content">
<div class="photos-container">
   <ion-slide-box>
  </ion-slide-box>
</div>

andy · October 8, 2014, 10:30pm

OK. I know why. I’ll have a fix up for you within 20 minutes…

vcanhoto · October 8, 2014, 10:36pm

… and this is one of the reasons why I love Ionic.

andy · October 8, 2014, 10:40pm

@Apavillet try the latest nightly build.

@vcanhoto

Apavillet · October 8, 2014, 10:53pm

@andy It does work ! Thanks a lot andy
@andy @vcanhoto Did I say me too ?

PS: The problem with sliding right opening the menu is also fixed (and even by adding the ng-if which caused the first problem, it works). Great job

zarko · October 9, 2014, 1:41pm

First of all, let me say that the (few?) folks at Ionic keep impressing and surprising this great community. The framework, together with Cordova is likely the best thing that has happened to web tech. on mobile devices.

Now,
does anyone know when we can get an API for programatically prepending and appending slides? One/or a solution which is not a hack. I’ve already seen some attempts on the forum but none of them yield a great ux.

(I’m working on a neat swipeable calendar but I’ve already hit the limits and so my devices begun heating up )

Apavillet · October 9, 2014, 2:18pm

hello @andy I also have a problem with updating the slidebox, since update() does not exists anymore : see this plunker
Scope is not updated, do something like $apply is missing or should that be applied manually?