@aj-shadow/actorjs-app 0.0.0-aj-beta.221

package/project/client/components/header/header_icon.jsx

@@ -0,0 +1,37 @@
+
+'use strict';
+
+import Image from 'z-abs-complayer-bootstrap-client/client/image';
+import Popover from 'z-abs-complayer-bootstrap-client/client/popover';
+import Link from 'z-abs-complayer-router-client/client/react-component/link';
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class HeaderIcon extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return false;
+  }
+  
+  render() {
+    const s = {
+      marginLeft:'8px',
+      marginTop:'12.1px'
+    };
+    return (
+      <div className="header_icon">
+        <Link href="/start" global>
+          <div className={s}>
+            <Popover placement="bottom" heading="Goto" content="Home">
+              <img src="/abs-images/svg/ActorJs.svg" alt="ActorJs" width="204.6642668109053px" height="38px" />
+            </Popover>
+          </div>
+        </Link>
+      </div>
+    );
+  }
+}

package/project/client/components/header/header_status.jsx

@@ -0,0 +1,33 @@
+
+'use strict';
+
+import React from 'react';
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import HeaderStatusLogin from './header-status-login';
+import HeaderStatusStagingEnvironment from './header-status-staging-environment';
+import StatusEnvironmentActorJsTools from 'z-abs-complayer-toolversions-client/client/components/status-environment-actorjs-tools';
+import StatusEnvironmentDevelopment from 'z-abs-complayer-toolversions-client/client/components/status-environment-development';
+import StatusEnvironmentExternalTools from 'z-abs-complayer-toolversions-client/client/components/status-environment-external-tools';
+
+
+export default class HeaderStatus extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return false;
+  }
+  
+  render() {
+    return (
+      <div className="header_status">
+        <HeaderStatusLogin />
+        <HeaderStatusStagingEnvironment />
+        <StatusEnvironmentDevelopment />
+        <StatusEnvironmentExternalTools />
+        <StatusEnvironmentActorJsTools />
+      </div>
+    );
+  }
+}

package/project/client/components/middle/abbreviation/middle-abbreviation-toolbar.jsx

