Modal Service for Framework 7 integration with Aurelia

f7.js

import 'framework7';
// import 'framework7-3d-panels/dist/framework7.3dpanels';

export const F7 = new Framework7({
  ios: true
});

filter-popover.html

<template>
  <div class="popover popover-links" ref="popover">
    <div class="popover-angle"></div>
    <div class="popover-inner">
      <div class="list-block">
        <ul>
          <li>
            <label class="label-radio item-content">
              <input type="radio" name="my-radio" value="All" checked="checked">
              <div class="item-inner">
                <div class="item-title">All</div>
              </div>
            </label>
          </li>
          <li>
            <label class="label-radio item-content">
              <input type="radio" name="my-radio" value="Done">
              <div class="item-inner">
                <div class="item-title">Done</div>
              </div>
            </label>
          </li>
          <li>
            <label class="label-radio item-content">
              <input type="radio" name="my-radio" value="On Time">
              <div class="item-inner">
                <div class="item-title">On Time</div>
              </div>
            </label>
          </li>
          <li>
            <label class="label-radio item-content">
              <input type="radio" name="my-radio" value="Behind Schedule">
              <div class="item-inner">
                <div class="item-title">Behind Schedule</div>
              </div>
            </label>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

filter-popover.js

import {inject} from 'aurelia-framework';
import {F7} from './services/f7.js';

@inject(F7, Element)
export class FilterPopover {
  constructor(f7, element) {
    this.f7 = f7;
    this.element = element;
  }
  activate(filters, routeConfig, navigationIntruction) {
    this.filters = filters;
  }

  setFilter(value) {
    this.filters.nameFilter = value;
    this.f7.closeModal(this.popover);
  }
}

modal-service.js

import {inject, ViewSlot} from 'aurelia-framework';
import {Origin} from 'aurelia-metadata';
import {Container} from 'aurelia-dependency-injection';
import {CompositionEngine} from 'aurelia-framework';
import {F7} from './f7.js';

@inject(Container, CompositionEngine, F7)
export class ModalService {
  constructor(container, compositionEngine, f7) {
    this.container = container;
    this.compositionEngine = compositionEngine;
    this.f7 = f7;
  }

  _getViewModel(instruction) {
    if (typeof instruction.viewModel === 'function') {
      instruction.viewModel = Origin.get(instruction.viewModel).moduleId;
    }

    if (typeof instruction.viewModel === 'string') {
      return this.compositionEngine.ensureViewModel(instruction);
    }

    return Promise.resolve(instruction);
  }

  popover(setting, target) {
    this.create(setting)
      .then( (handle) => {
        this.f7.popover(handle.container.firstElementChild, target);
      });
  }

  pickerModal(setting, target) {
    this.create(setting)
      .then( (handle) => {
        this.f7.pickerModal(handle.container.firstElementChild, target);
      });
  }

  create(settings) {
    return new Promise((resolve, reject) => {
      let childContainer = this.container.createChild();
      let instruction = {
        viewModel: settings.viewModel,
        container: this.container,
        childContainer: childContainer,
        model: settings.model
      };

      return this._getViewModel(instruction).then(returnedInstruction => {
        return invokeLifecycle(returnedInstruction.viewModel, 'canActivate', settings.model).then(canActivate => {
          if (canActivate) {
            return this.compositionEngine.createController(returnedInstruction).then(controller => {
              controller.automate();

              let modalContainer = document.createElement('modal-container');
              document.body.insertBefore(modalContainer, document.body.firstChild);
              let slot = new ViewSlot(modalContainer, true);
              slot.add(controller.view);
              slot.attached();
              let handle = {slot: slot, container: modalContainer, controller: controller};
              let closeHandle = function() {
                return function() {
                  document.body.removeChild(handle.container);
                  handle.slot.detached();
                };
              };
              modalContainer.addEventListener('closed', closeHandle());

              return resolve(handle);
            });
          }
        });
      });
    });
  }

  close(handle) {
    handle.modalContainer.removeEventListener('closed');
    document.body.removeChild(handle.container);
    handle.slot.detached();
  }
}

function invokeLifecycle(instance, name, model) {
  if (typeof instance[name] === 'function') {
    let result = instance[name](model);

    if (result instanceof Promise) {
      return result;
    }

    if (result !== null && result !== undefined) {
      return Promise.resolve(result);
    }

    return Promise.resolve(true);
  }

  return Promise.resolve(true);
}

sample usage:

this.modalService.popover({viewModel: FilterPopover, model: this.filters}, target);