diff --git a/build/js/IFrame.js b/build/js/IFrame.js index 69946e313..0fbb2472a 100644 --- a/build/js/IFrame.js +++ b/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_NAVBAR_NAV = `${SELECTOR_DATA_TOGGLE}.iframe-mode .navbar-nav` +const SELECTOR_TAB_NAV = `${SELECTOR_CONTENT_WRAPPER}.iframe-mode .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_CONTENT_WRAPPER).height('auto') - $(SELECTOR_CONTENT_IFRAME).height('auto') + $(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).height('100%') + $(SELECTOR_CONTENT_WRAPPER).height('100%') + $(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) { - let data = $(this).data(DATA_KEY) - const _options = $.extend({}, Default, $(this).data()) + static _jQueryInterface(config) { + if ($(SELECTOR_DATA_TOGGLE).length > 0) { + let data = $(this).data(DATA_KEY) - if (!data) { - data = new IFrame(this, _options) - $(this).data(DATA_KEY, data) - } + if (!data) { + data = $(this).data() + } - if (typeof operation === 'string' && /createTab|openTabSidebar|switchTab|removeActiveTab/.test(operation)) { - data[operation](...args) + const _options = $.extend({}, Default, typeof config === 'object' ? config : data) + 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() } } } diff --git a/build/js/Layout.js b/build/js/Layout.js index cf771f1e1..c811f1034 100644 --- a/build/js/Layout.js +++ b/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 {