simple-checkbox

components.common.simple-checkbox.component.js

import Component from 'ember-component';
import { assert } from 'ember-metal/utils';

const DEFAULT_CLASS_NAME = 'simple-checkbox';
const AVAILABLE_POSITIONS = ['top', 'middle'];

export default Component.extend({
  classNames: `${DEFAULT_CLASS_NAME}`,
  classNameBindings: [`disabled:${DEFAULT_CLASS_NAME}--disabled`],

  autofocus: false,
  checked: null,
  disabled: false,
  position: 'middle',
  readonly: false,

  _update() {
    const componentId = this.get('componentId');
    const checkbox = this.$(`#${componentId}`);

    assert(`Component must have at least one element with an id='{{elementId}}_checkbox'`, checkbox.length);
    checkbox.prop('checked', Boolean(this.get('checked')));

    if (this.get('disabled') || this.get('readonly')) {
      return;
    }
    checkbox.focus();
    this.update();
  },

  click() {
    this._update();
  },

  didReceiveAttrs() {
    assert(`Attribute 'update' must be a function`, typeof this.update === 'function');

    const position = this.get('position');
    assert(`Unsupported position '${position}'.  Available: ${AVAILABLE_POSITIONS.join(', ')}`, AVAILABLE_POSITIONS.indexOf(position) >= 0);
  },

  init() {
    this._super(...arguments);

    const elementId = this.get('elementId');
    this.set('componentId', `${elementId}_checkbox`);
  }
});

components.common.simple-checkbox.template.hbs

<input type='checkbox' id='{{componentId}}' class='simple-checkbox__input {{if disabled 'simple-checkbox__input--disabled'}} {{concat 'simple-checkbox__input--' position}}'
  checked={{checked}}
  autofocus={{autofocus}}
  disabled={{disabled}}
  readonly={{readonly}}>

{{#if hasBlock}}
  <div class='simple-checkbox__content'>
    {{yield}}
  </div>
{{/if}}

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  init() {
    this._super(...arguments);
    this.set('model', Ember.Object.create());
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10pt;
}

.simple-checkbox__input--top {
  vertical-align: top;
}
.simple-checkbox__input--middle {
  vertical-align: middle;
}
.simple-checkbox__content {
  display: inline-block;
}
.simple-checkbox__image {
  display: inline-block;
  vertical-align: middle;
}
.simple-checkbox__text {
  display: inline-block;
}
.simple-checkbox__text--hint {
  color: silver;
}

textarea {
  height: 150px;
  width: 200px;
  margin: 5px 5px 0px 20px;
}

templates.application.hbs

<code>simple-checkbox</code>
<h1>Example</h1>
<div>
  {{#common/simple-checkbox position='top' checked=(readonly model.notification_a) update=(action toggleProperty 'model.notification_a')}}
    <div class='simple-checkbox__text'>
      <div class='simple-checkbox__text--primary'>
        primary text #1
      </div>
      <div class='simple-checkbox__text--hint'>
        secondary text #2
      </div>
    </div>
  {{/common/simple-checkbox}}
</div>

<div>
  {{#common/simple-checkbox position='top' checked=(readonly model.notification_b) update=(action toggleProperty 'model.notification_b')}}
    <div class='simple-checkbox__text'>
      <div class='simple-checkbox__text--primary'>
        primary text #2
      </div>
      <div class='simple-checkbox__text--hint'>
        secondary text #2
      </div>
    </div>
  {{/common/simple-checkbox}}
  {{#if model.notification_b}}
    <div>
      <textarea>some textarea</textarea>
      <div>
        {{#common/simple-checkbox checked=(readonly model.twitter) update=(action toggleProperty 'model.twitter')}}
          <div class='simple-checkbox__icon'>
            <img alt='Twitter' class='simple-checkbox__image' src='https://www.twitter.com/favicon.ico'>
          </div>
        {{/common/simple-checkbox}}
      </div>
    </div>
  {{/if}}
</div>

<h1>attributes</h1>
<div>
  {{#common/simple-checkbox readonly=true checked=(readonly model.readonly) update=(action toggleProperty 'model.readonly')}}
    <div class='simple-checkbox__text'>
      <code>readonly</code>
    </div>
  {{/common/simple-checkbox}}
</div>
<div>
  {{#common/simple-checkbox disabled=true checked=(readonly model.disabled) update=(action toggleProperty 'model.disabled')}}
    <div class='simple-checkbox__text'>
      <code>disabled</code>
    </div>
  {{/common/simple-checkbox}}
</div>

twiddle.json

{
  "version": "0.10.5",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.8.0",
    "ember-data": "2.8.0",
    "ember-template-compiler": "2.8.0",
    "ember-testing": "2.8.0"
  },
  "addons": {}
}