impl PagePath component

lib/views/page.html

@@ -14,7 +14,7 @@
 
 
     <div class="flex-title-line">
-      <h1 class="title flex-item-title" id="revision-path">{{ path|insertSpaceToEachSlashes }}</h1>
+      <h1 class="title flex-item-title" id="revision-path"></h1>
       {% if page %}
       <div class="flex-item-action">
         <a href="#" title="Bookmark" class="bookmark-link" id="bookmark-button" data-csrftoken="{{ csrf() }}" data-bookmarked="0"><i class="fa fa-star-o"></i></a>

resource/js/app.js

@@ -9,6 +9,7 @@ import SearchPage       from './components/SearchPage';
 import PageListSearch   from './components/PageListSearch';
 import PageHistory      from './components/PageHistory';
 import SeenUserList     from './components/SeenUserList';
+import PagePath         from './components/Page/PagePath';
 //import PageComment  from './components/PageComment';
 
 if (!window) {
@@ -17,8 +18,10 @@ if (!window) {
 
 const mainContent = document.querySelector('#content-main');
 let pageId = null;
+let pagePath;
 if (mainContent !== null) {
   pageId = mainContent.attributes['data-page-id'].value;
+  pagePath = mainContent.attributes['data-path'].value;
 }
 
 // FIXME
@@ -43,6 +46,7 @@ const componentMappings = {
   //'revision-history': <PageHistory pageId={pageId} />,
   //'page-comment': <PageComment />,
   'seen-user-list': <SeenUserList />,
+  'revision-path': <PagePath pagePath={pagePath} />,
 };
 
 Object.keys(componentMappings).forEach((key) => {

resource/js/components/Page/PagePath.js

@@ -2,63 +2,57 @@ import React from 'react';
 
 export default class PagePath extends React.Component {
 
-  // Original Crowi.linkPath
-  /*
-  Crowi.linkPath = function(revisionPath) {
-    var $revisionPath = revisionPath || '#revision-path';
-    var $title = $($revisionPath);
-    var pathData = $('#content-main').data('path');
+  constructor(props) {
+    super(props);
 
-    if (!pathData) {
-      return ;
-    }
-
-    var realPath = pathData.trim();
-    if (realPath.substr(-1, 1) == '/') {
-      realPath = realPath.substr(0, realPath.length - 1);
-    }
+    this.state = {
+      pages: [],
+    };
+  }
 
-    var path = '';
-    var pathHtml = '';
-    var splittedPath = realPath.split(/\//);
-    splittedPath.shift();
-    splittedPath.forEach(function(sub) {
-      path += '/';
-      pathHtml += ' <a href="' + path + '">/</a> ';
-      if (sub) {
-        path += sub;
-        pathHtml += '<a href="' + path + '">' + sub + '</a>';
-      }
+  componentWillMount() {
+    let splitted = this.props.pagePath.split(/\//);
+    splitted.shift();   // omit first element with shift()
+
+    let pages = [];
+    let parentPath = '/';
+    splitted.forEach((pageName) => {
+      pages.push({
+        pagePath: parentPath + pageName,
+        pageName: pageName,
+      });
+      parentPath += pageName + '/';
     });
-    if (path.substr(-1, 1) != '/') {
-      path += '/';
-      pathHtml += ' <a href="' + path + '" class="last-path">/</a>';
-    }
-    $title.html(pathHtml);
-  };
-  */
 
-  linkPath(path) {
-    return path;
+    this.setState({ pages });
   }
 
   render() {
-    const page = this.props.page;
-    const shortPath = this.getShortPath(page.path);
-    const pathPrefix = page.path.replace(new RegExp(shortPath + '(/)?$'), '');
+    const pageLength = this.state.pages.length;
+    const afterElements = [];
+    this.state.pages.forEach((page, index) => {
+      afterElements.push(
+        <span key={page.pagePath} className="path-segment">
+          <a href={page.pagePath}>{page.pageName}</a>
+        </span>);
+      afterElements.push(
+        <span key={page.pagePath+'/'} className="separator">
+          <a href={page.pagePath+'/'} className={(index==pageLength-1) ? 'last-path' : ''}>/</a>
+        </span>
+      );
+    });
 
     return (
       <span className="page-path">
-        {pathPrefix}<strong>{shortPath}</strong>
+        <span className="separator">
+          <a href="/">/</a>
+        </span>
+        {afterElements}
       </span>
     );
   }
 }
 
 PagePath.propTypes = {
-  page: React.PropTypes.object.isRequired,
-};
-
-PagePath.defaultProps = {
-  page: {},
+  pagePath: React.PropTypes.string.isRequired,
 };

resource/js/legacy/crowi.js

@@ -18,39 +18,6 @@ Crowi.createErrorView = function(msg) {
   $('#main').prepend($('<p class="alert-message error">' + msg + '</p>'));
 };
 
-Crowi.linkPath = function(revisionPath) {
-  var $revisionPath = revisionPath || '#revision-path';
-  var $title = $($revisionPath);
-  var pathData = $('#content-main').data('path');
-
-  if (!pathData) {
-    return ;
-  }
-
-  var realPath = pathData.trim();
-  if (realPath.substr(-1, 1) == '/') {
-    realPath = realPath.substr(0, realPath.length - 1);
-  }
-
-  var path = '';
-  var pathHtml = '';
-  var splittedPath = realPath.split(/\//);
-  splittedPath.shift();
-  splittedPath.forEach(function(sub) {
-    path += '/';
-    pathHtml += ' <a href="' + Crowi.escape(path) + '">/</a> ';
-    if (sub) {
-      path += sub;
-      pathHtml += '<a href="' + Crowi.escape(path) + '">' + Crowi.escape(sub) + '</a>';
-    }
-  });
-  if (path.substr(-1, 1) != '/') {
-    path += '/';
-    pathHtml += ' <a href="' + Crowi.escape(path) + '" class="last-path">/</a>';
-  }
-  $title.html(pathHtml);
-};
-
 Crowi.correctHeaders = function(contentId) {
   // h1 ~ h6 の id 名を補正する
   var $content = $(contentId || '#revision-body-content');
@@ -194,8 +161,6 @@ $(function() {
     }
   };
 
-  Crowi.linkPath();
-
   $('[data-toggle="popover"]').popover();
   $('[data-toggle="tooltip"]').tooltip();
   $('[data-tooltip-stay]').tooltip('show');