rework IFrame for single tab closing

build/js/IFrame.js

@@ -26,6 +26,7 @@ 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_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_EMPTY = `${SELECTOR_TAB_CONTENT} .tab-empty`
 const SELECTOR_TAB_LOADING = `${SELECTOR_TAB_CONTENT} .tab-loading`
@@ -95,7 +96,7 @@ class IFrame {
       navId += `-${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 href="#" class="btn-iframe-close" data-widget="iframe-close" data-type="only-this"><i class="fas fa-times"></i></a><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(unescape(escape(newNavItem)))
 
     const newTabItem = `<div class="tab-pane fade" id="${tabId}" role="tabpanel" aria-labelledby="${navId}"><iframe src="${link}"></iframe></div>`
@@ -170,7 +171,7 @@ class IFrame {
     }
   }
 
-  removeActiveTab(type) {
+  removeActiveTab(type, element) {
     if (type == 'all') {
       $(SELECTOR_TAB_NAVBAR_NAV_ITEM).remove()
       $(SELECTOR_TAB_PANE).remove()
@@ -178,6 +179,20 @@ class IFrame {
     } else if (type == 'all-other') {
       $(`${SELECTOR_TAB_NAVBAR_NAV_ITEM}:not(.active)`).remove()
       $(`${SELECTOR_TAB_PANE}:not(.active)`).remove()
+    } else if (type == 'only-this') {
+      const $navClose = $(element)
+      const $navItem = $navClose.parent('.nav-item')
+      const $navItemParent = $navItem.parent()
+      const navItemIndex = $navItem.index()
+      const tabId = $navClose.siblings('.nav-link').attr('aria-controls')
+      $navItem.remove()
+      $(`#${tabId}`).remove()
+      if ($(SELECTOR_TAB_CONTENT).children().length == $(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).length) {
+        $(SELECTOR_TAB_EMPTY).show()
+      } else {
+        const prevNavItemIndex = navItemIndex - 1
+        this.switchTab($navItemParent.children().eq(prevNavItemIndex).find('a'))
+      }
     } else {
       const $navItem = $(`${SELECTOR_TAB_NAVBAR_NAV_ITEM}.active`)
       const $navItemParent = $navItem.parent()
@@ -249,14 +264,25 @@ class IFrame {
       })
     }
 
-    $(document).on('click', SELECTOR_TAB_NAVBAR_NAV_ITEM, e => {
+    $(document).on('click', SELECTOR_TAB_NAVBAR_NAV_LINK, e => {
+      e.preventDefault()
+      this.onTabClick(e.target)
+      this.switchTab(e.target)
+    })
+    $(document).on('click', SELECTOR_TAB_NAVBAR_NAV_LINK, e => {
       e.preventDefault()
       this.onTabClick(e.target)
       this.switchTab(e.target)
     })
     $(document).on('click', SELECTOR_DATA_TOGGLE_CLOSE, e => {
       e.preventDefault()
-      this.removeActiveTab(e.target.attributes['data-type'] ? e.target.attributes['data-type'].nodeValue : null)
+      let { target } = e
+
+      if (target.nodeName == 'I') {
+        target = e.target.offsetParent
+      }
+
+      this.removeActiveTab(target.attributes['data-type'] ? target.attributes['data-type'].nodeValue : null, target)
     })
     $(document).on('click', SELECTOR_DATA_TOGGLE_FULLSCREEN, e => {
       e.preventDefault()

build/scss/pages/_iframe.scss

@@ -21,6 +21,14 @@ body.iframe-mode-fullscreen {
   height: 100%;
 
   &.iframe-mode {
+    .btn-iframe-close {
+      color: $danger;
+      position: absolute;
+      line-height: 1;
+      right: .125rem;
+      top: .125rem;
+      z-index: 10;
+    }
     .navbar-nav {
       overflow-y: auto;
       width: 100%;
@@ -28,6 +36,9 @@ body.iframe-mode-fullscreen {
       .nav-link {
         white-space: nowrap;
       }
+      .nav-item {
+        position: relative;
+      }
     }
     .tab-content {
       position: relative;

iframe.html

@@ -753,16 +753,13 @@
   <!-- Content Wrapper. Contains page content -->
   <div class="content-wrapper iframe-mode" data-widget="iframe" data-loading-screen="750">
     <div class="nav navbar navbar-expand-lg navbar-white navbar-light border-bottom p-0">
-      <div class="btn-group">
+      <li class="nav-item dropdown">
-        <button type="button" class="btn btn-danger rounded-0" data-widget="iframe-close">Close</button>
+        <a class="nav-link bg-danger dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Close</a>
-        <button type="button" class="btn btn-danger rounded-0 dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <div class="dropdown-menu mt-0">
-          <span class="sr-only">Toggle Dropdown</span>
-        </button>
-        <div class="dropdown-menu">
           <a class="dropdown-item" href="#" data-widget="iframe-close" data-type="all">Close All</a>
           <a class="dropdown-item" href="#" data-widget="iframe-close" data-type="all-other">Close All Other</a>
         </div>
-      </div>
+      </li>
       <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>