From 8b629c9ec7757f896f3f1cc3baef8248fec7a3bd Mon Sep 17 00:00:00 2001 From: Itallo Date: Tue, 2 Jul 2024 15:39:13 -0300 Subject: [PATCH 1/9] feat: aditive filed --- src/editor/navigationFields.ts | 2 + .../navigationFields/additiveFieldModal.ts | 130 +++++++++++------- src/syncfusion/navigationFields/bookmark.ts | 10 ++ src/syncfusion/navigationFields/index.ts | 18 ++- src/tinymce/index.ts | 1 + src/tinymce/navigationFields.ts | 2 + 6 files changed, 109 insertions(+), 54 deletions(-) diff --git a/src/editor/navigationFields.ts b/src/editor/navigationFields.ts index 20abcf1..bd5a1db 100644 --- a/src/editor/navigationFields.ts +++ b/src/editor/navigationFields.ts @@ -1,4 +1,5 @@ import type { IaraSpeechRecognition } from "../speech"; +import { IaraAditiveBookmark } from "../syncfusion/navigationFields/bookmark"; export abstract class IaraEditorNavigationFieldManager { abstract nextField(): void; @@ -10,6 +11,7 @@ export abstract class IaraEditorNavigationFieldManager { title?: string, type?: "Field" | "Mandatory" | "Optional" ): void; + abstract aditiveBookmark: IaraAditiveBookmark; constructor(private _recognition: IaraSpeechRecognition) { this._recognition.addEventListener("iaraSpeechMikeForwardButtonPress", () => this.nextField() diff --git a/src/syncfusion/navigationFields/additiveFieldModal.ts b/src/syncfusion/navigationFields/additiveFieldModal.ts index 5310020..ebe029b 100644 --- a/src/syncfusion/navigationFields/additiveFieldModal.ts +++ b/src/syncfusion/navigationFields/additiveFieldModal.ts @@ -1,32 +1,34 @@ import { Button } from "@syncfusion/ej2-buttons"; -import * as Sortable from "sortablejs"; import { TextBox } from "@syncfusion/ej2-inputs"; import { ListView } from "@syncfusion/ej2-lists"; import { Dialog, DialogUtility } from "@syncfusion/ej2-popups"; +import * as Sortable from "sortablejs"; import { IaraSyncfusionLanguageManager } from "../language"; -import { SortableList } from "./bookmark"; +import { IaraAditiveBookmark, SortableList } from "./bookmark"; export class IaraSyncfusionAdditiveFieldModal { - public inputContentText = ""; - public formContentText = ""; public content = ""; public dataSource: { identifier: string; phrase: string; }[] = []; - + public dialogUtility: Dialog; + public inputContentText = ""; + public formContentText = ""; public listTemplate: (data: { identifier: string; phrase: string }) => string; - public listviewInstance: ListView; - public dialogUtility: Dialog; + public requiredField = false; - constructor(private _languageManager: IaraSyncfusionLanguageManager) { + constructor( + private _languageManager: IaraSyncfusionLanguageManager, + public aditiveBookmark: IaraAditiveBookmark + ) { this.inputContentText = `
${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.additiveTextsHeaderIdentifier}:
- +
@@ -35,21 +37,14 @@ export class IaraSyncfusionAdditiveFieldModal {
${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.additiveTextsHeaderPhrase}:
- +
`; - this.formContentText = ` -
- ${this.inputContentText} - -
- `; - this.content = ` -
+
@@ -57,7 +52,7 @@ export class IaraSyncfusionAdditiveFieldModal {
${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.titleField}:
- +
@@ -90,12 +85,17 @@ export class IaraSyncfusionAdditiveFieldModal {
+
+

${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.additiveTextsTitle}

+ ${this.inputContentText} + +
+
+
+ + +
-
-

${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.additiveTextsTitle}

- ${this.formContentText} -
-
`; this.dialogUtility = DialogUtility.confirm({ @@ -105,14 +105,12 @@ export class IaraSyncfusionAdditiveFieldModal { showCloseIcon: true, closeOnEscape: true, cancelButton: { - text: this._languageManager.languages.language.iaraTranslate - .additiveFieldModal.modalBtnCancel, - click: this.cancelClick, + text: "", + cssClass: "d-none", }, okButton: { - text: this._languageManager.languages.language.iaraTranslate - .additiveFieldModal.modalBtnOk, - click: this.okClick, + text: "", + cssClass: "d-none", }, }); @@ -149,8 +147,13 @@ export class IaraSyncfusionAdditiveFieldModal { this._addAllComponents(); - const form = document.getElementById("formContentId") as HTMLFormElement; + const addTextBtn = document.getElementById("addBtn") as HTMLFormElement; + const closeModal = document.getElementById("closeModal") as HTMLFormElement; + addTextBtn.addEventListener("click", this.handleClick); + closeModal.click = () => this.dialogUtility.hide(); + + const form = document.getElementById("formContentId") as HTMLFormElement; form.addEventListener("submit", this.onSubmit); this.listviewInstance.element.ondrop = () => { @@ -159,6 +162,8 @@ export class IaraSyncfusionAdditiveFieldModal { } private _addAllComponents = () => { + const footer = document.getElementsByClassName("e-footer-content"); + footer[1].remove(); const outlineTextBox: TextBox = new TextBox({ placeholder: this._languageManager.languages.language.iaraTranslate @@ -198,14 +203,25 @@ export class IaraSyncfusionAdditiveFieldModal { addBtn.appendTo("#addBtn"); }; - public cancelClick = () => { - this.dialogUtility.hide(); - console.log("Additive Cancel"); - }; + public handleClick = (event: Event) => { + event.preventDefault(); + const identifier = document.getElementById( + "identifier" + ) as HTMLInputElement; + const phrase = document.getElementById("phrase") as HTMLInputElement; - public okClick = () => { - //funcao para gravar todos os dados - console.log("Additive OK"); + this.dataSource = [ + { + identifier: identifier.value, + phrase: phrase.value, + }, + ]; + identifier.value = ""; + phrase.value = ""; + this.listviewInstance.addItem(this.dataSource); + this.onComplete(); + this.onDragInDrop(); + this.updateNumbersOfList(); }; public onComplete(): void { @@ -230,23 +246,33 @@ export class IaraSyncfusionAdditiveFieldModal { public onSubmit = (event: Event) => { event.preventDefault(); - const identifier = document.getElementById( + const title = document.getElementById("outlined") as HTMLInputElement; + const identifierElement = document.getElementById( "identifier" ) as HTMLInputElement; - const phrase = document.getElementById("phrase") as HTMLInputElement; + const phraseElement = document.getElementById("phrase") as HTMLInputElement; + const delimiterStart = document.getElementById( + "delimiter-start" + ) as HTMLInputElement; + const delimiterEnd = document.getElementById( + "delimiter-end" + ) as HTMLInputElement; - this.dataSource = [ - { - identifier: identifier.value, - phrase: phrase.value, - }, - ]; - identifier.value = ""; - phrase.value = ""; - this.listviewInstance.addItem(this.dataSource); - this.onComplete(); - this.onDragInDrop(); - this.updateNumbersOfList(); + identifierElement.required = false; + phraseElement.required = false; + + const additiveText = this.listviewInstance.localData as unknown as { + identifier: string; + phrase: string; + }[]; + + this.aditiveBookmark = { + title: title.value, + delimiterStart: delimiterStart.value, + delimiterEnd: delimiterEnd.value, + aditiveTexts: additiveText, + }; + this.dialogUtility.hide(); }; public updateNumbersOfList = () => { diff --git a/src/syncfusion/navigationFields/bookmark.ts b/src/syncfusion/navigationFields/bookmark.ts index 501e883..4e07cfc 100644 --- a/src/syncfusion/navigationFields/bookmark.ts +++ b/src/syncfusion/navigationFields/bookmark.ts @@ -13,3 +13,13 @@ export type SortableList = { create: (arg0: HTMLElement) => void; }; }; + +export interface IaraAditiveBookmark { + title: string; + delimiterStart: string; + delimiterEnd: string; + aditiveTexts: { + identifier: string; + phrase: string; + }[]; +} diff --git a/src/syncfusion/navigationFields/index.ts b/src/syncfusion/navigationFields/index.ts index 480cd93..a3eb55a 100644 --- a/src/syncfusion/navigationFields/index.ts +++ b/src/syncfusion/navigationFields/index.ts @@ -8,7 +8,7 @@ import { IaraSyncfusionConfig } from ".."; import { IaraEditorNavigationFieldManager } from "../../editor/navigationFields"; import { IaraSpeechRecognition } from "../../speech"; import { v4 as uuidv4 } from "uuid"; -import { IaraBookmark } from "./bookmark"; +import { IaraAditiveBookmark, IaraBookmark } from "./bookmark"; import { IaraSyncfusionAdditiveFieldModal } from "./additiveFieldModal"; import { IaraSyncfusionLanguageManager } from "../language"; @@ -50,6 +50,17 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi isFirstNextNavigation = false; isFirstPreviousNavigation = false; bookmarks: IaraBookmark[] = []; + aditiveBookmark: IaraAditiveBookmark = { + title: "", + delimiterStart: "", + delimiterEnd: "", + aditiveTexts: [ + { + identifier: "", + phrase: "", + }, + ], + }; private _previousBookmarksTitles: string[] = []; @@ -63,7 +74,10 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi } addAdditiveField() { - new IaraSyncfusionAdditiveFieldModal(this._languageManager); + new IaraSyncfusionAdditiveFieldModal( + this._languageManager, + this.aditiveBookmark + ); } insertField( diff --git a/src/tinymce/index.ts b/src/tinymce/index.ts index c9cf72f..b6b4cd0 100644 --- a/src/tinymce/index.ts +++ b/src/tinymce/index.ts @@ -103,4 +103,5 @@ export class IaraTinyMCEAdapter extends EditorAdapter implements EditorAdapter { insertField() { throw new Error("Method not implemented."); } + aditiveBookmark = {}; } diff --git a/src/tinymce/navigationFields.ts b/src/tinymce/navigationFields.ts index f8d0439..48f9e5f 100644 --- a/src/tinymce/navigationFields.ts +++ b/src/tinymce/navigationFields.ts @@ -1,4 +1,5 @@ import { IaraEditorNavigationFieldManager } from "../editor/navigationFields"; +import { IaraAditiveBookmark } from "../syncfusion/navigationFields/bookmark"; export class IaraTinyMceNavigationFieldManager extends IaraEditorNavigationFieldManager { nextField(): void { @@ -17,4 +18,5 @@ export class IaraTinyMceNavigationFieldManager extends IaraEditorNavigationField insertField(): void { throw new Error("Method not implemented."); } + aditiveBookmark = {} as IaraAditiveBookmark; } From a957e14ec6af41df7c2aa91766c104a39e607021 Mon Sep 17 00:00:00 2001 From: Itallo Date: Wed, 10 Jul 2024 08:46:49 -0300 Subject: [PATCH 2/9] feat: insert aditive field --- ...tiveFieldModal.ts => aditiveFieldModal.ts} | 46 ++----- src/syncfusion/navigationFields/index.ts | 128 ++++++++++++++++-- src/syncfusion/toolbar/config.ts | 2 +- 3 files changed, 132 insertions(+), 44 deletions(-) rename src/syncfusion/navigationFields/{additiveFieldModal.ts => aditiveFieldModal.ts} (90%) diff --git a/src/syncfusion/navigationFields/additiveFieldModal.ts b/src/syncfusion/navigationFields/aditiveFieldModal.ts similarity index 90% rename from src/syncfusion/navigationFields/additiveFieldModal.ts rename to src/syncfusion/navigationFields/aditiveFieldModal.ts index ebe029b..8472ee1 100644 --- a/src/syncfusion/navigationFields/additiveFieldModal.ts +++ b/src/syncfusion/navigationFields/aditiveFieldModal.ts @@ -4,9 +4,9 @@ import { ListView } from "@syncfusion/ej2-lists"; import { Dialog, DialogUtility } from "@syncfusion/ej2-popups"; import * as Sortable from "sortablejs"; import { IaraSyncfusionLanguageManager } from "../language"; -import { IaraAditiveBookmark, SortableList } from "./bookmark"; +import { SortableList } from "./bookmark"; -export class IaraSyncfusionAdditiveFieldModal { +export class IaraSyncfusionAditiveFieldModal { public content = ""; public dataSource: { identifier: string; @@ -21,7 +21,11 @@ export class IaraSyncfusionAdditiveFieldModal { constructor( private _languageManager: IaraSyncfusionLanguageManager, - public aditiveBookmark: IaraAditiveBookmark + public onSubmit: ( + event: Event, + listView: ListView, + dialogObj: Dialog + ) => void ) { this.inputContentText = `
@@ -102,6 +106,7 @@ export class IaraSyncfusionAdditiveFieldModal { title: `
${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.modalTitle}
`, content: this.content, width: "450px", + isModal: false, showCloseIcon: true, closeOnEscape: true, cancelButton: { @@ -154,7 +159,9 @@ export class IaraSyncfusionAdditiveFieldModal { closeModal.click = () => this.dialogUtility.hide(); const form = document.getElementById("formContentId") as HTMLFormElement; - form.addEventListener("submit", this.onSubmit); + form.addEventListener("submit", event => + this.onSubmit(event, this.listviewInstance, this.dialogUtility) + ); this.listviewInstance.element.ondrop = () => { this.updateNumbersOfList(); @@ -244,37 +251,6 @@ export class IaraSyncfusionAdditiveFieldModal { sortable.default.create(ul); }; - public onSubmit = (event: Event) => { - event.preventDefault(); - const title = document.getElementById("outlined") as HTMLInputElement; - const identifierElement = document.getElementById( - "identifier" - ) as HTMLInputElement; - const phraseElement = document.getElementById("phrase") as HTMLInputElement; - const delimiterStart = document.getElementById( - "delimiter-start" - ) as HTMLInputElement; - const delimiterEnd = document.getElementById( - "delimiter-end" - ) as HTMLInputElement; - - identifierElement.required = false; - phraseElement.required = false; - - const additiveText = this.listviewInstance.localData as unknown as { - identifier: string; - phrase: string; - }[]; - - this.aditiveBookmark = { - title: title.value, - delimiterStart: delimiterStart.value, - delimiterEnd: delimiterEnd.value, - aditiveTexts: additiveText, - }; - this.dialogUtility.hide(); - }; - public updateNumbersOfList = () => { const countList = document.getElementsByClassName("countValue"); Array.prototype.map.call(countList, (count: HTMLElement, index) => { diff --git a/src/syncfusion/navigationFields/index.ts b/src/syncfusion/navigationFields/index.ts index a3eb55a..bb83d3c 100644 --- a/src/syncfusion/navigationFields/index.ts +++ b/src/syncfusion/navigationFields/index.ts @@ -2,15 +2,23 @@ import { BookmarkElementBox, Dictionary, DocumentEditor, + Point, TextPosition, } from "@syncfusion/ej2-documenteditor"; +import { + ContextMenu, + MenuItemModel, + ContextMenuModel, +} from "@syncfusion/ej2-navigations"; +import { ListView } from "@syncfusion/ej2-lists"; +import { Dialog } from "@syncfusion/ej2-popups"; +import { v4 as uuidv4 } from "uuid"; import { IaraSyncfusionConfig } from ".."; import { IaraEditorNavigationFieldManager } from "../../editor/navigationFields"; import { IaraSpeechRecognition } from "../../speech"; -import { v4 as uuidv4 } from "uuid"; -import { IaraAditiveBookmark, IaraBookmark } from "./bookmark"; -import { IaraSyncfusionAdditiveFieldModal } from "./additiveFieldModal"; import { IaraSyncfusionLanguageManager } from "../language"; +import { IaraSyncfusionAditiveFieldModal } from "./aditiveFieldModal"; +import { IaraAditiveBookmark, IaraBookmark } from "./bookmark"; export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFieldManager { previousBookmark: IaraBookmark = { @@ -73,11 +81,55 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi super(_recognition); } - addAdditiveField() { - new IaraSyncfusionAdditiveFieldModal( - this._languageManager, - this.aditiveBookmark + addAditiveField() { + new IaraSyncfusionAditiveFieldModal(this._languageManager, this.onSubmit); + } + + insertAditiveField(aditive: IaraAditiveBookmark) { + const bookmarksCount = uuidv4(); + this._documentEditor.editor.insertText(" "); + this._documentEditor.selection.movePreviousPosition(); + this._documentEditor.editor.insertBookmark(`Aditive-${bookmarksCount}`); + this._documentEditor.editor.insertText("[]"); + this._documentEditor.selection.movePreviousPosition(); + this._documentEditor.editor.insertText("<>"); + this._documentEditor.selection.movePreviousPosition(); + this._documentEditor.editor.insertText(aditive.title); + this._documentEditor.selection.clear(); + this._documentEditor.selection.moveNextPosition(); + this.getBookmarks(); + this.showContextMenuOnSel(); + const bookmarkElement = this._documentEditor.editor.createBookmarkElements( + `Aditive-${bookmarksCount}` ); + console.log(bookmarkElement, "bookmarkElement"); + // this.getOffsetsAndSelect(`Aditive-${bookmarksCount}`, true); + const ulElement = document.createElement("ul"); + // aditive.aditiveTexts.map((ad, index) => { + // const liElement = document.createElement("li"); + // liElement.innerHTML = `${index} [] ${ad.identifier}`; + // ulElement.appendChild(liElement); + // }); + const menuItems: MenuItemModel[] = [ + { + text: "Cut", + }, + { + text: "Copy", + }, + { + text: "Paste", + }, + ]; + + // this._documentEditor.contextMenu.addCustomMenu(menuItems, false) + + // const menuOptions: ContextMenuModel = { + // items: menuItems, + // }; + // const menuObj: ContextMenu = new ContextMenu(menuOptions); + + // console.log(menuObj, "menuObj"); } insertField( @@ -287,7 +339,8 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi if ( bookmarkName.includes("Field") || bookmarkName.includes("Mandatory") || - bookmarkName.includes("Optional") + bookmarkName.includes("Optional") || + bookmarkName.includes("Aditive") ) { if (index !== -1) { this.bookmarks = this.bookmarks.map(item => { @@ -420,6 +473,13 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi (this._documentEditor.selection.characterFormat.highlightColor = "#CEEFFE"); } + if (bookmark.name.includes("Aditive")) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + //@ts-ignore + this._documentEditor.selection.characterFormat.highlightColor = + "#403294"; + this.selectTitle(bookmark.title, bookmark.name, true); + } }); } @@ -596,4 +656,56 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi } return this.requiredFields(); } + + public onSubmit = (event: Event, listView: ListView, dialogObj: Dialog) => { + event.preventDefault(); + const title = document.getElementById("outlined") as HTMLInputElement; + const identifierElement = document.getElementById( + "identifier" + ) as HTMLInputElement; + const phraseElement = document.getElementById("phrase") as HTMLInputElement; + const delimiterStart = document.getElementById( + "delimiter-start" + ) as HTMLInputElement; + const delimiterEnd = document.getElementById( + "delimiter-end" + ) as HTMLInputElement; + + identifierElement.required = false; + phraseElement.required = false; + + const additiveText = listView.localData as unknown as { + identifier: string; + phrase: string; + }[]; + + this.insertAditiveField({ + title: title.value, + delimiterStart: delimiterStart.value, + delimiterEnd: delimiterEnd.value, + aditiveTexts: additiveText, + }); + + dialogObj.hide(); + }; + + private showContextMenuOnSel(): void { + const xPos = 0; + const yPos = 0; + + const menuItems: MenuItemModel[] = [ + { + text: "Cut", + }, + { + text: "Copy", + }, + { + text: "Paste", + }, + ]; + + this._documentEditor.contextMenu.contextMenuInstance.items = menuItems; + this._documentEditor.contextMenu.contextMenuInstance.open(yPos, xPos); + } } diff --git a/src/syncfusion/toolbar/config.ts b/src/syncfusion/toolbar/config.ts index a6f9a32..17a9853 100644 --- a/src/syncfusion/toolbar/config.ts +++ b/src/syncfusion/toolbar/config.ts @@ -267,7 +267,7 @@ const toolbarButtonClick = ( navigationFields?.insertField(selectedText, undefined, "Optional"); break; case "AddAdditiveField": - navigationFields?.addAdditiveField(); + navigationFields?.addAditiveField(); break; case "NextField": navigationFields?.nextField(); From e6f9886e6f9fd6024441e60af8f4ab91c9dbb839 Mon Sep 17 00:00:00 2001 From: Itallo Date: Fri, 30 Aug 2024 17:59:23 -0300 Subject: [PATCH 3/9] feat: create additive field --- src/editor/navigationFields.ts | 5 +- src/syncfusion/index.ts | 32 +- .../navigationFields/additive.ts/dialog.ts | 317 ++++++++++++++++++ .../navigationFields/additive.ts/list.ts | 119 +++++++ .../navigationFields/aditiveFieldModal.ts | 260 -------------- src/syncfusion/navigationFields/index.ts | 226 +++++-------- .../navigationFields/navigationBookmark.ts | 5 +- src/syncfusion/shortcuts/templateSearch.ts | 13 +- src/syncfusion/toolbar/config.ts | 2 +- src/tinymce/navigationFields.ts | 5 +- 10 files changed, 562 insertions(+), 422 deletions(-) create mode 100644 src/syncfusion/navigationFields/additive.ts/dialog.ts create mode 100644 src/syncfusion/navigationFields/additive.ts/list.ts delete mode 100644 src/syncfusion/navigationFields/aditiveFieldModal.ts diff --git a/src/editor/navigationFields.ts b/src/editor/navigationFields.ts index 423e022..28b9001 100644 --- a/src/editor/navigationFields.ts +++ b/src/editor/navigationFields.ts @@ -1,6 +1,5 @@ import type { IaraSpeechRecognition } from "../speech"; -import { IaraAditiveBookmark } from "../syncfusion/navigationFields/navigationBookmark"; - +import { IaraAdditiveBookmark } from "../syncfusion/navigationFields/navigationBookmark"; export abstract class IaraEditorNavigationFieldManager { abstract nextField(): void; @@ -12,7 +11,7 @@ export abstract class IaraEditorNavigationFieldManager { title?: string, type?: "Field" | "Mandatory" | "Optional" ): void; - abstract aditiveBookmark: IaraAditiveBookmark; + abstract additiveBookmark: IaraAdditiveBookmark; constructor(private _recognition: IaraSpeechRecognition) { this._recognition.addEventListener("iaraSpeechMikeForwardButtonPress", () => this.nextField() diff --git a/src/syncfusion/index.ts b/src/syncfusion/index.ts index 96a4f1d..2aa5b35 100644 --- a/src/syncfusion/index.ts +++ b/src/syncfusion/index.ts @@ -229,10 +229,18 @@ export class IaraSyncfusionAdapter .replace(/\r/g, "\n") .trim() .toLocaleLowerCase(); - const normalizedInferenceText = bookmark.inferenceText?.trim().toLocaleLowerCase(); - if (!bookmark.recordingId || !normalizedContent.length || !normalizedInferenceText?.length) return; - - const evaluation = normalizedContent === normalizedInferenceText ? 6 : 5; + const normalizedInferenceText = bookmark.inferenceText + ?.trim() + .toLocaleLowerCase(); + if ( + !bookmark.recordingId || + !normalizedContent.length || + !normalizedInferenceText?.length + ) + return; + + const evaluation = + normalizedContent === normalizedInferenceText ? 6 : 5; await fetch(`${IaraSyncfusionAdapter.IARA_API_URL}voice/validation/`, { headers: { ...this._recognition.internal.iaraAPIMandatoryHeaders, @@ -337,7 +345,7 @@ export class IaraSyncfusionAdapter fontColor: this.config.darkMode ? "#fff" : "#000", }); - this._navigationFieldManager.getBookmarks(); + this._navigationFieldManager.createBookmarks(); this._documentEditor.selection.moveToDocumentEnd(); } @@ -368,7 +376,8 @@ export class IaraSyncfusionAdapter if (!this._selectionManager) return; this._inferenceBookmarksManager.updateBookmarkInference( - this._selectionManager.initialSelectionData.bookmarkId, inference + this._selectionManager.initialSelectionData.bookmarkId, + inference ); if ( @@ -481,10 +490,8 @@ export class IaraSyncfusionAdapter if (item.category === "Template") { if (this.preprocessAndInsertTemplate) this.preprocessAndInsertTemplate?.(item.content, item); - else - this.insertTemplate(item.content); - } - else this.insertText(item.content); + else this.insertTemplate(item.content); + } else this.insertText(item.content); dialogObj.hide(); } @@ -557,7 +564,7 @@ export class IaraSyncfusionAdapter private _handleFirstInference(inference: IaraSpeechRecognitionDetail): void { this._updateSelectedNavigationField(this._documentEditor.selection.text); - const hadSelectedText = this._documentEditor.selection.text.length + const hadSelectedText = this._documentEditor.selection.text.length; if (hadSelectedText) this._documentEditor.editor.delete(); @@ -629,8 +636,7 @@ export class IaraSyncfusionAdapter }); if (this.preprocessAndInsertTemplate) this.preprocessAndInsertTemplate?.(template, metadata); - else - this.insertTemplate(template); + else this.insertTemplate(template); return true; } diff --git a/src/syncfusion/navigationFields/additive.ts/dialog.ts b/src/syncfusion/navigationFields/additive.ts/dialog.ts new file mode 100644 index 0000000..e276a22 --- /dev/null +++ b/src/syncfusion/navigationFields/additive.ts/dialog.ts @@ -0,0 +1,317 @@ +import { Button } from "@syncfusion/ej2-buttons"; +import { TextBox } from "@syncfusion/ej2-inputs"; +import { ListView } from "@syncfusion/ej2-lists"; +import { Dialog, DialogUtility } from "@syncfusion/ej2-popups"; +import * as Sortable from "sortablejs"; +import { IaraSyncfusionNavigationFieldManager } from ".."; +import { IaraSyncfusionLanguageManager } from "../../language"; +import { SortableList } from "../navigationBookmark"; + +export class IaraSyncfusionAdditiveDialog { + public dataSource: { + identifier: string; + phrase: string; + }[] = []; + public dialogUtility: Dialog; + public formContentText = ""; + public listviewInstance: ListView; + public requiredField = false; + + constructor( + private _languageManager: IaraSyncfusionLanguageManager, + private _instance: IaraSyncfusionNavigationFieldManager + ) { + this.dialogUtility = this._createDialog(); + + this.listviewInstance = this._createListView(); + + this.listviewInstance.appendTo("#listview"); + + this._createDialogComponents(); + + const btnFieldToList = document.getElementById("addBtn") as HTMLFormElement; + const closeDialog = document.getElementById( + "closeDialog" + ) as HTMLFormElement; + + btnFieldToList.addEventListener("click", this.addFieldInList); + closeDialog.click = () => this.dialogUtility.hide(); + + const dialogForm = document.getElementById( + "formContentId" + ) as HTMLFormElement; + + dialogForm.addEventListener("submit", event => + this.onSubmitFormDialog(event, this.listviewInstance, this.dialogUtility) + ); + + this.listviewInstance.element.ondrop = () => { + this.updateNumbersOfList(); + }; + } + + private _createDialog = () => { + return DialogUtility.confirm({ + title: `
${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.modalTitle}
`, + content: this._createForm(), + width: "450px", + isModal: false, + showCloseIcon: true, + closeOnEscape: true, + cancelButton: { + text: "", + cssClass: "d-none", + }, + okButton: { + text: "", + cssClass: "d-none", + }, + }); + }; + + private _createForm = (): string => { + const inputContentText = ` +
+
+
+ ${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.additiveTextsHeaderIdentifier}:
+
+ +
+
+
+ +
+
+
+ ${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.additiveTextsHeaderPhrase}:
+
+ +
+
+
+ `; + const form = ` +
+
+
+
+
+
${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.titleField}:
+
+
+ +
+
+
+
+
+

${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.configTitle}

+
+
+
${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.delimiterStartField}:
+
+
+ +
+
+
+
${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.delimiterFinalField}:
+
+
+ +
+
+
+
+
+
+

+ ${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.additiveTextsTitle} +

+ ${inputContentText} + +
+
+
+ + +
+ `; + return form; + }; + + private _createListView = () => { + const listTemplate = (data: { + identifier: string; + phrase: string; + }) => `
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
`; + + return new ListView({ + dataSource: this.dataSource, + template: listTemplate, + fields: { iconCss: "icon" }, + actionComplete: this.onComplete, + }); + }; + + private _createDialogComponents = () => { + const footer = document.getElementsByClassName("e-footer-content"); + footer[1].remove(); + const outlineTextBox: TextBox = new TextBox({ + placeholder: + this._languageManager.languages.language.iaraTranslate + .additiveFieldModal.titlePlaceholder, + cssClass: "e-outline", + }); + outlineTextBox.appendTo("#outlined"); + + const delimeterStart: TextBox = new TextBox({ + placeholder: ",", + cssClass: "e-outline", + }); + delimeterStart.appendTo("#delimiter-start"); + + const delimeterEnd: TextBox = new TextBox({ + placeholder: + this._languageManager.languages.language.iaraTranslate + .additiveFieldModal.delimiterFinalPlaceholder, + cssClass: "e-outline", + }); + delimeterEnd.appendTo("#delimiter-end"); + + const identifierText: TextBox = new TextBox({ + cssClass: "e-outline e-small", + }); + identifierText.appendTo("#identifier"); + + const phraseText: TextBox = new TextBox({ + cssClass: "e-outline e-small", + }); + phraseText.appendTo("#phrase"); + + const addBtn: Button = new Button({ + cssClass: "e-outline", + isPrimary: true, + }); + addBtn.appendTo("#addBtn"); + }; + + public addFieldInList = (event: Event) => { + event.preventDefault(); + const identifier = document.getElementById( + "identifier" + ) as HTMLInputElement; + const phrase = document.getElementById("phrase") as HTMLInputElement; + this.dataSource = [ + { + identifier: identifier.value, + phrase: phrase.value, + }, + ]; + identifier.value = ""; + phrase.value = ""; + identifier.required = false; + phrase.required = false; + this.listviewInstance.addItem(this.dataSource); + this.onComplete(); + this.onDragInDrop(); + this.updateNumbersOfList(); + }; + + public onSubmitFormDialog = ( + event: Event, + listView: ListView, + dialogObj: Dialog + ) => { + event.preventDefault(); + const title = document.getElementById("outlined") as HTMLInputElement; + const identifierElement = document.getElementById( + "identifier" + ) as HTMLInputElement; + const phraseElement = document.getElementById("phrase") as HTMLInputElement; + const delimiterStart = document.getElementById( + "delimiter-start" + ) as HTMLInputElement; + const delimiterEnd = document.getElementById( + "delimiter-end" + ) as HTMLInputElement; + + const additiveTexts = listView.localData as unknown as { + identifier: string; + phrase: string; + }[]; + + if (!additiveTexts) { + identifierElement.required = true; + phraseElement.required = true; + return; + } + dialogObj.hide(); + this._instance.insertAdditiveField({ + title: title.value, + additiveTexts, + delimiterStart: delimiterStart.value, + delimiterEnd: delimiterEnd.value, + }); + }; + + public onComplete(): void { + const iconEle: HTMLCollection = + document.getElementsByClassName("delete-icon"); + + Array.prototype.forEach.call(iconEle, (element: HTMLElement) => { + element.addEventListener("click", () => { + const li: HTMLElement = element.closest("li") as HTMLElement; + li.remove(); + this.updateNumbersOfList(); + }); + }); + } + + public onDragInDrop = () => { + const listView = document.getElementById("listview") as HTMLElement; + const ul = listView.firstElementChild?.firstElementChild as HTMLElement; + const sortable = Sortable as unknown as SortableList; + sortable.default.create(ul); + }; + + public updateNumbersOfList = () => { + const countList = document.getElementsByClassName("countValue"); + Array.prototype.map.call(countList, (count: HTMLElement, index) => { + count.textContent = `${index + 1}`; + }); + }; +} diff --git a/src/syncfusion/navigationFields/additive.ts/list.ts b/src/syncfusion/navigationFields/additive.ts/list.ts new file mode 100644 index 0000000..f93b7f7 --- /dev/null +++ b/src/syncfusion/navigationFields/additive.ts/list.ts @@ -0,0 +1,119 @@ +import { ListView } from "@syncfusion/ej2-lists"; +import { IaraSyncfusionNavigationFieldManager } from ".."; +import { IaraAdditiveBookmark } from "../navigationBookmark"; + +export class IaraSyncfusionAdditiveList { + constructor( + private _instance: IaraSyncfusionNavigationFieldManager, + private _additiveField: IaraAdditiveBookmark, + private _additiveId: string + ) { + this.create(); + } + + create = () => { + const contextMenuElement = document.createElement("ul"); + contextMenuElement.id = "contextmenu-iara"; + this._instance._documentEditor.element.appendChild(contextMenuElement); + const menuItems = this._additiveField.additiveTexts.map(text => { + return { + text: text.identifier, + value: text.phrase, + }; + }); + let fieldSelected: string[] = []; + const listObj: ListView = new ListView({ + dataSource: menuItems, + showCheckBox: true, + width: "200px", + select: (args: { + data: { text: string; value: string }; + isChecked: boolean; + }) => { + if (args.isChecked) { + this._instance.selectBookmark(this._additiveId); + if (!fieldSelected.includes(`${this._additiveId}-${args.data.text}`)) + fieldSelected = [...fieldSelected, args.data.value]; + } else { + fieldSelected = fieldSelected.filter(additive => { + return ( + `${this._additiveId}-${additive}` !== + `${this._additiveId}-${args.data.text}` + ); + }); + } + }, + }); + listObj.appendTo("#contextmenu-iara"); + this.customPosition(listObj); + this.customStyle(listObj); + const btn = this.customButton(contextMenuElement); + btn.onclick = () => this.addContent(fieldSelected); + }; + + addContent = (fieldSelected: string[]) => { + this.closeList(); + fieldSelected.map((fileChecked, index) => { + this._instance._documentEditor.editor.insertText(fileChecked); + if (fieldSelected.length - 2 === index) { + this._instance._documentEditor.editor.insertText( + ` ${this._additiveField.delimiterEnd} ` + ); + } else if (fieldSelected.length - 1 !== index) { + this._instance._documentEditor.editor.insertText( + `${this._additiveField.delimiterStart} ` + ); + } + }); + }; + + customStyle = (listObj: ListView) => { + listObj.element.style.margin = "0"; + listObj.element.style.padding = "0"; + listObj.element.style.zIndex = "5"; + listObj.element.style.borderColor = "#BAE1FE"; + listObj.element.style.borderRadius = "5px"; + listObj.element.style.borderStyle = "dotted"; + listObj.element.style.borderWidth = "1px"; + }; + + customPosition = (listObj: ListView) => { + this._instance._documentEditor.element.style.position = "relative"; + const textPosition = + this._instance._documentEditor.selection.start.location; + // console.log(this._instance._documentEditor.element, "RULER"); + // console.log(this._instance._documentEditor.hRuler.element, "HRULER"); + const offset = + this._instance._documentEditor.hRuler.element.getBoundingClientRect(); + console.log(offset, "textPosition"); + const yPos = 55 + offset.top - textPosition.y; + const xPos = offset.left + textPosition.x; + listObj.element.style.position = "absolute"; + listObj.element.style.top = `${yPos}px`; + listObj.element.style.left = `${xPos}px`; + }; + + customButton = (contextMenuElement: HTMLElement) => { + const buttonContainer = document.createElement("div"); + const button = document.createElement("button"); + buttonContainer.style.display = "flex"; + buttonContainer.style.flexDirection = "column"; + buttonContainer.style.alignItems = "end"; + buttonContainer.appendChild(button); + button.textContent = "Concluir"; + button.className = "e-btn e-outline"; + contextMenuElement.appendChild(buttonContainer); + return button; + }; + + closeList = () => { + const contextMenuElement = document.getElementById( + "contextmenu-iara" + ) as HTMLElement; + if (contextMenuElement) { + contextMenuElement.style.display = "none"; + contextMenuElement.remove(); + } + this._instance._documentEditor.isReadOnly = false; + }; +} diff --git a/src/syncfusion/navigationFields/aditiveFieldModal.ts b/src/syncfusion/navigationFields/aditiveFieldModal.ts deleted file mode 100644 index 23beb80..0000000 --- a/src/syncfusion/navigationFields/aditiveFieldModal.ts +++ /dev/null @@ -1,260 +0,0 @@ -import { Button } from "@syncfusion/ej2-buttons"; -import { TextBox } from "@syncfusion/ej2-inputs"; -import { ListView } from "@syncfusion/ej2-lists"; -import { Dialog, DialogUtility } from "@syncfusion/ej2-popups"; -import * as Sortable from "sortablejs"; -import { IaraSyncfusionLanguageManager } from "../language"; -import { SortableList } from "./navigationBookmark"; - -export class IaraSyncfusionAditiveFieldModal { - public content = ""; - public dataSource: { - identifier: string; - phrase: string; - }[] = []; - public dialogUtility: Dialog; - public inputContentText = ""; - public formContentText = ""; - public listTemplate: (data: { identifier: string; phrase: string }) => string; - public listviewInstance: ListView; - public requiredField = false; - - constructor( - private _languageManager: IaraSyncfusionLanguageManager, - public onSubmit: ( - event: Event, - listView: ListView, - dialogObj: Dialog - ) => void - ) { - this.inputContentText = ` -
-
-
${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.additiveTextsHeaderIdentifier}:
-
- -
-
-
- -
-
-
${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.additiveTextsHeaderPhrase}:
-
- -
-
-
- `; - - this.content = ` -
-
-
-
-
-
${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.titleField}:
-
-
- -
-
-
-
-
-

${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.configTitle}

-
-
-
${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.delimiterStartField}:
-
-
- -
-
-
-
${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.delimiterFinalField}:
-
-
- -
-
-
-
- -
-

${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.additiveTextsTitle}

- ${this.inputContentText} - -
-
-
- - -
-
- `; - - this.dialogUtility = DialogUtility.confirm({ - title: `
${this._languageManager.languages.language.iaraTranslate.additiveFieldModal.modalTitle}
`, - content: this.content, - width: "450px", - isModal: false, - showCloseIcon: true, - closeOnEscape: true, - cancelButton: { - text: "", - cssClass: "d-none", - }, - okButton: { - text: "", - cssClass: "d-none", - }, - }); - - this.listTemplate = (data: { - identifier: string; - phrase: string; - }) => `
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
`; - - this.listviewInstance = new ListView({ - dataSource: this.dataSource, - template: this.listTemplate, - fields: { iconCss: "icon" }, - actionComplete: this.onComplete, - }); - this.listviewInstance.appendTo("#listview"); - - this._addAllComponents(); - - const addTextBtn = document.getElementById("addBtn") as HTMLFormElement; - const closeModal = document.getElementById("closeModal") as HTMLFormElement; - - addTextBtn.addEventListener("click", this.handleClick); - closeModal.click = () => this.dialogUtility.hide(); - - const form = document.getElementById("formContentId") as HTMLFormElement; - form.addEventListener("submit", event => - this.onSubmit(event, this.listviewInstance, this.dialogUtility) - ); - - this.listviewInstance.element.ondrop = () => { - this.updateNumbersOfList(); - }; - } - - private _addAllComponents = () => { - const footer = document.getElementsByClassName("e-footer-content"); - footer[1].remove(); - const outlineTextBox: TextBox = new TextBox({ - placeholder: - this._languageManager.languages.language.iaraTranslate - .additiveFieldModal.titlePlaceholder, - cssClass: "e-outline", - }); - outlineTextBox.appendTo("#outlined"); - - const delimeterStart: TextBox = new TextBox({ - placeholder: ",", - cssClass: "e-outline", - }); - delimeterStart.appendTo("#delimiter-start"); - - const delimeterEnd: TextBox = new TextBox({ - placeholder: - this._languageManager.languages.language.iaraTranslate - .additiveFieldModal.delimiterFinalPlaceholder, - cssClass: "e-outline", - }); - delimeterEnd.appendTo("#delimiter-end"); - - const identifierText: TextBox = new TextBox({ - cssClass: "e-outline e-small", - }); - identifierText.appendTo("#identifier"); - - const phraseText: TextBox = new TextBox({ - cssClass: "e-outline e-small", - }); - phraseText.appendTo("#phrase"); - - const addBtn: Button = new Button({ - cssClass: "e-outline", - isPrimary: true, - }); - addBtn.appendTo("#addBtn"); - }; - - public handleClick = (event: Event) => { - event.preventDefault(); - const identifier = document.getElementById( - "identifier" - ) as HTMLInputElement; - const phrase = document.getElementById("phrase") as HTMLInputElement; - - this.dataSource = [ - { - identifier: identifier.value, - phrase: phrase.value, - }, - ]; - identifier.value = ""; - phrase.value = ""; - this.listviewInstance.addItem(this.dataSource); - this.onComplete(); - this.onDragInDrop(); - this.updateNumbersOfList(); - }; - - public onComplete(): void { - const iconEle: HTMLCollection = - document.getElementsByClassName("delete-icon"); - - Array.prototype.forEach.call(iconEle, (element: HTMLElement) => { - element.addEventListener("click", () => { - const li: HTMLElement = element.closest("li") as HTMLElement; - li.remove(); - this.updateNumbersOfList(); - }); - }); - } - - public onDragInDrop = () => { - const listView = document.getElementById("listview") as HTMLElement; - const ul = listView.firstElementChild?.firstElementChild as HTMLElement; - const sortable = Sortable as unknown as SortableList; - sortable.default.create(ul); - }; - - public updateNumbersOfList = () => { - const countList = document.getElementsByClassName("countValue"); - Array.prototype.map.call(countList, (count: HTMLElement, index) => { - count.textContent = `${index + 1}`; - }); - }; -} diff --git a/src/syncfusion/navigationFields/index.ts b/src/syncfusion/navigationFields/index.ts index 195a1be..092f501 100644 --- a/src/syncfusion/navigationFields/index.ts +++ b/src/syncfusion/navigationFields/index.ts @@ -1,24 +1,32 @@ -import { - DocumentEditor -} from "@syncfusion/ej2-documenteditor"; -import { ListView } from "@syncfusion/ej2-lists"; -import { - MenuItemModel -} from "@syncfusion/ej2-navigations"; -import { Dialog } from "@syncfusion/ej2-popups"; - +import { DocumentEditor } from "@syncfusion/ej2-documenteditor"; import { v4 as uuidv4 } from "uuid"; import { IaraSyncfusionConfig } from ".."; import { IaraEditorNavigationFieldManager } from "../../editor/navigationFields"; import { IaraSpeechRecognition } from "../../speech"; import { IaraSyncfusionLanguageManager } from "../language"; import { IaraSyncfusionSelectionManager } from "../selection"; -import { IaraSyncfusionAditiveFieldModal } from "./aditiveFieldModal"; -import { IaraAditiveBookmark, IaraNavigationBookmark } from "./navigationBookmark"; +import { IaraSyncfusionAdditiveDialog } from "./additive.ts/dialog"; +import { IaraSyncfusionAdditiveList } from "./additive.ts/list"; +import { + IaraAdditiveBookmark, + IaraNavigationBookmark, +} from "./navigationBookmark"; export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFieldManager { - previousBookmark: IaraNavigationBookmark = {} as IaraNavigationBookmark; - nextBookmark: IaraNavigationBookmark = {} as IaraNavigationBookmark; + additiveListIntance: IaraSyncfusionAdditiveList | null = null; + additiveBookmark: IaraAdditiveBookmark = { + title: "", + delimiterStart: "", + delimiterEnd: "", + additiveTexts: [ + { + identifier: "", + phrase: "", + }, + ], + }; + blockSelectionInBookmarkCreate = false; + bookmarks: IaraNavigationBookmark[] = []; currentSelectionOffset: { start: string; end: string; @@ -37,24 +45,12 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi }; isFirstNextNavigation = false; isFirstPreviousNavigation = false; - bookmarks: IaraNavigationBookmark[] = []; - aditiveBookmark: IaraAditiveBookmark = { - title: "", - delimiterStart: "", - delimiterEnd: "", - aditiveTexts: [ - { - identifier: "", - phrase: "", - }, - ], - }; - + nextBookmark: IaraNavigationBookmark = {} as IaraNavigationBookmark; + previousBookmark: IaraNavigationBookmark = {} as IaraNavigationBookmark; private _previousBookmarksTitles: string[] = []; - constructor( - private _documentEditor: DocumentEditor, + public _documentEditor: DocumentEditor, private _config: IaraSyncfusionConfig, _recognition: IaraSpeechRecognition, private _languageManager: IaraSyncfusionLanguageManager @@ -79,57 +75,58 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi end: "", }, }; + this._documentEditor.selectionChange = () => { + if ( + this.blockSelectionInBookmarkCreate && + !this._documentEditor.isReadOnly + ) { + const selectionBookmark = this._documentEditor.selection.getBookmarks(); + selectionBookmark.find(bookmark => bookmark.startsWith("Additive")); + const currentAdditiveField = this.bookmarks.filter( + bookmark => bookmark.name === selectionBookmark[0] + ); + if (currentAdditiveField.length && currentAdditiveField[0].additive) { + this.showAdditiveList( + currentAdditiveField[0].additive, + currentAdditiveField[0].name + ); + this._documentEditor.isReadOnly = true; + } + } + }; } - addAditiveField() { - new IaraSyncfusionAditiveFieldModal(this._languageManager, this.onSubmit); + addAdditiveField() { + new IaraSyncfusionAdditiveDialog(this._languageManager, this); } - insertAditiveField(aditive: IaraAditiveBookmark) { + createBookmarks(setColor = true): void { + const editorBookmarks = this._documentEditor.getBookmarks(); + this.updateBookmark(editorBookmarks); + this.removeEmptyField(editorBookmarks); + this.sortByPosition(); + + if (setColor) this.setColor(); + + this._documentEditor.selection.clear(); + } + + insertAdditiveField(additive: IaraAdditiveBookmark) { + this.blockSelectionInBookmarkCreate = false; const bookmarksCount = uuidv4(); this._documentEditor.editor.insertText(" "); - this._documentEditor.selection.movePreviousPosition(); - this._documentEditor.editor.insertBookmark(`Aditive-${bookmarksCount}`); + this._documentEditor.editor.onBackSpace(); + this._documentEditor.editor.insertBookmark(`Additive-${bookmarksCount}`); this._documentEditor.editor.insertText("[]"); this._documentEditor.selection.movePreviousPosition(); this._documentEditor.editor.insertText("<>"); this._documentEditor.selection.movePreviousPosition(); - this._documentEditor.editor.insertText(aditive.title); + this._documentEditor.editor.insertText(additive.title); this._documentEditor.selection.clear(); this._documentEditor.selection.moveNextPosition(); - this.getBookmarks(); - this.showContextMenuOnSel(); - const bookmarkElement = this._documentEditor.editor.createBookmarkElements( - `Aditive-${bookmarksCount}` - ); - console.log(bookmarkElement, "bookmarkElement"); - // this.getOffsetsAndSelect(`Aditive-${bookmarksCount}`, true); - const ulElement = document.createElement("ul"); - // aditive.aditiveTexts.map((ad, index) => { - // const liElement = document.createElement("li"); - // liElement.innerHTML = `${index} [] ${ad.identifier}`; - // ulElement.appendChild(liElement); - // }); - const menuItems: MenuItemModel[] = [ - { - text: "Cut", - }, - { - text: "Copy", - }, - { - text: "Paste", - }, - ]; - - // this._documentEditor.contextMenu.addCustomMenu(menuItems, false) - - // const menuOptions: ContextMenuModel = { - // items: menuItems, - // }; - // const menuObj: ContextMenu = new ContextMenu(menuOptions); - - // console.log(menuObj, "menuObj"); + this.additiveBookmark = additive; + this.createBookmarks(); + this.blockSelectionInBookmarkCreate = true; } insertField( @@ -138,7 +135,7 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi type: "Field" | "Mandatory" | "Optional" = "Field" ): void { const bookmarksCount = uuidv4(); - this._documentEditor.editor.insertText(' '); + this._documentEditor.editor.insertText(" "); this._documentEditor.editor.onBackSpace(); this._documentEditor.editor.insertBookmark(`${type}-${bookmarksCount}`); this._documentEditor.editor.insertText("[]"); @@ -155,26 +152,16 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi if (type === "Optional") { if (!content.includes("?")) this._documentEditor.editor.insertText(`?`); } - this.getBookmarks(); - this.insertedBookmark = this.bookmarks.filter(bookmark => - bookmark.name === `${type}-${bookmarksCount}`)[0]; + this.createBookmarks(); + this.insertedBookmark = this.bookmarks.filter( + bookmark => bookmark.name === `${type}-${bookmarksCount}` + )[0]; this.isFirstNextNavigation = true; this.isFirstPreviousNavigation = true; this.selectBookmark(`${type}-${bookmarksCount}`, true); this.selectTitle(title, `${type}-${bookmarksCount}`); } - getBookmarks(setColor = true): void { - const editorBookmarks = this._documentEditor.getBookmarks(); - this.updateBookmark(editorBookmarks); - this.removeEmptyField(editorBookmarks); - this.sortByPosition(); - - if (setColor) this.setColor(); - - this._documentEditor.selection.clear(); - } - goToField(title: string): void | string { this._previousBookmarksTitles = [...this._previousBookmarksTitles, title]; const bookmarks = this.bookmarks.filter( @@ -334,12 +321,13 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi bookmarkName.includes("Field") || bookmarkName.includes("Mandatory") || bookmarkName.includes("Optional") || - bookmarkName.includes("Aditive") + bookmarkName.includes("Additive") ) { if (index !== -1) { this.bookmarks = this.bookmarks.map(item => { if (item.name === bookmarkName) { return { + ...item, name: bookmarkName, content, title, @@ -362,6 +350,9 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi start: this._documentEditor.selection.startOffset, end: this._documentEditor.selection.endOffset, }, + additive: bookmarkName.includes("Additive") + ? this.additiveBookmark + : undefined, }, ]; } @@ -467,11 +458,11 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi (this._documentEditor.selection.characterFormat.highlightColor = "#CEEFFE"); } - if (bookmark.name.includes("Aditive")) { + if (bookmark.name.includes("Additive")) { // eslint-disable-next-line @typescript-eslint/ban-ts-comment //@ts-ignore this._documentEditor.selection.characterFormat.highlightColor = - "#403294"; + "#BAE1FE"; this.selectTitle(bookmark.title, bookmark.name, true); } }); @@ -574,7 +565,8 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi } clearReportToCopyContent(): void { - this.getBookmarks(false); + this.additiveListIntance?.closeList(); + this.createBookmarks(false); this.bookmarks.filter(field => { this.selectBookmark(field.name); if (field.name.includes("Field")) { @@ -596,7 +588,7 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi } requiredFields(): boolean { - this.getBookmarks(false); + this.createBookmarks(false); const mandatoriesFields = this.bookmarks.filter( bookmark => bookmark.name.includes("Mandatory") && bookmark.title ); @@ -616,57 +608,19 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi return this.requiredFields(); } - public onSubmit = (event: Event, listView: ListView, dialogObj: Dialog) => { - event.preventDefault(); - const title = document.getElementById("outlined") as HTMLInputElement; - const identifierElement = document.getElementById( - "identifier" - ) as HTMLInputElement; - const phraseElement = document.getElementById("phrase") as HTMLInputElement; - const delimiterStart = document.getElementById( - "delimiter-start" - ) as HTMLInputElement; - const delimiterEnd = document.getElementById( - "delimiter-end" - ) as HTMLInputElement; - - identifierElement.required = false; - phraseElement.required = false; - - const additiveText = listView.localData as unknown as { - identifier: string; - phrase: string; - }[]; - - this.insertAditiveField({ - title: title.value, - delimiterStart: delimiterStart.value, - delimiterEnd: delimiterEnd.value, - aditiveTexts: additiveText, - }); - - dialogObj.hide(); - }; - - private showContextMenuOnSel(): void { - const xPos = 0; - const yPos = 0; - - const menuItems: MenuItemModel[] = [ - { - text: "Cut", - }, - { - text: "Copy", - }, - { - text: "Paste", - }, - ]; + showAdditiveList(additive: IaraAdditiveBookmark, id: string): void { + this.additiveListIntance = new IaraSyncfusionAdditiveList( + this, + additive, + id + ); + } - this._documentEditor.contextMenu.contextMenuInstance.items = menuItems; - this._documentEditor.contextMenu.contextMenuInstance.open(yPos, xPos); + convertOffsetToNumber(offset: string) { + const value = offset.split(";").map(Number); + return value; } + selectBookmark(bookmarkId: string, excludeBookmarkStartEnd?: boolean): void { IaraSyncfusionSelectionManager.selectBookmark( this._documentEditor, diff --git a/src/syncfusion/navigationFields/navigationBookmark.ts b/src/syncfusion/navigationFields/navigationBookmark.ts index aaafbe5..f258e45 100644 --- a/src/syncfusion/navigationFields/navigationBookmark.ts +++ b/src/syncfusion/navigationFields/navigationBookmark.ts @@ -6,6 +6,7 @@ export interface IaraNavigationBookmark { start: string; end: string; }; + additive?: IaraAdditiveBookmark; } export type SortableList = { @@ -14,11 +15,11 @@ export type SortableList = { }; }; -export interface IaraAditiveBookmark { +export interface IaraAdditiveBookmark { title: string; delimiterStart: string; delimiterEnd: string; - aditiveTexts: { + additiveTexts: { identifier: string; phrase: string; }[]; diff --git a/src/syncfusion/shortcuts/templateSearch.ts b/src/syncfusion/shortcuts/templateSearch.ts index 97b00a3..12bd9d6 100644 --- a/src/syncfusion/shortcuts/templateSearch.ts +++ b/src/syncfusion/shortcuts/templateSearch.ts @@ -6,7 +6,12 @@ export class IaraSyncfusionTemplateSearch { private _template: (data: { name: string }) => string; private _listviewInstance: ListView; constructor( - private _dataSource: { name: string; category: string; content: string; id:number }[], + private _dataSource: { + name: string; + category: string; + content: string; + id: number; + }[], private _onTemplateSelected: ( listViewInstance: ListView, dialogObj: Dialog @@ -21,7 +26,7 @@ export class IaraSyncfusionTemplateSearch { `; const customGroupTemplate = (data: { - items: { name: string; category: string; content: string; id: number; }[]; + items: { name: string; category: string; content: string; id: number }[]; }) => { return `
${ @@ -79,8 +84,8 @@ export class IaraSyncfusionTemplateSearch { listObj.dataBind(); if (data.length > 0) { - let atMenuItems = listObj["liCollection"]; - let firstItem = atMenuItems[0] as HTMLElement; + const atMenuItems = listObj["liCollection"]; + const firstItem = atMenuItems[0] as HTMLElement; firstItem.classList.add("e-active"); } } diff --git a/src/syncfusion/toolbar/config.ts b/src/syncfusion/toolbar/config.ts index 17a9853..a6f9a32 100644 --- a/src/syncfusion/toolbar/config.ts +++ b/src/syncfusion/toolbar/config.ts @@ -267,7 +267,7 @@ const toolbarButtonClick = ( navigationFields?.insertField(selectedText, undefined, "Optional"); break; case "AddAdditiveField": - navigationFields?.addAditiveField(); + navigationFields?.addAdditiveField(); break; case "NextField": navigationFields?.nextField(); diff --git a/src/tinymce/navigationFields.ts b/src/tinymce/navigationFields.ts index de9365e..d933bc8 100644 --- a/src/tinymce/navigationFields.ts +++ b/src/tinymce/navigationFields.ts @@ -1,6 +1,5 @@ import { IaraEditorNavigationFieldManager } from "../editor/navigationFields"; -import { IaraAditiveBookmark } from "../syncfusion/navigationFields/navigationBookmark"; - +import { IaraAdditiveBookmark } from "../syncfusion/navigationFields/navigationBookmark"; export class IaraTinyMceNavigationFieldManager extends IaraEditorNavigationFieldManager { nextField(): void { @@ -19,5 +18,5 @@ export class IaraTinyMceNavigationFieldManager extends IaraEditorNavigationField insertField(): void { throw new Error("Method not implemented."); } - aditiveBookmark = {} as IaraAditiveBookmark; + additiveBookmark = {} as IaraAdditiveBookmark; } From 648fb48125dd3f15efa00e8018821269585a5f5e Mon Sep 17 00:00:00 2001 From: Itallo Date: Mon, 2 Sep 2024 10:28:52 -0300 Subject: [PATCH 4/9] feat: improve logic to currentSelection --- src/syncfusion/navigationFields/index.ts | 37 ++++-------------------- 1 file changed, 6 insertions(+), 31 deletions(-) diff --git a/src/syncfusion/navigationFields/index.ts b/src/syncfusion/navigationFields/index.ts index 092f501..0ecd501 100644 --- a/src/syncfusion/navigationFields/index.ts +++ b/src/syncfusion/navigationFields/index.ts @@ -93,6 +93,10 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi this._documentEditor.isReadOnly = true; } } + this.currentSelectionOffset = { + start: this._documentEditor.selection.startOffset, + end: this._documentEditor.selection.endOffset, + }; }; } @@ -181,46 +185,23 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi } nextField(isShortcutNavigation?: boolean): void { - this.currentSelectionOffset = { - start: this._documentEditor.selection.startOffset, - end: this._documentEditor.selection.endOffset, - }; this.getPreviousAndNext(this.currentSelectionOffset); - if (isShortcutNavigation && this.isFirstNextNavigation) this.selectContent( this.insertedBookmark.title, this.insertedBookmark.content, this.insertedBookmark.name ); - else { - this.selectBookmark(this.nextBookmark.name); - } + else this.selectBookmark(this.nextBookmark.name); this.isFirstNextNavigation = false; - this.currentSelectionOffset = { - start: this.nextBookmark.offset.start, - end: this.nextBookmark.offset.end, - }; } previousField(isShortcutNavigation?: boolean): void { - this.currentSelectionOffset = { - start: this._documentEditor.selection.startOffset, - end: this._documentEditor.selection.endOffset, - }; - this.getPreviousAndNext(this.currentSelectionOffset); - if (isShortcutNavigation && this.isFirstPreviousNavigation) this.selectTitle(this.insertedBookmark.title, this.insertedBookmark.name); - else { - this.selectBookmark(this.previousBookmark.name); - } + else this.selectBookmark(this.previousBookmark.name); this.isFirstPreviousNavigation = false; - this.currentSelectionOffset = { - start: this.previousBookmark.offset.start, - end: this.previousBookmark.offset.end, - }; } selectContent(title: string, content: string, bookmarkName: string): void { @@ -491,7 +472,6 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi bookmark => this.findCurrentIndex(currentOffset, bookmark.offset) < 0 ); const previousIndex = index <= 0 ? this.bookmarks.length - 1 : index - 1; - const nextField = index === -1 ? this.bookmarks[0] : this.bookmarks[index]; const previousField = this.checkIsSelectedAndUpdatePrevious(previousIndex); @@ -616,11 +596,6 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi ); } - convertOffsetToNumber(offset: string) { - const value = offset.split(";").map(Number); - return value; - } - selectBookmark(bookmarkId: string, excludeBookmarkStartEnd?: boolean): void { IaraSyncfusionSelectionManager.selectBookmark( this._documentEditor, From e32dad7aab5ae3b8d2ac985840894919102bda9c Mon Sep 17 00:00:00 2001 From: Itallo Date: Thu, 12 Sep 2024 07:33:50 -0300 Subject: [PATCH 5/9] feat: ajusted x position of list --- .../navigationFields/additive.ts/list.ts | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/src/syncfusion/navigationFields/additive.ts/list.ts b/src/syncfusion/navigationFields/additive.ts/list.ts index f93b7f7..5fe6c1d 100644 --- a/src/syncfusion/navigationFields/additive.ts/list.ts +++ b/src/syncfusion/navigationFields/additive.ts/list.ts @@ -14,7 +14,13 @@ export class IaraSyncfusionAdditiveList { create = () => { const contextMenuElement = document.createElement("ul"); contextMenuElement.id = "contextmenu-iara"; - this._instance._documentEditor.element.appendChild(contextMenuElement); + console.log( + this._instance._documentEditor.documentHelper.viewerContainer, + "VIERWR" + ); + this._instance._documentEditor.documentHelper.viewerContainer.appendChild( + contextMenuElement + ); const menuItems = this._additiveField.additiveTexts.map(text => { return { text: text.identifier, @@ -78,17 +84,16 @@ export class IaraSyncfusionAdditiveList { }; customPosition = (listObj: ListView) => { - this._instance._documentEditor.element.style.position = "relative"; + const documentEditorContainer = + this._instance._documentEditor.element.getBoundingClientRect(); const textPosition = this._instance._documentEditor.selection.start.location; - // console.log(this._instance._documentEditor.element, "RULER"); - // console.log(this._instance._documentEditor.hRuler.element, "HRULER"); - const offset = + const rulerOffset = this._instance._documentEditor.hRuler.element.getBoundingClientRect(); - console.log(offset, "textPosition"); - const yPos = 55 + offset.top - textPosition.y; - const xPos = offset.left + textPosition.x; - listObj.element.style.position = "absolute"; + const yPos = rulerOffset.top + textPosition.y; + const xPos = + rulerOffset.left + textPosition.x - documentEditorContainer.left; + listObj.element.style.position = "relative"; listObj.element.style.top = `${yPos}px`; listObj.element.style.left = `${xPos}px`; }; From 472df4af8c0e71a71d774b41ee2380aa65d43019 Mon Sep 17 00:00:00 2001 From: Itallo Date: Thu, 12 Sep 2024 07:42:40 -0300 Subject: [PATCH 6/9] feat: improve layout --- src/syncfusion/navigationFields/additive.ts/list.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/syncfusion/navigationFields/additive.ts/list.ts b/src/syncfusion/navigationFields/additive.ts/list.ts index 5fe6c1d..a72a7ed 100644 --- a/src/syncfusion/navigationFields/additive.ts/list.ts +++ b/src/syncfusion/navigationFields/additive.ts/list.ts @@ -76,7 +76,7 @@ export class IaraSyncfusionAdditiveList { customStyle = (listObj: ListView) => { listObj.element.style.margin = "0"; listObj.element.style.padding = "0"; - listObj.element.style.zIndex = "5"; + listObj.element.style.zIndex = "999"; listObj.element.style.borderColor = "#BAE1FE"; listObj.element.style.borderRadius = "5px"; listObj.element.style.borderStyle = "dotted"; From e1ea8d65021127f336d86fadf7315c395553d373 Mon Sep 17 00:00:00 2001 From: Itallo Date: Thu, 12 Sep 2024 14:28:18 -0300 Subject: [PATCH 7/9] feat: change position value --- src/syncfusion/navigationFields/additive.ts/list.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/syncfusion/navigationFields/additive.ts/list.ts b/src/syncfusion/navigationFields/additive.ts/list.ts index a72a7ed..1f5a5d9 100644 --- a/src/syncfusion/navigationFields/additive.ts/list.ts +++ b/src/syncfusion/navigationFields/additive.ts/list.ts @@ -93,7 +93,7 @@ export class IaraSyncfusionAdditiveList { const yPos = rulerOffset.top + textPosition.y; const xPos = rulerOffset.left + textPosition.x - documentEditorContainer.left; - listObj.element.style.position = "relative"; + listObj.element.style.position = "absolute"; listObj.element.style.top = `${yPos}px`; listObj.element.style.left = `${xPos}px`; }; From fde943b223aac70568aa3a3f58e6d6b71bef4f71 Mon Sep 17 00:00:00 2001 From: Itallo Date: Mon, 16 Sep 2024 09:23:05 -0300 Subject: [PATCH 8/9] improve base --- src/syncfusion/navigationFields/index.ts | 48 ++++++++++++------------ 1 file changed, 25 insertions(+), 23 deletions(-) diff --git a/src/syncfusion/navigationFields/index.ts b/src/syncfusion/navigationFields/index.ts index 0ecd501..479ad0f 100644 --- a/src/syncfusion/navigationFields/index.ts +++ b/src/syncfusion/navigationFields/index.ts @@ -75,29 +75,7 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi end: "", }, }; - this._documentEditor.selectionChange = () => { - if ( - this.blockSelectionInBookmarkCreate && - !this._documentEditor.isReadOnly - ) { - const selectionBookmark = this._documentEditor.selection.getBookmarks(); - selectionBookmark.find(bookmark => bookmark.startsWith("Additive")); - const currentAdditiveField = this.bookmarks.filter( - bookmark => bookmark.name === selectionBookmark[0] - ); - if (currentAdditiveField.length && currentAdditiveField[0].additive) { - this.showAdditiveList( - currentAdditiveField[0].additive, - currentAdditiveField[0].name - ); - this._documentEditor.isReadOnly = true; - } - } - this.currentSelectionOffset = { - start: this._documentEditor.selection.startOffset, - end: this._documentEditor.selection.endOffset, - }; - }; + this._documentEditor.selectionChange = this.selectionChange.bind(this); } addAdditiveField() { @@ -603,4 +581,28 @@ export class IaraSyncfusionNavigationFieldManager extends IaraEditorNavigationFi excludeBookmarkStartEnd ); } + + selectionChange = () => { + if ( + this.blockSelectionInBookmarkCreate && + !this._documentEditor.isReadOnly + ) { + const selectionBookmark = this._documentEditor.selection.getBookmarks(); + selectionBookmark.find(bookmark => bookmark.startsWith("Additive")); + const currentAdditiveField = this.bookmarks.filter( + bookmark => bookmark.name === selectionBookmark[0] + ); + if (currentAdditiveField.length && currentAdditiveField[0].additive) { + this.showAdditiveList( + currentAdditiveField[0].additive, + currentAdditiveField[0].name + ); + this._documentEditor.isReadOnly = true; + } + } + this.currentSelectionOffset = { + start: this._documentEditor.selection.startOffset, + end: this._documentEditor.selection.endOffset, + }; + }; } From d43b66b3e00e97541d404307f44180f57f4b5ddf Mon Sep 17 00:00:00 2001 From: Itallo Date: Mon, 16 Sep 2024 16:36:14 -0300 Subject: [PATCH 9/9] fix: remove log --- src/syncfusion/navigationFields/additive.ts/list.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/syncfusion/navigationFields/additive.ts/list.ts b/src/syncfusion/navigationFields/additive.ts/list.ts index 1f5a5d9..9fcbc22 100644 --- a/src/syncfusion/navigationFields/additive.ts/list.ts +++ b/src/syncfusion/navigationFields/additive.ts/list.ts @@ -14,10 +14,6 @@ export class IaraSyncfusionAdditiveList { create = () => { const contextMenuElement = document.createElement("ul"); contextMenuElement.id = "contextmenu-iara"; - console.log( - this._instance._documentEditor.documentHelper.viewerContainer, - "VIERWR" - ); this._instance._documentEditor.documentHelper.viewerContainer.appendChild( contextMenuElement );