ckeditor_taxonomy_glossary-1.0.0-alpha1/js/ckeditor5_plugins/glossaryLink/src/glossarylinkformview.js

/**
 * @file
 * The glossary link form view.
 */

import {
	View,
	LabeledFieldView,
	createLabeledInputText,
	ButtonView,
	submitHandler,
} from "ckeditor5/src/ui";
import { KeystrokeHandler, FocusTracker } from "ckeditor5/src/utils";

// Import specific icons or use SVG strings
const checkIcon =
	'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m8.5 12.8-3.42-3.42a1 1 0 1 0-1.42 1.42l4.13 4.13a1 1 0 0 0 1.42 0l8.38-8.38a1 1 0 1 0-1.42-1.42L8.5 12.8z"/></svg>';
const cancelIcon =
	'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.591 10.177 4.243 4.242a1 1 0 0 1-1.415 1.415l-4.242-4.243-4.243 4.243a1 1 0 0 1-1.414-1.415l4.243-4.242L4.52 5.934A1 1 0 0 1 5.934 4.52l4.243 4.243 4.242-4.243a1 1 0 1 1 1.415 1.414l-4.243 4.243z"/></svg>';
const unlinkIcon =
	'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11.077 15h.543c1.7 0 3.08-1.38 3.08-3.08s-1.38-3.08-3.08-3.08H9.08A3.08 3.08 0 0 0 6 11.92c0 .874.368 1.663.957 2.22l-.717.717A4.08 4.08 0 0 1 5 11.92 4.08 4.08 0 0 1 9.08 7.84h2.54a4.08 4.08 0 0 1 4.08 4.08 4.08 4.08 0 0 1-4.08 4.08h-.543v-1z"/><path d="M8.923 5h-.543c-1.7 0-3.08 1.38-3.08 3.08s1.38 3.08 3.08 3.08H10.92A3.08 3.08 0 0 0 14 8.08c0-.874-.368-1.663-.957-2.22l.717-.717A4.08 4.08 0 0 1 15 8.08 4.08 4.08 0 0 1 10.92 12.16H8.38a4.08 4.08 0 0 1-4.08-4.08A4.08 4.08 0 0 1 8.38 4.08h.543v1z"/><path d="m13 10.5-1.5-1.5-1.5 1.5 1.5 1.5L13 10.5z"/></svg>';

/**
 * The glossary link form view.
 */
export default class GlossaryLinkFormView extends View {
	/**
	 * @param {module:utils/locale~Locale} locale The locale instance.
	 * @param {Object} options Configuration options.
	 */
	constructor(locale, options = {}) {
		super(locale);

		this.options = options;
		this.keystrokes = new KeystrokeHandler();
		this.focusTracker = new FocusTracker();

		// Set up observable properties
		this.set("isEditingExistingLink", false);

		this.termIdInputView = this._createTermIdInput();
		this.saveButtonView = this._createSaveButton();
		this.cancelButtonView = this._createCancelButton();
		this.removeLinkButtonView = this._createRemoveLinkButton();

		this.childViews = this.createCollection([
			this.termIdInputView,
			this.saveButtonView,
			this.cancelButtonView,
			this.removeLinkButtonView,
		]);

		this._setUpForm();
	}

	/**
	 * @inheritdoc
	 */
	render() {
		super.render();

		submitHandler({
			view: this,
		});

		this.keystrokes.listenTo(this.element);

		// Add elements to focus tracker after rendering
		this.childViews.map((view) => {
			this.focusTracker.add(view.element);
		});
	}

	/**
	 * Focuses the form.
	 */
	focus() {
		this.termIdInputView.focus();
	}

	/**
	 * Sets the form to editing mode for an existing link.
	 */
	setEditingMode(isEditing) {
		this.isEditingExistingLink = isEditing;
		this.set("isEditingExistingLink", isEditing);
	}

	/**
	 * Creates the term ID input.
	 */
	_createTermIdInput() {
		const locale = this.locale;
		const termIdInput = new LabeledFieldView(locale, createLabeledInputText);

		termIdInput.label = Drupal.t("Glossary Term");
		termIdInput.fieldView.placeholder = Drupal.t("Start typing to search for terms...");

		return termIdInput;
	}

	/**
	 * Creates the save button.
	 */
	_createSaveButton() {
		const locale = this.locale;
		const saveButton = new ButtonView(locale);

		saveButton.set({
			label: Drupal.t("Save"),
			icon: checkIcon,
			class: "ck-button-save",
			type: "submit",
			withText: true,
		});

		return saveButton;
	}

	/**
	 * Creates the cancel button.
	 */
	_createCancelButton() {
		const locale = this.locale;
		const cancelButton = new ButtonView(locale);

		cancelButton.set({
			label: Drupal.t("Cancel"),
			icon: cancelIcon,
			class: "ck-button-cancel",
			withText: true,
		});

		cancelButton.on("execute", () => {
			this.fire("cancel");
		});

		return cancelButton;
	}

	/**
	 * Creates the remove link button.
	 */
	_createRemoveLinkButton() {
		const locale = this.locale;
		const removeLinkButton = new ButtonView(locale);

		removeLinkButton.set({
			label: Drupal.t("Remove Link"),
			icon: unlinkIcon,
			class: "ck-button-remove-link",
			withText: true,
		});

		removeLinkButton.on("execute", () => {
			this.fire("removeLink");
		});

		return removeLinkButton;
	}

	/**
	 * Sets up the form.
	 */
	_setUpForm() {
		// Bind remove button visibility to editing mode
		this.removeLinkButtonView
			.bind("isVisible")
			.to(this, "isEditingExistingLink");

		this.setTemplate({
			tag: "form",
			attributes: {
				class: ["ck", "ck-glossary-link-form"],
				tabindex: "-1",
			},
			children: [
				{
					tag: "div",
					attributes: {
						class: ["ck", "ck-glossary-link-form__row"],
					},
					children: [this.termIdInputView],
				},
				{
					tag: "div",
					attributes: {
						class: ["ck", "ck-glossary-link-form__actions"],
					},
					children: [
						this.saveButtonView,
						this.cancelButtonView,
						this.removeLinkButtonView,
					],
				},
			],
		});

		this.keystrokes.set("Esc", (data, cancel) => {
			this.fire("cancel");
			cancel();
		});
	}
}