ui/webui/resources/cr_elements/cr_collapse/cr_collapse.js

   1 // Copyright 2015 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @fileoverview
   7  * `cr-collapse` creates a collapsible block of content. By default, the content
   8  * will be collapsed. Use `opened` or `toggle()` to show/hide the content.
   9  * `cr-collapse` adjusts the height/width of the collapsible element to
  10  * show/hide the content. So avoid putting padding/margin/border on the
  11  * collapsible directly, and instead put a `div` inside and style that.
  12  *
  13  * When a `cr-collapse` is toggled, its `opened` field changes immediately, but
  14  * its show/hide animation finishes some time afterward. To determine if the
  15  * element is actually shown in the UI, check for the `cr-collapse-closed` CSS
  16  * class.
  17  *
  18  * Example:
  19  *     <style>
  20  *       #collapse-content {
  21  *         padding: 15px;
  22  *       }
  23  *     </style>
  24  *     <button on-click="{{toggle}}">toggle collapse</button>
  25  *     <cr-collapse id="collapse">
  26  *       <div id="collapse-content">
  27  *         Content goes here...
  28  *       </div>
  29  *     </cr-collapse>
  30  *
  31  *     ...
  32  *
  33  *     toggle: function() {
  34  *       this.$.collapse.toggle();
  35  *     }
  36  *
  37  * @element cr-collapse
  38  */
  39 Polymer({
  40   publish: {
  41     /**
  42      * Set opened to `true` to show the collapse element and to `false` to hide
  43      * it.
  44      *
  45      * @attribute opened
  46      * @type boolean
  47      * @default false
  48      */
  49     opened: {value: false, reflect: true},
  50   },
  51
  52   handleResize_: function() {
  53     this.classList.toggle('cr-collapse-closed', !this.opened);
  54   },
  55
  56   toggle: function() {
  57     this.$.collapse.toggle();
  58   },
  59
  60   ready: function() {
  61     this.$.collapse.addEventListener(
  62         'core-resize', this.handleResize_.bind(this));
  63     this.handleResize_();
  64   },
  65 });