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:
parent
6acf2691d7
commit
e7b740ba5f
7 changed files with 63 additions and 18 deletions
|
@ -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);
|
||||
|
|
20
ghost/admin/app/components/gh-site-iframe.js
Normal file
20
ghost/admin/app/components/gh-site-iframe.js
Normal 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;
|
||||
}
|
||||
});
|
6
ghost/admin/app/controllers/site.js
Normal file
6
ghost/admin/app/controllers/site.js
Normal file
|
@ -0,0 +1,6 @@
|
|||
import Controller from '@ember/controller';
|
||||
import {alias} from '@ember/object/computed';
|
||||
|
||||
export default Controller.extend({
|
||||
guid: alias('model')
|
||||
});
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
15
ghost/admin/app/templates/components/gh-site-iframe.hbs
Normal file
15
ghost/admin/app/templates/components/gh-site-iframe.hbs
Normal 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>
|
|
@ -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>
|
Loading…
Add table
Reference in a new issue