iCheck Ember Component

by amindunited

HTML

<input type='checkbox' class="icheckable"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://rawgit.com/fronteed/iCheck/1.x/icheck.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.9.1/ember.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{i-check checked=view.checked}}
</script>
<script type="text/x-handlebars" data-template-name="components/i-check">
    {{input type='checkbox'}}
</script>

CSS

/* iCheck plugin flat skin, black
----------------------------------- */
.icheckbox_flat,
.iradio_flat {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    background: url(flat.png) no-repeat;
    border: none;
    cursor: pointer;
}

.icheckbox_flat {
    background-position: 0 0;
    border:solid 1px grey;
    border-radius: 14px;
    position:relative;
}
    .icheckbox_flat.checked {
        background-color: green;
    }
    .icheckbox_flat.checked:before{
        content: '\2713';
        color: white;
        width:100%;
        height:100%;
        position:absolute;
        text-align:center;
        line-height:25px;
           
    }
    .icheckbox_flat.disabled {
        cursor: default;
    }
    .icheckbox_flat.checked.disabled {
        
    }

.iradio_flat {
    background-position: -88px 0;
}
    .iradio_flat.checked {
        background-position: -110px 0;
    }
    .iradio_flat.disabled {
        background-position: -132px 0;
        cursor: default;
    }
    .iradio_flat.checked.disabled {
        background-position: -154px 0;
    }

/* HiDPI support */
@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
    .icheckbox_flat,
    .iradio_flat {
        background-image: url([email protected]);
        -webkit-background-size: 176px 22px;
        background-size: 176px 22px;
    }
}

JavaScript

$(function(){
    $('.icheckable').iCheck({
        checkboxClass: 'icheckbox_flat',
        radioClass: 'iradio_flat',
        increaseArea: '20%' // optional
    });
});

App = Em.Application.create({});
App.ApplicationView = Em.View.extend({
    checked: true,
    checkedObserver: function(){
        console.log('parent saw Change');
    }.observes('checked'),
});

App.ICheckComponent = Em.Component.extend({
    checked:false,
    _initializeICheck: function(){
        var self = this;        
        var icheck = this.$('input').iCheck({
            checkboxClass: 'icheckbox_flat'
        });

        if (self.get('checked')) {
            self.$('input').iCheck('check')
        }
        
        icheck.on('ifChecked', function(e){
            self.set('checked', true);
        });
        icheck.on('ifUnchecked', function(e){
            self.set('checked', false);
        });
    }.on('didInsertElement')
    
});