mirror of https://github.com/ColorlibHQ/AdminLTE
rework methods
REJack
parent
15e92b4546
commit
a772df102d
|
|
@ -75,9 +75,9 @@ class IFrame {
|
||||||
this._config.onTabCreated(item)
|
this._config.onTabCreated(item)
|
||||||
}
|
}
|
||||||
|
|
||||||
createTab(title, link, autoOpen) {
|
createTab(title, link, uniqueName, autoOpen) {
|
||||||
const tabId = `panel-${link.replace('.html', '').replace('./', '').replaceAll('/', '-')}-${Math.floor(Math.random() * 1000)}`
|
const tabId = `panel-${uniqueName}-${Math.floor(Math.random() * 1000)}`
|
||||||
const navId = `tab-${link.replace('.html', '').replace('./', '').replaceAll('/', '-')}-${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>`
|
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)
|
$(SELECTOR_TAB_NAVBAR_NAV).append(newNavItem)
|
||||||
|
|
@ -86,13 +86,29 @@ class IFrame {
|
||||||
$(SELECTOR_TAB_CONTENT).append(newTabItem)
|
$(SELECTOR_TAB_CONTENT).append(newTabItem)
|
||||||
|
|
||||||
if (autoOpen) {
|
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}`))
|
this.onTabCreated($(`#${navId}`))
|
||||||
}
|
}
|
||||||
|
|
||||||
openTabSidebar(item) {
|
openTabSidebar(item, autoOpen = this._config.autoShowNewTab) {
|
||||||
let $item = $(item).clone()
|
let $item = $(item).clone()
|
||||||
if ($item.attr('href') === undefined) {
|
if ($item.attr('href') === undefined) {
|
||||||
$item = $(item).parent('a').clone()
|
$item = $(item).parent('a').clone()
|
||||||
|
|
@ -109,59 +125,26 @@ class IFrame {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
this.createTab(title, link, this._config.autoShowNewTab)
|
this.createTab(title, link, link.replace('.html', '').replace('./', '').replaceAll('/', '-'), autoOpen)
|
||||||
}
|
}
|
||||||
|
|
||||||
switchTab(item, loadingScreen = null) {
|
switchTab(item) {
|
||||||
$(SELECTOR_TAB_EMPTY).hide()
|
|
||||||
$(`${SELECTOR_TAB_NAVBAR_NAV} .active`).tab('dispose').removeClass('active')
|
|
||||||
this._fixHeight()
|
|
||||||
const $item = $(item)
|
const $item = $(item)
|
||||||
const tabId = $item.attr('href')
|
const tabId = $item.attr('href')
|
||||||
|
|
||||||
if (loadingScreen) {
|
$(SELECTOR_TAB_EMPTY).hide()
|
||||||
const $loadingScreen = $(SELECTOR_TAB_LOADING)
|
$(`${SELECTOR_TAB_NAVBAR_NAV} .active`).tab('dispose').removeClass('active')
|
||||||
$loadingScreen.fadeIn()
|
this._fixHeight()
|
||||||
$(`${tabId} iframe`).ready(() => {
|
|
||||||
if (typeof loadingScreen === 'number') {
|
|
||||||
setTimeout(() => {
|
|
||||||
$loadingScreen.fadeOut()
|
|
||||||
}, loadingScreen)
|
|
||||||
} else {
|
|
||||||
$loadingScreen.fadeOut()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
$item.tab('show')
|
$item.tab('show')
|
||||||
$item.parents('li').addClass('active')
|
$item.parents('li').addClass('active')
|
||||||
this.onTabChanged($item)
|
this.onTabChanged($item)
|
||||||
|
|
||||||
if (this._config.autoItemActive) {
|
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() {
|
removeActiveTab() {
|
||||||
$(`${SELECTOR_TAB_NAVBAR_NAV_ITEM}.active`).parent().remove()
|
$(`${SELECTOR_TAB_NAVBAR_NAV_ITEM}.active`).parent().remove()
|
||||||
$('.tab-pane.active').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) {
|
_fixHeight(tabEmpty = false) {
|
||||||
const contentWrapperHeight = parseFloat($(SELECTOR_CONTENT_WRAPPER).css('min-height'))
|
const contentWrapperHeight = parseFloat($(SELECTOR_CONTENT_WRAPPER).css('min-height'))
|
||||||
const navbarHeight = $(SELECTOR_TAB_NAV).outerHeight()
|
const navbarHeight = $(SELECTOR_TAB_NAV).outerHeight()
|
||||||
|
|
@ -225,7 +228,7 @@ class IFrame {
|
||||||
|
|
||||||
// Static
|
// Static
|
||||||
|
|
||||||
static _jQueryInterface(operation) {
|
static _jQueryInterface(operation, ...args) {
|
||||||
let data = $(this).data(DATA_KEY)
|
let data = $(this).data(DATA_KEY)
|
||||||
const _options = $.extend({}, Default, $(this).data())
|
const _options = $.extend({}, Default, $(this).data())
|
||||||
|
|
||||||
|
|
@ -234,8 +237,8 @@ class IFrame {
|
||||||
$(this).data(DATA_KEY, data)
|
$(this).data(DATA_KEY, data)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof operation === 'string' && operation.match(/openTabSidebar/)) {
|
if (typeof operation === 'string' && operation.match(/createTab|openTabSidebar|switchTab|removeActiveTab/)) {
|
||||||
data[operation]()
|
data[operation](...args)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue