Ghost/ghost/admin/lib/koenig-editor/addon/components/koenig-card-button.js

152 lines
4.0 KiB
JavaScript
Raw Normal View History

import Component from '@glimmer/component';
import {action} from '@ember/object';
import {isBlank} from '@ember/utils';
import {run} from '@ember/runloop';
import {inject as service} from '@ember/service';
import {set} from '@ember/object';
import {task} from 'ember-concurrency';
import {tracked} from '@glimmer/tracking';
export default class KoenigCardButtonComponent extends Component {
@service config;
@service feature;
@service store;
@service membersUtils;
@service ui;
@tracked buttonFocused = false;
@tracked contentFocused = false;
@tracked offers = null;
Removed duplication of "delete if empty" card logic no issue The logic for "delete if empty" was duplicated in two places: 1. when `createComponentCard` is used to register a card, this option method was used when cleaning up a post when first rendering (cards in empty state can be saved before the editor auto-removes them but we don't want to show them again) 2. inside of card's own delete-if-empty handling on certain actions such as deselection or leaving edit mode - added an `ifEmpty` property to each card component - used by the editor's first-render cleanup routing if the property is present - can be re-used internally for the card's own deselect/exit-edit-mode behaviour - updated the cleanup routine in `<KoenigEditor>` - added a `allComponentCardsRegistered` property that will return `true` when the `.component` property is set on every card (the property is set during card component initialisation so we're at the mercy of Ember's render process so not all card components will be immediately registered) - swapped `_cleanup` for `_cleanupTask` that will wait for `allComponentCardsRegistered` to be `true` before performing cleanup, ensuring that we always have access to the card component's `isEmpty` property even when Ember renders cards across multiple render batches - checks for `isEmpty` being a boolean and will delete the card if it's value is `true` - updated all cards that had delete-if-empty behaviour - added `isEmpty` properties - removed duplicated logic in the `createComponentCard` calls
2021-11-10 17:45:54 +03:00
get isEmpty() {
const {buttonText, buttonUrl} = this.args.payload;
return isBlank(buttonText) && isBlank(buttonUrl);
}
get isIncomplete() {
const {buttonText, buttonUrl} = this.args.payload;
return isBlank(buttonText) || isBlank(buttonUrl);
}
get toolbar() {
if (this.args.isEditing) {
return false;
}
return {
items: [{
buttonClass: 'fw4 flex items-center white',
icon: 'koenig/kg-edit',
iconClass: 'fill-white',
title: 'Edit',
text: '',
action: run.bind(this, this.args.editCard)
}]
};
}
get suggestedUrls() {
const urls = [];
urls.push(...[{
name: `Link to ${this.config.get('blogTitle')}`,
url: this.config.getSiteUrl('/')
}, {
name: 'Free email signup',
url: this.config.getSiteUrl('/#/portal/signup/free')
}]);
if (this.membersUtils.isStripeEnabled) {
urls.push(...[{
name: 'Paid subscription',
url: this.config.getSiteUrl('/#/portal/signup')
}, {
name: 'Upgrade or change plan',
url: this.config.getSiteUrl('/#/portal/account/plans')
}]);
}
if (this.offers) {
this.offers.forEach((offer) => {
urls.push(...[{
name: `Offer - ${offer.name}`,
url: this.config.getSiteUrl(offer.code)
}]);
});
}
return urls;
}
constructor() {
super(...arguments);
this.args.registerComponent(this);
const payloadDefaults = {
2021-11-16 11:04:35 +03:00
alignment: 'center'
};
Object.entries(payloadDefaults).forEach(([key, value]) => {
if (this.args.payload[key] === undefined) {
this._updatePayloadAttr(key, value);
}
});
this.fetchOffersTask.perform();
}
// required for snippet rects to be calculated - editor reaches in to component,
// expecting a non-Glimmer component with a .element property
@action
registerElement(element) {
this.element = element;
}
@action
setButtonText(event) {
this._updatePayloadAttr('buttonText', event.target.value);
}
@action
setButtonUrl(url) {
this._updatePayloadAttr('buttonUrl', url);
}
@action
setAlignment(alignment, event) {
event.preventDefault();
this._updatePayloadAttr('alignment', alignment);
}
@action
leaveEditMode() {
Removed duplication of "delete if empty" card logic no issue The logic for "delete if empty" was duplicated in two places: 1. when `createComponentCard` is used to register a card, this option method was used when cleaning up a post when first rendering (cards in empty state can be saved before the editor auto-removes them but we don't want to show them again) 2. inside of card's own delete-if-empty handling on certain actions such as deselection or leaving edit mode - added an `ifEmpty` property to each card component - used by the editor's first-render cleanup routing if the property is present - can be re-used internally for the card's own deselect/exit-edit-mode behaviour - updated the cleanup routine in `<KoenigEditor>` - added a `allComponentCardsRegistered` property that will return `true` when the `.component` property is set on every card (the property is set during card component initialisation so we're at the mercy of Ember's render process so not all card components will be immediately registered) - swapped `_cleanup` for `_cleanupTask` that will wait for `allComponentCardsRegistered` to be `true` before performing cleanup, ensuring that we always have access to the card component's `isEmpty` property even when Ember renders cards across multiple render batches - checks for `isEmpty` being a boolean and will delete the card if it's value is `true` - updated all cards that had delete-if-empty behaviour - added `isEmpty` properties - removed duplicated logic in the `createComponentCard` calls
2021-11-10 17:45:54 +03:00
if (this.isEmpty) {
// afterRender is required to avoid double modification of `isSelected`
// TODO: see if there's a way to avoid afterRender
run.scheduleOnce('afterRender', this, this.args.deleteCard);
}
}
@action
focusElement(selector, event) {
event.preventDefault();
document.querySelector(selector)?.focus();
}
@task({restartable: true})
*fetchOffersTask() {
this.offers = yield this.store.query('offer', {limit: 'all', filter: 'status:active'});
}
_updatePayloadAttr(attr, value) {
let payload = this.args.payload;
set(payload, attr, value);
// update the mobiledoc and stay in edit mode
this.args.saveCard?.(payload, false);
}
}