Module for checking the brower and adding flags. Needs a match media polyfill for ie9.

flags.js

'use strict';

let UA                  = navigator.userAgent,
  isIos               = /ip(hone|od|ad)/i.test(UA),
  isSafari            = /(mac os x).*version\/\d(.\d)+ (mobile\/\w{5,} )?safari/i.test(UA),
  isSafari5           = /(mac os x).*version\/5[.\d]+ (mobile\/\w{5} )?safari/i.test(UA),
  isAndroid           = /android/i.test(UA),
  isAndroidBrowser    = isAndroid && !/chrome|firefox/i.test(UA),
  isAndroidBrowserOld = isAndroidBrowser && parseFloat(/android ([\d\.]+)/i.exec(UA).pop()) < 4.3,
  isAndroid2          = isAndroidBrowser && /android 2\.\d/i.test(UA),
  isAndroidChrome     = isAndroid && /chrome/i.test(UA),
  isKindleFire        = /KF[A-Z]{2,3}/.test(UA),
  isFirefox           = /firefox/i.test(UA),
  isIE11              = /Trident/i.test(UA),
  isLtIE11            = /msie \d/i.test(UA),
  isIE9               = /msie 9/i.test(UA),
  isIE                = isLtIE11 || isIE11,
  isMSTouch           = (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0),
  isMSTouchPrefix     = !!navigator.msMaxTouchPoints,
  isPhone             = ((/mobile/i.test(UA) && !/ipad|tablet/i.test(UA)) || matchMedia('only screen and (max-device-width : 767px)').matches) && !isKindleFire,
  isTablet            = (isAndroid && !isPhone) || (isIos && !isPhone) || isKindleFire,
  isMobile            = isPhone || isTablet;

export const Browser = {
  isIos               : isIos,
  isSafari            : isSafari,
  isSafari5           : isSafari5,
  isAndroid           : isAndroid,
  isAndroidBrowser    : isAndroidBrowser,
  isAndroidBrowserOld : isAndroidBrowserOld,
  isAndroidChrome     : isAndroidChrome,
  isAndroid2          : isAndroid2,
  isKindleFire        : isKindleFire,
  isFirefox           : isFirefox,
  isIE11              : isIE11,
  isLtIE11            : isLtIE11,
  isIE9               : isIE9,
  isIE                : isIE,
  isMSTouch           : isMSTouch,
  isMSTouchPrefix     : isMSTouchPrefix,
  isPhone             : isPhone,
  isTablet            : isTablet,
  isMobile            : isMobile
};

export function checkBrowsers() {
  let el = document.getElementsByTagName('html');

  for (let key of Object.keys(this.Browser)) {
    if(this.Browser[key]) {
      let newClass = convertToSnake(key);
      if (el[0].classList){
        el[0].classList.add(newClass);
      } else {
        el[0].className += ' ' + newClass;
      }
    }
  }
};

export function convertToSnake(str) {
  var strArr = str.split(''),
      isLastUppercase = false;
  for (let ltr in strArr) {
    if (!isLastUppercase && strArr[ltr] === strArr[ltr].toUpperCase() && typeof(strArr[ltr]) !== 'number') {
      strArr[ltr] = '-' + strArr[ltr].toLowerCase();
      isLastUppercase = true;
    } else if (strArr[ltr] === strArr[ltr].toUpperCase() && typeof(strArr[ltr]) !== 'number') {
      strArr[ltr] = strArr[ltr].toLowerCase();
      isLastUppercase = true;
    } else {
      isLastUppercase = false;
    }
  }
  return strArr.join('');
}

main.js

import * as Flags from './helpers/flags';