[IMP] convert accounts listing to interactive

* convert listickles to React widget
* add interactive hooks to introduction/definition paragraphs
* add highlighting to various items based on (2)

todo: ragged bottom edge using a SVG border-image?

_static/accounting.css

@@ -0,0 +1,74 @@
+li > p {
+    margin: 0;
+    cursor: pointer;
+}
+
+.related {
+    background-color: #cbdbf8 !important;
+}
+.secondary {
+    background-color: #dce6f8 !important;
+}
+
+.accounts-table {
+    font-size: 90%;
+}
+
+.accounts-table dl {
+    margin: 0;
+}
+
+.accounts-table h4 {
+    text-align: center;
+    color: rgb(152, 155, 158);
+}
+/* table root */
+.accounts-table > div {
+    display: flex;
+    align-items: flex-start;
+}
+/* P&L & Balance Sheet columns */
+.accounts-table > div > div {
+    flex: 1;
+
+    padding: 5px;
+    margin: 5%;
+    background-color: rgb(241, 244, 250);
+
+    border: 3px solid rgb(223, 231, 240);
+    border-radius: 3px;
+}
+/* sections */
+.accounts-table > div > div div {
+    display: flex;
+    flex-direction: column;
+}
+
+.accounts-table > div > div div > h5 {
+    order: 99;
+
+    font-weight: bold;
+    text-transform: uppercase;
+
+    color: rgb(164, 168, 171);
+    padding: 0.3em 0;
+    border-image: linear-gradient(to bottom, transparent, rgb(221, 225, 231), transparent, rgb(221, 225, 231), transparent) 1 0 10 / 3px 0 3px;
+}
+.accounts-table > div > div div div > h5 {
+    /* slightly smaller than normal 14px h5 size */
+    font-size: 12.5px;
+    border-image: linear-gradient(to bottom, transparent, rgb(221, 225, 231), transparent, rgb(221, 225, 231), transparent) 1 0 1;
+}
+.accounts-table dt {
+    color: rgb(176, 178, 181);
+    font-weight: normal;
+}
+.accounts-table dt span {
+    font-style: italic;
+}
+.accounts-table dt span:last-child {
+    font-style: normal;
+}
+.accounts-table dd {
+    color: rgb(50, 50, 50);
+}

_static/accounts.js

@@ -0,0 +1,137 @@
+(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.br(),
+                                    "Sales"),
+                                React.DOM.dt(null, "Less ", "Cost of Sales"),
+                                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(),
+                                    "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);
+    });
+})();

conf.py

@@ -265,8 +265,11 @@ texinfo_documents = [
 #texinfo_no_detailmenu = False
 
 def setup(app):
+    app.add_stylesheet('accounting.css')
+    app.add_javascript('prefixfree.min.js')
     app.add_javascript('atom.js')
     app.add_javascript('immutable.js')
     app.add_javascript('react.js')
+    app.add_javascript('accounts.js')
     app.add_javascript('chart-of-accounts.js')
     app.add_javascript('fiscalyear.js')

index.rst

@@ -8,31 +8,48 @@ Financial accounting is used to know the situation of a company (its balance
 sheet) and its performance (Profit and Loss, P&L). It is set up by reporting
 every financial transaction in the relevant accounts of a Chart of Accounts.
 
-**P&L** is always analysed on a specific period rather than since the
+.. rst-class:: intro-list
-company's founding (e.g. 2014, Q3 2012, …).
 
-Gross profits is revenues (sales, interest, royalties) minus cost of goods
+* .. rst-class:: intro-p-l
-sold (raw materials, storage costs, production labor costs).
 
-Operating expenses include administration, sales and R&D salaries as well as
+  **P&L** is always analysed on a specific period rather than since the
-rent and utilities, legal costs, insurance, ... anything beyond fabrication
+  company's founding (e.g. 2014, Q3 2012, …).
-itself.
 
-**Balance sheet** is a snapshot of the situation at a specific moment, listing
+* .. rst-class:: intro-gross-profit
-the company's assets and its liabilities at that point.
 
-**Assets** represent the company's wealth. A person's assets would be a house
+  **Gross profits** is revenues (sales, interest, royalties) minus cost of
-or car ("fixed" or "tangible" assets), bank accounts or cash ("liquid" or
+  goods sold (raw materials, storage costs, production labor costs).
-"current" assets). For a company, a client owing money is an asset. An
-employee is not an asset as it is not owned by the company (slavery being
-illegal under the International Covenant on Civil and Political Rights's
-article 8).
 
-**Liabilities** are obligations from past events resulting in future use or
+* .. rst-class:: intro-opex
-transfer of current assets (utility bills, debts, payroll, unpaid suppliers).
 
-**Equity** is assets which have no liability counterpart: shares, other stocks
+  **Operating expenses** include administration, sales and R&D salaries as
-and surplus.
+  well as rent and utilities, legal costs, insurance, ... anything beyond
+  fabrication itself.
+
+* .. rst-class:: intro-balance
+
+  The **Balance sheet** is a snapshot of the situation at a specific moment,
+  listing the company's assets and its liabilities at that point.
+
+* .. rst-class:: intro-assets
+
+  **Assets** represent the company's wealth. A person's assets would be a
+  house or car ("fixed" or "tangible" assets), bank accounts or cash ("liquid"
+  or "current" assets). For a company, a client owing money is an asset. An
+  employee is not an asset as it is not owned by the company (slavery being
+  illegal under the International Covenant on Civil and Political Rights's
+  article 8).
+
+* .. rst-class:: intro-liabilities
+
+  **Liabilities** are obligations from past events resulting in future use or
+  transfer of current assets (utility bills, debts, payroll, unpaid
+  suppliers).
+
+* .. rst-class:: intro-equity
+
+  **Equity** is assets which have no liability counterpart: shares, other
+  stocks and surplus.
 
 Assets have necessarily been financed via liabilities or equity: a company can
 buy work space through profits, borrowing money or injected capital (for
@@ -42,7 +59,7 @@ A difference is made between assets (e.g. a building) and expenses (e.g. fuel)
 in assets having intrinsic value over time, versus expenses having value in
 them being consumed for the company to "work".
 
-.. rst-class:: force-right
+.. rst-class:: force-right accounts-table
 
 .. figure:: images/accounts.png
    :align: center