mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-04-01 02:41:39 -05:00
Deleted unused <GhProfileImage> component
no issue - the component became unused when the staff user page design was updated but was never cleaned up
This commit is contained in:
Kevin Ansfield
parent
1130b609c3
commit
aaef8f7d44
7 changed files with 0 additions and 462 deletions
|
|
@ -178,9 +178,6 @@ add|ember-template-lint|no-passed-in-event-handlers|441|40|441|40|055c4b70aa8dab
|
|||
add|ember-template-lint|simple-unless|64|30|64|30|ca177565b6e1c5a6175982047708732f5dde7e59|1652054400000|1662422400000|1665014400000|app/components/gh-post-settings-menu.hbs
|
||||
add|ember-template-lint|simple-unless|195|62|195|62|5d9203e10703908836b537481cf012f167ded239|1652054400000|1662422400000|1665014400000|app/components/gh-post-settings-menu.hbs
|
||||
add|ember-template-lint|no-action|12|16|12|16|40e7337ccf8501ef3b2fea94812d4de8435286da|1652054400000|1662422400000|1665014400000|app/components/gh-products-price-billingperiod.hbs
|
||||
add|ember-template-lint|no-action|14|45|14|45|818de8cb87f2b92338a54aa71f8b0fc95404b264|1652054400000|1662422400000|1665014400000|app/components/gh-profile-image.hbs
|
||||
add|ember-template-lint|no-action|23|16|23|16|01077e862788636fab21f0dbe27fe73a7c227e9b|1652054400000|1662422400000|1665014400000|app/components/gh-profile-image.hbs
|
||||
add|ember-template-lint|require-valid-alt-text|11|8|11|8|473922dad04893d18a81bd598d91e64e5e034544|1652054400000|1662422400000|1665014400000|app/components/gh-profile-image.hbs
|
||||
add|ember-template-lint|no-action|4|14|4|14|c8f6146f9286ec1b289e28983ab446386f390f01|1652054400000|1662422400000|1665014400000|app/components/gh-psm-authors-input.hbs
|
||||
add|ember-template-lint|no-action|5|14|5|14|a90edd9a99596008f60bfcdbc6befe7fe8d26321|1652054400000|1662422400000|1665014400000|app/components/gh-psm-tags-input.hbs
|
||||
add|ember-template-lint|no-action|6|14|6|14|3924d7cfb394cbcfd6b1bf9cf13a5040ac8f94b5|1652054400000|1662422400000|1665014400000|app/components/gh-psm-tags-input.hbs
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
<figure class="account-image">
|
||||
|
||||
{{#unless this.previewDataURL}}
|
||||
<div class="placeholder-img" style={{this.placeholderStyle}}></div>
|
||||
<div id="account-image" class="gravatar-img" style={{this.avatarStyle}}>
|
||||
<span class="sr-only">User image</span>
|
||||
</div>
|
||||
{{/unless}}
|
||||
|
||||
{{#if this.previewDataURL}}
|
||||
<img src={{this.previewDataURL}} class="gravatar-img">
|
||||
{{/if}}
|
||||
|
||||
<span class="edit-account-image" onclick={{action "openFileDialog"}} role="button">
|
||||
{{svg-jar "photos"}}
|
||||
<span class="sr-only">Upload an image</span>
|
||||
</span>
|
||||
|
||||
<GhFileInput
|
||||
@alt={{null}}
|
||||
@name="uploadimage"
|
||||
@multiple={{false}}
|
||||
@action={{action "imageSelected"}}
|
||||
@accept={{this.imageMimeTypes}} />
|
||||
</figure>
|
||||
|
|
@ -1,167 +0,0 @@
|
|||
import $ from 'jquery';
|
||||
import Component from '@ember/component';
|
||||
import md5 from 'blueimp-md5';
|
||||
import request from 'ember-ajax/request';
|
||||
import validator from 'validator';
|
||||
import {htmlSafe} from '@ember/template';
|
||||
import {inject as service} from '@ember/service';
|
||||
import {task, timeout} from 'ember-concurrency';
|
||||
|
||||
const ANIMATION_TIMEOUT = 1000;
|
||||
|
||||
/**
|
||||
* A component to manage a user profile image. By default it just handles picture uploads,
|
||||
* but if passed a bound 'email' property it will render the user's gravatar image
|
||||
*
|
||||
* Example: {{gh-profile-image email=controllerEmailProperty setImage="controllerActionName" debounce=500}}
|
||||
*
|
||||
* @param {int} size The size of the image to render
|
||||
* @param {String} email Reference to a bound email object if gravatar image behavior is desired.
|
||||
* @param {String|action} setImage The string name of the action on the controller to be called when an image is added.
|
||||
* @param {int} debounce Period to wait after changes to email before attempting to load gravatar
|
||||
* @property {Boolean} hasUploadedImage Whether or not the user has uploaded an image (whether or not to show the default image/gravatar image)
|
||||
* @property {String} defaultImage String containing the background-image css property of the default user profile image
|
||||
* @property {String} imageBackground String containing the background-image css property with the gravatar url
|
||||
*/
|
||||
export default Component.extend({
|
||||
config: service(),
|
||||
ghostPaths: service(),
|
||||
|
||||
email: '',
|
||||
size: 180,
|
||||
debounce: 300,
|
||||
|
||||
imageFile: null,
|
||||
hasUploadedImage: false,
|
||||
|
||||
_defaultImageUrl: '',
|
||||
|
||||
// closure actions
|
||||
setImage() {},
|
||||
|
||||
placeholderStyle: htmlSafe('background-image: url()'),
|
||||
avatarStyle: htmlSafe('display: none'),
|
||||
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
|
||||
let defaultImage = '/img/user-image.png';
|
||||
this._defaultImageUrl = this.get('ghostPaths.assetRoot').replace(/\/$/, '') + defaultImage;
|
||||
this._setPlaceholderImage(this._defaultImageUrl);
|
||||
},
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
|
||||
if (this.get('config.useGravatar')) {
|
||||
this.setGravatar.perform();
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
imageSelected(fileList, resetInput) {
|
||||
// eslint-disable-next-line
|
||||
let imageFile = fileList[0];
|
||||
|
||||
if (imageFile) {
|
||||
let reader = new FileReader();
|
||||
|
||||
this.set('imageFile', imageFile);
|
||||
this.setImage(imageFile);
|
||||
|
||||
reader.addEventListener('load', () => {
|
||||
let dataURL = reader.result;
|
||||
this.set('previewDataURL', dataURL);
|
||||
}, false);
|
||||
|
||||
reader.readAsDataURL(imageFile);
|
||||
}
|
||||
|
||||
resetInput();
|
||||
},
|
||||
|
||||
openFileDialog(event) {
|
||||
// simulate click to open file dialog
|
||||
// using jQuery because IE11 doesn't support MouseEvent
|
||||
$(event.target)
|
||||
.closest('figure')
|
||||
.find('input[type="file"]')
|
||||
.click();
|
||||
}
|
||||
},
|
||||
|
||||
dragOver(event) {
|
||||
if (!event.dataTransfer) {
|
||||
return;
|
||||
}
|
||||
|
||||
// this is needed to work around inconsistencies with dropping files
|
||||
// from Chrome's downloads bar
|
||||
if (navigator.userAgent.indexOf('Chrome') > -1) {
|
||||
let eA = event.dataTransfer.effectAllowed;
|
||||
event.dataTransfer.dropEffect = (eA === 'move' || eA === 'linkMove') ? 'move' : 'copy';
|
||||
}
|
||||
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
},
|
||||
|
||||
dragLeave(event) {
|
||||
event.preventDefault();
|
||||
},
|
||||
|
||||
drop(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (event.dataTransfer.files) {
|
||||
this.send('imageSelected', event.dataTransfer.files);
|
||||
}
|
||||
},
|
||||
|
||||
setGravatar: task(function* () {
|
||||
yield timeout(this.debounce);
|
||||
|
||||
let email = this.email;
|
||||
|
||||
if (validator.isEmail(email || '')) {
|
||||
let size = this.size;
|
||||
let gravatarUrl = `//www.gravatar.com/avatar/${md5(email)}?s=${size}&d=404`;
|
||||
|
||||
try {
|
||||
// HEAD request is needed otherwise jquery attempts to process
|
||||
// binary data as JSON and throws an error
|
||||
yield request(gravatarUrl, {type: 'HEAD'});
|
||||
// gravatar exists so switch style and let browser load it
|
||||
this._setAvatarImage(gravatarUrl);
|
||||
// wait for fade-in animation to finish before removing placeholder
|
||||
yield timeout(ANIMATION_TIMEOUT);
|
||||
this._setPlaceholderImage('');
|
||||
} catch (e) {
|
||||
// gravatar doesn't exist so make sure we're still showing the placeholder
|
||||
this._setPlaceholderImage(this._defaultImageUrl);
|
||||
// then make sure the avatar isn't visible
|
||||
this._setAvatarImage('');
|
||||
}
|
||||
}
|
||||
}).restartable(),
|
||||
|
||||
_setPlaceholderImage(url) {
|
||||
this.set('placeholderStyle', htmlSafe(`background-image: url(${url});`));
|
||||
},
|
||||
|
||||
_setAvatarImage(url) {
|
||||
let display = url ? 'block' : 'none';
|
||||
this.set('avatarStyle', htmlSafe(`background-image: url(${url}); display: ${display}`));
|
||||
},
|
||||
|
||||
queueFile(e, data) {
|
||||
let fileName = data.files[0].name;
|
||||
|
||||
if ((/\.(gif|jpe?g|png|svg?z)$/i).test(fileName)) {
|
||||
let action = this.setImage;
|
||||
if (action) {
|
||||
action(data);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -171,93 +171,6 @@
|
|||
box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.gh-flow-content .account-image {
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
left: 50%;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
margin-left: -50px;
|
||||
padding: 4px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: #d1d9db 1px solid;
|
||||
background: #fff;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gh-flow-content .account-image:hover .edit-account-image {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.gh-flow-content .edit-account-image {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
bottom: 4px;
|
||||
left: 4px;
|
||||
width: calc(100% - 8px);
|
||||
background: rgba(87, 163, 232, 0.7);
|
||||
border-radius: 100%;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 3rem;
|
||||
line-height: 90px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gh-flow-content .edit-account-image svg {
|
||||
fill: #fff;
|
||||
height: 3rem;
|
||||
width: auto;
|
||||
flex: 1 1 3rem;
|
||||
}
|
||||
|
||||
.gh-flow-content .placeholder-img {
|
||||
display: block;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
background-color: #f8fbfd;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
border-radius: 100%;
|
||||
animation: fade-in 1s;
|
||||
}
|
||||
|
||||
.gh-flow-content .gravatar-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
box-sizing: content-box;
|
||||
width: calc(100% - 8px);
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border: #fff 4px solid;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
border-radius: 100%;
|
||||
animation: fade-in 1s;
|
||||
}
|
||||
|
||||
.gh-flow-content .file-uploader {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
font-size: 23px;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
transform: scale(14);
|
||||
transform-origin: right;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.gh-flow-content .form-group {
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,7 +51,6 @@
|
|||
"@tryghost/string": "0.1.26",
|
||||
"@tryghost/timezone-data": "0.2.68",
|
||||
"autoprefixer": "9.8.6",
|
||||
"blueimp-md5": "2.19.0",
|
||||
"broccoli-asset-rev": "3.0.0",
|
||||
"broccoli-concat": "4.2.5",
|
||||
"broccoli-funnel": "3.0.8",
|
||||
|
|
|
|||
|
|
@ -1,174 +0,0 @@
|
|||
import Pretender from 'pretender';
|
||||
import Service from '@ember/service';
|
||||
import hbs from 'htmlbars-inline-precompile';
|
||||
import md5 from 'blueimp-md5';
|
||||
import {describe, it} from 'mocha';
|
||||
import {expect} from 'chai';
|
||||
import {find, render} from '@ember/test-helpers';
|
||||
import {setupRenderingTest} from 'ember-mocha';
|
||||
import {timeout} from 'ember-concurrency';
|
||||
|
||||
let pathsStub = Service.extend({
|
||||
assetRoot: '/ghost/assets/',
|
||||
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
|
||||
this.url = {
|
||||
api() {
|
||||
return '';
|
||||
},
|
||||
asset(src) {
|
||||
return src;
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
const stubKnownGravatar = function (server) {
|
||||
server.get('http://www.gravatar.com/avatar/:md5', function () {
|
||||
return [200, {'Content-Type': 'image/png'}, ''];
|
||||
});
|
||||
|
||||
server.head('http://www.gravatar.com/avatar/:md5', function () {
|
||||
return [200, {'Content-Type': 'image/png'}, ''];
|
||||
});
|
||||
};
|
||||
|
||||
const stubUnknownGravatar = function (server) {
|
||||
server.get('http://www.gravatar.com/avatar/:md5', function () {
|
||||
return [404, {}, ''];
|
||||
});
|
||||
|
||||
server.head('http://www.gravatar.com/avatar/:md5', function () {
|
||||
return [404, {}, ''];
|
||||
});
|
||||
};
|
||||
|
||||
let configStubuseGravatar = Service.extend({
|
||||
useGravatar: true
|
||||
});
|
||||
|
||||
describe('Integration: Component: gh-profile-image', function () {
|
||||
setupRenderingTest();
|
||||
|
||||
let server;
|
||||
|
||||
beforeEach(function () {
|
||||
this.owner.register('service:ghost-paths', pathsStub);
|
||||
this.owner.register('service:config', configStubuseGravatar);
|
||||
|
||||
server = new Pretender();
|
||||
stubKnownGravatar(server);
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
server.shutdown();
|
||||
});
|
||||
|
||||
it('renders', async function () {
|
||||
this.set('email', '');
|
||||
|
||||
await render(hbs`
|
||||
{{gh-profile-image email=email}}
|
||||
`);
|
||||
|
||||
expect(find('.account-image')).to.exist;
|
||||
expect(find('.placeholder-img')).to.exist;
|
||||
expect(find('input[type="file"]')).to.exist;
|
||||
});
|
||||
|
||||
it('renders default image if no email supplied', async function () {
|
||||
this.set('email', null);
|
||||
|
||||
await render(hbs`
|
||||
{{gh-profile-image email=email size=100 debounce=50}}
|
||||
`);
|
||||
|
||||
expect(
|
||||
find('.gravatar-img'),
|
||||
'gravatar image style'
|
||||
).to.have.attribute('style', 'display: none');
|
||||
});
|
||||
|
||||
it('renders the gravatar if valid email supplied and privacy.useGravatar allows it', async function () {
|
||||
let email = 'test@example.com';
|
||||
let expectedUrl = `//www.gravatar.com/avatar/${md5(email)}?s=100&d=404`;
|
||||
|
||||
this.set('email', email);
|
||||
|
||||
await render(hbs`
|
||||
{{gh-profile-image email=email size=100 debounce=50}}
|
||||
`);
|
||||
|
||||
expect(
|
||||
find('.gravatar-img'),
|
||||
'gravatar image style'
|
||||
).to.have.attribute('style', `background-image: url(${expectedUrl}); display: block`);
|
||||
});
|
||||
|
||||
it('doesn\'t render the gravatar if valid email supplied but privacy.useGravatar forbids it', async function () {
|
||||
let config = this.owner.lookup('service:config');
|
||||
let email = 'test@example.com';
|
||||
|
||||
this.set('email', email);
|
||||
config.set('useGravatar', false);
|
||||
|
||||
await render(hbs`
|
||||
{{gh-profile-image email=email size=100 debounce=50}}
|
||||
`);
|
||||
|
||||
expect(
|
||||
find('.gravatar-img'),
|
||||
'gravatar image style'
|
||||
).to.have.attribute('style', 'display: none');
|
||||
});
|
||||
|
||||
it('doesn\'t add background url if gravatar image doesn\'t exist', async function () {
|
||||
stubUnknownGravatar(server);
|
||||
|
||||
await render(hbs`
|
||||
{{gh-profile-image email="test@example.com" size=100 debounce=50}}
|
||||
`);
|
||||
|
||||
expect(
|
||||
find('.gravatar-img'),
|
||||
'gravatar image style'
|
||||
).to.have.attribute('style', 'background-image: url(); display: none');
|
||||
});
|
||||
|
||||
// skipped due to random failures on Travis - https://github.com/TryGhost/Ghost/issues/10308
|
||||
it.skip('throttles gravatar loading as email is changed', async function () {
|
||||
let email = 'test@example.com';
|
||||
let expectedUrl = `//www.gravatar.com/avatar/${md5(email)}?s=100&d=404`;
|
||||
|
||||
this.set('email', 'test');
|
||||
|
||||
await render(hbs`
|
||||
{{gh-profile-image email=email size=100 debounce=300}}
|
||||
`);
|
||||
|
||||
this.set('email', email);
|
||||
|
||||
await timeout(50);
|
||||
|
||||
expect(
|
||||
find('.gravatar-img'),
|
||||
'.gravatar-img background not immediately changed on email change'
|
||||
).to.have.attribute('style', 'display: none');
|
||||
|
||||
await timeout(250);
|
||||
|
||||
expect(
|
||||
find('.gravatar-img'),
|
||||
'.gravatar-img background still not changed before debounce timeout'
|
||||
).to.have.attribute('style', 'display: none');
|
||||
|
||||
await timeout(100);
|
||||
|
||||
expect(
|
||||
find('.gravatar-img'),
|
||||
'.gravatar-img background changed after debounce timeout'
|
||||
).to.have.attribute('style', `background-image: url(${expectedUrl}); display: block`);
|
||||
});
|
||||
});
|
||||
|
|
@ -3760,11 +3760,6 @@ bluebird@^3.3.5, bluebird@^3.4.6, bluebird@^3.5.5, bluebird@^3.7.2:
|
|||
resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
|
||||
integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
|
||||
|
||||
blueimp-md5@2.19.0:
|
||||
version "2.19.0"
|
||||
resolved "https://registry.yarnpkg.com/blueimp-md5/-/blueimp-md5-2.19.0.tgz#b53feea5498dcb53dc6ec4b823adb84b729c4af0"
|
||||
integrity sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==
|
||||
|
||||
bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
|
||||
version "4.12.0"
|
||||
resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue