assign component css by platform mode

ionic/components/toolbar/toolbar.js

@@ -47,7 +47,7 @@ export class Toolbar {
 
     // TODO use config to add these classes
     this.viewContainer.domElement.classList.add('toolbar');
-    this.viewContainer.domElement.classList.add(`toolbar-${platform.getName()}`);
+    this.viewContainer.domElement.classList.add(`toolbar-${platform.getMode()}`);
 
     // TODO Make a better way than this
     if (/header/i.test(this.viewContainer.domElement.tagName)) {

ionic/config/component.js

@@ -1,8 +1,7 @@
 import * as util from 'ionic/util'
 import {platform} from 'ionic/platform/platform'
 
-let platforms = Object.keys(platform.registry)
-let platformName = platform.getName()
+let platformMode = platform.getMode()
 
 // Low-level: how the user will override
 // BackButton.config.bind.icon.value = 'ion-chevron-right'
@@ -37,13 +36,13 @@ export class IonicComponent {
   }
   _computeDefaultValue(binding = {}) {
     let defaults = binding.defaults || {}
-    binding._defaultValue = binding.value || defaults[platformName] || defaults.base;
+    binding._defaultValue = binding.value || defaults[platformMode] || defaults.base;
   }
 
   invoke(instance) {
     const config = this
     instance.domElement.classList.add(this.componentCssName)
-    instance.domElement.classList.add(`${this.componentCssName}-${platformName}`)
+    instance.domElement.classList.add(`${this.componentCssName}-${platformMode}`)
 
     // For each property class, check if it exists on the element and add the
     // corresponding classname for it
@@ -53,22 +52,6 @@ export class IonicComponent {
       }
     }
 
-    /****** TODO: HACK!!! MAKE MORE GOOD!!! ********/
-    /*
-      Manually assigning "md" for android platform, but we need
-      to be able to set which "mode" to use for each platform.
-
-      ios platform == ios mode
-      android platform == md mode (material design mode)
-      everything else == core mode
-
-      Uber hack below until we come up with a pretty "mode" API
-    */
-    if (platformName == 'android') {
-      instance.domElement.classList.add(`${this.componentCssName}-md`)
-    }
-    /****** TODO: HACK!!! MAKE MORE GOOD!!! ********/
-
 
     // Check and apply and property classes (properties that should be
     // converted to class names). For example, <button primary> should

ionic/platform/platform.js

@@ -1,78 +1,81 @@
 import * as util from 'ionic/util'
 
-const queryPlatform = (util.readQueryParams()['ionicplatform'] || '').toLowerCase()
 
-class Platform {
-  constructor(options) {
-    util.extend(this, options)
-  }
-}
+let registry = {};
+let defaultPlatform;
+let activePlatform;
 
 class PlatformController {
-  constructor() {
-    this.registry = {}
-  }
-
-  set(platform) {
-    this.current = platform
-  }
 
   get() {
-    return this.current
+    if (util.isUndefined(activePlatform)) {
+      this.set(this.detect());
+    }
+    return activePlatform || defaultPlatform;
   }
 
   getName() {
-    return this.current && this.current.name
+    return this.get().name;
+  }
+
+  getMode() {
+    let plt = this.get();
+    return plt.mode || plt.name;
   }
 
   register(platform) {
-    if (!platform instanceof Platform) platform = new Platform(platform)
-    this.registry[platform.name] = platform
+    registry[platform.name] = platform;
   }
 
-  setDefaultPlatform(platform) {
-    if (!platform instanceof Platform) platform = new Platform(platform)
-    this.defaultPlatform = platform
+  set(platform) {
+    activePlatform = platform;
+  }
+
+  setDefault(platform) {
+    defaultPlatform = platform;
   }
 
   isRegistered(platformName) {
-    return this.registry.some(platform => {
-      return platform.name === platformName
+    return registry.some(platform => {
+      return platform.name === platformName;
     })
   }
 
   detect() {
-    for (let name in this.registry) {
-      if (this.registry[name].isMatch()) {
-        return this.registry[name]
+    for (let name in registry) {
+      if (registry[name].isMatch()) {
+        return registry[name]
       }
     }
-    return this.defaultPlatform
+    return null;
   }
 }
 
-export let platform = new PlatformController()
+export let platform = new PlatformController();
+
+
+const ua = window.navigator.userAgent;
+const queryPlatform = (util.getQuerystring('ionicplatform')).toLowerCase()
 
-// TODO(ajoslin): move this to a facade somewhere else?
-var ua = window.navigator.userAgent
 
-// TODO(ajoslin): move these to their own files
 platform.register({
   name: 'android',
+  mode: 'md',
   isMatch() {
     return queryPlatform == 'android' || /android/i.test(ua)
   }
-})
+});
+
 platform.register({
   name: 'ios',
   isMatch() {
     return queryPlatform === 'ios' || /ipad|iphone|ipod/i.test(ua)
   }
-})
+});
 
 // Last case is a catch-all
-platform.setDefaultPlatform({
+platform.setDefault({
   name: 'core'
-})
+});
 
-platform.set( platform.detect() )
+platform.set( platform.detect() );

ionic/util/util.js

@@ -94,17 +94,20 @@ export let array = {
   }
 }
 
-export function readQueryParams() {
-  var queryParams = {}
-  const startIndex = window.location.href.indexOf('?')
+export function getQuerystring(key) {
+  var queryParams = {};
+  const startIndex = window.location.href.indexOf('?');
   if (startIndex !== -1) {
-    const queries = window.location.href.slice(startIndex + 1).split('&')
+    const queries = window.location.href.slice(startIndex + 1).split('&');
     if (queries.length) {
       queries.forEach((param) => {
         var split = param.split('=')
         queryParams[split[0]] = split[1]
-      })
+      });
     }
   }
-  return queryParams
+  if (key) {
+    return queryParams[key] || '';
+  }
+  return queryParams;
 }