Skip to content

Commit 6231c4d

Browse files
lazabogdanlazabogdan
committed
Sass
- remove .bootstrap-layout class - remove .sidebar-block class - add .layout-content padding bottom - add .bg-dark-{1..9} and .bg-light-{1..9} utility classes - add sidebar spacing and border utility classes - add $sidebar-size-{1..3} variables - rename $sidebar-spacing-horizontal variable to $sidebar-spacing-x - rename $sidebar-spacing-vertical variable to $sidebar-spacing-y - remove $sidebar-brand-padding variable - add .sidebar-brand-border and .sidebar-brand-bg classes - remove .sidebar-heading padding - apply padding left, padding right and margin-bottom to any element which is a direct child of the .sidebar container - fix sidebar toggle bar - remove sidebar offsets - remove sidebar sum sizes - rename .si-si-#{$index}#{$breakpoint} classes to .sidebar-size-#{$index}#{$breakpoint} - rename .si-#{$d}#{$index}#{$breakpoint} classes to .layout-sidebar-#{$d}#{$index}#{$breakpoint} - rename .si-#{$d}-#{$percent}pc#{$breakpoint} classes to .layout-sidebar-#{$d}-#{$percent}pc#{$breakpoint} - rename .si-si-#{$percent}pc#{$breakpoint} classes to .sidebar-size-#{$percent}pc#{$breakpoint} JavaScript - refactor js/sidebar - refactor js/scrollable - add js/config - add js/sidebar-toggle - add js/sidebar-menu-collapse
1 parent 531f14c commit 6231c4d

30 files changed

Lines changed: 671 additions & 479 deletions

‎package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,9 @@
3535
},
3636
"dependencies": {
3737
"bootstrap": "4.0.0-alpha.2",
38-
"breakpoints": "github:lazabogdan/breakpoints",
38+
"breakpoints.js": "^1.0.0",
3939
"mout": "^0.11.1",
40-
"sass-md-colors": "^1.0.0",
41-
"simplebar": "github:grsmto/simplebar"
40+
"sass-md-colors": "^1.0.0"
4241
},
4342
"keywords": [
4443
"bootstrap",

‎src/index.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,19 @@ import './sass/style'
33

44
// COMPONENTS
55
import Sidebar from './js/sidebar'
6+
import SidebarToggle from './js/sidebar-toggle'
7+
import SidebarMenuCollapse from './js/sidebar-menu-collapse'
68
import Scrollable from './js/scrollable'
79

810
// LIBRARY
911
const BootstrapLayout = {
10-
Sidebar: new Sidebar(),
12+
Sidebar,
13+
SidebarToggle,
14+
SidebarMenuCollapse,
1115
Scrollable
1216
}
1317

1418
// EXPORT ES6
1519
export default BootstrapLayout
1620

17-
// EXPORT ES5
1821
module.exports = exports.default

‎src/js/config.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/* eslint spaced-comment: 0 */
2+
3+
////////////////////
4+
// SIDEBAR TOGGLE //
5+
////////////////////
6+
7+
// DOM selectors
8+
export const SIDEBAR_TOGGLE_SELECTOR = '[data-toggle="sidebar"]'
9+
10+
////////////////
11+
// SCROLLABLE //
12+
////////////////
13+
14+
// DOM selectors
15+
export const SCROLLABLE_SELECTOR = '[data-scrollable]'
16+
17+
// DATA API
18+
export const SCROLLABLE_DATA_KEY = 'bl.scrollable'
19+
export const SCROLLABLE_DATA = {
20+
scrollTimer: `scrollTimer.${ SCROLLABLE_DATA_KEY }`
21+
}
22+
23+
// EVENTS
24+
export const SCROLLABLE_EVENTS = {
25+
scroll: `scroll.${ SCROLLABLE_DATA_KEY }`,
26+
scrollEnd: `scrollEnd.${ SCROLLABLE_DATA_KEY }`,
27+
scrollTo: `scrollTo.${ SCROLLABLE_DATA_KEY }`
28+
}
29+
30+
////////////
31+
// LAYOUT //
32+
////////////
33+
34+
// Class names
35+
export const LAYOUT_SIDEBAR_CLASS = 'layout-sidebar'
36+
37+
// DOM selectors
38+
export const LAYOUT_CONTAINER_SELECTOR = '.layout-container'
39+
40+
/////////////
41+
// SIDEBAR //
42+
/////////////
43+
44+
export const SIDEBAR_VISIBLE_CLASS = 'sidebar-visible'
45+
export const SIDEBAR_SIZE_CLASS = 'sidebar-size'
46+
47+
// DOM selectors
48+
export const SIDEBAR_SELECTOR = '.sidebar'
49+
50+
// DATA API
51+
export const SIDEBAR_DATA_KEY = 'bl.sidebar'
52+
53+
// EVENTS
54+
export const SIDEBAR_EVENTS = {
55+
show: `show.${ SIDEBAR_DATA_KEY }`,
56+
shown: `shown.${ SIDEBAR_DATA_KEY }`,
57+
hide: `hide.${ SIDEBAR_DATA_KEY }`,
58+
hidden: `hidden.${ SIDEBAR_DATA_KEY }`
59+
}
60+
61+
// SIDEBAR MENU
62+
63+
// DOM selectors
64+
export const SIDEBAR_MENU_SELECTORS = {
65+
menu: '.sidebar-menu',
66+
item: '.sidebar-menu-item',
67+
button: '.sidebar-menu-button'
68+
}

‎src/js/scrollable.js‎

Lines changed: 42 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,63 @@
1-
import 'simplebar/src/simplebar.js'
1+
import {
2+
SCROLLABLE_SELECTOR,
3+
SCROLLABLE_DATA_KEY,
4+
SCROLLABLE_DATA,
5+
SCROLLABLE_EVENTS
6+
} from './config'
27

3-
export default function () {
8+
class Scrollable {
49

5-
$.fn.blScrollable = function () {
10+
constructor () {
11+
jQuery(SCROLLABLE_SELECTOR).each(el => this.init(jQuery(el)))
12+
}
13+
14+
init (el) {
615

7-
if (!this.length) return
8-
if (this.length > 1) {
9-
this.each(function () {
10-
$(this).blScrollable()
11-
})
16+
if (jQuery.fn.simplebar === undefined) {
17+
return
18+
}
19+
20+
if (el.data(SCROLLABLE_DATA_KEY)) {
1221
return
1322
}
1423

15-
var el = this
24+
el.data(SCROLLABLE_DATA_KEY, true)
1625
el.addClass('simplebar')
17-
18-
if (el.data('horizontal')) {
19-
el.addClass('horizontal')
26+
if (el.data('scrollable-direction') === 'horizontal') {
27+
el.addClass('simplebar-horizontal')
2028
}
29+
el.simplebar()
2130

22-
if ($.fn.simplebar === undefined) {
23-
el.css('overflow-y', 'scroll')
24-
return
25-
}
31+
el.simplebar().on('scroll', (e) => {
32+
const scrollable = jQuery(e.target)
33+
const scrollTop = scrollable.simplebar('getScrollElement').scrollTop()
34+
scrollable.trigger(SCROLLABLE_EVENTS.scroll, [scrollTop])
2635

27-
el.simplebar()
28-
el.simplebar().on('scroll', function () {
29-
var scrollable = $(this)
30-
let scrollTop = scrollable.simplebar('getScrollElement').scrollTop()
31-
$('body').trigger('scrolling.bl.scrollable', [scrollTop])
32-
clearTimeout(this.scrollTimer)
33-
this.scrollTimer = setTimeout(function () {
36+
clearTimeout(scrollable.data(SCROLLABLE_DATA.scrollTimer))
37+
scrollable.data(SCROLLABLE_DATA.scrollTimer, setTimeout(() => {
3438
let scrollTop = scrollable.simplebar('getScrollElement').scrollTop()
35-
$('body').trigger('end-scrolling.bl.scrollable', [scrollTop])
36-
}, 100)
39+
scrollable.trigger(SCROLLABLE_EVENTS.scrollEnd, [scrollTop])
40+
}, 100))
3741
})
38-
el.on('scroll-to.bl.scrollable', (id) => {
39-
let toElement = document.querySelector(id)
42+
43+
el.on(SCROLLABLE_EVENTS.scrollTo, (id) => {
44+
const toElement = document.querySelector(id)
4045
if (toElement) {
4146
el.simplebar('getScrollElement').animate({
4247
scrollTop: toElement.offsetTop
4348
})
4449
}
4550
})
4651
}
47-
48-
$('[data-scrollable]').blScrollable()
52+
53+
destroy (el) {
54+
el.off([SCROLLABLE_EVENTS.scroll, SCROLLABLE_EVENTS.scrollTo, SCROLLABLE_EVENTS.scrollEnd].join(' '))
55+
el.removeData([SCROLLABLE_DATA.scrollTimer, SCROLLABLE_DATA_KEY])
56+
}
4957
}
5058

51-
module.exports = exports.default
59+
// export instance
60+
export default new Scrollable()
61+
62+
// export class
63+
export { Scrollable }

‎src/js/sidebar-menu-collapse.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import Sidebar from './sidebar'
2+
import { SIDEBAR_MENU_SELECTORS } from './config'
3+
4+
class SidebarMenuCollapse {
5+
6+
constructor (sidebar) {
7+
this.sidebarInst = Sidebar
8+
this.sidebar = this.sidebarInst._sidebar(sidebar)
9+
10+
// initialize
11+
if (this.sidebar) {
12+
this.sidebar.find(SIDEBAR_MENU_SELECTORS.button).on('click', this._onCollapse)
13+
}
14+
}
15+
16+
_onCollapse (e) {
17+
const button = jQuery(e.currentTarget)
18+
if (button.next('ul').html()) {
19+
e.preventDefault()
20+
const parent = button.parent()
21+
// Toggle Open Classes
22+
if (parent.hasClass('open')) {
23+
parent.removeClass('open')
24+
}
25+
else {
26+
const nav = button.closest(SIDEBAR_MENU_SELECTORS.menu)
27+
const submenuOpen = nav.find(`${ SIDEBAR_MENU_SELECTORS.item }.open`)
28+
// Close Parent Open Submenus
29+
submenuOpen.removeClass('open')
30+
parent.addClass('open')
31+
}
32+
}
33+
}
34+
35+
destroy () {
36+
if (this.sidebar) {
37+
this.sidebar.find(SIDEBAR_MENU_SELECTORS.button).off('click', this._onCollapse)
38+
}
39+
}
40+
}
41+
42+
export default SidebarMenuCollapse

‎src/js/sidebar-toggle.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Sidebar } from './sidebar'
2+
import { SIDEBAR_TOGGLE_SELECTOR } from './config'
3+
4+
class SidebarToggle {
5+
6+
constructor () {
7+
this.sidebar = new Sidebar()
8+
this.init()
9+
}
10+
11+
init () {
12+
jQuery(SIDEBAR_TOGGLE_SELECTOR).on('click', e => this._onClick(e))
13+
}
14+
15+
_onClick (e) {
16+
e.stopPropagation()
17+
const sidebar = jQuery(e.currentTarget).data('target')
18+
this.sidebar.toggle(sidebar)
19+
}
20+
21+
destroy () {
22+
jQuery(SIDEBAR_TOGGLE_SELECTOR).off('click', e => this._onClick(e))
23+
}
24+
}
25+
26+
// export instance
27+
export default new SidebarToggle()
28+
29+
// export class
30+
export { SidebarToggle }

0 commit comments

Comments
 (0)