@@ -0,0 +1,126 @@
+
+'use strict';
+
+
+import React from 'react';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import ButtonNew from 'z-abs-complayer-bootstrap-client/client/button-new';
+import AbbreviationStore from '../../../stores/abbreviation-store';
+
+
+export default class MiddleAbbreviationToolbar extends ReactComponentStore {
+  constructor(props) {
+    super(props, [AbbreviationStore]);
+    this.boundKeyDown = this._keyDown.bind(this);
+    this.markupDisabledOpen = false;
+    this.markupDisabledSave = true;
+    this.markupDisabledHelp = false;
+    this.markupDisabledCancel = true;
+  }
+  
+  didMount() {
+    window.addEventListener('keydown', this.boundKeyDown, true);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return false;
+  }
+  
+  willUnmount() {
+    window.removeEventListener('keydown', this.boundKeyDown, true);
+  }
+  
+  _markupOpen() {
+  }
+  
+  _markupSave() {
+  }
+  
+  _markupHelp() {
+  }
+  
+  _markupCancel() {
+  }
+  
+  _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() {
+    return (
+      <ButtonNew placement="bottom" heading="Open" content="Markup" shortcut="Ctrl+O" disabled={this.state.AbbreviationStore.markup.definition}
+        onClick={(e) => {
+          this._markupOpen();
+        }}
+      />
+    );
+  }
+  
+  renderMarkupSaveButton() {
+    return (
+      <ButtonNew placement="bottom" heading="Save" content="Markup" shortcut="Ctrl+S" disabled={this.state.AbbreviationStore.markup.content === this.state.AbbreviationStore.markup.contentOriginal}
+        onClick={(e) => {
+          this._markupSave();
+        }}
+      />
+    );
+  }
+  
+  renderMarkupHelpButton() {
+    return (
+      <ButtonNew placement="bottom" heading="Help" content="Markup" shortcut="Ctrl+?" disabled={this.state.AbbreviationStore.markup.definition}
+        onClick={(e) => {
+          this._markupHelp();
+        }}
+      />
+    );
+  }
+  
+  renderMarkupCancelButton() {
+    return (
+      <ButtonNew placement="bottom" heading="Cancel" content="Markup" shortcut="Ctrl+Shift+C" disabled={!this.state.AbbreviationStore.markup.definition}
+        onClick={(e) => {
+          this._markupCancel();
+        }}
+      />
+    );
+  }
+  
+  render() {
+    return (
+      <div className="middle_toolbar">
+	      <div className="toolbar" role="toolbar" aria-label="...">
+          <div className="btn-group btn-group-sm" role="group" aria-label="...">
+            {this.renderMarkupOpenButton()}
+            {this.renderMarkupSaveButton()}
+            {this.renderMarkupHelpButton()}
+            {this.renderMarkupCancelButton()}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/project/client/components/middle/abbreviation/middle-abbreviation.jsx

@@ -0,0 +1,27 @@
+
+'use strict';
+
+import MiddleAbbreviationToolbar from './middle-abbreviation-toolbar';
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class MiddleAbbreviation extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+    this.setTitle(() => {
+      return {
+        isPath: false,
+        text: 'Abbrevation'
+      };
+    });
+  }
+  
+  render() {
+    return (
+      <div className="middle middle_code_editor">
+        <MiddleAbbreviationToolbar />
+      </div>
+    );
+  }
+}

package/project/client/components/middle/actor-editor/middle-actor-editor-sidebar.jsx

@@ -0,0 +1,101 @@
+
+'use strict';
+
+import ActorEditorStore from '../../../stores/actor-editor-store';
+import { ActionActorEditorFileGet } from '../../../actions/action-actor-editor/action-actor-editor-file';
+import { ActionActorEditorFolderGet } from '../../../actions/action-actor-editor/action-actor-editor-folder';
+import { ActionActorEditorProjectToggle } from '../../../actions/action-actor-editor/action-actor-editor-project';
+import FileIcons from 'z-abs-complayer-bootstrap-client/client/icons/file-icons';
+import FolderIcons from 'z-abs-complayer-bootstrap-client/client/icons/folder-icons';
+import Tree from 'z-abs-complayer-tree-client/client/react-components/tree';
+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 React from 'react';
+
+
+export default class MiddleActorEditorSidebar extends ReactComponentStore {
+  constructor(props) {
+    super(props, [ActorEditorStore]);
+    this.boundMouseUp = this._boundMouseUp.bind(this);
+    this.boundMouseMove = this._boundMouseMove.bind(this);
+    this.sidebarNode = null;
+    this.sidebarWidthMin = 180;
+    this.sidebarWidthMax = 720;
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.state.ActorEditorStore.projectLocal, nextState.ActorEditorStore.projectLocal)
+      || !this.shallowCompare(this.state.ActorEditorStore.projectGlobal, nextState.ActorEditorStore.projectGlobal)
+      || !this.shallowCompare(this.state.ActorEditorStore.current, nextState.ActorEditorStore.current)
+      || !this.shallowCompare(this.state.ActorEditorStore.persistentData, nextState.ActorEditorStore.persistentData);
+  }
+  
+  _boundMouseUp(e) {
+    window.removeEventListener('mouseup', this.boundMouseUp, true);
+    window.removeEventListener('mousemove', this.boundMouseMove, true);
+    this.sidebarNode = null;
+  }
+  
+  _boundMouseMove(e) {
+    let width = e.clientX + 2;
+    if(width < this.sidebarWidthMin) {
+      width = this.sidebarWidthMin;
+    }
+    else if(width > this.sidebarWidthMax) {
+      width = this.sidebarWidthMax;
+    }
+    this.sidebarNode.style.width = `${width}px`;
+    this.sidebarNode.nextSibling.style.left = `${width}px`;
+  }
+  
+  render() {
+    const stylePanel = {
+      height:'100%'
+    };
+    const darkMode = this.state.ActorEditorStore.persistentData.darkMode;
+    return (
+      <div className={this.theme(darkMode, "sidebar", "middle_actor_editor_sidebar")}>
+        <div className={this.theme(darkMode, "panel-default", "panel")} style={stylePanel}>
+          <div className={this.theme(darkMode, "panel_body_sidebar")}>
+            <div id="actor_editor_tree_root">
+              <Tree key={this.state.ActorEditorStore.projectLocal.projectId} name={'local'} id="actor_editor_tree_code_local" project={this.state.ActorEditorStore.projectLocal} current={this.state.ActorEditorStore.current} folderIcons={FolderIcons} fileIcons={FileIcons} darkMode={this.state.ActorEditorStore.persistentData.darkMode}
+                onClickFile={(key, title, path, type) => {
+                  this.dispatch(ActorEditorStore, new ActionActorEditorFileGet(this.state.ActorEditorStore.projectLocal.projectId, key, title, path, type));
+                }}
+                onClickFolder={(key, title, data) => {
+                  this.dispatch(ActorEditorStore, new ActionActorEditorFolderGet(this.state.ActorEditorStore.projectLocal.projectId, key, title, data));
+                }}
+                onToggleFolder={(key, expanded) => {
+                  this.dispatch(ActorEditorStore, new ActionActorEditorProjectToggle(this.state.ActorEditorStore.projectLocal.projectId, key, expanded));
+                }}
+              />
+              <Tree key={this.state.ActorEditorStore.projectGlobal.projectId} name={'global'} id="actor_editor_tree_code_global" project={this.state.ActorEditorStore.projectGlobal} current={this.state.ActorEditorStore.current} folderIcons={FolderIcons} fileIcons={FileIcons} darkMode={this.state.ActorEditorStore.persistentData.darkMode}
+                onClickFile={(key, title, path, type) => {
+                  this.dispatch(ActorEditorStore, new ActionActorEditorFileGet(this.state.ActorEditorStore.projectGlobal.projectId, key, title, path, type));
+                }}
+                onClickFolder={(key, title, data) => {
+                  this.dispatch(ActorEditorStore, new ActionActorEditorFolderGet(this.state.ActorEditorStore.projectGlobal.projectId, key, title, data));
+                }}
+                onToggleFolder={(key, expanded) => {
+                  this.dispatch(ActorEditorStore, new ActionActorEditorProjectToggle(this.state.ActorEditorStore.projectGlobal.projectId, key, expanded));
+                }}
+              />
+            </div>
+          </div>
+        </div>
+        <div className={this.theme(darkMode, "sidebar_mover")}
+          onMouseDown={(e) => {
+            if(0 === e.button) {
+              this.sidebarNode = e.target.parentNode;
+              window.addEventListener('mouseup', this.boundMouseUp, true);
+              window.addEventListener('mousemove', this.boundMouseMove, true);
+            }
+          }}
+        ></div>
+      </div>
+    );
+  }
+}
+
+
+MiddleActorEditorSidebar.contextType = RouterContext;