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

Added reset-to-homepage behaviour when clicking "view site" link

no issue
- return a basic "guid" from the site's `model` hook so that we have some data which changes on each refresh
- add an action to the wrapper element of the "view site" link which will cause the route to refresh when clicked if we're already on the route
- move the site iframe into a component so that it can watch an @uuid property and force a reset of the iframe's `src` when it detects a change
This commit is contained in:
Kevin Ansfield 2019-03-21 17:55:58 +00:00
parent 6acf2691d7
commit e7b740ba5f
7 changed files with 63 additions and 18 deletions

View file

@ -1,6 +1,7 @@
import Component from '@ember/component';
import calculatePosition from 'ember-basic-dropdown/utils/calculate-position';
import {computed} from '@ember/object';
import {getOwner} from '@ember/application';
import {htmlSafe} from '@ember/string';
import {inject as service} from '@ember/service';
@ -8,7 +9,7 @@ export default Component.extend({
config: service(),
feature: service(),
ghostPaths: service(),
router: service('router'),
router: service(),
session: service(),
ui: service(),
@ -42,6 +43,17 @@ export default Component.extend({
this._setIconStyle();
},
actions: {
transitionToOrRefreshSite() {
let {currentRouteName} = this.router;
if (currentRouteName === 'site') {
getOwner(this).lookup(`route:${currentRouteName}`).refresh();
} else {
this.router.transitionTo('site');
}
}
},
// equivalent to "left: auto; right: -20px"
userDropdownPosition(trigger, dropdown) {
let {horizontalPosition, verticalPosition, style} = calculatePosition(...arguments);

View file

@ -0,0 +1,20 @@
import Component from '@ember/component';
import {inject as service} from '@ember/service';
export default Component.extend({
config: service(),
tagName: '',
didReceiveAttrs() {
// reset the src attribute each time the guid changes - allows for
// a click on the navigation item to reset back to the homepage
if (this.guid !== this._lastGuid) {
let iframe = document.querySelector('#site-frame');
if (iframe) {
iframe.src = `${this.config.get('blogUrl')}/`;
}
}
this._lastGuid = this.guid;
}
});

View file

@ -0,0 +1,6 @@
import Controller from '@ember/controller';
import {alias} from '@ember/object/computed';
export default Controller.extend({
guid: alias('model')
});

View file

@ -4,5 +4,9 @@ import styleBody from 'ghost-admin/mixins/style-body';
export default AuthenticatedRoute.extend(styleBody, {
titleToken: 'Site',
classNames: ['view-site']
classNames: ['view-site'],
model() {
return (new Date()).valueOf();
}
});

View file

@ -42,7 +42,9 @@
{{gh-search-input class="gh-nav-search-input"}}
</section>
<ul class="gh-nav-list gh-nav-main">
<li>{{#link-to "site" data-test-nav="site"}}{{svg-jar "view-site-embed"}}View site{{/link-to}}</li>
<li {{action "transitionToOrRefreshSite" on="click"}}>
{{#link-to "site" data-test-nav="site" preventDefault=false}}{{svg-jar "view-site-embed"}}View site{{/link-to}}
</li>
</ul>
<ul class="gh-nav-list gh-nav-manage">
<li class="gh-nav-list-h">Manage</li>

View file

@ -0,0 +1,15 @@
<iframe id="site-frame" class="site-frame" src="{{this.config.blogUrl}}/" frameborder="0" allowtransparency="true"></iframe>
<style>
.site-frame {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
transform: translate3d(0, 0, 0);
}
</style>

View file

@ -1,15 +1 @@
<iframe class="site-frame" src="{{config.blogUrl}}/" frameborder="0" allowtransparency="true"></iframe>
<style>
.site-frame {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
transform: translate3d(0, 0, 0);
}
</style>
<GhSiteIframe @guid={{this.guid}}></GhSiteIframe>