9fb8be5a72
* create masked-input component
52 lines
1.1 KiB
JavaScript
52 lines
1.1 KiB
JavaScript
import Ember from 'ember';
|
|
const { computed } = Ember;
|
|
import autosize from 'autosize';
|
|
|
|
|
|
export default Ember.Component.extend({
|
|
value: null,
|
|
didInsertElement(){
|
|
this._super(...arguments);
|
|
autosize(this.element.querySelector('textarea'));
|
|
},
|
|
didUpdate(){
|
|
this._super(...arguments);
|
|
autosize.update(this.element.querySelector('textarea'));
|
|
},
|
|
willDestroyElement(){
|
|
this._super(...arguments);
|
|
autosize.destroy(this.element.querySelector('textarea'));
|
|
},
|
|
shouldObscure: computed("isMasked", "isFocused", "value", function(){
|
|
if(this.get('value') === "" ){
|
|
return false;
|
|
}
|
|
if(this.get('isFocused') === true){
|
|
return false;
|
|
}
|
|
return this.get('isMasked');
|
|
}),
|
|
displayValue: computed("shouldObscure", function(){
|
|
if(this.get("shouldObscure")){
|
|
return "■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■";
|
|
}
|
|
else{
|
|
return this.get('value');
|
|
}
|
|
}),
|
|
isMasked: true,
|
|
isFocused: false,
|
|
displayOnly: false,
|
|
onKeyDown(){},
|
|
onChange(){},
|
|
actions: {
|
|
toggleMask(){
|
|
this.toggleProperty('isMasked');
|
|
},
|
|
updateValue(e){
|
|
this.set('value', e.target.value);
|
|
this.onChange();
|
|
},
|
|
}
|
|
});
|