add iframe fullscreen mode
This commit is contained in:
parent
113a477618
commit
865fc053fa
|
@ -20,6 +20,7 @@ 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_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`
|
||||
|
@ -32,6 +33,7 @@ const SELECTOR_SIDEBAR_MENU_ITEM = '.main-sidebar .nav-item > a.nav-link'
|
|||
const SELECTOR_HEADER_MENU_ITEM = '.main-header .nav-item a.nav-link'
|
||||
const SELECTOR_HEADER_DROPDOWN_ITEM = '.main-header a.dropdown-item'
|
||||
const CLASS_NAME_IFRAME_MODE = 'iframe-mode'
|
||||
const CLASS_NAME_FULLSCREEN_MODE = 'fullscreen-mode'
|
||||
|
||||
const Default = {
|
||||
onTabClick(item) {
|
||||
|
@ -49,7 +51,9 @@ const Default = {
|
|||
loadingScreen: true,
|
||||
useNavbarItems: true,
|
||||
scrollOffset: 40,
|
||||
scrollBehaviorSwap: false
|
||||
scrollBehaviorSwap: false,
|
||||
iconMaximize: 'fa-expand',
|
||||
iconMinimize: 'fa-compress'
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -164,6 +168,22 @@ class IFrame {
|
|||
}
|
||||
}
|
||||
|
||||
toggleFullscreen() {
|
||||
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')
|
||||
} else {
|
||||
$(`${SELECTOR_DATA_TOGGLE_FULLSCREEN} i`).removeClass(this._config.iconMaximize).addClass(this._config.iconMinimize)
|
||||
$('body').addClass(CLASS_NAME_FULLSCREEN_MODE)
|
||||
}
|
||||
|
||||
$(window).trigger('resize')
|
||||
this._fixHeight(true)
|
||||
}
|
||||
|
||||
// Private
|
||||
|
||||
_init() {
|
||||
|
@ -207,6 +227,10 @@ class IFrame {
|
|||
e.preventDefault()
|
||||
this.removeActiveTab()
|
||||
})
|
||||
$(document).on('click', SELECTOR_DATA_TOGGLE_FULLSCREEN, e => {
|
||||
e.preventDefault()
|
||||
this.toggleFullscreen()
|
||||
})
|
||||
let mousedown = false
|
||||
let mousedownInterval = null
|
||||
$(document).on('mousedown', SELECTOR_DATA_TOGGLE_SCROLL_LEFT, e => {
|
||||
|
@ -273,14 +297,21 @@ class IFrame {
|
|||
}
|
||||
|
||||
_fixHeight(tabEmpty = false) {
|
||||
const contentWrapperHeight = parseFloat($(SELECTOR_CONTENT_WRAPPER).css('min-height'))
|
||||
const navbarHeight = $(SELECTOR_TAB_NAV).outerHeight()
|
||||
if (tabEmpty == true) {
|
||||
setTimeout(() => {
|
||||
$(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).height(contentWrapperHeight - navbarHeight)
|
||||
}, 50)
|
||||
if ($('body').hasClass(CLASS_NAME_FULLSCREEN_MODE)) {
|
||||
const windowHeight = $(window).height()
|
||||
$(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).height(windowHeight)
|
||||
$(SELECTOR_CONTENT_WRAPPER).height(windowHeight)
|
||||
$(SELECTOR_CONTENT_IFRAME).height(windowHeight)
|
||||
} else {
|
||||
$(SELECTOR_CONTENT_IFRAME).height(contentWrapperHeight - navbarHeight)
|
||||
const contentWrapperHeight = parseFloat($(SELECTOR_CONTENT_WRAPPER).css('min-height'))
|
||||
const navbarHeight = $(SELECTOR_TAB_NAV).outerHeight()
|
||||
if (tabEmpty == true) {
|
||||
setTimeout(() => {
|
||||
$(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).height(contentWrapperHeight - navbarHeight)
|
||||
}, 50)
|
||||
} else {
|
||||
$(SELECTOR_CONTENT_IFRAME).height(contentWrapperHeight - navbarHeight)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -13,6 +13,10 @@ body.iframe-mode {
|
|||
}
|
||||
}
|
||||
|
||||
body.fullscreen-mode {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
height: 100%;
|
||||
|
||||
|
@ -60,5 +64,17 @@ body.iframe-mode {
|
|||
padding-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
body.fullscreen-mode & {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin-left: 0 !important;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
z-index: $zindex-main-sidebar + 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -747,6 +747,7 @@
|
|||
<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>
|
||||
<a class="nav-link bg-light" href="#" data-widget="iframe-fullscreen"><i class="fas fa-expand"></i></a>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-empty">
|
||||
|
|
Loading…
Reference in a new issue