Import W95 code from previously abandoned project

public/components/w95/ContextButton.jsx

@@ -0,0 +1,88 @@
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+
+import ContextMenuButton from './ContextMenuButton';
+
+class ContextButton extends Component {
+  constructor(props) {
+    super(props);
+
+    this.handleClick = function(e) {
+      if(this.isOpen()) {
+        //Already active, close menu.
+        this.props.menu.closeMenu();
+      } else {
+        this.props.menu.openMenu(this.props.selfRef, this);
+      }
+      e.stopPropagation();
+    }.bind(this);
+
+    this.handleHover = function() {
+      this.props.menu.hoverMenu(this.props.selfRef, this);
+    }.bind(this);
+  }
+
+  componentDidMount() {
+    let e = this.refs[this.props.selfRef];
+
+    e.addEventListener('click', this.handleClick);
+    e.addEventListener('mouseover', this.handleHover);
+  }
+
+  componentWillUmount() {
+    let e = this.refs[this.props.selfRef];
+
+    e.removeEventListener('click', this.handleClick);
+    e.removeEventListener('mouseover', this.handleHover);
+  }
+
+  open() {
+    if(this.isDisabled()) return this.hide();
+    this.refs[this.props.selfRef].addClass("active");
+  }
+
+  isDisabled() {return this.refs[this.props.selfRef].hasClass("disabled");}
+
+  hide() {
+    this.refs[this.props.selfRef].removeClass("active");
+  }
+
+  isOpen() {
+    return this.refs[this.props.selfRef].hasClass("active");
+  }
+
+  render() {
+    let cls = "btn";
+
+    let options = [];
+    if(this.props.data === "disabled") {
+      cls += " disabled";
+    } else {
+      let opts = Object.keys(this.props.data);
+      for(let i = 0; i < opts.length; i++) {
+        let k = opts[i];
+        let o = this.props.data[k];
+        //options.push(<div className="menu-option">{k}</div>);
+        options.push(<ContextMenuButton ref={k} key={k} selfRef={k} data={o} button={this} title={k} />);
+      }
+    }
+
+    let menu = <div></div>;
+    if(options.length > 0) {
+      menu = (
+        <div className="menu">
+          {options}
+        </div>
+      );
+    }
+
+    return (
+      <div className={cls} ref={this.props.selfRef}>
+        {this.props.title}
+        {menu}
+      </div>
+    )
+  }
+}
+
+export default ContextButton;

public/components/w95/ContextMenu.jsx

@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+
+import ContextButton from './ContextButton';
+import ContextMenuButton from './ContextMenuButton';
+
+class ContextMenu extends Component {
+  constructor(props) {
+    super(props);
+
+    this.handleClickOutside = function(e) {
+      this.closeMenu();
+      e.stopPropagation();
+    }.bind(this);
+  }
+
+  isOpen() {
+    return this.open;
+  }
+
+  openMenu(ref, el) {
+    let keys = Object.keys(this.refs);
+    for(let i = 0; i < keys.length; i++) {
+      this.refs[keys[i]].hide(ref, el);
+    }
+    el.open();
+    this.open = true;
+  }
+
+  closeMenu() {
+    let keys = Object.keys(this.refs);
+    for(let i = 0; i < keys.length; i++) {
+      this.refs[keys[i]].hide();
+    }
+    this.open  = false;
+  }
+
+  hoverMenu(ref, el) {
+    if(!this.isOpen()) return;
+    this.openMenu(ref, el);
+  }
+
+  componentDidMount() {
+    document.addEventListener('click', this.handleClickOutside);
+  }
+
+  componentWillUmount() {
+    document.removeEventListener('click', this.handleClickOutside);
+  }
+
+  render() {
+    let contextButtons = [];
+    let btnKeys = Object.keys(this.props.menu);
+    for(let i = 0; i < btnKeys.length; i++) {
+      let key = btnKeys[i];
+      var b = this.props.menu[key];
+      if(b === false) continue;
+      contextButtons.push(<ContextButton data={b} title={key} menu={this} ref={key} key={key} selfRef={key} />);
+    }
+
+    return (
+      <div className="context-menu">
+        {contextButtons}
+      </div>
+    );
+  }
+}
+
+export default ContextMenu;

public/components/w95/ContextMenuButton.jsx

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+
+class ContextMenuButton extends Component {
+  constructor(props) {
+    super(props);
+
+    this.handleClick = function(e) {
+      e.stopPropagation();
+      if(this.isDisabled()) return;
+      this.props.button.props.menu.closeMenu();
+      this.clicked();
+    }.bind(this);
+  }
+
+  clicked() {
+    if(typeof this.props.data === 'function') {
+      this.props.data();
+    }
+  }
+
+  componentDidMount() {
+    this.refs.option.addEventListener('click', this.handleClick);
+  }
+
+  componentWillUmount() {
+    this.refs.option.removeEventListener('click', this.handleClick);
+  }
+
+  isDisabled() {return this.props.data === "disabled";}
+
+  render() {
+    let cls = "menu-option";
+
+    if(this.isDisabled()) cls += " disabled";
+
+    return (
+      <div className={cls} ref="option">
+        {this.props.title}
+      </div>
+    );
+  }
+}
+
+export default ContextMenuButton;

public/components/w95/Window95.jsx

@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+
+import ContextMenuButton from './ContextMenuButton';
+import ContextButton from './ContextButton';
+import ContextMenu from './ContextMenu';
+
+const defaultButtons = {
+  maximize: false,
+  minimize: "disabled",
+  close: true
+};
+
+const defaultMenus = {
+  "File": {
+    "New...": true,
+    "Open...": "disabled",
+    "Exit": true,
+  },
+
+  "Edit": "disabled",
+  "Help": {
+    "View Help...": true,
+    "About domsPlace();": true
+  }
+};
+
+class Window95 extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      title: this.props.title ? this.props.title : "Untitled",
+      buttons: this.props.buttons ? this.props.buttons : defaultButtons,
+      menu: this.props.menu ? this.props.menu : defaultMenus
+    };
+  }
+
+  render() {
+    let btns = [];
+    let btnKeys = Object.keys(this.state.buttons);
+    for(let i = 0; i < btnKeys.length; i++) {
+      let key = btnKeys[i];
+      var b = this.state.buttons[key];
+      if(b === false) continue;
+      let cls = "btn " + btnKeys[i];
+      if(b !== true && b !== false) cls += " " + b;
+      btns.push(<div className={cls} key={i}></div>);
+    }
+
+    let menu = <div></div>
+    if(this.state.menu !== "false") {
+      menu = <ContextMenu menu={this.state.menu} />;
+    }
+
+    let clss = "window ";
+    if(this.props.className) clss += this.props.className;
+
+    return (
+      <div className={clss}>
+        <div className="load_me_stuff"></div>
+        <div className="title">
+          {this.state.title}
+          <div className="buttons">
+            {btns}
+          </div>
+        </div>
+        {menu}
+
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default Window95;