2021-07-20 12:54:19 +03:00
|
|
|
import Browser from 'mobiledoc-kit/utils/browser';
|
2021-07-20 20:33:39 +03:00
|
|
|
import Component from '@glimmer/component';
|
|
|
|
import {action} from '@ember/object';
|
2021-07-20 12:54:19 +03:00
|
|
|
import {formatTextReplacementHtml} from './koenig-text-replacement-html-input';
|
|
|
|
import {isBlank} from '@ember/utils';
|
|
|
|
import {run} from '@ember/runloop';
|
2021-07-26 19:00:11 +03:00
|
|
|
import {inject as service} from '@ember/service';
|
2021-07-20 12:54:19 +03:00
|
|
|
import {set} from '@ember/object';
|
2021-07-20 20:33:39 +03:00
|
|
|
import {tracked} from '@glimmer/tracking';
|
2021-07-20 12:54:19 +03:00
|
|
|
|
2021-07-20 20:33:39 +03:00
|
|
|
export default class KoenigCardEmailCtaComponent extends Component {
|
2021-07-26 19:00:11 +03:00
|
|
|
@service ui;
|
|
|
|
|
|
|
|
@tracked buttonFocused = false;
|
|
|
|
@tracked contentFocused = false;
|
2021-07-20 20:33:39 +03:00
|
|
|
|
|
|
|
get formattedHtml() {
|
|
|
|
return formatTextReplacementHtml(this.args.payload.html);
|
|
|
|
}
|
|
|
|
|
2021-07-21 20:39:21 +03:00
|
|
|
get segments() {
|
|
|
|
return [{
|
2021-07-26 19:00:11 +03:00
|
|
|
name: 'free members',
|
2021-07-21 20:39:21 +03:00
|
|
|
filter: 'status:free'
|
|
|
|
}, {
|
2021-07-26 19:00:11 +03:00
|
|
|
name: 'paid members',
|
2021-07-21 20:39:21 +03:00
|
|
|
filter: 'status:-free'
|
|
|
|
}];
|
|
|
|
}
|
|
|
|
|
|
|
|
get selectedSegment() {
|
|
|
|
return this.segments.find(segment => segment.filter === this.args.payload.segment);
|
|
|
|
}
|
|
|
|
|
2021-07-20 20:33:39 +03:00
|
|
|
get toolbar() {
|
|
|
|
if (this.args.isEditing) {
|
2021-07-20 12:54:19 +03:00
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
items: [{
|
|
|
|
buttonClass: 'fw4 flex items-center white',
|
|
|
|
icon: 'koenig/kg-edit',
|
|
|
|
iconClass: 'fill-white',
|
|
|
|
title: 'Edit',
|
|
|
|
text: '',
|
2021-07-20 20:33:39 +03:00
|
|
|
action: run.bind(this, this.args.editCard)
|
2021-07-20 12:54:19 +03:00
|
|
|
}]
|
|
|
|
};
|
2021-07-20 20:33:39 +03:00
|
|
|
}
|
2021-07-20 12:54:19 +03:00
|
|
|
|
2021-07-20 20:33:39 +03:00
|
|
|
constructor() {
|
|
|
|
super(...arguments);
|
|
|
|
this.args.registerComponent(this);
|
2021-07-21 20:39:21 +03:00
|
|
|
if (!this.args.payload.segment) {
|
|
|
|
this._updatePayloadAttr('segment', 'status:free');
|
|
|
|
}
|
2021-07-20 20:33:39 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
@action
|
|
|
|
updateHtml(html) {
|
|
|
|
this._updatePayloadAttr('html', html);
|
|
|
|
}
|
|
|
|
|
2021-07-21 20:39:21 +03:00
|
|
|
@action
|
|
|
|
setSegment(segment) {
|
|
|
|
this._updatePayloadAttr('segment', segment.filter);
|
|
|
|
}
|
|
|
|
|
2021-07-26 19:00:11 +03:00
|
|
|
@action
|
|
|
|
setButtonText(event) {
|
|
|
|
this._updatePayloadAttr('buttonText', event.target.value);
|
|
|
|
}
|
|
|
|
|
|
|
|
@action
|
|
|
|
setButtonUrl(event) {
|
|
|
|
this._updatePayloadAttr('buttonUrl', event.target.value);
|
|
|
|
}
|
|
|
|
|
2021-07-20 20:33:39 +03:00
|
|
|
@action
|
|
|
|
registerEditor(textReplacementEditor) {
|
|
|
|
let commands = {
|
|
|
|
'META+ENTER': run.bind(this, this._enter, 'meta'),
|
|
|
|
'CTRL+ENTER': run.bind(this, this._enter, 'ctrl')
|
|
|
|
};
|
|
|
|
|
|
|
|
Object.keys(commands).forEach((str) => {
|
|
|
|
textReplacementEditor.registerKeyCommand({
|
|
|
|
str,
|
|
|
|
run() {
|
|
|
|
return commands[str](textReplacementEditor, str);
|
|
|
|
}
|
2021-07-20 12:54:19 +03:00
|
|
|
});
|
2021-07-20 20:33:39 +03:00
|
|
|
});
|
2021-07-20 12:54:19 +03:00
|
|
|
|
2021-07-20 20:33:39 +03:00
|
|
|
this._textReplacementEditor = textReplacementEditor;
|
2021-07-20 12:54:19 +03:00
|
|
|
|
2021-07-20 20:33:39 +03:00
|
|
|
run.scheduleOnce('afterRender', this, this._placeCursorAtEnd);
|
|
|
|
}
|
2021-07-20 12:54:19 +03:00
|
|
|
|
2021-07-20 20:33:39 +03:00
|
|
|
@action
|
|
|
|
leaveEditMode() {
|
2021-07-28 20:00:01 +03:00
|
|
|
const {html, buttonText, buttonUrl} = this.args.payload;
|
|
|
|
|
|
|
|
if (isBlank(html) && isBlank(buttonText) && isBlank(buttonUrl)) {
|
2021-07-20 20:33:39 +03:00
|
|
|
// 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);
|
2021-07-20 12:54:19 +03:00
|
|
|
}
|
2021-07-20 20:33:39 +03:00
|
|
|
}
|
2021-07-20 12:54:19 +03:00
|
|
|
|
2021-07-26 19:00:11 +03:00
|
|
|
@action
|
|
|
|
blurElement(event) {
|
|
|
|
event.preventDefault();
|
|
|
|
event.target.blur();
|
|
|
|
}
|
|
|
|
|
|
|
|
@action
|
|
|
|
focusElement(selector, event) {
|
|
|
|
event.preventDefault();
|
|
|
|
document.querySelector(selector)?.focus();
|
|
|
|
}
|
|
|
|
|
2021-07-20 12:54:19 +03:00
|
|
|
_updatePayloadAttr(attr, value) {
|
2021-07-20 20:33:39 +03:00
|
|
|
let payload = this.args.payload;
|
2021-07-20 12:54:19 +03:00
|
|
|
|
|
|
|
set(payload, attr, value);
|
|
|
|
|
|
|
|
// update the mobiledoc and stay in edit mode
|
2021-07-20 20:33:39 +03:00
|
|
|
this.args.saveCard?.(payload, false);
|
|
|
|
}
|
2021-07-20 12:54:19 +03:00
|
|
|
|
|
|
|
/* key commands ----------------------------------------------------------*/
|
|
|
|
|
|
|
|
_enter(modifier) {
|
|
|
|
if (this.isEditing && (modifier === 'meta' || (modifier === 'crtl' && Browser.isWin()))) {
|
2021-07-20 20:33:39 +03:00
|
|
|
this.args.editCard?.();
|
2021-07-20 12:54:19 +03:00
|
|
|
}
|
2021-07-20 20:33:39 +03:00
|
|
|
}
|
2021-07-20 12:54:19 +03:00
|
|
|
|
|
|
|
_placeCursorAtEnd() {
|
|
|
|
if (!this._textReplacementEditor) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
let tailPosition = this._textReplacementEditor.post.tailPosition();
|
|
|
|
let rangeToSelect = tailPosition.toRange();
|
|
|
|
this._textReplacementEditor.selectRange(rangeToSelect);
|
|
|
|
}
|
2021-07-20 20:33:39 +03:00
|
|
|
}
|