Skip to content

amorimjj/redoc-try-it-out

Repository files navigation

Redoc - Try Out

The Try Out Swagger's feature on Redoc

It's extends Redoc adding the Swagger's Try Out feature.

Live Demo

Online preview Pet Store live demo.

Installation

Browser

Script tag

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/redoc-try-it-out/dist/try-it-out.min.js"></script>

How to use

After importing the script bundle, just configure and init it.

<div id="redoc_container"></div>
<script>
    RedocTryItOut.init(
        "https://petstore.swagger.io/v2/swagger.json",
        { title: "Pet Store" }, 
        document.getElementById("redoc_container")
    )
</script>

Available options

RedocTryItOut Init Options

Option Description Type Note
docUrl URL swagger's spec file string
cfg Redoc try it out config options RedocTryItOutOptions See options table
element (optional) Redoc wrapper container HTMLElement If not set, a wrapper will be created

Redoc Try It Out Options

RedocTryItOutOptions extends RedocOptions, documented on Redoc documentation

Option Description Type Default
tryItOutEnabled Enable/Disable Try Out feature boolean false
tryItBoxContainerId Id of the element created dynamically as Try Out container string 'try-out-wrapper'
containerId Redoc wrapper container id (used when no element is provided) string 'redoc-container'
operationBoxSelector Redoc operation box selector string '[data-section-id]'
selectedOperationClass Class name added into selected operation string 'try'
redocVersion Redoc version string '2.0.0-rc.56'
authBtn Auth Button Options AuthBtnOptions See the table
tryBtn Try Out Button Options TryBtnOptions See the table
stylerMatcher Styler Matcher Options StyleMatcherOptions See the table
swaggerOptions Swagger Options SwaggerOptions See the table
dependenciesVersions Set of dependencies version DependenciesVersions See the table

Auth Button Options

Option Description Type Default
posSelector Selector where the button will be added after of string 'h1:eq(0)'
text The button text string 'AUTHORIZE'
className The button class name used tracking the element string '_auth-btn'

Try Button Options

Option Description Type Default
siblingSelector Selector where the button will be added as sibling of string '.http-verb'
text The button text string 'TRY OUT'
className The button class name used tracking the element string 'tryBtn'
selectedClassName The button class name used tracking the selected element string 'selected'

Style Matcher Options

Style matcher is a utility used to clone Redoc style into Swagger, avoiding layout discrepancies

