diff --git a/package.json b/package.json
index 27cb1a2..97bf983 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
"dexie": "^1.5.1",
"inferno": "^1.6.0",
"inferno-component": "^1.6.0",
+ "inferno-devtools": "^1.6.0",
"marked": "^0.3.6",
"papaparse": "^4.2.0"
}
diff --git a/src/components/Lexiconga.jsx b/src/components/Lexiconga.jsx
new file mode 100644
index 0000000..a22f2c3
--- /dev/null
+++ b/src/components/Lexiconga.jsx
@@ -0,0 +1,45 @@
+import Inferno from 'inferno';
+import Component from 'inferno-component';
+
+import {LeftColumn} from './structure/LeftColumn';
+import {RightColumn} from './structure/RightColumn';
+
+import {WordForm} from './management/WordForm';
+import {DictionaryDetails} from './display/DictionaryDetails';
+
+export class Lexiconga extends Component {
+ constructor (props) {
+ super(props);
+ }
+
+ render () {
+ return (
+
+ );
+ }
+}
diff --git a/src/components/display/DictionaryDetails.jsx b/src/components/display/DictionaryDetails.jsx
new file mode 100644
index 0000000..0a98c82
--- /dev/null
+++ b/src/components/display/DictionaryDetails.jsx
@@ -0,0 +1,204 @@
+import Inferno from 'inferno';
+import Component from 'inferno-component';
+import marked from 'marked';
+
+import {SearchBox} from '../management/SearchBox';
+
+const DISPLAY = {
+ NONE: false
+, DESCRIPTION: 1
+, DETAILS: 2
+, STATS: 3
+, SEARCH: 4
+}
+
+export class DictionaryDetails extends Component {
+ constructor (props) {
+ super(props);
+
+ this.state = {
+ currentDisplay: DISPLAY.NONE
+ }
+
+ this._descriptionHTML = marked(props.description);
+ }
+
+ componentWillReceiveProps (nextProps) {
+ const currentDescription = this.props.description
+ , nextDescription = nextProps.description;
+
+ if (currentDescription !== nextDescription) {
+ this._descriptionHTML = marked(nextProps.description);
+ }
+ }
+
+ toggleDisplay (display) {
+ display = (this.state.currentDisplay !== display) ? display : DISPLAY.NONE;
+
+ this.setState({
+ currentDisplay: display
+ });
+ }
+
+ displayInfo () {
+ if (this.state.currentDisplay !== DISPLAY.NONE) {
+ let displayJSX;
+
+ switch(this.state.currentDisplay) {
+ case DISPLAY.DESCRIPTION : {
+ // Not sure why, but the dangerouslySet div needs to be wrapped in another div or else
+ // the HTML content sticks around for some reason.
+ displayJSX = (
+
+ );
+ break;
+ }
+
+ case DISPLAY.DETAILS : {
+ let additionalMenu;
+ if (this.props.details.hasOwnProperty('custom')) {
+ let customTabsJSX = this.props.details.custom.map((tab) => {
+ return (
+
+
+ {tab.name}
+
+
+ );
+ });
+
+ additionalMenu = (
+
+ );
+ }
+
+ const menu = (
+
+ );
+
+ let content = (
+
+ );
+
+ displayJSX = (
+
+ {menu}
+ {content}
+
+ );
+ break;
+ }
+
+ case DISPLAY.STATS : {
+ displayJSX = (
+
+ );
+ break;
+ }
+
+ case DISPLAY.SEARCH : {
+ displayJSX = ;
+ break;
+ }
+ }
+
+ return (
+
+ {displayJSX}
+
+ )
+ }
+ }
+
+ render () {
+ return (
+
+
+
+
+
+
+ Dictionary Name
+
+
+
+
+
+
+
+
+
+ {this.displayInfo()}
+
+
+ );
+ }
+}
diff --git a/src/components/management/SearchBox.jsx b/src/components/management/SearchBox.jsx
new file mode 100644
index 0000000..a66183d
--- /dev/null
+++ b/src/components/management/SearchBox.jsx
@@ -0,0 +1,81 @@
+import Inferno from 'inferno';
+import Component from 'inferno-component';
+
+export class SearchBox extends Component {
+ constructor (props) {
+ super(props);
+ }
+
+ showFilterOptions () {
+ if (this.props.hasOwnProperty('partsOfSpeech')
+ && this.props.partsOfSpeech.length > 0) {
+ let filterOptionsJSX = this.props.partsOfSpeech.map((partOfSpeech) => {
+ return (
+
+ );
+ });
+
+ return (
+
+
+
+ {filterOptionsJSX}
+
+
+ );
+ }
+ }
+
+ render () {
+ return (
+
+
+
+
+ {this.showFilterOptions()}
+
+
+ );
+ }
+}
diff --git a/src/components/management/WordForm.jsx b/src/components/management/WordForm.jsx
new file mode 100644
index 0000000..11a6f0b
--- /dev/null
+++ b/src/components/management/WordForm.jsx
@@ -0,0 +1,58 @@
+import Inferno from 'inferno';
+import Component from 'inferno-component';
+
+export class WordForm extends Component {
+ constructor (props) {
+ super(props);
+ }
+
+ render () {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/src/components/structure/Footer.jsx b/src/components/structure/Footer.jsx
new file mode 100644
index 0000000..6abc20b
--- /dev/null
+++ b/src/components/structure/Footer.jsx
@@ -0,0 +1,50 @@
+import Inferno from 'inferno';
+import Component from 'inferno-component';
+
+export class Footer extends Component {
+ constructor (props) {
+ super(props);
+ }
+
+ render () {
+ return (
+
+ );
+ }
+}
diff --git a/src/components/structure/Header.jsx b/src/components/structure/Header.jsx
new file mode 100644
index 0000000..7eb6228
--- /dev/null
+++ b/src/components/structure/Header.jsx
@@ -0,0 +1,39 @@
+import Inferno from 'inferno';
+import Component from 'inferno-component';
+
+export class Header extends Component {
+ constructor (props) {
+ super(props);
+ }
+
+ render () {
+ return (
+
+ );
+ }
+}
diff --git a/src/components/structure/LeftColumn.jsx b/src/components/structure/LeftColumn.jsx
new file mode 100644
index 0000000..715fc0a
--- /dev/null
+++ b/src/components/structure/LeftColumn.jsx
@@ -0,0 +1,16 @@
+import Inferno from 'inferno';
+import Component from 'inferno-component';
+
+export class LeftColumn extends Component {
+ constructor (props) {
+ super(props);
+ }
+
+ render () {
+ return (
+
+ {this.props.children}
+
+ );
+ }
+}
diff --git a/src/components/structure/RightColumn.jsx b/src/components/structure/RightColumn.jsx
new file mode 100644
index 0000000..7197067
--- /dev/null
+++ b/src/components/structure/RightColumn.jsx
@@ -0,0 +1,16 @@
+import Inferno from 'inferno';
+import Component from 'inferno-component';
+
+export class RightColumn extends Component {
+ constructor (props) {
+ super(props);
+ }
+
+ render () {
+ return (
+
+ {this.props.children}
+
+ );
+ }
+}
diff --git a/src/index.jsx b/src/index.jsx
index d1ef6e0..d4481d5 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -3,6 +3,14 @@ import './sass/main.scss';
import Inferno from 'inferno';
import Component from 'inferno-component';
+if (process.env.NODE_ENV !== 'production') {
+ require('inferno-devtools');
+}
+
+import {Header} from './components/structure/Header';
+import {Lexiconga} from './components/Lexiconga';
+import {Footer} from './components/structure/Footer';
+
class App extends Component {
constructor (props) {
super(props);
@@ -11,95 +19,11 @@ class App extends Component {
render () {
return (
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
);
}
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index e69de29..8ccb402 100644
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -0,0 +1,2 @@
+$radius: 0;
+$radius-large: 0;
diff --git a/webpack.config.js b/webpack.config.js
index 86ae26d..95a1e56 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,10 +1,13 @@
+// Set BUILDMODE to 'production' to reduce overhead.
+const BUILDMODE = 'development';
+
const webpack = require('webpack');
const path = require('path');
const BUILD_DIR = path.resolve(__dirname, 'public');
const APP_DIR = path.resolve(__dirname, 'src');
-module.exports = {
+const webpackConfig = {
entry: APP_DIR + '/index.jsx'
, output: {
path: BUILD_DIR
@@ -13,8 +16,8 @@ module.exports = {
, module: {
rules: [
{
- test: /\.scss$/
- , exclude: /node_modules/
+ test: (/\.scss$/)
+ , exclude: (/node_modules/)
, use: [
'style-loader'
, 'css-loader'
@@ -29,14 +32,18 @@ module.exports = {
]
}
, {
- test: /\.jsx?$/
- , exclude: /node_modules/
+ test: (/\.jsx?$/)
+ , exclude: (/node_modules/)
, use: [
{
loader: 'babel-loader'
, options: {
- presets: ['es2016']
- , plugins: ['inferno']
+ presets: [
+ 'es2016'
+ ]
+ , plugins: [
+ 'inferno'
+ ]
}
}
]
@@ -44,18 +51,31 @@ module.exports = {
]
}
, resolve: {
- extensions: ['.js', '.jsx']
-}
-/*, plugins: [
- // When you're ready to publish, check this article out.
- // http://dev.topheman.com/make-your-react-production-minified-version-with-webpack/
- new webpack.optimize.UglifyJsPlugin({
- compress: {
- warnings: false
- },
- output: {
- comments: false
+ extensions: [
+ '.js'
+ , '.jsx'
+ ]
+ }
+, plugins: [
+ new webpack.DefinePlugin({
+ 'process.env': {
+ 'NODE_ENV': JSON.stringify(BUILDMODE)
}
})
- ]*/
+ ]
};
+
+if (BUILDMODE === 'production') {
+ webpackConfig.plugins.push(
+ new webpack.optimize.UglifyJsPlugin({
+ mangle: true
+ , compress: {
+ warnings: false
+ }
+ })
+ );
+
+ webpackConfig.devtool = 'hidden-source-map';
+}
+
+module.exports = webpackConfig;
diff --git a/yarn.lock b/yarn.lock
index 2c344a3..dca7cfc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1389,6 +1389,15 @@ inferno-component@^1.6.0:
inferno-shared "^1.6.0"
inferno-vnode-flags "^1.6.0"
+inferno-devtools@^1.6.0:
+ version "1.6.0"
+ resolved "https://registry.yarnpkg.com/inferno-devtools/-/inferno-devtools-1.6.0.tgz#869953c1d5a85fa899f9ee8405e5d93d470629d0"
+ dependencies:
+ inferno "^1.6.0"
+ inferno-component "^1.6.0"
+ inferno-shared "^1.6.0"
+ inferno-vnode-flags "^1.6.0"
+
inferno-shared@^1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/inferno-shared/-/inferno-shared-1.6.0.tgz#8b85ec17c7140a2fe1320e556df05accc4af7145"