diff --git a/www-react/src/Footer.tsx b/www-react/src/Footer.tsx index 4b5f9eee2..8b056c33c 100644 --- a/www-react/src/Footer.tsx +++ b/www-react/src/Footer.tsx @@ -4,7 +4,7 @@ import {COPYRIGHT} from './ts/main'; class Footer extends Component { render() { return ( -
+
 
 
@@ -20,7 +20,7 @@ class Footer extends Component {
 
- + ); } } diff --git a/www-react/src/Menu.tsx b/www-react/src/Menu.tsx index 3fc44a18b..9b2f85b11 100644 --- a/www-react/src/Menu.tsx +++ b/www-react/src/Menu.tsx @@ -2,17 +2,22 @@ import React, {Component} from 'react'; import {loadTab} from './ts/main'; class Menu extends Component { + handleMenu(e: React.MouseEvent, tab: string) { + e.preventDefault(); + loadTab(tab); + } + render() { return (
- {loadTab("#home"); return false;}}>Home  - {loadTab("#changes"); return false;}}>Changes  - {loadTab("#about"); return false;}}>About  - {loadTab("#tutorial"); return false;}}>Tutorial  - {loadTab("#emulator"); return false;}}>Emulator  - {loadTab("#download"); return false;}}>Download  - GitHub + {this.handleMenu(e, '#home');}}>Home  + {this.handleMenu(e, '#changes');}}>Changes  + {this.handleMenu(e, '#about');}}>About  + {this.handleMenu(e, '#tutorial');}}>Tutorial  + {this.handleMenu(e, '#emulator');}}>Emulator  + {this.handleMenu(e, '#download');}}>Download  + GitHub
); diff --git a/www-react/src/sections/changelogs/ChangeLog1.tsx b/www-react/src/sections/changelogs/ChangeLog1.tsx index cec944fb6..a4943734c 100644 --- a/www-react/src/sections/changelogs/ChangeLog1.tsx +++ b/www-react/src/sections/changelogs/ChangeLog1.tsx @@ -1,18 +1,11 @@ import React, {Component} from 'react'; -import {logSwap} from '../../ts/main'; +import LogAction from './LogAction'; class ChangeLog1 extends Component { render() { return ( -
-
- 28-Jul-2014  - {logSwap(1, true); return false;}}>show -
-
- 28-Jul-2014  - {logSwap(1, false); return false;}}>hide -
+ +
 
    @@ -24,7 +17,7 @@ class ChangeLog1 extends Component {
-
+ ); } } diff --git a/www-react/src/sections/changelogs/ChangeLog2.tsx b/www-react/src/sections/changelogs/ChangeLog2.tsx index db0ec96b0..4d9fa6254 100644 --- a/www-react/src/sections/changelogs/ChangeLog2.tsx +++ b/www-react/src/sections/changelogs/ChangeLog2.tsx @@ -1,18 +1,11 @@ import React, {Component} from 'react'; -import {logSwap} from '../../ts/main'; +import LogAction from './LogAction'; class ChangeLog2 extends Component { render() { return ( -
-
- 25-Aug-2014  - {logSwap(2, true); return false;}}>show -
-
- 25-Aug-2014  - {logSwap(2, false); return false;}}>hide -
+ +
 
    @@ -28,7 +21,7 @@ class ChangeLog2 extends Component {
 
-
+ ); } } diff --git a/www-react/src/sections/changelogs/ChangeLog3.tsx b/www-react/src/sections/changelogs/ChangeLog3.tsx index 7543ba338..bdec8e9c6 100644 --- a/www-react/src/sections/changelogs/ChangeLog3.tsx +++ b/www-react/src/sections/changelogs/ChangeLog3.tsx @@ -1,18 +1,11 @@ import React, {Component} from 'react'; -import {logSwap} from '../../ts/main'; +import LogAction from './LogAction'; class ChangeLog3 extends Component { render() { return ( -
-
- 07-Feb-2015  - {logSwap(3, true); return false;}}>show -
-
- 07-Feb-2015  - {logSwap(3, false); return false;}}>hide -
+ +
     
    @@ -22,7 +15,7 @@ class ChangeLog3 extends Component {
 
-
+ ); } } diff --git a/www-react/src/sections/changelogs/ChangeLog4.tsx b/www-react/src/sections/changelogs/ChangeLog4.tsx index 5c397afda..351e137c7 100644 --- a/www-react/src/sections/changelogs/ChangeLog4.tsx +++ b/www-react/src/sections/changelogs/ChangeLog4.tsx @@ -1,18 +1,12 @@ import React, {Component} from 'react'; -import {logSwap, loadTab} from '../../ts/main'; +import LogAction from './LogAction'; +import {loadTab} from '../../ts/main' class ChangeLog4 extends Component { render() { return ( -
-
- 14-Sep-2015  - {logSwap(4, true); return false;}}>show -
-
- 14-Sep-2015  - {logSwap(4, false); return false;}}>hide -
+ +
     
    @@ -34,7 +28,7 @@ class ChangeLog4 extends Component {
 
-
+ ); } } diff --git a/www-react/src/sections/changelogs/ChangeLog5.tsx b/www-react/src/sections/changelogs/ChangeLog5.tsx index a1017e4d7..05c08dd02 100644 --- a/www-react/src/sections/changelogs/ChangeLog5.tsx +++ b/www-react/src/sections/changelogs/ChangeLog5.tsx @@ -1,18 +1,11 @@ import React, {Component} from 'react'; -import {logSwap} from '../../ts/main'; +import LogAction from './LogAction'; class ChangeLog5 extends Component { render() { return ( -
-
- 03-Apr-2016  - {logSwap(5, true); return false;}}>show -
-
- 03-Apr-2016  - {logSwap(5, false); return false;}}>hide -
+ +
     
    @@ -37,7 +30,7 @@ class ChangeLog5 extends Component {
 
-
+ ); } } diff --git a/www-react/src/sections/changelogs/ChangeLog6.tsx b/www-react/src/sections/changelogs/ChangeLog6.tsx index 15c029801..de7580a46 100644 --- a/www-react/src/sections/changelogs/ChangeLog6.tsx +++ b/www-react/src/sections/changelogs/ChangeLog6.tsx @@ -1,18 +1,11 @@ import React, {Component} from 'react'; -import {logSwap} from '../../ts/main'; +import LogAction from './LogAction'; class ChangeLog6 extends Component { render() { return ( -
-
- 20-Jan-2017  - {logSwap(6, true); return false;}}>show -
-
- 20-Jan-2017  - {logSwap(6, false); return false;}}>hide -
+ +
     
    @@ -58,7 +51,7 @@ class ChangeLog6 extends Component {
 
-
+ ); } } diff --git a/www-react/src/sections/changelogs/ChangeLog7.tsx b/www-react/src/sections/changelogs/ChangeLog7.tsx index 3c9a6a33f..97f89bbd2 100644 --- a/www-react/src/sections/changelogs/ChangeLog7.tsx +++ b/www-react/src/sections/changelogs/ChangeLog7.tsx @@ -1,18 +1,11 @@ import React, {Component} from 'react'; -import {logSwap} from '../../ts/main'; +import LogAction from './LogAction'; class ChangeLog7 extends Component { render() { return ( -
-
- 28-Jan-2018  - {logSwap(7, true); return false;}}>show -
-
- 28-Jan-2018  - {logSwap(7, false); return false;}}>hide -
+ +
 
    @@ -58,7 +51,7 @@ class ChangeLog7 extends Component {
 
-
+ ); } } diff --git a/www-react/src/sections/changelogs/ChangeLog8.tsx b/www-react/src/sections/changelogs/ChangeLog8.tsx index d9b0d722c..e397b14b3 100644 --- a/www-react/src/sections/changelogs/ChangeLog8.tsx +++ b/www-react/src/sections/changelogs/ChangeLog8.tsx @@ -4,8 +4,8 @@ import LogAction from './LogAction'; class ChangeLog8 extends Component { render() { return ( -
- + +
 
    @@ -45,7 +45,7 @@ class ChangeLog8 extends Component {
 
-
+ ); } } diff --git a/www-react/src/sections/changelogs/LogAction.tsx b/www-react/src/sections/changelogs/LogAction.tsx index d4a6e6304..cece1d182 100644 --- a/www-react/src/sections/changelogs/LogAction.tsx +++ b/www-react/src/sections/changelogs/LogAction.tsx @@ -4,21 +4,31 @@ import {logSwap} from '../../ts/main'; type LogActionProps = { entry: number, version: string; + expanded: boolean; } +type LogActionState = { + show: boolean; +} -class LogAction extends Component { +class LogAction extends Component { + constructor(props: LogActionProps) { + super(props); + this.state = {show: props.expanded}; + } + + handleLogEntryChange(e: React.MouseEvent) { + let newState: boolean = !this.state.show; + this.setState({show: newState}); + logSwap(this.props.entry, newState); + e.preventDefault(); + } + render() { return ( - - + {this.props.version}  + {this.handleLogEntryChange(e);}}>{this.state.show ? "hide" : "show"} ) } diff --git a/www-react/src/ts/main.ts b/www-react/src/ts/main.ts index 081bfccb6..d6af32978 100644 --- a/www-react/src/ts/main.ts +++ b/www-react/src/ts/main.ts @@ -20,16 +20,6 @@ export function menuSwap(itemIndex: number): void { export function logSwap(itemIndex: number, show: boolean): void { for(let i: number = 1; i <= logs; i++) { - let showObj: HTMLElement | null = document.getElementById("show" + i); - if(!showObj) { - throw new Error("logSwap: showObj is null"); - } - - let hideObj: HTMLElement | null = document.getElementById("hide" + i); - if(!hideObj) { - throw new Error("logSwap: hideObj is null"); - } - let textObj: HTMLElement | null = document.getElementById("text" + i); if(!textObj) { throw new Error("logSwap: textObj is null"); @@ -37,18 +27,10 @@ export function logSwap(itemIndex: number, show: boolean): void { if(i === itemIndex) { if(show === true) { - showObj.style.display = "none"; - hideObj.style.display = "block"; textObj.style.display = "block"; } else { - showObj.style.display = "block"; - hideObj.style.display = "none"; textObj.style.display = "none"; } - } else if(show === true) { - showObj.style.display = "block"; - hideObj.style.display = "none"; - textObj.style.display = "none"; } } }