Option Type Default
informationContainerTargetSelector string '.swagger-ui .information-container'
schemeContainerTargetSelector string '.swagger-ui .scheme-container'
modelsContainerTargetSelector string '.swagger-ui .models'
inputTargetSelector string '.swagger-ui input[type=text]'
selectTargetSelector string '.swagger-ui .opblock select'
textAreaTargetSelector string '.swagger-ui .opblock textarea'
paragraphTargetSelector string '.swagger-ui .opblock p'
executeBtnTargetSelector string '.swagger-ui .opblock .btn.execute'
responseContainerTargetSelector string '.swagger-ui .opblock .opblock-body .responses-inner'
responseTitleTargetSelector string '.swagger-ui .opblock .responses-inner > div > h4'
responseHeaderTargetSelector string '.swagger-ui .opblock .responses-inner h4'
responseTableTargetSelector string '.swagger-ui .opblock .responses-inner > .responses-table'
responseWrapperTargetSelector string '.swagger-ui .opblock .responses-wrapper'
responseWrapperResultTargetSelector string '.swagger-ui .opblock .btn-group + .responses-wrapper'
responseMicrolightTargetSelector string '.swagger-ui .opblock .microlight'
responseCodeTargetSelector string '.swagger-ui .opblock .microlight code'
responseClipboardTargetSelector string '.swagger-ui .opblock .responses-inner .copy-to-clipboard'
responseClipboardBtnTargetSelector string '.swagger-ui .opblock .responses-inner .copy-to-clipboard button'
responseCurlClipboardTargetSelector string '.swagger-ui .opblock .responses-inner .curl-command .copy-to-clipboard'
responseDownloadTargetSelector string '.swagger-ui .opblock .responses-inner .download-contents'
serverResponseHeaderTargetSelector string '.swagger-ui .opblock .responses-inner .responses-header td.col_header'
serverResponseStatusTargetSelector string '.swagger-ui .opblock .responses-inner .response .response-col_status'
serverResponseDescriptionTargetSelector string '.swagger-ui .opblock .responses-inner .response .response-col_description'
serverResponseSubHeaderTargetSelector string '.swagger-ui .opblock .responses-inner .response h5'
clearBtnTargetSelector string '.swagger-ui .opblock .btn-group .btn-clear'
operationTagTargetSelector string '.swagger-ui .opblock-tag[data-tag]'
operationHeaderContainerTargetSelector string '.swagger-ui .opblock .opblock-section-header'
operationHeaderTargetSelector string '.swagger-ui .opblock .opblock-section-header h4'
operationHeaderDecorationTargetSelector string '.swagger-ui .opblock .opblock-section-header h4 span::after'
operationTryOutTargetSelector string '.swagger-ui .operation-tag-content div.try-out'
descriptionContainerTargetSelector string '.swagger-ui .opblock .opblock-body .opblock-description-wrapper'
summaryTargetSelector string '.swagger-ui .operation-tag-content div.opblock .opblock-summary'
modalHeaderContainerTargetSelector string '.swagger-ui .dialog-ux .modal-ux-header'
modalHeaderTargetSelector string '.swagger-ui .dialog-ux .modal-ux-header h3'
modalTitleTargetSelector string '.swagger-ui .dialog-ux .modal-ux-content h4'
modalTitleCodeTargetSelector string '.swagger-ui .dialog-ux .modal-ux-content .wrapper code'
modalLabelTargetSelector string '.swagger-ui .modal-ux label'
modalCodeTargetSelector string '.swagger-ui .modal-ux code'
modalBtnTargetSelector string '.swagger-ui .modal-ux button'
parametersTableContainerTargetSelector string '.swagger-ui .opblock .table-container'
parametersHeadTargetSelector string '.swagger-ui .opblock .table-container table.parameters thead'
parameterNameFieldTargetSelector string '.swagger-ui .opblock .table-container table.parameters .parameter__name'
parameterTypeFieldTargetSelector string '.swagger-ui .opblock .table-container table.parameters .parameter__type'
parameterDeprecatedTargetSelector string '.swagger-ui .opblock .table-container table.parameters .parameter__deprecated'
parameterSourceTargetSelector string '.swagger-ui .opblock .table-container table.parameters .parameter__in'
parameterRequiredMarkerTargetSelector string '.swagger-ui .opblock .table-container table.parameters .parameter__name.required span'
parameterRequiredTargetSelector string '.swagger-ui .opblock .table-container table.parameters .parameter__name.required::after'
apiContentSourceSelector string '.api-content'
inputSourceSelector string '[kind=field] ~ td'
codeSourceSelector string 'code'
codeBoxSourceSelector string '[data-section-id] [role=tabpanel]'
dataSectionSourceSelector string '[data-section-id] > div > div'
fieldSourceSelector string '[kind=field]'
requiredFieldSourceSelector string '[kind=field] div'
fieldMarkerSourceSelector string '[kind=field]:first span:first-child'
sanSerifFontSourceSelector string 'h2'
alternativeMonospaceFontSourceSelector string '[kind=field] span'
alternativeSansSerifSourceSelector string 'h5'
h2SourceSelector string 'h2'
h3SourceSelector string 'h3'
h5SourceSelector string 'h5'
labelSourceSelector string '[kind=field] ~ td'
typeSourceSelector string '[kind=field] ~ td span'
btnSourceSelector string '[role=tabpanel] button'
defaultBorderColorSelector string 'h5'
authBtnSourceSelector string 'a[href*="swagger.json"]:eq(0)'
httpVerbSourceSelector string '[data-section-id] .http-verb'

Swagger Options

Option Description Type Default
url URL swagger's spec file string RedocTryItOut.docUrl
dom_id Swagger wrapper container id string '#swagger-ui'
authorizeBtnSelector The authorize button selector string '.swagger-ui .auth-wrapper .authorize'
authorizeModalSelector The authorize modal selector string '.swagger-ui .dialog-ux .modal-ux'
authorizeDoneBtnSelector The authorize modal done button selector string '.swagger-ui .auth-btn-wrapper .btn-done'
authorizeModalCloseBtnSelector The authorize modal close button selector string '.swagger-ui .dialog-ux .modal-ux-header .close-modal'
operationContainerSelector The operation container selector string '.swagger-ui .opblock'
operationSectionContainerSelector The operation section container selector string '.swagger-ui .opblock-tag-section'
operationSummaryPatternSelector The operation summary pattern selector string '.swagger-ui .opblock .opblock-summary-{method} [data-path="{api}"]'
wrapperSelector The wrapper selector string '.swagger-ui .wrapper'
hideClass The hide class name added to hide swagger string 'hide'
showClass The show class name added to show swagger string 'show'
authModalClass The modal class name added to show auth modal string 'auth-modal'
selectedOperationContainerClass The class name added mark an operation box as selected string 'opened-shadow'
onComplete The function called when swagger load is completed Function CallbackFunction
version The swagger version string '3.48.0'

Dependencies Versions

Option Description Type Default
jquery JQuery version string '3.6.0'
jqueryScrollTo JQuery ScrollTo version string '2.1.2'

Credits

It's based on wll8.github.io/redoc-try work.

Changelog

Bellow are a list of changes, some might go undocumented

  • 1.0.0 - First release
  • 1.0.1 - Remove png from package
  • 1.0.2 - Fix main file
  • 1.0.3 - Add live demo and fix README
  • 1.0.4 - Fix live demo page url
  • 1.0.5 - Export interfaces
  • 1.0.6 - Fix configuration
  • 1.0.7 - Fix exports
  • 1.0.8 - Fix redoc options
  • 1.0.9 - Export JS name files constants

TODO

  • Finish up the documentation
  • Add Unittests

About

Add Try It Out option on Redoc

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published