hierarchical-view:
[ This description is mirrored from README.md at github.com/BrightspaceUI/hierarchical-view on 2019-05-10 ]
d2l-hierarchical-view
A Polymer-based web component and behavior for hierarchical views.
Installation
d2l-hierarchical-view can be installed from Bower:
bower install d2l-hierarchical-view
Usage
Include the webcomponents.js “lite” polyfill (for browsers who don’t natively support web components), then import the component or behavior.
Component
HTML
<head>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../d2l-hierarchical-view/d2l-hierarchical-view.html">
</head>
Nest the d2l-hierarchical-view elements on your page.
<d2l-hierarchical-view id="view1">
<div style="min-height: 200px;">
<div class="buttons">
<button onclick="showSubView('view2a');">view 2a</button>
<button onclick="showSubView('view2b');">view 2b</button>
</div>
view 1
<div class="info">min-height: 200</div>
<div>
<d2l-hierarchical-view id="view2a">
<div style="min-height: 400px;">
<div class="buttons">
<button onclick="showParentView('view2a');">view 1 (parent)</button>
<button onclick="showSubView('view3');">view 3</button>
</div>
view 2a
<div class="info">min-height: 400</div>
<d2l-hierarchical-view id="view3">
<div style="min-height: 300px;">
<div class="buttons">
<button onclick="showParentView('view3');">view 2a (parent)</button>
</div>
view 3
<div class="info">min-height: 300</div>
</div>
</d2l-hierarchical-view>
</div>
</d2l-hierarchical-view>
<d2l-hierarchical-view id="view2b">
<div style="min-height: 200px;">
<div class="buttons">
<button onclick="showParentView('view2b');">view 1 (parent)</button>
</div>
view 2b
<div class="info">min-height: 200</div>
</div>
</d2l-hierarchical-view>
</div>
</div>
</d2l-hierarchical-view>
Methods
Use the show and hide methods on child views to control visibility:
// to show child (hiding parent)
child.show();
// to hide child (show parent)
child.hide();
Other helpful methods:
// get the currently active hierarchical view
view.getActiveView();
// get the root hierarchical view
view.getRootView();
// whether the specified hierarchical view is the active view
view.isActive();
// force resize of the hierarchical view (useful if initially not displayed when attached)
view.resize();
Events
The hierarchical views raise show/hide events when showing or hiding child views.
// triggered when child view will be shown (before animation begins)
view.addEventListener('d2l-hierarchical-view-show-start', () => { ... });
// triggered when child view is shown (when animation ends)
view.addEventListener('d2l-hierarchical-view-show-complete', () => { ... });
// triggered when child view will be hidden (before animation begins)
view.addEventListener('d2l-hierarchical-view-hide-start', () => { ... });
// triggered when child view is hidden (when animation ends)
view.addEventListener('d2l-hierarchical-view-hide-complete', () => { ... });
Behavior
To implement a custom hierarchical view component, import the d2l-hierarchical-view-behavior.html behavior, include the d2l-hierarchical-view-styles styles, and define a template containing the d2l-hierarchical-view-content class. For example, see d2l-hierarchical-view.
Developing, Testing and Contributing
After cloning the repo, run npm install to install dependencies.
If you don’t have it already, install the Polymer CLI globally:
npm install -g polymer-cli
To start a local web server that hosts the demo page and tests:
polymer serve
To lint (eslint and Polymer lint):
npm run lint
To run unit tests locally using Polymer test:
polymer test --skip-plugin sauce
To lint AND run local unit tests:
npm test
Versioning
Commits and PR merges to master will automatically do a minor version bump which will:
- Update the version in
package.json - Add a tag matching the new version
- Create a github release matching the new version
By using either [increment major] or [increment patch] notation inside your merge message, you can overwrite the default version upgrade of minor to the position of your choice.