Polymer-based web component for nested views

[ This description is mirrored from README.md at github.com/BrightspaceUI/hierarchical-view on 2019-05-10 ]

d2l-hierarchical-view

Published on webcomponents.org Bower version Build status

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.

Install

Link to this version
ImportedReleased 17 February 2017Apache License 2.0
Framework Support
Polymer 1.0+
Also supported:
Polymer 2 (1.0.5)
Browser Compatibility
Install with
bower install --save BrightspaceUI/hierarchical-view"#0.1.4"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.1.4

Dependencies

  • d2l-polymer-behaviors#~0.0.5
  • polymer#^1.7.0