Merge pull request #448 from BeAPI/feat/js-optimization

Feat/js optimization

Author: n-langle

src/js/classes/Header.js

@@ -1,5 +1,4 @@
 import AbstractDomElement from './AbstractDomElement'
-import each from '../utils/each'
 import { Tween } from 'oneloop.js'
 import isRTL from '../utils/isRTL'
 
@@ -14,10 +13,10 @@ class Header extends AbstractDomElement {
 
     const that = this
     const el = this._element
-    const toggle = el.getElementsByClassName('header__menu-toggle')[0]
-    const menuList = el.getElementsByClassName('header__menu-list')[0]
-    const liWithChidren = el.getElementsByClassName('menu-item-has-children')
-    const menu = el.getElementsByClassName('header__menu')[0]
+    const toggle = el.querySelector('.header__menu-toggle')
+    const menuList = el.querySelector('.header__menu-list')
+    const liWithChidren = el.querySelectorAll('.menu-item-has-children')
+    const menu = el.querySelector('.header__menu')
 
     this._menu = menu
     this._toggle = toggle
@@ -30,11 +29,7 @@ class Header extends AbstractDomElement {
       easing: 'easeInOutExpo',
       onUpdate: function (timestamp, tick, percent) {
         const bp = 768
-        let direction = window.innerWidth >= bp ? -1 : 1
-
-        if (isRTL()) {
-          direction = window.innerWidth >= bp ? 1 : -1
-        }
+        let direction = (window.innerWidth >= bp ? -1 : 1) * (isRTL() ? -1 : 1)
 
         menu.style.transform = 'translateX(' + 100 * (percent - 1) * direction + '%)'
       },
@@ -48,18 +43,18 @@ class Header extends AbstractDomElement {
 
     // avoid error for empty theme
     if (menuList) {
-      each(menuList.children, function (li) {
+      for (const li of menuList.children) {
         li.addEventListener('mouseenter', onMouseEnterFirstLevelLi.bind(that))
-      })
+      }
 
-      each(liWithChidren, function (li) {
+      for (const li of liWithChidren) {
         const subMenuToggle = li.children[1]
         li.addEventListener('mouseenter', onMouseEnterLi.bind(that))
         li.addEventListener('mouseleave', onMouseLeaveLi.bind(that))
 
         subMenuToggle.addEventListener('keypress', onKeyPressSubMenuToggle.bind(that))
         subMenuToggle.addEventListener('touchstart', onTouchStartSubMenuToggle.bind(that))
-      })
+      }
 
       toggle.addEventListener('click', onClickToggle.bind(this))
       document.addEventListener('keyup', onKeyup.bind(this))

src/js/utils/each.js

@@ -6,11 +6,9 @@ export default function extend() {
   const deep = firstArgIsBool ? args[0] : false
   const start = firstArgIsBool ? 1 : 0
   const rt = isPlainObject(args[start]) ? args[start] : {}
-  var i
-  var prop
 
-  for (i = start + 1; i < args.length; i++) {
-    for (prop in args[i]) {
+  for (let i = start + 1; i < args.length; i++) {
+    for (let prop in args[i]) {
       if (deep && isPlainObject(args[i][prop])) {
         rt[prop] = extend(true, {}, rt[prop], args[i][prop])
       } else if (typeof args[i][prop] !== 'undefined') {

src/js/utils/extend.js

@@ -1,39 +1,9 @@
 /*!
- * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
+ * isPlainObject <https://stackoverflow.com/questions/18531624/isplainobject-thing>
  *
- * Copyright (c) 2014-2017, Jon Schlinkert.
- * Released under the MIT License.
+ * Copyright https://stackoverflow.com/users/6023279/trunow.
  */
 
-function isObject(o) {
-  return Object.prototype.toString.call(o) === '[object Object]'
-}
-
 export default function isPlainObject(o) {
-  let ctor, prot
-
-  if (isObject(o) === false) {
-    return false
-  }
-
-  // If has modified constructor
-  ctor = o.constructor
-  if (ctor === undefined) {
-    return true
-  }
-
-  // If has modified prototype
-  prot = ctor.prototype
-  if (isObject(prot) === false) {
-    return false
-  }
-
-  // If constructor does not have an Object-specific method
-  // eslint-disable-next-line no-prototype-builtins
-  if (prot.hasOwnProperty('isPrototypeOf') === false) {
-    return false
-  }
-
-  // Most likely a plain Object
-  return true
+  return o?.constructor === Object || Object.getPrototypeOf(o ?? 0) === null
 }

src/js/utils/isPlainObject.js

@@ -1,4 +1,4 @@
-export default function isRTL() {
+export default function isRTL(container = document.documentElement) {
   const rtlLanguages = [
     'ar', // Arabic
     'fa', // Persian (Farsi)
@@ -13,5 +13,5 @@ export default function isRTL() {
     'yi', // Yiddish
   ]
 
-  return document.documentElement.dir === 'rtl' || rtlLanguages.includes(document.documentElement.lang)
+  return container.dir === 'rtl' || rtlLanguages.includes(container.lang)
 }