Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Component Blur Demo
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
<h1>Component Blur Demo</h1>
<br>
<br>
{{my-component}}
<br>
<br>
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['focus-box'],
attributeBindings: ['tabindex'],
'tabindex': 1000,
hasFocus: false,
_focuslistener: null,
_blurlistener: null,
didInsertElement() {
this._super();
this._blurlistener = () => {
this.set('hasFocus', false);
};
this._focuslistener = () => {
this.set('hasFocus', true);
};
this.element.addEventListener('blur', this._blurlistener, true);
this.element.addEventListener('focus', this._focuslistener, true);
},
willDestroyElement() {
this._super();
this.element.removeEventListener('blur', this._blurlistener, true);
this.element.removeEventListener('focus', this._focuslistener, true);
this._focuslistener = null;
this._blurlistener = null;
}
});
<p>
This component box is {{if hasFocus 'focused' 'blurred'}}.
</p>
<p>
Click anywhere outside it's box to blur it.
</p>
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
background: #444;
color: #f0bf50;
}
.focus-box {
padding: 1em;
border: 1px solid #bbb;
background: #666;
}
.focus-box:focus {
outline: none;
}
{
"version": "0.6.1",
"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.3.1/ember.debug.js",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.3.3/ember-data.js",
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.