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

fixed IFrame jQuery API configuration & height calculation in iframe elements

pull/3572/head
REJack 2021-04-07 02:12:18 +02:00
parent 0a687224cf
commit 5b07bdd8e9
2 changed files with 39 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
build/js/IFrame.js
View File

@ -23,11 +23,11 @@ const SELECTOR_DATA_TOGGLE_SCROLL_RIGHT = '[data-widget="iframe-scrollright"]'
const SELECTOR_DATA_TOGGLE_FULLSCREEN = '[data-widget="iframe-fullscreen"]'
const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
const SELECTOR_CONTENT_IFRAME = `${SELECTOR_CONTENT_WRAPPER} iframe`
const SELECTOR_TAB_NAV = `${SELECTOR_DATA_TOGGLE}.iframe-mode .nav`
const SELECTOR_TAB_NAVBAR_NAV = `${SELECTOR_DATA_TOGGLE}.iframe-mode .navbar-nav`
const SELECTOR_TAB_NAV = `${SELECTOR_CONTENT_WRAPPER}.iframe-mode .nav`
const SELECTOR_TAB_NAVBAR_NAV = `${SELECTOR_CONTENT_WRAPPER}.iframe-mode .navbar-nav`
const SELECTOR_TAB_NAVBAR_NAV_ITEM = `${SELECTOR_TAB_NAVBAR_NAV} .nav-item`
const SELECTOR_TAB_NAVBAR_NAV_LINK = `${SELECTOR_TAB_NAVBAR_NAV} .nav-link`
const SELECTOR_TAB_CONTENT = `${SELECTOR_DATA_TOGGLE}.iframe-mode .tab-content`
const SELECTOR_TAB_CONTENT = `${SELECTOR_CONTENT_WRAPPER}.iframe-mode .tab-content`
const SELECTOR_TAB_EMPTY = `${SELECTOR_TAB_CONTENT} .tab-empty`
const SELECTOR_TAB_LOADING = `${SELECTOR_TAB_CONTENT} .tab-loading`
const SELECTOR_TAB_PANE = `${SELECTOR_TAB_CONTENT} .tab-pane`
@ -212,9 +212,9 @@ class IFrame {
if ($('body').hasClass(CLASS_NAME_FULLSCREEN_MODE)) {
$(`${SELECTOR_DATA_TOGGLE_FULLSCREEN} i`).removeClass(this._config.iconMinimize).addClass(this._config.iconMaximize)
$('body').removeClass(CLASS_NAME_FULLSCREEN_MODE)
$(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).height('auto')
$(SELECTOR_CONTENT_WRAPPER).height('auto')
$(SELECTOR_CONTENT_IFRAME).height('auto')
$(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).height('100%')
$(SELECTOR_CONTENT_WRAPPER).height('100%')
$(SELECTOR_CONTENT_IFRAME).height('100%')
} else {
$(`${SELECTOR_DATA_TOGGLE_FULLSCREEN} i`).removeClass(this._config.iconMaximize).addClass(this._config.iconMinimize)
$('body').addClass(CLASS_NAME_FULLSCREEN_MODE)
@ -227,9 +227,6 @@ class IFrame {
// Private
_init() {
if (window.frameElement && this._config.autoIframeMode) {
$('body').addClass(CLASS_NAME_IFRAME_MODE)
} else if ($(SELECTOR_CONTENT_WRAPPER).hasClass(CLASS_NAME_IFRAME_MODE)) {
if ($(SELECTOR_TAB_CONTENT).children().length > 2) {
const $el = $(`${SELECTOR_TAB_PANE}:first-child`)
$el.show()
@ -239,6 +236,11 @@ class IFrame {
this._setupListeners()
this._fixHeight(true)
}
_initFrameElement() {
if (window.frameElement && this._config.autoIframeMode) {
$('body').addClass(CLASS_NAME_IFRAME_MODE)
}
}
_navScroll(offset) {
@ -374,17 +376,24 @@ class IFrame {
// Static
static _jQueryInterface(operation, ...args) {
static _jQueryInterface(config) {
if ($(SELECTOR_DATA_TOGGLE).length > 0) {
let data = $(this).data(DATA_KEY)
const _options = $.extend({}, Default, $(this).data())
if (!data) {
data = new IFrame(this, _options)
$(this).data(DATA_KEY, data)
data = $(this).data()
}
if (typeof operation === 'string' && /createTab|openTabSidebar|switchTab|removeActiveTab/.test(operation)) {
data[operation](...args)
const _options = $.extend({}, Default, typeof config === 'object' ? config : data)
const plugin = new IFrame($(this), _options)
$(this).data(DATA_KEY, typeof config === 'object' ? config : data)
if (typeof config === 'string' && /createTab|openTabSidebar|switchTab|removeActiveTab/.test(config)) {
plugin[config]()
}
} else {
new IFrame($(this), Default)._initFrameElement()
}
}
}

7
build/js/Layout.js
View File

@ -33,6 +33,7 @@ const CLASS_NAME_SIDEBAR_FOCUSED = 'sidebar-focused'
const CLASS_NAME_LAYOUT_FIXED = 'layout-fixed'
const CLASS_NAME_CONTROL_SIDEBAR_SLIDE_OPEN = 'control-sidebar-slide-open'
const CLASS_NAME_CONTROL_SIDEBAR_OPEN = 'control-sidebar-open'
const CLASS_NAME_IFRAME_MODE = 'iframe-mode'
const Default = {
scrollbarTheme: 'os-theme-light',
@ -117,7 +118,11 @@ class Layout {
const $body = $('body')
const $selector = $(`${SELECTOR_LOGIN_BOX}, ${SELECTOR_REGISTER_BOX}`)
if ($selector.length === 0) {
if ($body.hasClass(CLASS_NAME_IFRAME_MODE)) {
$body.css('height', '100%')
$('.wrapper').css('height', '100%')
$('html').css('height', '100%')
} else if ($selector.length === 0) {
$body.css('height', 'auto')
$('html').css('height', 'auto')
} else {