Revert "Repair wiki view bug (#2304)" (#2309)

This reverts commit 842342dbc9.

frontend/src/components/SidePanel.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import TreeView from './tree-view/tree-view';
 import { siteRoot, logoPath, mediaUrl, siteTitle, logoWidth, logoHeight } from './constance';
 import Tree from './tree-view/tree';
-import { Node } from './tree-view/node'
+import Node from './tree-view/node'
 import NodeMenu from './menu-component/node-menu';
 import MenuControl from './menu-component/node-menu-control';
 const gettext = window.gettext;
@@ -82,40 +82,13 @@ class SidePanel extends Component {
 
   onAddFolderNode = (dirPath) => {
     this.props.editorUtilities.createDir(dirPath).then(res => {
-      let tree = this.state.tree_data.copy();
+      this.initializeTreeData()
-      let index = dirPath.lastIndexOf("/");
-      let name = dirPath.substring(index+1);
-      let parentPath = dirPath.substring(0, index);
-      if (!parentPath) {
-        parentPath = "/";
-      }
-      let node = new Node({name : name, type: "dir", isExpanded: false, children: []});
-      let parentNode = tree.getNodeByPath(parentPath);
-      tree.addChildToNode(parentNode, node);
-      tree.setOneNodeToActived({node});
-      this.setState({
-        tree_data: tree
-      })
-
     })
   }
 
   onAddFileNode = (filePath) => {
     this.props.editorUtilities.createFile(filePath).then(res => {
-      let tree = this.state.tree_data.copy();
+      this.initializeTreeData()
-      let index = filePath.lastIndexOf("/");
-      let name = filePath.substring(index+1);
-      let parentPath = filePath.substring(0, index);
-      if (!parentPath) {
-        parentPath = "/";
-      }
-      let node = new Node({name : name, type: "file", isExpanded: false, children: []});
-      let parentNode = tree.getNodeByPath(parentPath);
-      tree.addChildToNode(parentNode, node);
-      tree.setOneNodeToActived({node});
-      this.setState({
-        tree_data: tree
-      })
     })
   }
 
@@ -125,16 +98,17 @@ class SidePanel extends Component {
     let filePath = node.path;
     if (type === 'file') {
       this.props.editorUtilities.renameFile(filePath, newName).then(res => {
+        this.initializeTreeData()
         if (this.isModifyCurrentFile()) {
           node.name = newName;
           this.props.onFileClick(null, node);
-          this.changeActivedNode({node});
         }
       })
     }
 
     if (type === 'dir') {
       this.props.editorUtilities.renameDir(filePath, newName).then(res => {
+        this.initializeTreeData();
         if (this.isModifyContainsCurrentFile()) {
           let currentNode = this.state.currentNode;
           let nodePath = encodeURI(currentNode.path);
@@ -144,7 +118,6 @@ class SidePanel extends Component {
           if(node){
             currentNode.name = newName;
             this.props.onFileClick(null, node);
-            this.changeActivedNode({node})
           }
         }
       })
@@ -156,11 +129,15 @@ class SidePanel extends Component {
     let filePath = currentNode.path;
     let type = currentNode.type;
     if (type === 'file') {
-      this.props.editorUtilities.deleteFile(filePath);
+      this.props.editorUtilities.deleteFile(filePath).then(res => {
+        this.initializeTreeData();
+      })
     } 
 
     if (type === 'dir') {
-      this.props.editorUtilities.deleteDir(filePath);
+      this.props.editorUtilities.deleteDir(filePath).then(res => {
+        this.initializeTreeData();
+      })
     }
 
     let isCurrentFile = false;
@@ -170,39 +147,23 @@ class SidePanel extends Component {
       isCurrentFile = this.isModifyCurrentFile();
     }
 
-    let tree = this.state.tree_data.copy();
-    tree.removeNodeFromTree(currentNode);
-
     if (isCurrentFile) {
       let homeNode = this.getHomeNode();
       this.props.onFileClick(null, homeNode);
-      tree.setNoneNodeActived();
-      this.setState({tree_data: tree})
-    } else {
-      this.setState({tree_data: tree})
     }
   }
 
-  changeActivedNode(node) {
-    let tree = this.state.tree_data.copy();
-    tree.setOneNodeToActived(node);
-    this.setState({
-      tree_data: tree
-    })
-  }
-
   isModifyCurrentFile() {
     let name = this.state.currentNode.name;
     let pathname = window.location.pathname;
     let currentName = pathname.slice(pathname.lastIndexOf("/") + 1);
-    return encodeURI(name) === currentName;
+    return name === currentName;
   }
 
   isModifyContainsCurrentFile() {
     let pathname = window.location.pathname;
     let nodePath = this.state.currentNode.path;
-    
+    if (pathname.indexOf(nodePath)) {
-    if (pathname.indexOf(encodeURI(nodePath)) > -1) {
       return true;
     }
     return false;

frontend/src/components/markdown-viewer.js

@@ -44,17 +44,13 @@ class MarkdownViewerContent extends React.Component {
 
 class MarkdownViewer extends React.Component {
 
-  constructor(props) {
+  state = {
-    super(props);
+    renderingContent: true,
-    this.state = {
+    renderingOutline: true,
-      renderingContent: true,
+    html: '',
-      renderingOutline: true,
+    outlineTreeRoot: null,
-      html: '',
+    navItems: [],
-      outlineTreeRoot: null,
+    activeId: 0
-      navItems: [],
-      activeId: 0
-    };
-    this.activeIdFromOutLine = null;
   }
 
   scrollToNode(node) {
@@ -64,27 +60,22 @@ class MarkdownViewer extends React.Component {
   }
 
   scrollHandler = (event) => {
+    var target = event.target || event.srcElement;
+    var markdownContainer = this.refs.markdownContainer;
+    var headingList = markdownContainer.querySelectorAll('[id^="user-content"]');
+    var top = target.scrollTop;
+    var defaultOffset = markdownContainer.offsetTop;
     var currentId = '';
-    if (!this.activeIdFromOutLine) {
+    for (let i = 0; i < headingList.length; i++) {
-      var target = event.target || event.srcElement;
+      let heading = headingList[i];
-      var markdownContainer = this.refs.markdownContainer;
+      if (heading.tagName === 'H1') {
-      var headingList = markdownContainer.querySelectorAll('[id^="user-content"]');
+        continue;
-      var top = target.scrollTop;
+      }
-      var defaultOffset = markdownContainer.offsetTop;
+      if (top > heading.offsetTop - defaultOffset) {
-      for (let i = 0; i < headingList.length; i++) {
+        currentId = '#' + heading.getAttribute('id');
-        let heading = headingList[i];
+      } else {
-        if (heading.tagName === 'H1') {
+        break;
-          continue;
-        }
-        if (top > heading.offsetTop - defaultOffset) {
-          currentId = '#' + heading.getAttribute('id');
-        } else {
-          break;
-        }
       }
-    } else {
-      currentId = this.activeIdFromOutLine;
-      this.activeIdFromOutLine = null;
     }
 
     if (currentId !== this.state.activeId) {
@@ -94,10 +85,6 @@ class MarkdownViewer extends React.Component {
     }
   }
 
-  handleNavItemClick = (activeId) => {
-    this.activeIdFromOutLine = activeId;
-  }
-
   setContent(markdownContent) {
     let that = this;
 
@@ -131,10 +118,6 @@ class MarkdownViewer extends React.Component {
           navItems: navItems,
           activeId: currentId
         })
-      }else {
-        _this.setState({
-          navItems: []
-        })
       }
     });
   }

frontend/src/components/tree-view/tree.js

@@ -35,141 +35,6 @@ class Tree {
     node.children.splice(insertIndex, 0, child);
   }
 
-  removeChildNode(node, child) {
-    let children = node.children;
-    let removeNode = null;
-    let index = null;
-    for (let i = 0; i < children.length; i++) {
-      if (child.path === children[i].path) {
-        removeNode = children[i];
-        index = i;
-        break;
-      }
-    }
-    child.parent = null;
-    node.children.splice(index, 1);
-    return removeNode ? removeNode : null;
-  }
-
-  addNodeToTree(node) {
-    let parentNode = this.getNodeParentFromTree(node);
-    this.addChildToNode(parentNode, node);
-  }
-
-  removeNodeFromTree(node) {
-    let parentNode = this.getNodeParentFromTree(node);
-    this.removeChildNode(parentNode, node);
-  }
-
-  getNodeParentFromTree(node) {
-    let parentNode = node.parent;
-    let findNode = null;
-    function cb(node) {
-      if(parentNode.path === node.path){
-        findNode = node;
-        return true;
-      }
-      return false;
-    }
-    this.traverseBF(cb);
-    return findNode;
-  }
-
-  getNodeByPath(path) {
-    let findNode = null;
-    function cb(node){
-      if (node.path === path) {
-        findNode = node;
-        return true;
-      }
-      return false;
-    }
-    this.traverseBF(cb);
-    return findNode;
-  }
-
-  traverseDF(callback) {
-    let stack = [];
-    let found = false;
-    stack.unshift(this.root);
-    let currentNode = stack.shift();
-    while (!found && currentNode) {
-      found = callback(currentNode) == true ? true : false;
-      if (!found) {
-        stack.unshift(...currentNode.children);
-        currentNode = stack.shift();
-      }
-    }
-  }
-
-  traverseBF(callback) {
-    let queue = [];
-    let found = false;
-    queue.push(this.root);
-    let currentNode = queue.shift();
-    while (!found && currentNode) {
-      found = callback(currentNode) === true ? true : false;
-      if (!found) {
-        queue.push(...currentNode.children);
-        currentNode = queue.shift();
-      }
-    }
-  }
-
-  setOneNodeToActived({node}) {
-    this.setNoneNodeActived();
-    let root = this.root;
-    root.isExpanded = true;
-    let layer2 = root.hasChildren() ? root.children : null; // direct to replace root child;
-    let isLayer2 = false;
-    for (let i = 0; i < layer2.length; i++) {
-      if (node.path === layer2[i].path) {
-        isLayer2 = true;
-        break;
-      }
-    }
-    if (isLayer2) {
-      return;
-    }
-    let replaceNode = null;
-    let needReplacedNode = null;
-    while (node.parent) {
-      let flag = false;
-      node.parent.isExpanded = true;
-      for (let i = 0; i < layer2.length; i++) {
-        if (node.parent.path === layer2[i].path) {
-          replaceNode = node.parent;
-          needReplacedNode = layer2[i];
-          flag = true;
-          break;
-        }
-      }
-      if (flag) {
-        break;
-      }
-      node = node.parent;
-    }
-
-    this.removeChildNode(root, needReplacedNode);
-    this.addChildToNode(root, replaceNode);
-  }
-
-  setNoneNodeActived() {
-    function setNodeToDeactived(node) {
-      if (node.isExpanded) {
-        node.isExpanded = false;
-        if (node.hasChildren()) {
-          let children = node.children;
-          children.forEach(function(child) {
-            setNodeToDeactived(child);
-          })
-        }
-      }
-    }
-    setNodeToDeactived(this.root);
-    this.root.isExpanded = true; // default to show;
-    return true;
-  }
 
   /*
   * parse tree from javascript object

frontend/src/components/wiki-outline.js

@@ -3,10 +3,10 @@ import React from 'react';
 class WikiOutlineItem extends React.Component {
 
   handleNavItemClick = () => {
-    var activeId = this.props.item.id;
+    var index = this.props.item.key;
-    this.props.handleNavItemClick(activeId)
+    this.props.handleNavItemClick(index)
   }
-  
+
   render() {
     let item = this.props.item;
     let activeIndex = parseInt(this.props.activeIndex);
@@ -32,6 +32,14 @@ class WikiOutline extends React.Component {
     }
   }
 
+  handleNavItemClick = (index) => {
+    if (index !== this.state.activeIndex) {
+      this.setState({
+        activeIndex : index
+      })
+    }
+  }
+
   componentWillReceiveProps(nextProps) {
     let _this = this;
     let activeId = nextProps.activeId;
@@ -41,13 +49,14 @@ class WikiOutline extends React.Component {
       let flag = false;
       let item = navItems[i];
       if (item.id === activeId && item.key !== _this.state.activeIndex) {
+        let direction = item.key > _this.state.activeIndex ? "down" : "up";
+        let currentTop = parseInt(_this.state.scrollTop);
         let scrollTop = 0; 
-        if (item.key > 20) {
+        if (item.key > 20 && direction === "down") {
-          scrollTop = - (item.key - 20)*27 + "px";
+          scrollTop = currentTop - 27 + "px";
-          if (parseInt(scrollTop) > 0) { // handle scroll quickly;
+        } else if (currentTop < 0 && direction === "up") {
-            scrollTop = 0;
+          scrollTop = currentTop + 27 + "px";
-          }  
+        }
-        } 
         _this.setState({
           activeIndex : item.key,
           scrollTop: scrollTop
@@ -70,7 +79,7 @@ class WikiOutline extends React.Component {
               key={item.key} 
               item={item} 
               activeIndex={this.state.activeIndex}
-              handleNavItemClick={this.props.handleNavItemClick}
+              handleNavItemClick={this.handleNavItemClick}
             />
           )
         })}

frontend/src/css/wiki.css

@@ -64,7 +64,6 @@ img[src=""] {
   flex: 1 0 80%;
   display:flex;
   flex-direction:column;
-  min-height: 0;
 }
 
 .wiki-side-panel {
@@ -73,13 +72,9 @@ img[src=""] {
   flex-direction:column;
   overflow:hidden;
 }
-.cur-view-main {
-  min-height: 0;
-}
 
 .cur-view-container {
   display: flex;
-  min-height: 0;
 }
 
 .cur-view-container .markdown-container {
@@ -88,21 +83,19 @@ img[src=""] {
   display: flex;
   flex: 1;
   overflow: auto;
-  min-height: 0;
 }
 
 .cur-view-container .markdown-content {
-  width: calc(100% - 160px);
+  flex: 1;
+  width: calc(100% - 200px);
   padding-right: 40px;
 }
 
 .cur-view-container .markdown-outline {
-  position: fixed;
+  position: sticky;
-  padding-right: 18px;
-  top: 97px;
-  right: 0;
   width: 200px;
-  overflow: hidden;
+  padding: 0 18px;
+  top: 0;
 }
 
 .wiki-hide {
@@ -114,7 +107,6 @@ img[src=""] {
     padding-right: 40px;
   }
   .cur-view-container .markdown-content {
-    width: 100%;
     padding-right: 0;
   }
   .cur-view-container .markdown-outline {