Mike Gerwitz

Activist for User Freedom

aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--doc/program.texi8
-rw-r--r--src/client/ClientDependencyFactory.js5
-rw-r--r--src/css/base.css22
-rw-r--r--src/ui/group/StackedGroupUi.js103
4 files changed, 138 insertions, 0 deletions
diff --git a/doc/program.texi b/doc/program.texi
index e77efba..a806822 100644
--- a/doc/program.texi
+++ b/doc/program.texi
@@ -149,6 +149,14 @@ A list of available styles is detailed in @ref{t:group-styles}.
@tab@center Y
@tab@center Add
+ @item @samp{stacked}
+ @tab
+ Groups respective indexes of elements such that one set of indexes
+ appears atop of another set,
+ much like separate groups are placed.
+ @tab@center Y
+ @tab@center N
+
@item @samp{tabbedblock}
@tab
Each group is rendered as a block,
diff --git a/src/client/ClientDependencyFactory.js b/src/client/ClientDependencyFactory.js
index a157f94..759f312 100644
--- a/src/client/ClientDependencyFactory.js
+++ b/src/client/ClientDependencyFactory.js
@@ -40,6 +40,7 @@ var Step = require( '../step/Step' ),
TableGroupUi = require( '../ui/group/TableGroupUi' ),
TabbedGroupUi = require( '../ui/group/TabbedGroupUi' ),
TabbedBlockGroupUi = require( '../ui/group/TabbedBlockGroupUi' ),
+ StackedGroupUi = require( '../ui/group/StackedGroupUi' ),
SideTableGroupUi = require( '../ui/group/SideTableGroupUi' ),
CollapseTableGroupUi = require( '../ui/group/CollapseTableGroupUi' ),
@@ -317,6 +318,10 @@ module.exports = Class( 'ClientDependencyFactory',
{
obj = TabbedBlockGroupUi;
}
+ else if ( $content.hasClass( 'stacked' ) )
+ {
+ obj = StackedGroupUi;
+ }
else if ( $content.hasClass( 'accordion' ) )
{
obj = AccordionGroupUi;
diff --git a/src/css/base.css b/src/css/base.css
index a46c837..d1164a8 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -149,3 +149,25 @@
font-weight: normal;
}
+
+
+/* Groups
+ * ------
+ * Each group styles fields differently, but they all operate on the same
+ * general principle: provide a means of display multi-dimensional data
+ * where each respective field index in the group is displayed together.
+ *
+ * TODO: These need liza-* prefixes.
+ *
+ * Stacked Group
+ * ~~~~~~~~~~~~~
+ */
+
+.stepGroup dl.stacked dt.stack-header {
+ border-top: 0px;
+ font-weight: bold;
+}
+
+.stepGroup dl.stacked:not(:first-child) dt.stack-header {
+ margin-top: 2em;
+}
diff --git a/src/ui/group/StackedGroupUi.js b/src/ui/group/StackedGroupUi.js
new file mode 100644
index 0000000..0da7145
--- /dev/null
+++ b/src/ui/group/StackedGroupUi.js
@@ -0,0 +1,103 @@
+/**
+ * Flat UI group with stacked indexes
+ *
+ * Copyright (C) 2018 R-T Specialty, LLC.
+ *
+ * This file is part of liza.
+ *
+ * liza is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+var Class = require( 'easejs' ).Class,
+ GroupUi = require( './GroupUi' );
+
+
+/**
+ * Stacks groups of field indexes one atop of another, similar to how groups
+ * themselves appear.
+ *
+ * Does not yet support user adding or removing indexes.
+ */
+module.exports = Class( 'StackedGroupUi' )
+ .extend( GroupUi,
+{
+ /**
+ * Containing group DOM element
+ */
+ 'private _$container': null,
+
+ /**
+ * Definition list of each stacked item
+ */
+ 'private _$dl': null,
+
+
+ /**
+ * Process group before initial display
+ *
+ * @param {Quote} quote active quote
+ *
+ * @return {undefined}
+ */
+ 'override protected processContent': function( quote )
+ {
+ this._$container = this.$content.find( 'div.stacked-container' );
+ this._$dl = this._$container.find( 'dl' ).detach();
+ },
+
+
+ /**
+ * Add index (stacked item)
+ *
+ * @param {number} index index that has been added (0-indexed)
+ *
+ * @return {StackedGroupUi} self
+ */
+ 'protected override addIndex': function( index )
+ {
+ this.__super( index );
+
+ const $item = this._$dl.clone();
+
+ this.setElementIdIndexes( $item.find( '*' ), index );
+
+ // add the index to the row title
+ $item.find( 'span.item-index' ).text( ' ' + ( index + 1 ) );
+
+ this._$container.append( $item );
+
+ this.styler.apply( $item );
+ this.postAddRow( $item, index );
+
+ return this;
+ },
+
+
+ /**
+ * Remove index (stacked item)
+ *
+ * @param {number} index index that has been removed (0-indexed)
+ *
+ * @return {StackedGroupUi} self
+ */
+ 'protected override removeIndex': function( index )
+ {
+ const $item = this._$container
+ .find( 'dl:last-child' );
+
+ this.styler.remove( $item );
+
+ return this.__super( index );
+ },
+} );