Skip to content

Instantly share code, notes, and snippets.

@stfcodes

stfcodes/components.loading-indicator.js

Created March 22, 2017 16:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save stfcodes/2e24944bb48f447975ad6d8016914c0e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save stfcodes/2e24944bb48f447975ad6d8016914c0e to your computer and use it in GitHub Desktop.
Download ZIP
New Twiddle
Raw
components.loading-indicator.js
import Ember from 'ember';
export default Ember.Component.extend({
loadingIndicator: Ember.inject.service('loading-indicator'),
classNames: ['loading-indicator'],
classNameBindings: ['isLoading'],
isLoading: false,
init() {
this._super(...arguments);
Ember.run.once(this, function () {
console.debug('[loading-indicator] Setting events...');
this.get('loadingIndicator').on('startLoading', this, this.startLoading);
this.get('loadingIndicator').on('stopLoading', this, this.stopLoading);
});
},
willDestroy() {
Ember.run.once(this, function () {
console.debug('[loading-indicator] Destroying events...');
this.get('loadingIndicator').off('startLoading', this, this.startLoading);
this.get('loadingIndicator').off('stopLoading', this, this.stopLoading);
});
},
startLoading() {
console.debug('[loading-indicator] isLoading:true');
this.set('isLoading', true);
},
stopLoading() {
console.debug('[loading-indicator] isLoading:false');
this.set('isLoading', false);
}
});
Raw
router.js
import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend({
location: 'none',
rootURL: config.rootURL
});
Router.map(function() {
this.route('main', { path: '/' }, function() {
this.route('slow-route', function() {
this.route('foo');
this.route('bar');
});
});
});
export default Router;
Raw
routes.application.js
import Ember from 'ember';
export default Ember.Route.extend({
loadingIndicator: Ember.inject.service('loading-indicator'),
doActivate: Ember.on('activate', function(){
console.log('application activating');
}),
doDeactivate: Ember.on('deactivate', function(){
console.log('application deactivating');
}),
actions: {
willTransition() {
this.get('loadingIndicator').start();
return true;
},
didTransition() {
this.get('loadingIndicator').stop();
return true;
},
error() {
this.get('loadingIndicator').stop();
return true;
}
}
});
Raw
routes.index.js
import Ember from 'ember';
export default Ember.Route.extend({
beforeModel() {
return new Ember.RSVP.Promise((resolve) => {
Ember.run.later(() => {
resolve();
}, 1000);
});
},
doActivate: Ember.on('activate', function(){
console.log('application.index activating');
}),
doDeactivate: Ember.on('deactivate', function(){
console.log('application.index deactivating');
})
});
Raw
routes.main.js
import Ember from 'ember';
export default Ember.Route.extend({
beforeModel() {
return new Ember.RSVP.Promise((resolve) => {
Ember.run.later(() => {
resolve();
}, 1000);
});
},
doActivate: Ember.on('activate', function(){
console.log('main activating');
}),
doDeactivate: Ember.on('deactivate', function(){
console.log('main deactivating');
})
});
Raw
routes.main.slow-route.bar.js
import Ember from 'ember';
export default Ember.Route.extend({
beforeModel() {
return new Ember.RSVP.Promise((resolve, reject) => {
Ember.run.later(() => {
reject();
}, 1000);
});
},
doActivate: Ember.on('activate', function(){
console.log('main.slow-route.bar activating');
}),
doDeactivate: Ember.on('deactivate', function(){
console.log('main.slow-route.bar deactivating');
})
});
Raw
routes.main.slow-route.foo.js
import Ember from 'ember';
export default Ember.Route.extend({
beforeModel() {
return new Ember.RSVP.Promise((resolve) => {
Ember.run.later(() => {
resolve();
}, 1000);
});
},
doActivate: Ember.on('activate', function(){
console.log('main.slow-route.foo activating');
}),
doDeactivate: Ember.on('deactivate', function(){
console.log('main.slow-route.foo deactivating');
})
});
Raw
routes.main.slow-route.js
import Ember from 'ember';
export default Ember.Route.extend({
beforeModel() {
return new Ember.RSVP.Promise((resolve) => {
Ember.run.later(() => {
resolve();
}, 1000);
});
},
doActivate: Ember.on('activate', function(){
console.log('main.slow-route activating');
}),
doDeactivate: Ember.on('deactivate', function(){
console.log('main.slow-route deactivating');
})
});
Raw
services.loading-indicator.js
import Ember from 'ember';
export default Ember.Service.extend(Ember.Evented, {
start() {
console.debug('[loading-indicator] triggering:start');
this.trigger('startLoading');
},
stop() {
console.debug('[loading-indicator] triggering:stop');
this.trigger('stopLoading');
}
});
Raw
styles.app.css
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.loading-indicator {
background-color: grey;
color: white;
text-align: center;
}
.is-loading {
background-color: red;
}
Raw
templates.application-loading.hbs
<header>
{{loading-indicator isLoading=true}}
</header>
Raw
templates.components.loading-indicator.hbs
<small>{{#if isLoading}}Loading....{{else}}&nbsp;{{/if}}</small>
Raw
templates.main.hbs
<header>
{{loading-indicator}}
<h1>{{#link-to 'main.index' }}Everything is slow here...{{/link-to}}</h1>
</header>
<section>
<h1>MAIN.HBS</h1>
<nav>
<ul>
<li>{{link-to "Foo with success" 'main.slow-route.foo' }}</li>
<li>{{link-to "Bar with error" 'main.slow-route.bar' }}</li>
</ul>
</nav>
{{outlet}}
</section>
Raw
templates.main.index.hbs
<h1>MAIN.INDEX.HBS</h1>
Raw
templates.main.slow-route.bar-error.hbs
<p style='color:red;'>There was an error here...</p>
Raw
templates.main.slow-route.hbs
<h3>Slow route...</h3>
{{outlet}}
Raw
twiddle.json
{
"version": "0.12.1",
"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.12.0",
"ember-template-compiler": "2.12.0",
"ember-testing": "2.12.0"
},
"addons": {
"ember-data": "2.12.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment