Refactor Ionic API, add missing bindings (#26)

* Refactor Ionic API, add missing bindings

* Add tests, remove unneeded setters

* Remove ion-nav support

* Remove unused wrapper arg, move cache prop out of api instance

Author: michaeltintiuc

README.md

@@ -94,7 +94,6 @@ It is an extension of the Vue Router thus it can be used as a drop-in replacemen
 - [Basic routing](cookbook/index.html)
 - [Named views](cookbook/named-views.html)
 - [Named views with transitions](cookbook/named-views-transitions.html)
-- [IonNav routing](cookbook/ion-nav-routing.html)
 - [Custom transitions](cookbook/custom-transitions.html)
 - [Mix Ionic and custom transitions](cookbook/mixed-transitions.html)
 

cookbook/ion-nav-routing.html

@@ -0,0 +1,28 @@
+import { Delegate } from './framework-delegate'
+
+// A proxy method that initializes the controller and calls requested method
+export function proxyMethod(tag, method, ...opts) {
+  return initController(tag).then(ctrl => ctrl[method].apply(ctrl, opts))
+}
+
+// Initialize an Ionic controller and append it to DOM
+export function initController(tag) {
+  const element = getOrAppendElement(tag)
+
+  // Set the framework-specific implementations for Ionic's internals
+  element.delegate = Delegate
+
+  // Return a Promise
+  return element.componentOnReady()
+}
+
+// Return existing Element (tag) or create a new one
+function getOrAppendElement(tag) {
+  let element = document.querySelector(tag)
+
+  if (element) {
+    return element
+  }
+
+  return document.body.appendChild(document.createElement(tag))
+}

src/api-utils.js

@@ -1,75 +1,76 @@
-import { Delegate } from './framework-delegate'
+import ProxyController from './proxy-controller'
+import ProxyMenuController from './proxy-menu-controller'
 
-const api = {
-  // Create or return a NavController instance and set root to a Vue component
-  newNavController(root) {
-    return Promise.resolve(
-      initComponent('ion-nav', 'ion-app').then(ctrl => {
-        ctrl.root = root
-        return ctrl
-      })
-    )
-  },
-  // Create or return an AlertController instance and set it's properties
-  newAlertController(props) {
-    return this.newAbstractController('ion-alert-controller', props)
-  },
-  // Create or return a LoadingController instance and set it's properties
-  newLoadingController(props) {
-    return this.newAbstractController('ion-loading-controller', props)
-  },
-  // Create or return a ModalController  instance and set it's properties
-  newModalController(props) {
-    return this.newAbstractController('ion-modal-controller', props)
-  },
-  // Initialize an Ionic component and set it's properties
-  newAbstractController(tag, props) {
-    const controller = initComponent(tag).then(ctrl => ctrl.create(props))
-    return Promise.resolve(controller)
-  },
+export default class Api {
+  // Create or return a ActionSheetController instance
+  get actionSheetController() {
+    return getOrCreateController('_actionSheetController', 'ion-action-sheet-controller')
+  }
+
+  // Create or return an AlertController instance
+  get alertController() {
+    return getOrCreateController('_alertController', 'ion-alert-controller')
+  }
+
+  // Create or return a LoadingController instance
+  get loadingController() {
+    return getOrCreateController('_loadingController', 'ion-loading-controller')
+  }
+
+  // Create or return a MenuController instance
+  get menuController() {
+    return getOrCreateController('_menuController', 'ion-menu-controller', ProxyMenuController)
+  }
+
+  // Create or return a ModalController instance
+  get modalController() {
+    return getOrCreateController('_modalController', 'ion-modal-controller')
+  }
+
+  // Create or return a PopoverController instance
+  get popoverController() {
+    return getOrCreateController('_popoverController', 'ion-popover-controller')
+  }
+
+  // Create or return a ToastController instance
+  get toastController() {
+    return getOrCreateController('_toastController', 'ion-toast-controller')
+  }
 }
 
-export default api
+// Cached controllers
+Api._actionSheetController = null
+Api._alertController = null
+Api._loadingController = null
+Api._menuController = null
+Api._modalController = null
+Api._popoverController = null
+Api._toastController = null
 
-api.install = function(Vue) {
+Api.install = function(Vue) {
   // If installed - skip
-  if (api.install.installed) {
+  if (Api.install.installed) {
     return
   }
 
-  api.install.installed = true
+  Api.install.installed = true
 
   // Ignore Ionic custom elements
   Vue.config.ignoredElements.push(/^ion-/)
 
   // Give access to the API methods
   Object.defineProperty(Vue.prototype, '$ionic', {
     get() {
-      return api
+      return new Api()
     },
   })
 }
 
-// Initialize an Ionic component and append it to DOM
-function initComponent(tag, wrapper = 'body') {
-  // If wrapper doesn't exist use body as fall-back
-  const wrapperEl = document.querySelector(wrapper) || document.body
-  const element = getOrAppendElement(tag, wrapperEl)
-
-  // Set the framework-specific implementations for Ionic's internals
-  element.delegate = Delegate
-
-  // Return a Promise
-  return element.componentOnReady()
-}
-
-// Return existing Element (tag) or create a new one
-function getOrAppendElement(tag, wrapper) {
-  let element = document.querySelector(tag)
-
-  if (element) {
-    return element
+// Get existing controller instance or initialize a new one
+function getOrCreateController(cache, tag, proxy = ProxyController) {
+  if (!Api[cache]) {
+    Api[cache] = new proxy(tag)
   }
 
-  return wrapper.appendChild(document.createElement(tag))
+  return Api[cache]
 }

src/api.js

@@ -0,0 +1,20 @@
+import * as apiUtils from './api-utils'
+
+// A proxy class that allows early access to controller methods
+export default class ProxyController {
+  constructor(tag) {
+    this.tag = tag
+  }
+
+  create(opts) {
+    return apiUtils.proxyMethod(this.tag, 'create', opts)
+  }
+
+  dismiss() {
+    return apiUtils.proxyMethod(this.tag, 'dismiss')
+  }
+
+  getTop() {
+    return apiUtils.proxyMethod(this.tag, 'getTop')
+  }
+}

src/proxy-controller.js

@@ -0,0 +1,58 @@
+import * as apiUtils from './api-utils'
+
+// A proxy class that allows early access to controller methods
+export default class ProxyMenuController {
+  constructor(tag) {
+    this.tag = tag
+  }
+
+  // Open a menu
+  open(menuId) {
+    return apiUtils.proxyMethod(this.tag, 'open', menuId)
+  }
+
+  // Close a menu
+  close(menuId) {
+    return apiUtils.proxyMethod(this.tag, 'close', menuId)
+  }
+
+  // Toggle a menu
+  toggle(menuId) {
+    return apiUtils.proxyMethod(this.tag, 'toggle', menuId)
+  }
+
+  // Enable or disable a menu
+  enable(shouldEnable, menuId) {
+    return apiUtils.proxyMethod(this.tag, 'enable', shouldEnable, menuId)
+  }
+
+  // Enable or disable the ability to swipe open the menu
+  swipeEnable(shouldEnable, menuId) {
+    return apiUtils.proxyMethod(this.tag, 'swipeEnable', shouldEnable, menuId)
+  }
+
+  // Check if specific or any menu is open
+  isOpen(menuId) {
+    return apiUtils.proxyMethod(this.tag, 'isOpen', menuId)
+  }
+
+  // Check is certain menu is enabled
+  isEnabled(menuId) {
+    return apiUtils.proxyMethod(this.tag, 'isEnabled', menuId)
+  }
+
+  // Get specific or first menu instance
+  get(menuId) {
+    return apiUtils.proxyMethod(this.tag, 'get', menuId)
+  }
+
+  // Get an instance of an open menu
+  getOpen() {
+    return apiUtils.proxyMethod(this.tag, 'getOpen')
+  }
+
+  // Get an array of all menus
+  getMenus() {
+    return apiUtils.proxyMethod(this.tag, 'getMenus')
+  }
+}