Skip to content
This repository has been archived by the owner on Nov 28, 2022. It is now read-only.

Commit

Permalink
Add {{background-image-style}} helper
Browse files Browse the repository at this point in the history
no issue
- cleans up multiple CPs that were only outputting a background image style
- moves URL decoding/encoding and `htmlSafe` output into one place
  • Loading branch information
kevinansfield committed May 14, 2018
1 parent c714370 commit 902e361
Show file tree
Hide file tree
Showing 8 changed files with 57 additions and 36 deletions.
11 changes: 0 additions & 11 deletions app/components/gh-post-settings-menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import formatMarkdown from 'ghost-admin/utils/format-markdown';
import moment from 'moment';
import {alias, or} from '@ember/object/computed';
import {computed} from '@ember/object';
import {htmlSafe} from '@ember/string';
import {run} from '@ember/runloop';
import {inject as service} from '@ember/service';
import {task, timeout} from 'ember-concurrency';
Expand Down Expand Up @@ -46,16 +45,6 @@ export default Component.extend(SettingsMenuMixin, {
twitterImage: or('post.twitterImage', 'post.featureImage'),
twitterTitle: or('twitterTitleScratch', 'seoTitle'),

twitterImageStyle: computed('twitterImage', function () {
let image = this.get('twitterImage');
return htmlSafe(`background-image: url(${image})`);
}),

facebookImageStyle: computed('facebookImage', function () {
let image = this.get('facebookImage');
return htmlSafe(`background-image: url(${image})`);
}),

seoDescription: computed('post.scratch', 'metaDescriptionScratch', function () {
let metaDescription = this.get('metaDescriptionScratch') || '';
let mobiledoc = this.get('post.scratch');
Expand Down
6 changes: 0 additions & 6 deletions app/components/gh-user-active.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,12 @@
import Component from '@ember/component';
import moment from 'moment';
import {computed} from '@ember/object';
import {htmlSafe} from '@ember/string';

export default Component.extend({
tagName: '',

user: null,

userImageBackground: computed('user.profileImageUrl', function () {
let url = encodeURI(decodeURI(this.user.get('profileImageUrl')));
return htmlSafe(`background-image: url(${url})`);
}),

lastLoginUTC: computed('user.lastLoginUTC', function () {
let lastLoginUTC = this.get('user.lastLoginUTC');

Expand Down
14 changes: 0 additions & 14 deletions app/controllers/team/user.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import Controller from '@ember/controller';
import Ember from 'ember';
import boundOneWay from 'ghost-admin/utils/bound-one-way';
import isNumber from 'ghost-admin/utils/isNumber';
import validator from 'npm:validator';
import windowProxy from 'ghost-admin/utils/window-proxy';
import {alias, and, not, or, readOnly} from '@ember/object/computed';
import {computed} from '@ember/object';
import {htmlSafe} from '@ember/string';
import {isArray as isEmberArray} from '@ember/array';
import {run} from '@ember/runloop';
import {inject as service} from '@ember/service';
Expand Down Expand Up @@ -61,18 +59,6 @@ export default Controller.extend({
}
}),

// duplicated in gh-user-active -- find a better home and consolidate?
userImageBackground: computed('user.profileImageUrl', function () {
let url = encodeURI(decodeURI(this.user.get('profileImageUrl')));
return htmlSafe(`background-image: url(${url})`);
}),
// end duplicated

coverImageBackground: computed('user.coverImage', function () {
let url = encodeURI(decodeURI(this.user.get('coverImageUrl')));
return htmlSafe(`background-image: url(${url})`);
}),

coverTitle: computed('user.name', function () {
return `${this.get('user.name')}'s Cover Image`;
}),
Expand Down
13 changes: 13 additions & 0 deletions app/helpers/background-image-style.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import {helper} from '@ember/component/helper';
import {htmlSafe} from '@ember/string';

export function backgroundImageStyle([url]/*, hash*/) {
if (url) {
let safeUrl = encodeURI(decodeURI(url));
return htmlSafe(`background-image: url(${safeUrl});`);
}

return '';
}

export default helper(backgroundImageStyle);
4 changes: 2 additions & 2 deletions app/templates/components/gh-post-settings-menu.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,7 @@
<label>Preview</label>
<div class="gh-twitter-preview">
{{#if twitterImage}}
<div class="gh-twitter-preview-image" style={{twitterImageStyle}}></div>
<div class="gh-twitter-preview-image" style={{background-image-style twitterImage}}></div>
{{/if}}
<div class="gh-twitter-preview-content">
<div class="gh-twitter-preview-title">{{twitterTitle}}</div>
Expand Down Expand Up @@ -341,7 +341,7 @@
<label>Preview</label>
<div class="gh-og-preview">
{{#if facebookImage}}
<div class="gh-og-preview-image" style={{facebookImageStyle}}></div>
<div class="gh-og-preview-image" style={{background-image-style facebookImage}}></div>
{{/if}}
<div class="gh-og-preview-content">
<div class="gh-og-preview-title">{{truncate facebookTitle 88}}</div>
Expand Down
2 changes: 1 addition & 1 deletion app/templates/components/gh-user-list-item.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
{{#link-to 'team.user' user.slug data-test-user-id=user.id}}
<article class="apps-card-app">
<div class="apps-card-left">
<span class="user-list-item-figure" style={{component.userImageBackground}}>
<span class="user-list-item-figure" style={{background-image-style user.profileImageUrl}}>
<span class="hidden">Photo of {{user.name}}</span>
</span>
<div class="apps-card-meta">
Expand Down
4 changes: 2 additions & 2 deletions app/templates/team/user.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@
<div class="gm-main view-container settings-user">
<form class="user-profile" novalidate="novalidate" autocomplete="off" {{action (perform save) on="submit"}}>

<figure class="user-cover" style={{coverImageBackground}}>
<figure class="user-cover" style={{background-image-style user.coverImageUrl}}>
<button type="button" class="gh-btn gh-btn-default user-cover-edit" {{action "toggleUploadCoverModal"}}><span>Change Cover</span></button>
{{#if showUploadCoverModal}}
{{gh-fullscreen-modal "upload-image"
Expand All @@ -107,7 +107,7 @@
</figure>

<figure class="user-image">
<div id="user-image" class="img" style="{{userImageBackground}}"><span class="hidden">{{user.name}}"s Picture</span></div>
<div id="user-image" class="img" style={{background-image-style user.profileImageUrl}}><span class="hidden">{{user.name}}"s Picture</span></div>
<button type="button" {{action "toggleUploadImageModal"}} class="edit-user-image">Edit Picture</button>
{{#if showUploadImageModal}}
{{gh-fullscreen-modal "upload-image"
Expand Down
39 changes: 39 additions & 0 deletions tests/integration/helpers/background-image-style-test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import hbs from 'htmlbars-inline-precompile';
import {describe, it} from 'mocha';
import {expect} from 'chai';
import {setupComponentTest} from 'ember-mocha';

describe('Integration: Helper: background-image-style', function () {
setupComponentTest('background-image-style', {
integration: true
});

it('renders', function () {
this.render(hbs`{{background-image-style "test.png"}}`);
expect(this.$().text().trim()).to.equal('background-image: url(test.png);');
});

it('escapes URLs', function () {
this.render(hbs`{{background-image-style "test image.png"}}`);
expect(this.$().text().trim()).to.equal('background-image: url(test%20image.png);');
});

it('handles already escaped URLs', function () {
this.render(hbs`{{background-image-style "test%20image.png"}}`);
expect(this.$().text().trim()).to.equal('background-image: url(test%20image.png);');
});

it('handles empty URLs', function () {
this.set('testImage', undefined);
this.render(hbs`{{background-image-style testImage}}`);
expect(this.$().text().trim(), 'undefined').to.equal('');

this.set('testImage', null);
this.render(hbs`{{background-image-style testImage}}`);
expect(this.$().text().trim(), 'null').to.equal('');

this.set('testImage', '');
this.render(hbs`{{background-image-style testImage}}`);
expect(this.$().text().trim(), 'blank').to.equal('');
});
});

0 comments on commit 902e361

Please sign in to comment.