ember components test

by amindunited

HTML

<script scr="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.1.2/ember.min.js"></script>

<script type="text/x-handlebars" data-template-name="application">
    Application
    {{fader}}
</script>
<script type="text/x-handlebars" data-template-name="components/fader">

</script>

CSS

fader {
    width: 150px;
    border-radius: 10px 8px;
}

JavaScript

App = Em.Application.create();

App.FaderComponent = Ember.Component.extend({
    tagName:"fader",
    didInsertElement: function(){
        console.log("so inserting ... ", this.$());
        var canvas = document.createElement('canvas');
        $(canvas).appendTo(this.$());
        var ctx = canvas.getContext('2d');
        console.log("I need a width ", this.$().width(), this.$().css('borderRadius'));
        var cssWidth = this.$().width();
        var cssHeight = this.$().height();
        var cssRounded = this.$().css('borderRadius');
        var cssPoundedLeft = this.$().css('borderRadius');
        
        var borderTopLeftRadius = this.$().css('borderTopLeftRadius');//:     1em 5em;
        var borderTopRightRadius = this.$().css('borderTopRightRadius');//:    1em 5em;
        var borderBottomRightRadius = this.$().css('borderBottomRightRadius');//: 1em 5em;
        var borderBottomLeftRadius = this.$().css('borderBottomLeftRadius');//:  1em 5em;
        
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(cssWidth, 0);
        ctx.curveTo()
        ctx.lineTo(cssWidth, cssHeight);
        ctx.lineTo(0, cssHeight);
        ctx.fill();
        
    }
})