refactor: update togglers

Author: mrholek

js/src/sidebar.js

@@ -28,20 +28,25 @@ const DATA_KEY = 'coreui.sidebar'
 const EVENT_KEY = `.${DATA_KEY}`
 const DATA_API_KEY = '.data-api'
 
-const Default = {}
+const Default = {
+  breakpoint: false
+}
 
-const DefaultType = {}
+const DefaultType = {
+  breakpoint: '(boolean|string)'
+}
 
 const CLASS_NAME_BACKDROP = 'sidebar-backdrop'
 const CLASS_NAME_FADE = 'fade'
 const CLASS_NAME_SHOW = 'show'
+const CLASS_NAME_SIDEBAR = 'sidebar'
 const CLASS_NAME_SIDEBAR_NARROW = 'sidebar-narrow'
 const CLASS_NAME_SIDEBAR_OVERLAID = 'sidebar-overlaid'
-const CLASS_NAME_SIDEBAR_SHOW = 'sidebar-show'
 const CLASS_NAME_SIDEBAR_NARROW_UNFOLDABLE = 'sidebar-narrow-unfoldable'
 
 // eslint-disable-next-line prefer-regex-literals
 const REGEXP_SIDEBAR_SHOW = new RegExp('sidebar.*show')
+const REGEXP_SIDEBAR_SHOW_BREAKPOINT = /sidebar-(sm|md|lg|xl|xxl)-show/
 
 const EVENT_HIDE = `hide${EVENT_KEY}`
 const EVENT_HIDDEN = `hidden${EVENT_KEY}`
@@ -51,8 +56,9 @@ const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
 
 const SELECTOR_DATA_CLOSE = '[data-coreui-close="sidebar"]'
+const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle]'
+
 const SELECTOR_SIDEBAR = '.sidebar'
-const SELECTOR_SIDEBAR_TOGGLER = '.sidebar-toggler'
 
 /**
  * ------------------------------------------------------------------------
@@ -64,6 +70,7 @@ class Sidebar extends BaseComponent {
   constructor(element, config) {
     super(element)
     this._config = this._getConfig(config)
+    this._breakpoint = this._getBreakpoint()
     this._show = this._isVisible()
     this._mobile = this._isMobile()
     this._overlaid = this._isOverlaid()
@@ -91,12 +98,10 @@ class Sidebar extends BaseComponent {
     EventHandler.trigger(this._element, EVENT_SHOW)
 
     if (typeof breakpoint !== 'undefined') {
-      this._element.classList.add(breakpoint)
+      this._breakpoint = breakpoint
     }
 
-    if (typeof breakpoint === 'undefined' || this._isMobile()) {
-      this._element.classList.add(CLASS_NAME_SIDEBAR_SHOW)
-    }
+    this._element.classList.add(this._createShowClass())
 
     if (this._isMobile()) {
       this._showBackdrop()
@@ -119,22 +124,14 @@ class Sidebar extends BaseComponent {
     emulateTransitionEnd(this._element, transitionDuration)
   }
 
-  hide(breakpoint) {
+  hide() {
     EventHandler.trigger(this._element, EVENT_HIDE)
 
-    if (typeof breakpoint !== 'undefined') {
-      this._element.classList.remove(breakpoint)
-      return
-    }
-
-    if (typeof breakpoint === 'undefined' || this._isMobile()) {
-      // eslint-disable-next-line unicorn/prefer-spread
-      Array.from(this._element.classList).forEach(className => {
-        if (className.match(REGEXP_SIDEBAR_SHOW)) {
-          this._element.classList.remove(className)
-        }
-      })
-    }
+    this._element.classList.forEach(className => {
+      if (className.match(REGEXP_SIDEBAR_SHOW)) {
+        this._element.classList.remove(className)
+      }
+    })
 
     if (this._isMobile()) {
       this._removeBackdrop()
@@ -159,11 +156,17 @@ class Sidebar extends BaseComponent {
 
   toggle(breakpoint) {
     if (this._show) {
-      this.hide(breakpoint)
+      this.hide()
       return
     }
 
-    this.show(breakpoint)
+    if (breakpoint === 'all') {
+      this._breakpoint = false
+      this.show(this._breakpoint)
+      return
+    }
+
+    this.show()
   }
 
   narrow() {
@@ -230,6 +233,27 @@ class Sidebar extends BaseComponent {
     return config
   }
 
+  _getBreakpoint() {
+    if (this._config.breakpoint) {
+      return this._config.breakpoint
+    }
+
+    const breakpoint = this._element.className.match(REGEXP_SIDEBAR_SHOW_BREAKPOINT)
+    if (breakpoint) {
+      return breakpoint[1]
+    }
+
+    return false
+  }
+
+  _createShowClass() {
+    if (this._breakpoint && !this._isMobile()) {
+      return `${CLASS_NAME_SIDEBAR}-${this._breakpoint}-${CLASS_NAME_SHOW}`
+    }
+
+    return `${CLASS_NAME_SIDEBAR}-${CLASS_NAME_SHOW}`
+  }
+
   _isMobile() {
     return Boolean(window.getComputedStyle(this._element, null).getPropertyValue('--is-mobile'))
   }
@@ -270,7 +294,7 @@ class Sidebar extends BaseComponent {
   }
 
   // eslint-disable-next-line no-warning-comments
-  // TODO: ta metoda nie zawsze działa poprawnie
+  // TODO: this method is not bulletproof
   _isVisible() {
     const rect = this._element.getBoundingClientRect()
     return (
@@ -331,7 +355,7 @@ class Sidebar extends BaseComponent {
       this._addClickOutListener()
     }
 
-    EventHandler.on(this._element, EVENT_CLICK_DATA_API, SELECTOR_SIDEBAR_TOGGLER, event => {
+    EventHandler.on(this._element, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => {
       event.preventDefault()
       const toggle = Manipulator.getDataAttribute(event.target, 'toggle')