refs https://github.com/TryGhost/Ghost/issues/14101
- migrated component to Glimmer
- swapped usage of `ValidationState` mixin for `{{validation-status}}` modifier
- updated modifier to accept custom error/success classes
- removed unnecessary/unused code in the `gh-benefit-item.js` backing class
no issue
- moved logic from `<GhValidationStatusContainer>` to a new `validation-status` modifier
- removes a usage of the `ValidationState` mixin
- migrated uses of the component to a mixin
- paves the way for full removal of the `ValidationState` mixin in later refactors (mixins are deprecated)
- migrated `<GhFormGroup>` to a glimmer component
- swapped the extend of `GhValidationStatusContainer` to usage of the `validation-status` modifier with a template-only component
- updated all `<GhFormGroup>` to use the standard `class=""` instead of `@classNames=""` and `@class=""`
- allows `data-test-*` attributes to be added to uses of `<FormGroup>` to help when complex components are grouped as a form input
sentry ADMIN-C05
- resizing the window (or changing orientation) when viewing a single photo inside the Unsplash image selector was throwing errors because the event handler `setZoomedSize()` call was not passed the same arguments as the typical call made in `modify()`
- moved the `element` and `ratio` properties onto the class so they are preserved and ready to be used without being explicitly passed in when `setZoomedSize()` is called as part of an event
no issue
- `when` makes the modifier a little easier to read for it's typical use-case, eg:
- `{{scroll-to when=(eq entry.slug this.entry)}}`
- `{{scroll-to when=(eq this.focusArea "analytics")}}`
refs https://github.com/TryGhost/Ghost/issues/14101
- migrated staff user controller to native class syntax
- removed use of `{{action}}` helper
- moved from custom components to native `<input>` and `<textarea>` for form fields
- added `{{select-on-click}}` modifier to cover the `<GhTextingInput @selectOnClick>` option behaviour for any input element
- added `submitForm()` test helper that finds closest `form` element and trigger's a `submit` event on it simulating <kbd>Enter</kbd> being pressed whilst a field has focus
no issue
- followed the migration guide to switch to from lifecycle hooks to single `modify()` method
- https://togithub.com/ember-modifier/ember-modifier/blob/master/MIGRATIONS.md
- forced resolution of `ember-in-viewport@4.0.2` to avoid older version of `ember-modifier` being pulled in through `ember-infinity`
refs a4a4136c2f (commitcomment-79676720)
- `ember-auto-import` does the right thing automatically so manual `app.import` is not necessary and avoids potential pitfalls with multiple copies of react being bundled
- added the `window.*` global attachments after importing so that our async loaded UMD components have access to our bundled React and ReactDOM instances
no issue
- switched from needing to extend from `ReactComponent` to using a `{{react-render}}` modifier
- modifiers are modern idiomatic Ember for handing "did-insert" hooks and associated lifecycle
- moved code from `<ReactMobiledocEditor>` into `<KoenigReactEditor>`
- no need for the extra layering of components and need to remember two places to modify when adding passthrough args/props
refs https://github.com/TryGhost/Ghost/issues/14101
- extracted the ratio zoom handling to a `{{ratio-zoom}}` modifier to clean up the component and avoid needing lifecycle hooks that don't exist in Glimmer components
- disabled `no-nested-interactive` linting in the template - not ideal but we'd need a much bigger design refactor to eliminate the nested links
refs https://github.com/TryGhost/Ghost/issues/14101
- swapped use of `<LiquidWormhole>` to `{{#in-element}}` because we weren't animating anything
- we can now use `{{css-transition}}` instead if we want to animate in the future
- swapped use of `ShortcutsMixin` for ember-keyboard's `{{on-key}}` modifier
- added `{{query-selector}}` helper so we can grab an element from inside the template rather than requiring a backing component function (used to pass the wormhole element to `{{#in-element}}`)
- added `{{on-resize}}` modifier so the `resizeDetector` service can be used directly from the template rather than requiring a backing component to wait for render and use query selectors to grab an element
refs https://github.com/TryGhost/Team/issues/1225
When the gif selector is activated we want to scroll as much of the picker into view as possible.
- updated `scroll-into-view` modifier so it can work on bounding rects as well as offsets for those situations where a scroll parent is not the offset parent
- only implemented "off bottom" behavior for now as that's all we need for this use-case
- if the scroll adjustment would mean the top is cut off we readjust so that the top of the element is always visible
refs https://github.com/TryGhost/Team/issues/1225
- added `scroll-into-view` modifier that will scroll an element into view putting it at the top or bottom of the viewport depending on which direction scroll is required
- used the `scroll-into-view` modifier to scroll the highlighted gif into view
refs https://github.com/TryGhost/Team/issues/1219
- added optional `adjustOnResize` argument to `{{movable}}` modifier
- when the movable element's size changes (based on a `ResizeObserver` event) the passed in action is called with the element and the current x/y position
- having this handled via the `{{movable}}` modifier is needed because that's what knows about any CSS translations that are present and allows the drag position to remain in sync with any resize-related adjustments
- return value of the action is expected to be a new `{x, y}` tuple
- used `adjustOnResize` in the `<KoenigSettingsPanel>` component so that any time the settings panel grows and causes part of it to be off-screen we re-position so that the whole panel is kept on-screen
refs https://github.com/TryGhost/Team/issues/1219
- added `dropdown.closeDropdowns()` to the `{{movable}}` modifier when dragging starts
- updated ember-power-select derived inputs to close their dropdowns when the dropdown service triggers it's `'close'` event
refs https://github.com/TryGhost/Team/issues/1208
- removing the click event listener in the same event loop as the `dragEnd` event is triggered meant Chrome still allowed the `click` event to trigger causing the card to become deselected and the movable panel closed when a drag ends outside of the central editor canvas
- adding a 1ms timeout means the event loop where the dragEnd is triggered fully completes before the next tick begins where the click handler is finally removed
closes https://github.com/TryGhost/Team/issues/1208
- clear and disable selection when drag starts
- ensure click-cancel event handler is removed when destroying (FF could trigger destroy without triggering drag end leaving you with nothing clickable)
no issue
- moved lifecycle hooks to top of file as they are framework-provided and control creation/destruction
- changed code order for `dragStart()`, `drag()`, `dragEnd()` so they follow the modifiers expected event cycle
no issue
- stops drag from being initiated from any element that matches `input` or `.ember-basic-dropdown-trigger` so that text can still be selected from inputs whilst dragging and we don't get left with orphaned dropdowns from dragging a dropdown-inducing element
no issue
- added a movement threshold for click+drag so we don't make the drag fully active until there's been a few pixels of movement whilst the mouse is held down, fixes issues where a slight bit of movement when clicking on elements would make drag active blocking the click from working
no issue
- moves disabling of scroll and pointer events into the `drag` handler so we don't inadvertently stop genuine clicks on elements inside the movable container
- adds a timeout for re-enabling pointer-events and clicks when drag finishes so we can still capture the unwanted events that would otherwise fire on mouseup
- uses a `click` event handler as that event is still fired even though we're preventing `mouseup`, fixes problems where the `pointer-events: none` on the movable container lets events through to the element behind it which could cause the movable container to be removed (eg, click event on the editor background moving a card out of edit mode)
no issue
- if the right button was pressed on the movable element it would start "drag" but also show the right-click menu meaning that once you clicked to close the menu the movable element was stuck to your pointer without the left button being held down
no issue
- adds `{{movable}}` render modifier that sets up basic mouse/touch event handlers that adjust the element's `translate` style when click/touched+dragged so it can be moved around the screen
* Update dependency ember-power-select to v4
* Fixed trigger component override collision when building
- move the "override" into our own namespace
- update all `<PowerSelect>` usage to explicitly reference our customised trigger component
* Bumped ember-power-datepicker
- bumps `ember-basic-dropdown` sub-dependency
- resolves "Error: Could not find module `ember-compatibility-helpers` imported from `@glimmer/component/index`"
- https://github.com/cibernox/ember-basic-dropdown/issues/551
* Updated trigger to use class syntax
- it's not possible to use `.extend()` on an imported class
* Updated <GhBasicDropdown>
- match updated ember-basic-dropdown code
* Added `autofocus` modifier
- added `ember-modifier` dependency so that we can create our own render modifiers
* Updated <GhSearchInputTrigger> to a glimmer component
* Updated gh-token-input components
* Fixed tests
- wrap `<PowerSelect>` with `<div>` to maintain test selectors
- fixed `<GhBasicDropdown>` not rendering anything due to not having a local template
Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Kevin Ansfield <kevin@lookingsideways.co.uk>
