Color picker
import Ember from 'ember';
export default Ember.Component.extend({
modelColorObserver: Ember.observer('model.color',function(){
this.set('color',this.get('model.color'));
}),
color: '#FFFFF',
hexValue: Ember.observer('color',function(key, val) {
if (arguments.length == 2) {
if (val.length == 7)
this.set('color', val);
}
return this.get('color');
}),
actions: {
saveModel(model)
{
let _this = this;
if(model.validate()) {
model.set('color', _this.get('color'));
let color = model.get('color');
let c = color.substring(1); // strip #
let rgb = parseInt(c, 16); // convert rrggbb to decimal
let r = (rgb >> 16) & 0xff; // extract red
let g = (rgb >> 8) & 0xff; // extract green
let b = (rgb >> 0) & 0xff; // extract blue
let luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
if (luma < 130)
model.set('whiteText', true);
else
model.set('whiteText', false);
model.save().then(function () {
toastr.success('Label sauvegardé');
_this.sendAction('transition');
}).catch(function (reason) {
console.log(reason);
toastr.error('Erreur lors de la sauvegarde');
});
}
},
selectCategory: function (category) {
this.get('model').set('category', category.id);
}
},
init(){
this._super(...arguments);
let color = this.get('model.color');
this.set('color',color);
},
didInsertElement(){
let color = this.get('model.color');
let _this = this;
this.$(".color-swatch").spectrum({
showInput: false,
showButtons: false,
color: color,
change: function(newColor) {
_this.set('color', newColor.toHexString());
}
});
this.$('.color-swatch').on("dragstop.spectrum", function(e, newColor) {
_this.set('color', newColor.toHexString());
});
}
});
{{#fields.form-group label="app.tags.forms.fields.label" fieldName="label" errors=model.errors}}
{{input class="form-control" name="label" type="text" value=model.label}}
{{/fields.form-group}}
<div style="height: 50px; width: 50px;
border-radius: 4px;
border: 1px solid #000;background-color: {{color}}" class='color-swatch'></div>
<div class='hex-input'>
Hex: {{input type='text' value=color class='hex' placeholder='#00000'}}
</div>
{{#fields.form-group label="app.tags.forms.fields.category" fieldName="category" errors=model.errors}}
{{#power-select searchEnabled=false selected=model.categoryObject options=model.categories onchange=(action "selectCategory") as |category|}}
{{t category.label}}
{{/power-select}}
{{/fields.form-group}}
<div class="form-group text-right m-t-lg">
{{#link-to 'app.tags' class="btn btn-white" active=false }}{{t 'buttons.cancel'}}{{/link-to}}
<button {{action 'saveModel' model}} class="btn btn-primary">{{t 'buttons.save'}}</button>
</div>
{{yield}}