site: remove scrollTo

smileluo · May 27, 2016 · 6e59cae · 6e59cae
1 parent 7017c9e
commit 6e59cae
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 57 deletions.
diff --git a/site/bisheng-plugin-antd/lib/browser.js b/site/bisheng-plugin-antd/lib/browser.js
@@ -6,6 +6,10 @@ const JsonML = require('jsonml.js/lib/utils');
 const VideoPlayer = require('./VideoPlayer');
 const ImagePreview = require('./ImagePreview');
 
+function isHeading(node) {
+  return /h[1-6]/i.test(JsonML.getTagName(node));
+}
+
 module.exports = () => {
   return {
     converters: [
@@ -15,6 +19,17 @@ module.exports = () => {
       [(node) => typeof node === 'function', (node, index) => {
         return React.cloneElement(node(React, ReactDOM), { key: index });
       }],
+      [(node) => isHeading(node), (node, index) => {
+        const children = JsonML.getChildren(node);
+        return React.createElement(JsonML.getTagName(node), {
+          key: index,
+          id: children,
+          ...JsonML.getAttributes(node),
+        }, [
+          <span key="title">{children.map((child) => toReactComponent(child))}</span>,
+          <a href={`#${children}`} className="anchor" key="anchor">#</a>,
+        ]);
+      }],
       [(node) => JsonML.getTagName(node) === 'video', (node, index) =>
         <VideoPlayer video={JsonML.getAttributes(node)} key={index} />,
       ],

diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less
@@ -39,7 +39,7 @@
   background: #fff;
 }
 
-.code-box.code-box-target {
+.code-box:target {
   border: 1px solid rgba(45, 183, 245, 0.7);
   box-shadow: 0 0 4px rgba(45, 183, 245, 0.5);
 }

diff --git a/site/theme/template/Content/Article.jsx b/site/theme/template/Content/Article.jsx
@@ -1,6 +1,5 @@
 import React, { Children, cloneElement } from 'react';
 import DocumentTitle from 'react-document-title';
-import { Link } from 'react-router';
 import { getChildren } from 'jsonml.js/lib/utils';
 import { Timeline } from 'antd';
 import * as utils from '../utils';
@@ -41,32 +40,34 @@ export default class Article extends React.Component {
     });
   }
   render() {
-    const { content, location } = this.props;
-    const jumper = (content.toc || []).map((node) => {
+    const props = this.props;
+    const content = props.content;
+    const jumper = (content.toc || []).map((node, index) => {
+      const headingText = getChildren(node)[0];
       return (
-        <li key={getChildren(node)[0]}>
-          <Link to={{ pathname: location.pathname, query: { scrollTo: getChildren(node)[0] } }}>
-          {this.props.utils.toReactComponent(getChildren(node)[0])}
-          </Link>
+        <li key={index}>
+          <a href={`#${headingText}`}>
+          {props.utils.toReactComponent(headingText)}
+          </a>
         </li>
       );
     });
 
     const { meta, description } = content;
-    const { title, chinese, english } = meta;
+    const { title, subtitle, chinese, english } = meta;
     return (
       <DocumentTitle title={`${title || chinese || english} - Ant Design`}>
         <article className="markdown">
           <h1>
-            {meta.title || meta.english} {meta.subtitle || meta.chinese}
+            {title || english}
             {
-              !meta.subtitle ? null :
-                <span className="subtitle">{meta.subtitle}</span>
+              (!subtitle && !chinese) ? null :
+                <span className="subtitle">{subtitle || chinese}</span>
             }
           </h1>
           {
             !description ? null :
-              this.props.utils.toReactComponent(
+              props.utils.toReactComponent(
                 ['section', { className: 'markdown' }].concat(getChildren(description))
               )
           }
@@ -76,7 +77,7 @@ export default class Article extends React.Component {
               null
           }
           {
-            this.getArticle(this.props.utils.toReactComponent(
+            this.getArticle(props.utils.toReactComponent(
               ['section', { className: 'markdown' }].concat(getChildren(content.content))
             ))
           }

diff --git a/site/theme/template/Content/ComponentDoc.jsx b/site/theme/template/Content/ComponentDoc.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router';
 import DocumentTitle from 'react-document-title';
 import classNames from 'classnames';
 import { Row, Col, Icon, Affix } from 'antd';
@@ -28,7 +27,6 @@ export default class ComponentDoc extends React.Component {
   render() {
     const props = this.props;
     const { doc, location } = props;
-    const scrollTo = location.query.scrollTo;
     const { content, meta } = doc;
     const locale = this.context.intl.locale;
     const demos = Object.keys(props.demos).map((key) => props.demos[key])
@@ -42,13 +40,13 @@ export default class ComponentDoc extends React.Component {
       .forEach((demoData, index) => {
         if (index % 2 === 0 || isSingleCol) {
           leftChildren.push(
-            <Demo {...demoData} className={scrollTo === demoData.meta.id ? 'code-box-target' : ''}
+            <Demo {...demoData}
               key={index} utils={props.utils}
               expand={expand} pathname={location.pathname} />
           );
         } else {
           rightChildren.push(
-            <Demo {...demoData} className={scrollTo === demoData.meta.id ? 'code-box-target' : ''}
+            <Demo {...demoData}
               key={index} utils={props.utils}
               expand={expand} pathname={location.pathname} />
           );
@@ -61,14 +59,12 @@ export default class ComponentDoc extends React.Component {
 
     const jumper = demos.map((demo) => {
       const title = demo.meta.title;
-      const localizeTitle = typeof title === 'object' ?
-              title[locale] : title;
+      const localizeTitle = title[locale] || title;
       return (
         <li key={demo.meta.id}>
-          <Link className={demo.meta.id === scrollTo ? 'current' : ''}
-            to={{ pathname: location.pathname, query: { scrollTo: `${demo.meta.id}` } }}>
+          <a href={`#${demo.meta.id}`}>
             {localizeTitle}
-          </Link>
+          </a>
         </li>
       );
     });
@@ -114,7 +110,7 @@ export default class ComponentDoc extends React.Component {
             props.utils.toReactComponent(
               ['section', {
                 className: 'markdown api-container',
-              }].concat(doc.api || [])
+              }].concat(getChildren(doc.api || []))
             )
           }
         </article>

diff --git a/site/theme/template/Content/Demo.jsx b/site/theme/template/Content/Demo.jsx
@@ -1,7 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router';
 import classNames from 'classnames';
-
 const isLocal = location.port;
 
 export default class Demo extends React.Component {
@@ -30,20 +28,33 @@ export default class Demo extends React.Component {
   }
 
   render() {
-    const { className, meta, content, preview, style, src,
-            code, highlightedStyle, pathname } = this.props;
+    const props = this.props;
+    const {
+      meta,
+      src,
+      preview,
+      content,
+      code,
+      style,
+      highlightedStyle,
+    } = props;
+
     const codeExpand = this.state.codeExpand;
     const codeBoxClass = classNames({
       'code-box': true,
-      [className]: className,
       expand: codeExpand,
     });
+
     const locale = this.context.intl.locale;
+    const localizedTitle = meta.title[locale] || meta.title;
     const localizeIntro = content[locale] || content;
-    const introChildren = this.props.utils
-      .toReactComponent(['div'].concat(localizeIntro));
-    const localizedTitle = typeof meta.title === 'object' ?
-            meta.title[locale] : meta.title;
+    const introChildren = props.utils
+            .toReactComponent(['div'].concat(localizeIntro));
+
+    const highlightClass = classNames({
+      'highlight-wrapper': true,
+      'highlight-wrapper-expand': codeExpand,
+    });
     return (
       <section className={codeBoxClass} id={meta.id}>
         <section className="code-box-demo">
@@ -60,19 +71,19 @@ export default class Demo extends React.Component {
         </section>
         <section className="code-box-meta markdown">
           <div className="code-box-title">
-            <Link to={{ pathname, query: { scrollTo: meta.id } }}>
+            <a href={`#${meta.id}`}>
               {localizedTitle}
-            </Link>
+            </a>
           </div>
           {introChildren}
           <span className="collapse anticon anticon-circle-o-right"
             onClick={this.handleCodeExapnd}
             unselectable="none" />
         </section>
-        <section className={`highlight-wrapper ${codeExpand ? 'highlight-wrapper-expand' : ''}`}
+        <section className={highlightClass}
           key="code">
           <div className="highlight">
-            {this.props.utils.toReactComponent(code)}
+            {props.utils.toReactComponent(code)}
           </div>
           {
             highlightedStyle ?

diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx
@@ -14,34 +14,15 @@ export default class MainContent extends React.Component {
   }
 
   componentDidMount() {
-    this.scrollToAnchor(this.props);
+    scrollIntoView(document.body, document, { alignWithTop: true });
   }
 
   shouldComponentUpdate(nextProps) {
-    this.scrollToAnchor(nextProps);
-
     const pathname = this.props.location.pathname;
     return pathname !== nextProps.location.pathname ||
       /^\/components\//i.test(pathname);
   }
 
-  scrollToAnchor(props) {
-    const scrollTo = props.location.query.scrollTo;
-    if (scrollTo !== undefined) {
-      const target = document.getElementById(scrollTo);
-
-      if (target !== null) {
-        scrollIntoView(
-          target,
-          document,
-          { alignWithTop: true, onlyScrollIfNeeded: false }
-        );
-      }
-    } else {
-      scrollIntoView(document.body, document, { alignWithTop: true });
-    }
-  }
-
   getActiveMenuItem(props) {
     return props.params.children;
   }