@aj-shadow/z-abs-complayer-documentation-client 0.0.0-aj-beta.221

package/project/client/css/documentation_view.css

@@ -0,0 +1,23 @@
+
+.documentation_view_middle{
+ // position:relative;
+  height:100%;
+}
+
+.documentation_view_middle_view{
+  position:absolute;
+  overflow:hidden;
+  padding:4px 4px 4px 0px;
+  right:0px;
+  bottom:0px;
+  left:0px;
+  top:0px;
+}
+
+.documentation_view_middle_view_with_sidebar{
+  left:218px;
+}
+
+.documentation_view_middle_view_with_toolbar{
+  top:36px;
+}

package/project/client/react-components/documentation/middle-documentation-navigation.jsx

@@ -0,0 +1,215 @@
+
+'use strict';
+
+import { ActionDocumentationCurrentNavigation } from '../../actions/action-documentation';
+import Link from 'z-abs-complayer-router-client/client/react-component/link';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleDocumentationNavigation extends ReactComponentStore {
+  constructor(props) {
+    super(props, [props.documentationStore]);
+    this.documentationStoreName = props.documentationStore.constructor.name;
+  }
+  
+  _documentationStore(state) {
+    return state[this.documentationStoreName];
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props.titleText, nextProps.titleText)
+      || !this.shallowCompare(this.props._uriPath, nextProps._uriPath)
+      || !this.deepCompare(this._documentationStore(this.state).documentation.navigations, this._documentationStore(nextState).documentation.navigations)
+      || !this.deepCompare(this._documentationStore(this.state).documentationPreview.navigations, this._documentationStore(nextState).documentationPreview.navigations)
+      || !this.shallowCompare(this._documentationStore(this.state).current, this._documentationStore(nextState).current);
+  }
+  
+  renderLinkInner(name, link) {
+    if(!this.props.preview) {
+      const match = name.match(/^\[\[stack\-[a-z-]+\]\]/);
+      if(null !== match) {
+        link = name;
+        const oldName = name;
+        name = oldName.substring('[[stack-'.length, match[0].length - 2) + oldName.substring(match[0].length);
+      }
+      return (
+        <Link data-name={name} href={`/${link}`}>
+          {name}
+        </Link>
+      );
+    }
+    else {
+      return (
+        <a className="doc_nav_preview">
+          {name}
+        </a>
+      );
+    }
+  }
+  
+  renderLink(name, link, location, index) {
+    const className = location === link ? "doc_nav_inner_chosen" : "doc_nav_inner";
+    return (
+      <li className={className} key={index}>
+        <span className={className}></span>
+        {this.renderLinkInner(name, link)}
+      </li>
+    );
+  }
+  
+  renderPathInner(node, open, innerPaths) {
+    const classNameUlInner = open ? "doc_nav_inner_heading_open" : "doc_nav_inner_heading_closed";
+    return (
+      <>
+        <p data-name={node.name} className="doc_nav_inner_heading"
+          onClickCapture={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            this.dispatch(this.props.documentationStore, new ActionDocumentationCurrentNavigation(this._documentationStore(this.state).current.navigationIndex, open ? node.parentPath : node.path, node.link));
+          }}
+        >{node.name}</p>
+        <svg className={classNameUlInner} width="11" height="11" viewBox="0 0 11 11" 
+          onClickCapture={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            this.dispatch(this.props.documentationStore, new ActionDocumentationCurrentNavigation(this._documentationStore(this.state).current.navigationIndex, open ? node.parentPath : node.path, node.link));
+          }}
+        >
+          <polygon points="2,2 2,10 10,6"/>
+        </svg>
+        {innerPaths}
+      </>
+    );
+  }
+  
+  renderPath(node, location, index) {
+    const open = this._documentationStore(this.state).current.navigationPath.startsWith(node.path);
+    const classNameUlInner = open ? "doc_nav_inner_heading_open" : "doc_nav_inner_heading_closed";
+    let innerPaths = null;
+    if(open) {
+      innerPaths = (
+        <ul className={classNameUlInner}>
+          {this.renderTree(node.tree, location)}
+       </ul>
+      );
+    }
+    return (
+      <li className="doc_nav_inner_heading" key={index}>
+        <span className={classNameUlInner}></span>
+        {this.renderPathInner(node, open, innerPaths)}
+      </li>
+    );
+  }
+  
+  calc(names, path, link, tree) {
+    if(1 === names.length) {
+      const name = names[0];
+      const thisPath = '' !== path ? `${path}/${name}` : name;
+      const node = {
+        name: name,
+        path: thisPath,
+        parentPath: path,
+        link: link
+      };
+      tree.set(name, node);
+    }
+    else if(1 < names.length) {
+      const name = names.shift();
+      const thisPath = '' !== path ? `${path}/${name}` : name;
+      if(tree.has(name)) {
+        const node = tree.get(name);
+        this.calc(names, thisPath, link, node.tree);
+      }
+      else {
+        const node = {
+          name: name,
+          path: thisPath,
+          parentPath: path,
+          tree: new Map()
+        };
+        tree.set(name, node);
+        this.calc(names, thisPath, link, node.tree);
+      }
+    }
+  }
+  
+  renderTree(tree, location) {
+    let index = 0;
+    const nodes = [];
+    if(undefined !== tree) {
+      tree.forEach((node) => {
+        if(node.link) {
+          nodes.push(this.renderLink(node.name, node.link, location, index++));
+        }
+        else {
+          nodes.push(this.renderPath(node, location, index++));
+        }
+      });
+    }
+    return nodes;
+  }
+  
+  renderNavigations(refs, location, open, classNameUl) {
+    if(!open) {
+      return null;
+    }
+    const tree = new Map();
+    refs.forEach((ref) => {
+      const names = ref.name.split('/');
+      this.calc(names, '', ref.link, tree);
+    });
+    return (
+      <ul className={classNameUl}>
+        {this.renderTree(tree, location)}
+      </ul>
+    );
+  }
+  
+  _getNavigations() {
+    if(!this.props.preview) {
+      return this._documentationStore(this.state).documentation.navigations;
+    }
+    else {
+      return this._documentationStore(this.state).documentationPreview.navigations;
+    }
+  }
+  
+  render() {
+    const navigations = this._getNavigations();
+    const location = undefined === this.props._uriPath ? '' : (this.props._uriPath.startsWith('/') ? this.props._uriPath.substring(1) : this.props._uriPath);
+    const navigationSections = navigations.map((navigation, index) => {
+      const open = this._documentationStore(this.state).current.navigationIndex === index;
+      const classNameUl = open ? "doc_nav_heading_open" : "doc_nav_heading_closed";
+      return (
+        <div key={index} className="doc_nav_section">
+          <span className={classNameUl}></span>
+          <h3 data-name={navigation.heading} className="doc_nav_heading"
+            onClickCapture={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              this.dispatch(this.props.documentationStore, new ActionDocumentationCurrentNavigation(index, '', ''));
+            }}
+          >{navigation.heading}</h3>
+          <svg className={classNameUl} width="11" height="11" viewBox="0 0 11 11" 
+            onClickCapture={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              this.dispatch(this.props.documentationStore, new ActionDocumentationCurrentNavigation(index, '', ''));
+            }}
+          >
+            <polygon points="2,2 2,10 10,6"/>
+          </svg>
+          {this.renderNavigations(navigation.refs, location, open, classNameUl)}
+        </div>
+      );
+    });
+    const previewStyle = this.props.preview ? {position:'relative',width:'100%'} : null;
+    return (
+      <div className="doc_nav col-xs-2 panel panel-default" style={previewStyle}>
+        <h3 className="doc_nav_title">{this.props.titleText}</h3>
+        {navigationSections}
+      </div>
+    );
+  }
+}

