Creating a custom Dialog for Link

[pramanikhimangshu]

Hello,

I am new to the JS api provided to customize Frameworks in Web Author.
As demonstrated in the example of customizing DITA framework by writing custom code using Oxygen JS api in framework.js I could implement the code for attaching the external link.
The current implementation uses :

Code: Select all

var text = window.prompt("Please enter the link attribute");

this prompt to take link value from the user.
Instead of using this prompt I implemented a dialog box with a html input type text and a OK_CANCEL button configuration, but I cannot create the events for buttons(OK and Cancel) displayed in the dialog.
Will appreciate any help there.

Thank you.
Regards,
Himangshu.

[mihai_coanda]

Hello Himangshu,
This is a sample code on how to use a dialog:

Code: Select all

function actionTriggered() {

    if(!myDialog) {

      myDialog = createDialog();

    }



    myDialog.getElement().innerHTML =

      'My custom HTML content';



    myDialog.show();

    myDialog.onSelect(function(e) {

      // The event contains information on the selected button.

      console.log('Event: ', e);

    });

}

More information on the onSelect function and a complete dialog api documentation can be found at https://www.oxygenxml.com/maven/com/oxy ... ialog.html

Regards,
Michael

[pramanikhimangshu]

Hi Michael,

Thank you for your quick reply it worked and I can handle the button clicks for the particular dialog.
One more question is where to add the css file specific to that dialog box html content?

Thank you.
Regards,
Himangshu

[mihai_coanda]

Hello,

The easiest approach to style your HTML would be to use inline styling using the element's "style" attribute.

If you want to have the CSS in a separate file, to load a CSS file from your framework you should add a .css file in your framework's web folder and load it from your framework.js code like :

Code: Select all

sync.util.loadCSSFile(

sync.ext.Registry.extensionURL + "my-custom.css");

Regards,
Michael.

[pramanikhimangshu]

Hi Michael,

Thank you for the quick reply and it was very helpful.
I am currently working on the customization of external links in oxygen web author.
I currently used sync.api.dom.Element to get the href of selection element is already a link or not, but if it is a link then I should change the existing href attribute and not re encapsulate with ro.sync.ecss.extensions.commons.operations.SurroundWithFragmentOperation, my question is how I can set value to an attribute of an element.

Thank you.
Regards,
Himangshu.

[mihai_coanda]

Hello,

You can use the ro.sync.ecss.extensions.commons.operations.ChangeAttributeOperation operation.

Regards,
Mihai

[pramanikhimangshu]

Hello,

Thank you very much for the help, now I can change the attributes of the existing links.

1>I would like to ask is there any JS-Api methods to check for a particular kind of an attribute from all the tags present in the document i.e I need to find all the ELEMENTS from the dita document which have that particular attribute presents in the tags.

Like: <AnyTag particularAttr></AnyTag>

I want to get the array of elements which have particularAttr present.
Please suggest me a way to do this operation.
2>How can stop a dialog from closing after click of Ok and Cancel button configuration

Thank you.
Regards,
Himangshu.

[mihaela]

Hi,

1> Please see our questions and answers about this in the "Finding a particular attribute of tags within the document" topic.
From what I understand, it has the same subject.

2> You can call the preventDefault function on the event:

Code: Select all

e.preventDefault();

Best regards,
Mihaela

[pramanikhimangshu]

HI

Thank you for the previous reply to stop the default propagation.
I want to use the authoraccess variable in JS.
In documentation it is stated : It must have a function called doOperation()
I tried to put a doOperation function in the framework.js file, but I cannot access the authoraccess.
Could you please guide me with this.

Thank you.
Regards,
Himangshu.

[pramanikhimangshu]

Hi,

1> Please see our questions and answers about this in the "Finding a particular attribute of tags within the document" topic.
From what I understand, it has the same subject.

2> You can call the preventDefault function on the event:

Code: Select all

e.preventDefault();

Best regards,
Mihaela

Code: Select all

function buttonClick = function(e)

{

	e.preventDefault();

}

this.dialog.onSelect(buttonClick);

I am getting :
Uncaught TypeError: e.preventDefault is not a function
at URNDialog.buttonClick (<anonymous>:1029:7)
at sync.view.ApiDialog.<anonymous> (workspace-c71778b94e.js:1231)
at sync.view.Dialog.goog.events.EventTarget.fireListeners (workspace-c71778b94e.js:234)
at Function.goog.events.EventTarget.dispatchEventInternal_ (workspace-c71778b94e.js:236)
at sync.view.Dialog.goog.events.EventTarget.dispatchEvent (workspace-c71778b94e.js:231)
at sync.view.Dialog.goog.ui.Dialog.onButtonClick_ (workspace-c71778b94e.js:1138)
at Object.goog.events.fireListener (workspace-c71778b94e.js:224)
at HTMLDivElement.goog.events.handleBrowserEvent_ (workspace-c71778b94e.js:227)
at HTMLDivElement.b (workspace-c71778b94e.js:216)

The type of e is string and not event.
Please help me with this.

Thank you.
Regards,
Himangshu

[cristi_talau]

Hello,

The signature of the callback is documented here: https://www.oxygenxml.com/maven/com/oxy ... ctCallback . Basically, the first argument is the key of the pressed button and the event is the second.

Best,
Cristian

[pramanikhimangshu]

HI

Thank you for the previous reply to stop the default propagation.
I want to use the authoraccess variable in JS.
In documentation it is stated : It must have a function called doOperation()
I tried to put a doOperation function in the framework.js file, but I cannot access the authoraccess.
Could you please guide me with this.

Thank you.
Regards,
Himangshu.

Hello,
Thanks for the reply.
Can I use authoraccess in framework.js?
How would I do this, please guide me with this.
Regards,
Himangshu

[cristi_talau]

Hello,

The ro.sync.ecss.extensions.api.AuthorAccess API is a server-side API. You can implement AuthorOperation-s that run on the server using JS, but the code needs to be placed in a different file. For mode information you can take a look at this sample code: https://github.com/oxygenxml/javascript ... operations .

Best,
Cristian

[pramanikhimangshu]

Hi,

Thank you for the reply it was helpful.
I want to know two more things:

1> Can we use the blue notification box that web author shows during logging in our custom framework using JS-API, if we can can you please tell process, so that displaying user message/notification stay aligned to web author styles.
2> I want my custom dialog box to appear only in certain areas of the document in rest places it should not be appearing. For example I created a Link dialog box using JS, I don't want it to appear when user right clicks selecting the title tag, as we should not allow user to insert link in Title or the root tag like concept, reference .etc. To achieve this use case what is the way forward is there any rule I can place or I have to manually check for all the Tag names that is selected in JS and selectively display and hide the dialog box. Please guide me with this use case.

Thank you.
Regards,
Himangshu.

[cristi_talau]

Hello,

First of all, I would suggest starting new Forum posts for each of your problems.

Regarding your questions:
1) We have such an API: workspace.getNotificationManager().showInfo("message");
2) Currently, the only feasible way is to list those tags manually. You can take a look at all the possible parent elements here: http://docs.oasis-open.org/dita/v1.2/os ... .html#xref .

Best,
Cristian