GC-1325: impl RevisionLoader lazy mode

package.json

@@ -193,7 +193,7 @@
     "react-dropzone": "^7.0.1",
     "react-frame-component": "^4.0.0",
     "react-i18next": "=7.13.0",
-    "react-visibility-sensor": "^5.0.2",
+    "react-waypoint": "^8.1.0",
     "reveal.js": "^3.5.0",
     "sass-loader": "^7.1.0",
     "simple-load-script": "^1.0.2",

src/client/js/components/Page/RevisionLoader.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import VisibilitySensor from 'react-visibility-sensor';
+import Waypoint  from 'react-waypoint';
 
 import RevisionRenderer from './RevisionRenderer';
 
@@ -22,7 +22,13 @@ export default class RevisionLoader extends React.Component {
     };
 
     this.loadData = this.loadData.bind(this);
-    this.onVisibilityChanged = this.onVisibilityChanged.bind(this);
+    this.onWaypointChange = this.onWaypointChange.bind(this);
+  }
+
+  componentWillMount() {
+    if (!this.props.lazy) {
+      this.loadData();
+    }
   }
 
   loadData() {
@@ -55,26 +61,22 @@ export default class RevisionLoader extends React.Component {
       });
   }
 
-  onVisibilityChanged(isVisible) {
-    this.logger.info(this.props.pagePath, isVisible);
-
-    if (!isVisible) {
-      return;
+  onWaypointChange(event) {
+    if (event.currentPosition === Waypoint.above || event.currentPosition === Waypoint.inside) {
+      this.loadData();
     }
-
-    this.loadData();
   }
 
   render() {
     // ----- before load -----
-    if (!this.state.isLoaded) {
-      return <VisibilitySensor onChange={this.onVisibilityChanged} delayedCall={true}>
+    if (this.props.lazy && !this.state.isLoaded) {
+      return <Waypoint onPositionChange={this.onWaypointChange} bottomOffset='-100px'>
         <div className="wiki"></div>
-      </VisibilitySensor>;
+      </Waypoint>;
     }
 
     // ----- loading -----
-    if (!this.state.isLoaded) {
+    if (this.state.isLoading) {
       return (
         <div className="wiki">
           <div className="text-muted text-center">
@@ -107,6 +109,6 @@ RevisionLoader.propTypes = {
   pageId: PropTypes.string.isRequired,
   pagePath: PropTypes.string.isRequired,
   revisionId: PropTypes.string.isRequired,
-  lazy: PropTypes.bool.isRequired,
+  lazy: PropTypes.bool,
   highlightKeywords: PropTypes.string,
 };

src/client/js/legacy/crowi.js

@@ -17,7 +17,7 @@ require('jquery.cookie');
 require('bootstrap-select');
 
 import GrowiRenderer from '../util/GrowiRenderer';
-import RevisionRenderer from '../components/Page/RevisionRenderer';
+import RevisionLoader from '../components/Page/RevisionLoader';
 
 require('./thirdparty-js/agile-admin');
 
@@ -525,7 +525,7 @@ $(function() {
 
   // for list page
   let growiRendererForTimeline = null;
-  $('a[data-toggle="tab"][href="#view-timeline"]').on('show.bs.tab', function() {
+  $('a[data-toggle="tab"][href="#view-timeline"]').on('shown.bs.tab', function() {
     const isShown = $('#view-timeline').data('shown');
 
     if (growiRendererForTimeline == null) {
@@ -535,16 +535,21 @@ $(function() {
     if (isShown == 0) {
       $('#view-timeline .timeline-body').each(function() {
         const id = $(this).attr('id');
-        const contentId = '#' + id + ' > script';
         const revisionBody = '#' + id + ' .revision-body';
         const revisionBodyElem = document.querySelector(revisionBody);
         /* eslint-disable no-unused-vars */
         const revisionPath = '#' + id + ' .revision-path';
         /* eslint-enable */
-        const pagePath = document.getElementById(id).getAttribute('data-page-path');
-        const markdown = entities.decodeHTML($(contentId).html());
-
-        ReactDOM.render(<RevisionRenderer crowi={crowi} crowiRenderer={growiRendererForTimeline} markdown={markdown} pagePath={pagePath} />, revisionBodyElem);
+        const timelineElm = document.getElementById(id);
+        const pageId = timelineElm.getAttribute('data-page-id');
+        const pagePath = timelineElm.getAttribute('data-page-path');
+        const revisionId = timelineElm.getAttribute('data-revision');
+
+        ReactDOM.render(
+          <RevisionLoader lazy={true}
+            crowi={crowi} crowiRenderer={growiRendererForTimeline}
+            pageId={pageId} pagePath={pagePath} revisionId={revisionId} />,
+          revisionBodyElem);
       });
 
       $('#view-timeline').data('shown', 1);

src/server/views/widget/page_list_and_timeline.html

@@ -26,7 +26,7 @@
     {% if isEnabledTimeline() %}
     <div class="tab-pane m-t-30" id="view-timeline" data-shown=0>
       {% for page in pages %}
-      <div class="timeline-body" id="id-{{ page.id }}" data-page-path="{{ page.path }}">
+      <div class="timeline-body" id="id-{{ page.id }}" data-page-id="{{ page.id }}" data-page-path="{{ page.path }}" data-revision="{{ page.revision.toString() }}">
         <div class="panel panel-timeline">
           <div class="panel-heading"><a href="{{ page.path }}">{{ decodeURIComponent(page.path) }}</a></div>
           <div class="panel-body">

src/server/views/widget/page_list_and_timeline_kibela.html

@@ -26,7 +26,7 @@
     {% if isEnabledTimeline() %}
     <div class="tab-pane m-t-30" id="view-timeline" data-shown=0>
       {% for page in pages %}
-      <div class="timeline-body" id="id-{{ page.id }}" data-page-path="{{ page.path }}">
+      <div class="timeline-body" id="id-{{ page.id }}" data-page-id="{{ page.id }}" data-page-path="{{ page.path }}" data-revision="{{ page.revision._id }}">
         <div class="panel panel-timeline">
           <div class="panel-heading"><a href="{{ page.path }}">{{ decodeURIComponent(page.path) }}</a></div>
           <div class="panel-body">

yarn.lock

@@ -2189,6 +2189,10 @@ console-control-strings@^1.0.0, console-control-strings@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
 
+"consolidated-events@^1.1.0 || ^2.0.0":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/consolidated-events/-/consolidated-events-2.0.2.tgz#da8d8f8c2b232831413d9e190dc11669c79f4a91"
+
 constants-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
@@ -7251,6 +7255,13 @@ prop-types-extra@^1.0.1:
   dependencies:
     warning "^3.0.0"
 
+prop-types@^15.0.0, prop-types@^15.6.2:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
+  dependencies:
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
@@ -7267,13 +7278,6 @@ prop-types@^15.6.1:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-prop-types@^15.6.2:
-  version "15.6.2"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
-  dependencies:
-    loose-envify "^1.3.1"
-    object-assign "^4.1.1"
-
 proxy-addr@~2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec"
@@ -7499,6 +7503,10 @@ react-i18next@=7.13.0:
     html-parse-stringify2 "2.0.1"
     prop-types "^15.6.0"
 
+react-is@^16.6.3:
+  version "16.6.3"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.3.tgz#d2d7462fcfcbe6ec0da56ad69047e47e56e7eac0"
+
 react-onclickoutside@^6.1.1:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.7.0.tgz#997a4d533114c9a0a104913638aa26afc084f75c"
@@ -7538,11 +7546,13 @@ react-transition-group@^2.0.0, react-transition-group@^2.2.0:
     prop-types "^15.5.8"
     warning "^3.0.0"
 
-react-visibility-sensor@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/react-visibility-sensor/-/react-visibility-sensor-5.0.2.tgz#e360fff81572cb3a2a9fd680484447a9da09a55d"
+react-waypoint@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/react-waypoint/-/react-waypoint-8.1.0.tgz#91d926a2fd1be4cbd0351cb8c3d494fac0ef1699"
   dependencies:
-    prop-types "^15.6.2"
+    consolidated-events "^1.1.0 || ^2.0.0"
+    prop-types "^15.0.0"
+    react-is "^16.6.3"
 
 react@^16.4.1:
   version "16.4.1"