further changes
- add empty tab - fix tab switching - add _fixHeight
This commit is contained in:
REJack
parent
a298bab35d
commit
b810326bb8
|
|
@ -20,8 +20,12 @@ const SELECTOR_DATA_TOGGLE = '[data-widget="iframe"]'
|
|||
const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
|
||||
const SELECTOR_CONTENT_IFRAME = `${SELECTOR_CONTENT_WRAPPER} iframe`
|
||||
const SELECTOR_TAB_NAVBAR_NAV = `${SELECTOR_DATA_TOGGLE}.iframe-mode .navbar-nav`
|
||||
const SELECTOR_TAB_NAVBAR_NAV_ITEM = `${SELECTOR_TAB_NAVBAR_NAV} .nav-item`
|
||||
const SELECTOR_NAV_LINK = '.nav-link[role="tab"]'
|
||||
const SELECTOR_TAB_NAVBAR_NAV_LINK = `${SELECTOR_TAB_NAVBAR_NAV} ${SELECTOR_NAV_LINK}`
|
||||
const SELECTOR_TAB_CONTENT = `${SELECTOR_DATA_TOGGLE}.iframe-mode .tab-content`
|
||||
const SELECTOR_SIDEBAR_MENU_ITEM = '.main-sidebar .nav-item a.nav-link'
|
||||
const SELECTOR_TAB_EMPTY = `${SELECTOR_TAB_CONTENT} .tab-empty`
|
||||
const SELECTOR_SIDEBAR_MENU_ITEM = '.main-sidebar .nav-item > a.nav-link'
|
||||
const CLASS_NAME_IFRAME_MODE = 'iframe-mode'
|
||||
|
||||
const Default = {
|
||||
|
|
@ -60,21 +64,23 @@ class IFrame {
|
|||
const tabId = `panel-${link.replace('.html', '').replace('./', '').replace('/', '-')}-${Math.floor(Math.random() * 1000)}`
|
||||
const navId = `tab-${link.replace('.html', '').replace('./', '').replace('/', '-')}-${Math.floor(Math.random() * 1000)}`
|
||||
|
||||
const newNavItem = `<li class="nav-item" role="presentation"><a class="nav-link active" id="${navId}" data-toggle="tab" href="#${tabId}" role="tab" aria-controls="${tabId}" aria-selected="true">${title}</a></li>`
|
||||
const newNavItem = `<li class="nav-item" role="presentation"><a class="nav-link" data-toggle="row" id="${navId}" href="#${tabId}" role="tab" aria-controls="${tabId}" aria-selected="false">${title}</a></li>`
|
||||
$(SELECTOR_TAB_NAVBAR_NAV).append(newNavItem)
|
||||
|
||||
const newTabItem = `<div class="tab-pane fade" id="${tabId}" role="tabpanel" aria-labelledby="${navId}"><iframe src="${link}"></iframe></div>`
|
||||
$(SELECTOR_TAB_CONTENT).append(newTabItem)
|
||||
|
||||
// eslint-disable-next-line no-console
|
||||
console.log($(SELECTOR_TAB_CONTENT))
|
||||
}
|
||||
|
||||
openTabSidebar(item) {
|
||||
const title = $(item).find('p').text()
|
||||
const link = $(item).attr('href')
|
||||
$(`${SELECTOR_TAB_NAVBAR_NAV} .nav-link[role="tab"]`).tab('dispose')
|
||||
|
||||
this.createTab(title, link)
|
||||
|
||||
// eslint-disable-next-line no-console
|
||||
console.log($(SELECTOR_TAB_NAVBAR_NAV))
|
||||
$(`${SELECTOR_TAB_NAVBAR_NAV} ${SELECTOR_NAV_LINK}`).tab()
|
||||
}
|
||||
|
||||
// Private
|
||||
|
|
@ -82,17 +88,45 @@ class IFrame {
|
|||
_init() {
|
||||
if ($(SELECTOR_CONTENT_WRAPPER).hasClass(CLASS_NAME_IFRAME_MODE)) {
|
||||
this._setupListeners()
|
||||
$(SELECTOR_TAB_NAVBAR_NAV)
|
||||
|
||||
$(SELECTOR_CONTENT_IFRAME).height($(SELECTOR_CONTENT_WRAPPER).height())
|
||||
this._fixHeight(true)
|
||||
}
|
||||
}
|
||||
|
||||
_setupListeners() {
|
||||
$(window).on('resize', () => {
|
||||
setTimeout(() => {
|
||||
this._fixHeight()
|
||||
}, 1)
|
||||
})
|
||||
$(document).on('click', SELECTOR_SIDEBAR_MENU_ITEM, e => {
|
||||
e.preventDefault()
|
||||
// eslint-disable-next-line no-console
|
||||
console.log($(e.target))
|
||||
this.openTabSidebar(e.target)
|
||||
})
|
||||
$(document).on('click', SELECTOR_TAB_NAVBAR_NAV_ITEM, e => {
|
||||
e.preventDefault()
|
||||
$(SELECTOR_TAB_EMPTY).hide()
|
||||
$(`${SELECTOR_TAB_NAVBAR_NAV} .active`).removeClass('active')
|
||||
$(SELECTOR_TAB_NAVBAR_NAV_LINK).tab('dispose')
|
||||
this._fixHeight()
|
||||
$(e.target).tab('show')
|
||||
$(e.target).parents('li').addClass('active')
|
||||
})
|
||||
}
|
||||
|
||||
_fixHeight(tabEmpty = false) {
|
||||
const contentWrapperHeight = parseFloat($(SELECTOR_CONTENT_WRAPPER).css('min-height'))
|
||||
const panelOffset = $('body').data('panel-auto-height')
|
||||
if (tabEmpty == true) {
|
||||
setTimeout(() => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(parseFloat(contentWrapperHeight + (panelOffset < 0 ? Math.abs(panelOffset) : panelOffset)))
|
||||
$(SELECTOR_TAB_EMPTY).height(contentWrapperHeight)
|
||||
}, 50)
|
||||
} else {
|
||||
$(SELECTOR_CONTENT_IFRAME).height(contentWrapperHeight)
|
||||
}
|
||||
}
|
||||
|
||||
// Static
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ body.iframe-mode {
|
|||
}
|
||||
.content-wrapper {
|
||||
margin-left: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
.main-header,
|
||||
.main-footer {
|
||||
|
|
@ -15,10 +17,21 @@ body.iframe-mode {
|
|||
height: 100%;
|
||||
|
||||
&.iframe-mode {
|
||||
.tab-empty {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.content-wrapper {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<!-- overlayScrollbars -->
|
||||
<link rel="stylesheet" href="plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
|
||||
</head>
|
||||
<body class="hold-transition sidebar-mini layout-fixed">
|
||||
<body class="hold-transition sidebar-mini layout-fixed" data-panel-auto-height="-48">
|
||||
<div class="wrapper">
|
||||
|
||||
<!-- Navbar -->
|
||||
|
|
@ -807,14 +807,11 @@
|
|||
<li class="nav-item" role="presentation">
|
||||
<a class="nav-link bg-danger" href="#" class="iframe-close">Close</a>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<a class="nav-link active" id="index-tab" data-toggle="tab" href="#index" role="tab" aria-controls="index" aria-selected="true">Dashboard v1</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="index-tab">
|
||||
<iframe src="index.html"></iframe>
|
||||
<div class="tab-empty">
|
||||
<h2 class="display-4">No tab selected!</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue