mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-04 08:54:36 +03:00
a63dbb7da6
closes TryGhost/Ghost#8307 - unloading the store and refreshing the `session.user` attribute after an import was triggering a rendering edge case where the style was re-computed and a re-render was attempted after the sidebar has been destroyed - rather than binding a style attribute directly to a CP in `gh-nav-menu` we pass the menu icon in (using `settings.settledIcon` - see below) and manually set the style attribute via the `didReceiveAttrs` hook so that outside changes don't trigger re-computations when we don't expect them and so we can still react to icons being uploaded or removed - our usage of `settings.icon` is a bit of an odd situation because it's a link to an external resource that will only resolve correctly after a successful save - if we change `settings.icon` in the local store and the nav menu icon style updates before the save has been completed then the server will give us the old icon. To work around this a `settings.settledIcon` attribute has been added that is only updated when we receive data from the store ensuring that our cache-busting technique works correctly
81 lines
2.3 KiB
JavaScript
81 lines
2.3 KiB
JavaScript
import Component from 'ember-component';
|
|
import injectService from 'ember-service/inject';
|
|
import {htmlSafe} from 'ember-string';
|
|
import calculatePosition from 'ember-basic-dropdown/utils/calculate-position';
|
|
|
|
export default Component.extend({
|
|
config: injectService(),
|
|
session: injectService(),
|
|
ghostPaths: injectService(),
|
|
feature: injectService(),
|
|
routing: injectService('-routing'),
|
|
|
|
tagName: 'nav',
|
|
classNames: ['gh-nav'],
|
|
classNameBindings: ['open'],
|
|
|
|
open: false,
|
|
iconStyle: '',
|
|
|
|
// the menu has a rendering issue (#8307) when the the world is reloaded
|
|
// during an import which we have worked around by not binding the icon
|
|
// style directly. However we still need to keep track of changing icons
|
|
// so that we can refresh when a new icon is uploaded
|
|
didReceiveAttrs() {
|
|
this._setIconStyle();
|
|
},
|
|
|
|
mouseEnter() {
|
|
this.sendAction('onMouseEnter');
|
|
},
|
|
|
|
// equivalent to "left: auto; right: -20px"
|
|
userDropdownPosition(trigger, dropdown) {
|
|
let {horizontalPosition, verticalPosition, style} = calculatePosition(...arguments);
|
|
let {width: dropdownWidth} = dropdown.firstElementChild.getBoundingClientRect();
|
|
|
|
style.right += (dropdownWidth - 20);
|
|
style['z-index'] = 1100;
|
|
|
|
return {horizontalPosition, verticalPosition, style};
|
|
},
|
|
|
|
_setIconStyle() {
|
|
let icon = this.get('icon');
|
|
|
|
if (icon === this._icon) {
|
|
return;
|
|
}
|
|
|
|
let subdirRegExp = new RegExp(`^${this.get('ghostPaths.subdir')}`);
|
|
let blogIcon = icon ? icon : 'favicon.ico';
|
|
let iconUrl;
|
|
|
|
blogIcon = blogIcon.replace(subdirRegExp, '');
|
|
|
|
iconUrl = this.get('ghostPaths.url').join(this.get('config.blogUrl'), blogIcon).replace(/\/$/, '');
|
|
iconUrl += `?t=${(new Date()).valueOf()}`;
|
|
|
|
this.set('iconStyle', htmlSafe(`background-image: url(${iconUrl})`));
|
|
this._icon = icon;
|
|
},
|
|
|
|
actions: {
|
|
toggleAutoNav() {
|
|
this.sendAction('toggleMaximise');
|
|
},
|
|
|
|
showMarkdownHelp() {
|
|
this.sendAction('showMarkdownHelp');
|
|
},
|
|
|
|
closeMobileMenu() {
|
|
this.sendAction('closeMobileMenu');
|
|
},
|
|
|
|
openAutoNav() {
|
|
this.sendAction('openAutoNav');
|
|
}
|
|
}
|
|
});
|