Enyo Canvas LeftBar on hover
a bar which moves on hover
by joopmicroop
HTML
<script type="text/javascript">
new App().renderInto(document.body);
</script>
JavaScript
enyo.kind({
name: 'App',
kind: enyo.Control,
components: [
{
kind: 'leftBarCanvasController'}
],
});
//*************************************************************************************
// leftBarCanvasController
//*************************************************************************************
enyo.kind({
name: 'leftBarCanvasController',
kind: enyo.Control,
style: 'width:25px; height:100%;',
components: [
{
name: 'leftBarCanvasController.leftBarButtonCanvas',
kind: 'leftBarButtonCanvas'},
{
name: 'leftBarCanvasController.leftBarCanvas',
kind: 'leftBarCanvas',
style: 'position:absolute;left:0px;',
},
],
published: {
borderColor: 'rgba(50, 50, 50, 1)',
tabcolor: 'rgba(34, 31, 31, 1)',
borderWidth: 10,
pulloutHeight: 100,
},
handlers: {
onmouseover: "hoverCanvas",
onmouseout: "outCanvas",
},
rendered: function() {
this.inherited(arguments);
this.$['leftBarCanvasController.leftBarCanvas'].borderColor = this.borderColor;
this.$['leftBarCanvasController.leftBarCanvas'].borderWidth = this.borderWidth;
this.$['leftBarCanvasController.leftBarCanvas'].pulloutHeight = this.pulloutHeight;
this.$['leftBarCanvasController.leftBarButtonCanvas'].tabcolor = this.tabcolor;
this.$['leftBarCanvasController.leftBarButtonCanvas'].borderWidth = this.borderWidth;
this.$['leftBarCanvasController.leftBarButtonCanvas'].pulloutHeight = this.pulloutHeight;
this.resizeHandler(); // call once at first run
},
resizeHandler: function() {
this.inherited(arguments);
this.$['leftBarCanvasController.leftBarCanvas'].attributes.width = this.getComputedStyleValue('width');
this.$['leftBarCanvasController.leftBarCanvas'].attributes.height = this.getComputedStyleValue('height');
...