From 4b567affcdceeead0ce35c7d6e126e4b55d42bac Mon Sep 17 00:00:00 2001
From: REJack <info@rejack.de>
Date: Tue, 29 Sep 2020 15:13:49 +0200
Subject: [PATCH] add iframe docs (1st version)

---
 docs/_config.yml          |  2 +
 docs/javascript/iframe.md | 95 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 97 insertions(+)
 create mode 100644 docs/javascript/iframe.md

diff --git a/docs/_config.yml b/docs/_config.yml
index 7bbe8e84234..d2f98b4a104 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -69,6 +69,8 @@ navigation:
         url: javascript/sidebar-search.html
       - title: Expandable Tables
         url: javascript/expandable-tables.html
+      - title: IFrame
+        url: javascript/iframe.html
   - title: Browser Support
     url: browser-support.html
     icon: fab fa-chrome
diff --git a/docs/javascript/iframe.md b/docs/javascript/iframe.md
new file mode 100644
index 00000000000..281d155ecb1
--- /dev/null
+++ b/docs/javascript/iframe.md
@@ -0,0 +1,95 @@
+---
+layout: page
+title: IFrame Plugin
+---
+
+The iframe plugin provides the functionality to open sidebar & navbar items in a tabbed iframe.
+
+##### Required Markup
+To get the iframe 100% working you need the following content-wrapper markup:
+
+```html
+<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>
+    <ul class="navbar-nav" role="tablist"></ul>
+  </div>
+  <div class="tab-content">
+    <div class="tab-empty">
+      <h2 class="display-4">No tab selected!</h2>
+    </div>
+    <div class="tab-loading">
+      <div>
+        <h2 class="display-4">Tab is loading <i class="fa fa-sync fa-spin"></i></h2>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+##### Usage
+This plugin can be activated as a jQuery plugin or using the data api. 
+
+###### Data API
+{: .text-bold }
+Activate the plugin by adding `data-widget="iframe"` to the `.content-wrapper`. If you need to provide onCheck and onUncheck methods, please use the jQuery API. 
+
+###### jQuery
+{: .text-bold }
+The jQuery API provides more customizable options that allows the developer to handle checking and unchecking the todo list checkbox events. 
+```js
+$('.content-wrapper').IFrame({
+  onTabClick(item) {
+    return item
+  },
+  onTabChanged(item) {
+    return item
+  },
+  onTabCreated(item) {
+    return item
+  },
+  autoIframeMode: true,
+  autoItemActive: true,
+  autoShowNewTab: true,
+  loadingScreen: 750,
+  useNavbarItems: true
+})
+```
+
+
+##### Options
+{: .mt-4}
+
+|---
+| Name | Type | Default | Description
+|-|-|-|-
+|onTabClick | Function | Anonymous Function | Handle tab click event.
+|onTabChanged | Function | Anonymous Function | Handle tab changed event.
+|onTabCreated | Function | Anonymous Function | Handle tab created event.
+|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.
+|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.
+
+|---
+{: .table .table-bordered .bg-light}
+
+
+##### Methods
+{: .mt-4}
+
+|---
+| Method | Description
+|-|-
+onTabClick(item)
+onTabChanged(item)
+onTabCreated(item)
+createTab(title, link, autoOpen)
+openTabSidebar(item)
+switchTab(item, loadingScreen = null)
+setItemActive(href)
+removeActiveTab()
+{: .table .table-bordered .bg-light}
+
+Example: `$('.content-wrapper').IFrame('fixLayoutHeight')`