Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

🎨 make lazyLoader return a promise for loadStyle method

Browse source 
no issue
- cleans up the interface to maintain consistency between loadScript and
loadStyle
- update gh-cm-editor component to await result of loadStyle
This commit is contained in:
Austin Burdine 2017-03-03 10:13:22 -06:00 • committed by Kevin Ansfield
parent 85d9d76f88
commit 3536d91c9c
3 changed files with 23 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ghost/admin/app/components/gh-cm-editor.js
View file

@ -2,6 +2,7 @@
import Component from 'ember-component';
import run, {bind, scheduleOnce} from 'ember-runloop';
import injectService from 'ember-service/inject';
import RSVP from 'rsvp';
import boundOneWay from 'ghost-admin/utils/bound-one-way';
import {InvokeActionMixin} from 'ember-invoke-action';
@ -25,9 +26,12 @@ const CmEditorComponent = Component.extend(InvokeActionMixin, {
didInsertElement() {
this._super(...arguments);
this.get('lazyLoader').loadStyle('codemirror', 'assets/codemirror/codemirror.css');
let loader = this.get('lazyLoader');
this.get('lazyLoader').loadScript('codemirror', 'assets/codemirror/codemirror.js').then(() => {
RSVP.all([
loader.loadStyle('codemirror', 'assets/codemirror/codemirror.css'),
loader.loadScript('codemirror', 'assets/codemirror/codemirror.js')
]).then(() => {
scheduleOnce('afterRender', this, function () {
this._initCodeMirror();
});

16
ghost/admin/app/services/lazy-loader.js
View file

@ -40,14 +40,18 @@ export default Service.extend({
},
loadStyle(key, url) {
if (this.get('testing')) {
if (this.get('testing') || $(`#${key}-styles`).length) {
return RSVP.resolve();
}
if (!$(`#${key}-styles`).length) {
let $style = $(`<link rel="stylesheet" id="${key}-styles" />`);
$style.attr('href', `${this.get('ghostPaths.adminRoot')}${url}`);
$('head').append($style);
}
return new RSVP.Promise((resolve, reject) => {
let link = document.createElement('link');
link.id = `${key}-styles`;
link.rel = 'stylesheet';
link.href = `${this.get('ghostPaths.adminRoot')}${url}`;
link.onload = resolve;
link.onerror = reject;
$('head').append($(link));
});
}
});

15
ghost/admin/tests/integration/services/lazy-loader-test.js
View file

@ -20,7 +20,7 @@ describe('Integration: Service: lazy-loader', function() {
server.shutdown();
});
it('loads a script correctly and only once', function (done) {
it('loads a script correctly and only once', function () {
let subject = this.subject({
ghostPaths,
scriptPromises: {},
@ -33,7 +33,7 @@ describe('Integration: Service: lazy-loader', function() {
return [200, {'Content-Type': 'text/javascript'}, 'window.testLoadScript = \'testvalue\''];
});
subject.loadScript('test-script', 'test.js').then(() => {
return subject.loadScript('test-script', 'test.js').then(() => {
expect(subject.get('scriptPromises.test-script')).to.exist;
expect(window.testLoadScript).to.equal('testvalue');
expect(server.handlers[0].numberOfCalls).to.equal(1);
@ -41,8 +41,6 @@ describe('Integration: Service: lazy-loader', function() {
return subject.loadScript('test-script', 'test.js');
}).then(() => {
expect(server.handlers[0].numberOfCalls).to.equal(1);
done();
});
});
@ -52,9 +50,10 @@ describe('Integration: Service: lazy-loader', function() {
testing: false
});
subject.loadStyle('testing', 'style.css');
expect($('#testing-styles').length).to.equal(1);
expect($('#testing-styles').attr('href')).to.equal('/assets/style.css');
return subject.loadStyle('testing', 'style.css').catch(() => {
// we add a catch handler here because `/assets/style.css` doesn't exist
expect($('#testing-styles').length).to.equal(1);
expect($('#testing-styles').attr('href')).to.equal('/assets/style.css');
});
});
});