github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

add scroll buttons for navbar items

pull/3069/head
REJack 2020-10-03 15:12:06 +02:00
parent 98962aeab7
commit 113a477618
2 changed files with 55 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
build/js/IFrame.js
View File

@ -18,6 +18,8 @@ const JQUERY_NO_CONFLICT = $.fn[NAME]
const SELECTOR_DATA_TOGGLE = '[data-widget="iframe"]'
const SELECTOR_DATA_TOGGLE_CLOSE = '[data-widget="iframe-close"]'
const SELECTOR_DATA_TOGGLE_SCROLL_LEFT = '[data-widget="iframe-scrollleft"]'
const SELECTOR_DATA_TOGGLE_SCROLL_RIGHT = '[data-widget="iframe-scrollright"]'
const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
const SELECTOR_CONTENT_IFRAME = `${SELECTOR_CONTENT_WRAPPER} iframe`
const SELECTOR_TAB_NAV = `${SELECTOR_DATA_TOGGLE}.iframe-mode .nav`
@ -45,7 +47,9 @@ const Default = {
autoItemActive: true,
autoShowNewTab: true,
loadingScreen: true,
useNavbarItems: true
useNavbarItems: true,
scrollOffset: 40,
scrollBehaviorSwap: false
}
/**
@ -171,6 +175,11 @@ class IFrame {
}
}
_navScroll(offset) {
const leftPos = $(SELECTOR_TAB_NAVBAR_NAV).scrollLeft()
$(SELECTOR_TAB_NAVBAR_NAV).animate({ scrollLeft: (leftPos + offset) }, 250, 'linear')
}
_setupListeners() {
$(window).on('resize', () => {
setTimeout(() => {
@ -198,6 +207,49 @@ class IFrame {
e.preventDefault()
this.removeActiveTab()
})
let mousedown = false
let mousedownInterval = null
$(document).on('mousedown', SELECTOR_DATA_TOGGLE_SCROLL_LEFT, e => {
e.preventDefault()
clearInterval(mousedownInterval)
let { scrollOffset } = this._config
if (!this._config.scrollBehaviorSwap) {
scrollOffset = -scrollOffset
}
mousedown = true
this._navScroll(scrollOffset)
mousedownInterval = setInterval(() => {
this._navScroll(scrollOffset)
}, 250)
})
$(document).on('mousedown', SELECTOR_DATA_TOGGLE_SCROLL_RIGHT, e => {
e.preventDefault()
clearInterval(mousedownInterval)
let { scrollOffset } = this._config
if (this._config.scrollBehaviorSwap) {
scrollOffset = -scrollOffset
}
mousedown = true
this._navScroll(scrollOffset)
mousedownInterval = setInterval(() => {
this._navScroll(scrollOffset)
}, 250)
})
$(document).on('mouseup', () => {
if (mousedown) {
mousedown = false
clearInterval(mousedownInterval)
mousedownInterval = null
}
})
}
_setItemActive(href) {

2
iframe.html
View File

@ -744,7 +744,9 @@
<div class="content-wrapper iframe-mode" data-widget="iframe" data-loading-screen="750">
<div class="nav navbar navbar-expand-lg navbar-white navbar-light border-bottom p-0">
<a class="nav-link bg-danger" href="#" data-widget="iframe-close">Close</a>
<a class="nav-link bg-light" href="#" data-widget="iframe-scrollleft"><i class="fas fa-angle-double-left"></i></a>
<ul class="navbar-nav" role="tablist"></ul>
<a class="nav-link bg-light" href="#" data-widget="iframe-scrollright"><i class="fas fa-angle-double-right"></i></a>
</div>
<div class="tab-content">
<div class="tab-empty">