enhance IFrame close button & removeActiveTab function

build/js/IFrame.js

@@ -170,18 +170,26 @@ class IFrame {
     }
   }
 
-  removeActiveTab() {
-    const $navItem = $(`${SELECTOR_TAB_NAVBAR_NAV_ITEM}.active`)
-    const $navItemParent = $navItem.parent()
-    const navItemIndex = $navItem.index()
-    $navItem.remove()
-    $('.tab-pane.active').remove()
-
-    if ($(SELECTOR_TAB_CONTENT).children().length == $(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).length) {
+  removeActiveTab(type) {
+    if (type == 'all') {
+      $(SELECTOR_TAB_NAVBAR_NAV_ITEM).remove()
+      $(SELECTOR_TAB_PANE).remove()
       $(SELECTOR_TAB_EMPTY).show()
+    } else if (type == 'all-other') {
+      $(`${SELECTOR_TAB_NAVBAR_NAV_ITEM}:not(.active)`).remove()
+      $(`${SELECTOR_TAB_PANE}:not(.active)`).remove()
     } else {
-      const prevNavItemIndex = navItemIndex - 1
-      this.switchTab($navItemParent.children().eq(prevNavItemIndex).find('a'))
+      const $navItem = $(`${SELECTOR_TAB_NAVBAR_NAV_ITEM}.active`)
+      const $navItemParent = $navItem.parent()
+      const navItemIndex = $navItem.index()
+      $navItem.remove()
+      $(`${SELECTOR_TAB_PANE}.active`).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'))
+      }
     }
   }
 
@@ -248,7 +256,7 @@ class IFrame {
     })
     $(document).on('click', SELECTOR_DATA_TOGGLE_CLOSE, e => {
       e.preventDefault()
-      this.removeActiveTab()
+      this.removeActiveTab(e.target.attributes['data-type'] ? e.target.attributes['data-type'].nodeValue : null)
     })
     $(document).on('click', SELECTOR_DATA_TOGGLE_FULLSCREEN, e => {
       e.preventDefault()

iframe.html

@@ -753,7 +753,16 @@
   <!-- 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">
-      <a class="nav-link bg-danger" href="#" data-widget="iframe-close">Close</a>
+      <div class="btn-group">
+        <button type="button" class="btn btn-danger rounded-0" data-widget="iframe-close">Close</button>
+        <button type="button" class="btn btn-danger rounded-0 dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <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>
       <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>