fredleblanc / roundabout

A 3D Turntable jQuery Plugin.
645 stars 204 forks source link

Method to destroy / disable Roundabout's bindings #56

Open bradgreens opened 12 years ago

bradgreens commented 12 years ago

This might be more of a feature request. I am working on a responsive application where Roundabout exists on desktop, yet is a different slideshow on mobile. I'm trying to destroy Roundabout's behaviors when the user transitions between these two views.

I've been working on the following technique.

// 1) Unbind the responsive resize handler. I needed to customize jquery.roundabout.js and namespace the resize handler, I had a conflict with just using "resize"). $(window).unbind(".roundabout")

// 2) Attempt to unbind all "roundabout" namespaced bindings App.$roundabout.children().andSelf().unbind('.roundabout')

// 3) Attempt to unbind all "autoplay" namespaced bindings App.$roundabout.children().andSelf().unbind('.autoplay')

// 4) Attempt to remove all inline styles generated by Roundabout, using a custom selector plugin App.$roundabout.find(':inlineStyle').andSelf(':inlineStyle').removeAttr('style')

// 5) Attempt to destroy Roundabout data App.$roundabout.removeData('roundabout')

In these examples App.$roundabout is the jQuery object for which I initialized the script. i.e. App.$roundabout.roundabout({ /* configs */ })

This seems to be working pretty well, it'd be nice if there was a straightforward way to do this.

mattstauffer commented 11 years ago

+1 for this request.

bradgreens commented 11 years ago

Looks like this got some attention on other issues. Here's a little more detail on these steps.

App.$roundabout is simply a variable which I assigned the roundabout application to. Kind of like so: var App = {} var App.$roundabout = $('ul').roundabout();

I then customized the jquery.rounadabout.js (v2.4.2), by ensuring a ".rounadabout" namespace existing on ALL events. Like so: ... .bind("click.roundabout" ... ... $(window).bind("resize.roundabout" ... ... and any other events which did not have the namespace This made unbinding events a bit "safer" in the scheme of things.

I used this extension to strip inline styles from all roundabout elements. https://gist.github.com/3170892

Will try to have a pull request someday... might be weeks out.

mattstauffer commented 11 years ago

I tried my hand at it. Would you do me a favor and take a look if you have a minute? There's one @todo and a few places where I wasn't sure (for example, is unbind('.roundabout.autoplay') necessary if we're already unbinding('.roundabout')? Not sure how it parses namespaces...)

https://github.com/jiolasa/roundabout

bradgreens commented 11 years ago

This looks excellent, after a couple tests, it worked very well for me.

I'm not immediately sure about the namespaces either. IMO, I think it'd be ok to just get this in as a pull request and go from there.

d-g-h commented 11 years ago

$('whatever').roundabout("destroy"); Worked for me too. Thanks!

pjnovas commented 11 years ago

Is this already merged?, cause I have downloaded the last version from the Site and it doesn't have the method. Thanks!

mattstauffer commented 11 years ago

@pjnovas, nope.. I opened a pull request but it hasn't been accepted yet.

Here's the updated URL for my fork.

https://github.com/mattstauffer/roundabout

I haven't merged downstream from Roundabout recently, so if you have any trouble, let me know.

Eventor commented 11 years ago

Matt may i suggest you add the stopAutoPlay to your destroy method, because i found that if the autoplay feature is active and you dont explicitly stop it, it will keep causing a jquery error saying that data isnt defined. Even after your destroy method is used.