navigate page description

Author: ShMcK

lib/components/Page/PageDescription/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var _this = this;
+var React = require('react');
+var index_1 = require('../../index');
+var Card_1 = require('material-ui/Card');
+var styles = {
+    margin: '5px'
+};
+var PageDescription = function (_a) {
+    var title = _a.title, content = _a.content, open = _a.open, click = _a.click;
+    var contentArray = content.split('\n\n');
+    return (React.createElement(Card_1.Card, {style: styles, initiallyExpanded: open || false}, title
+        ? React.createElement(Card_1.CardHeader, {title: title, actAsExpander: true, showExpandableButton: true}) : null, React.createElement(Card_1.CardText, {expandable: true}, contentArray.map(function (c) { return (React.createElement(index_1.Markdown, {onClick: click.bind(_this, c)}, c)); }))));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = PageDescription;

lib/components/Page/index.js

@@ -4,10 +4,21 @@ var __extends = (this && this.__extends) || function (d, b) {
     function __() { this.constructor = d; }
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 };
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
 var React = require('react');
-var index_1 = require('../index');
+var react_redux_1 = require('react-redux');
+var PageDescription_1 = require('./PageDescription');
 var Tasks_1 = require('./Tasks');
 var Top_1 = require('../TopPanel/Top');
+var actions_1 = require('../../actions');
 var styles = {
     width: '100%',
     overflowY: 'scroll',
@@ -24,13 +35,21 @@ var Page = (function (_super) {
         Top_1.default.toggle(false);
     };
     Page.prototype.render = function () {
-        var _a = this.props, tutorial = _a.tutorial, pagePosition = _a.pagePosition, packageJson = _a.packageJson;
+        var _a = this.props, tutorial = _a.tutorial, pagePosition = _a.pagePosition, packageJson = _a.packageJson, markdownOpen = _a.markdownOpen;
         var page = tutorial.pages[pagePosition];
         if (!page) {
             return null;
         }
-        return (React.createElement("section", {style: styles, className: 'cr-page'}, React.createElement(index_1.ContentCard, {title: page.title, content: page.description, open: true}), React.createElement(Tasks_1.default, {tasks: page.tasks, page: page, config: packageJson.config, pagePosition: pagePosition})));
+        return (React.createElement("section", {style: styles, className: 'cr-page'}, React.createElement(PageDescription_1.default, {title: page.title, content: page.description, open: true, click: markdownOpen.bind(this)}), React.createElement(Tasks_1.default, {tasks: page.tasks, page: page, config: packageJson.config, pagePosition: pagePosition})));
     };
+    Page = __decorate([
+        react_redux_1.connect(null, function (dispatch) {
+            return {
+                markdownOpen: function (content) { return dispatch(actions_1.editorMarkdownOpen(null, content)); }
+            };
+        }), 
+        __metadata('design:paramtypes', [])
+    ], Page);
     return Page;
 }(React.Component));
 Object.defineProperty(exports, "__esModule", { value: true });

lib/components/common/Markdown.js

@@ -24,8 +24,8 @@ function formatText(text) {
 }
 ;
 var Markdown = function (_a) {
-    var style = _a.style, children = _a.children;
-    return (React.createElement("span", {className: 'cr-markdown', style: style ? style : null, dangerouslySetInnerHTML: { __html: formatText(children) }}));
+    var style = _a.style, children = _a.children, onClick = _a.onClick;
+    return (React.createElement("span", {className: 'cr-markdown', onClick: onClick, style: style ? style : null, dangerouslySetInnerHTML: { __html: formatText(children) }}));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Markdown;

lib/subscriptions.js

@@ -12,8 +12,10 @@ function onActivate() {
     }));
     atom.workspace.observeTextEditors(function (editor) {
         subscriptions.add(editor.onDidSave(function () {
-            store_1.default.dispatch(actions_1.tutorialBuild());
-            store_1.default.dispatch(actions_1.tutorialLoad());
+            if (store_1.default.getState().window) {
+                store_1.default.dispatch(actions_1.tutorialBuild());
+                store_1.default.dispatch(actions_1.tutorialLoad());
+            }
         }));
     });
     return subscriptions;

