Skip to content

Commit a5f5923

Browse files
lazabogdanlazabogdan
committed
refactor sidebar.js
- rename _breakpoints to _initBreakpoints - rename _breakpoint to _setBreakpoint - accept a callback for _updateScreen - update _layoutClasses to account for mixed sidebar sizes on different screen sizes - add _setBreakpointsFor method to bind/unbind breakpoints for a sidebar element - add _triggerBreakpointsFor method to manually trigger visible breakpoints for a sidebar element - add _breakpoints helper method to get all breakpoint sizes
1 parent 4dfa5db commit a5f5923

1 file changed

Lines changed: 118 additions & 64 deletions

File tree

‎src/js/sidebar.js‎

Lines changed: 118 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -61,12 +61,20 @@ class Sidebar {
6161
}
6262
}
6363

64+
/**
65+
* Get all breakpoint values
66+
* @return {Array}
67+
*/
68+
_breakpoints () {
69+
return Object.keys(this.BREAKPOINTS).map((v) => parseInt(v, 10))
70+
}
71+
6472
/**
6573
* Get the visible breakpoint sizes for a sidebar
6674
* @param {jQuery|String} sidebar A sidebar jQuery element or DOM selector String
6775
* @return {Array}
6876
*/
69-
_visibleBreakpoints (sidebar) {
77+
_visibleBreakpointsFor (sidebar) {
7078
const breakpoints = []
7179
this._visibleOptions(sidebar).map((v) => {
7280
forOwn(this.BREAKPOINTS, (values, key) => {
@@ -80,71 +88,101 @@ class Sidebar {
8088

8189
/**
8290
* Initialize breakpoint
83-
* @param {Boolean} off Remove the breakpoint
84-
* @param {Number} breakpoint The breakpoint size
85-
* @param {Function} cb The callback
91+
* @param {Boolean} off Remove the breakpoint
92+
* @param {Number} breakpoint The breakpoint size
93+
* @param {Function} cb The callback
8694
*/
87-
_breakpoint (off, breakpoint, cb) {
95+
_setBreakpoint (off, breakpoint, cb) {
8896
$(window)[off ? 'off' : 'on'](`enterBreakpoint${ breakpoint }`, cb.bind(this))
8997
}
9098

9199
/**
92-
* Initialize screen size breakpoints
93-
* @param {Boolean} off Remove the breakpoints
100+
* Set breakpoints for a sidebar element
101+
* @param {jQuery|String} sidebar A sidebar jQuery element or DOM selector String
102+
* @param {Boolean} off Remove the breakpoint
94103
*/
95-
_breakpoints (off) {
96-
const _values = Object.keys(this.BREAKPOINTS).map((v) => parseInt(v, 10))
104+
_setBreakpointsFor (sidebar, off) {
105+
sidebar = this._sidebar(sidebar)
97106

98-
if (typeof $.fn.setBreakpoints !== 'undefined') {
99-
$(window).setBreakpoints({ breakpoints: _values })
100-
}
107+
const breakpoints = this._breakpoints()
108+
const visibleBreakpoints = this._visibleBreakpointsFor(sidebar)
109+
110+
forOwn(this.BREAKPOINTS, (values, key, object) => {
111+
this._visibleOptions(sidebar).forEach((visible) => {
112+
if (values.indexOf(visible) !== -1) {
113+
114+
let isUp = visible.indexOf('up') !== -1
115+
let up = breakpoints.filter((v) => v > key)
116+
let keyInt = parseInt(key, 10)
117+
118+
if (keyInt === Math.max.apply(null, visibleBreakpoints)) {
119+
let down = breakpoints.filter((v) => v < key)
120+
down.filter((d) => {
121+
// exclude visibile breakpoints
122+
return visibleBreakpoints.indexOf(d) === -1
123+
})
124+
.forEach((breakpoint) => {
125+
this._setBreakpoint(off, breakpoint, () => this.hide(sidebar))
126+
})
127+
}
101128

102-
this._each((sidebar) => {
103-
const visibleBreakpoints = this._visibleBreakpoints(sidebar)
104-
105-
forOwn(this.BREAKPOINTS, (values, key, object) => {
106-
this._visibleOptions(sidebar).forEach((visible) => {
107-
if (values.indexOf(visible) !== -1) {
108-
109-
let isUp = visible.indexOf('up') !== -1
110-
let up = _values.filter((v) => v > key)
111-
let keyInt = parseInt(key, 10)
112-
113-
if (keyInt === Math.max.apply(null, visibleBreakpoints)) {
114-
let down = _values.filter((v) => v < key)
115-
down.filter((d) => {
116-
// exclude visibile breakpoints
117-
return visibleBreakpoints.indexOf(d) === -1
118-
})
119-
.forEach((breakpoint) => {
120-
this._breakpoint(off, breakpoint, () => this.hide(sidebar))
121-
})
122-
}
123-
124-
if (isUp) {
125-
up.unshift(key)
126-
up.filter((u) => {
127-
// exclude visibile breakpoints
128-
return visibleBreakpoints.indexOf(u) === -1
129-
})
130-
.forEach((breakpoint) => {
131-
this._breakpoint(off, breakpoint, () => this.show(sidebar, false))
132-
})
133-
}
134-
else {
135-
this._breakpoint(off, key, () => this.show(sidebar, false))
136-
up.filter((u) => {
137-
// exclude visibile breakpoints
138-
return visibleBreakpoints.indexOf(u) === -1
139-
})
140-
.forEach((breakpoint) => {
141-
this._breakpoint(off, breakpoint, () => this.hide(sidebar))
142-
})
143-
}
129+
if (isUp) {
130+
up.unshift(key)
131+
up.filter((u) => {
132+
// exclude visibile breakpoints
133+
return visibleBreakpoints.indexOf(u) === -1
134+
})
135+
.forEach((breakpoint) => {
136+
this._setBreakpoint(off, breakpoint, () => this.show(sidebar, false))
137+
})
138+
}
139+
else {
140+
this._setBreakpoint(off, key, () => this.show(sidebar, false))
141+
up.filter((u) => {
142+
// exclude visibile breakpoints
143+
return visibleBreakpoints.indexOf(u) === -1
144+
})
145+
.forEach((breakpoint) => {
146+
this._setBreakpoint(off, breakpoint, () => this.hide(sidebar))
147+
})
148+
}
149+
}
150+
})
151+
})
152+
}
153+
154+
/**
155+
* Trigger visible breakpoints for a sidebar element
156+
* @param {jQuery|String} sidebar A sidebar jQuery element or DOM selector String
157+
* @return {Promise}
158+
*/
159+
_triggerBreakpointsFor (sidebar) {
160+
sidebar = this._sidebar(sidebar)
161+
return new Promise((resolve) => {
162+
this._updateScreen(() => {
163+
const breakpoints = this._visibleBreakpointsFor(sidebar).sort((a, b) => b - a)
164+
for (var i = 0; i < breakpoints.length; i++) {
165+
const b = breakpoints[i]
166+
if (this.SCREEN_SIZE >= b) {
167+
$(window).trigger(`enterBreakpoint${ b }`)
168+
resolve()
169+
break
144170
}
145-
})
171+
}
146172
})
147173
})
174+
}
175+
176+
/**
177+
* Initialize breakpoints for all sidebars
178+
* @param {Boolean} off Remove the breakpoints
179+
*/
180+
_initBreakpoints (off) {
181+
if (typeof $.fn.setBreakpoints !== 'undefined' && !off) {
182+
$(window).setBreakpoints({ breakpoints: this._breakpoints() })
183+
}
184+
185+
this._each((sidebar) => this._setBreakpointsFor(sidebar, off))
148186
}
149187

150188
/**
@@ -164,22 +202,35 @@ class Sidebar {
164202
_layoutClasses (sidebar) {
165203
const options = this._options(sidebar)
166204
let classes = []
205+
206+
let breakpoints = []
207+
this._sizeOptions(sidebar).map((s) => {
208+
let breakpoint = s.match(/([a-zA-Z-]+)/ig)
209+
if (breakpoint) {
210+
breakpoint = breakpoint.pop().replace(/^\-/, '')
211+
breakpoints.push(breakpoint)
212+
}
213+
})
214+
167215
this._visibleOptions(sidebar).map((v) => {
168216
this._sizeOptions(sidebar).map((s) => {
169217
let className = `si-${ options.direction }${ s }`
170-
let matchVisible = s.match(/([a-zA-Z-]+)/ig)
171-
if (matchVisible) {
172-
matchVisible = matchVisible.pop().replace(/^\-/, '')
218+
let breakpoint = s.match(/([a-zA-Z-]+)/ig)
219+
if (breakpoint) {
220+
breakpoint = breakpoint.pop().replace(/^\-/, '')
173221
}
174-
if (s.indexOf(v) === -1 && !matchVisible) {
222+
if (s.indexOf(v) === -1 && !breakpoint) {
175223
className = `${ className }-${ v }`
176224
}
177-
else if (matchVisible && v.indexOf(matchVisible) === -1) {
178-
225+
if (breakpoints.indexOf(v) !== -1) {
226+
className = null
227+
}
228+
if (className) {
229+
classes.push(className)
179230
}
180-
classes.push(className)
181231
})
182232
})
233+
183234
return unique(classes)
184235
}
185236

@@ -343,11 +394,14 @@ class Sidebar {
343394
/**
344395
* Internal method to keep track of the screen size
345396
*/
346-
_updateScreen () {
397+
_updateScreen (cb) {
347398
clearTimeout(this._updateScreenDebounce)
348399
this._updateScreenDebounce = setTimeout(() => {
349400
this.SCREEN_SIZE = $(window).width()
350401
this.SCREEN_MD_UP = $(window).width() >= 768
402+
if (typeof cb === 'function') {
403+
cb()
404+
}
351405
}, this.UPDATE_SCREEN_DEBOUNCE)
352406
}
353407

@@ -356,7 +410,7 @@ class Sidebar {
356410
*/
357411
init () {
358412

359-
this._breakpoints()
413+
this._initBreakpoints()
360414

361415
// active toggle button
362416
$(this.EVENTS_CONTAINER).on('show.bl.sidebar', (e, options) => {

0 commit comments

Comments
 (0)