add iframe fullscreen mode

build/js/IFrame.js

@@ -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,6 +297,12 @@ class IFrame {
   }
 
   _fixHeight(tabEmpty = false) {
+    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 {
       const contentWrapperHeight = parseFloat($(SELECTOR_CONTENT_WRAPPER).css('min-height'))
       const navbarHeight = $(SELECTOR_TAB_NAV).outerHeight()
       if (tabEmpty == true) {
@@ -283,6 +313,7 @@ class IFrame {
         $(SELECTOR_CONTENT_IFRAME).height(contentWrapperHeight - navbarHeight)
       }
     }
+  }
 
   // Static
 

build/scss/pages/_iframe.scss

@@ -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;
+    }
   }
 }

iframe.html

@@ -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">