← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/iron-collapse/iron-collapse.html

  • Committer: Didier Roche
  • Date: 2016-05-10 23:09:11 UTC
  • Revision ID: didier.roche@canonical.com-20160510230911-c7xr490zrj3yrzxd
New version

Show diffs side-by-side

added added

removed removed

Lines of Context:
facedetection/www/bower_components/iron-collapse/iron-collapse.html
 
1
<!--
 
2
@license
 
3
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 
4
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 
5
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 
6
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 
7
Code distributed by Google as part of the polymer project is also
 
8
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 
9
-->
 
10
 
 
11
<link rel="import" href="../polymer/polymer.html">
 
12
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
 
13
 
 
14
<!--
 
15
`iron-collapse` creates a collapsible block of content.  By default, the content
 
16
will be collapsed.  Use `opened` or `toggle()` to show/hide the content.
 
17
 
 
18
    <button on-click="toggle">toggle collapse</button>
 
19
 
 
20
    <iron-collapse id="collapse">
 
21
      <div>Content goes here...</div>
 
22
    </iron-collapse>
 
23
 
 
24
    ...
 
25
 
 
26
    toggle: function() {
 
27
      this.$.collapse.toggle();
 
28
    }
 
29
 
 
30
`iron-collapse` adjusts the height/width of the collapsible element to show/hide
 
31
the content.  So avoid putting padding/margin/border on the collapsible directly,
 
32
and instead put a div inside and style that.
 
33
 
 
34
    <style>
 
35
      .collapse-content {
 
36
        padding: 15px;
 
37
        border: 1px solid #dedede;
 
38
      }
 
39
    </style>
 
40
 
 
41
    <iron-collapse>
 
42
      <div class="collapse-content">
 
43
        <div>Content goes here...</div>
 
44
      </div>
 
45
    </iron-collapse>
 
46
 
 
47
@group Iron Elements
 
48
@hero hero.svg
 
49
@demo demo/index.html
 
50
@element iron-collapse
 
51
-->
 
52
 
 
53
<dom-module id="iron-collapse">
 
54
 
 
55
  <style>
 
56
 
 
57
    :host {
 
58
      display: block;
 
59
      transition-duration: 300ms;
 
60
      overflow: visible;
 
61
    }
 
62
 
 
63
    :host(.iron-collapse-closed) {
 
64
      display: none;
 
65
    }
 
66
 
 
67
    :host(:not(.iron-collapse-opened)) {
 
68
      overflow: hidden;
 
69
    }
 
70
 
 
71
  </style>
 
72
 
 
73
  <template>
 
74
 
 
75
    <content></content>
 
76
 
 
77
  </template>
 
78
 
 
79
</dom-module>
 
80
 
 
81
<script>
 
82
 
 
83
  Polymer({
 
84
 
 
85
    is: 'iron-collapse',
 
86
 
 
87
    behaviors: [
 
88
      Polymer.IronResizableBehavior
 
89
    ],
 
90
 
 
91
    properties: {
 
92
 
 
93
      /**
 
94
       * If true, the orientation is horizontal; otherwise is vertical.
 
95
       *
 
96
       * @attribute horizontal
 
97
       */
 
98
      horizontal: {
 
99
        type: Boolean,
 
100
        value: false,
 
101
        observer: '_horizontalChanged'
 
102
      },
 
103
 
 
104
      /**
 
105
       * Set opened to true to show the collapse element and to false to hide it.
 
106
       *
 
107
       * @attribute opened
 
108
       */
 
109
      opened: {
 
110
        type: Boolean,
 
111
        value: false,
 
112
        notify: true,
 
113
        observer: '_openedChanged'
 
114
      },
 
115
 
 
116
      /**
 
117
       * Set noAnimation to true to disable animations
 
118
       *
 
119
       * @attribute noAnimation
 
120
       */
 
121
      noAnimation: {
 
122
        type: Boolean
 
123
      },
 
124
 
 
125
    },
 
126
 
 
127
    get dimension() {
 
128
      return this.horizontal ? 'width' : 'height';
 
129
    },
 
130
 
 
131
    hostAttributes: {
 
132
      role: 'group',
 
133
      'aria-hidden': 'true',
 
134
      'aria-expanded': 'false'
 
135
    },
 
136
 
 
137
    listeners: {
 
138
      transitionend: '_transitionEnd'
 
139
    },
 
140
 
 
141
    attached: function() {
 
142
      // It will take care of setting correct classes and styles.
 
143
      this._transitionEnd();
 
144
    },
 
145
 
 
146
    /**
 
147
     * Toggle the opened state.
 
148
     *
 
149
     * @method toggle
 
150
     */
 
151
    toggle: function() {
 
152
      this.opened = !this.opened;
 
153
    },
 
154
 
 
155
    show: function() {
 
156
      this.opened = true;
 
157
    },
 
158
 
 
159
    hide: function() {
 
160
      this.opened = false;
 
161
    },
 
162
 
 
163
    updateSize: function(size, animated) {
 
164
      // No change!
 
165
      if (this.style[this.dimension] === size) {
 
166
        return;
 
167
      }
 
168
 
 
169
      this._updateTransition(false);
 
170
      // If we can animate, must do some prep work.
 
171
      if (animated && !this.noAnimation && this._isDisplayed) {
 
172
        // Animation will start at the current size.
 
173
        var startSize = this._calcSize();
 
174
        // For `auto` we must calculate what is the final size for the animation.
 
175
        // After the transition is done, _transitionEnd will set the size back to `auto`.
 
176
        if (size === 'auto') {
 
177
          this.style[this.dimension] = size;
 
178
          size = this._calcSize();
 
179
        }
 
180
        // Go to startSize without animation.
 
181
        this.style[this.dimension] = startSize;
 
182
        // Force layout to ensure transition will go. Set offsetHeight to itself
 
183
        // so that compilers won't remove it.
 
184
        this.offsetHeight = this.offsetHeight;
 
185
        // Enable animation.
 
186
        this._updateTransition(true);
 
187
      }
 
188
      // Set the final size.
 
189
      this.style[this.dimension] = size;
 
190
    },
 
191
 
 
192
    /**
 
193
     * enableTransition() is deprecated, but left over so it doesn't break existing code.
 
194
     * Please use `noAnimation` property instead.
 
195
     *
 
196
     * @method enableTransition
 
197
     * @deprecated since version 1.0.4
 
198
     */
 
199
    enableTransition: function(enabled) {
 
200
      console.warn('`enableTransition()` is deprecated, use `noAnimation` instead.');
 
201
      this.noAnimation = !enabled;
 
202
    },
 
203
 
 
204
    _updateTransition: function(enabled) {
 
205
      this.style.transitionDuration = (enabled && !this.noAnimation) ? '' : '0s';
 
206
    },
 
207
 
 
208
    _horizontalChanged: function() {
 
209
      this.style.transitionProperty = this.dimension;
 
210
      var otherDimension = this.dimension === 'width' ? 'height' : 'width';
 
211
      this.style[otherDimension] = '';
 
212
      this.updateSize(this.opened ? 'auto' : '0px', false);
 
213
    },
 
214
 
 
215
    _openedChanged: function() {
 
216
      this.setAttribute('aria-expanded', this.opened);
 
217
      this.setAttribute('aria-hidden', !this.opened);
 
218
 
 
219
      this.toggleClass('iron-collapse-closed', false);
 
220
      this.toggleClass('iron-collapse-opened', false);
 
221
      this.updateSize(this.opened ? 'auto' : '0px', true);
 
222
 
 
223
      // Focus the current collapse.
 
224
      if (this.opened) {
 
225
        this.focus();
 
226
      }
 
227
      if (this.noAnimation) {
 
228
        this._transitionEnd();
 
229
      }
 
230
    },
 
231
 
 
232
    _transitionEnd: function() {
 
233
      if (this.opened) {
 
234
        this.style[this.dimension] = 'auto';
 
235
      }
 
236
      this.toggleClass('iron-collapse-closed', !this.opened);
 
237
      this.toggleClass('iron-collapse-opened', this.opened);
 
238
      this._updateTransition(false);
 
239
      this.notifyResize();
 
240
    },
 
241
 
 
242
    /**
 
243
     * Simplistic heuristic to detect if element has a parent with display: none
 
244
     *
 
245
     * @private
 
246
     */
 
247
    get _isDisplayed() {
 
248
      var rect = this.getBoundingClientRect();
 
249
      for (var prop in rect) {
 
250
        if (rect[prop] !== 0) return true;
 
251
      }
 
252
      return false;
 
253
    },
 
254
 
 
255
    _calcSize: function() {
 
256
      return this.getBoundingClientRect()[this.dimension] + 'px';
 
257
    }
 
258
 
 
259
  });
 
260
 
 
261
</script>