137 lines
6.1 KiB
JavaScript
137 lines
6.1 KiB
JavaScript
(function () {
|
|
'use strict';
|
|
|
|
function highlight(primary, secondary) {
|
|
return {
|
|
className: React.addons.classSet({
|
|
related: primary,
|
|
secondary: secondary
|
|
})
|
|
};
|
|
}
|
|
var AccountsTable = React.createClass({
|
|
render: function () {
|
|
return React.DOM.div(
|
|
null,
|
|
React.DOM.div(// P&L
|
|
highlight(this.props.current === 'p-l'),
|
|
React.DOM.h4(null, "Profit & Loss"),
|
|
React.DOM.div(
|
|
null,
|
|
React.DOM.h5(null, "Net Profit"),
|
|
React.DOM.div(
|
|
highlight(null, this.props.current === 'gross-profit'),
|
|
React.DOM.h5(
|
|
highlight(this.props.current === 'gross-profit'),
|
|
"Gross Profit"),
|
|
React.DOM.dl(
|
|
null,
|
|
React.DOM.dt(null, "Income"),
|
|
React.DOM.dd(
|
|
null,
|
|
"Revenue"),
|
|
React.DOM.dt(null, "Less ", "Cost of Revenue"),
|
|
React.DOM.dd(null, "Direct Costs")
|
|
)
|
|
),
|
|
React.DOM.dl(
|
|
null,
|
|
React.DOM.dt(null, "Plus ", "Other Income"),
|
|
React.DOM.dd(null, "Other Income"),
|
|
React.DOM.dt(
|
|
highlight(this.props.current === 'opex'),
|
|
"Less ", "Expenses"),
|
|
React.DOM.dd(
|
|
highlight(null, this.props.current === 'opex'),
|
|
"Expenses", React.DOM.br(),
|
|
"Depreciation", React.DOM.br(),
|
|
"Overheads", React.DOM.br()
|
|
)
|
|
)
|
|
)
|
|
),
|
|
React.DOM.div(//Balance Sheet
|
|
highlight( this.props.current === 'balance'),
|
|
React.DOM.h4(null, "Balance Sheet"),
|
|
React.DOM.div(
|
|
null,
|
|
React.DOM.h5(null, "Net Assets"),
|
|
React.DOM.div(
|
|
null,
|
|
React.DOM.h5(highlight(this.props.current === 'assets'), "Total Assets"),
|
|
React.DOM.dl(
|
|
highlight(null, this.props.current === 'assets'),
|
|
React.DOM.dt(null, "Current Assets"),
|
|
React.DOM.dd(
|
|
null,
|
|
"Current Assets", React.DOM.br(),
|
|
"Receivables", React.DOM.br(),
|
|
"Prepayments", React.DOM.br()
|
|
),
|
|
React.DOM.dt(null, "Plus ", "Bank"),
|
|
React.DOM.dd(null, "Bank Accounts"),
|
|
React.DOM.dt(null, "Plus ", "Fixed Assets"),
|
|
React.DOM.dd(null, "Fixed Assets"),
|
|
React.DOM.dt(null, "Plus ", "Non-current Assets"),
|
|
React.DOM.dd(null, "Non-current Assets")
|
|
)
|
|
),
|
|
React.DOM.dl(
|
|
highlight(this.props.current === 'liabilities'),
|
|
React.DOM.dt(null, "Less ", "Current Liabilities"),
|
|
React.DOM.dd(null, "Current Liabilities"),
|
|
React.DOM.dt(null, "Less ", "Non-current liabilities"),
|
|
React.DOM.dd(null, "Liabilities", React.DOM.br(), "Non-current Liabilities")
|
|
)
|
|
),
|
|
React.DOM.div(
|
|
highlight(null, this.props.current === 'equity'),
|
|
React.DOM.h5(highlight(this.props.current === 'equity'), "Total Equity"),
|
|
React.DOM.dl(
|
|
null,
|
|
React.DOM.dt(null, "Equity"),
|
|
React.DOM.dd(null, "Equity"),
|
|
React.DOM.dt(null, "Plus ", "Net Profit")
|
|
)
|
|
)
|
|
)
|
|
);
|
|
}
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var target = document.querySelector('.accounts-table');
|
|
function render(current) {
|
|
React.render(
|
|
React.createElement(AccountsTable, {current: current}),
|
|
target);
|
|
}
|
|
|
|
var list = document.querySelectorAll('.intro-list li > p');
|
|
Array.prototype.forEach.call(list, function (node) {
|
|
node.addEventListener('mouseover', function (e) {
|
|
if (!e.currentTarget.contains(e.target)) { return; }
|
|
|
|
e.currentTarget.classList.add('secondary');
|
|
render(e.currentTarget.className.split(/\s+/).reduce(function (acc, cls) {
|
|
if (acc) { return acc; }
|
|
var m = /^intro-(.*)$/.exec(cls);
|
|
return m && m[1];
|
|
}, null));
|
|
});
|
|
node.addEventListener('mouseout', function (e) {
|
|
// mouseout always precedes mousenter even when going into a
|
|
// child element. Since re-render should be pretty fast (just
|
|
// setting or unsetting a pair of classes) don't try to avoid
|
|
// any thrashing, things should be fast enough either way. If
|
|
// they're not, batch operations on requestAnimationFrame
|
|
// instead.
|
|
e.currentTarget.classList.remove('secondary');
|
|
render(null);
|
|
});
|
|
})
|
|
|
|
render(null);
|
|
});
|
|
})();
|