src/components/Page/PageDescription/index.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import {Markdown} from '../../index';
+import {Card, CardHeader, CardText} from 'material-ui/Card';
+
+const styles = {
+  margin: '5px'
+};
+
+const PageDescription: React.StatelessComponent<{
+  title: string, content: string, open?: boolean, click: any
+}> = ({title, content, open, click}) => {
+  const contentArray = content.split('\n\n');
+  return (
+    <Card
+      style={styles}
+      initiallyExpanded={open || false}
+    >
+      {title
+        ? <CardHeader
+          title={title}
+          actAsExpander={true}
+          showExpandableButton={true}
+        /> : null}
+      <CardText expandable={true}>
+        {contentArray.map((c: string) => (
+          <Markdown onClick={click.bind(this, c)}>{c}</Markdown>
+        ))}
+      </CardText>
+    </Card>
+  );
+};
+export default PageDescription;

src/components/Page/index.tsx

@@ -1,17 +1,26 @@
 import * as React from 'react';
+import {connect} from 'react-redux';
 import Divider from 'material-ui/Divider';
 import {Card} from 'material-ui/Card';
-import {ContentCard} from '../index';
+import PageDescription from './PageDescription';
 import Tasks from './Tasks';
 import Top from '../TopPanel/Top';
+import {editorMarkdownOpen} from '../../actions';
 
 const styles = {
   width: '100%',
   overflowY: 'scroll',
 };
 
+
+@connect(null, dispatch => {
+  return {
+    markdownOpen: (content: string) => dispatch(editorMarkdownOpen(null, content))
+  };
+})
 export default class Page extends React.Component<{
-  tutorial: CR.Tutorial, pagePosition: number, packageJson: PackageJson
+  tutorial: CR.Tutorial, pagePosition: number, packageJson: PackageJson,
+  markdownOpen?: (content: string) => any
 }, {}> {
   componentDidMount() {
     Top.toggle(true);
@@ -20,17 +29,18 @@ export default class Page extends React.Component<{
     Top.toggle(false);
   }
   render() {
-    const {tutorial, pagePosition, packageJson} = this.props;
+    const {tutorial, pagePosition, packageJson, markdownOpen} = this.props;
     const page = tutorial.pages[pagePosition];
 
     if (!page) { return null; }
 
     return (
       <section style={styles} className='cr-page'>
-        <ContentCard
+        <PageDescription
           title={page.title}
           content={page.description}
           open={true}
+          click={markdownOpen.bind(this)}
         />
         <Tasks
           tasks={page.tasks}

src/components/common/Markdown.tsx

@@ -27,10 +27,11 @@ function formatText(text: string): string {
 };
 
 const Markdown: React.StatelessComponent<{
-  children?: string, style?: Object
-}> = ({style, children}) => (
+  children?: string, style?: Object, onClick?: any
+}> = ({style, children, onClick}) => (
   <span
     className='cr-markdown'
+    onClick={onClick}
     style={style ? style : null}
     dangerouslySetInnerHTML={
       {__html: formatText(children)}

src/subscriptions.ts

@@ -19,8 +19,10 @@ export function onActivate(): AtomCore.Disposable {
   atom.workspace.observeTextEditors((editor: AtomCore.IEditor) => {
     subscriptions.add(
       editor.onDidSave(() => {
-        store.dispatch(tutorialBuild());
-        store.dispatch(tutorialLoad());
+        if (store.getState().window) {
+          store.dispatch(tutorialBuild());
+          store.dispatch(tutorialLoad());
+        }
       }));
   });
 

tsconfig.json

@@ -85,6 +85,7 @@
         "src/components/Page/EditPage/index.tsx",
         "src/components/Page/Hints/index.tsx",
         "src/components/Page/index.tsx",
+        "src/components/Page/PageDescription/index.tsx",
         "src/components/Page/Task/index.tsx",
         "src/components/Page/Task/taskCheckbox.tsx",
         "src/components/Page/TaskActions/index.tsx",