mirror of
https://github.com/Polymer/polymer.git
synced 2025-02-25 18:55:30 -06:00
82 lines
2.4 KiB
HTML
82 lines
2.4 KiB
HTML
<!--
|
|
/*
|
|
* Copyright 2012 The Toolkitchen Authors. All rights reserved.
|
|
* Use of this source code is governed by a BSD-style
|
|
* license that can be found in the LICENSE file.
|
|
*/
|
|
-->
|
|
<element name="g-panel-transition">
|
|
<script>
|
|
this.component({
|
|
prototype: {
|
|
transitionClass: 'transition',
|
|
timeout: 1000,
|
|
//* indicates only one panel should be displayed at a time.
|
|
highlander: true,
|
|
get base() {
|
|
return this.__proto__.__proto__;
|
|
},
|
|
setup: function(inPanels) {
|
|
this.panels = inPanels;
|
|
this.panels.getPanels().forEach(function(p, i) {
|
|
this.setupPanel(p, i);
|
|
}, this);
|
|
this.finishListener = this.finish.bind(this);
|
|
},
|
|
teardown: function() {
|
|
this.panels.getPanels().forEach(function(p, i) {
|
|
this.teardownPanel(p, i);
|
|
}, this);
|
|
},
|
|
setupPanel: function(inPanel, inIndex) {
|
|
if (this.transitionClass) {
|
|
inPanel.classList.add(this.transitionClass);
|
|
}
|
|
var showing = !this.highlander || (inIndex == this.panels.index);
|
|
this.panels.enablePanelShowing(inPanel, showing);
|
|
},
|
|
teardownPanel: function(inPanel, inIndex) {
|
|
inPanel.classList.remove(this.transitionClass);
|
|
inPanel.style.opacity = inPanel.style.webkitTransform = null;
|
|
if (this.highlander) {
|
|
this.panels.enablePanelShowing(inPanel, true);
|
|
};
|
|
},
|
|
canTransition: function() {
|
|
return true;
|
|
},
|
|
go: function(inFrom, inTo, inForward) {
|
|
this.from = inFrom;
|
|
this.to = inTo;
|
|
this.forward = inForward;
|
|
this._transitioning = setTimeout(this.finishListener, this.timeout);
|
|
this.begin(inFrom, inTo, inForward);
|
|
},
|
|
finish: function() {
|
|
if (this._transitioning) {
|
|
this.complete();
|
|
this.cancel();
|
|
this.panels.finishTransition();
|
|
}
|
|
},
|
|
cancel: function() {
|
|
clearTimeout(this._transitioning);
|
|
this._transitioning = null;
|
|
},
|
|
stop: function() {
|
|
this.finish();
|
|
},
|
|
// transitions typically override begin/complete
|
|
begin: function() {
|
|
},
|
|
complete: function() {
|
|
},
|
|
// refresh the transition state
|
|
refresh: function() {
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</element>
|
|
|