further changes

- add empty tab
- fix tab switching
- add _fixHeight

build/js/IFrame.js

@@ -20,8 +20,12 @@ const SELECTOR_DATA_TOGGLE = '[data-widget="iframe"]'
 const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
 const SELECTOR_CONTENT_IFRAME = `${SELECTOR_CONTENT_WRAPPER} iframe`
 const SELECTOR_TAB_NAVBAR_NAV = `${SELECTOR_DATA_TOGGLE}.iframe-mode .navbar-nav`
+const SELECTOR_TAB_NAVBAR_NAV_ITEM = `${SELECTOR_TAB_NAVBAR_NAV} .nav-item`
+const SELECTOR_NAV_LINK = '.nav-link[role="tab"]'
+const SELECTOR_TAB_NAVBAR_NAV_LINK = `${SELECTOR_TAB_NAVBAR_NAV} ${SELECTOR_NAV_LINK}`
 const SELECTOR_TAB_CONTENT = `${SELECTOR_DATA_TOGGLE}.iframe-mode .tab-content`
-const SELECTOR_SIDEBAR_MENU_ITEM = '.main-sidebar .nav-item a.nav-link'
+const SELECTOR_TAB_EMPTY = `${SELECTOR_TAB_CONTENT} .tab-empty`
+const SELECTOR_SIDEBAR_MENU_ITEM = '.main-sidebar .nav-item > a.nav-link'
 const CLASS_NAME_IFRAME_MODE = 'iframe-mode'
 
 const Default = {
@@ -60,21 +64,23 @@ class IFrame {
     const tabId = `panel-${link.replace('.html', '').replace('./', '').replace('/', '-')}-${Math.floor(Math.random() * 1000)}`
     const navId = `tab-${link.replace('.html', '').replace('./', '').replace('/', '-')}-${Math.floor(Math.random() * 1000)}`
 
-    const newNavItem = `<li class="nav-item" role="presentation"><a class="nav-link active" id="${navId}" data-toggle="tab" href="#${tabId}" role="tab" aria-controls="${tabId}" aria-selected="true">${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)
 
     const newTabItem = `<div class="tab-pane fade" id="${tabId}" role="tabpanel" aria-labelledby="${navId}"><iframe src="${link}"></iframe></div>`
     $(SELECTOR_TAB_CONTENT).append(newTabItem)
-
-    // eslint-disable-next-line no-console
-    console.log($(SELECTOR_TAB_CONTENT))
   }
 
   openTabSidebar(item) {
     const title = $(item).find('p').text()
     const link = $(item).attr('href')
+    $(`${SELECTOR_TAB_NAVBAR_NAV} .nav-link[role="tab"]`).tab('dispose')
 
     this.createTab(title, link)
+
+    // eslint-disable-next-line no-console
+    console.log($(SELECTOR_TAB_NAVBAR_NAV))
+    $(`${SELECTOR_TAB_NAVBAR_NAV} ${SELECTOR_NAV_LINK}`).tab()
   }
 
   // Private
@@ -82,17 +88,45 @@ class IFrame {
   _init() {
     if ($(SELECTOR_CONTENT_WRAPPER).hasClass(CLASS_NAME_IFRAME_MODE)) {
       this._setupListeners()
-      $(SELECTOR_TAB_NAVBAR_NAV)
-
-      $(SELECTOR_CONTENT_IFRAME).height($(SELECTOR_CONTENT_WRAPPER).height())
+      this._fixHeight(true)
     }
   }
 
   _setupListeners() {
+    $(window).on('resize', () => {
+      setTimeout(() => {
+        this._fixHeight()
+      }, 1)
+    })
     $(document).on('click', SELECTOR_SIDEBAR_MENU_ITEM, e => {
       e.preventDefault()
+      // eslint-disable-next-line no-console
+      console.log($(e.target))
       this.openTabSidebar(e.target)
     })
+    $(document).on('click', SELECTOR_TAB_NAVBAR_NAV_ITEM, e => {
+      e.preventDefault()
+      $(SELECTOR_TAB_EMPTY).hide()
+      $(`${SELECTOR_TAB_NAVBAR_NAV} .active`).removeClass('active')
+      $(SELECTOR_TAB_NAVBAR_NAV_LINK).tab('dispose')
+      this._fixHeight()
+      $(e.target).tab('show')
+      $(e.target).parents('li').addClass('active')
+    })
+  }
+
+  _fixHeight(tabEmpty = false) {
+    const contentWrapperHeight = parseFloat($(SELECTOR_CONTENT_WRAPPER).css('min-height'))
+    const panelOffset = $('body').data('panel-auto-height')
+    if (tabEmpty == true) {
+      setTimeout(() => {
+        // eslint-disable-next-line no-console
+        console.log(parseFloat(contentWrapperHeight + (panelOffset < 0 ? Math.abs(panelOffset) : panelOffset)))
+        $(SELECTOR_TAB_EMPTY).height(contentWrapperHeight)
+      }, 50)
+    } else {
+      $(SELECTOR_CONTENT_IFRAME).height(contentWrapperHeight)
+    }
   }
 
   // Static

build/scss/pages/_iframe.scss

@@ -4,6 +4,8 @@ body.iframe-mode {
   }
   .content-wrapper {
     margin-left: 0 !important;
+    margin-top: 0 !important;
+    padding-bottom: 0 !important;
   }
   .main-header,
   .main-footer {
@@ -15,10 +17,21 @@ body.iframe-mode {
   height: 100%;
 
   &.iframe-mode {
+    .tab-empty {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
     iframe {
       border: 0;
       width: 100%;
       height: 100%;
+
+      .content-wrapper {
+        padding-bottom: 0 !important;
+      }
     }
   }
 }

iframe.html

@@ -14,7 +14,7 @@
   <!-- overlayScrollbars -->
   <link rel="stylesheet" href="plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
 </head>
-<body class="hold-transition sidebar-mini layout-fixed">
+<body class="hold-transition sidebar-mini layout-fixed" data-panel-auto-height="-48">
 <div class="wrapper">
 
   <!-- Navbar -->
@@ -807,14 +807,11 @@
         <li class="nav-item" role="presentation">
           <a class="nav-link bg-danger" href="#" class="iframe-close">Close</a>
         </li>
-        <li class="nav-item" role="presentation">
-          <a class="nav-link active" id="index-tab" data-toggle="tab" href="#index" role="tab" aria-controls="index" aria-selected="true">Dashboard v1</a>
-        </li>
       </ul>
     </div>
     <div class="tab-content">
-      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="index-tab">
-        <iframe src="index.html"></iframe>
+      <div class="tab-empty">
+        <h2 class="display-4">No tab selected!</h2>
       </div>
     </div>
   </div>