rework methods

pull/3069/head
REJack 2020-09-30 09:04:29 +02:00
parent 15e92b4546
commit a772df102d
1 changed files with 50 additions and 47 deletions

View File

@ -75,9 +75,9 @@ class IFrame {
this._config.onTabCreated(item)
}
createTab(title, link, autoOpen) {
const tabId = `panel-${link.replace('.html', '').replace('./', '').replaceAll('/', '-')}-${Math.floor(Math.random() * 1000)}`
const navId = `tab-${link.replace('.html', '').replace('./', '').replaceAll('/', '-')}-${Math.floor(Math.random() * 1000)}`
createTab(title, link, uniqueName, autoOpen) {
const tabId = `panel-${uniqueName}-${Math.floor(Math.random() * 1000)}`
const navId = `tab-${uniqueName}-${Math.floor(Math.random() * 1000)}`
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)
@ -86,13 +86,29 @@ class IFrame {
$(SELECTOR_TAB_CONTENT).append(newTabItem)
if (autoOpen) {
this.switchTab(`#${navId}`, this._config.loadingScreen)
if (this._config.loadingScreen) {
const $loadingScreen = $(SELECTOR_TAB_LOADING)
$loadingScreen.fadeIn()
$(`${tabId} iframe`).ready(() => {
if (typeof this._config.loadingScreen === 'number') {
this.switchTab(`#${navId}`, this._config.loadingScreen)
setTimeout(() => {
$loadingScreen.fadeOut()
}, this._config.loadingScreen)
} else {
this.switchTab(`#${navId}`, this._config.loadingScreen)
$loadingScreen.fadeOut()
}
})
} else {
this.switchTab(`#${navId}`)
}
}
this.onTabCreated($(`#${navId}`))
}
openTabSidebar(item) {
openTabSidebar(item, autoOpen = this._config.autoShowNewTab) {
let $item = $(item).clone()
if ($item.attr('href') === undefined) {
$item = $(item).parent('a').clone()
@ -109,59 +125,26 @@ class IFrame {
return
}
this.createTab(title, link, this._config.autoShowNewTab)
this.createTab(title, link, link.replace('.html', '').replace('./', '').replaceAll('/', '-'), autoOpen)
}
switchTab(item, loadingScreen = null) {
$(SELECTOR_TAB_EMPTY).hide()
$(`${SELECTOR_TAB_NAVBAR_NAV} .active`).tab('dispose').removeClass('active')
this._fixHeight()
switchTab(item) {
const $item = $(item)
const tabId = $item.attr('href')
if (loadingScreen) {
const $loadingScreen = $(SELECTOR_TAB_LOADING)
$loadingScreen.fadeIn()
$(`${tabId} iframe`).ready(() => {
if (typeof loadingScreen === 'number') {
setTimeout(() => {
$loadingScreen.fadeOut()
}, loadingScreen)
} else {
$loadingScreen.fadeOut()
}
})
}
$(SELECTOR_TAB_EMPTY).hide()
$(`${SELECTOR_TAB_NAVBAR_NAV} .active`).tab('dispose').removeClass('active')
this._fixHeight()
$item.tab('show')
$item.parents('li').addClass('active')
this.onTabChanged($item)
if (this._config.autoItemActive) {
this.setItemActive($(`${tabId} iframe`).attr('src'))
this._setItemActive($(`${tabId} iframe`).attr('src'))
}
}
setItemActive(href) {
$(`${SELECTOR_SIDEBAR_MENU_ITEM}, ${SELECTOR_HEADER_DROPDOWN_ITEM}`).removeClass('active')
$(SELECTOR_HEADER_MENU_ITEM).parent().removeClass('active')
const $headerMenuItem = $(`${SELECTOR_HEADER_MENU_ITEM}[href$="${href}"]`)
const $headerDropdownItem = $(`${SELECTOR_HEADER_DROPDOWN_ITEM}[href$="${href}"]`)
const $sidebarMenuItem = $(`${SELECTOR_SIDEBAR_MENU_ITEM}[href$="${href}"]`)
$headerMenuItem.each((i, e) => {
$(e).parent().addClass('active')
})
$headerDropdownItem.each((i, e) => {
$(e).addClass('active')
})
$sidebarMenuItem.each((i, e) => {
$(e).addClass('active')
$(e).parents('.nav-treeview').prevAll('.nav-link').addClass('active')
})
}
removeActiveTab() {
$(`${SELECTOR_TAB_NAVBAR_NAV_ITEM}.active`).parent().remove()
$('.tab-pane.active').remove()
@ -211,6 +194,26 @@ class IFrame {
})
}
_setItemActive(href) {
$(`${SELECTOR_SIDEBAR_MENU_ITEM}, ${SELECTOR_HEADER_DROPDOWN_ITEM}`).removeClass('active')
$(SELECTOR_HEADER_MENU_ITEM).parent().removeClass('active')
const $headerMenuItem = $(`${SELECTOR_HEADER_MENU_ITEM}[href$="${href}"]`)
const $headerDropdownItem = $(`${SELECTOR_HEADER_DROPDOWN_ITEM}[href$="${href}"]`)
const $sidebarMenuItem = $(`${SELECTOR_SIDEBAR_MENU_ITEM}[href$="${href}"]`)
$headerMenuItem.each((i, e) => {
$(e).parent().addClass('active')
})
$headerDropdownItem.each((i, e) => {
$(e).addClass('active')
})
$sidebarMenuItem.each((i, e) => {
$(e).addClass('active')
$(e).parents('.nav-treeview').prevAll('.nav-link').addClass('active')
})
}
_fixHeight(tabEmpty = false) {
const contentWrapperHeight = parseFloat($(SELECTOR_CONTENT_WRAPPER).css('min-height'))
const navbarHeight = $(SELECTOR_TAB_NAV).outerHeight()
@ -225,7 +228,7 @@ class IFrame {
// Static
static _jQueryInterface(operation) {
static _jQueryInterface(operation, ...args) {
let data = $(this).data(DATA_KEY)
const _options = $.extend({}, Default, $(this).data())
@ -234,8 +237,8 @@ class IFrame {
$(this).data(DATA_KEY, data)
}
if (typeof operation === 'string' && operation.match(/openTabSidebar/)) {
data[operation]()
if (typeof operation === 'string' && operation.match(/createTab|openTabSidebar|switchTab|removeActiveTab/)) {
data[operation](...args)
}
}
}