package/project/client/react-components/documentation/middle-documentation-toolbar.jsx

@@ -0,0 +1,348 @@
+
+'use strict';
+
+import { ActionDocumentationMarkup, ActionDocumentationMarkupSave, ActionDocumentationMarkupCancel, ActionDocumentationLocalNoteMarkupSave, ActionDocumentationLocalNoteMarkupCancel } from '../../actions/action-documentation';
+import Button from 'z-abs-complayer-bootstrap-client/client/button';
+import ButtonNew from 'z-abs-complayer-bootstrap-client/client/button-new';
+import {RouterContext} from 'z-abs-complayer-router-client/client/react-component/router-context';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import GuidGenerator from 'z-abs-corelayer-cs/clientServer/guid-generator';
+import React from 'react';
+
+
+export default class MiddleDocumentationToolbar extends ReactComponentStore {
+  constructor(props) {
+    super(props, [props.documentationStore, props.plusServicesStore], {
+      guid: ''
+    });
+    this.boundKeyDown = this._keyDown.bind(this);
+    this.markupDisabledOpen = false;
+    this.markupDisabledSave = true;
+    this.markupDisabledHelp = false;
+    this.markupDisabledCancel = true;
+    this.documentationStoreName = props.documentationStore.constructor.name;
+    this.plusServicesStoreName = props.plusServicesStore.constructor.name;
+  }
+  
+  _documentationStore(state) {
+    return state[this.documentationStoreName];
+  }
+  
+  _plusServiceStore(state) {
+    return state[this.plusServicesStoreName];
+  }
+  
+  didMount() {
+    window.addEventListener('keydown', this.boundKeyDown, true);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompareObjectValues(this.props, nextProps)
+      || !this.shallowCompare(this._plusServiceStore(this.state).plusServices, this._plusServiceStore(nextState).plusServices)
+      || !this.shallowCompare(this._documentationStore(this.state).markup, this._documentationStore(nextState).markup)
+      || !this.shallowCompare(this._documentationStore(this.state).currentDocumentName, this._documentationStore(nextState).currentDocumentName)
+      || !this.shallowCompare(this._documentationStore(this.state).localNoteMarkup, this._documentationStore(nextState).localNoteMarkup)
+      || this.state.guid !== nextState.guid;
+  }
+  
+  willUnmount() {
+    window.removeEventListener('keydown', this.boundKeyDown, true);
+  }
+  
+  _markupOpen() {
+    this.dispatch(this.props.documentationStore, new ActionDocumentationMarkup());
+  }
+  
+  _markupSave() {
+    if(this._documentationStore(this.state).markup.definition) {
+      this.dispatch(this.props.documentationStore, new ActionDocumentationMarkupSave());
+    }
+    else if(this._documentationStore(this.state).localNoteMarkup.definition) {
+      this.dispatch(this.props.documentationStore, new ActionDocumentationLocalNoteMarkupSave());
+    }
+  }
+  
+  _markupHelp() {
+  
+  }
+  
+  _markupCancel() {
+    if(this._documentationStore(this.state).markup.definition) {
+      this.dispatch(this.props.documentationStore, new ActionDocumentationMarkupCancel());
+    }
+    else if(this._documentationStore(this.state).localNoteMarkup.definition) {
+      this.dispatch(this.props.documentationStore, new ActionDocumentationLocalNoteMarkupCancel());
+    }
+  }
+  
+  _keyDown(e) {
+    if(e.ctrlKey && 'o' === e.key) {
+      if(!this.markupDisabledOpen) {
+        e.preventDefault();
+        this._markupOpen();
+      }
+    }
+    else if(e.ctrlKey && e.shiftKey && '?' === e.key) {
+      if(!this.markupDisabledHelp) {
+        e.preventDefault();
+        this._markupHelp();
+      }
+    }
+    else if(e.ctrlKey && e.shiftKey && 'C' === e.key) {
+      if(!this.markupDisabledCancel) {
+        e.preventDefault();
+        this._markupCancel();
+      }
+    }
+    else if(e.ctrlKey && 's' === e.key) {
+      if(!this.markupDisabledSave) {
+        e.preventDefault();
+        this._markupSave();
+      }
+    }
+  }
+  
+  renderMarkupOpenButton() {
+    this.markupDisabledOpen = this._documentationStore(this.state).markup.definition || this._documentationStore(this.state).localNoteMarkup.definition;
+    return (
+      <ButtonNew id="documentation_markup_open" icon="icon-markup-open" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Open" content="Markup" shortcut="Ctrl+O" disabled={this.markupDisabledOpen}
+        onClick={(e) => {
+          this._markupOpen();
+        }}
+      />
+    );
+  }
+  
+  renderMarkupSaveButton() {
+    this.markupDisabledSave = true;
+    if(this._documentationStore(this.state).markup.definition) {
+      this.markupDisabledSave = undefined !== this._documentationStore(this.state).markup.navigation.rows || (this._documentationStore(this.state).markup.navigation.content === this._documentationStore(this.state).markup.navigation.contentOriginal && this._documentationStore(this.state).markup.document.content === this._documentationStore(this.state).markup.document.contentOriginal);
+    }
+    else if(this._documentationStore(this.state).localNoteMarkup.definition) {
+      this.markupDisabledSave = this._documentationStore(this.state).localNoteMarkup.document.content === this._documentationStore(this.state).localNoteMarkup.document.contentOriginal;
+    }
+    return (
+      <ButtonNew id="documentation_markup_save" icon="icon-markup-save" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Save" content="Markup" shortcut="Ctrl+S" disabled={this.markupDisabledSave}
+        onClick={(e) => {
+          this._markupSave();
+        }}
+      />
+    );
+  }
+  
+  renderMarkupHelpButton() {
+    this.markupDisabledHelp = this._documentationStore(this.state).markup.definition;
+    return (
+      <ButtonNew id="documentation_markup_help" icon="icon-markup-help" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Help" content="Markup" shortcut="Ctrl+Shift+?" disabled={this.markupDisabledHelp}
+        onClick={(e) => {
+          this._markupHelp();
+        }}
+      />
+    );
+  }
+  
+  renderMarkupCancelButton() {
+    this.markupDisabledCancel = !this._documentationStore(this.state).markup.definition && !this._documentationStore(this.state).localNoteMarkup.definition;
+    return (
+      <ButtonNew id="documentation_markup_cancel" icon="icon-markup-close" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Cancel" content="Markup" shortcut="Ctrl+Shift+C" disabled={this.markupDisabledCancel}
+        onClick={(e) => {
+          this._markupCancel();
+        }}
+      />
+    );
+  }
+  
+  renderMarkupShowNavigationButton() {
+    const toolTipInstruction = this.props.showNavigationMarkup ? "Hide" : "Show";
+    const active = this.props.showNavigationMarkup ? "active" : "";
+    return (
+      <ButtonNew id="documentation_navigation" colorMark="markup_color" icon="icon-doc-navigation" size="aj_btn_sm" placement="bottom" heading={`${toolTipInstruction}`} content="Navigation Markup" active={active} disabled={!this._documentationStore(this.state).markup.definition}
+        onClick={(e) => {
+          this.props.onToggleNavigationMarkup && this.props.onToggleNavigationMarkup();
+        }}
+      />
+    );
+  }
+  
+  renderMarkupShowPreviewNavigationButton() {
+    const toolTipInstruction = this.props.showNavigationPreview ? "Hide" : "Show";
+    const active = this.props.showNavigationPreview ? "active" : "";
+    return (
+      <ButtonNew id="documentation_navigation_preview" colorMark="markup_color" icon="icon-doc-navigation-preview" size="aj_btn_sm" placement="bottom" heading={`${toolTipInstruction}`} content="Navigation Preview" active={active} disabled={!this._documentationStore(this.state).markup.definition}
+        onClick={(e) => {
+          this.props.onToggleNavigationPreview && this.props.onToggleNavigationPreview();
+        }}
+      />
+    );
+  }
+  
+  renderMarkupShowDocumentButton() {
+    const toolTipInstruction = this.props.showDocumentationMarkup ? "Hide" : "Show";
+    const active = this.props.showDocumentationMarkup ? "active" : "";
+    return (
+      <ButtonNew id="documentation_markup" colorMark="markup_color" icon="icon-doc-markup" size="aj_btn_sm" placement="bottom" heading={`${toolTipInstruction}`} content="Document Markup" active={active} disabled={!this._documentationStore(this.state).markup.definition}
+        onClick={(e) => {
+          this.props.onToggleDocumentationMarkup && this.props.onToggleDocumentationMarkup();
+        }}
+      />
+    );
+  }
+  
+  renderMarkupShowDocumentPreviewButton() {
+    const toolTipInstruction = this.props.showDocumentationPreview ? "Hide" : "Show";
+    const active = this.props.showDocumentationPreview ? "active" : "";
+    return (
+      <ButtonNew id="documentation_markup_preview" colorMark="markup_color" icon="icon-doc-markup-preview" size="aj_btn_sm" placement="bottom" heading={`${toolTipInstruction}`} content="Document Preview" active={active} disabled={!this._documentationStore(this.state).markup.definition}
+        onClick={(e) => {
+          this.props.onToggleDocumentationPreview && this.props.onToggleDocumentationPreview();
+        }}
+      />
+    );
+  }
+  
+  renderHorizontalOrVerticalButton() {
+    let toolTipInstruction;
+    let image1Style;
+    let image2Style;
+    if(this.props.documentationOrder) {
+      toolTipInstruction = 'Vertical';
+      image1Style = {top:'8px',left:'0px',transform:'scale(1.3, 0.9)'};
+      image2Style = {width:'0px',top:'-4px',left:'-14px',transform:'scale(1.3, 0.9)'};
+    }
+    else {
+      toolTipInstruction = 'Horizontal';
+      image1Style = {top:'2px',left:'-8px',transform:'scale(1.3, 0.9)'};
+      image2Style = {width:'0px',top:'2px',left:'-6px',transform:'scale(1.3, 0.9)'};
+    }
+    return (
+      <ButtonNew id="documentation_align" icon="icon-align" size="aj_btn_sm" colorMark="markup_color" active={this.props.documentationOrder} placement="bottom" heading={`${toolTipInstruction}`} content="Document Order" disabled={!this._documentationStore(this.state).markup.definition}
+        onClick={(e) => {
+          this.props.onToggleDocumentationOrder && this.props.onToggleDocumentationOrder();
+        }}
+      />
+    );
+  }
+  
+  renderGuidGeneratorButton() {
+    if(this._documentationStore(this.state).markup.definition || this._documentationStore(this.state).localNoteMarkup.definition) {
+      return (
+        <ButtonNew id="documentation_guid" icon="icon-guid" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Generate" content="GUID"
+          onClick={(e) => {
+            const guid = GuidGenerator.create();
+            navigator.clipboard.writeText(guid).then(() => {
+              /* clipboard successfully set */
+            }, () => {
+              /* clipboard write failed */
+            });
+            this.updateState({guid: {$set: guid}});
+          }}
+        />
+      );
+    }
+  }
+  
+  renderGuidLabel(htmlFor) {
+    if(this.state.guid && (this._documentationStore(this.state).markup.definition || this._documentationStore(this.state).localNoteMarkup.definition)) {
+      return (
+        <label className="documentation_guid" htmlFor={htmlFor}>{this.state.guid}</label>
+      );
+    }
+  }
+  
+  renderDocumentationButton() {
+    return (
+      <ButtonNew id="documentation_documentation" colorMark="markup_color" icon="icon-doc-documentation" size="aj_btn_sm" heading="Goto" content="Documentation"
+        onClick={(e) => {
+          this.context.history(`/documentation`, {global: true});
+        }}
+      />
+    );
+  }
+  
+  renderEducationButton() {
+    return (
+      <ButtonNew id="documentation_education" colorMark="markup_color" icon="icon-doc-education" size="aj_btn_sm" heading="Goto" content="Education"
+        onClick={(e) => {
+          this.context.history(`/education`, {global: true});
+        }}
+      />
+    );
+  }
+  
+  renderWorkshopButton() {
+    return (
+      <ButtonNew id="documentation_workshop" colorMark="markup_color" icon="icon-doc-workshop" size="aj_btn_sm" heading="Goto" content="Workshop"
+        onClick={(e) => {
+          this.context.history(`/workshop`, {global: true});
+        }}
+      />
+    );
+  }
+  
+  renderVideosButton() {
+    return (
+      <ButtonNew id="documentation_video" colorMark="markup_color" icon="icon-doc-video" size="aj_btn_sm" heading="Goto" content="Videos"
+        onClick={(e) => {
+          this.context.history(`/videos`, {global: true});
+        }}
+      />
+    );
+  }
+  
+  renderLocalDocumentationButton(repoName) {
+    return (
+      <ButtonNew id={`start_local_documentation_${repoName}`} colorMark="markup_color" icon="icon-doc-docs" size="aj_btn_sm" heading="Goto" content="Plus Service - Docs" aria-label="Plus Service - Docs"
+        onClick={(e) => {
+          this.context.history(`/local-documentation-${repoName}`, {global: true});
+        }}
+      />
+    );
+  }
+  
+  renderLocalDocumentationButtons() {
+    if(this.props.plusServicesStore.isLoaded('docs')) {
+      return this.renderLocalDocumentationButton('Local');
+    }
+  }
+  
+  render() {
+    return (
+      <div className="middle_toolbar middle_documentation_toolbar">
+        <div className="toolbar" role="toolbar" aria-label="...">
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderMarkupOpenButton()}
+            {this.renderMarkupSaveButton()}
+            {this.renderMarkupHelpButton()}
+            {this.renderMarkupCancelButton()}
+          </div>
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderMarkupShowDocumentButton()}
+            {this.renderMarkupShowDocumentPreviewButton()}
+            {this.renderMarkupShowNavigationButton()}
+            {this.renderMarkupShowPreviewNavigationButton()}
+            {this.renderHorizontalOrVerticalButton()}
+          </div>
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderGuidGeneratorButton()}
+            {this.renderGuidLabel('aaa')}
+          </div>
+          <div className="aj_btn_group middle_documentation_heading" role="group" aria-label="...">
+            <h4 className="middle_documentation_heading">{`${this.props.titleText} - ${this._documentationStore(this.state).current.navigationName}`}</h4>
+          </div>
+          <div className="aj_btn_group" role="group" aria-label="..." style={{float: 'right'}}>
+            {this.renderDocumentationButton()}
+            {this.renderEducationButton()}
+            {this.renderWorkshopButton()}
+            {this.renderVideosButton()}
+          </div>
+          <div className="aj_btn_group" role="group" aria-label="..." style={{float: 'right'}}>
+            {this.renderLocalDocumentationButtons()}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+
+MiddleDocumentationToolbar.contextType = RouterContext;