From eb5be81a11e4b5b9fa2d3c833abaec5da55a11cd Mon Sep 17 00:00:00 2001 From: REJack Date: Mon, 12 Jul 2021 21:28:23 +0200 Subject: [PATCH] further iframe fixes & changes - add iframe-dark - add autoDarkMode for loaded iframes - add border-dark overwrite in dark-mode - fix markup with Default IFrame Tab on load --- build/js/IFrame.js | 13 +- build/scss/_colors.scss | 4 + docs/javascript/iframe.md | 7 +- iframe-dark.html | 808 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 828 insertions(+), 4 deletions(-) create mode 100644 iframe-dark.html diff --git a/build/js/IFrame.js b/build/js/IFrame.js index 0fbb2472a..13c5a0938 100644 --- a/build/js/IFrame.js +++ b/build/js/IFrame.js @@ -51,6 +51,7 @@ const Default = { autoIframeMode: true, autoItemActive: true, autoShowNewTab: true, + autoDarkMode: false, allowDuplicates: false, loadingScreen: true, useNavbarItems: true, @@ -69,7 +70,6 @@ class IFrame { constructor(element, config) { this._config = config this._element = element - this._init() } @@ -239,7 +239,12 @@ class IFrame { _initFrameElement() { if (window.frameElement && this._config.autoIframeMode) { - $('body').addClass(CLASS_NAME_IFRAME_MODE) + const $body = $('body') + $body.addClass(CLASS_NAME_IFRAME_MODE) + + if (this._config.autoDarkMode) { + $body.addClass('dark-mode') + } } } @@ -385,6 +390,8 @@ class IFrame { } const _options = $.extend({}, Default, typeof config === 'object' ? config : data) + localStorage.setItem('AdminLTE:IFrame:Options', JSON.stringify(_options)) + const plugin = new IFrame($(this), _options) $(this).data(DATA_KEY, typeof config === 'object' ? config : data) @@ -393,7 +400,7 @@ class IFrame { plugin[config]() } } else { - new IFrame($(this), Default)._initFrameElement() + new IFrame($(this), JSON.parse(localStorage.getItem('AdminLTE:IFrame:Options')))._initFrameElement() } } } diff --git a/build/scss/_colors.scss b/build/scss/_colors.scss index ba855be17..823ffe65f 100644 --- a/build/scss/_colors.scss +++ b/build/scss/_colors.scss @@ -139,6 +139,10 @@ a.text-muted:hover { @each $name, $color in $colors-alt { @include accent-variant($name, $color); } + + .border-dark { + border-color: lighten($dark, 10%) !important; + } } // diff --git a/docs/javascript/iframe.md b/docs/javascript/iframe.md index 87212547e..7bf5b9fc7 100644 --- a/docs/javascript/iframe.md +++ b/docs/javascript/iframe.md @@ -34,7 +34,10 @@ To get the iframe 100% working you need the following content-wrapper markup: Close @@ -77,6 +80,7 @@ $('.content-wrapper').IFrame({ autoIframeMode: true, autoItemActive: true, autoShowNewTab: true, + autoDarkMode: false, allowDuplicates: true, loadingScreen: 750, useNavbarItems: true @@ -96,6 +100,7 @@ $('.content-wrapper').IFrame({ |autoIframeMode | Boolean | true | Whether to automatically add `.iframe-mode` to `body` if page is loaded via iframe. |autoItemActive | Boolean | true | Whether to automatically set the sidebar menu item active based on the active iframe. |autoShowNewTab | Boolean | true | Whether to automatically display created tab. +|autoDarkMode | Boolean | false | Whether to automatically enable dark-mode in iframe pages. |allowDuplicates | Boolean | true | Whether to allow creation of duplicate tab/iframe. |loadingScreen | Boolean/Number | true | [Boolean] Whether to enable iframe loading screen; [Number] Set loading screen hide delay. |useNavbarItems | Boolean | true | Whether to open navbar menu items, instead of open only sidebar menu items. diff --git a/iframe-dark.html b/iframe-dark.html new file mode 100644 index 000000000..1077b7cd3 --- /dev/null +++ b/iframe-dark.html @@ -0,0 +1,808 @@ + + + + + + AdminLTE 3 | Tabbed IFrames + + + + + + + + + + + +
+ + + + + + + + + +
+
+ Close + +
    +
+ + +
+
+
+

No tab selected!

+
+
+
+

Tab is loading

+
+
+
+
+ +
+ Copyright © 2014-2021 AdminLTE.io. + All rights reserved. +
+ Version 3.1.0 +
+
+ + + + +
+ + + + + + + + + + + + + + + + + +