# Yieldify integration

## Modal Scheduler

We provide a `modalScheduler` instance on the `window` object.

It provides a method to create a new modal client that will be notified when the viewport is available or not for a modal.

ModalScheduler
+ createClient(callback): ClientModal;

The registered `callback` function takes a boolean `canDisplayModal` as parameter. It will be called to notify your client modal whenever it can or can't display a modal in the viewport.

## ClientModal

The `ClientModal` instance returned by the `modalScheduler.createClient(callback)` is used to acquire and release a lock before and after displaying a modal.

ClientModal
+ acquireLock();
+ releaseLock();

### acquireLock()

It will notify other modal clients they can't use the viewport as you acquired the lock. That will be true until you release the lock.

If lock can't be acquired, `acquireLock()` will throw an error. That's because another client would have acquired the lock before you.

### releaseLock()

It will notify other modal clients that the viewport can now be used to display a modal.

If the client didn't acquire the lock beforehand, this will do nothing.

## Examples

With a class:

class Yieldify {
  constructor() {
    this.canDisplay = false;
    this.clientModal = window.modalScheduler && modalScheduler.createClient(canDisplayModal => {
      this.canDisplay = canDisplayModal; // You can use this variable before trying to acquire the lock
      if (canDisplayModal) {
        console.log("The viewport is AVAILABLE for displaying a modal");
        // some extra logic
      } else {
        console.log("The viewport is UNAVAILABLE - do not display any modals");
        // some extra logic
      }
    });

    openModal() {
      if (!this.canDisplay) {
        return;
      }
      
      try {
        this.clientModal.acquireLock();
        window.yieldify.open(); // Your modal opening logic…
      } catch (err) {
        // You can't acquire the lock
      } finally {
        this.clientModal.releaseLock();
      }
    }

    closeModal() {
      window.yieldify.close(); // Your modal closing logic…
      this.clientModal.releaseLock();
    }
  }
}

With an IIFE:

(function() {
  let canDisplay = false;
  
  const clientModal = window.modalScheduler.createClient(schedulerHandler);
  document.body.addEventListener('mouseleave', displayModal);

  function schedulerHandler(canDisplayModal) {
    canDisplay = canDisplayModal;
    if (canDisplayModal) {
      console.log("The viewport is AVAILABLE for displaying a modal");
      // some extra logic
    } else {
      console.log("The viewport is UNAVAILABLE - do not display any modals");
      // some extra logic
    }
  }

  function displayModal() {
    if (!canDisplay) {
      return;
    }
    
    try {
      clientModal.acquireLock();
      window.yieldify.open(); // Your modal opening logic…
    } catch(err) {
        // You can't acquire the lock
    } finally {
      clientModal.releaseLock();
    }
  }
})();