fixed IFrame jQuery API configuration & height calculation in iframe elements

build/js/IFrame.js

@@ -23,11 +23,11 @@ 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`
+const SELECTOR_TAB_NAV = `${SELECTOR_CONTENT_WRAPPER}.iframe-mode .nav`
-const SELECTOR_TAB_NAVBAR_NAV = `${SELECTOR_DATA_TOGGLE}.iframe-mode .navbar-nav`
+const SELECTOR_TAB_NAVBAR_NAV = `${SELECTOR_CONTENT_WRAPPER}.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_CONTENT = `${SELECTOR_CONTENT_WRAPPER}.iframe-mode .tab-content`
 const SELECTOR_TAB_EMPTY = `${SELECTOR_TAB_CONTENT} .tab-empty`
 const SELECTOR_TAB_LOADING = `${SELECTOR_TAB_CONTENT} .tab-loading`
 const SELECTOR_TAB_PANE = `${SELECTOR_TAB_CONTENT} .tab-pane`
@@ -212,9 +212,9 @@ class IFrame {
     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_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).height('100%')
-      $(SELECTOR_CONTENT_WRAPPER).height('auto')
+      $(SELECTOR_CONTENT_WRAPPER).height('100%')
-      $(SELECTOR_CONTENT_IFRAME).height('auto')
+      $(SELECTOR_CONTENT_IFRAME).height('100%')
     } else {
       $(`${SELECTOR_DATA_TOGGLE_FULLSCREEN} i`).removeClass(this._config.iconMaximize).addClass(this._config.iconMinimize)
       $('body').addClass(CLASS_NAME_FULLSCREEN_MODE)
@@ -227,17 +227,19 @@ class IFrame {
   // Private
 
   _init() {
+    if ($(SELECTOR_TAB_CONTENT).children().length > 2) {
+      const $el = $(`${SELECTOR_TAB_PANE}:first-child`)
+      $el.show()
+      this._setItemActive($el.find('iframe').attr('src'))
+    }
+
+    this._setupListeners()
+    this._fixHeight(true)
+  }
+
+  _initFrameElement() {
     if (window.frameElement && this._config.autoIframeMode) {
       $('body').addClass(CLASS_NAME_IFRAME_MODE)
-    } else if ($(SELECTOR_CONTENT_WRAPPER).hasClass(CLASS_NAME_IFRAME_MODE)) {
-      if ($(SELECTOR_TAB_CONTENT).children().length > 2) {
-        const $el = $(`${SELECTOR_TAB_PANE}:first-child`)
-        $el.show()
-        this._setItemActive($el.find('iframe').attr('src'))
-      }
-
-      this._setupListeners()
-      this._fixHeight(true)
     }
   }
 
@@ -374,17 +376,24 @@ class IFrame {
 
   // Static
 
-  static _jQueryInterface(operation, ...args) {
+  static _jQueryInterface(config) {
-    let data = $(this).data(DATA_KEY)
+    if ($(SELECTOR_DATA_TOGGLE).length > 0) {
-    const _options = $.extend({}, Default, $(this).data())
+      let data = $(this).data(DATA_KEY)
 
-    if (!data) {
+      if (!data) {
-      data = new IFrame(this, _options)
+        data = $(this).data()
-      $(this).data(DATA_KEY, data)
+      }
-    }
 
-    if (typeof operation === 'string' && /createTab|openTabSidebar|switchTab|removeActiveTab/.test(operation)) {
+      const _options = $.extend({}, Default, typeof config === 'object' ? config : data)
-      data[operation](...args)
+      const plugin = new IFrame($(this), _options)
+
+      $(this).data(DATA_KEY, typeof config === 'object' ? config : data)
+
+      if (typeof config === 'string' && /createTab|openTabSidebar|switchTab|removeActiveTab/.test(config)) {
+        plugin[config]()
+      }
+    } else {
+      new IFrame($(this), Default)._initFrameElement()
     }
   }
 }

build/js/Layout.js

@@ -33,6 +33,7 @@ const CLASS_NAME_SIDEBAR_FOCUSED = 'sidebar-focused'
 const CLASS_NAME_LAYOUT_FIXED = 'layout-fixed'
 const CLASS_NAME_CONTROL_SIDEBAR_SLIDE_OPEN = 'control-sidebar-slide-open'
 const CLASS_NAME_CONTROL_SIDEBAR_OPEN = 'control-sidebar-open'
+const CLASS_NAME_IFRAME_MODE = 'iframe-mode'
 
 const Default = {
   scrollbarTheme: 'os-theme-light',
@@ -117,7 +118,11 @@ class Layout {
     const $body = $('body')
     const $selector = $(`${SELECTOR_LOGIN_BOX}, ${SELECTOR_REGISTER_BOX}`)
 
-    if ($selector.length === 0) {
+    if ($body.hasClass(CLASS_NAME_IFRAME_MODE)) {
+      $body.css('height', '100%')
+      $('.wrapper').css('height', '100%')
+      $('html').css('height', '100%')
+    } else if ($selector.length === 0) {
       $body.css('height', 'auto')
       $('html').css('height', 'auto')
     } else {