1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-03 07:55:36 +00:00

update repo wiki mode

This commit is contained in:
ilearnit
2018-09-12 14:15:27 +08:00
parent 15b5be489d
commit 0fc103e9b9
3 changed files with 156 additions and 45 deletions

View File

@@ -1,12 +1,10 @@
import React, { Component } from 'react';
import { gettext, repoID, serviceUrl, slug, siteRoot } from '../../components/constance';
import { gettext, repoID, serviceUrl, slug, siteRoot, isPro } from '../../components/constance';
import Search from '../../components/search';
import Account from '../../components/account';
import MarkdownViewer from '../../components/markdown-viewer';
import TreeDirView from '../../components/tree-dir-view/tree-dir-view';
// const repoName = window.repo.config.repo_name
class MainPanel extends Component {
onMenuClick = () => {
@@ -60,15 +58,17 @@ class MainPanel extends Component {
<a className="btn btn-secondary btn-topbar sf2-icon-grid-view" id='grid' title={gettext("Grid")} onClick={this.switchViewMode}></a>
</div>
<div className="common-toolbar">
<Search onSearchedClick={this.props.onSearchedClick}
placeholder={gettext("Search files in this library")}/>
{isPro && <Search onSearchedClick={this.props.onSearchedClick}
placeholder={gettext("Search files in this wiki")}
/>
}
<Account />
</div>
</div>
<div className="cur-view-main">
<div className="cur-view-path">
<div className="path-containter">
<a href={siteRoot + '#my-libs/'} className="normal">{gettext("Libraries")}</a>
<a href={siteRoot + '#common/'} className="normal">{gettext("Libraries")}</a>
<span className="path-split">/</span>
<a href={siteRoot + 'wiki/lib/' + repoID + '/'} className="normal">{slug}</a>
{pathElem}

View File

@@ -3,6 +3,9 @@ import TreeView from '../../components/tree-view/tree-view';
import { siteRoot, logoPath, mediaUrl, siteTitle, logoWidth, logoHeight } from '../../components/constance';
import NodeMenu from '../../components/menu-component/node-menu';
import MenuControl from '../../components/menu-component/node-menu-control';
import Delete from '../../components/menu-component/menu-dialog/delete-dialog';
import Rename from '../../components/menu-component/menu-dialog/rename-dialog';
import CreateFlieFolder from '../../components/menu-component/menu-dialog/create-fileforder-dialog';
const gettext = window.gettext;
@@ -19,7 +22,11 @@ class SidePanel extends Component {
top: 0
},
isLoadFailed: false,
isMenuIconShow: false
isMenuIconShow: false,
showDelete: false,
showAddFileFolder: false,
showRename: false,
isFile: false
}
this.searchedPath = null;
}
@@ -71,26 +78,52 @@ class SidePanel extends Component {
}
onHideContextMenu = () => {
if (!this.state.isShowMenu) {
return;
}
this.setState({
isShowMenu: false,
isNodeItemFrezee: false
})
}
toggleAddFileFolder = (flag) => {
let isFile = flag === true ? true : false;
this.setState({
showAddFileFolder: !this.state.showAddFileFolder,
isFile: isFile
});
this.onHideContextMenu();
}
toggleRename = () => {
this.setState({showRename: !this.state.showRename});
this.onHideContextMenu();
}
toggleDelete = () => {
this.setState({showDelete: !this.state.showDelete});
this.onHideContextMenu();
}
onAddFolderNode = (dirPath) => {
this.setState({showAddFileFolder: !this.state.showAddFileFolder});
this.props.onAddFolderNode(dirPath);
}
onAddFileNode = (filePath) => {
this.setState({showAddFileFolder: !this.state.showAddFileFolder});
this.props.onAddFileNode(filePath);
}
onRenameNode = (newName) => {
this.setState({showRename: !this.state.showRename})
let node = this.state.currentNode;
this.props.onRenameNode(node, newName)
}
onDeleteNode = () => {
this.setState({showDelete: !this.state.showDelete})
let node = this.state.currentNode;
this.props.onDeleteNode(node);
}
@@ -109,6 +142,22 @@ class SidePanel extends Component {
document.removeEventListener('click', this.onHideContextMenu);
}
addFolderCancel = () => {
this.setState({showAddFileFolder: !this.state.showAddFileFolder});
}
addFileCancel = () => {
this.setState({showAddFileFolder: !this.state.showAddFileFolder});
}
deleteCancel = () => {
this.setState({showDelete: !this.state.showDelete})
}
renameCancel = () => {
this.setState({showRename: !this.state.showRename})
}
render() {
return (
<div className={`wiki-side-panel ${this.props.closeSideBar ? "": "left-zero"}`}>
@@ -135,7 +184,6 @@ class SidePanel extends Component {
<div className="wiki-pages-container">
{this.props.treeData &&
<TreeView
permission={this.props.permission}
currentFilePath={this.props.currentFilePath}
treeData={this.props.treeData}
currentNode={this.state.currentNode}
@@ -145,16 +193,39 @@ class SidePanel extends Component {
onDirCollapse={this.props.onDirCollapse}
/>
}
{this.state.isShowMenu &&
<NodeMenu
isShowMenu={this.state.isShowMenu}
menuPosition={this.state.menuPosition}
currentNode={this.state.currentNode}
onHideContextMenu={this.onHideContextMenu}
onDeleteNode={this.onDeleteNode}
onAddFileNode={this.onAddFileNode}
onAddFolderNode={this.onAddFolderNode}
onRenameNode={this.onRenameNode}
toggleAddFileFolder={this.toggleAddFileFolder}
toggleRename={this.toggleRename}
toggleDelete={this.toggleDelete}
/>
}
{this.state.showDelete &&
<Delete
currentNode={this.state.currentNode}
handleSubmit={this.onDeleteNode}
toggleCancel={this.deleteCancel}
/>
}
{this.state.showAddFileFolder &&
<CreateFlieFolder
isFile={this.state.isFile}
currentNode={this.state.currentNode}
onAddFolder={this.onAddFolderNode}
addFolderCancel={this.addFolderCancel}
onAddFile={this.onAddFileNode}
addFileCancel={this.addFileCancel}
/>
}
{this.state.showRename &&
<Rename
currentNode={this.state.currentNode}
onRename={this.onRenameNode}
toggleCancel={this.renameCancel}
/>
}
</div>
</div>
</div>

View File

@@ -47,6 +47,7 @@ class Wiki extends Component {
treeData.parseListToTree(files);
let node = treeData.getNodeByPath(filePath);
treeData.expandNode(node);
if (node.isDir()) {
this.exitViewFileState(treeData, node);
this.setState({isFileLoading: false});
@@ -60,6 +61,7 @@ class Wiki extends Component {
lastModified: moment.unix(mtime).fromNow(),
permission: permission,
filePath: filePath,
isFileLoading: false
})
seafileAPI.getFileDownloadLink(repoID, filePath).then((res) => {
@@ -104,10 +106,9 @@ class Wiki extends Component {
content: res.data,
isFileLoading: false
})
})
});
})
})
let fileUrl = serviceUrl + '/wiki/lib/' + repoID + filePath;
window.history.pushState({urlPath: fileUrl, filePath: filePath}, filePath, fileUrl);
@@ -134,6 +135,9 @@ class Wiki extends Component {
if (this.isInternalMarkdownLink(url)) {
let path = this.getPathFromInternalMarkdownLink(url);
this.initMainPanelData(path);
} else if (this.isInternalDirLink(url)) {
let path = this.getPathFromInternalDirLink(url);
this.initWikiData(path);
} else {
window.location.href = url;
}
@@ -151,17 +155,15 @@ class Wiki extends Component {
let tree = this.state.tree_data.clone();
let node = tree.getNodeByPath(path);
tree.setNodeToActivated(node);
let path = node.path; //node is file
this.enterViewFileState(tree, node, path);
tree.expandNode(node);
this.enterViewFileState(tree, node, node.path);
}
}
onMainNavBarClick = (nodePath) => {
let tree = this.state.tree_data.clone();
let node = tree.getNodeByPath(nodePath);
tree.setNodeToActivated(node);
tree.expandNode(node);
this.exitViewFileState(tree, node);
@@ -172,7 +174,7 @@ class Wiki extends Component {
onMainNodeClick = (node) => {
let tree = this.state.tree_data.clone();
tree.setNodeToActivated(node);
tree.expandNode(node);
if (node.isMarkdown()) {
this.initMainPanelData(node.path);
this.enterViewFileState(tree, node, node.path);
@@ -192,6 +194,13 @@ class Wiki extends Component {
this.enterViewFileState(tree, node, node.path);
} else if(node instanceof Node && node.isDir()){
let tree = this.state.tree_data.clone();
if (this.state.filePath === node.path) {
if (node.isExpanded) {
tree.collapseNode(node);
} else {
tree.expandNode(node);
}
}
this.exitViewFileState(tree, node);
} else {
const w=window.open('about:blank');
@@ -232,7 +241,7 @@ class Wiki extends Component {
let parentNode = tree.getNodeByPath(parentPath);
tree.addNodeToParent(node, parentNode);
if (this.state.isViewFileState) {
tree.setNodeToActivated(node);
tree.expandNode(node);
this.setState({
tree_data: tree,
changedNode: node
@@ -256,7 +265,7 @@ class Wiki extends Component {
let parentNode = tree.getNodeByPath(parentPath);
tree.addNodeToParent(node, parentNode);
if (this.state.isViewFileState) {
tree.setNodeToActivated(node);
tree.expandNode(node);
this.setState({
tree_data: tree,
changedNode: node
@@ -272,15 +281,17 @@ class Wiki extends Component {
let filePath = node.path;
if (node.isMarkdown()) {
editorUtilities.renameFile(filePath, newName).then(res => {
let date = new Date().getTime()/1000;
let cloneNode = node.clone();
tree.updateNodeParam(node, "name", newName);
node.name = newName;
let date = new Date().getTime()/1000;
tree.updateNodeParam(node, "last_update_time", moment.unix(date).fromNow());
node.last_update_time = moment.unix(date).fromNow();
if (this.state.isViewFileState) {
if (this.isModifyCurrentFile(node)) {
tree.setNodeToActivated(node);
if (this.isModifyCurrentFile(cloneNode)) {
tree.expandNode(node);
this.setState({
tree_data: tree,
changedNode: node
@@ -290,23 +301,29 @@ class Wiki extends Component {
this.setState({tree_data: tree});
}
} else {
this.setState({tree_data: tree});
let parentNode = tree.findNodeParentFromTree(node);
this.setState({
tree_data: tree,
changedNode: parentNode
});
}
})
} else if (node.isDir()) {
editorUtilities.renameDir(filePath, newName).then(res => {
let currentFilePath = this.state.filePath;// the sequence is must right
let currentFileNode = tree.getNodeByPath(currentFilePath);
let isPathEqual = (node.path === currentFilePath);
let date = new Date().getTime()/1000;
let currentFilePath = this.state.filePath;
let currentFileNode = tree.getNodeByPath(currentFilePath);
let nodePath = node.path;
tree.updateNodeParam(node, "name", newName);
node.name = newName; // just synchronization node data && tree data;
node.name = newName;
let date = new Date().getTime()/1000;
tree.updateNodeParam(node, "last_update_time", moment.unix(date).fromNow());
node.last_update_time = moment.unix(date).fromNow();
if (this.state.isViewFileState) {
if (this.isModifyContainsCurrentFile(node)) {
tree.setNodeToActivated(currentFileNode);
if (currentFilePath.indexOf(nodePath) > -1) {
tree.expandNode(currentFileNode);
this.setState({
tree_data: tree,
changedNode: currentFileNode
@@ -316,8 +333,11 @@ class Wiki extends Component {
this.setState({tree_data: tree});
}
} else {
if (isPathEqual || node.path.indexOf(currentFilePath) > -1) {
tree.setNodeToActivated(currentFileNode);
if (nodePath === currentFilePath) { // old node
tree.expandNode(node);
this.exitViewFileState(tree, node);
} else if (node.path.indexOf(currentFilePath) > -1) { // new node
tree.expandNode(currentFileNode);
this.exitViewFileState(tree, currentFileNode);
} else {
this.setState({tree_data: tree});
@@ -349,7 +369,7 @@ class Wiki extends Component {
if (this.state.isViewFileState) {
if (isCurrentFile) {
let homeNode = this.getHomeNode(tree);
tree.setNodeToActivated(homeNode);
tree.expandNode(homeNode);
this.setState({
tree_data: tree,
changedNode: homeNode
@@ -451,6 +471,11 @@ class Wiki extends Component {
return re.test(url);
}
isInternalDirLink(url) {
var re = new RegExp(serviceUrl + '/#[a-z\-]*?/lib/' + repoID + '/.*');
return re.test(url);
}
getPathFromInternalMarkdownLink(url) {
var re = new RegExp(serviceUrl + '/lib/' + repoID + '/file' + "(.*\.md)");
var array = re.exec(url);
@@ -458,6 +483,22 @@ class Wiki extends Component {
return path;
}
getPathFromInternalDirLink(url) {
var re = new RegExp(serviceUrl + '/#[a-z\-]*?/lib/' + repoID + "(/.*)");
var array = re.exec(url);
var path = decodeURIComponent(array[1]);
var dirPath = path.substring(1);
var re = new RegExp("(^/.*)");
if (re.test(dirPath)) {
path = dirPath;
} else {
path = '/' + dirPath
}
return path;
}
render() {
return (
<div id="main" className="wiki-main">
@@ -466,7 +507,6 @@ class Wiki extends Component {
closeSideBar={this.state.closeSideBar}
onCloseSide ={this.onCloseSide}
treeData={this.state.tree_data}
permission={this.state.permission}
currentFilePath={this.state.filePath}
changedNode={this.state.changedNode}
onAddFolderNode={this.onAddFolderNode}