Event Handler

[jonsecchis]

Hi, great plugin!

I am just wondering, is there a way to add stop, start, play, resume events to be called outside the plugin?

Thank you!

[MrSaints]

Hello @jonsecchis 😄

Thanks, I'm glad that you liked it!

Yes there is!

Below are a few examples to stop, start, play, resume...

Basic start / stop via data():

var morphext = $("#js-rotating").Morphext({
   animation: "rotateIn"
});
var data = morphext.data("plugin_Morphext");

// Start Morphext (autostarts by default)
data.start();

// Stop Morphext
data.stop();

complete event callback option:

// Basic example (https://github.com/MrSaints/Morphext/blob/master/index.html#L23)
$("#js-rotating").Morphext({
    animation: "rotateIn",
    complete: function () {
        console.log("This is called after a phrase is animated in! Current phrase index: " + this.index);
    }
});

// With start(), and stop() (https://github.com/MrSaints/Morphext/issues/3#issuecomment-58606183)
$("#js-rotating").Morphext({
    complete: function () {
        // 1. Stop if phrase index is 3
        if (this.index === 3) {
            this.stop();
        }

        // 2. Stop if phrase is "Stop here" by retrieving the current phrase through its index
        if (this.phrases[this.index] === "Stop here") {
            this.stop();
        }

        // 3. Stop at the last phrase
        if (this.index === this.phrases.length - 1) {
            this.stop();
        }
    }
});

Shuffling:

Finally, with jQuery's data(), you can also do a bunch of other things (e.g. shuffle the phrases):

// Fisher-Yates Shuffle (see http://bost.ocks.org/mike/shuffle/)
function shuffle(array) {
  var m = array.length, t, i;

  // While there remain elements to shuffle…
  while (m) {

    // Pick a remaining element…
    i = Math.floor(Math.random() * m--);

    // And swap it with the current element.
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }

  return array;
}

// From demo file
var $morphext = $("#js-rotating").Morphext({
    animation: "rotateIn",
    complete: function () {
        console.log("This is called after a phrase is animated in! Current phrase index: " + this.index);
    }
});

// Important bit
var $data = $morphext.data("plugin_Morphext");
console.log("Before: " + $data.phrases);
shuffle($data.phrases);
console.log("After: " + $data.phrases);

As mentioned in another issue, there's no specific pub/sub kind of event [emitter], and I don't think I have plans for it in the near future as most use cases are already covered without them.

I hope this helps! And please do feel free to let me know if it doesn't. I'm more than happy to help you with your specific use case.

[jonsecchis]

Thank for such detailed response.

I could not get it to work in the situation I am facing.

I have your plugin animating in sync with a carousel in the same page. It works like this:

var morph = $("#js-rotating");
morph.Morphext({
    complete: function () 
    {
        owlnext(); // Trigger the carousel item
    } 
});

The problem is that when the window doesn't have focus, the animations lost sync.
So the solution would be to stop Morphtext on blur

I can stop the carousel using the complete function together with the other plugin handlers, but I can't figure how to stop and resume Morphtext properly.

var morph = $("#js-rotating");
morph.Morphext({
    complete: function () 
    if(document.hasFocus() == false) {
        owlstop(); // Stop carousel on blur
    } else {
        owlnext(); // Resume carousel
    }
});

I tried using this.stop() in the code above and it worked, but I could figure how to resume.
Also, when I call stop() it will only stop in the next index, not the current one.

I'm a novice in programming, but seems to me that I can't use the complete function to stop/resume the plugin. Since when it is stopped, the function won't run.

And my attempts to run the events from outside the plugin function didn't work at all.

Here is the page in question, it is under construction: http://www.vitoriaship.com.br/v4

[MrSaints]

Ideally, it's best to avoid playing with the focus of the window. I'll look into why it's getting out of sync, but meanwhile, have you tried using owl.goTo(x) / owl.jumpTo(x) so that it goes to the same slide index as Morphext?

You can access the current index with this.index, but you'll probably have to increment it for use with Owl Carousel (because it's '1' index behind).

Also, the complete callback is only fired after the current animation is complete (i.e. if you use stop, it will be fired for the next item). To stop it before, you'll need to use it outside of the callback (e.g. data.stop(); shown above) or in another event callback.

In your case, the window focus / blur event is external to the plugin (it controls both Morphext, and the Carousel). It needs to be used in something like $(window).blur(function () { data.stop(); }). And to resume: $(window).focus(function () { data.start(); }).

[jonsecchis]

Using owl.goTo instead of owl.next aparently solved the problem. When I change tab or minimize and then back to the page, the animations flicker but together!

I've tried data.stop() declaring functions external to the plugin, as you mentioned, but they didn't work for me.

I will test it further, but it seem like I have a solution!

Thank you very much!

[MrSaints]

No problem. I'm glad it works! 😅

I'll continue looking into the problem nevertheless. Thanks!