Ghost/ghost/admin/app/services/ui.js
Kevin Ansfield 350e3d1481 Unsplash integration
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
2017-08-15 16:01:12 +01:00

96 lines
2.0 KiB
JavaScript

import Service from '@ember/service';
import injectService from 'ember-service/inject';
import {computed} from '@ember/object';
import {not, or, reads} from '@ember/object/computed';
export default Service.extend({
dropdown: injectService(),
mediaQueries: injectService(),
autoNav: false,
isFullScreen: false,
showMobileMenu: false,
showSettingsMenu: false,
hasSideNav: not('isSideNavHidden'),
isMobile: reads('mediaQueries.isMobile'),
isSideNavHidden: or('autoNav', 'isFullScreen', 'isMobile'),
autoNavOpen: computed('autoNav', {
get() {
return false;
},
set(key, value) {
if (this.get('autoNav')) {
return value;
}
return false;
}
}),
closeMenus() {
this.get('dropdown').closeDropdowns();
this.setProperties({
showSettingsMenu: false,
showMobileMenu: false
});
},
openAutoNav() {
this.set('autoNavOpen', true);
},
closeAutoNav() {
if (this.get('autoNavOpen')) {
this.get('dropdown').closeDropdowns();
}
this.set('autoNavOpen', false);
},
closeMobileMenu() {
this.set('showMobileMenu', false);
},
openMobileMenu() {
this.set('showMobileMenu', true);
},
openSettingsMenu() {
this.set('showSettingsMenu', true);
},
toggleAutoNav() {
this.toggleProperty('autoNav');
},
actions: {
closeMenus() {
this.closeMenus();
},
openAutoNav() {
this.openAutoNav();
},
closeAutoNav() {
this.closeAutoNav();
},
closeMobileMenu() {
this.closeMobileMenu();
},
openMobileMenu() {
this.openMobileMenu();
},
openSettingsMenu() {
this.openSettingsMenu();
},
toggleAutoNav() {
this.toggleAutoNav();
}
}
});