fix: Should listen to redoc_dom to decide whether to show the window. #…

…30
wll8 · Jul 28, 2023 · 2f8b6b9 · 2f8b6b9
1 parent 60509fd
commit 2f8b6b9
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 22 deletions.
diff --git a/readme.md b/readme.md
@@ -1,4 +1,5 @@
 ## redoc try
+
 - [👉 View video](https://user-images.githubusercontent.com/28223260/200719793-cd027f71-e863-4d6b-a519-7ed6105e2461.mp4)
 - [👉 online ./test/openapi.3.yaml](https://wll8.github.io/redoc-try/index.html?openApi=./test/openapi.3.yaml)
 - [👉 online ./test/swagger.2.json](https://wll8.github.io/redoc-try/index.html?openApi=./test/swagger.2.json)
@@ -10,28 +11,30 @@ Add `Try it out` function like [swagger](https://petstore.swagger.io/) on [redoc
 
 ## how to use?
 
-``` html
+```html
 <body>
   <div id="redoc-container"></div>
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/bundles/redoc.standalone.min.js"> </script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/bundles/redoc.standalone.min.js"></script>
   <script src="https://cdn.jsdelivr.net/gh/wll8/[email protected]/dist/try.js"></script>
   <script>
     // initTry(`https://petstore.swagger.io/v2/swagger.json`)
     initTry({
       openApi: `https://petstore.swagger.io/v2/swagger.json`,
-      redocOptions: {scrollYOffset: 50},
-    })
+      redocOptions: { scrollYOffset: 50 },
+    });
   </script>
 </body>
 ```
 
 Note: No need to use `<redoc />` anymore.
+
 ## Options
+
 When the parameter type is a string, the value is openApi.
 
 When the parameter type is an object, you can configure the following:
 
-``` js
+```js
 initTry({
   openApi: `https://petstore.swagger.io/v2/swagger.json`, // openApi address
   // redocVersion: `2.0.0-rc.48`, // Used to handle compatibility issues, if not specified, read from the URL
@@ -41,9 +44,15 @@ initTry({
   // redocOptions: {enableConsole: true}, // Or the format is an array: `[specOrSpecUrl?, options?, element?, callback?]`
   // swaggerOptions: {dom_id: `#swagger-ui`},
   // pure: false, // Concise mode, hide some existing elements of redoc
-})
+});
 ```
 
+- initTry.renderPos()  
+  Manually update the redoc-try window position.
+
+- initTry.hide()  
+  Manually hide the redoc-try window.
+
 ## Why do you need it?
 
 According to the description of [#53](https://github.com/Redocly/redoc/issues/53#issuecomment-576377856), the try function is no longer developed, maybe it has become a paid function.
@@ -53,13 +62,14 @@ If you need to simply have this feature, you don't need to redevelop it, because
 We chose to transplant Swagger's `Try it out` function, which is complete, has community maintenance, and is familiar.
 
 ## Related tools
+
 - [redoc-try-it-out](https://github.com/amorimjj/redoc-try-it-out) Close to the visual style of redoc, more options can be configured.
 
 ## License
 
 [WTFPL](https://en.wikipedia.org/wiki/WTFPL):
 
-``` txt
+```txt
             DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                     Version 2, December 2004
 

diff --git a/try.js b/try.js
@@ -1,16 +1,9 @@
 ;((window, undefined) => {
 window.initTry = window.initTry || initTry
-
-/**
-
-global variable:
-
-window.initTry
-window.initTry.cfg
-window.initTry.renderPos
-window.initTry.$operation
-
-*/
+window.initTry.cfg = {}
+window.initTry.renderPos = () => {}
+window.initTry.hide = () => {}
+window.initTry.$operation = {}
 
 function initTry(userCfg) {
   loadScript(`https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js`)
@@ -223,6 +216,13 @@ function trySwagger(cfg) {
   $(`.http-verb`).before(`
     <button class="tryBtn">${cfg.tryText}</button>
   `)
+  window.initTry.hide = debounce(() => {
+    const isVisibleRes = isVisible(document.querySelector(`.try .fullApiBox`))
+    // Destroy swagger-ui if redoc_dom related content is not visible
+    if(isVisibleRes === false) {
+      $(`.swaggerBox`).addClass(`hide`).removeClass(`show`)
+    }
+  }, 500)
   $(`.tryBtn`).click(function (event) {
     event.stopPropagation()
     const $tryBtn = $(this)
@@ -288,6 +288,13 @@ function trySwagger(cfg) {
     $opblock.addClass(`open`)
 
     function renderPos() {
+      const isVisibleRes = isVisible(document.querySelector(`.try .fullApiBox`))
+      // Destroy swagger-ui if redoc_dom related content is not visible
+      if(isVisibleRes === false) {
+        $(`.swaggerBox`).addClass(`hide`).removeClass(`show`)
+        window.initTry.$operation.removeClass(`try`)
+        return undefined
+      }
       let pos = getShadowPos()
       // Move swagger to the position of swaggerShadow
       $(`.swaggerBox`).css({
@@ -334,12 +341,15 @@ function trySwagger(cfg) {
       subtree: true,
     })
     const redoc_dom = window.initTry.cfg.redocOptions[2]
+    const redocDomObserver = new MutationObserver(window.initTry.hide)
+    redocDomObserver.disconnect()
+    redocDomObserver.observe(redoc_dom, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    })
     $(redoc_dom).off('click.redoc_dom').on('click.redoc_dom', () => {
       renderPos()
-      if(isVisible(document.querySelector(`.try .fullApiBox`)) === false) {
-        $(`.swaggerBox`).addClass(`hide`).removeClass(`show`)
-        window.initTry.$operation.removeClass(`try`)
-      }
     })
   })
 
@@ -353,6 +363,9 @@ function isVisible(element) {
   let isVisible = true
   let parentElement = element
 
+  if(Boolean(parentElement) === false) {
+    isVisible = false
+  }
   while (parentElement) {
     const parentStyle = getComputedStyle(parentElement)