commit
deb92bf052
|
@ -136,6 +136,17 @@ A list of available styles is detailed in @ref{t:group-styles}.
|
||||||
@tab@center N
|
@tab@center N
|
||||||
@tab@center N
|
@tab@center N
|
||||||
|
|
||||||
|
@item @samp{accordion}
|
||||||
|
@tab
|
||||||
|
Styled as a @samp{stacked} group with a header that toggles
|
||||||
|
the body associated with that index.
|
||||||
|
When collapsed,
|
||||||
|
only the header is visible for that index.
|
||||||
|
The default styling indicates the collapsed status using an arrow in
|
||||||
|
the header.
|
||||||
|
@tab@center Y
|
||||||
|
@tab@center N
|
||||||
|
|
||||||
@item @samp{collapsetable}
|
@item @samp{collapsetable}
|
||||||
@tab
|
@tab
|
||||||
Renders element label in the leftmost column like @samp{sidetable}.
|
Renders element label in the leftmost column like @samp{sidetable}.
|
||||||
|
|
|
@ -36,6 +36,7 @@ var Step = require( '../step/Step' ),
|
||||||
|
|
||||||
Group = require( '../group/Group' ),
|
Group = require( '../group/Group' ),
|
||||||
GroupUi = require( '../ui/group/GroupUi' ),
|
GroupUi = require( '../ui/group/GroupUi' ),
|
||||||
|
AccordionGroupUi = require( '../ui/group/AccordionGroupUi' ),
|
||||||
FlatGroupUi = require( '../ui/group/FlatGroupUi' ),
|
FlatGroupUi = require( '../ui/group/FlatGroupUi' ),
|
||||||
TableGroupUi = require( '../ui/group/TableGroupUi' ),
|
TableGroupUi = require( '../ui/group/TableGroupUi' ),
|
||||||
TabbedGroupUi = require( '../ui/group/TabbedGroupUi' ),
|
TabbedGroupUi = require( '../ui/group/TabbedGroupUi' ),
|
||||||
|
@ -44,9 +45,6 @@ var Step = require( '../step/Step' ),
|
||||||
SideTableGroupUi = require( '../ui/group/SideTableGroupUi' ),
|
SideTableGroupUi = require( '../ui/group/SideTableGroupUi' ),
|
||||||
CollapseTableGroupUi = require( '../ui/group/CollapseTableGroupUi' ),
|
CollapseTableGroupUi = require( '../ui/group/CollapseTableGroupUi' ),
|
||||||
|
|
||||||
// TODO: delete me
|
|
||||||
AccordionGroupUi = require( 'program/ui/AccordionGroupUi' ),
|
|
||||||
|
|
||||||
Ui = require( '../ui/Ui' ),
|
Ui = require( '../ui/Ui' ),
|
||||||
UiStyler = require( '../ui/UiStyler' ),
|
UiStyler = require( '../ui/UiStyler' ),
|
||||||
UiNotifyBar = require( '../ui/UiNotifyBar' ),
|
UiNotifyBar = require( '../ui/UiNotifyBar' ),
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
/**
|
/**
|
||||||
* Base CSS for the Liza Data Collection Framework
|
* Base CSS for the Liza Data Collection Framework
|
||||||
*
|
*
|
||||||
* Copyright (C) 2017 R-T Specialty, LLC.
|
* Copyright (C) 2017, 2019 R-T Specialty, LLC.
|
||||||
*
|
*
|
||||||
* This file is part of the Liza Data Collection Framework.
|
* This file is part of the Liza Data Collection Framework.
|
||||||
*
|
*
|
||||||
|
@ -159,15 +159,46 @@
|
||||||
*
|
*
|
||||||
* TODO: These need liza-* prefixes.
|
* TODO: These need liza-* prefixes.
|
||||||
*
|
*
|
||||||
* Stacked Group
|
* Stacked and Accordion Groups
|
||||||
* ~~~~~~~~~~~~~
|
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||||
|
* Note that the Accordion group is an extended styling of the Stacked group.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.stepGroup dl.stacked dt.stack-header {
|
.stepGroup dl > dt.stack-header {
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stepGroup dl.stacked:not(:first-child) dt.stack-header {
|
/* Upper margins should not appear for accordions, because they should*/
|
||||||
margin-top: 2em;
|
/* appear flush when collapsed. */
|
||||||
|
.stepGroup dl.stacked:not(:first-child) > dt.stack-header {
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Accordions are generalized into a `liza-collapsable' class. Colllapsable
|
||||||
|
/* groups can have their children hidden when collapsed.
|
||||||
|
*/
|
||||||
|
.stepGroup dl.liza-collapsable > dt.stack-header {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepGroup dl.liza-collapsable.liza-collapsed > dt:not(.stack-header),
|
||||||
|
.stepGroup dl.liza-collapsable.liza-collapsed > dd {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Arrows indicate expanded/collapsed status. A downward-facing arrow*/
|
||||||
|
/* indicates that content is expanded (appearing in the direction of the
|
||||||
|
* arrow), and rightward-facing indicates collapsed (as if into the header).
|
||||||
|
*/
|
||||||
|
.stepGroup dl.liza-collapsable > dt.stack-header::before {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 0.25em;
|
||||||
|
content: "▼";
|
||||||
|
}
|
||||||
|
/* Rotation is used for the collapse arrow rather than the character `►'
|
||||||
|
/* because this allows for easy animation via `transition'.
|
||||||
|
*/
|
||||||
|
.stepGroup dl.liza-collapsable.liza-collapsed > dt.stack-header::before {
|
||||||
|
transform: rotate(-90deg);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,53 @@
|
||||||
|
/**
|
||||||
|
* Flat UI group with accordion display
|
||||||
|
*
|
||||||
|
* Copyright (C) 2019 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/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const { Class } = require( 'easejs' );
|
||||||
|
const StackedGroupUi = require( './StackedGroupUi' );
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Collapsable stacked group
|
||||||
|
*/
|
||||||
|
module.exports = Class( 'AccordionGroupUi' )
|
||||||
|
.extend( StackedGroupUi,
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Make stack body collapsable when header is clicked
|
||||||
|
*
|
||||||
|
* @param {jQuery} $dl definition list for group
|
||||||
|
* @param {number} index index to make clickable
|
||||||
|
*
|
||||||
|
* @return {AccordionGroupUi} self
|
||||||
|
*/
|
||||||
|
'protected override postAddRow': function( $dl, index )
|
||||||
|
{
|
||||||
|
const header = $dl[ 0 ].firstElementChild;
|
||||||
|
|
||||||
|
header.addEventListener( 'click', () =>
|
||||||
|
{
|
||||||
|
header.parentElement.classList.toggle( 'liza-collapsed' );
|
||||||
|
} );
|
||||||
|
|
||||||
|
return this.__super( $dl, index );
|
||||||
|
},
|
||||||
|
} );
|
|
@ -745,7 +745,7 @@ module.exports = Class( 'GroupUi' )
|
||||||
*
|
*
|
||||||
* @return {GroupUi} self to allow for method chaining
|
* @return {GroupUi} self to allow for method chaining
|
||||||
*/
|
*/
|
||||||
'protected postAddRow': function( $element, index )
|
'virtual protected postAddRow': function( $element, index )
|
||||||
{
|
{
|
||||||
this.emit( this.__self.$('EVENT_POST_ADD_ROW'), $element, index );
|
this.emit( this.__self.$('EVENT_POST_ADD_ROW'), $element, index );
|
||||||
return this;
|
return this;
|
||||||
|
|
Loading…
Reference in New Issue