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/transitions.js
Kevin Ansfield 1e3191b811 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

36 lines
1 KiB
JavaScript

export default function () {
this.transition(
this.hasClass('fullscreen-modal-container'),
this.toValue(true),
this.use('fade', {duration: 150}),
this.reverse('fade', {duration: 150})
);
this.transition(
this.hasClass('fade-transition'),
this.use('crossFade', {duration: 100})
);
this.transition(
this.hasClass('tour-container'),
this.toValue(true),
this.use('fade', {duration: 150}),
this.reverse('fade', {duration: 150})
);
this.transition(
this.hasClass('tour'),
this.toValue(true),
this.use('fade', {duration: 300}),
this.reverse('fade', {duration: 300})
);
// TODO: Maybe animate with explode. gh-unsplash-window should ideally slide in from bottom to top of screen
// this.transition(
// this.hasClass('gh-unsplash-window'),
// this.toValue(true),
// this.use('toUp', {duration: 500}),
// this.reverse('toDown', {duration: 500})
// );
}