deep linking for models, operations and tags

src/core/components/array-model.jsx

@@ -38,7 +38,7 @@ export default class ArrayModel extends Component {
     */
 
     return <span className="model">
-      <ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent="[...]">
+      <ModelCollapse title={titleEl} expanded={ depth <= expandDepth } collapsedContent="[...]">
         [
           {
             properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null

src/core/components/model-collapse.jsx

@@ -4,31 +4,47 @@ import PropTypes from "prop-types"
 export default class ModelCollapse extends Component {
   static propTypes = {
     collapsedContent: PropTypes.any,
-    collapsed: PropTypes.bool,
+    expanded: PropTypes.bool,
     children: PropTypes.any,
-    title: PropTypes.element
+    title: PropTypes.element,
+    modelName: PropTypes.string,
+    onToggle: PropTypes.func.isRequired
   }
 
   static defaultProps = {
     collapsedContent: "{...}",
-    collapsed: true,
+    expanded: false,
     title: null
   }
 
   constructor(props, context) {
     super(props, context)
 
-    let { collapsed, collapsedContent } = this.props
+    let { expanded, collapsedContent } = this.props
 
     this.state = {
-      collapsed: collapsed !== undefined ? collapsed : ModelCollapse.defaultProps.collapsed,
+      expanded : expanded,
       collapsedContent: collapsedContent || ModelCollapse.defaultProps.collapsedContent
     }
   }
 
+  componentWillReceiveProps(nextProps){
+
+    if(this.props.expanded!= nextProps.expanded){
+        this.setState({expanded: nextProps.expanded})
+    }
+
+  }
+
   toggleCollapsed=()=>{
+
+
+    if(this.props.onToggle){
+      this.props.onToggle(this.props.modelName,!this.state.expanded)
+    }
+
     this.setState({
-      collapsed: !this.state.collapsed
+      expanded: !this.state.expanded
     })
   }
 
@@ -38,9 +54,9 @@ export default class ModelCollapse extends Component {
       <span>
         { title && <span onClick={this.toggleCollapsed} style={{ "cursor": "pointer" }}>{title}</span> }
         <span onClick={ this.toggleCollapsed } style={{ "cursor": "pointer" }}>
-          <span className={ "model-toggle" + ( this.state.collapsed ? " collapsed" : "" ) }></span>
+          <span className={ "model-toggle" + ( this.state.expanded ? "" : " collapsed" ) }></span>
         </span>
-        { this.state.collapsed ? this.state.collapsedContent : this.props.children }
+        { this.state.expanded ? this.props.children :this.state.collapsedContent }
       </span>
     )
   }

src/core/components/model-wrapper.jsx

@@ -1,22 +1,32 @@
 import React, { Component, } from "react"
 import PropTypes from "prop-types"
+//import layoutActions from "actions/layout"
+
+
+export default class ModelWrapper extends Component {
+
 
-export default class ModelComponent extends Component {
   static propTypes = {
     schema: PropTypes.object.isRequired,
     name: PropTypes.string,
     getComponent: PropTypes.func.isRequired,
     getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
-    expandDepth: PropTypes.number
+    expandDepth: PropTypes.number,
+    layoutActions: PropTypes.object,
+    layoutSelectors: PropTypes.object.isRequired
+  }
+
+  onToggle = (name,isShown) => {
+      this.props.layoutActions.show(["models", name],isShown)
   }
 
   render(){
     let { getComponent, getConfigs } = this.props
     const Model = getComponent("Model")
-
+    const expanded = this.props.layoutSelectors.isShown(["models",this.props.name])
     return <div className="model-box">
-      <Model { ...this.props } getConfigs={ getConfigs } depth={ 1 } expandDepth={ this.props.expandDepth || 0 }/>
+      <Model { ...this.props } getConfigs={ getConfigs } expanded={expanded} depth={ 1 } onToggle={ this.onToggle} expandDepth={ this.props.expandDepth || 0 }/>
     </div>
   }
 }

src/core/components/models.jsx

@@ -31,13 +31,16 @@ export default class Models extends Component {
       <Collapse isOpened={showModels}>
         {
           definitions.entrySeq().map( ( [ name, model ])=>{
-            return <div className="model-container" key={ `models-section-${name}` }>
+
+            return <div id={ `model-${name}` } className="model-container" key={ `models-section-${name}` }>
               <ModelWrapper name={ name }
                      expandDepth={ defaultModelExpandDepth }
                      schema={ model }
                      getComponent={ getComponent }
-                     getConfigs={ getConfigs }
+                     specSelectors={ specSelectors }
-                     specSelectors={ specSelectors }/>
+                     getConfigs = {getConfigs}
+                     layoutSelectors = {layoutSelectors}
+                     layoutActions = {layoutActions}/>
               </div>
           }).toArray()
         }

src/core/components/object-model.jsx

@@ -10,6 +10,8 @@ export default class ObjectModel extends Component {
     schema: PropTypes.object.isRequired,
     getComponent: PropTypes.func.isRequired,
     getConfigs: PropTypes.func.isRequired,
+    expanded: PropTypes.bool,
+    onToggle: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
     name: PropTypes.string,
     isRef: PropTypes.bool,
@@ -18,8 +20,8 @@ export default class ObjectModel extends Component {
   }
 
   render(){
-    let { schema, name, isRef, getComponent, getConfigs, depth, expandDepth, ...otherProps } = this.props
+    let { schema, name, isRef, getComponent, getConfigs, depth, onToggle, expanded, ...otherProps } = this.props
-    let { specSelectors } = otherProps
+    let { specSelectors,expandDepth } = otherProps
     let { isOAS3 } = specSelectors
 
     if(!schema) {
@@ -60,7 +62,13 @@ export default class ObjectModel extends Component {
     </span>
 
     return <span className="model">
-      <ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent={ collapsedContent }>
+      <ModelCollapse
+        modelName={name}
+        title={titleEl}
+        onToggle = {onToggle}
+        expanded={ expanded ? true : depth <= expandDepth }
+        collapsedContent={ collapsedContent }>
+
          <span className="brace-open object">{ braceOpen }</span>
           {
             !isRef ? null : <JumpToPathSection name={ name }/>

src/core/plugins/deep-linking/spec-wrap-actions.js

@@ -1,8 +1,7 @@
-import scrollTo from "scroll-to-element"
+import zenscroll from "zenscroll"
 import { escapeDeepLinkPath } from "core/utils"
 
-const SCROLL_OFFSET = -5
+let hasHashBeenParsed = false //TODO this forces code to only run once which may prevent scrolling if page not refreshed
-let hasHashBeenParsed = false
 
 
 export const updateResolved = (ori, { layoutActions, getConfigs }) => (...args) => {
@@ -12,7 +11,6 @@ export const updateResolved = (ori, { layoutActions, getConfigs }) => (...args)
   if(!isDeepLinkingEnabled || isDeepLinkingEnabled === "false") {
     return
   }
-
   if(window.location.hash && !hasHashBeenParsed ) {
     let hash = window.location.hash.slice(1) // # is first character
 
@@ -30,21 +28,23 @@ export const updateResolved = (ori, { layoutActions, getConfigs }) => (...args)
 
     let [tag, operationId] = hash.split("/")
 
+    let swaggerUI = document.querySelector(".swagger-ui")
+    let myScroller = zenscroll.createScroller(swaggerUI)
+
     if(tag && operationId) {
       // Pre-expand and scroll to the operation
       layoutActions.show(["operations-tag", tag], true)
       layoutActions.show(["operations", tag, operationId], true)
 
-      scrollTo(`#operations-${escapeDeepLinkPath(tag)}-${escapeDeepLinkPath(operationId)}`, {
+      let target = document.getElementById(`#operations-${escapeDeepLinkPath(tag)}-${escapeDeepLinkPath(operationId)}`, {
-        offset: SCROLL_OFFSET
+      myScroller.to(target)
-      })
+
     } else if(tag) {
       // Pre-expand and scroll to the tag
       layoutActions.show(["operations-tag", tag], true)
 
-      scrollTo(`#operations-tag-${escapeDeepLinkPath(tag)}`, {
+      let target = document.getElementById(`#operations-tag-${escapeDeepLinkPath(tag)}`, {
-        offset: SCROLL_OFFSET
+      myScroller.to(target)
-      })
     }
   }