mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 22:43:30 +03:00
f4c50fb3a5
no issue UI experiment (behind the `cardSettingsPanel` labs flag) for pulling card settings out into a separate side-panel. Prototyping against the email-cta card. - shows panel immediately when selected unless selected by keyboard in which case it will wait for mouse input - panel position is fixed so it's always on screen - initial position tries to be as close to centered right of the card as possible - ensures all of the panel is on-screen, will overlap the card if there's no enough horizontal width - re-positions after window resize - card no longer has a separate edit mode, the text replacement field is directly editable
64 lines
2.2 KiB
JavaScript
64 lines
2.2 KiB
JavaScript
import Component from '@glimmer/component';
|
|
import {action} from '@ember/object';
|
|
import {bind} from '@ember/runloop';
|
|
import {task} from 'ember-concurrency-decorators';
|
|
import {timeout} from 'ember-concurrency';
|
|
|
|
const CARD_SPACING = 20;
|
|
const MIN_RIGHT_SPACING = 20;
|
|
const MIN_TOP_SPACING = 66 + 20; // 66 is publish menu and word count size
|
|
|
|
export default class KoenigSettingsPanelComponent extends Component {
|
|
constructor() {
|
|
super(...arguments);
|
|
this._windowResizeHandler = bind(this, this.debounceWindowResizeTask.perform);
|
|
window.addEventListener('resize', this._windowResizeHandler);
|
|
}
|
|
|
|
willDestroy() {
|
|
super.willDestroy(...arguments);
|
|
window.removeEventListener('resize', this._windowResizeHandler);
|
|
}
|
|
|
|
@action
|
|
registerAndPosition(panelElem) {
|
|
this.panelElem = panelElem;
|
|
this.positionPanel(panelElem);
|
|
}
|
|
|
|
@action
|
|
positionPanel(panelElem) {
|
|
if (!panelElem) {
|
|
return;
|
|
}
|
|
|
|
const panelRect = panelElem.getBoundingClientRect();
|
|
const containerRect = panelElem.parentElement.getBoundingClientRect();
|
|
|
|
const containerMiddle = containerRect.top + (containerRect.height / 2);
|
|
|
|
// position vertically centered
|
|
// if part of panel would be off screen adjust to keep minimum distance from window top/botom
|
|
let top = Math.max(containerMiddle - (panelRect.height / 2), MIN_TOP_SPACING);
|
|
if (top + panelRect.height > window.innerHeight - MIN_TOP_SPACING) {
|
|
top = window.innerHeight - MIN_TOP_SPACING - panelRect.height;
|
|
}
|
|
|
|
// position to right of panel
|
|
// if part of panel would be off screen adjust to keep minimum distance from window edge
|
|
let left = containerRect.right + CARD_SPACING;
|
|
if (left + panelRect.width > window.innerWidth - MIN_RIGHT_SPACING) {
|
|
left = window.innerWidth - panelRect.width - MIN_RIGHT_SPACING;
|
|
}
|
|
|
|
panelElem.style.top = `${top}px`;
|
|
panelElem.style.left = `${left}px`;
|
|
}
|
|
|
|
@task({restartable: true})
|
|
*debounceWindowResizeTask() {
|
|
yield timeout(250);
|
|
this.positionPanel(this.panelElem);
|
|
}
|
|
}
|