mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 22:43:30 +03:00
350e3d1481
closes https://github.com/TryGhost/Ghost/issues/8859, requires https://github.com/TryGhost/Ghost/pull/8895 - adds Unsplash app to app settings - enable/disable toggle - validation and testing of Unsplash App ID - Unsplash App ID field hidden if provided via Ghost config - adds `fetchPrivate` method to `config` service to pull config that requires authentication and updates authentication routines to fetch private config - adds Unsplash buttons to editor toolbar and `{{gh-image-uploader}}` - only present when Unsplash app is enabled - opens Unsplash image selector when clicked - `{{gh-image-uploader}}` has a new `allowUnsplash` attribute to control display of the unsplash button on a per-uploader basis - adds Unsplash image selector (`{{gh-unsplash}}`) - uses new `unsplash` service to handle API requests and maintain state - search - infinite scroll - zoom image - insert image - download image - adds `{{gh-scroll-trigger}}` that will fire an event when the component is rendered into or enters the visible screen area via scrolling - updates `ui` service - adds `isFullscreen` property and updates `gh-editor` so that it gets set/unset when toggling editor fullscreen mode - adds `hasSideNav` and `isSideNavHidden` properties - updates `media-queries` service so that it fires an event each time a breakpoint is entered/exited - removes the need for observers in certain circumstances
71 lines
1.7 KiB
JavaScript
71 lines
1.7 KiB
JavaScript
import $ from 'jquery';
|
|
import Component from 'ember-component';
|
|
import {computed} from '@ember/object';
|
|
import {htmlSafe} from '@ember/string';
|
|
|
|
export default Component.extend({
|
|
|
|
height: 0,
|
|
photo: null,
|
|
tagName: '',
|
|
width: 1200,
|
|
zoomed: false,
|
|
|
|
// closure actions
|
|
insert() {},
|
|
zoom() {},
|
|
|
|
// avoid "binding style attributes" warnings
|
|
style: computed('photo.color', 'zoomed', function() {
|
|
let styles = [];
|
|
let ratio = this.get('photo.ratio');
|
|
let zoomed = this.get('zoomed');
|
|
|
|
styles.push(`background-color: ${this.get('photo.color')}`);
|
|
|
|
if (!zoomed) {
|
|
styles.push(`padding-bottom: ${ratio * 100}%`);
|
|
}
|
|
|
|
return htmlSafe(styles.join('; '));
|
|
}),
|
|
|
|
imageUrl: computed('photo.urls.regular', function () {
|
|
let url = this.get('photo.urls.regular');
|
|
|
|
url = url.replace(/&w=1080/, '&w=1200');
|
|
|
|
return url;
|
|
}),
|
|
|
|
didReceiveAttrs() {
|
|
this._super(...arguments);
|
|
|
|
let height = this.get('width') * this.get('photo.ratio');
|
|
|
|
this.set('height', height);
|
|
},
|
|
|
|
actions: {
|
|
insert(event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
this.insert(this.get('photo'));
|
|
},
|
|
|
|
zoom(event) {
|
|
let $target = $(event.target);
|
|
|
|
// only zoom when it wasn't one of the child links clicked
|
|
if (!$target.is('a') && $target.closest('a').hasClass('gh-unsplash-photo')) {
|
|
event.preventDefault();
|
|
this.zoom(this.get('photo'));
|
|
}
|
|
|
|
// don't propagate otherwise we can trigger the closeZoom action on the overlay
|
|
event.stopPropagation();
|
|
}
|
|
}
|
|
|
|
});
|