1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost-Admin.git synced 2023-12-14 02:33:04 +01:00
Ghost-Admin/app/components/gh-nav-menu.js
Kevin Ansfield a63943edd6
Added "What's new" indicator and modal to highlight recent updates (#1292)
no issue

- adds `whats-new` service that fetches the changelog from ghost.org and exposes the latest changelog entries
- trigger a background fetch of the changelog from ghost.org when first loading the admin when logged in, or after signing in
- adds a "What's new" menu item next to the user popup menu
- adds an indicator to the user menu button and what's new menu item if there are unseen changelog entries
- closing the changelog modal will update the "last seen date", clearing both indicators
2019-08-23 10:01:27 +01:00

116 lines
3.7 KiB
JavaScript

import Component from '@ember/component';
import ShortcutsMixin from 'ghost-admin/mixins/shortcuts';
import calculatePosition from 'ember-basic-dropdown/utils/calculate-position';
import ctrlOrCmd from 'ghost-admin/utils/ctrl-or-cmd';
import {and, equal, match} from '@ember/object/computed';
import {getOwner} from '@ember/application';
import {htmlSafe} from '@ember/string';
import {inject as service} from '@ember/service';
export default Component.extend(ShortcutsMixin, {
config: service(),
feature: service(),
ghostPaths: service(),
router: service(),
session: service(),
ui: service(),
whatsNew: service(),
tagName: 'nav',
classNames: ['gh-nav'],
iconStyle: '',
showSearchModal: false,
shortcuts: null,
isIntegrationRoute: match('router.currentRouteName', /^settings\.integration/),
isSettingsRoute: match('router.currentRouteName', /^settings/),
// HACK: {{link-to}} should be doing this automatically but there appears to
// be a bug in Ember that's preventing it from working immediately after login
isOnSite: equal('router.currentRouteName', 'site'),
showMenuExtension: and('config.clientExtensions.menu', 'session.user.isOwner'),
showDropdownExtension: and('config.clientExtensions.dropdown', 'session.user.isOwner'),
showScriptExtension: and('config.clientExtensions.script', 'session.user.isOwner'),
init() {
this._super(...arguments);
let shortcuts = {};
shortcuts[`${ctrlOrCmd}+k`] = {action: 'toggleSearchModal'};
this.shortcuts = shortcuts;
},
// 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();
},
didInsertElement() {
this._super(...arguments);
this.registerShortcuts();
},
willDestroyElement() {
this.removeShortcuts();
this._super(...arguments);
},
actions: {
transitionToOrRefreshSite() {
let {currentRouteName} = this.router;
if (currentRouteName === 'site') {
getOwner(this).lookup(`route:${currentRouteName}`).refresh();
} else {
this.router.transitionTo('site');
}
},
toggleSearchModal() {
this.toggleProperty('showSearchModal');
}
},
// 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.icon;
if (icon === this._icon) {
return;
}
this._icon = icon;
if (icon && icon.match(/^https?:\/\//i)) {
this.set('iconStyle', htmlSafe(`background-image: url(${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})`));
}
});