blob: bf212bf75b370d3f208cb1215400ea014cb9d120 [file] [log] [blame]
<!DOCTYPE html>
<!--
Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<!--
@fileoverview A basic container that shows and hides itself based on an
event fired by a specified target.
-->
<polymer-element name="tracing-analysis-toggle-container"
constructor="TracingAnalysisToggleContainer">
<template>
<style>
:host(:[visible]) {
display: flex;
}
:host(:not([visible])) {
display: none;
}
::content > * {
flex: 0 1 auto;
}
</style>
<content></content>
</template>
<script>
'use strict';
Polymer({
/**
* The visible property governs wether the component displays
* it's contents or not.
*/
publish: {
visible: {
value: false,
reflect: true
}
},
created: function() {
this.toggleListeners_ = [];
},
toggleVisible: function() {
this.visible = !this.visible;
},
setToggleListener: function(target, eventType) {
var listenerFunction = this.toggleVisible.bind(this);
target.addEventListener(eventType, listenerFunction, false);
this.toggleListeners_.push({
target: target,
eventType: eventType,
listenerFunction: listenerFunction
});
},
clearToggleListener: function(target, eventType) {
for (var i = 0; i < this.toggleListeners_.length; i++) {
var listener = this.toggleListeners_[i];
if (listener.target === target && listener.eventType === eventType) {
target.removeEventListener(listener.eventType,
listener.listenerFunction, false);
this.toggleListeners_.splice(i, 1);
return;
}
}
}
});
</script>
</polymer-element>