product-option

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  options: [
    {
      "display_name": "Color",
      "option_id": 1128,
      "sort_order": 0,
      "values": [
        {
          "option_id": 1128,
          "value": "#000000",
          "label": "Black",
          "is_default": false,
          "sort_order": 1,
          "id": 3116
        },
        {
          "option_id": 1128,
          "value": "#373B44",
          "label": "Gray",
          "is_default": false,
          "sort_order": 2,
          "id": 3122
        },
        {
          "option_id": 1128,
          "value": "#1F243E",
          "label": "Navy Blue",
          "is_default": false,
          "sort_order": 3,
          "id": 3123
        },
        {
          "option_id": 1128,
          "value": "#461D7C",
          "label": "Purple",
          "is_default": false,
          "sort_order": 4,
          "id": 3124
        },
        {
          "option_id": 1128,
          "value": "#D62121",
          "label": "Red",
          "is_default": false,
          "sort_order": 5,
          "id": 3125
        },
        {
          "option_id": 1128,
          "value": "#3731B7",
          "label": "Royal Blue",
          "is_default": false,
          "sort_order": 6,
          "id": 3126
        },
        {
          "option_id": 1128,
          "value": "#FFFFFF",
          "label": "White",
          "is_default": false,
          "sort_order": 7,
          "id": 3128
        }
      ],
      "is_required": true,
      "id": 1573
    },
    {
      "display_name": "Size",
      "option_id": 1129,
      "sort_order": 1,
      "values": [
        {
          "option_id": 1129,
          "value": "Large",
          "label": "Large",
          "is_default": false,
          "sort_order": 2,
          "id": 3117
        },
        {
          "option_id": 1129,
          "value": "Medium",
          "label": "Medium",
          "is_default": false,
          "sort_order": 1,
          "id": 3118
        },
        {
          "option_id": 1129,
          "value": "Small",
          "label": "Small",
          "is_default": false,
          "sort_order": 0,
          "id": 3119
        },
        {
          "option_id": 1129,
          "value": "X-Large",
          "label": "X-Large",
          "is_default": false,
          "sort_order": 3,
          "id": 3120
        },
        {
          "option_id": 1129,
          "value": "XX-Large",
          "label": "XX-Large",
          "is_default": false,
          "sort_order": 4,
          "id": 3121
        }
      ],
      "is_required": true,
      "id": 1574
    }
  ],
  option: {
      "display_name": "Color",
      "option_id": 1128,
      "sort_order": 0,
      "values": [
        {
          "option_id": 1128,
          "value": "#000000",
          "label": "Black",
          "is_default": false,
          "sort_order": 1,
          "id": 3116
        },
        {
          "option_id": 1128,
          "value": "#373B44",
          "label": "Gray",
          "is_default": false,
          "sort_order": 2,
          "id": 3122
        },
        {
          "option_id": 1128,
          "value": "#1F243E",
          "label": "Navy Blue",
          "is_default": false,
          "sort_order": 3,
          "id": 3123
        },
        {
          "option_id": 1128,
          "value": "#461D7C",
          "label": "Purple",
          "is_default": false,
          "sort_order": 4,
          "id": 3124
        },
        {
          "option_id": 1128,
          "value": "#D62121",
          "label": "Red",
          "is_default": false,
          "sort_order": 5,
          "id": 3125
        },
        {
          "option_id": 1128,
          "value": "#3731B7",
          "label": "Royal Blue",
          "is_default": false,
          "sort_order": 6,
          "id": 3126
        },
        {
          "option_id": 1128,
          "value": "#FFFFFF",
          "label": "White",
          "is_default": false,
          "sort_order": 7,
          "id": 3128
        }
      ],
      "is_required": true,
      "id": 1573
    }
});

application.template.hbs

{{#each options as |option|}}
{{product-option option=option}}
{{/each}}

helpers.is-color.js

import Ember from 'ember';

export function isColor(params/*, hash*/) {
  return params[0][0] === '#';
}

export default Ember.Helper.helper(isColor);

helpers.is-equal.js

import Ember from 'ember';

export function isEqual(params/*, hash*/) {
  return params[0] === params[1];
}

export default Ember.Helper.helper(isEqual);

product-option.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  selectedOption: null,
  actions: {
  	setOptionValue(option, value) {
    	this.set('selectedOption', value);
    }	
  }
});

product-option.template.hbs

<h1>{{option.display_name}}</h1>
{{#each option.values as |opt|}}
<span
	class="product-option-value {{if (is-equal selectedOption opt.id) 'active'}} {{if (is-color opt.value) 'product-option-value-color' 'product-option-value-text'}}"
  style="background-color: {{if (is-color opt.value) opt.value}}"
  {{action 'setOptionValue' opt.option_id opt.id}}>{{opt.label}}</span>
{{/each}}

styles.app.css

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

.product-option-value {
	display: inline-block;
  border: 2px solid black;
}

.product-option-value.active {
  border-color: red;
  background-color: rgba(0,0,0,0.1);
}

.product-option-value-color {
	width: 50px;
  height: 50px;
  overflow: hidden;
  color: transparent;
}

.product-option-value-text {
	margin-bottom: 10px;
  padding: 5px 10px;
}

twiddle.json

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